/* =========================================================
   BRAND OS — design tokens
   ========================================================= */
:root {
  --bg:        #FFFFFF;
  --paper:     #F6F5F1;
  --paper-2:   #EFEDE6;
  --ink:       #0A0A0A;
  --ink-2:     #1F1F1F;
  --mute:      #5C5C5C;
  --mute-2:    #8A8780;
  --rule:      #E6E4DE;
  --rule-2:    #D6D3CB;
  --hover:     rgba(10, 10, 10, 0.05);
  --accent:    oklch(0.72 0.16 50);   /* warm orange — used sparingly */
  --accent-ink: oklch(0.42 0.12 50);

  --f-display: "Minion Pro", "EB Garamond", Georgia, serif;
  --f-sans:    "Good Sans", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "Good Sans", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  --sidebar-w: 240px;
  --topbar-h:  56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: #fff; }

/* ====== APP SHELL ====== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  background: var(--bg);
}

/* ====== SIDEBAR ====== */
.sidebar {
  border-right: 1px solid var(--rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sb-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 20px 16px;
  border-bottom: 1px solid var(--rule);
}
.sb-mark {
  width: 24px; height: 24px;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1;
}
.sb-name {
  font-weight: 500;
  letter-spacing: -0.01em;
}
.sb-name em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
}
.sb-logo {
  height: 22px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}
.sb-suffix {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
.sb-workspace {
  padding: 14px 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sb-workspace .ws {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.sb-workspace .ws-dot {
  width: 8px; height: 8px; background: var(--ink); border-radius: 1px;
}
.sb-workspace .ws-name { font-weight: 500; }
.sb-workspace .ws-role {
  color: var(--mute); font-family: var(--f-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
}

.sb-section { padding: 14px 12px 6px; }
.sb-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: left;
  transition: background-color 140ms ease;
}
.sb-section-header:hover { background: var(--hover); }
.sb-section-header .chev {
  color: var(--mute);
  width: 14px;
  height: 14px;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-section-header[aria-expanded="false"] .chev {
  transform: rotate(-90deg);
}
.sb-section-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-section.is-closed .sb-section-body {
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sb-section-body > .sb-nav {
  overflow: hidden;
  min-height: 0;
  padding-top: 0;
  margin-top: 4px;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-section.is-closed .sb-section-body > .sb-nav {
  margin-top: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sb-section.is-closed .sb-section-body > .sb-nav {
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sb-section.is-closed { padding-bottom: 0; }
.sb-link .count { display: none; }
.sb-nav { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 0; }
.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--ink-2);
  text-align: left;
  border-radius: 2px;
  position: relative;
  transition: background-color 140ms ease;
}
.sb-link:hover { background: var(--hover); }
.sb-link.is-active {
  background: var(--ink);
  color: #fff;
}
.sb-link .ico { width: 16px; height: 16px; flex: 0 0 16px; }
.sb-link .count {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--mute);
}
.sb-link.is-active .count { color: rgba(255,255,255,0.65); }

.sb-foot {
  margin-top: auto;
  border-top: 1px solid var(--rule);
  padding: 14px 16px 18px;
  display: flex; align-items: center; gap: 10px;
}
.sb-avatar {
  width: 28px; height: 28px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 500;
  border-radius: 50%;
}
.sb-user { display: flex; flex-direction: column; line-height: 1.2; }
.sb-user .nm { font-size: 12px; font-weight: 500; }
.sb-user .em { font-size: 10px; color: var(--mute); font-family: var(--f-mono); }
.sb-foot .gear { margin-left: auto; color: var(--mute); }

/* ====== TOPBAR ====== */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 5;
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center;
  padding: 0 28px;
  gap: 16px;
}
.crumbs {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--mute);
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.crumbs .cur { color: var(--ink); }
.crumbs .sep { color: var(--rule-2); }

.cmdbar {
  margin-left: 24px;
  flex: 1;
  max-width: 480px;
  display: flex; align-items: center;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 6px 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--mute);
  gap: 8px;
}
.cmdbar kbd {
  margin-left: auto;
  border: 1px solid var(--rule-2);
  background: #fff;
  padding: 1px 5px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--mute);
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tb-btn {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.tb-btn:hover { background: var(--hover); }
.tb-btn.is-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.tb-btn.is-primary:hover { background: var(--ink-2); }
.tb-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--mute);
}
.tb-live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent), transparent 80%);
}

/* ====== PAGE ====== */
.page { padding: 32px 40px 80px; }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  margin-bottom: 32px;
}
.page-head .eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
}
.page-head h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
.page-head h1 em { font-style: italic; }
.page-head .sub {
  color: var(--mute);
  max-width: 56ch;
  margin-top: 14px;
  font-size: 14px;
}
.page-head .head-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--mute);
  text-align: right;
  line-height: 1.6;
}
.page-head .head-meta b { color: var(--ink); font-weight: 500; }

/* ====== UTILITY ====== */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-8  { gap: 8px;  }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.mono { font-family: var(--f-mono); }
.eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 16px;
}
.section-title h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.section-title .meta { font-family: var(--f-mono); font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.1em; }
.hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }

/* ====== OVERVIEW ====== */
.overview-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.kpi {
  padding: 16px 18px;
  border-right: 1px solid var(--rule);
}
.kpi:last-child { border-right: 0; }
.kpi .label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.kpi .num {
  font-family: var(--f-display);
  font-size: 40px;
  line-height: 1;
  margin-top: 10px;
  letter-spacing: -0.02em;
}
.kpi .delta {
  font-family: var(--f-mono);
  font-size: 11px;
  margin-top: 8px;
  color: var(--mute);
}
.kpi .delta.up { color: oklch(0.5 0.13 145); }
.kpi .delta.dn { color: oklch(0.5 0.16 25); }

.tile-list { display: flex; flex-direction: column; }
.tile {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.tile:last-child { border-bottom: 0; }
.tile .thumb {
  width: 80px; height: 56px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.tile .title { font-size: 13px; font-weight: 500; }
.tile .meta { font-family: var(--f-mono); font-size: 10px; color: var(--mute); margin-top: 4px; letter-spacing: 0.04em; }
.tile .right { font-family: var(--f-mono); font-size: 11px; color: var(--mute); text-align: right; }

.quickactions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.qa {
  background: var(--bg);
  border: 0;
  padding: 18px 16px;
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 116px;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.qa:hover { background: var(--hover); }
.qa .ico { width: 18px; height: 18px; }
.qa .ttl { font-size: 13px; font-weight: 500; }
.qa .desc { font-size: 11px; color: var(--mute); font-family: var(--f-mono); line-height: 1.4; }

.activity { display: flex; flex-direction: column; }
.act-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 12px;
}
.act-row .t { font-family: var(--f-mono); font-size: 10px; color: var(--mute); }
.act-row .who { color: var(--mute); }
.act-row .who b { color: var(--ink); font-weight: 500; }
.act-row .tag {
  justify-self: end;
  font-family: var(--f-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  border: 1px solid var(--rule); padding: 2px 6px; color: var(--mute);
}

/* ====== BRAND LIBRARY ====== */
.lib-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
  overflow-x: auto;
}
.lib-tab {
  border: 0; background: transparent;
  padding: 12px 0;
  margin-right: 28px;
  font-size: 13px;
  color: var(--mute);
  position: relative;
  white-space: nowrap;
}
.lib-tab .num { font-family: var(--f-mono); font-size: 10px; margin-left: 6px; color: var(--mute-2); }
.lib-tab.is-active { color: var(--ink); }
.lib-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--ink);
}

