:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #17202f;
  --muted: #697386;
  --muted-2: #98a2b3;
  --line: #e7eaf0;
  --line-strong: #d8dde7;
  --nav: #111827;
  --nav-soft: #1c2636;
  --blue: #4a67f5;
  --blue-soft: #eef1ff;
  --green: #18a875;
  --green-soft: #eaf9f3;
  --orange: #ed8a37;
  --orange-soft: #fff4e9;
  --red: #e45462;
  --red-soft: #fff0f1;
  --purple: #8b5cf6;
  --purple-soft: #f3efff;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .04);
  /* Type roles, matched to Infloww's: Geist for the interface, Geist Mono for
     numbers, Roboto for text people type or read in volume. */
  --font-ui: "Geist", Inter, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-text: Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body {
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  width: 242px;
  flex: none;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 14px;
  color: #d8deea;
  background: var(--nav);
  border-right: 1px solid rgba(255, 255, 255, .04);
  transition: transform .2s ease;
}
.brand { height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 7px; color: inherit; text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; color: white; background: linear-gradient(145deg, #7b8cff, #3e55de);
  font-size: 13px; font-weight: 800; letter-spacing: -.5px;
}
.brand-name { color: white; font-weight: 700; letter-spacing: -.3px; }
.brand-pill {
  padding: 2px 5px; border: 1px solid rgba(255,255,255,.16); border-radius: 5px;
  color: #9ba9bd; font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.workspace-switcher {
  margin: 18px 0 15px; padding: 10px; display: flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.035);
}
.workspace-copy, .user-card > span:nth-child(2) { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.workspace-switcher strong, .user-card strong { color: #f8fafc; font-size: 14px; font-weight: 600; }
.workspace-switcher small, .user-card small { color: #8490a3; font-size: 13px; margin-top: 2px; }
.chevron { color: #7d8a9c; }
.avatar {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 50%; color: white; font-size: 14px; font-weight: 700;
}
.avatar-sm { width: 27px; height: 27px; font-size: 13px; }
.avatar-lg { width: 42px; height: 42px; font-size: 15px; }
.avatar-xl { width: 54px; height: 54px; font-size: 16px; }
.avatar-indigo { background: linear-gradient(145deg, #8e9cff, #5368e9); }
.avatar-pink { background: linear-gradient(145deg, #f49ac1, #ce5c91); }
.avatar-gold { background: linear-gradient(145deg, #f7c870, #d99234); }
.avatar-green { background: linear-gradient(145deg, #67d7b0, #16956b); }
.avatar-blue { background: linear-gradient(145deg, #72b5f8, #347fd2); }
.avatar-purple { background: linear-gradient(145deg, #bc93f8, #7a4ac8); }
.avatar-dark { background: #354154; }
.nav { overflow-y: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-label {
  margin: 19px 10px 7px; color: #667287; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.nav-item {
  width: 100%; min-height: 38px; display: flex; align-items: center; gap: 11px;
  margin: 2px 0; padding: 0 10px; border: 0; border-radius: 8px;
  color: #aab4c4; background: transparent; font-size: 14px; font-weight: 500; cursor: pointer;
}
.nav-item > span:first-child { width: 17px; color: #7d899d; font-size: 16px; text-align: center; }
.nav-item { transition: background-color .12s ease, color .12s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.1); }
.nav-item:hover > span:first-child { color: #c7d0ff; }
.nav-item:focus-visible { outline: 2px solid #8e9eff; outline-offset: -2px; }
.nav-item.active { color: white; background: #253047; }
.nav-item.active > span:first-child { color: #8e9eff; }
.nav-count {
  margin-left: auto; min-width: 19px; padding: 2px 6px; border-radius: 99px;
  color: white; background: var(--blue); font-size: 13px; text-align: center;
}
.nav-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--orange); }
.sidebar-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.user-card { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 9px 7px 3px; }
.user-card button { min-width: 28px; min-height: 28px; border: 0; color: #69778c; background: transparent; cursor: pointer; }

.main { width: calc(100% - 242px); min-width: 0; margin-left: 242px; }
.topbar {
  height: 65px; position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 22px;
  padding: 0 27px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.topbar-title { display: flex; align-items: center; gap: 10px; }
.topbar h1 { margin: 0; font-size: 16px; letter-spacing: -.25px; white-space: nowrap; }
.live-indicator {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px;
  border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: 13px; font-weight: 700;
}
.live-indicator i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-button, .secondary-button, .ghost-button, .primary-button, .danger-button {
  height: 34px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.icon-button { width: 34px; border: 1px solid var(--line); background: white; }
.notification-button { position: relative; }
.notification-button i { width: 5px; height: 5px; position: absolute; top: 7px; right: 7px; border-radius: 50%; background: var(--red); }
.primary-button { padding: 0 14px; border: 1px solid var(--blue); color: white; background: var(--blue); }
.primary-button:hover { background: #3e58df; }
.secondary-button { padding: 0 13px; border: 1px solid var(--line-strong); background: white; }
.ghost-button { padding: 0 9px; border: 0; color: var(--muted); background: transparent; }
.danger-button { padding: 0 13px; border: 1px solid #f1cdd2; color: var(--red); background: var(--red-soft); }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 22px; }

.content { max-width: 1540px; min-height: calc(100vh - 65px); margin: auto; padding: 25px 27px 42px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.page-heading h2 { margin: 0 0 5px; font-size: 22px; letter-spacing: -.55px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.heading-actions, .filter-row { display: flex; align-items: center; gap: 8px; }
.filter-row { flex-wrap: wrap; }
.select, .field {
  height: 34px; padding: 0 11px; border: 1px solid var(--line-strong);
  border-radius: 8px; outline: 0; color: #4d586a; background: white; font-size: 13px;
}
.field { min-width: 210px; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 14px; }
.metric-card, .panel {
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow);
}
.metric-card { padding: 16px; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 500; }
.metric-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; }
.tone-blue { color: var(--blue); background: var(--blue-soft); }
.tone-green { color: var(--green); background: var(--green-soft); }
.tone-orange { color: var(--orange); background: var(--orange-soft); }
.tone-purple { color: var(--purple); background: var(--purple-soft); }
.metric-value { margin: 13px 0 7px; font-size: 26px; font-weight: 700; letter-spacing: -.7px; }
.metric-foot { display: flex; align-items: center; gap: 5px; color: var(--muted-2); font-size: 13px; }
.trend-up { color: var(--green); font-weight: 700; }
.trend-down { color: var(--red); font-weight: 700; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, .72fr); gap: 14px; }
.dashboard-stack { display: grid; gap: 14px; align-content: start; }
.panel { min-width: 0; }
.panel-header {
  min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; border-bottom: 1px solid var(--line);
}
.panel-header h3 { margin: 0; font-size: 14px; letter-spacing: -.15px; }
.panel-header p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.panel-body { padding: 16px; }
.chart-summary { display: flex; gap: 24px; margin-bottom: 14px; }
.chart-summary span { display: flex; flex-direction: column; color: var(--muted); font-size: 13px; }
.chart-summary strong { margin-top: 3px; color: var(--ink); font-size: 16px; }
.legend-dot { width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; }
.bar-chart {
  height: 195px; display: flex; align-items: end; justify-content: space-between; gap: 10px;
  padding: 10px 4px 0; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #f0f2f6 45px);
}
.bar-group { height: 100%; flex: 1; display: flex; align-items: end; justify-content: center; gap: 3px; position: relative; }
.bar { width: min(17px, 40%); min-height: 3px; border-radius: 4px 4px 0 0; transition: height .35s ease; }
.bar.primary { background: var(--blue); }
.bar.secondary { background: #cdd5ff; }
.bar-label { position: absolute; bottom: -20px; color: var(--muted-2); font-size: 12px; }
.chart-wrap { padding-bottom: 19px; }

.creator-row, .activity-row, .team-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f2f5;
}
.creator-row:last-child, .activity-row:last-child, .team-row:last-child { border-bottom: 0; }
.grow { min-width: 0; flex: 1; }
.row-title { display: block; overflow: hidden; color: #30394a; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { display: block; margin-top: 2px; color: var(--muted-2); font-size: 12px; }
.row-value { text-align: right; }
.row-value strong { display: block; font-size: 13px; }
.row-value small { color: var(--green); font-size: 12px; }
.progress { height: 4px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #edf0f4; }
.progress i { height: 100%; display: block; border-radius: inherit; background: var(--blue); }
.status-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px;
  border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.status-pill.green { color: #138560; background: var(--green-soft); }
.status-pill.orange { color: #b76824; background: var(--orange-soft); }
.status-pill.red { color: #c74552; background: var(--red-soft); }
.status-pill.gray { color: #647084; background: #f0f2f5; }
.status-pill.blue { color: #4058d2; background: var(--blue-soft); }
.activity-icon { width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 13px; }

table { width: 100%; border-collapse: collapse; }
th { padding: 9px 12px; color: var(--muted-2); background: var(--surface-2); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-align: left; text-transform: uppercase; }
td { padding: 11px 12px; border-top: 1px solid var(--line); color: #485365; font-size: 13px; }
.table-person { display: flex; align-items: center; gap: 8px; }
.table-person strong { display: block; color: #30394a; font-size: 13px; }
.table-person small { color: var(--muted-2); font-size: 12px; }
.table-wrap { overflow-x: auto; }
.money { color: var(--ink); font-weight: 600; }

.inbox-shell {
  height: calc(100vh - 115px); min-height: 590px; display: grid;
  grid-template-columns: 275px minmax(330px, 1fr); overflow: hidden;
  border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow);
}
.conversation-list { min-width: 0; border-right: 1px solid var(--line); }
.inbox-toolbar { height: 54px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.inbox-toolbar input { width: 100%; height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; outline: 0; font-size: 13px; }
.inbox-filter { display: flex; gap: 5px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.filter-chip { min-height: 28px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: white; font-size: 12px; white-space: nowrap; cursor: pointer; }
.filter-chip.active { color: var(--blue); border-color: #bdc7ff; background: var(--blue-soft); }
.conversation-scroll { height: calc(100% - 99px); overflow-y: auto; }
.conversation-item {
  width: 100%; display: flex; gap: 9px; padding: 12px; border: 0; border-bottom: 1px solid #f0f2f5;
  background: white; text-align: left; cursor: pointer;
}
.conversation-item:hover { background: #fafbfc; }
.conversation-item.active { background: #f1f4ff; box-shadow: inset 3px 0 var(--blue); }
.conversation-copy { min-width: 0; flex: 1; }
.conversation-head { display: flex; justify-content: space-between; gap: 5px; }
.conversation-head strong { font-size: 13px; }
.conversation-head time { color: var(--muted-2); font-size: 11px; }
.conversation-copy p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.unread-badge { min-width: 16px; height: 16px; display: grid; place-items: center; margin-top: 5px; border-radius: 50%; color: white; background: var(--blue); font-size: 11px; }
.online-ring { position: relative; }
.online-ring::after {
  content: ""; width: 7px; height: 7px; position: absolute; right: 0; bottom: 0;
  border: 2px solid white; border-radius: 50%; background: var(--green);
}
.chat-panel { min-width: 0; display: flex; flex-direction: column; }
.chat-header { min-height: 54px; position: relative; display: flex; align-items: center; gap: 9px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.chat-menu { position: absolute; top: 46px; right: 12px; z-index: 5; min-width: 160px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: var(--shadow); }
.chat-menu button { width: 100%; min-height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; font-size: 13px; text-align: left; cursor: pointer; }
.chat-menu button:hover { background: var(--surface-2); }
.chat-header .grow strong { display: block; font-size: 14px; }
.chat-header .grow small { color: var(--green); font-size: 12px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 18px; background: #fafbfc; }
.message-day { margin: 2px 0 16px; color: var(--muted-2); font-size: 12px; text-align: center; }
.message { max-width: 72%; margin: 0 0 11px; }
.message.outgoing { margin-left: auto; }
.bubble { padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px 11px 11px 3px; color: #3c4656; background: white; font-size: 13px; line-height: 1.5; }
.outgoing .bubble { color: white; border-color: var(--blue); border-radius: 11px 11px 3px 11px; background: var(--blue); }
.message time { display: block; margin-top: 3px; color: var(--muted-2); font-size: 11px; }
.outgoing time { text-align: right; }
.ppv-card { margin-top: 6px; padding: 8px; border-radius: 7px; background: rgba(255,255,255,.16); }
.ppv-card strong { display: flex; justify-content: space-between; }
.composer { padding: 10px 13px; border-top: 1px solid var(--line); background: white; }
.composer textarea { width: 100%; height: 56px; resize: none; padding: 8px; border: 0; outline: 0; font-size: 13px; }
.composer-tools { display: flex; align-items: center; gap: 5px; }
.tool-button { width: 28px; height: 27px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: white; font-size: 14px; cursor: pointer; }
.composer-tools .primary-button { height: 29px; margin-left: auto; }
.insights-panel { overflow-y: auto; background: white; }
.insight-profile { padding: 20px 15px 15px; border-bottom: 1px solid var(--line); text-align: center; }
.insight-profile h3 { margin: 8px 0 2px; font-size: 14px; }
.insight-profile p { margin: 0; color: var(--muted); font-size: 12px; }
.insight-section { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.insight-section h4 { margin: 0 0 10px; font-size: 13px; }
.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.insight-stat { padding: 8px; border-radius: 7px; background: var(--surface-2); }
.insight-stat small { display: block; color: var(--muted-2); font-size: 11px; }
.insight-stat strong { display: block; margin-top: 3px; font-size: 13px; }
.note { padding: 9px; border-radius: 7px; color: #596274; background: #fff9e9; font-size: 12px; line-height: 1.45; }

.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.creator-card { overflow: hidden; }
.creator-cover { height: 75px; position: relative; background: linear-gradient(120deg, #dadfff, #f5dff0); }
.creator-cover.cover-2 { background: linear-gradient(120deg, #d8f2ea, #dce9ff); }
.creator-cover.cover-3 { background: linear-gradient(120deg, #ffe5d2, #f1ddff); }
.creator-cover .avatar { position: absolute; left: 15px; bottom: -21px; border: 3px solid white; }
.creator-card-body { padding: 29px 15px 15px; }
.creator-card-body h3 { margin: 0; font-size: 14px; }
.creator-card-body > p { margin: 3px 0 13px; color: var(--muted); font-size: 12px; }
.creator-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 11px 0; border-block: 1px solid var(--line); }
.creator-stats span { display: flex; flex-direction: column; color: var(--muted-2); font-size: 11px; }
.creator-stats strong { margin-top: 3px; color: var(--ink); font-size: 13px; }
.card-actions { display: flex; gap: 7px; margin-top: 12px; }

.automation-list { display: grid; gap: 10px; }
.automation-row {
  display: grid; grid-template-columns: auto minmax(180px, 1fr) 130px 120px auto; align-items: center; gap: 13px;
  padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow);
}
.automation-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; }
.automation-row h3 { margin: 0; font-size: 13px; }
.automation-row p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.automation-meta small { display: block; color: var(--muted-2); font-size: 11px; }
.automation-meta strong { font-size: 13px; }
.toggle { width: 40px; height: 24px; position: relative; border: 0; border-radius: 99px; background: #d5dae3; cursor: pointer; }
.toggle::after { content: ""; width: 18px; height: 18px; position: absolute; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
.toggle.on { background: var(--blue); }
.toggle.on::after { left: 19px; }

.vault-grid { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 10px; }
.media-card { aspect-ratio: 4/5; position: relative; overflow: hidden; border-radius: 9px; background: linear-gradient(145deg, #7c89a8, #263249); }
.media-card:nth-child(3n+2) { background: linear-gradient(145deg, #cda9c2, #6d4b6f); }
.media-card:nth-child(3n) { background: linear-gradient(145deg, #8abbb3, #335d62); }
.media-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 60% 25%, rgba(255,255,255,.32), transparent 28%), linear-gradient(transparent 50%, rgba(0,0,0,.65)); }
.media-type { position: absolute; top: 8px; right: 8px; padding: 3px 6px; border-radius: 5px; color: white; background: rgba(0,0,0,.4); font-size: 11px; }
.media-copy { position: absolute; right: 9px; bottom: 9px; left: 9px; color: white; }
.media-copy strong { display: block; font-size: 13px; }
.media-copy small { font-size: 11px; opacity: .75; }

.schedule { display: grid; grid-template-columns: 140px repeat(7, minmax(85px, 1fr)); overflow-x: auto; }
.schedule > div { min-height: 55px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; }
.schedule-head { min-height: 40px !important; color: var(--muted); background: var(--surface-2); font-weight: 600; text-align: center; }
.shift { padding: 6px; border-left: 2px solid var(--blue); border-radius: 5px; color: #3e54c8; background: var(--blue-soft); line-height: 1.35; }
.shift.green { color: #167c5b; border-color: var(--green); background: var(--green-soft); }
.shift.orange { color: #a45e23; border-color: var(--orange); background: var(--orange-soft); }

.gate { max-width: 440px; margin: 40px auto; }
.portrait { width: 100%; height: 100%; object-fit: cover; display: block; }
.creator-cover .portrait { position: absolute; inset: 0; }
.empty-state { padding: 60px 20px; text-align: center; }
.empty-state .automation-icon { margin: auto; }
.empty-state h3 { margin: 12px 0 5px; font-size: 15px; }
.empty-state p { max-width: 360px; margin: 0 auto 15px; color: var(--muted); font-size: 13px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-menu button { width: 100%; padding: 10px; border: 0; border-radius: 7px; background: transparent; font-size: 13px; text-align: left; }
.settings-menu button.active { color: var(--blue); background: var(--blue-soft); font-weight: 600; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 5px; color: #4c5668; font-size: 13px; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; font-size: 13px; }
.form-field input, .form-field select { height: 35px; }
.notification-button i { display: none; }
.notification-button.has-unread i { display: block; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.56); }
.modal-backdrop.hidden { display: none; }
.modal { width: min(460px, 100%); position: relative; padding: 23px; border-radius: 13px; background: white; box-shadow: 0 24px 60px rgba(15,23,42,.24); }
.modal-close { position: absolute; top: 13px; right: 13px; border: 0; color: var(--muted); background: transparent; font-size: 22px; cursor: pointer; }
.modal h2 { margin: 0 0 5px; font-size: 18px; }
.modal p { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-option { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: white; text-align: left; cursor: pointer; }
.quick-option:hover { border-color: #b9c3ff; background: var(--blue-soft); }
.quick-option strong { display: block; margin: 7px 0 2px; font-size: 13px; }
.quick-option small { color: var(--muted); font-size: 12px; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: grid; gap: 8px; }
.toast { min-width: 220px; padding: 11px 13px; border: 1px solid #cce9dd; border-radius: 8px; color: #16694f; background: #effbf6; box-shadow: var(--shadow); font-size: 13px; animation: toast-in .2s ease; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 1100px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .inbox-shell { grid-template-columns: 250px 1fr; }
  .insights-panel { display: none; }
  .vault-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); box-shadow: 15px 0 40px rgba(0,0,0,.2); pointer-events: none; }
  .sidebar.open { transform: translateX(0); pointer-events: auto; }
  .main { width: 100%; margin-left: 0; }
  .mobile-menu { display: block; }
  .topbar { padding: 0 16px; }
  .topbar-actions { margin-left: auto; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .automation-row { grid-template-columns: auto 1fr auto; }
  .automation-meta { display: none; }
  .vault-grid { grid-template-columns: repeat(3, 1fr); }
  .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .content { padding: 18px 13px 30px; }
  .primary-button#quick-action, .topbar-title .live-indicator { display: none; }
  .metrics-grid, .cards-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .inbox-shell { height: calc(100vh - 100px); grid-template-columns: 132px minmax(0, 1fr); }
  .conversation-list { min-width: 0; }
  .conversation-copy p { display: none; }
  .conversation-item { padding: 10px 6px; }
  .message { max-width: 88%; }
  .vault-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
}

/* Agency workspace. `hidden` must win over the display rules above: nav items,
   labels and the shift button are hidden per permission. */
[hidden] { display: none !important; }
.status-pill.blue { color: #3157c7; background: #e8eefc; }
.form-field textarea.field, .form-field select.select[multiple] { height: auto; min-height: 64px; padding: 8px 10px; }
#shift-button { padding: 0 12px; }

/* Creator earnings overview (CRM home). */
.earnings { margin-bottom: 14px; }
.earnings-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; }
.earnings-title { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 220px; }
.earnings-title h3 { margin: 0; font-size: 16px; }
.earnings-tz { color: var(--muted); font-size: 14px; font-weight: 500; }
.info-dot { width: 15px; height: 15px; display: inline-grid; place-items: center; border: 1px solid var(--muted-2); border-radius: 50%; color: var(--muted); font-size: 13px; font-weight: 700; cursor: help; }
.earnings-basis { height: 34px; min-width: 150px; }
.period-tabs { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.period-tabs button { height: 28px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.period-tabs button.active { background: var(--blue-soft); color: var(--blue); }
.earnings-body { display: grid; grid-template-columns: minmax(170px, 1.1fr) repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.earnings-total { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.earnings-total small { color: var(--blue); font-size: 14px; font-weight: 600; }
.earnings-total strong { color: var(--blue); font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.earnings-col { display: grid; grid-template-rows: 1fr 1fr; border-left: 1px solid var(--line); }
.earnings-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; }
.earnings-cell strong { display: block; font-size: 20px; font-weight: 700; color: var(--ink); }
.earnings-cell span { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.earnings-cell.untracked strong { color: var(--muted-2); }
.earnings-cell .earnings-icon { width: 40px; height: 40px; flex: none; margin: 0; border-radius: 50%; display: grid; place-items: center; }
.earnings-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tone-teal { color: #14a38b; background: #e7f8f4; }
.tone-sky { color: var(--blue); background: var(--blue-soft); }
.tone-mint { color: var(--green); background: var(--green-soft); }
.tone-rose { color: var(--red); background: var(--red-soft); }
.tone-violet { color: var(--purple); background: var(--purple-soft); }
.tone-indigo { color: #3f51b5; background: #e8ebf8; }
@media (max-width: 1100px) {
  .earnings-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .earnings-total { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .earnings-col:nth-child(2) { border-left: 0; }
  .earnings-col { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .earnings-body { grid-template-columns: 1fr; }
  .earnings-col { border-left: 0; }
  .period-tabs { width: 100%; }
  .period-tabs button { flex: 1; padding: 0 6px; }
}

.notification-button { display: inline-grid; place-items: center; }
.bell-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon { width: 15px; height: 15px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Content schedule: calendar, list and upload (ported from the creator
   studio's Content Schedule, with Infloww-style messages on the same queue). */
.cal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.cal-label { font-size: 15px; color: var(--ink); margin-left: 4px; }
.cal-legend { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 13px; color: var(--muted); }
.cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-left: 6px; }
.cal-dot.cal-post { background: var(--blue); }
.cal-dot.cal-message { background: var(--purple); }
.cal-scale { margin-left: auto; display: inline-flex; gap: 4px; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-week.cal-day { grid-template-columns: minmax(0, 420px); }
.cal-col { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 220px; }
.cal-col.cal-drop { border-color: var(--blue); background: var(--blue-soft); }
.cal-col-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ink); padding-bottom: 6px; border-bottom: 2px solid var(--line); margin-bottom: 8px; }
.cal-col-head.cal-today { border-bottom-color: var(--blue); color: var(--blue); }
.cal-add { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; line-height: 1; }
.cal-add:hover { color: var(--blue); border-color: var(--blue); }
.cal-col-body { display: flex; flex-direction: column; gap: 8px; }
.cal-empty { font-size: 13px; color: var(--muted-2); text-align: center; padding: 12px 0; }
.cal-item { border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 8px; padding: 6px; background: var(--surface); box-shadow: var(--shadow); cursor: default; }
.cal-item.cal-message { border-left-color: var(--purple); }
.cal-item[data-open-post] { cursor: pointer; }
.cal-item.cal-movable { cursor: grab; }
.cal-item-top { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cal-kind { margin-left: auto; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.cal-done { width: 12px; height: 12px; border-radius: 99px; background: var(--green); color: white; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.cal-thumb { aspect-ratio: 4 / 3; border-radius: 6px; margin: 6px 0 4px; background: #e5e7eb; }
.cal-title { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cal-month-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; text-align: center; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-month-cell { min-width: 0; min-height: 84px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 5px; display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: left; cursor: pointer; font-family: inherit; }
.cal-month-cell.cal-blank { background: transparent; border-style: dashed; cursor: default; }
.cal-month-cell.cal-today { border-color: var(--blue); }
.cal-month-num { font-size: 13px; font-weight: 700; color: var(--ink); }
.cal-chip { font-size: 12px; border-radius: 4px; padding: 2px 4px; color: #4058d2; background: var(--blue-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-chip.cal-message { color: #6d3fd8; background: var(--purple-soft); }
.cal-more { font-size: 12px; color: var(--muted); }
.bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--blue-soft); border: 1px solid #dbe2ff; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; }
.bulk-spread { display: inline-flex; align-items: center; gap: 6px; }
.bulk-spread .field { height: 30px; }
.list-thumb { width: 44px; height: 44px; border-radius: 8px; background: #e5e7eb; }
.row-actions { white-space: nowrap; }
.row-actions button { margin-left: 4px; }
.upload-panel { margin-bottom: 14px; }
@media (max-width: 900px) {
  .cal-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-scale { margin-left: 0; }
}
.content-dt { display: inline-flex; gap: 6px; }
.content-dt .field { height: 32px; width: auto; min-width: 0; }
.content-dt input[type="date"] { width: 138px; }
.content-dt input[type="time"] { width: 110px; }
.content-title { min-width: 200px; }
.bulk-spread .field { width: auto; }
.bulk-spread input[type="number"] { width: 72px; }
.bulk-spread input[type="datetime-local"] { width: 200px; }

/* Fan side panel beside an open chat (spec 4.1 to 4.3). */
.inbox-shell.with-fan { grid-template-columns: 275px minmax(330px, 1fr) 290px; }
.fan-panel { min-width: 0; overflow-y: auto; overflow-x: hidden; grid-template-columns: minmax(0, 1fr); border-left: 1px solid var(--line); background: white; padding: 10px; display: grid; gap: 10px; align-content: start; }
.fan-card { border: 1px solid var(--line); border-radius: 9px; padding: 10px; display: grid; gap: 6px; }
.fan-card h4 { margin: 0; font-size: 14px; }
.fan-card p { margin: 0; font-size: 13px; }
.fan-card textarea { width: 100%; box-sizing: border-box; min-height: 96px; height: auto; resize: vertical; }
.fan-card form { display: grid; gap: 6px; }
.creator-note { background: #fff8e8; border-color: #f2dfb0; }
.fan-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; color: var(--muted); }
.fan-facts strong { display: block; color: var(--ink, #111); font-size: 13px; }
.fan-edit summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.fan-edit .form-grid { grid-template-columns: 1fr; margin-top: 6px; }
.ppv-row { display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--line); padding-top: 6px; }
.ppv-row .grow { display: grid; min-width: 0; }
#fan-panel-toggle[aria-pressed="true"] { background: var(--surface-2); }
@media (max-width: 1100px) {
  .inbox-shell.with-fan { grid-template-columns: 180px minmax(220px, 1fr) 240px; }
}
@media (max-width: 820px) {
  .inbox-shell.with-fan { grid-template-columns: 132px minmax(0, 1fr); position: relative; }
  .inbox-shell.with-fan .fan-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(290px, 85%); box-shadow: var(--shadow); z-index: 4; }
}

/* Vault: Infloww Vault Pro-style tabs, filters and media grid. */
.vault-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 10px; }
.vault-count { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 3px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.filter-chip.active .vault-count { background: white; color: var(--blue); }
.vault-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vault-toolbar .field, .vault-toolbar .select { width: auto; min-width: 160px; height: 34px; }
.vault-toolbar #vault-search { flex: 1; min-width: 200px; }
.vault-summary { display: flex; gap: 18px; font-size: 14px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.vault-summary strong { color: var(--ink); font-size: 15px; margin-right: 4px; }
.vault-grid-pro { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.vault-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.vault-thumb { position: relative; aspect-ratio: 1 / 1; background: #e5e7eb; display: flex; align-items: flex-start; justify-content: space-between; padding: 8px; }
.vault-kind { font-size: 12px; font-weight: 700; color: white; background: rgba(17, 24, 39, .65); border-radius: 6px; padding: 3px 6px; }
.vault-body { padding: 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.vault-title { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 6px; }
.vault-actions .ghost-button { padding: 4px 8px; font-size: 13px; }
.nav-icon-svg { display: inline-flex; align-items: center; justify-content: center; }
.nav-icon-svg svg { display: block; }

/* Typography roles. Geist (body default) carries the interface: brand, nav,
   section labels, headings, buttons, tabs, field labels, panel and card titles,
   table headers, modal titles. Roboto carries text people type or read in
   volume. Geist Mono with tabular figures carries every amount, count and
   time, so columns of numbers line up. */
.brand, .nav-label, .nav-item, .page-heading h2, .panel-header h3, .topbar h1,
.modal h2, th, .filter-chip, .period-tabs button, .form-field,
.fan-card h4, .insight-section h4, .automation-row h3, .empty-state h3,
.icon-button, .secondary-button, .ghost-button, .primary-button, .danger-button {
  font-family: var(--font-ui);
}

input, textarea, select, .field, .select,
.form-field input, .form-field select, .form-field textarea,
.bubble, .conversation-copy p, .composer textarea, .inbox-toolbar input,
td, .note, .fan-card p, .fan-card textarea, .creator-note,
.creator-row .row-sub, .automation-row p,
.modal p, .toast {
  font-family: var(--font-text);
}

.money, td.num, .metric-value, .earnings-total strong, .earnings-cell strong,
.earnings-tz, .unread-badge, .nav-count, .vault-count,
.message time, .conversation-head time, .ppv-card strong,
.chart-summary strong, .creator-stats strong, .insight-stat strong,
.row-value strong, .fan-facts strong, .cal-month-num, .cal-item-top > span:first-of-type {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Vault library and media in messages (0025). */
.vault-thumb-media { overflow: hidden; }
.vault-thumb-media .vault-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vault-thumb-media .vault-kind, .vault-thumb-media .status-pill { position: relative; z-index: 1; }
.vault-archived-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.composer-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 6px; }
.attach-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; background: var(--blue-soft); color: #4058d2; border-radius: 99px; padding: 3px 4px 3px 9px; }
.attach-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; }
.msg-attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; margin-bottom: 6px; max-width: 320px; }
.msg-attachment { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #e5e7eb; }
.msg-locked { display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line-strong); }
.vault-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; }
.vault-pick { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer; }
.vault-pick input { align-self: flex-start; }
.vault-pick-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #e5e7eb; }
.vault-pick-thumb .vault-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The Vault button made the composer row wider than a narrow chat column
   (fan panel open), pushing Send out of view. Let the price field shrink. */
.composer-tools { min-width: 0; }
.composer-tools #message-price { flex: 1 1 64px; min-width: 56px; width: auto !important; }
.composer-tools .primary-button { flex: none; }
.qa-body { max-width: 360px; white-space: normal; }
.focus-banner { display: block; width: calc(100% - 20px); margin: 6px 10px; padding: 7px 10px; border: 1px solid #dbe2ff; border-radius: 8px; background: var(--blue-soft); color: #4058d2; font-size: 13px; font-weight: 600; cursor: pointer; }
a.tool-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; }
#chat-timer { min-width: 34px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Earnings: sales by day, refunds and paying fans (spec 4.8). */
.earnings-extra { border-top: 1px solid var(--line); padding: 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; }
.spark-head { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.spark-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.spark-legend i, .spark-stack i { display: inline-block; }
.spark-legend i { width: 8px; height: 8px; border-radius: 2px; margin-left: 6px; }
.spark-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.spark-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.spark-stack { flex: 1; width: 100%; max-width: 26px; display: flex; flex-direction: column-reverse; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.spark-stack i { width: 100%; }
.spark-col small { font-size: 12px; color: var(--muted); height: 12px; white-space: nowrap; font-family: var(--font-mono); }
.spark-messages { background: var(--purple); }
.spark-posts { background: var(--green); }
.spark-subscriptions { background: var(--blue); }
.earnings-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.earnings-facts small { display: block; font-size: 13px; color: var(--muted); }
.earnings-facts strong { font-size: 15px; }
@media (max-width: 820px) { .earnings-extra { grid-template-columns: 1fr; } }
/* Activity feed in the bell (spec 4.12). */
.activity-list { display: grid; gap: 4px; max-height: 420px; overflow: auto; margin-top: 8px; }
.activity-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font-family: inherit; }
.activity-item.unseen { border-color: #dbe2ff; background: var(--blue-soft); }
.activity-item strong { display: block; font-size: 14px; font-family: var(--font-text); font-weight: 500; }
.activity-item small { font-size: 13px; color: var(--muted); }
.activity-kind { width: 8px; height: 8px; border-radius: 99px; background: var(--muted-2); flex: none; }
.activity-message_bought, .activity-post_bought { background: var(--green); }
.activity-chargeback { background: var(--red); }
.activity-new_conversation { background: var(--blue); }
.activity-broadcast_done { background: var(--purple); }
.activity-shift_auto_ended, .activity-staff_post { background: var(--orange); }

/* Vault folders, hashtags and notes (0026). */
.vault-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.vault-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.vault-tag { border: 0; background: var(--purple-soft); color: #6d3fd8; border-radius: 99px; padding: 2px 7px; font-size: 13px; cursor: pointer; font-family: var(--font-ui); }
.vault-notes { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vault-pick .status-pill { align-self: flex-start; }
.assignee-chip { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 99px; background: var(--purple-soft); color: #6d3fd8; font-size: 12px; font-weight: 600; }
.assign-select { width: auto; height: 28px; font-size: 13px; max-width: 140px; }
.script-tag { display: inline-block; padding: 1px 6px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.copy-select { width: auto; height: 28px; font-size: 13px; margin-right: 6px; }
.term-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.term-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; background: var(--red-soft); color: #c74552; font-size: 13px; font-family: var(--font-text); }
.term-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
/* Automated messages (spec 4.6). */
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.auto-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 6px; background: var(--surface); }
.auto-card.on { border-color: #bfe9d8; background: #fbfefc; }
.auto-head { display: flex; align-items: center; justify-content: space-between; }
.auto-body { font-family: var(--font-text); font-size: 14px; margin: 0; }
.auto-form { grid-template-columns: 1fr 1fr; }
/* Fields inside a form grid fit their column. The global .field min-width
   (210px) is for toolbars; in narrow cards it pushed inputs past the edge. */
.form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-grid .field, .form-grid .select { min-width: 0; max-width: 100%; }
.form-field { min-width: 0; }
.auto-card { min-width: 0; }
.auto-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Automation cards: stack top-down so Message, Wait and Price line up across
   cards; the description takes the same room in every card. */
.auto-card { display: flex; flex-direction: column; gap: 6px; }
.auto-card > p.row-sub { margin: 0; line-height: 1.4; min-height: calc(3 * 1.4em); }
.auto-card > .row-sub:last-child { margin-top: auto; }
.auto-form > .form-field:last-child > span:last-child { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.auto-form > .form-field:last-child { grid-column: 1 / -1; }
.auto-form > .form-field:last-child > span:first-child { display: none; }
.label-row { display: inline-flex; align-items: center; gap: 4px; }
.label-row .info-dot { width: 13px; height: 13px; font-size: 12px; }
/* Typed content outside tables reads in the text font too: post captions on
   calendar and vault cards, calendar chips, the bio, fan notes, QA bodies. */
.cal-title, .cal-chip, .vault-title, .media-copy strong, .qa-body, .creator-card-body > p.row-sub,
.activity-item strong, .focus-banner, .term-chip, .auto-body { font-family: var(--font-text); }
/* Dates and times in lists line up as figures. */
.cal-item-top > span:first-of-type, .conversation-head time, td.num, .spark-col small { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Messages at narrow widths: nothing is cut off or overlaps. The filter
   chips, the chat header tools and the composer row wrap instead of running
   out of their column, and the fan panel turns into an overlay sooner. */
.inbox-filter { flex-wrap: wrap; overflow-x: visible; }
.conversation-scroll { height: auto; flex: 1; min-height: 0; }
.conversation-list { display: flex; flex-direction: column; min-height: 0; }
.chat-header { flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; }
.chat-header .grow { flex: 1 1 90px; min-width: 0; }
.chat-header .grow strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header .assign-select { flex: 0 1 140px; min-width: 96px; width: auto; }
.chat-header .tool-button { flex: none; }
#chat-timer { width: auto; min-width: 28px; padding: 0 7px; white-space: nowrap; }
.composer-tools { flex-wrap: wrap; row-gap: 6px; }
.composer-tools .select { flex: 0 1 140px; min-width: 90px; width: auto; }
.fan-card > *, .fan-card form > * { min-width: 0; max-width: 100%; }
.fan-card form > span { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 1100px) {
  .inbox-shell.with-fan { grid-template-columns: 200px minmax(0, 1fr) 240px; }
}
@media (max-width: 1000px) {
  .inbox-shell.with-fan { grid-template-columns: 200px minmax(0, 1fr); position: relative; }
  .inbox-shell.with-fan .fan-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(290px, 85%); box-shadow: var(--shadow); z-index: 4; }
}
@media (max-width: 820px) {
  .inbox-shell.with-fan { grid-template-columns: 132px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .inbox-shell, .inbox-shell.with-fan { grid-template-columns: 110px minmax(0, 1fr); }
  .filter-chip { padding: 5px 8px; }
}

/* Fan panel, smaller screens: a compact layout under 1280px, and under
   1000px an overlay that starts closed and has its own close button. */
.fan-panel-close { display: none; }
@media (min-width: 1001px) and (max-width: 1280px) {
  .inbox-shell.with-fan { grid-template-columns: 220px minmax(0, 1fr) 230px; }
}
@media (max-width: 1280px) {
  .fan-panel { padding: 7px; gap: 7px; }
  .fan-card { padding: 8px; gap: 4px; border-radius: 8px; }
  .fan-card h4 { font-size: 13px; }
  .fan-card p, .fan-facts { font-size: 12px; }
  .fan-facts strong { font-size: 13px; }
  .fan-card textarea { min-height: 56px; }
  .fan-card .ghost-button, .fan-card .secondary-button { min-height: 26px; padding: 0 9px; font-size: 13px; }
  .ppv-row { flex-wrap: wrap; }
}
@media (max-width: 1000px) {
  .inbox-shell.with-fan .fan-panel { width: min(250px, 85%); padding-top: 34px; }
  .fan-panel-close { display: grid; place-items: center; position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--muted); font-size: 15px; cursor: pointer; }
}

/* Composer: one Attach button (vault or device) and the price help. */
.attach-button { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; }
.attach-count { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; background: var(--blue); color: white; font-family: var(--font-mono); font-size: 12px; line-height: 15px; }
.composer-tools .price-wrap { display: inline-flex; align-items: center; gap: 5px; flex: 1 1 90px; min-width: 80px; }
.composer-tools .price-wrap #message-price { flex: 1 1 auto; min-width: 56px; width: auto !important; }
.quick-option:disabled { opacity: .55; cursor: not-allowed; }

/* Minimized fan panel: a slim tab on the right edge of the chat that opens
   it again. The minimize button shows at every width. */
.inbox-shell { position: relative; }
.fan-panel { position: relative; }
.fan-panel-close { display: grid; place-items: center; position: absolute; top: 6px; right: 8px; z-index: 1; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--muted); cursor: pointer; }
.fan-panel { padding-top: 34px; }
.fan-panel-tab { position: absolute; top: 64px; right: 0; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 8px 5px; border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; background: white; color: var(--muted); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; cursor: pointer; writing-mode: vertical-rl; }
.fan-panel-tab svg { transform: rotate(90deg); }
.fan-panel-tab:hover { color: var(--blue); }
@media (max-width: 1000px) {
  .inbox-shell.with-fan .fan-panel { position: absolute; }
}

/* Settings: Infloww-style section list on the left, the open section on the
   right. Under 820px the list becomes a scrolling row of tabs on top. */
.settings-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 140px); overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow); }
.settings-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-right: 1px solid var(--line); background: var(--surface-2, #f6f7f9); }
.settings-tab { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-family: var(--font-ui); font-size: 14px; text-align: left; cursor: pointer; }
.settings-tab svg { flex: none; }
.settings-tab:hover { color: var(--ink, #17202f); background: rgba(0, 0, 0, .03); }
.settings-tab.active { color: var(--blue); background: var(--blue-soft); font-weight: 600; }
.settings-body { min-width: 0; padding: 18px 24px 28px; overflow-y: auto; }
.settings-section { max-width: 720px; display: grid; gap: 14px; }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.settings-head h3 { margin: 0; font-size: 16px; }
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-sub { margin: 4px 0 0; font-size: 14px; }
.settings-note { margin: 0; }
.settings-form { display: grid; gap: 14px; }
.settings-field { display: grid; gap: 6px; max-width: 450px; }
.settings-field .field, .settings-field .select { width: 100%; max-width: 100%; min-width: 0; }
.settings-label { color: var(--muted); font-size: 13px; }
.settings-label .req { color: var(--red, #d64545); font-weight: 600; margin-right: 2px; }
.settings-value { margin: 0; font-family: var(--font-text); font-size: 14px; }
.settings-avatar { width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--surface-2, #f1f3f6); color: var(--muted-2); font-size: 30px; font-weight: 700; }
.settings-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 15px; border-radius: 10px; background: var(--surface-2, #f6f7f9); }
.settings-card .grow { flex: 1 1 220px; min-width: 0; }
.settings-card strong { font-size: 14px; }
.settings-card p { margin: 3px 0 0; }
.settings-card.danger { background: #fff5f5; }
.session-list { display: grid; border: 1px solid var(--line); border-radius: 10px; }
.session-list > p { margin: 0; padding: 12px; }
.session-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 13px; border-top: 1px solid var(--line); }
.session-row:first-child { border-top: 0; }
.session-row .grow { flex: 1 1 200px; min-width: 0; }
.session-row strong { font-size: 14px; }
.role-table th:not(:first-child), .role-cell { width: 80px; text-align: center; }
.role-yes { color: var(--green); font-weight: 700; }
.role-no { color: var(--muted-2); }
.settings-section .panel { box-shadow: none; }
@media (max-width: 820px) {
  .settings-shell { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-tab { flex: none; min-height: 36px; white-space: nowrap; }
  .settings-body { padding: 14px; }
}

/* Team permissions: even spacing between chips, across and between rows. */
.perm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chips .filter-chip { margin: 0; }

/* Infloww's type scale (2026-10-19). Sizes above were remapped one step up
   (7-8px captions to 11-12, 9-10 to 13, 11-12 to 14, cards to 16, amounts
   to 20). These set the weights and colours Infloww uses: a darker,
   heavier sidebar and semibold card titles. */
.nav-item { font-size: 15px; font-weight: 500; }
.nav-item.active { font-weight: 600; }
.panel-header h3, .earnings-title h3, .settings-head h3, .fan-card h4 { font-weight: 600; }
.earnings-cell strong { font-size: 20px; }
.earnings-total strong { font-size: 30px; }

/* Buttons keep their label on one line; button rows wrap instead. */
.primary-button, .secondary-button, .ghost-button, .danger-button { white-space: nowrap; }
.heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Analytics reports (Infloww's Analytics group). */
.rep-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.rep-tabs button { padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-family: var(--font-ui); font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: -1px; }
.rep-tabs button.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.rep-filters, .rep-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.rep-head-row { justify-content: space-between; margin-top: 18px; }
.rep-filters .select, .rep-filters .field { width: auto; min-width: 0; }
.rep-date { width: 150px; }
.rep-h { margin: 18px 0 10px; font-size: 16px; font-weight: 600; }
.rep-head-row .rep-h { margin: 0; }
.rep-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rep-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.rep-note { margin: 0 0 10px; }
.rep-cards { margin-bottom: 12px; }
.rep-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 14px; margin-bottom: 14px; }
.rep-two.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rep-two .panel { margin: 0; }
.rep-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rep-compare .select { width: auto; min-width: 150px; }
.sum-grid { display: grid; grid-template-columns: minmax(170px, 1.2fr) repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0; padding: 0; margin-bottom: 14px; overflow: hidden; }
.sum-total { grid-row: span 2; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); }
.sum-total span { color: var(--blue); font-size: 14px; font-weight: 600; }
.sum-total strong { font-size: 30px; color: var(--blue); }
.sum-cell { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.sum-cell span { font-size: 14px; color: var(--muted); font-weight: 500; }
.sum-cell strong { font-size: 20px; }
.sum-cell small, .sum-total small { font-size: 12px; color: var(--muted); }
.sum-cell.untracked strong { color: var(--muted-2); }
.delta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.chart svg { width: 100%; height: auto; display: block; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-axis { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.ch-line { fill: none; stroke-width: 2; stroke: currentColor; }
.ch-dot { fill: currentColor; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.ch-legend i, .breakdown-list i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.c-blue { color: var(--blue); } .c-violet { color: var(--purple); } .c-green { color: var(--green); } .c-teal { color: #14a38b; } .c-orange { color: var(--orange); }
.ch-legend span, .breakdown-list li { color: var(--ink); }
.breakdown { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; }
.donut { width: 140px; height: 140px; }
.donut-seg { fill: none; stroke: currentColor; stroke-width: 22; }
.donut-empty { fill: none; stroke: var(--line); stroke-width: 22; }
.breakdown-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.breakdown-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.breakdown-list li.untracked { color: var(--muted); }
.breakdown-list li.untracked i { background: var(--line); }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ranking li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.rank-n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-family: var(--font-mono); font-size: 12px; flex: none; }
.ranking .grow { flex: 1; min-width: 0; }
.fan-report { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; }
.fan-report-list { border: 1px solid var(--line); border-radius: 11px; background: white; overflow: hidden; }
.fan-report-tools { display: grid; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.fan-report-tools .field, .fan-report-tools .select { width: 100%; }
.fan-report-rows { max-height: 560px; overflow-y: auto; }
.fan-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; border-bottom: 1px solid #f0f2f5; background: white; text-align: left; cursor: pointer; }
.fan-row:hover { background: #fafbfc; }
.fan-row.active { background: #f1f4ff; box-shadow: inset 3px 0 var(--blue); }
.fan-row .grow { flex: 1; min-width: 0; display: grid; }
.fan-row strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fan-row small { font-size: 12px; color: var(--muted); }
.fan-report-detail .empty-state { border: 1px dashed var(--line); border-radius: 11px; padding: 40px 20px; text-align: center; background: white; }
.fan-detail-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fan-detail-head h3 { margin: 0; font-size: 18px; }
.rep-msg-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.rep-field { display: grid; gap: 4px; min-width: 0; }
.rep-field > span:first-child { font-size: 12px; color: var(--muted); }
.rep-field .select, .rep-field .field { width: 100%; min-width: 0; }
.rep-field.wide { grid-column: span 2; }
.rep-price { display: flex; align-items: center; gap: 6px; }
.rep-price .field { flex: 1 1 0; }
.rep-buttons { display: flex; align-items: end; gap: 8px; }
@media (max-width: 1100px) {
  .rep-two, .rep-two.even { grid-template-columns: minmax(0, 1fr); }
  .sum-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sum-total { grid-column: 1 / -1; grid-row: auto; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .fan-report { grid-template-columns: minmax(0, 1fr); }
  .fan-report-rows { max-height: 260px; }
}
@media (max-width: 600px) {
  .sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-field.wide { grid-column: auto; }
  .breakdown { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

/* Team roster: a planned shift fits its day column. Name wraps instead of
   being cut, times stack, and Remove spans the card. */
.roster-item { display: grid; gap: 4px; min-width: 0; padding: 7px 8px; }
.roster-name { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; line-height: 1.3; }
.roster-time { display: grid; font-family: var(--font-mono); font-size: 12px; color: var(--muted); line-height: 1.35; }
.roster-remove { justify-self: stretch; margin-top: 2px; padding: 4px 0; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.roster-remove:hover { color: var(--red); border-color: #f3c4c4; background: #fff5f5; }

/* A button-only cell in a form grid sits on the inputs' baseline, not on the
   label row: the spacer label is dropped and the cell aligns to the bottom. */
.form-grid > div.form-field { align-self: end; }
.form-grid > div.form-field > span:first-child { display: none; }
.form-grid > div.form-field > .primary-button, .form-grid > div.form-field > .secondary-button { height: 35px; min-height: 0; }

/* Growth (Infloww's Growth group): the Settings section list, wider body. */
.growth-shell { grid-template-columns: 220px minmax(0, 1fr); }
.growth-body .panel { box-shadow: none; }
.growth-body > .settings-section, .growth-body > * { max-width: none; }
.growth-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.growth-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.growth-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 640px; }
.growth-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.growth-badge { margin-left: auto; padding: 1px 7px; border-radius: 99px; background: var(--surface-2, #eef0f4); color: var(--muted); font-size: 11px; font-weight: 500; }
.settings-tab.active .growth-badge { background: white; }
.growth-import { display: inline-flex; align-items: center; cursor: pointer; }
.words-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.words-tools > .field { flex: 1 1 220px; min-width: 0; }
.words-add { display: flex; gap: 8px; flex: 1 1 300px; min-width: 0; }
.words-add .field { flex: 1; min-width: 0; }
.words-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.words-letters button { min-width: 34px; height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); font-family: var(--font-ui); font-size: 13px; cursor: pointer; }
.words-letters button small { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.words-letters button[data-empty] { color: var(--muted-2); }
.words-letters button.active { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.words-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.word-card { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 26px; border: 1px solid var(--line); border-radius: 9px; background: white; font-family: var(--font-text); font-size: 14px; text-align: center; overflow-wrap: anywhere; }
.word-card button { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.word-card button:hover { color: var(--red); }
.copilot-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 14px; border-radius: 11px; background: var(--blue); color: white; }
.copilot-banner > div { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.copilot-banner strong { font-size: 20px; font-weight: 600; }
.copilot-banner span { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.4); font-size: 14px; }
.copilot-banner .select { width: auto; color: var(--ink); }
.later-card .panel-body { display: grid; gap: 6px; max-width: 640px; }
.later-card h4 { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.later-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.later-card .status-pill { justify-self: start; }
@media (max-width: 820px) {
  .growth-shell { grid-template-columns: minmax(0, 1fr); }
  .growth-badge { margin-left: 6px; }
}

/* Panel headers grow with their text and keep breathing room above the
   divider, instead of a fixed 56px that pressed long copy onto the line. */
.panel-header { height: auto; min-height: 56px; padding-top: 14px; padding-bottom: 14px; gap: 12px; }

/* Collapsible sidebar: a menu button beside the brand; collapsed, the bar is
   68px of icons with dividers for the section labels. Desktop only: under
   820px the sidebar is already an off-canvas menu. */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.brand-row .brand { min-width: 0; }
.sidebar-toggle { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; color: #8b97ab; background: transparent; cursor: pointer; }
.sidebar-toggle:hover { color: white; background: rgba(255,255,255,.1); }
.sidebar-toggle:focus-visible { outline: 2px solid #8e9eff; outline-offset: -2px; }
.sidebar, .main { transition: width .18s ease, margin-left .18s ease, transform .2s ease; }
@media (min-width: 821px) {
  body.sidebar-collapsed .sidebar { width: 68px; padding: 16px 10px 12px; }
  body.sidebar-collapsed .main { width: calc(100% - 68px); margin-left: 68px; }
  body.sidebar-collapsed .brand-row { flex-direction: column; gap: 10px; }
  body.sidebar-collapsed .brand { display: none; }
  body.sidebar-collapsed .workspace-switcher { justify-content: center; padding: 6px; margin: 12px 0 6px; }
  body.sidebar-collapsed .workspace-copy, body.sidebar-collapsed .workspace-switcher .chevron { display: none; }
  body.sidebar-collapsed .nav-label { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; font-size: 0; background: rgba(255,255,255,.1); }
  body.sidebar-collapsed .nav-item { position: relative; justify-content: center; padding: 0; gap: 0; }
  body.sidebar-collapsed .nav-item > span:first-child { width: auto; font-size: 17px; }
  body.sidebar-collapsed .nav-text { display: none; }
  body.sidebar-collapsed .nav-count { position: absolute; top: 3px; right: 3px; min-width: 16px; padding: 0 4px; font-size: 11px; line-height: 16px; }
  body.sidebar-collapsed .user-card { justify-content: center; padding: 9px 0 3px; }
  body.sidebar-collapsed .user-card { position: relative; }
  body.sidebar-collapsed .user-card > span:nth-child(2) { display: none; }
  /* The account menu stays reachable: the avatar itself opens it. */
  body.sidebar-collapsed .user-card button { position: absolute; inset: 0; width: 100%; opacity: 0; }
}
@media (max-width: 820px) {
  .sidebar-toggle { display: none; }
}
.brand-row .brand { flex: 1 1 auto; overflow: hidden; white-space: nowrap; }
.words-defaults { margin-bottom: 12px; background: var(--blue-soft); }
.resub-auto { margin-bottom: 12px; }
.resub-tabs { margin: 0; border-bottom: 0; }
.resub-tabs small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.resub-empty { border: 1px dashed var(--line); border-radius: 11px; padding: 32px 20px; text-align: center; background: white; }
.resub-empty p { max-width: 520px; margin: 6px auto 0; color: var(--muted); }

/* Content Manager hub (Infloww's OF Manager, for Fans Monster). */
.preview-stage { display: flex; justify-content: center; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #eef1f6; }
.preview-frame { display: block; width: 100%; height: 720px; border: 0; border-radius: 10px; background: #0b0f17; box-shadow: var(--shadow); }
.preview-stage.phone .preview-frame { width: 390px; max-width: 100%; height: 760px; border-radius: 28px; border: 10px solid #111827; }
.profile-card { overflow: hidden; }
.profile-cover { height: 150px; background: linear-gradient(120deg, #dadfff, #f5dff0) center / cover no-repeat; }
.profile-body { display: grid; gap: 8px; padding-top: 0; }
.profile-portrait { width: 84px; height: 84px; margin-top: -42px; display: grid; place-items: center; overflow: hidden; border: 4px solid white; border-radius: 50%; background: var(--blue); color: white; font-size: 24px; font-weight: 700; }
.profile-portrait img { width: 100%; height: 100%; object-fit: cover; }
.profile-body h3 { margin: 0; font-size: 18px; }
.profile-bio { margin: 0; font-family: var(--font-text); font-size: 14px; line-height: 1.55; white-space: pre-wrap; max-width: 640px; }
.mgr-activity { border: 1px solid var(--line); border-radius: 11px; background: white; overflow: hidden; }
.money.neg { color: var(--red); }
a.secondary-button, a.primary-button { display: inline-flex; align-items: center; text-decoration: none; }
.preview-stage.desktop { display: block; }
.preview-scaler { position: relative; width: 100%; overflow: hidden; border-radius: 10px; box-shadow: var(--shadow); background: #0b0f17; }
.preview-scaler .preview-frame { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; max-width: none; border-radius: 0; box-shadow: none; transform-origin: 0 0; }

/* Fan tags: chips with remove buttons, an add picker, and the Tags panel. */
.tag-editor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; }
.tag-chip small { font-family: var(--font-mono); font-size: 11px; opacity: .75; }
.tag-chip button { border: 0; background: none; padding: 0 0 0 2px; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: .6; }
.tag-chip button:hover { opacity: 1; color: var(--red); }
.tag-add { height: 26px; padding: 0 6px; border: 1px dashed var(--line); border-radius: 99px; background: white; color: var(--muted); font-size: 12px; cursor: pointer; max-width: 110px; }
.tag-add:hover { border-color: var(--blue); color: var(--blue); }
.tags-panel { display: grid; gap: 12px; }
.tag-create { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-create .field { flex: 1 1 220px; min-width: 0; }
.tag-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag-group-label { min-width: 84px; font-size: 12px; font-weight: 600; color: var(--muted); }

/* Earnings breakdown: the donut stacks above the list whenever its panel is
   narrow (the Content Manager column, small screens), so labels never run
   into the figures. */
.rep-two > .panel, .rep-two.even > .panel { container-type: inline-size; min-width: 0; }
.breakdown-list li { grid-template-columns: auto minmax(70px, 1fr) auto auto; }
.breakdown-list li > span { white-space: nowrap; }
.breakdown-list li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 440px) {
  .breakdown { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .breakdown-list { width: 100%; }
}