/* ============================================================
   Floof Digital / Admin Portal Styles
   Matched to floofdigital.com (2026-09-12): deep navy ground, cyan accent,
   Barlow Condensed uppercase display, Inter body, 4px corners.

   Site tokens (copied from floofdigital.com's :root):
     --bg #030d18  --bg-2 #071626  --bg-3 #0c1f34  --bg-4 #132840
     --border #1a3448  --border-hi #1f4060
     --text #dff0fb  --text-dim #6a9ab8  --accent #00c8f0

   NOTE ON TOKEN NAMES: the pages were written against two generations of
   token names (the original Floof set: --navy, --cream, --accent, --bg,
   --border-dk, --text-light ...; and the studio set: --paper, --ink, --dark,
   --surface-2, --line ...). Both are defined here and mapped onto the one
   Floof palette, so no page needed its inline styles rewritten. New work
   should use the site tokens. The override layer further down restyles the
   shared component classes the pages define inline (nav, buttons, tabs,
   pills, fields, panels, hub cards, login card, editorial layouts, rail).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Site tokens */
  --paper:        #030d18;   /* page ground */
  --ink:          #dff0fb;   /* text */
  --dark:         #00c8f0;   /* the one action colour: buttons, active states */
  --dark-hover:   #40ddff;
  --on-dark:      #030d18;   /* text on the action colour */
  --slab:         #132840;   /* raised dark slab (composer, hot stat) */
  --surface-2:    #071626;
  --surface-3:    #0c1f34;
  --line:         #1a3448;
  --line-strong:  #1f4060;
  --muted-ink:    #6a9ab8;
  --dim-ink:      #4d7590;

  /* Original Floof names */
  --navy:        #030d18;
  --navy-mid:    #071626;
  --navy-light:  #132840;
  --cream:       #071626;
  --cream-dark:  #0c1f34;
  --warm-white:  #030d18;
  --white:       #ffffff;
  --text:        #dff0fb;
  --muted:       #6a9ab8;
  --accent:      #00c8f0;
  --accent-lt:   #40ddff;
  --accent-dk:   #0099be;
  --border:      #1a3448;
  --radius:      4px;
  --shadow:      0 4px 32px rgba(0,0,0,0.35);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.5);
  --trans:       0.2s ease;

  --bg:          #030d18;
  --bg-2:        #071626;
  --bg-3:        #0c1f34;
  --bg-4:        #132840;
  --surface:     #071626;
  --border-dk:   #1a3448;
  --border-dk-hi:#1f4060;
  --text-light:  #dff0fb;
  --text-dim:    #6a9ab8;

  --dc-dark:   #030d18;
  --dc-light:  #dff0fb;
  --dc-accent: #00c8f0;
  --dc-warm:   #071626;

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
}

html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
  color-scheme: dark;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
a { color: inherit; text-decoration: none; }