/* Logos */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.logo-card {
  background: var(--bg);
  display: flex; flex-direction: column;
  min-height: 220px;
}
.logo-card .lc-canvas {
  flex: 1;
  display: grid; place-items: center;
  padding: 24px;
  background:
    linear-gradient(45deg, transparent 49%, var(--paper-2) 49% 51%, transparent 51%) 0 0 / 12px 12px,
    var(--bg);
}
.logo-card.bg-dark  .lc-canvas { background: var(--ink); }
.logo-card.bg-paper .lc-canvas { background: var(--paper); }
.logo-card.bg-light .lc-canvas { background: var(--bg); }
.logo-card .lc-img {
  display: block;
  max-width: 70%;
  max-height: 140px;
  width: auto; height: auto;
}
.logo-card .lc-foot {
  border-top: 1px solid var(--rule);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.logo-card .lc-meta { display: flex; flex-direction: column; min-width: 0; }
.logo-card .lc-name {
  font-family: var(--f-sans); font-size: 12px; font-weight: 500;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logo-card .lc-sub {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute);
}
.logo-card .lc-dl {
  border: 1px solid var(--rule);
  background: var(--bg);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
  transition: background-color 140ms ease;
}
.logo-card .lc-dl:hover { background: var(--hover); }
.logo-card .lc-desc {
  padding: 0 14px 12px;
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute);
  line-height: 1.45;
}
.logo-group + .logo-group { margin-top: 28px; }
.logo-group-h h4 {
  font-family: var(--f-display);
  font-size: 18px; font-weight: 500;
  margin: 0; color: var(--ink);
}
.lc-formats {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 14px 12px;
}
.lc-format {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.06em; font-weight: 500;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.lc-format:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.brandmark {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 56px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.brandmark.on-dark { color: var(--paper); }

/* Color */
.swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.sw {
  background: var(--bg);
  display: flex; flex-direction: column;
}
.sw .sw-fill { height: 160px; border-bottom: 1px solid var(--rule); }
.sw .sw-meta { padding: 10px 12px; }
.sw .sw-meta .nm { font-size: 12px; font-weight: 500; }
.sw .sw-meta .hex { font-family: var(--f-mono); font-size: 10px; color: var(--mute); margin-top: 3px; letter-spacing: 0.04em; }
.sw .sw-meta .sw-role { color: var(--mute); font-weight: 400; }
.sw .sw-meta .sw-specs {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mute);
}

/* Type */
.type-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.type-row .lbl { font-family: var(--f-mono); font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.12em; }
.type-row .lbl b { display: block; color: var(--ink); font-weight: 500; font-size: 11px; margin-top: 4px; letter-spacing: 0.04em; }
.type-row .lbl .scale { margin-top: 12px; font-family: var(--f-mono); font-size: 10px; line-height: 1.7; color: var(--mute); }
.type-row .specimen-display {
  font-family: var(--f-display);
  font-size: 84px;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.type-row .specimen-display em { font-style: italic; }
.type-row .specimen-sans {
  font-family: var(--f-sans);
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.type-row .specimen-mono {
  font-family: var(--f-mono);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Imagery */
.imagery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.img-card {
  background: var(--paper);
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.img-card.wide { grid-column: span 2; aspect-ratio: 8/5; }
.img-card .ph-stripes {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      var(--paper) 0 8px,
      var(--paper-2) 8px 16px);
}
.img-card .ph-label {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink);
  background: var(--bg);
  padding: 4px 6px;
  letter-spacing: 0.04em;
}
.img-card .ph-meta {
  position: absolute;
  right: 12px; top: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--mute);
}

/* Voice */
.voice-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.voice-card { background: var(--bg); padding: 24px; min-height: 240px; display: flex; flex-direction: column; gap: 14px; }
.voice-card .v-h {
  font-family: var(--f-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.voice-card .v-h em { font-style: italic; }
.voice-card .v-do, .voice-card .v-dont {
  font-size: 12px;
  display: flex; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--rule);
}
.voice-card .v-do .k, .voice-card .v-dont .k {
  font-family: var(--f-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--mute); flex: 0 0 36px;
}

/* ====== STUDIO (CREATE) ====== */
.studio {
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  gap: 0;
  border: 1px solid var(--rule);
  min-height: 640px;
}
.st-col { border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.st-col:last-child { border-right: 0; }
.st-col-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--mute);
  background: var(--paper);
}
.st-col-h .badge {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--mute); padding: 2px 6px;
  border: 1px solid var(--rule);
}

.st-templates { padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.tpl {
  border: 1px solid var(--rule);
  padding: 12px;
  background: var(--bg);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  cursor: pointer;
  align-items: center;
  transition: background-color 140ms ease;
}
.tpl:hover { background: var(--hover); }
.tpl.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.tpl.is-active .tpl-meta { color: rgba(255,255,255,0.6); }
.tpl .tpl-preview {
  width: 56px; height: 56px;
  background: var(--paper-2);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.tpl.is-active .tpl-preview { background: #fff; color: var(--ink); }
.tpl .tpl-name { font-size: 13px; font-weight: 500; }
.tpl .tpl-meta { font-family: var(--f-mono); font-size: 10px; color: var(--mute); margin-top: 2px; letter-spacing: 0.04em; }

.st-canvas {
  flex: 1;
  display: flex; flex-direction: column;
  background: var(--paper);
  padding: 28px;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.st-canvas .canvas-meta {
  width: 100%;
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.ad {
  width: 420px; height: 520px;
  background: var(--bg);
  border: 1px solid var(--rule);
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ad.square { width: 480px; height: 480px; }
.ad.story  { width: 320px; height: 568px; }
.ad.dark { background: var(--ink); color: var(--paper); }
.ad-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.ad.dark .ad-head { color: var(--mute-2); }
.ad-art {
  flex: 1; margin: 0 18px; position: relative;
  background:
    repeating-linear-gradient(135deg,
      var(--paper) 0 10px,
      var(--paper-2) 10px 20px);
  border: 1px solid var(--rule);
}
.ad.dark .ad-art { background: var(--ink-2); border-color: #2a2a2a; }
.ad-art .art-label {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--f-mono); font-size: 10px;
  background: var(--bg); padding: 3px 6px;
  color: var(--ink);
}
.ad-copy { padding: 18px; }
.ad-copy .head {
  font-family: var(--f-display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ad-copy .head em { font-style: italic; }
.ad-copy .sub {
  font-size: 12px;
  color: var(--mute);
  margin-top: 10px;
  max-width: 32ch;
}
.ad.dark .ad-copy .sub { color: var(--mute-2); }
.ad-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}
.ad.dark .ad-foot { border-color: #2a2a2a; }
.ad-foot .cta {
  background: var(--ink); color: #fff; padding: 6px 10px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.12em;
}
.ad.dark .ad-foot .cta { background: var(--paper); color: var(--ink); }

.st-controls { padding: 16px 18px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.ctrl-group .lbl {
  font-family: var(--f-mono); font-size: 10px; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.ctrl-group input[type=text],
.ctrl-group textarea {
  width: 100%;
  font-family: var(--f-sans);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  border-radius: 0;
  resize: vertical;
}
.ctrl-group input:focus,
.ctrl-group textarea:focus {
  outline: 0; border-color: var(--ink);
}
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid var(--rule);
}
.seg button {
  border: 0; background: transparent;
  padding: 7px 4px;
  font-size: 11px;
  border-right: 1px solid var(--rule);
  color: var(--mute);
}
.seg button:last-child { border-right: 0; }
.seg button.is-on { background: var(--ink); color: #fff; }

.gen-button {
  margin-top: 8px;
  width: 100%;
  padding: 12px;
  background: var(--ink);
  color: #fff;
  border: 0;
  font-size: 13px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.gen-button:hover { background: var(--ink-2); }
.gen-button:disabled { opacity: 0.55; cursor: not-allowed; }

.copyvariants { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 0; }
.cv {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.cv:last-child { border-bottom: 0; }
.cv .cv-h { display: flex; justify-content: space-between; align-items: center; }
.cv .cv-k { font-family: var(--f-mono); font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.12em; }
.cv .cv-actions { display: flex; gap: 6px; }
.cv .cv-actions button {
  border: 0; background: transparent; padding: 0;
  font-family: var(--f-mono); font-size: 10px; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cv .cv-actions button:hover { color: var(--ink); }
.cv .cv-text {
  font-size: 13px; margin-top: 6px; line-height: 1.4;
}

/* ====== CONTENT PLAN ====== */
.plan-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
.plan-toolbar .left { display: flex; align-items: center; gap: 16px; }
.plan-toolbar .month {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.plan-toolbar .month em { font-style: italic; }
.plan-toolbar .nav-btn {
  width: 28px; height: 28px; border: 1px solid var(--rule);
  background: transparent; display: grid; place-items: center;
}
.plan-toolbar .filter-pills {
  display: flex; gap: 6px;
}
.pill {
  border: 1px solid var(--rule);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--mute);
  background: transparent;
}
.pill.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.cal-dh {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 8px 12px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--mute); text-transform: uppercase;
  background: var(--paper);
}
.cal-cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  min-height: 124px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.cal-cell.is-otherm { background: var(--paper); }
.cal-cell.is-today .daynum {
  background: var(--ink); color: #fff;
  width: 22px; height: 22px; display: inline-grid; place-items: center;
  border-radius: 50%;
}
.cal-cell .daynum {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink);
}
.cal-cell.is-otherm .daynum { color: var(--mute-2); }
.cal-event {
  font-family: var(--f-sans);
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  background: var(--bg);
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.cal-event:hover { background: var(--hover); }
.cal-event .ch-dot {
  width: 6px; height: 6px; flex: 0 0 6px;
  background: var(--ink);
  border-radius: 50%;
}
.cal-event.ch-paid .ch-dot      { background: var(--accent); }
.cal-event.ch-social .ch-dot    { background: var(--ink); }
.cal-event.ch-email .ch-dot     { background: var(--mute); }
.cal-event.ch-blog .ch-dot      { background: transparent; border: 1px solid var(--ink); border-radius: 50%; box-sizing: border-box; }
.cal-event .ev-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.cal-event .ev-time { font-family: var(--f-mono); font-size: 9px; color: var(--mute); }
.cal-event.is-draft { border-style: dashed; color: var(--mute); }

.plan-queue {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}
.queue-table {
  width: 100%;
  border-top: 1px solid var(--rule);
}
.queue-table .qrow {
  display: grid;
  grid-template-columns: 64px 1.6fr 1fr 0.8fr 0.8fr 80px;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}
.queue-table .qrow.qhead {
  font-family: var(--f-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute);
  padding: 10px 0;
}
.queue-table .qrow .qthumb {
  width: 56px; height: 40px;
  background:
    repeating-linear-gradient(135deg,
      var(--paper) 0 6px, var(--paper-2) 6px 12px);
  border: 1px solid var(--rule);
}
.queue-table .qrow .qtitle { font-weight: 500; }
.queue-table .qrow .qmeta { font-family: var(--f-mono); font-size: 10px; color: var(--mute); margin-top: 2px; letter-spacing: 0.04em; }
.qstatus {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--mute);
}
.qstatus .d { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); }
.qstatus.is-scheduled .d { background: var(--ink); }
.qstatus.is-draft     .d { background: transparent; border: 1px solid var(--mute); }
.qstatus.is-review    .d { background: var(--accent); }
.qstatus.is-live      .d { background: oklch(0.55 0.15 145); }

.legend { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--rule); background: var(--paper); }
.legend h4 { margin: 0 0 4px; font-size: 11px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute); font-weight: 500; }
.legend .li { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.legend .li .d { width: 8px; height: 8px; border-radius: 50%; }
.legend .li .d.paid { background: var(--accent); }
.legend .li .d.social { background: var(--ink); }
.legend .li .d.email { background: var(--mute); }
.legend .li .d.blog { border: 1px solid var(--ink); }

/* ====== INSIGHTS ====== */
.chart {
  border: 1px solid var(--rule);
  padding: 24px;
  background: var(--bg);
}
.chart svg { display: block; width: 100%; height: auto; }
.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 56px;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule);
}
.bar-row:last-child { border-bottom: 0; }
.bar-row .nm { font-size: 12px; }
.bar-row .vol { font-family: var(--f-mono); font-size: 11px; color: var(--mute); text-align: right; }
.bar-track { height: 6px; background: var(--paper); position: relative; }
.bar-fill { height: 100%; background: var(--ink); }

/* ====== TWEAK-DRIVEN VISIBILITY ====== */
body[data-tw-hero="off"]     .page-head h1,
body[data-tw-subtitle="off"] .page-head .sub,
body[data-tw-headmeta="off"] .page-head .head-meta,
body[data-tw-eyebrows="off"] .page-head .eyebrow {
  display: none;
}
/* When the hero is off and there is no subtitle either, collapse the head spacing */
body[data-tw-hero="off"][data-tw-subtitle="off"][data-tw-headmeta="off"] .page-head {
  padding-bottom: 12px;
  margin-bottom: 20px;
}
body[data-tw-hero="off"][data-tw-subtitle="off"][data-tw-eyebrows="off"][data-tw-headmeta="off"] .page-head {
  display: none;
}

/* scrollbars */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--rule-2); }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   PEOPLE · ROLES · APPROVAL FLOWS · PIPELINE
   ============================================================ */

/* "Visa som" switcher in topbar */
.view-as { position: relative; }
.view-as-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--rule);
  background: var(--bg);
  font-family: var(--f-sans); font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.view-as-btn:hover { background: var(--hover); border-color: var(--rule-2); }
.view-as-label {
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute);
  padding-right: 4px; border-right: 1px solid var(--rule); margin-right: 2px;
}
.view-as-avatar {
  width: 22px; height: 22px;
  font-family: var(--f-sans); font-size: 9px; font-weight: 500;
  background: var(--ink); color: #fff;
  border-radius: 50%;
  display: inline-grid; place-items: center;
}
.view-as-meta { display: inline-flex; flex-direction: column; line-height: 1.1; text-align: left; }
.view-as-name { font-weight: 500; }
.view-as-role { font-size: 10px; color: var(--mute); letter-spacing: 0.04em; }
.view-as-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 300px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(10,10,10,0.12);
  z-index: 100;
  padding: 4px;
  max-height: 70vh; overflow-y: auto;
}
.view-as-group + .view-as-group { margin-top: 6px; }
.view-as-org {
  padding: 6px 8px 2px;
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
}
.view-as-row { display: flex; flex-direction: column; line-height: 1.2; }

/* People page */
.people-section { margin-top: 28px; }
.people-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.invite-form {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  align-items: center;
}
.invite-form .text-input { font-size: 12px; }
.invite-form button { white-space: nowrap; }
.role-warning {
  font-family: var(--f-sans); font-size: 12px;
  color: var(--mute);
  background: var(--paper);
  border: 1px dashed var(--rule-2);
  padding: 10px 14px;
  margin: 8px 0 16px;
}
.role-warning em { font-style: italic; color: var(--ink); }
.people-table { border-top: 1px solid var(--rule); margin-top: 4px; }
.ppl-row, .ppl-head {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 1fr 1.2fr 100px;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-sans); font-size: 12px;
}
.ppl-head {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute); background: var(--paper);
}
.ppl-person { display: inline-flex; align-items: center; gap: 10px; }
.ppl-name { font-weight: 500; color: var(--ink); }
.ppl-em, .ppl-org { color: var(--mute); }
.ppl-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
}
.ppl-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st-green); }
.ppl-status.is-invited::before { background: var(--st-amber); }
.ppl-status.is-invited { color: var(--mute); }

