:root {
  --canvas: #f7f6fa;
  --surface: #ffffff;
  --surface-2: #f1eef7;
  --border: #e3dfeb;
  --border-strong: #9790a5;
  --ink: #211c2d;
  --muted: #635b70;
  --accent: #6335bb;
  --accent-hover: #5126a5;
  --accent-ink: #ffffff;
  --accent-text: #592dab;
  --accent-strong: #4c238f;
  --accent-soft: #eee6fb;
  --accent-border: #d6c2f5;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfebe3;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e6dd;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dfdf;
  --danger-strong: #b91c1c;
  --chart-1: #6335bb;
  --chart-2: #7c285c;
  --chart-3: #7c350c;
  --chart-4: #425605;
  --chart-5: #0b5668;
  --chart-6: #5152a5;

  --font-display: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.06em;
  --radius-card: 1rem;
  --radius-btn: .625rem;
  --radius-input: .625rem;
  --btn-weight: 650;
}

html[data-theme="dark"] {
  --canvas: #14111d;
  --surface: #1e192b;
  --surface-2: #282137;
  --border: #3e3451;
  --border-strong: #726488;
  --ink: #faf7ff;
  --muted: #bdb2ce;
  --accent: #c8aaff;
  --accent-hover: #dbc6ff;
  --accent-ink: #271548;
  --accent-text: #d3b7ff;
  --accent-strong: #e4d1ff;
  --accent-soft: #39264f;
  --accent-border: #634785;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #172f22;
  --success-strong: #58a474;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2517;
  --warning-strong: #ca854f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b191b;
  --danger-strong: #d57575;
  --chart-1: #c8aaff;
  --chart-2: #cb70a4;
  --chart-3: #be6436;
  --chart-4: #98911a;
  --chart-5: #159670;
  --chart-6: #1c9ec8;
}
.workspace-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.workspace-header-inner, .workspace { width: min(100% - 2.5rem, 69rem); margin-inline: auto; }
.workspace-header-inner { min-height: 4.375rem; display: flex; align-items: center; justify-content: space-between; }
.workspace-brand { display: flex; gap: .65rem; align-items: center; line-height: 1.2; text-decoration: none; }
.workspace-brand small { display: block; color: var(--muted); font-size: .75rem; margin-top: .15rem; }
.brand-mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; border-radius: .65rem; background: var(--accent); color: var(--accent-ink); font-weight: 750; font-size: 1.25rem; }
.workspace { padding-block: clamp(1.5rem, 5vw, 3rem); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.page-heading h1 { font-size: clamp(1.85rem, 5vw, 2.65rem); font-weight: var(--display-weight); letter-spacing: -.045em; line-height: 1.15; }
.page-heading p { margin-top: .4rem; color: var(--muted); }
.workspace-grid:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.editor, .workspace-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); min-width: 0; }
.editor { padding: clamp(1rem, 3vw, 1.5rem); }
.editor-head { margin-bottom: 1.25rem; }
.editor-head .input { width: 100%; }
.post-list { display: grid; gap: .75rem; }
.post-card { padding: .875rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--canvas); }
.post-head, .post-foot, .editor-actions, .panel-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.post-controls { display: flex; gap: .125rem; }
.post-controls [hidden] { display: none; }
.post-text { width: 100%; min-height: 7rem; resize: vertical; background: var(--surface); margin-top: .35rem; }
.post-foot { justify-content: flex-end; padding-top: .375rem; font-variant-numeric: tabular-nums; font-size: .75rem; }
.editor-actions { margin-top: 1.25rem; flex-wrap: wrap; }
.form-status { font-size: .875rem; color: var(--muted); }
.form-status:not(:empty) { margin-top: .75rem; }
.form-status[data-error] { color: var(--danger-strong); }
.workspace-side { display: grid; gap: 1.25rem; min-width: 0; }
.panel-head { padding: 1rem 1.125rem; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 1rem; font-weight: 675; }
.post-total { font-size: .75rem; white-space: nowrap; border-radius: 2rem; padding: .2rem .55rem; color: var(--accent-strong); background: var(--accent-soft); }
.preview-list, .drafts-panel { padding: 1rem 1.125rem; }
.preview-list { list-style: none; margin: 0; }
.preview-list li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: .625rem; position: relative; padding-bottom: 1rem; }
.preview-list li:last-child { padding-bottom: 0; }
.preview-list li:not(:last-child)::after { position: absolute; left: .84rem; top: 1.75rem; bottom: 0; width: 1px; background: var(--border); content: ""; }
.preview-avatar { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.preview-copy { padding-top: .175rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
.draft-note, .drafts-panel [data-empty-drafts] { color: var(--muted); font-size: .875rem; }
.draft-note { margin-bottom: .625rem; }
.draft-list { list-style: none; display: grid; gap: .375rem; margin: 0; }
.draft-list .btn { width: 100%; justify-content: flex-start; min-height: 2.5rem; height: auto; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.draft-list .btn[aria-current="true"] { background: var(--accent-soft); color: var(--accent-strong); }
@media (max-width: 45rem) { .workspace-grid:not([hidden]) { grid-template-columns: minmax(0, 1fr); } }
.editor [data-discard][hidden] { display: none; }

.drafts-panel [data-import-drafts] { margin-bottom: .75rem; }
.drafts-panel [data-import-drafts][hidden] { display: none; }