/* ---- Brand marks ---- */
.wordmark { display: block; height: 30px; width: auto; border-radius: 3px; }
.wordmark-light { display: block; height: 30px; width: auto; }
.rail-icon { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.rail-brand { display: flex; flex-direction: column; line-height: 1; margin-left: 10px; }
.rail-brand b { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.rail-brand i { font-style: normal; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-top: 3px; }

.display { font-family: var(--font-display); font-weight: 800; line-height: 1.0; letter-spacing: -0.01em; text-transform: uppercase; }
.display .accent { color: var(--accent); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; }

.label { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.label-navy { color: var(--accent); }
.label-gold { color: var(--accent); }

/* ---- Buttons: the site's one action, cyan on navy ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; border: 1px solid transparent; transition: background var(--trans), color var(--trans), border-color var(--trans), transform 0.15s;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--on-dark); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-lt); border-color: var(--accent-lt); transform: translateY(-1px); }
.btn-outline-dark { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-outline-dark:hover { background: var(--accent); color: var(--on-dark); }
.btn-outline-light { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-outline-light:hover { border-color: var(--accent); color: var(--accent); }
.btn-gold { background: var(--accent); color: var(--on-dark); border-color: var(--accent); }
.btn-gold:hover { background: var(--accent-lt); border-color: var(--accent-lt); }
.btn-white { background: var(--surface-3); color: var(--ink); border-color: var(--line-strong); }
.btn-white:hover { border-color: var(--accent); }
.btn-lg { padding: 16px 34px; font-size: 1.1rem; }
.btn-block { width: 100%; }

/* ---- Modal ---- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(3,13,24,0.8); z-index: 1000; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface-2); border-radius: 6px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 40px; position: relative; box-shadow: var(--shadow-lg); border: 1px solid var(--line-strong); }
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--muted-ink); cursor: pointer; }
.modal-close:hover { color: var(--ink); }

/* ============================================================
   OVERRIDE LAYER
   Pages carry their own <style> blocks. Every rule here is prefixed with
   `body` so it outranks a page's single-class rule of the same name without
   needing !important, except where the page itself used !important.
   ============================================================ */

/* Nav (legacy top bars; hidden once the rail is up, kept for the pages' scripts) */
body .admin-nav, body .hub-nav {
  background: rgba(3,13,24,0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
body .admin-nav::after, body .hub-nav::after { display: none; }
body .admin-nav-label, body .hub-nav-label { color: var(--muted-ink); border-left: 1px solid var(--line); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
body .admin-nav-link { color: var(--muted-ink); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.92rem; font-weight: 600; padding: 6px 12px; border-radius: var(--radius); border: 1px solid transparent; }
body .admin-nav-link:hover { color: var(--ink); background: var(--surface-3); }
body .admin-nav-link.active { color: var(--on-dark) !important; background: var(--accent); border-color: var(--accent) !important; }
body .admin-user-name, body .hub-user-name { color: var(--muted-ink); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
body .admin-logout-btn, body .hub-logout-btn { border: 1px solid var(--line-strong); color: var(--muted-ink); background: transparent; border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 600; padding: 6px 12px; }
body .admin-logout-btn:hover, body .hub-logout-btn:hover { border-color: var(--accent); color: var(--accent); }
body .hub-role-badge { background: rgba(0,200,240,0.12); color: var(--accent); border: 1px solid rgba(0,200,240,0.3); border-radius: var(--radius); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }

/* Page heads: Barlow Condensed uppercase, white, cyan eyebrow */
body .page-title, body .blog-title, body .hub-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; font-weight: 800; color: var(--white); }
body .page-sub, body .blog-sub, body .hub-sub { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.95rem; color: var(--muted-ink); }
body .hub-eyebrow, body .pm-eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; font-weight: 700; color: var(--accent); }
body .panel-h { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.05rem; font-weight: 700; color: var(--white); }
body .credits { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted-ink); }
body .credits b { color: var(--accent); }

/* Buttons */
body .btn-a {
  background: var(--accent); border: 1px solid var(--accent); color: var(--on-dark); border-radius: var(--radius);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.98rem; font-weight: 700; padding: 10px 20px;
}
body .btn-a:hover { background: var(--accent-lt); border-color: var(--accent-lt); color: var(--on-dark); }
body .btn-b {
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--radius);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.94rem; font-weight: 600; padding: 9px 18px;
}
body .btn-b:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
body .btn-b.on { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
body .btn-sm { padding: 6px 12px; font-size: 0.84rem; }
body .btn-danger { color: #ff6b6b; border-color: rgba(255,107,107,0.4); }
body .btn-danger:hover { background: rgba(255,107,107,0.1); border-color: #ff6b6b; color: #ff6b6b; }
body .btn-a:disabled, body .btn-b:disabled { opacity: 0.4; }
body .df-jump-link, body .df-cancel-btn, body .btn-action { border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

/* Tabs and pills */
body .tab { border: 1px solid var(--line); background: transparent; color: var(--muted-ink); border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.92rem; font-weight: 600; padding: 7px 14px; }
body .tab:hover { color: var(--ink); border-color: var(--line-strong); }
body .tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
body .tab span { opacity: 0.65; }
body .pill { border-radius: var(--radius); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; font-weight: 700; padding: 3px 9px; }

/* Fields */
body label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; font-weight: 700; color: var(--muted-ink); }
body input[type=text], body input[type=url], body input[type=date], body input[type=number], body input[type=email], body input[type=password], body input[type=datetime-local], body textarea, body select {
  background: var(--surface-3); border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--radius); color-scheme: dark;
}
body input:focus, body textarea:focus, body select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,200,240,0.15); }
body input::placeholder, body textarea::placeholder { color: var(--dim-ink); }
body .hint { color: var(--muted-ink); }
body .hint.err { color: #ff6b6b; }
body .hint.ok { color: #3ddc97; }

/* Surfaces */
body .panel, body .post-row, body .p-row, body .site-bar, body .block, body .chat, body .stat, body .callout, body .preview-bar, body .toolbar {
  background: var(--surface-2); border-color: var(--line); border-radius: var(--radius);
}
body .toolbar { border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; }
body #body { border-radius: 0 0 var(--radius) var(--radius); }
body .block-body { border-top-color: var(--line); }
body .block-h button { border-radius: var(--radius); border-color: var(--line); color: var(--muted-ink); }
body .block-h button:hover { color: var(--accent); border-color: var(--accent); }
body .preview-frame { border-color: var(--line); border-radius: var(--radius); background: #fff; }
body .ai-panel, body .chat { border-color: var(--line-strong); }
body .toast { background: var(--accent); color: var(--on-dark); border: none; border-radius: var(--radius); padding: 12px 22px; box-shadow: var(--shadow); font-weight: 600; }
body .toast.err { background: #ff6b6b; color: #1a0505; }
body .thumb, body .cover-prev { border-color: var(--line); border-radius: 3px; }
body .post-row h3, body .p-row h3 { color: var(--white); }
body .stat .k { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; font-weight: 700; color: var(--muted-ink); }
body .stat .v { color: var(--white); font-family: var(--font-display); }
body .stat.hot .v { color: var(--accent); }
body .bar { background: var(--surface-3); }
body .bar i { background: var(--accent); }
body th { color: var(--muted-ink); border-bottom-color: var(--line); background: var(--surface-3); }
body td { border-bottom-color: var(--line); }

/* Hub */
body .hub-grid { gap: 14px; }
body .hub-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px 30px; }
body .hub-card:hover { background: var(--surface-3); border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
body .hub-card::before { display: none; }
body .hub-card-icon { opacity: 1; width: 44px; height: 44px; border-radius: var(--radius); background: var(--surface-3); margin-bottom: 22px; }
body .hub-card-icon svg { stroke: var(--accent); width: 24px; height: 24px; }
body .hub-card-label { color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; font-size: 0.66rem; }
body .hub-card-title { color: var(--white); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0; font-weight: 800; font-size: 1.5rem; }
body .hub-card-desc { color: var(--muted-ink); font-size: 0.9rem; letter-spacing: 0; font-weight: 400; }
body .hub-card-arrow { color: var(--muted-ink); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 0.68rem; }
body .hub-card:hover .hub-card-arrow { color: var(--accent); }
body .hub-card-badge { background: rgba(0,200,240,0.1); color: var(--accent); border: 1px solid rgba(0,200,240,0.3); border-radius: var(--radius); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
body #access-denied { color: var(--muted-ink); text-transform: uppercase; letter-spacing: 0.14em; }

/* Login and activate */
body .pm-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-lg); }
body .pm-heading { color: var(--white); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0; }
body .pm-field label { color: var(--muted-ink); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; font-weight: 700; }
body .pm-field input { background: var(--surface-3); border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--radius); }
body .pm-field input::placeholder { color: var(--dim-ink); }
body .pm-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,200,240,0.15); }
body .pm-btn, body .pm-submit, body button.btn-gold { border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
body .pm-btn { background: var(--accent); color: var(--on-dark); }
body .pm-btn:hover { background: var(--accent-lt); }
body .pm-logo { justify-content: center; }

/* ============================================================
   SURFACES v2. Numbers read as a ledger: one raised slab for the number
   that matters, the rest as bare typographic figures on a hairline. Panels
   are soft slabs on the ground, hub cards lift on hover.
   ============================================================ */

/* Stat ledger (usage page: .stats > .stat, first one .hot) */
body .stats {
  display: grid;
  grid-template-columns: minmax(250px, 1.35fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 0 34px; align-items: end;
  padding: 6px 0 26px; margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
body .stat {
  background: transparent; border: 0; border-radius: 0;
  padding: 10px 0 8px 18px;
  border-left: 2px solid var(--accent);
}
body .stat .k { font-size: 0.68rem; font-weight: 700; color: var(--muted-ink); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 10px; }
body .stat .v {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: 0; line-height: 0.95;
  color: var(--white); font-variant-numeric: tabular-nums;
}
body .stat .v small { display: inline-block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--muted-ink); margin-left: 8px; letter-spacing: 0; }
body .stat.hot {
  background: var(--slab); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 26px 28px 24px; align-self: stretch;
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.7);
}
body .stat.hot .k { color: var(--muted-ink); }
body .stat.hot .v { color: var(--accent); font-size: 3.4rem; }
body .stat.hot .v small { color: var(--muted-ink); }
body .stat.hot .bar { background: rgba(255,255,255,0.08); height: 5px; border-radius: 999px; margin-top: 18px; overflow: hidden; }
body .stat.hot .bar i { background: var(--accent); border-radius: 999px; }
body .stat.hot .bar i.warn { background: #f2b76b; }
body .stat.hot .bar i.over { background: #ff6b6b; }
@media (max-width: 720px) {
  body .stats { grid-template-columns: 1fr 1fr; gap: 18px 22px; }
  body .stats .stat.hot { grid-column: 1 / -1; }
}

/* Clients page figures (.admin-stats > .admin-stat) */
body .admin-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 34px; margin: 0 0 34px; padding: 4px 0 24px;
  border-bottom: 1px solid var(--line);
}
body .admin-stat { background: transparent; border: 0; border-left: 2px solid var(--accent); padding: 8px 0 6px 18px; }
body .admin-stat-num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: 0; color: var(--white); line-height: 0.95; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
body .admin-stat-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; font-weight: 700; color: var(--muted-ink); }
@media (max-width: 720px) { body .admin-stats { grid-template-columns: 1fr 1fr; gap: 18px 22px; } }

/* Panels: soft slabs on the ground */
body .panel {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px 24px; margin-bottom: 16px;
}
body .panel-h { font-size: 1.1rem; margin: 0 0 16px; }
body .panel th { background: transparent; border-bottom: 1px solid var(--line-strong); padding: 10px 12px 10px 0; }
body .panel td { padding: 12px 12px 12px 0; border-bottom-color: var(--line); }
body .panel tr:last-child td { border-bottom: 0; }
body .panel input[type=text], body .panel input[type=number], body .panel select { background: var(--surface-3); }

/* Clients / users lists */
body .admin-filters { background: transparent; border: 0; padding: 0 4px 16px; }
body .admin-filters h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.3rem; font-weight: 700; color: var(--white); }
body .admin-table-wrap {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 22px 44px -32px rgba(0,0,0,0.6);
  padding: 6px 10px;
}
body .admin-table th { background: transparent; border-bottom: 1px solid var(--line-strong); }
body .admin-table tbody tr:last-child td { border-bottom: 0; }

/* Hub cards */
body .hub-grid { gap: 18px; }
body .hub-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px 30px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body .hub-card:hover { background: var(--surface-3); border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(0,0,0,0.7); }
body .hub-card-icon { background: var(--surface-3); border-radius: var(--radius); width: 46px; height: 46px; transition: background .18s ease; }
body .hub-card-icon svg { stroke: var(--accent); }
body .hub-card:hover .hub-card-icon { background: rgba(0,200,240,0.12); }
body .hub-card:hover .hub-card-title { color: var(--accent); }

/* Form text is always ink, whatever a page's inline style says */
body input, body select, body textarea { color: var(--ink); caret-color: var(--accent); }
body input::placeholder, body textarea::placeholder { color: var(--dim-ink); }

/* Page heads on the cloned admin pages (clients, users, email builder) */
body .admin-page-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; font-weight: 800; color: var(--white); }
body .admin-page-sub { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.95rem; color: var(--muted-ink); margin-top: 6px; }
body .label.label-navy { text-transform: uppercase; letter-spacing: 0.2em !important; font-weight: 700; font-size: 0.7rem; color: var(--accent) !important; }
body .label.label-navy::before { display: none !important; }
body .role-badge { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; font-size: 0.66rem; border-radius: var(--radius); background: rgba(0,200,240,0.1); color: var(--accent); border: 1px solid rgba(0,200,240,0.3); }
body .admin-table th { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; font-weight: 700; color: var(--muted-ink); }
body .status-pill { border-radius: var(--radius); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

/* ============================================================
   EDITORIAL PAGES: sticky title on the left, content down the right on
   hairlines, no slabs. (Usage, Clients, Blog, Proposals, Users, Emails.)
   ============================================================ */
body .container.editorial {
  display: grid; grid-template-columns: minmax(240px, 5fr) minmax(0, 8fr);
  column-gap: 72px; row-gap: 28px; align-items: start; max-width: 1200px;
}
body .editorial > .page-head, body .editorial > .admin-page-header {
  grid-column: 1; position: sticky; top: 100px; display: block; margin: 0; padding: 0;
}
body .editorial > #body, body .editorial > .editorial-main { grid-column: 2; min-width: 0; }
body .editorial .page-title, body .editorial .admin-page-title { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 0.92; letter-spacing: -0.01em; margin: 10px 0 14px; }
body .editorial .page-sub, body .editorial .admin-page-sub { font-size: 0.98rem; margin: 0; }
body .editorial > .page-head > div:last-child { margin-top: 34px; min-width: 0 !important; max-width: 320px; }
body .editorial > .page-head label { margin-bottom: 8px; }

/* Usage: the credits figure is the big number, the bar runs under the row */
body .editorial .stats {
  grid-template-columns: minmax(200px, 1.6fr) repeat(auto-fit, minmax(120px, 1fr));
  gap: 0 30px; padding: 0 0 26px; margin: 0 0 8px; border-top: 1px solid var(--accent); border-bottom: 0;
}
body .editorial .stat { padding: 30px 0 0 0; border-left: 0; }
body .editorial .stat + .stat { border-left: 1px solid var(--line); padding-left: 24px; }
body .editorial .stat.hot {
  background: transparent; color: var(--ink); border: 0; border-radius: 0; box-shadow: none;
  padding: 30px 0 0 0; align-self: end;
}
body .editorial .stat.hot .k { color: var(--muted-ink); }
body .editorial .stat.hot .v { color: var(--accent); font-size: 4.6rem; letter-spacing: -0.01em; }
body .editorial .stat.hot .v small { color: var(--muted-ink); }
body .editorial .stat.hot .bar { background: var(--surface-3); margin-top: 20px; height: 4px; }
body .editorial .stat.hot .bar i { background: var(--accent); }
body .editorial .stat.hot .bar i.warn { background: #f2b76b; }
body .editorial .stat.hot .bar i.over { background: #ff6b6b; }

/* Panels become sections on a hairline */
body .editorial .panel { background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; padding: 28px 0 30px; margin: 0; }
body .editorial .panel-h { font-size: 1.4rem; letter-spacing: 0.01em; margin: 0 0 18px; }
body .editorial .panel .grant { align-items: end; }
body .editorial .panel input[type=text], body .editorial .panel input[type=number], body .editorial .panel select { background: var(--surface-3); }
body .editorial .panel th { padding-top: 6px; }

/* Clients: figures, then the list on hairlines with no slab */
body .editorial .admin-stats { border-top: 1px solid var(--accent); border-bottom: 0; padding: 30px 0 26px; margin: 0; gap: 0 30px; }
body .editorial .admin-stat { border-left: 0; padding: 0; }
body .editorial .admin-stat + .admin-stat { border-left: 1px solid var(--line); padding-left: 24px; }
body .editorial .admin-filters { border-top: 1px solid var(--line-strong); padding: 26px 0 14px; margin: 0; }
body .editorial .admin-filters h2 { font-size: 1.4rem; }
body .editorial .admin-filters button { background: var(--accent) !important; color: var(--on-dark) !important; border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase !important; letter-spacing: 0.06em !important; font-size: 0.98rem !important; font-weight: 700 !important; padding: 10px 18px !important; border: 1px solid var(--accent) !important; }
body .editorial .admin-table-wrap { background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0; }
body .editorial .admin-table th { padding-left: 0; }
body .editorial .admin-table td { padding-left: 0; }
body .editorial .admin-count-label { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted-ink); }

@media (max-width: 900px) {
  body .container.editorial { grid-template-columns: 1fr; row-gap: 22px; }
  body .editorial > .page-head, body .editorial > .admin-page-header { position: static; }
  body .editorial .stats { grid-template-columns: 1fr 1fr; gap: 18px 22px; }
  body .editorial .stats .stat.hot { grid-column: 1 / -1; }
  body .editorial .stat + .stat { border-left: 0; padding-left: 0; }
  body .editorial .stat.hot .v { font-size: 3.4rem; }
}

/* ============================================================
   HUB: a typographic menu. Two uneven columns, Creative and Studio, each a
   run of large titles with a quiet line of description. Hover draws a cyan
   underline and lights the title.
   ============================================================ */
body #hub-body { display: block; max-width: 1200px; margin: 0 auto; padding: 108px 32px 120px; }
body .hub-hero { text-align: left; padding: 0; margin: 0 0 64px; max-width: none; position: static; }
body .hub-eyebrow { text-align: left; font-size: 0.7rem; margin: 0 0 14px; }
body .hub-title { text-align: left; font-size: clamp(3rem, 6vw, 5.6rem); line-height: 0.92; letter-spacing: -0.01em; margin: 0 0 16px; }
body .hub-sub { text-align: left; max-width: 34ch; margin: 0; font-size: 0.98rem; line-height: 1.5; text-transform: none; letter-spacing: 0; }
body .hub-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 96px; row-gap: 40px; padding: 0; margin: 0; max-width: none; border: 0; align-items: start; }
body .hub-group h2 { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 26px; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
body .hub-card {
  display: block; position: relative; padding: 0 0 34px; margin: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; overflow: visible;
}
body .hub-card::before { display: none; }
body .hub-card-icon, body .hub-card-arrow { display: none; }
body .hub-card-badge { position: static; display: inline-block; margin: 0 0 8px; }
body .hub-card-label { display: none; }
body .hub-card-title {
  display: inline-block; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.0; letter-spacing: 0; margin: 0 0 8px;
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 0 3px; background-position: 0 100%;
  padding-bottom: 4px; transition: background-size .22s ease, color .18s ease;
}
body .hub-card-desc { max-width: 46ch; font-size: 0.95rem; line-height: 1.5; color: var(--muted-ink); margin: 0; }
body .hub-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body .hub-card:hover .hub-card-title { color: var(--accent); background-size: 100% 3px; }
body .hub-card:hover .hub-card-desc { color: var(--ink); }
@media (max-width: 900px) {
  body #hub-body { padding: 92px 20px 80px; }
  body .hub-hero { margin-bottom: 40px; }
  body .hub-grid { grid-template-columns: 1fr; row-gap: 32px; }
  body .hub-card { padding-bottom: 26px; }
  body .hub-nav, body .admin-nav { padding: 0 16px; }
  body .hub-nav .hub-user-name, body .hub-nav .hub-role-badge, body #navRoleBadge { display: none !important; }
}

/* Fit and finish on the editorial pages */
body .hub-card { display: flex; flex-direction: column; align-items: flex-start; }
body .hub-card-badge { order: 3; margin: 10px 0 0; }
body .hub-card-title { order: 1; }
body .hub-card-desc { order: 2; }
body .editorial .stats { grid-template-columns: minmax(220px, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; row-gap: 0; }
body .editorial .stat.hot { grid-row: 1 / span 2; grid-column: 1; }
body .editorial .stat + .stat { padding-top: 30px; }
body .editorial .stat:nth-child(4), body .editorial .stat:nth-child(5) { padding-top: 22px; }
body .editorial .admin-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; }
body .editorial .admin-stat + .admin-stat { padding-left: 18px; }
body .editorial .admin-stat-num { font-size: 2.2rem; }
body .editorial .admin-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body .editorial .admin-filters h2 { flex: 1 0 100%; margin: 0 0 4px; }
body .editorial .admin-filters .admin-search { flex: 1 1 220px; }
body .editorial .admin-filters .admin-count-label { margin-left: auto; }
@media (max-width: 900px) {
  body .editorial .stats { grid-template-columns: 1fr 1fr; }
  body .editorial .stat.hot { grid-row: auto; grid-column: 1 / -1; }
  body .editorial .admin-stats { grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
  body .editorial .admin-stat + .admin-stat { border-left: 0; padding-left: 0; }
}

/* ============================================================
   SIDE RAIL: gate.js builds <aside class="side-nav"> on every page and sets
   body.has-sidenav. The page's own top header is hidden and the content
   shifts right. Below 900px the rail becomes a top bar with a menu button.
   ============================================================ */
:root { --rail: 232px; }
body.has-sidenav { padding-left: var(--rail); }
body.has-sidenav .admin-nav, body.has-sidenav .hub-nav { display: none !important; }
body.has-sidenav .admin-wrap { padding-top: 44px; }
body.has-sidenav #hub-body { padding-top: 56px; }
body.has-sidenav .editorial > .page-head, body.has-sidenav .editorial > .admin-page-header { top: 40px; }
body.has-sidenav .hub-hero { position: static; }

.side-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail); z-index: 120;
  display: flex; flex-direction: column;
  background: var(--surface-2); border-right: 1px solid var(--line);
  padding: 22px 14px 18px; font-family: var(--font-body);
}
.side-nav-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 22px; }
.side-nav-brand { display: inline-flex; align-items: center; text-decoration: none; }
.side-nav-toggle { display: none; }
.side-nav-links { display: flex; flex-direction: column; gap: 2px; }
.side-nav-link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius);
  color: var(--muted-ink); text-decoration: none; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.side-nav-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.side-nav-link:hover { background: var(--surface-3); color: var(--ink); }
.side-nav-link.active { background: rgba(0,200,240,0.1); color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.side-nav-foot { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.side-nav-name { font-size: 0.84rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.side-nav-role { font-size: 0.66rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.side-nav-out { background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--muted-ink); font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; cursor: pointer; }
.side-nav-out:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 900px) {
  body.has-sidenav { padding-left: 0; padding-top: 58px; }
  .side-nav { bottom: auto; width: 100%; height: auto; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-nav-top { padding: 0 4px; }
  .side-nav-toggle { display: inline-flex; flex-direction: column; gap: 4px; background: transparent; border: 0; padding: 8px; cursor: pointer; }
  .side-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); }
  .side-nav-links, .side-nav-foot { display: none; }
  .side-nav.open .side-nav-links { display: flex; padding-top: 8px; }
  .side-nav.open .side-nav-foot { display: flex; margin-top: 12px; }
  body.has-sidenav .admin-wrap { padding-top: 24px; }
  body.has-sidenav #hub-body { padding-top: 28px; }
}

/* ============================================================
   EDITORIAL LISTS: Blog, Proposals, Users, Emails get the same page
   treatment as Usage and Clients. Rows sit on hairlines, the site bar is a
   section, nothing is boxed.
   ============================================================ */
body .editorial > .blog-head { grid-column: 1; position: sticky; top: 40px; display: block; margin: 0; padding: 0; }
body .editorial .blog-title { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 0.92; letter-spacing: -0.01em; margin: 10px 0 14px; }
body .editorial .blog-sub { font-size: 0.98rem; margin: 0; }
body .editorial > .page-head > div:last-child, body .editorial > .blog-head > div:last-child { margin-top: 34px; }
body .editorial > .page-head > div:last-child select { width: 100%; margin-bottom: 10px; }
body .editorial > .page-head > div:last-child .btn-a { width: 100%; }
body .editorial .site-bar { background: transparent; border: 0; border-top: 1px solid var(--accent); border-radius: 0; padding: 24px 0 18px; margin: 0 0 6px; }
body .editorial .site-bar .field { min-width: 0; }
body .editorial .site-bar select { background: var(--surface-3); }
body .editorial .tabs { padding: 4px 0 10px; }
body .editorial .post-row, body .editorial .p-row {
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding-left: 0; padding-right: 0; margin: 0;
}
body .editorial .post-row:hover, body .editorial .p-row:hover { background: transparent; }
body .editorial .hint { max-width: 62ch; }

body .editorial .staff-table-wrap, body .editorial .admin-table-wrap {
  background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; padding: 26px 0 30px; margin: 0;
}
body .editorial .staff-table-header, body .editorial .admin-filters { background: transparent; border: 0; padding: 0 0 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body .editorial .staff-table-header h2, body .editorial .admin-filters h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.4rem; font-weight: 700; color: var(--white); flex: 1; }
body .editorial .staff-table th, body .editorial .admin-table th { background: transparent; border-bottom: 1px solid var(--line-strong); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; font-weight: 700; color: var(--muted-ink); padding-left: 0; }
body .editorial .staff-table td, body .editorial .admin-table td { padding-left: 0; }
body .editorial > .admin-page-header .btn { margin-top: 30px !important; width: 100%; border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }

/* Emails list */
body .eb-list-wrap { display: grid; grid-template-columns: minmax(240px, 5fr) minmax(0, 8fr); column-gap: 72px; align-items: start; max-width: 1200px; padding: 44px 32px 90px; }
body .eb-list-top { display: block; position: sticky; top: 40px; margin: 0; }
body .eb-list-top .admin-page-title { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 0.92; letter-spacing: -0.01em; margin: 10px 0 14px; }
body .eb-list-top .btn { margin-top: 30px; width: 100%; border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
body .eb-table-wrap { background: transparent; border: 0; border-top: 1px solid var(--accent); padding-top: 8px; }
body .eb-table th { background: transparent; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; font-weight: 700; color: var(--muted-ink); border-bottom: 1px solid var(--line-strong); padding-left: 0; }
body .eb-table td { padding-left: 0; border-bottom-color: var(--line); }
body.has-sidenav .eb-page { padding-top: 0; }
@media (max-width: 900px) {
  body .eb-list-wrap { grid-template-columns: 1fr; padding: 24px 20px 60px; }
  body .eb-list-top { position: static; }
  body .editorial > .blog-head { position: static; }
}

/* Lists get a little more room: narrower title column on the editorial pages */
body .container.editorial, body .eb-list-wrap { grid-template-columns: minmax(220px, 4fr) minmax(0, 9fr); column-gap: 64px; }

/* Collapsed rail: icons only (button at the top of the rail, remembered per browser) */
.side-nav-collapse { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: transparent; color: var(--muted-ink); cursor: pointer; padding: 0; transition: transform .2s ease, color .15s ease; }
.side-nav-collapse svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-nav-collapse:hover { color: var(--accent); border-color: var(--accent); }
body.rail-collapsed { --rail: 68px; }
body.rail-collapsed .side-nav { padding-left: 10px; padding-right: 10px; }
body.rail-collapsed .side-nav-top { flex-direction: column; gap: 14px; padding: 0 0 18px; }
body.rail-collapsed .side-nav-brand { display: none; }
body.rail-collapsed .side-nav-collapse svg { transform: rotate(180deg); }
body.rail-collapsed .side-nav-link { justify-content: center; padding: 11px 0; border-left: 0; }
body.rail-collapsed .side-nav-link span { display: none; }
body.rail-collapsed .side-nav-foot { flex-direction: column; align-items: center; gap: 8px; padding-left: 0; padding-right: 0; }
body.rail-collapsed .side-nav-who { display: none; }
body.rail-collapsed .side-nav-out { font-size: 0; width: 34px; height: 34px; padding: 0; position: relative; }
body.rail-collapsed .side-nav-out::before { content: '\21E5'; font-size: 15px; line-height: 34px; }
.side-nav, body.has-sidenav { transition: width .2s ease, padding-left .2s ease; }
@media (max-width: 900px) {
  .side-nav-collapse { display: none; }
  body.rail-collapsed { --rail: 0px; }
  body.rail-collapsed .side-nav-brand { display: inline-flex; }
  body.rail-collapsed .side-nav-link span { display: inline; }
  body.rail-collapsed .side-nav-who { display: block; }
  body.rail-collapsed .side-nav-out { font-size: 0.82rem; width: auto; height: auto; padding: 6px 12px; }
  body.rail-collapsed .side-nav-out::before { content: none; }
}

/* Left column controls never spill into the list */
body .editorial > .page-head, body .editorial > .blog-head, body .editorial > .admin-page-header { min-width: 0; }
body .editorial > .page-head > div:last-child { max-width: none; }
body .editorial > .page-head > div:last-child select, body .editorial > .page-head > div:last-child .btn-a { width: 100% !important; max-width: 100%; box-sizing: border-box; display: block; }
body .editorial .p-row, body .editorial .post-row { overflow: visible; }

/* No flash: the old top headers are gone for good, the rail's space is
   reserved from the first paint, and only pages that never get a rail
   (sign-in, activate, or a login with no access) opt out with body.no-rail. */
body .admin-nav, body .hub-nav { display: none !important; }
body { padding-left: var(--rail); }
body .admin-wrap { padding-top: 44px; }
body #hub-body { padding-top: 56px; }
body .editorial > .page-head, body .editorial > .blog-head, body .editorial > .admin-page-header { top: 40px; }
body .eb-page { padding-top: 0; }
body.no-rail { padding-left: 0; }
body.no-rail .admin-wrap { padding-top: 24px; }
@media (max-width: 900px) {
  body { padding-left: 0; padding-top: 58px; }
  body.no-rail { padding-top: 0; }
}

/* Plain form fields inside editorial content, whatever the page's own rules */
body .editorial-main input[type=text], body .editorial-main input[type=email], body .editorial-main input[type=number], body .editorial-main select,
body .df-body input[type=text], body .df-body input[type=email], body .df-body select {
  background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink);
  font-family: var(--font-body, inherit); font-size: 0.9rem; padding: 10px 13px; min-height: 42px; box-sizing: border-box;
}
body .editorial-main .admin-table td, body .editorial-main .staff-table td { vertical-align: middle; }
body .editorial-main .admin-table td:last-child, body .editorial-main .staff-table td:last-child { white-space: nowrap; }

/* Tables and small buttons inside editorial content look the same on every page */
body .editorial-main table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
body .editorial-main table th { text-align: left; font-size: 0.68rem; font-weight: 700; color: var(--muted-ink); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-strong); background: transparent; text-transform: uppercase; letter-spacing: 0.1em; }
body .editorial-main table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
body .editorial-main .btn-action, body .df-body .btn-action {
  background: transparent; border: 1px solid var(--line-strong); color: var(--muted-ink); border-radius: var(--radius);
  font-family: var(--font-display); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; cursor: pointer;
}
body .editorial-main .btn-action:hover, body .df-body .btn-action:hover { color: var(--accent); border-color: var(--accent); }
body .editorial-main .btn-action.remove:hover, body .df-body .btn-action.remove:hover { color: #ff6b6b; border-color: #ff6b6b; }
/* Users: the account sections join the house style */
body .editorial .accounts-section-wrap { background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; padding: 26px 0 30px; margin: 0; }
body .editorial .accounts-section-header { background: transparent; border: 0; padding: 0 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body .editorial .accounts-section-header h2, body .editorial .accounts-section-header h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.4rem; font-weight: 700; color: var(--white); flex: 1; margin: 0; }
body .editorial .accounts-section-header span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.8rem; color: var(--muted-ink); }
body .editorial .accounts-section-header button, body .editorial .accounts-section-header .btn { border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 0.88rem; padding: 8px 14px; }
body .editorial .accounts-table th { background: transparent; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; font-weight: 700; color: var(--muted-ink); padding-left: 0; border-bottom: 1px solid var(--line-strong); }
body .editorial .accounts-table td { padding-left: 0; border-bottom: 1px solid var(--line); }
body .editorial .accounts-table button { border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 0.84rem; padding: 5px 11px; }
body .editorial .staff-table button, body .editorial .staff-table .role-badge { border-radius: var(--radius); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 0.8rem; }

/* Workspaces (proposal editor, website builder): use the whole width beside
   the rail. The list views keep the normal reading column. */
body #root.workspace { max-width: none; width: auto; margin: 0; padding-left: 24px; padding-right: 24px; }
body .workspace .ed { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 24px; }
body .workspace .builder { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); gap: 20px; }
body .workspace .preview-frame { height: calc(100vh - 140px); }
body.has-sidenav .workspace .ed-right, body.has-sidenav .workspace .chat { top: 20px; }

/* Composer slabs (proposal draft, website builder): raised navy, cyan send */
body .composer { background: var(--slab); color: var(--ink); border: 1px solid var(--line-strong); }
body .composer textarea { background: transparent; border: 0; color: var(--ink); box-shadow: none; }
body .composer .send { background: var(--accent); color: var(--on-dark); }
body .composer .send:hover { background: var(--accent-lt); }
body .composer-hint { color: var(--muted-ink); }