/* Settings tabs */
.settings-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.settings-pane { padding: 0; }
.settings-pane.two-col {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}

/* Roles list (also reused for Flows list) */
.roles-list {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.role-row {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 0; background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.role-row:hover { background: var(--hover); }
.role-row.is-active { background: var(--bg); }
.role-row-name { font-family: var(--f-sans); font-size: 13px; font-weight: 500; color: var(--ink); }
.role-row-meta {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.08em; color: var(--mute);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.role-tag {
  font-size: 9px; letter-spacing: 0.06em;
  padding: 1px 6px;
  background: var(--ink); color: #fff;
  border-radius: 8px;
}
.role-add { margin-top: 8px; justify-content: center; }

/* Roles detail (permission grid) */
.roles-detail .section-title:not(:first-child) { margin-top: 16px; }
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.perm-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px;
  border: 1px solid var(--rule);
  cursor: pointer;
  background: var(--bg);
  transition: background-color 140ms ease, border-color 140ms ease;
}
.perm-row:hover { background: var(--hover); }
.perm-row.is-on { border-color: var(--ink); background: var(--paper); }
.perm-row input { margin-top: 2px; }
.perm-meta { display: flex; flex-direction: column; gap: 2px; }
.perm-label { font-family: var(--f-sans); font-size: 12px; font-weight: 500; color: var(--ink); }
.perm-desc  { font-family: var(--f-sans); font-size: 11px; color: var(--mute); line-height: 1.4; }

/* Flow stage editor */
.flow-stages { display: flex; flex-direction: column; gap: 8px; }
.flow-stage {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px;
  border: 1px solid var(--rule);
  background: var(--bg);
}
.flow-stage-idx {
  width: 28px; height: 28px;
  background: var(--ink); color: #fff;
  font-family: var(--f-sans); font-size: 12px; font-weight: 500;
  border-radius: 50%;
  display: grid; place-items: center;
}
.flow-stage-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.flow-stage-ops { display: inline-flex; gap: 4px; }

/* Approval pipeline (drawer + reusable) */
.pipeline-label {
  display: flex; align-items: center; justify-content: space-between;
}
.pl-progress {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute);
}
.pipeline {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 14px 16px;
}
.pl-stage {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 6px 0;
}
.pl-rail { display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
.pl-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--rule-2);
  display: grid; place-items: center;
  flex: 0 0 20px;
}
.pl-stage.is-done .pl-dot { background: var(--st-green); border-color: var(--st-green); }
.pl-stage.is-current .pl-dot { border-color: var(--ink); background: var(--bg); }
.pl-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink);
  animation: pl-pulse 1.6s ease-in-out infinite;
}
@keyframes pl-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(0.6); opacity: 0.4; }
}
.pl-line {
  width: 1.5px; flex: 1; min-height: 18px;
  background: var(--rule-2);
  margin-top: 2px;
}
.pl-stage.is-done .pl-line { background: var(--st-green); }
.pl-body { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; }
.pl-label { font-family: var(--f-sans); font-size: 13px; font-weight: 500; color: var(--ink); }
.pl-meta { font-family: var(--f-sans); font-size: 11px; color: var(--mute); }
.pl-meta b { font-weight: 500; color: var(--ink); }
.pl-action { display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; }
.pl-need {
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute); font-style: italic;
}

/* Platform settings */
.role-tag.is-on  { background: var(--st-green); }
.role-tag.is-off { background: var(--rule-2); color: var(--mute); }
.toggle-row {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-sans); font-size: 13px;
  color: var(--ink); cursor: pointer;
}
.field-help {
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute); line-height: 1.5;
}
.format-list { display: flex; flex-direction: column; gap: 10px; }
.format-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--bg);
}
.format-row.is-off { opacity: 0.5; }
.format-aspect {
  width: 56px; max-height: 56px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.format-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.format-dims {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-size: 11px; color: var(--mute);
}
.text-input.mini { width: 64px; padding: 4px 6px; font-size: 12px; }
.format-dims .ratio {
  padding: 2px 6px;
  background: var(--paper);
  border-radius: 8px;
  font-size: 10px; letter-spacing: 0.04em;
}
.format-dims select.text-input { width: auto; padding: 4px 6px; }
.format-ops { display: inline-flex; gap: 4px; }

/* ===== Studio v2 ===== */
.studio-step {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.studio-step:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.studio-step-h {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
}
.studio-step-h h3 {
  font-family: var(--f-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em; margin: 0;
  color: var(--ink);
}
.studio-step-h .step-i {
  width: 28px; height: 28px;
  background: var(--ink); color: #fff;
  font-family: var(--f-sans); font-size: 12px; font-weight: 500;
  border-radius: 50%;
  display: grid; place-items: center;
}
.studio-step-h .meta {
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.06em;
}
.studio-brief {
  display: grid; grid-template-columns: 1fr 280px; gap: 24px;
}
.brief-area { min-height: 140px; }
.brief-side { display: flex; flex-direction: column; gap: 12px; }
.brief-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* Copy variants per channel */
.copy-by-channel { display: flex; flex-direction: column; gap: 16px; }
.cbc {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.cbc-h { display: flex; align-items: center; gap: 8px; }
.cbc-name { font-family: var(--f-sans); font-size: 13px; font-weight: 500; }
.cbc-count {
  margin-left: auto; margin-right: 6px;
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.08em; color: var(--mute);
  text-transform: uppercase;
}
.cbc-variants { display: flex; gap: 6px; flex-wrap: wrap; }
.variant-pill {
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: 3px 10px;
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.variant-pill:hover { background: var(--hover); color: var(--ink); }
.variant-pill.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Media step — uploaders, channel rows, draggable crop */
.studio-media { display: flex; flex-direction: column; gap: 22px; }

.media-uploader {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  border: 1px dashed var(--rule-2);
  background: var(--paper);
}
.media-uploader.is-compact {
  flex-direction: row; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  margin-left: auto;
}
.media-uploader-head { display: flex; align-items: center; gap: 8px; }
.media-uploader-label {
  font-family: var(--f-sans); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
}
.media-kind-tag {
  font-family: var(--f-sans); font-size: 10px;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--ink); color: #fff;
  letter-spacing: 0.04em;
}
.media-uploader-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.media-filename {
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 280px;
}

.channel-row {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--rule);
}
.channel-row-h {
  display: flex; align-items: center; gap: 10px;
}
.channel-row-name {
  font-family: var(--f-display); font-size: 18px;
  font-weight: 500; color: var(--ink);
}
.channel-row-count {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
}
.channel-row-cards {
  display: flex; gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.fp {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 8px;
  width: 240px;
}
.fp-h {
  display: flex; align-items: center; gap: 8px;
  min-height: 18px;
}
.fp-name { font-family: var(--f-sans); font-size: 12px; font-weight: 500; color: var(--ink); }
.fp-dims {
  margin-left: auto;
  font-family: var(--f-sans); font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.04em;
}
.fp-reset {
  border: 1px solid var(--rule);
  background: var(--bg);
  width: 22px; height: 22px;
  padding: 0;
  font-size: 12px;
  color: var(--mute);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.fp-reset:hover { background: var(--hover); color: var(--ink); }
.fp-frame {
  position: relative; width: 100%;
  background: var(--paper-2);
  overflow: hidden;
  max-height: 420px;
  border: 1px solid var(--rule);
}
.fp-frame.has-media { cursor: grab; }
.fp-frame.is-dragging { cursor: grabbing; }
.fp-frame img,
.fp-frame video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; -webkit-user-drag: none;
  pointer-events: none;
}
.fp-empty {
  display: grid; place-items: center; height: 100%;
  color: var(--mute-2); font-family: var(--f-sans); font-size: 11px;
}
.fp-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.fp-mark:active { cursor: grabbing; }
.fp-mark svg { pointer-events: none; }

/* ─────────────────────────────────────────────────────────────
   Platform chrome — wraps .fp-frame with platform-specific UI
   so the preview reads as how it'll actually appear in-feed.
   ───────────────────────────────────────────────────────────── */
.fp-kind-ig-feed,
.fp-kind-li-feed,
.fp-kind-fb-feed,
.fp-kind-yt-video { width: 280px; }

.chrome {
  background: #fff;
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  font-family: var(--f-sans);
  color: #262626;
  font-size: 12px;
  overflow: hidden;
}
.chrome .fp-frame { border: 0; max-height: 460px; }

.chrome-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
}
.chrome-meta { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.chrome-meta.col { flex-direction: column; align-items: flex-start; gap: 0; }
.chrome-name { font-weight: 600; font-size: 12px; color: #262626; }
.chrome-name.light { color: #fff; }
.chrome-sub { font-size: 11px; color: var(--mute); display: inline-flex; align-items: center; gap: 4px; }
.chrome-sub.xs { font-size: 10px; }
.chrome-sub.light { color: rgba(255,255,255,0.85); }
.chrome-avatar {
  display: inline-grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-weight: 600; font-size: 10px;
  overflow: hidden;
}
.chrome-avatar.is-light { background: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(8px); }
.chrome-avatar.has-logo { background: #fff; border: 1px solid var(--rule); }
.chrome-avatar.has-logo img { width: 70%; height: 70%; object-fit: contain; }
.chrome-mute { color: var(--mute-2); font-style: italic; }
.chrome-pf {
  display: inline-flex; align-items: center;
  color: var(--mute);
  margin-left: auto;
}
.chrome-pf + svg { margin-left: 8px; }
.chrome-pf.light { color: rgba(255,255,255,0.85); margin-left: auto; }

.chrome-actions {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 10px;
  color: #262626;
}
.chrome-actions svg { display: block; }
.chrome-spacer { flex: 1; }
.chrome-caption {
  padding: 4px 10px 10px;
  line-height: 1.35;
  font-size: 12px;
  color: #262626;
}
.chrome-caption strong { font-weight: 600; margin-right: 6px; }
.chrome-caption.light { color: #fff; }

/* Instagram feed specifics */
.chrome-ig-feed .chrome-actions { padding-top: 6px; padding-bottom: 4px; }

/* Full-bleed: story / reel / tiktok / shorts — overlays on top of frame */
.chrome-full {
  position: relative;
  background: #000;
  border: 0;
}
.chrome-full .fp-frame {
  background: #111;
}
.chrome-top-overlay {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
  pointer-events: none;
}
.chrome-overlay-row { display: flex; align-items: center; gap: 8px; }
.chrome-progress {
  display: flex; gap: 4px; height: 2px; width: 100%;
}
.chrome-progress span { flex: 1; background: rgba(255,255,255,0.95); }
.chrome-progress span.dim { background: rgba(255,255,255,0.35); }
.chrome-bottom-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  pointer-events: none;
  color: #fff;
}
.chrome-bottom-overlay .chrome-caption { padding: 0; color: #fff; }
.chrome-story-cta {
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 18px;
  font-size: 11px; color: #fff;
  display: inline-block;
}
.chrome-rail {
  position: absolute; right: 8px; bottom: 90px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #fff;
  pointer-events: none;
}
.chrome-rail svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.chrome-rail-n { font-size: 10px; font-weight: 600; margin-bottom: 4px; }

/* LinkedIn */
.chrome-li-feed .chrome-bar { padding: 10px 12px; align-items: flex-start; }
.chrome-caption.li { padding: 0 12px 8px; font-size: 12px; }
.chrome-promoted {
  margin-top: 6px;
  font-size: 10px; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.chrome-actions.li, .chrome-actions.fb {
  border-top: 1px solid var(--rule);
  padding: 6px 8px;
  gap: 4px;
  justify-content: space-around;
}
.chrome-react {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--mute);
  padding: 4px 6px;
}

/* Facebook */
.chrome-fb-feed .chrome-bar { padding: 10px 12px; align-items: flex-start; }
.chrome-caption.fb { padding: 0 12px 8px; }

/* YouTube video */
.chrome-yt-frame { position: relative; }
.chrome-yt-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  opacity: 0.85;
}
.chrome-yt-time {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,0.75); color: #fff;
  font-size: 10px; padding: 1px 4px;
  border-radius: 2px;
}
.chrome-yt-row {
  display: flex; gap: 10px; padding: 10px 4px;
}
.chrome-yt-title { font-weight: 600; font-size: 12px; color: #262626; line-height: 1.3; }

/* Newsletter */
.chrome-nl-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  font-size: 11px; color: var(--mute);
  border-bottom: 1px solid var(--rule);
}
.chrome-nl-from { color: #262626; font-weight: 500; }
.chrome-nl-date { margin-left: auto; }
.chrome-nl-subject {
  padding: 10px 10px 8px;
  font-family: var(--f-display); font-size: 16px;
  color: #262626;
}

/* Web hero */
.chrome-web-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.chrome-web-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); }
.chrome-web-url {
  margin-left: 8px;
  font-family: var(--f-sans); font-size: 10px;
  color: var(--mute);
  background: #fff; padding: 2px 8px; border: 1px solid var(--rule);
  border-radius: 10px; flex: 1; text-align: center;
}

/* Active marks toolbar */
.staged-marks {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.staged-marks-h {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 2px;
}
.staged-mark {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.staged-mark-name { flex: 1; }
.staged-mark-pos  { margin-left: auto; }
.staged-mark-thumb {
  width: 36px; height: 24px;
  background: var(--bg);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
}
.staged-mark-thumb svg { max-width: 80%; max-height: 80%; }
.staged-mark-name { font-family: var(--f-sans); font-size: 12px; color: var(--ink); font-weight: 500; }
.staged-mark-scale {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute);
}
.staged-mark-scale input[type="range"] { width: 140px; accent-color: var(--ink); }
.staged-mark-scale .scale-val {
  font-family: var(--f-sans); font-size: 11px; font-weight: 500;
  color: var(--ink);
  min-width: 38px; text-align: right;
}
.staged-mark-pos {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.06em; color: var(--mute);
  min-width: 64px;
}

/* Brand marks palette */
.brand-mark-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.brand-mark-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px;
  border: 1px solid var(--rule);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.brand-mark-card:hover { background: var(--hover); }
.brand-mark-card.is-on { border-color: var(--ink); background: var(--paper); }
.brand-mark-card svg { display: block; width: 100%; height: 44px; }
.brand-mark-name { font-family: var(--f-sans); font-size: 12px; font-weight: 500; color: var(--ink); }
.brand-mark-state {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.08em; color: var(--mute);
  text-transform: uppercase;
}
.brand-mark-card.is-on .brand-mark-state { color: var(--st-green); }

/* Studio templates */
.studio-templates {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  border: 1px dashed var(--rule);
  background: var(--paper);
  margin-bottom: 14px;
}
.studio-templates-h {
  display: flex; align-items: center; gap: 10px;
}
.studio-templates-label {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute); font-weight: 500;
}
.studio-templates-h .meta { font-family: var(--f-sans); font-size: 11px; color: var(--mute-2); }
.studio-templates-h .tb-btn { margin-left: auto; }
.studio-templates-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.studio-template-card {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.studio-template-card:hover { background: var(--hover); border-color: var(--rule-2); }
.studio-template-thumb {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  width: 40px; height: 40px; flex: 0 0 40px;
  background: var(--paper-2);
  padding: 4px;
}
.studio-template-thumb svg { display: block; width: 100%; height: 100%; }
.studio-template-empty { grid-column: 1 / -1; display: grid; place-items: center; color: var(--mute-2); }
.studio-template-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.studio-template-name {
  font-family: var(--f-sans); font-size: 12px; font-weight: 500;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-template-sub {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.06em; color: var(--mute);
  text-transform: uppercase;
}
.studio-template-x {
  position: absolute; top: 4px; right: 6px;
  font-size: 14px; line-height: 1; color: var(--mute);
  cursor: pointer; padding: 2px 4px;
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease;
}
.studio-template-card:hover .studio-template-x { opacity: 1; }
.studio-template-x:hover { color: var(--ink); }

/* Publish row */
.studio-publish { padding-top: 24px; }
.publish-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.publish-summary { flex: 1; font-family: var(--f-sans); font-size: 12px; color: var(--ink); }
.copy-empty.inline { display: inline; padding: 0; background: none; border: 0; color: var(--mute); }

/* ===== Imagery picker (Studio modal) ===== */
.picker-modal {
  width: 880px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 64px);
  padding: 0;
  display: flex; flex-direction: column;
}
.picker-h {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--rule);
}
.picker-h .modal-title { margin-bottom: 4px; }
.picker-sub {
  font-family: var(--f-sans); font-size: 12px;
  color: var(--mute); margin: 0;
}
.picker-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 220px 1fr;
}
.picker-folders {
  border-right: 1px solid var(--rule);
  border-bottom: 0; background: var(--paper);
  overflow-y: auto;
  border: 0;
  padding: 10px;
}
.picker-grid-wrap {
  position: relative;
  padding: 16px;
  overflow-y: auto;
  background: var(--bg);
}
.picker-grid-wrap.is-over { background: rgba(10,10,10,0.04); }
.picker-grid-wrap.is-over::after {
  content: "";
  position: absolute; inset: 8px;
  border: 2px dashed var(--ink);
  pointer-events: none;
}
.picker-drop {
  position: absolute; inset: 24px;
  display: grid; place-items: center;
  background: rgba(246, 245, 241, 0.95);
  border: 2px dashed var(--ink);
  font-family: var(--f-display); font-size: 18px;
  color: var(--ink);
  z-index: 2;
  pointer-events: none;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.picker-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0; cursor: pointer;
  overflow: hidden;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.picker-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10,10,10,0.08);
  border-color: var(--ink);
}
.picker-card img {
  display: block; width: 100%; height: 110px;
  object-fit: cover;
  background: var(--paper-2);
}
.picker-card-name {
  display: block;
  padding: 6px 8px;
  font-family: var(--f-sans); font-size: 10px;
  color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--rule);
}

/* ===== Imagery library: folder browser + photo grid ===== */
.imagery-browser {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}
.imagery-folders {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px;
}
.imagery-folders-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 8px;
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
}
.imagery-folder-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.img-folder {
  position: relative;
  display: flex; align-items: center; gap: 4px;
}
.img-folder-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border: 0; background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-sans); font-size: 13px;
  color: var(--ink);
  transition: background-color 140ms ease;
}
.img-folder-btn:hover { background: var(--hover); }
.img-folder.is-active .img-folder-btn { background: var(--bg); font-weight: 500; }
.img-folder-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-folder-count {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.06em; color: var(--mute);
  padding: 1px 7px;
  background: var(--paper-2);
  border-radius: 9px;
}
.img-folder-ops {
  display: inline-flex; gap: 2px;
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
}
.img-folder-ops .nav-btn { width: 22px; height: 22px; font-size: 11px; }
.mini-rename {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
}

.imagery-pane {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
.imagery-pane-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.imagery-pane-title {
  font-family: var(--f-display); font-size: 22px;
  font-weight: 500; letter-spacing: -0.01em;
  margin: 0; color: var(--ink);
}
.imagery-pane-meta {
  font-family: var(--f-sans); font-size: 11px;
  letter-spacing: 0.08em; color: var(--mute);
}
.imagery-actions { display: inline-flex; gap: 8px; }

/* Override the placeholder-era imagery cards */
.imagery-browser .imagery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 0;
}
.imagery-browser .img-card {
  position: relative;
  aspect-ratio: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0; margin: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer;
  user-select: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.imagery-browser .img-card:hover { border-color: var(--rule-2); }
.imagery-browser .img-card.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink) inset;
}
.imagery-browser .img-check {
  position: absolute; top: 8px; left: 8px;
  width: 22px; height: 22px;
  background: var(--ink); color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-sans); font-size: 12px; font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.imagery-browser .img-card img {
  display: block;
  width: 100%; height: 200px;
  object-fit: cover;
  background: var(--paper-2);
}
.imagery-browser .img-card figcaption {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute);
  border-top: 1px solid var(--rule);
}
.imagery-browser .img-card .img-name {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.img-remove {
  border: 0; background: transparent;
  width: 22px; height: 22px;
  font-size: 14px; line-height: 1;
  color: var(--mute);
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 140ms ease, color 140ms ease;
}
.img-remove:hover { background: var(--hover); color: var(--ink); }

/* Destructive secondary button (Ta bort N) */
.tb-btn.is-destructive {
  border-color: #c44a3c;
  color: #c44a3c;
}
.tb-btn.is-destructive:hover { background: #c44a3c; color: #fff; border-color: #c44a3c; }

/* Move dialog target list */
.move-targets {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 16px;
  max-height: 280px; overflow-y: auto;
}
.move-target {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--bg);
  cursor: pointer;
  font-family: var(--f-sans); font-size: 13px;
  text-align: left;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.move-target:hover { background: var(--hover); border-color: var(--ink); }
.move-target-name { color: var(--ink); font-weight: 500; }
.move-target-count {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.06em; color: var(--mute);
  padding: 1px 7px;
  background: var(--paper-2);
  border-radius: 9px;
}

/* Approval indicator on post card */
.approval-indicator {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  font-family: var(--f-sans); font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.06em;
}
.ai-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rule-2);
}
.ai-pip.is-done { background: var(--st-green); }
.ai-text { margin-left: 4px; }

/* ===== Dashboard todo ===== */
.todo-section { margin-top: 20px; }
.todo-buckets { display: flex; flex-direction: column; gap: 22px; margin-top: 6px; }
.todo-bucket {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 16px 18px;
}
.todo-bucket-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.todo-bucket-title {
  font-family: var(--f-display); font-size: 18px; font-weight: 500;
  letter-spacing: -0.005em;
}
.todo-bucket-count {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
}
.todo-bucket-hint {
  margin: 0 0 12px;
  font-family: var(--f-sans); font-size: 12px; color: var(--mute);
}
.todo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.todo-item {
  display: grid; align-items: center;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  transition: background-color 140ms ease;
}
.todo-item:hover { background: var(--hover); }
.todo-main {
  display: flex; align-items: baseline; gap: 12px;
  border: 0; background: transparent;
  padding: 0; cursor: pointer;
  font-family: var(--f-sans); font-size: 13px;
  text-align: left;
  min-width: 0;
}
.todo-when {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute);
  flex: 0 0 90px;
}
.todo-topic {
  font-weight: 500; color: var(--ink);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.todo-stage {
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute);
  padding: 1px 8px;
  background: var(--paper);
  border-radius: 9px;
}
.todo-channels { display: inline-flex; gap: 4px; }
.todo-action { white-space: nowrap; }
.todo-more {
  background: var(--paper);
  padding: 8px 12px;
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute); cursor: pointer;
  border-top: 1px solid var(--rule);
}
.todo-more:hover { color: var(--ink); }

/* ===== Admin (super-admin only) ===== */
.admin-create { margin-bottom: 24px; }
.admin-create-form { margin-top: 8px; }
.admin-group + .admin-group { margin-top: 24px; }
.admin-table { border-top: 1px solid var(--rule); margin-top: 4px; }
.adm-row, .adm-head {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 110px 110px 130px 110px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-sans); font-size: 12px;
}
.adm-head {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute); font-weight: 500;
  background: var(--paper);
}
.adm-name  { font-weight: 500; color: var(--ink); }
.adm-slug, .adm-date { color: var(--mute); }
.adm-actions { display: flex; justify-content: flex-end; }
.adm-active-pill {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px;
  background: var(--ink); color: #fff;
  border-radius: 9px;
}

/* ===== Schedule-post picker ===== */
.new-post-picker { width: 560px; }
.new-post-options {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 12px;
}
.new-post-option {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.new-post-option:hover:not(:disabled) {
  background: var(--paper);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.new-post-option:disabled { opacity: 0.5; cursor: progress; }
.new-post-h {
  font-family: var(--f-display); font-size: 18px;
  font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink);
}
.new-post-d {
  font-family: var(--f-sans); font-size: 12px;
  color: var(--mute); line-height: 1.45;
}
.new-post-cta {
  font-family: var(--f-sans); font-size: 11px;
  letter-spacing: 0.06em; color: var(--ink);
  margin-top: 4px;
}

/* ===== Agents (Settings) ===== */
.agent-default-prompt {
  margin: 0;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px dashed var(--rule-2);
  font-family: var(--f-mono);
  font-size: 11px; line-height: 1.5;
  color: var(--ink-2);
  white-space: pre-wrap;
  max-height: 180px; overflow-y: auto;
}
.tool-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tool-chip {
  font-family: var(--f-mono); font-size: 10px;
  padding: 3px 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  letter-spacing: 0.04em;
}
.agent-save-row {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  margin-top: 4px;
}
.agent-play {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.agent-play-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.agent-result {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.agent-result-h {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 8px;
}
.agent-result-h .meta { color: var(--mute-2); margin-left: 4px; }
.agent-tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 10px;
  padding: 1px 6px;
  background: var(--ink); color: #fff;
  margin-right: 6px;
  letter-spacing: 0.04em;
}
.agent-issue.is-block .agent-tag { background: #c44a3c; }
.agent-issue.is-warn  .agent-tag { background: #d9712f; }
.agent-issue.is-info  .agent-tag { background: var(--mute); }
.agent-issue.is-ok    .agent-tag { background: #2e8e58; }
.agent-copy, .agent-issues, .agent-ideas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--f-sans); font-size: 13px; }
.agent-note { color: var(--mute); font-style: italic; }
.agent-ideas .agent-idea-h { display: block; font-weight: 500; }
.agent-ideas .agent-idea-t { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.agent-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.agent-picks figure { margin: 0; border: 1px solid var(--rule); background: var(--bg); }
.agent-picks img { display: block; width: 100%; height: 110px; object-fit: cover; }
.agent-picks figcaption { padding: 6px 8px; font-family: var(--f-sans); font-size: 11px; color: var(--mute); }
.agent-raw {
  margin: 0; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 11px; white-space: pre-wrap;
}

/* ===== Brand on a page ===== */
.brand-on-page {
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.bop-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  background: var(--bg);
  padding: 14px 18px;
}
.bop-k {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
.bop-v {
  font-family: var(--f-display); font-size: 16px;
  line-height: 1.4; color: var(--ink);
}
.bop-link { color: var(--ink); text-decoration: underline; }

.word-pill {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule);
  padding: 3px 9px;
  font-family: var(--f-sans); font-size: 12px;
  background: var(--bg);
}
.word-pill.word-avoid { color: var(--mute); }
.word-pill.word-never { color: #8b2c25; border-color: #d9928b; background: #fbecea; }

/* ===== Login / auth screen ===== */
.auth-screen {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--paper);
  padding: 20px;
}
.auth-card {
  width: 420px; max-width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 28px 32px 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 20px 60px rgba(10, 10, 10, 0.06);
}
.auth-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: 14px;
}
.auth-brand .sb-mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-family: var(--f-display); font-style: italic; font-size: 16px;
}
.auth-title {
  font-family: var(--f-display); font-size: 32px;
  font-weight: 500; letter-spacing: -0.01em;
  margin: 4px 0 0;
}
.auth-sub {
  font-family: var(--f-sans); font-size: 13px; color: var(--mute);
  margin: 0 0 8px;
}
.auth-card .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.auth-card .field span {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute); font-weight: 500;
}
.auth-error {
  background: #fbecea; border: 1px solid #d9928b;
  padding: 8px 12px; font-size: 12px; color: #8b2c25;
}
.auth-info {
  background: var(--paper); border: 1px dashed var(--rule-2);
  padding: 8px 12px; font-size: 12px; color: var(--mute);
}
.auth-submit { justify-content: center; padding: 10px; font-size: 13px; }
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute-2);
  margin: 4px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.auth-alt { display: flex; flex-direction: column; gap: 6px; }
.auth-alt .tb-btn { justify-content: center; }
.auth-foot {
  font-family: var(--f-sans); font-size: 11px;
  color: var(--mute);
  margin-top: 6px; text-align: center;
}
.auth-foot code {
  font-family: var(--f-mono); font-size: 11px;
  background: var(--paper); padding: 1px 5px;
}

/* ============================================================
   CONTENT PLAN — week view, post cards, drawer, taggable people
   ============================================================ */

:root {
  --ch-instagram:  #E1306C;
  --ch-linkedin:   #0A66C2;
  --ch-facebook:   #1877F2;
  --ch-newsletter: #5C5C5C;
  --ch-web:        #0A0A0A;
  --ch-tiktok:     #111111;
  --ch-youtube:    #FF0000;
  --st-muted:      #B0AEA8;
  --st-amber:      #D9712F;
  --st-blue:       #2E66C2;
  --st-violet:     #6B4FB3;
  --st-ink:        var(--ink);
  --st-green:      #2E8E58;
}

/* Toolbar override — 3-segment layout */
.plan-toolbar {
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-bottom: 16px;
}
.plan-toolbar .month { font-size: 22px; }
.plan-toolbar .filter-pills { flex-wrap: wrap; }
.plan-toolbar .view-switch { display: flex; gap: 4px; margin-left: auto; }

/* Channel filter pills — color-tinted dot + low opacity when off */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.pill .ch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.pill.ch-instagram .ch-dot  { background: var(--ch-instagram); }
.pill.ch-linkedin .ch-dot   { background: var(--ch-linkedin); }
.pill.ch-facebook .ch-dot   { background: var(--ch-facebook); }
.pill.ch-newsletter .ch-dot { background: var(--ch-newsletter); }
.pill.ch-web .ch-dot        { background: var(--ch-web); }
.pill.ch-tiktok .ch-dot     { background: var(--ch-tiktok); }
.pill.ch-youtube .ch-dot    { background: var(--ch-youtube); }
.pill:not(.is-on) { opacity: 0.45; }
.pill:not(.is-on):hover { opacity: 0.85; background: var(--hover); }
.pill.is-on { background: var(--bg); color: var(--ink); border-color: var(--rule-2); }

/* Channel chip — compact short code */
.ch-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 24px; padding: 0 6px;
  border-radius: 9px;
  font-family: var(--f-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}
.ch-chip.ch-instagram  { background: var(--ch-instagram); }
.ch-chip.ch-linkedin   { background: var(--ch-linkedin); }
.ch-chip.ch-facebook   { background: var(--ch-facebook); }
.ch-chip.ch-newsletter { background: var(--ch-newsletter); }
.ch-chip.ch-web        { background: var(--ch-web); }
.ch-chip.ch-tiktok     { background: var(--ch-tiktok); }
.ch-chip.ch-youtube    { background: var(--ch-youtube); }

/* Status pill */
.st-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-sans); font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: 12px;
  border: 1px solid var(--rule);
  background: #fff;
  white-space: nowrap;
  color: var(--ink);
}
.st-pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); }
.st-pill.st-muted  .d { background: var(--st-muted); }
.st-pill.st-amber  .d { background: var(--st-amber); }
.st-pill.st-blue   .d { background: var(--st-blue); }
.st-pill.st-violet .d { background: var(--st-violet); }
.st-pill.st-ink    .d { background: var(--st-ink); }
.st-pill.st-green  .d { background: var(--st-green); }

/* Week grid */
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-top: 20px;
}
.week-col {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  min-height: 420px;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.week-dh {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  display: flex; flex-direction: column;
  transition: background-color 140ms ease, color 140ms ease;
}
.week-col.is-today .week-dh { background: var(--ink); color: #fff; }
.week-col.is-today .week-dh .dh-day { color: rgba(255,255,255,0.7); }
.week-col.is-today .week-dh .dh-num { color: #fff; }
.week-dh .dh-day {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
}
.week-dh .dh-num {
  font-family: var(--f-display); font-size: 24px;
  font-weight: 500; line-height: 1.05;
  margin-top: 4px; color: var(--ink);
}
.week-cards { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.week-empty { font-family: var(--f-sans); color: var(--mute-2); font-size: 12px; padding: 4px 2px; text-align: center; }

/* Post card */
.post-card {
  display: flex; flex-direction: column; gap: 0;
  width: 100%;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--mute-2);
  text-align: left;
  cursor: grab;
  user-select: none;
  overflow: hidden;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.post-card:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(10,10,10,0.06); }
.post-card:active { cursor: grabbing; }
.post-card.is-dragging { opacity: 0.4; transform: none; box-shadow: none; }
.post-card-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; }

/* Thumbnail at the top of each post card */
.post-thumb {
  width: 100%; aspect-ratio: 80 / 44;
  display: block; overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.post-thumb svg,
.post-thumb img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Drop target feedback */
.week-col.is-drop-target { background: rgba(10, 10, 10, 0.04); box-shadow: inset 0 0 0 2px var(--ink); }
.cal-cell.is-drop-target { background: rgba(10, 10, 10, 0.04); box-shadow: inset 0 0 0 2px var(--ink); }
.cal-event { cursor: grab; user-select: none; }
.cal-event:active { cursor: grabbing; }
.cal-event.is-dragging { opacity: 0.4; }
.post-card.st-muted  { border-left-color: var(--st-muted); }
.post-card.st-amber  { border-left-color: var(--st-amber); }
.post-card.st-blue   { border-left-color: var(--st-blue); }
.post-card.st-violet { border-left-color: var(--st-violet); }
.post-card.st-ink    { border-left-color: var(--st-ink); }
.post-card.st-green  { border-left-color: var(--st-green); }
.post-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.post-card-top .post-time {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.06em; color: var(--mute);
}
.post-topic {
  font-family: var(--f-sans); font-size: 12px; font-weight: 500;
  line-height: 1.3; color: var(--ink);
}
.post-card-bot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.post-channels { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Owner avatars stack */
.owner-row { display: inline-flex; }
.owner-avatar {
  width: 22px; height: 22px;
  font-family: var(--f-sans); font-size: 9px; font-weight: 500;
  background: var(--ink); color: #fff;
  border: 2px solid var(--bg);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  margin-left: -6px;
}
.owner-avatar:first-child { margin-left: 0; }
.owner-avatar.is-more { background: var(--paper); color: var(--mute); border-color: var(--rule); }

/* Override cal-event for the rewritten month view */
.cal-event {
  border-left: 3px solid var(--mute-2);
}
.cal-event.st-muted  { border-left-color: var(--st-muted); }
.cal-event.st-amber  { border-left-color: var(--st-amber); }
.cal-event.st-blue   { border-left-color: var(--st-blue); }
.cal-event.st-violet { border-left-color: var(--st-violet); }
.cal-event.st-ink    { border-left-color: var(--st-ink); }
.cal-event.st-green  { border-left-color: var(--st-green); }

/* Generic dropdowns */
.dd { position: relative; display: inline-flex; min-width: 0; }
.dd-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  background: var(--bg);
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--ink);
  width: 100%;
  min-width: 0;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.dd-trigger:hover { background: var(--hover); border-color: var(--rule-2); }
.dd-trigger.is-multi { padding: 4px 10px; min-height: 34px; }
.dd-trigger.is-plain { justify-content: space-between; }
.dd-trigger .chev { color: var(--mute); margin-left: auto; flex: 0 0 auto; }
.dd-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; align-items: center; }
.dd-placeholder { color: var(--mute-2); }
.dd-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 100%;
  max-width: 360px;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 10px 28px rgba(10,10,10,0.10);
  padding: 4px;
  max-height: 320px; overflow-y: auto;
}
.dd-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0; background: transparent;
  text-align: left;
  font-family: var(--f-sans);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 100ms ease;
}
.dd-item:hover { background: var(--hover); }
.dd-item.is-active { background: rgba(10,10,10,0.04); }
.dd-item .dd-check { width: 14px; color: var(--ink); font-size: 11px; }
.dd-item .dd-label { color: var(--ink); }

/* People picker */
.dd-people { width: 100%; flex-direction: column; }
.people-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  background: var(--bg);
  min-height: 40px;
  align-items: center;
  width: 100%;
}
.person-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 2px;
  background: var(--paper);
  border-radius: 14px;
  font-family: var(--f-sans); font-size: 11px;
}
.person-chip .person-name { color: var(--ink); }
.person-chip .person-x {
  border: 0; background: transparent; cursor: pointer;
  color: var(--mute); font-size: 14px; line-height: 1; padding: 0 2px;
}
.person-chip .person-x:hover { color: var(--ink); }
.person-add {
  border: 0; background: transparent;
  color: var(--mute);
  font-family: var(--f-sans); font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  transition: color 140ms ease;
}
.person-add:hover { color: var(--ink); }
.person-avatar {
  width: 22px; height: 22px;
  font-family: var(--f-sans); font-size: 9px; font-weight: 500;
  background: var(--ink); color: #fff;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  flex: 0 0 22px;
}
.person-chip .person-avatar { width: 20px; height: 20px; flex: 0 0 20px; }
.people-menu { padding: 8px; min-width: 280px; }
.people-search {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--f-sans);
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--ink);
}
.people-search:focus { outline: 0; border-color: var(--ink); }
.people-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.people-empty { font-family: var(--f-sans); font-size: 11px; color: var(--mute); padding: 12px 8px; text-align: center; }

/* Combobox (searchable single-select) */
.combobox-menu { padding: 8px; min-width: 260px; max-height: 320px; display: flex; flex-direction: column; }
.combobox-list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.combobox-list .dd-item.is-highlighted { background: var(--hover); }
.combobox-list .dd-item.is-active { font-weight: 500; }

/* Form fields (drawer) */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field > label {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute); font-weight: 500;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.text-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: var(--bg);
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--ink);
  resize: vertical;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.text-input:focus { outline: 0; border-color: var(--ink); }

/* Copy blocks per channel */
.copy-tabs { display: flex; flex-direction: column; gap: 12px; }
.copy-empty {
  font-family: var(--f-sans); font-size: 11px; color: var(--mute);
  padding: 14px 16px;
  background: var(--paper);
  border: 1px dashed var(--rule-2);
}
.copy-block { display: flex; flex-direction: column; gap: 6px; }
.copy-head { display: flex; align-items: center; gap: 8px; }
.copy-name { font-family: var(--f-sans); font-size: 12px; color: var(--ink); }
.copy-count {
  margin-left: auto;
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.copy-area { min-height: 80px; }

/* Drawer */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 10, 10, 0.24);
  z-index: 200;
  animation: backdrop-in 220ms ease;
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 560px; max-width: 100vw;
  background: var(--bg);
  z-index: 201;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(10, 10, 10, 0.12);
  animation: drawer-in 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-head {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.drawer-eyebrow {
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}
.drawer-title {
  font-family: var(--f-display); font-size: 24px;
  font-weight: 500; letter-spacing: -0.01em; line-height: 1.15;
  margin: 0; color: var(--ink);
}
.drawer-when {
  margin-top: 6px;
  font-family: var(--f-sans); font-size: 12px;
  color: var(--mute);
}
.drawer-close {
  border: 0; background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--mute);
  width: 32px; height: 32px;
  cursor: pointer;
  display: grid; place-items: center;
  border-radius: 4px;
  transition: background-color 140ms ease, color 140ms ease;
}
.drawer-close:hover { background: var(--hover); color: var(--ink); }
.drawer-body {
  padding: 22px 28px 60px;
  overflow-y: auto;
  flex: 1;
}

/* Move-confirm dialog */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 10, 10, 0.28);
  z-index: 210;
  animation: backdrop-in 200ms ease;
}
.modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 420px; max-width: calc(100vw - 32px);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 24px 26px 20px;
  z-index: 211;
  box-shadow: 0 20px 60px rgba(10,10,10,0.14);
  animation: modal-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.modal-title {
  font-family: var(--f-display);
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ink);
}
.modal-body {
  font-family: var(--f-sans);
  font-size: 13px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 20px;
}
.modal-body strong { font-weight: 500; color: var(--ink); }
.modal-date {
  display: inline-block;
  padding: 1px 7px;
  background: var(--paper);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink);
}
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* List view */
.post-list {
  border-top: 1px solid var(--rule);
  margin-top: 20px;
}
.post-list-head, .post-list-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 2fr) 180px 100px 170px 110px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-sans);
  font-size: 12px;
  text-align: left;
}
.post-list-head {
  font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute); font-weight: 500;
  background: var(--paper);
}
.post-list-row {
  background: var(--bg); border: 0; border-bottom: 1px solid var(--rule);
  width: 100%; cursor: pointer;
  transition: background-color 140ms ease;
}
.post-list-row:hover { background: var(--hover); }
.post-list-row .row-topic { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-list-row .row-channels { display: inline-flex; gap: 4px; flex-wrap: wrap; }