/* ==========================================================================
   SmokeStudio — Growth Engine Backoffice MVP
   Dark Obsidian / Glassmorphism design language
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────
   TOKENS
   ────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --void: #08090C;
  --header: #090A0E;
  --card: #101116;
  --raised: #16171C;
  --subcard: #0C0D11;

  /* Strokes */
  --stroke: rgba(255, 255, 255, 0.05);
  --stroke-strong: rgba(255, 255, 255, 0.10);
  --stroke-soft: rgba(255, 255, 255, 0.04);

  /* Text */
  --ink: #EDEDED;
  --ink-2: #A7ACB4;
  --ink-3: #8A8F98;
  --ink-4: #5B606A;

  /* Accents — one accent, used sparingly */
  --accent: #3B82F6;
  --accent-2: #2563EB;
  --grad: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  --grad-soft: linear-gradient(180deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.08) 100%);
  --indigo: #3B82F6;
  --coral: #EF4444;
  --teal: #22C55E;
  --amber: #EAB308;

  /* Type */
  --font-head: 'Urbanist', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Geometry */
  --r-lg: 12px;
  --r-md: 10px;
  --r-sm: 8px;
  --r-pill: 999px;

  /* Elevation — quiet by default; only floating layers cast a shadow */
  --shadow-card: none;
  --shadow-float: 0 24px 64px -22px rgba(0, 0, 0, 0.86);

  /* Layout */
  --header-h: 57px;
  --nav-h: 45px;
  --gutter: 18px;
  --maxw: 1560px;
  /* The column header, tabs and main content all line up against. */
  --content-w: calc(1560px - 56px);
}

/* ──────────────────────────────────────────────────────────────────────
   RESET
   ────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Author display rules outrank the UA [hidden] rule — restore it explicitly. */
[hidden] {
  display: none !important;
}

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  margin: 0;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

code,
pre {
  font-family: var(--font-mono);
}

::selection {
  background: rgba(59, 130, 246, 0.45);
}

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

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ──────────────────────────────────────────────────────────────────────
   HEADER
   ────────────────────────────────────────────────────────────────────── */
.bo-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px 28px;
  background: var(--header);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bo-header__inner {
  max-width: var(--content-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bo-header__left,
.bo-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.bo-header__right {
  flex: none;
  gap: 10px;
}

.bo-header__logo {
  height: 20px;
  width: auto;
  display: block;
  flex: none;
}

.bo-header__divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.10);
  flex: none;
}

/* Project switcher — the select is laid transparently over its own label so
   the caret hugs the project name instead of the select's intrinsic width. */
.bo-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 9px;
  margin-left: -9px;
  border-radius: 6px;
  min-width: 0;
  transition: background 0.16s ease;
}

.bo-switcher:hover {
  background: rgba(255, 255, 255, 0.04);
}

.bo-switcher:has(.bo-switcher__select:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.bo-switcher__value {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bo-switcher__caret {
  font-size: 9px;
  color: var(--ink-3);
  flex: none;
}

.bo-switcher__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.bo-switcher__select:focus {
  outline: none;
}

.bo-switcher__select option {
  background: var(--card);
  color: var(--ink);
}

/* Settings button */
.bo-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.bo-settings-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--stroke-strong);
  color: var(--ink);
}

.bo-settings-btn__gear {
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}

.bo-settings-btn__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
  flex: none;
  transition: background 0.24s ease, box-shadow 0.24s ease;
}

.bo-settings-btn__dot[data-state="on"] {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

/* Profile */
.bo-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--stroke);
  flex: none;
}

.bo-profile__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--stroke-strong);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  flex: none;
}

.bo-profile__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bo-profile__name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Role badge — the visible half of the RBAC guard: KAM / Admin / Modo Local */
.bo-profile__role {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.bo-profile__role[data-role="admin"] {
  color: var(--teal);
}

.bo-profile__role[data-role="local"] {
  color: var(--amber);
}

.bo-profile__role[data-role="none"] {
  color: var(--ink-4);
}

.bo-icon-btn--logout {
  width: auto;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  gap: 4px;
  margin-left: 6px;
  color: var(--coral);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.32);
}

.bo-icon-btn--logout:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.45);
  color: var(--coral);
}

/* Connector liveness — lives inside the Settings modal, not the header */
.bo-live {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bo-engine {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  background: var(--subcard);
  border: 1px solid var(--stroke);
  font-size: 11px;
  white-space: nowrap;
  transition: border-color 0.24s ease, background 0.24s ease;
}

.bo-engine__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-4);
  transition: background 0.24s ease, box-shadow 0.24s ease;
}

.bo-engine__label {
  color: var(--ink-3);
}

.bo-engine__value {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.bo-engine[data-state="live"] .bo-engine__dot {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.bo-engine[data-state="live"] .bo-engine__value {
  color: var(--teal);
}

/* ──────────────────────────────────────────────────────────────────────
   NAV TABS
   ────────────────────────────────────────────────────────────────────── */
.bo-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 55;
  display: flex;
  padding: 0 28px;
  background: var(--void);
  border-bottom: 1px solid var(--stroke);
}

.bo-nav__list {
  display: flex;
  gap: 26px;
  flex: 1;
  max-width: var(--content-w);
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.bo-nav__list::-webkit-scrollbar {
  display: none;
}

.bo-tab {
  position: relative;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 13px;
  font-weight: 500;
  color: #71717A;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.bo-tab:hover {
  color: var(--ink-2);
}

.bo-tab.is-active {
  color: #fff;
  border-bottom-color: #fff;
}

/* ──────────────────────────────────────────────────────────────────────
   MAIN / VIEWS
   ────────────────────────────────────────────────────────────────────── */
.bo-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 28px 72px;
}

.bo-view {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  animation: bo-fade 0.28s ease;
}

@keyframes bo-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.bo-view__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 2px 2px;
}

.bo-view__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.bo-view__sub {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 3px;
}

.bo-view__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────────
   CARDS
   ────────────────────────────────────────────────────────────────────── */
.bo-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}

.bo-card--flush {
  padding: 18px 0 0;
  gap: 0;
}

.bo-card--flush > .bo-card__head {
  padding: 0 20px 16px;
}

.bo-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
}

.bo-card__head--sep {
  border-top: 1px solid var(--stroke-soft);
  padding-top: 14px;
  margin-top: 4px;
}

.bo-card__head--toggle {
  cursor: pointer;
  user-select: none;
}

.bo-card__headmeta {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bo-card__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 9px;
}

.bo-step {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-3);
}

.bo-caret {
  font-size: 11px;
  color: var(--ink-3);
  transition: transform 0.22s ease;
}

.bo-card__head--toggle[aria-expanded="true"] .bo-caret {
  transform: rotate(180deg);
}

.bo-note {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

.bo-note code {
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}

.bo-hint {
  font-size: 11.5px;
  color: var(--ink-3);
}

.bo-hint--ok {
  color: var(--teal);
}

.bo-hint--warn {
  color: var(--amber);
}

.bo-hint--err {
  color: var(--coral);
}

.bo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  min-width: 0;
}

.bo-cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: start;
}

.bo-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bo-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* ──────────────────────────────────────────────────────────────────────
   CHIPS / BUTTONS / FIELDS
   ────────────────────────────────────────────────────────────────────── */
.bo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--stroke);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.bo-chip--muted {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
}

.bo-chip--ghost {
  background: transparent;
}

.bo-chip--teal {
  color: var(--teal);
  border-color: rgba(34, 197, 94, 0.28);
}

.bo-chip--amber {
  color: var(--amber);
  border-color: rgba(234, 179, 8, 0.28);
}

.bo-chip--busy {
  color: var(--accent);
  border-color: rgba(59, 130, 246, 0.38);
}

.bo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}

.bo-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.bo-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.bo-btn--gradient {
  background: var(--grad);
  color: #fff;
}

.bo-btn--gradient:hover:not(:disabled) {
  background: linear-gradient(180deg, #4C8DF7 0%, #2F6FE0 100%);
}

.bo-btn--outline {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--stroke-strong);
  color: var(--ink);
}

.bo-btn--outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.24);
}

.bo-btn--ghost {
  background: transparent;
  border-color: var(--stroke);
  color: var(--ink-2);
}

.bo-btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}

.bo-btn--danger {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.35);
  color: #FCA5A5;
}

.bo-btn--danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.18);
}

.bo-btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: var(--r-sm);
}

.bo-btn--xs {
  height: 27px;
  padding: 0 10px;
  font-size: 11px;
  border-radius: 6px;
  gap: 4px;
}

.bo-btn--lg {
  height: 48px;
  padding: 0 22px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: var(--r-md, var(--r-sm));
}

.bo-btn--block {
  width: 100%;
}

.bo-btn--file {
  cursor: pointer;
}

.bo-btnrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Actions size to their label instead of stretching edge to edge. */
.bo-btnrow .bo-btn {
  flex: 0 0 auto;
}

.bo-card > .bo-btn:not(.bo-btn--block) {
  align-self: flex-start;
}

/* Spinner */
.bo-btn__spinner {
  display: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: bo-spin 0.7s linear infinite;
}

.bo-btn.is-loading .bo-btn__spinner {
  display: inline-block;
}

.bo-btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

@keyframes bo-spin {
  to {
    transform: rotate(360deg);
  }
}

.bo-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--stroke);
  color: var(--ink-3);
  font-size: 12px;
  transition: background 0.18s ease, color 0.18s ease;
  flex: none;
}

.bo-icon-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--ink);
}

/* Fields */
.bo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bo-field__label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

.bo-input {
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  background: var(--subcard);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 13px;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.bo-input::placeholder {
  color: var(--ink-3);
  opacity: 0.7;
}

.bo-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.65);
  background: #0E0F14;
}

.bo-input--area {
  resize: vertical;
  line-height: 1.55;
  min-height: 60px;
}

.bo-input--mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
}

select.bo-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
  cursor: pointer;
}

select.bo-input option {
  background: var(--raised);
  color: var(--ink);
}

.bo-input-group {
  display: flex;
  gap: 7px;
  align-items: center;
}

.bo-input-group .bo-input {
  flex: 1;
  min-width: 0;
}

/* Inline "Probar Conexión" trigger + its verdict line */
.bo-btn--test {
  flex: none;
  white-space: nowrap;
}

.bo-testresult {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -4px 0 0;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-2);
  overflow-wrap: anywhere;
  animation: bo-fade 0.22s ease;
}

.bo-testresult[data-state="ok"] {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.09);
  color: var(--teal);
}

.bo-testresult[data-state="err"] {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.09);
  color: #FCA5A5;
}

.bo-testresult[data-state="busy"] {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.10);
  color: #93B4FD;
}

/* Switch */
.bo-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.bo-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bo-switch__track {
  width: 36px;
  height: 20px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--stroke);
  position: relative;
  transition: background 0.22s ease;
  flex: none;
}

.bo-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: transform 0.22s ease, background 0.22s ease;
}

.bo-switch input:checked + .bo-switch__track {
  background: rgba(34, 197, 94, 0.28);
  border-color: rgba(34, 197, 94, 0.45);
}

.bo-switch input:checked + .bo-switch__track .bo-switch__thumb {
  transform: translateX(16px);
  background: var(--teal);
}

.bo-switch input:focus-visible + .bo-switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bo-switch__label {
  font-size: 12px;
  color: var(--ink-2);
}

.bo-objective {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
}

.bo-objective__label {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}

.bo-objective select.bo-input {
  height: 28px;
  border: none;
  background: transparent;
  padding-right: 4px;
  font-size: 12px;
  min-width: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   PARRILLA — summary
   ────────────────────────────────────────────────────────────────────── */
.bo-monthnav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
}

.bo-monthnav__label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  min-width: 130px;
  text-align: center;
  text-transform: capitalize;
}

.bo-monthnav .bo-icon-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  font-size: 16px;
}

.bo-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(96px, 140px)) 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.bo-summary__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 14px;
  border-right: 1px solid var(--stroke-soft);
}

.bo-summary__value {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.bo-summary__value--teal {
  color: var(--teal);
}

.bo-summary__label {
  font-size: 11.5px;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

.bo-summary__bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 8px;
}

.bo-summary__barlabel {
  font-size: 11.5px;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
}

.bo-summary__barlabel b {
  font-family: var(--font-mono);
  color: var(--ink);
}

.bo-progress {
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.bo-progress > i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Legend */
.bo-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bo-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
}

.bo-legend__item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.bo-legend__item[data-status="planned"]::before {
  background: var(--ink-4);
}

.bo-legend__item[data-status="ready"]::before {
  background: var(--amber);
}

.bo-legend__item[data-status="approved"]::before {
  background: var(--accent);
}

.bo-legend__item[data-status="published"]::before {
  background: var(--teal);
}

/* ──────────────────────────────────────────────────────────────────────
   CALENDAR
   ────────────────────────────────────────────────────────────────────── */
.bo-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 6px 14px 16px;
  background: transparent;
  border-top: 1px solid var(--stroke-soft);
}

.bo-cal-dow {
  background: transparent;
  padding: 10px 8px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-4);
  text-align: left;
}

.bo-cal-day {
  background: transparent;
  border-radius: 7px;
  min-height: 92px;
  padding: 7px 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: background 0.18s ease;
}

.bo-cal-day:hover {
  background: rgba(255, 255, 255, 0.025);
}

.bo-cal-day--pad {
  opacity: 0.3;
  pointer-events: none;
}

.bo-cal-day--today {
  background: rgba(59, 130, 246, 0.07);
}

.bo-cal-day__n {
  font-size: 11.5px;
  color: var(--ink-4);
  font-weight: 500;
  line-height: 1.2;
}

.bo-cal-day--today .bo-cal-day__n {
  color: var(--accent);
  font-weight: 600;
}

.bo-cal-day__add {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition: opacity 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.bo-cal-day:hover .bo-cal-day__add {
  opacity: 1;
}

.bo-cal-day__add:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

/* One slot = one status dot + a quiet label. */
.bo-cal-pill {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 2px 4px;
  border: none;
  border-radius: 5px;
  background: transparent;
  transition: background 0.16s ease;
}

.bo-cal-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
  margin-top: 5px;
  background: var(--ink-4);
}

.bo-cal-pill[data-status="ready"]::before {
  background: var(--amber);
}

.bo-cal-pill[data-status="approved"]::before {
  background: var(--accent);
}

.bo-cal-pill[data-status="published"]::before {
  background: var(--teal);
}

.bo-cal-pill:hover {
  background: rgba(255, 255, 255, 0.05);
}

.bo-cal-pill__t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-3);
  overflow-wrap: anywhere;
  transition: color 0.16s ease;
}

.bo-cal-pill:hover .bo-cal-pill__t,
.bo-cal-pill[data-status="published"] .bo-cal-pill__t {
  color: var(--ink-2);
}

/* ──────────────────────────────────────────────────────────────────────
   TABLE
   ────────────────────────────────────────────────────────────────────── */
.bo-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.bo-fchip {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  border: 1px solid transparent;
  transition: all 0.16s ease;
}

.bo-fchip:hover {
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.05);
}

.bo-fchip.is-active {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--stroke);
}

.bo-tablewrap {
  overflow-x: auto;
  border-top: 1px solid var(--stroke-soft);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.bo-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.bo-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-4);
  padding: 10px 18px;
  background: transparent;
  border-bottom: 1px solid var(--stroke-soft);
  white-space: nowrap;
}

.bo-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--stroke-soft);
  vertical-align: middle;
  font-size: 12.5px;
}

.bo-table tbody tr {
  transition: background 0.16s ease;
}

.bo-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.bo-table tbody tr:last-child td {
  border-bottom: none;
}

.bo-cell-date {
  font-size: 11px;
  color: var(--ink-4);
  white-space: nowrap;
}

.bo-cell-date b {
  display: block;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}

.bo-cell-topic {
  font-weight: 400;
  color: var(--ink);
  max-width: 420px;
}

.bo-cell-topic small {
  display: block;
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 3px;
}

.bo-cell-mission {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: var(--teal);
  opacity: 0.85;
  margin-top: 3px;
}

.bo-cell-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.bo-empty-row {
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
  padding: 34px 14px !important;
}

/* Status — a coloured dot and a quiet label */
.bo-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

.bo-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-4);
}

.bo-status--planned::before {
  background: var(--ink-4);
}

.bo-status--ready::before {
  background: var(--amber);
}

.bo-status--approved::before {
  background: var(--accent);
}

.bo-status--published::before {
  background: var(--teal);
}

/* Channel tag */
.bo-channel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
}

.bo-channel__ico {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
}

/* Score pill */
.bo-scorepill {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-4);
}

.bo-scorepill--good {
  color: var(--teal);
}

.bo-scorepill--mid {
  color: var(--amber);
}

.bo-scorepill--bad {
  color: var(--coral);
}

/* ──────────────────────────────────────────────────────────────────────
   RESEARCH PACK
   ────────────────────────────────────────────────────────────────────── */
.bo-collapse {
  animation: bo-fade 0.24s ease;
}

.bo-research {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.bo-research__panel {
  background: var(--subcard);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
}

.bo-research__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 10px;
}

.bo-research__title small {
  font-weight: 500;
  color: var(--ink-3);
  font-size: 10px;
  margin-left: auto;
  font-family: var(--font-mono);
}

.bo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.bo-dot--coral {
  background: var(--coral);
}

.bo-dot--teal {
  background: var(--teal);
}

.bo-research__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 260px;
  overflow-y: auto;
}

.bo-research__list > li {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--stroke-soft);
}

.bo-research__list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bo-research__q {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 12px;
}

.bo-research__src {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--indigo);
  margin: 2px 0 3px;
}

.bo-research__cite {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 3px;
}

.bo-research__url {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.bo-research__url:hover {
  color: #93B4FD;
  text-decoration: underline;
}

/* Tavily's own AI summary, when the live API returns one */
.bo-research__answer {
  padding: 10px 12px !important;
  border: 1px solid rgba(34, 197, 94, 0.26);
  border-radius: var(--r-sm);
  background: rgba(34, 197, 94, 0.07);
  color: var(--ink-2) !important;
}

.bo-research__answerlabel {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 5px;
}

.bo-research__empty {
  color: var(--ink-3);
  font-style: italic;
  border-bottom: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
   STUDIO LAYOUT
   ────────────────────────────────────────────────────────────────────── */
.bo-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: var(--gutter);
  align-items: start;
}

.bo-rail {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  position: sticky;
  top: calc(var(--header-h) + var(--nav-h) + 18px);
}

.bo-card--editor {
  min-height: 560px;
}

.bo-segment {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 7px;
}

.bo-segment__btn {
  height: 24px;
  padding: 0 11px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  transition: all 0.18s ease;
}

.bo-segment__btn:hover {
  color: var(--ink-2);
}

.bo-segment__btn.is-active {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
}

.bo-editor {
  display: grid;
  gap: 1px;
  background: var(--stroke-soft);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  overflow: hidden;
  flex: 1;
  min-height: 500px;
}

.bo-editor[data-mode="split"] {
  grid-template-columns: 1fr 1fr;
}

.bo-editor[data-mode="markdown"] {
  grid-template-columns: 1fr;
}

.bo-editor[data-mode="markdown"] .bo-editor__pane--preview {
  display: none;
}

.bo-editor[data-mode="preview"] {
  grid-template-columns: 1fr;
}

.bo-editor[data-mode="preview"] .bo-editor__pane--md {
  display: none;
}

.bo-editor__pane {
  background: var(--subcard);
  min-width: 0;
  overflow-y: auto;
  max-height: 640px;
}

.bo-code-area {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: none;
  background: transparent;
  padding: 20px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.78;
  color: #9BA1AB;
  resize: none;
}

.bo-code-area:focus {
  outline: none;
}

/* Prose preview — "Super Light" reading view: an off-white paper against the
   dark app chrome, sized and spaced to stay readable on a phone screen
   without the eye fatigue of a dense dark block of tax copy. */
.bo-prose {
  --prose-bg: #F8FAFC;
  --prose-ink: #1E293B;
  --prose-ink-soft: #475569;
  --prose-ink-faint: #64748B;
  --prose-link: #2563EB;
  --prose-code-bg: rgba(15, 23, 42, 0.06);
  --prose-code-ink: #0F766E;
  --prose-border: #E2E8F0;
  --prose-border-soft: #EDF2F7;

  background-color: var(--prose-bg);
  padding: 26px 30px 40px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--prose-ink);
  max-width: 68ch;
}

@media (prefers-color-scheme: dark) {
  .bo-prose {
    --prose-bg: #0F172A;
    --prose-ink: #F1F5F9;
    --prose-ink-soft: #CBD5E1;
    --prose-ink-faint: #94A3B8;
    --prose-link: #93B4FD;
    --prose-code-bg: rgba(255, 255, 255, 0.07);
    --prose-code-ink: #5EEAD4;
    --prose-border: #1E293B;
    --prose-border-soft: #182338;
  }
}

.bo-prose__empty {
  color: var(--prose-ink-faint);
  font-style: italic;
  text-align: center;
  padding: 60px 0;
}

.bo-prose h1 {
  font-size: 25px;
  font-weight: 700;
  color: var(--prose-ink);
  margin: 0 0 18px;
  line-height: 1.25;
  letter-spacing: -0.024em;
}

.bo-prose h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--prose-ink);
  margin: 32px 0 12px;
  letter-spacing: -0.014em;
}

.bo-prose h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--prose-ink);
  margin: 18px 0 6px;
}

.bo-prose h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--prose-ink-soft);
  margin: 14px 0 5px;
}

.bo-prose p {
  margin: 0 0 1.25rem;
}

.bo-prose ul,
.bo-prose ol {
  margin: 0 0 14px;
  padding-left: 20px;
}

.bo-prose li {
  margin-bottom: 5px;
}

.bo-prose strong {
  color: var(--prose-ink);
  font-weight: 600;
}

.bo-prose a {
  color: var(--prose-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bo-prose code {
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--prose-code-bg);
  color: var(--prose-code-ink);
}

.bo-prose hr {
  border: none;
  border-top: 1px solid var(--prose-border);
  margin: 22px 0;
}

.bo-prose blockquote {
  margin: 0 0 14px;
  padding: 4px 0 4px 16px;
  background: transparent;
  border-left: 2px solid var(--prose-border);
}

.bo-prose blockquote p {
  margin: 0;
  color: var(--prose-ink);
  font-size: 13px;
}

.bo-prose__tablewrap {
  overflow-x: auto;
  margin: 0 0 16px;
  border: 1px solid var(--prose-border);
  border-radius: var(--r-sm);
}

.bo-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.bo-prose th {
  text-align: left;
  padding: 10px 13px;
  background: transparent;
  font-weight: 500;
  color: var(--prose-ink-faint);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  border-bottom: 1px solid var(--prose-border);
}

.bo-prose td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--prose-border-soft);
  vertical-align: top;
}

.bo-prose tbody tr:last-child td {
  border-bottom: none;
}

/* ──────────────────────────────────────────────────────────────────────
   STUDIO SCOREBAR
   ────────────────────────────────────────────────────────────────────── */
/* The whole GEO scorecard collapses into one line above the editor.
   The full metric breakdown stays available as the element's title. */
.bo-scorebar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1px solid var(--stroke);
  background: transparent;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  cursor: default;
  transition: border-color 0.24s ease, color 0.24s ease;
}

.bo-scorebar::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-4);
  transition: background 0.24s ease;
}

.bo-scorebar[data-state="low"]::before {
  background: var(--coral);
}

.bo-scorebar[data-state="mid"]::before {
  background: var(--amber);
}

.bo-scorebar[data-state="good"]::before {
  background: var(--teal);
}

.bo-scorebar[data-state="good"] {
  color: var(--ink-2);
  border-color: rgba(34, 197, 94, 0.28);
}

/* ──────────────────────────────────────────────────────────────────────
   JSON INSPECTOR + LOG
   ────────────────────────────────────────────────────────────────────── */
.bo-json-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bo-method {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--stroke);
}

.bo-endpoint {
  font-size: 10.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.bo-json {
  margin: 0;
  padding: 12px 14px;
  background: #0A0B0F;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-sm);
  font-size: 10.5px;
  line-height: 1.65;
  max-height: 210px;
  overflow: auto;
  white-space: pre;
  color: var(--ink-2);
}

.j-key {
  color: #93B4FD;
}

.j-str {
  color: var(--teal);
}

.j-num {
  color: var(--amber);
}

.j-bool {
  color: var(--coral);
}

.j-null {
  color: var(--ink-3);
}

.bo-card--log .bo-log {
  height: 168px;
  overflow-y: auto;
  background: #0A0B0F;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bo-log__line {
  color: var(--ink-2);
  word-break: break-word;
}

.bo-log__ts {
  color: var(--ink-3);
  margin-right: 7px;
}

.bo-log__line--ok {
  color: var(--teal);
}

.bo-log__line--err {
  color: var(--coral);
}

.bo-log__line--warn {
  color: var(--amber);
}

.bo-log__line--muted {
  color: var(--ink-3);
}

/* ──────────────────────────────────────────────────────────────────────
   CONTEXT & ASSETS
   ────────────────────────────────────────────────────────────────────── */
.bo-snippets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 420px;
  overflow-y: auto;
}

.bo-snippet {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--stroke-soft);
  border-radius: 0;
  padding: 12px 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bo-snippet:last-child {
  border-bottom: none;
}

.bo-snippet.is-off {
  opacity: 0.45;
}

.bo-snippet .bo-icon-btn {
  width: 26px;
  height: 26px;
  border-color: transparent;
  color: var(--ink-4);
}

.bo-snippet .bo-icon-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}

.bo-snippet__head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bo-snippet__title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bo-snippet__size {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.bo-snippet__body {
  font-size: 11.5px;
  color: var(--ink-4);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bo-snippet__tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.bo-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  background: transparent;
  border: 1px solid var(--stroke);
  color: var(--ink-3);
}

.bo-empty {
  padding: 26px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-4);
  border: 1px dashed var(--stroke);
  border-radius: var(--r-sm);
}

/* Logo box */
.bo-logobox {
  display: flex;
  gap: 14px;
  align-items: center;
}

.bo-logobox__preview {
  width: 148px;
  height: 84px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--stroke-strong);
  background: var(--subcard);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}

.bo-logobox__preview img {
  max-width: 88%;
  max-height: 76%;
  object-fit: contain;
}

.bo-logobox__empty {
  font-size: 11px;
  color: var(--ink-3);
}

.bo-logobox__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Palette */
.bo-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bo-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--subcard);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.bo-swatch__input {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--stroke);
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  flex: none;
}

.bo-swatch__input::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.bo-swatch__input::-webkit-color-swatch {
  border: none;
  border-radius: 7px;
}

.bo-swatch__input::-moz-color-swatch {
  border: none;
  border-radius: 7px;
}

.bo-swatch__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.bo-swatch__meta b {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

.bo-swatch__hex {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink);
  padding: 0;
}

.bo-swatch__hex:focus {
  outline: none;
  color: var(--teal);
}

/* Social reference import bar */
.bo-mood-import {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 10px;
}

.bo-mood-import .bo-input {
  flex: 1;
  min-width: 0;
}

.bo-mood-import .bo-btn {
  flex: none;
  white-space: nowrap;
}

/* Dropzone + moodboard */
.bo-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 24px;
  border: 1px dashed var(--stroke-strong);
  border-radius: var(--r-sm);
  background: var(--subcard);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.bo-dropzone:hover,
.bo-dropzone.is-over {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.05);
}

.bo-dropzone__text {
  font-size: 11.5px;
  color: var(--ink-3);
}

.bo-moodboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 8px;
}

.bo-mood {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--subcard);
}

.bo-mood img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bo-mood__del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
  background: rgba(8, 9, 12, 0.86);
  color: var(--ink-2);
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease;
}

.bo-mood:hover .bo-mood__del {
  opacity: 1;
}

.bo-mood__del:hover {
  color: var(--coral);
}

/* Uploaded video files — vertical tile, matches short-form video framing */
.bo-mood--video {
  aspect-ratio: 9 / 16;
}

.bo-mood video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Social references (TikTok/Instagram) — thumbnail + play icon, links out
   to the source post since the platform never hands over a video file. */
.bo-mood__playlink {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.bo-mood__playlink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bo-mood__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #fff;
  background: rgba(8, 9, 12, 0.28);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Cover / OpenGraph image studio */
.bo-cover-box {
  display: flex;
}

.bo-cover-preview {
  width: 100%;
  aspect-ratio: 1200 / 630;
  border-radius: var(--r-sm);
  border: 1px dashed var(--stroke-strong);
  background: var(--subcard);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.bo-cover-preview:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

.bo-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bo-cover-empty {
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
  padding: 0 20px;
}

/* ──────────────────────────────────────────────────────────────────────
   COPILOT
   ────────────────────────────────────────────────────────────────────── */
.bo-copilot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gutter);
  align-items: start;
}

.bo-card--chat {
  height: calc(100vh - 260px);
  min-height: 520px;
  gap: 11px;
}

.bo-card--ctx {
  position: sticky;
  top: calc(var(--header-h) + var(--nav-h) + 18px);
}

.bo-chat {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px;
}

.bo-msg {
  display: flex;
  gap: 10px;
  max-width: 100%;
  animation: bo-fade 0.24s ease;
}

.bo-msg__avatar {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  color: var(--ink-3);
}

.bo-msg--user .bo-msg__avatar {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--stroke-strong);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
}

/* Assistant answers read as plain prose; only the user's turn gets a box. */
.bo-msg__bubble {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.72;
  color: var(--ink-2);
  min-width: 0;
  overflow-wrap: break-word;
}

.bo-msg--user .bo-msg__bubble {
  background: var(--raised);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  color: var(--ink);
}

.bo-msg__bubble > *:first-child {
  margin-top: 0;
}

.bo-msg__bubble > *:last-child {
  margin-bottom: 0;
}

.bo-msg__bubble h1,
.bo-msg__bubble h2,
.bo-msg__bubble h3 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 16px 0 7px;
}

.bo-msg__bubble p {
  margin: 0 0 9px;
}

.bo-msg__bubble ul,
.bo-msg__bubble ol {
  margin: 0 0 9px;
  padding-left: 19px;
}

.bo-msg__bubble li {
  margin-bottom: 4px;
}

.bo-msg__bubble strong {
  color: var(--ink);
}

.bo-msg__bubble code {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--teal);
}

.bo-msg__bubble .bo-prose__tablewrap {
  margin-bottom: 9px;
}

.bo-msg__bubble table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.bo-msg__bubble th,
.bo-msg__bubble td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--stroke-soft);
  text-align: left;
}

.bo-msg__bubble th {
  color: var(--ink-3);
  font-weight: 500;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.bo-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px 0;
}

.bo-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: bo-bounce 1.2s infinite ease-in-out;
}

.bo-typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.bo-typing i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bo-bounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.bo-chat__empty {
  margin: auto;
  text-align: center;
  padding: 26px;
  max-width: 400px;
}

.bo-chat__empty b {
  display: block;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.bo-chat__empty span {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

.bo-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.bo-chips::-webkit-scrollbar {
  display: none;
}

.bo-prompt-chip {
  height: 29px;
  padding: 0 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--stroke);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
  flex: none;
  transition: all 0.16s ease;
}

.bo-prompt-chip:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--stroke-strong);
  color: var(--ink-2);
}

.bo-composer {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  padding: 9px;
  background: var(--subcard);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  transition: border-color 0.18s ease;
}

.bo-composer:focus-within {
  border-color: rgba(59, 130, 246, 0.65);
}

.bo-composer__input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  font-size: 13px;
  line-height: 1.55;
  padding: 8px 6px;
  max-height: 140px;
  min-height: 38px;
}

.bo-composer__input:focus {
  outline: none;
}

.bo-composer__send {
  height: 36px;
  padding: 0 16px;
  flex: none;
}

.bo-ctxlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bo-ctxlist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--stroke-soft);
}

.bo-ctxlist li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bo-ctxlist b {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.bo-ctxlist__ico {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  flex: none;
  margin-top: 1px;
}

/* ──────────────────────────────────────────────────────────────────────
   METRICS
   ────────────────────────────────────────────────────────────────────── */
.bo-kpis {
  display: grid;
  /* Six tiles: four editorial + two Clarity. Three columns keeps both rows
     full instead of leaving a ragged 4 + 2. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.bo-kpi {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

.bo-kpi__label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

.bo-kpi__value {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-top: 6px;
  color: var(--ink);
}

.bo-kpi__value--teal {
  color: var(--teal);
}

.bo-kpi__meta {
  font-size: 11.5px;
  color: var(--ink-4);
  margin-bottom: 11px;
}

/* Coverage list */
.bo-coverage,
.bo-channels,
.bo-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bo-coverage li {
  display: grid;
  grid-template-columns: 96px 1fr 46px;
  align-items: center;
  gap: 11px;
}

.bo-coverage__name {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}

.bo-coverage__n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
}

.bo-channels li {
  display: grid;
  grid-template-columns: 118px 1fr 60px;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  color: var(--ink-2);
}

.bo-channels__n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
}

.bo-history {
  max-height: 220px;
  overflow-y: auto;
  gap: 7px;
}

.bo-history li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  padding: 9px 2px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--stroke-soft);
}

.bo-history li:last-child {
  border-bottom: none;
}

.bo-history__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

.bo-history__dot--err {
  background: var(--coral);
}

.bo-history__slug {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bo-history__ts {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────
   MODALS
   ────────────────────────────────────────────────────────────────────── */
.bo-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.bo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 8, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: bo-fadein 0.2s ease;
}

@keyframes bo-fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.bo-modal__panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  animation: bo-modalin 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.bo-modal__panel--sm {
  max-width: 520px;
}

.bo-modal__panel--wide {
  max-width: 1080px;
}

@keyframes bo-modalin {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.bo-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--stroke);
  background: transparent;
}

.bo-modal__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.bo-modal__body {
  padding: 20px 22px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.bo-modal__sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.bo-modal__sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--stroke);
}

.bo-modal__sep span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-4);
}

.bo-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--stroke);
}

.bo-modal__foot--split {
  justify-content: space-between;
  align-items: center;
}

.bo-modal__footgroup {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

/* ──────────────────────────────────────────────────────────────────────
   TOAST
   ────────────────────────────────────────────────────────────────────── */
.bo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 300;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  background: rgba(22, 23, 28, 0.96);
  border: 1px solid var(--stroke-strong);
  box-shadow: var(--shadow-float);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.24s ease, transform 0.24s ease;
  max-width: min(560px, calc(100vw - 40px));
  text-align: center;
}

.bo-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.bo-toast--ok {
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--teal);
}

.bo-toast--err {
  border-color: rgba(239, 68, 68, 0.45);
  color: #FCA5A5;
}

.bo-toast--warn {
  border-color: rgba(234, 179, 8, 0.45);
  color: var(--amber);
}

/* ──────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1360px) {
  .bo-studio {
    grid-template-columns: minmax(0, 1fr) 312px;
  }

  .bo-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1180px) {

  .bo-studio,
  .bo-copilot,
  .bo-cols2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .bo-rail,
  .bo-card--ctx {
    position: static;
  }

  .bo-summary {
    grid-template-columns: repeat(4, 1fr);
  }

  .bo-summary__bar {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .bo-card--chat {
    height: auto;
    min-height: 460px;
  }
}

@media (max-width: 1180px) {
  .bo-header {
    padding: 14px 20px;
  }

  .bo-nav {
    padding: 0 20px;
  }

  .bo-main {
    padding: 22px 20px 64px;
  }
}

@media (max-width: 900px) {
  .bo-header {
    padding: 12px 16px;
    gap: 12px;
    position: static;
  }

  .bo-switcher__select {
    max-width: 150px;
  }

  .bo-settings-btn__text,
  .bo-profile__name {
    display: none;
  }

  .bo-profile {
    padding-left: 8px;
  }

  .bo-nav {
    position: static;
    padding: 0 16px;
  }

  .bo-nav__list {
    gap: 20px;
  }

  .bo-main {
    padding: 20px 16px 56px;
  }

  .bo-research,
  .bo-grid2,
  .bo-grid3,
  .bo-palette {
    grid-template-columns: 1fr;
  }

  .bo-editor[data-mode="split"] {
    grid-template-columns: 1fr;
  }

  .bo-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .bo-kpis {
    grid-template-columns: 1fr;
  }

  .bo-calendar {
    font-size: 10px;
  }

  .bo-cal-day {
    min-height: 70px;
  }

  .bo-view__title {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   AUTH GUARD (RBAC)
   The console behind the guard stays mounted — blurred and inert — so a
   successful sign-in repaints instead of reloading.
   ────────────────────────────────────────────────────────────────────── */
html[data-auth="locked"],
html[data-auth="locked"] body {
  overflow: hidden;
}

html[data-auth="locked"] .bo-header,
html[data-auth="locked"] .bo-nav,
html[data-auth="locked"] .bo-main {
  filter: blur(5px) saturate(0.5);
  pointer-events: none;
  user-select: none;
}

.bo-modal--guard {
  z-index: 400;
}

.bo-modal--guard .bo-modal__backdrop {
  background: rgba(4, 5, 8, 0.9);
}

.bo-guard {
  max-width: 428px;
  text-align: center;
}

.bo-guard__body {
  padding: 34px 30px 26px;
}

.bo-guard__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--grad-soft);
  border: 1px solid var(--stroke-strong);
  font-size: 19px;
  color: var(--accent);
}

.bo-modal--guard[data-state="denied"] .bo-guard__mark {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--coral);
}

.bo-modal--guard[data-state="offline"] .bo-guard__mark {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.3);
  color: var(--amber);
}

.bo-guard__title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
}

.bo-guard__msg {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 auto;
  max-width: 34ch;
}

.bo-guard__actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Denied and offline states are terminal: the only way out is the footer. */
.bo-modal--guard[data-state="denied"] .bo-guard__actions,
.bo-modal--guard[data-state="offline"] .bo-guard__actions {
  display: none;
}

.bo-guard__google {
  width: 100%;
  justify-content: center;
  gap: 9px;
  height: 40px;
}

.bo-guard__glyph {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: #1f1f1f;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
}

.bo-guard__sep {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-4);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bo-guard__sep::before,
.bo-guard__sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stroke);
}

.bo-guard__form {
  display: flex;
  gap: 8px;
}

.bo-guard__form .bo-input {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.bo-guard__form .bo-btn {
  flex: none;
}

.bo-guard__note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.bo-guard__note[data-kind="err"] {
  color: var(--coral);
}

.bo-guard__note[data-kind="ok"] {
  color: var(--teal);
}

.bo-guard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px;
  border-top: 1px solid var(--stroke);
  background: var(--subcard);
}

.bo-guard__link {
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.18s ease;
}

.bo-guard__link:hover {
  color: var(--ink);
}

/* ──────────────────────────────────────────────────────────────────────
   CAROUSEL STUDIO
   Layout/chrome below uses the backoffice's own bo-* tokens like the rest
   of the app. The slide templates (.cs-slide and its archetypes) are the
   exception: they carry their own --csb-* palette because they render
   Contaxto's *exported brand asset*, not backoffice UI, and must stay
   1080px-wide and visually identical regardless of the app's own theme.
   ────────────────────────────────────────────────────────────────────── */
.cs-modalhead {
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.cs-modalhead__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bo-segment__btn small {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  opacity: 0.7;
}

.cs-modalbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
  max-height: calc(100vh - 160px);
}

.cs-stagecol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Responsive scaled preview: the wrapper's aspect-ratio matches the active
   format and its rendered width decides the scale applied to the fixed
   1080px-wide slide node inside it — see fitCarouselStage() in
   backoffice.js. The slide node itself never shrinks its own layout box, so
   html-to-image still captures it at native 1080x1350/1080x1920. */
.cs-stage {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: #0B0F17;
  border: 1px solid var(--stroke-strong);
  box-shadow: var(--shadow-float);
}

.cs-stage[data-format="tiktok"] {
  max-width: 270px;
  aspect-ratio: 9 / 16;
}

.cs-stage__scale {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.cs-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cs-counter {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  min-width: 92px;
  text-align: center;
}

.cs-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  padding: 2px;
}

.cs-thumbs::-webkit-scrollbar {
  height: 5px;
}

.cs-thumb {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  padding: 8px 6px;
  background: var(--subcard);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  transition: border-color 0.16s ease, color 0.16s ease;
}

.cs-thumb:hover {
  color: var(--ink-2);
  border-color: var(--stroke-strong);
}

.cs-thumb.is-active {
  border-color: var(--teal);
  color: var(--ink);
  background: rgba(16, 185, 129, 0.08);
}

.cs-thumb__num {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.7;
}

.cs-thumb__type {
  font-size: 15px;
  line-height: 1;
}

.cs-thumb__title {
  font-size: 9.5px;
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cs-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.cs-editor .bo-field__label small {
  font-weight: 400;
  color: var(--ink-4);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Concept/archetype switches + dynamic field list --------------------
   Same pill-button look for both: the Concept Pitcher (narrative angle,
   picked once per deck) and the archetype switch (slide type, picked per
   slide) — shared rules keep them from drifting apart visually. */
.cs-concept-switch,
.cs-archetype-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-concept-btn,
.cs-archetype-btn {
  flex: 1 1 auto;
  padding: 9px 10px;
  background: var(--subcard);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.cs-concept-btn:hover,
.cs-archetype-btn:hover {
  color: var(--ink-2);
  border-color: var(--stroke-strong);
}

.cs-concept-btn.is-active,
.cs-archetype-btn.is-active {
  border-color: var(--teal);
  color: var(--ink);
  background: rgba(16, 185, 129, 0.1);
}

.cs-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-source-badge {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--subcard);
}

.cs-source-badge[data-state="ok"] {
  color: var(--teal);
  border-color: rgba(34, 197, 94, 0.28);
}

.cs-source-badge[data-state="warn"] {
  color: var(--amber);
  border-color: rgba(234, 179, 8, 0.28);
}

.bo-field__hint {
  font-size: 10.5px;
  color: var(--ink-4);
  line-height: 1.4;
}

/* ---- Slide templates ---------------------------------------------------
   Native 1080px-wide render target — see .cs-stage above for why this
   never shrinks. Every archetype + theme shares the --csb-* custom
   properties: .cs-slide sets the fintech_aurora defaults, and
   [data-theme="…"] below only overrides what that theme changes.
   "brand_native" — the default theme — is the exception: it has no rule
   here. Its tokens are computed per-project from brain.palette and written
   as inline styles by applyBrandNativeTheme() in backoffice.js, since a
   static stylesheet can't know a tenant's brand colors at author time.
   Inline styles win over these rules regardless, so that override is total. */
.cs-slide {
  --csb-bg: #070A0F;
  --csb-bg-image: radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.16), transparent 60%);
  --csb-bg-soft: rgba(255, 255, 255, 0.03);
  --csb-card-bg: rgba(255, 255, 255, 0.03);
  --csb-accent: #10B981;
  --csb-accent-soft: rgba(16, 185, 129, 0.14);
  --csb-ink: #FFFFFF;
  --csb-ink-soft: rgba(255, 255, 255, 0.68);
  --csb-ink-faint: rgba(255, 255, 255, 0.44);
  --csb-warn: #FBBF24;
  --csb-warn-soft: rgba(251, 191, 36, 0.12);
  --csb-danger: #EF4444;
  --csb-stroke: rgba(255, 255, 255, 0.08);
  --csb-badge-bg: var(--csb-accent-soft);
  --csb-badge-border: var(--csb-accent);
  --csb-badge-fg: var(--csb-accent);
  --csb-highlight-fg: #34D399;
  --csb-highlight-bg: transparent;
  --csb-glow-shadow: 0 0 46px rgba(16, 185, 129, 0.3);
  --csb-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 20px 36px -22px rgba(0, 0, 0, 0.55);
  width: 1080px;
  height: 1350px;
  background-color: var(--csb-bg);
  background-image: var(--csb-bg-image);
  color: var(--csb-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.cs-slide[data-theme="warning_tape"] {
  --csb-bg: #090D14;
  --csb-bg-image: repeating-linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0 46px, transparent 46px 92px);
  --csb-bg-soft: rgba(255, 255, 255, 0.04);
  --csb-card-bg: rgba(255, 255, 255, 0.04);
  --csb-accent: #FBBF24;
  --csb-accent-soft: rgba(251, 191, 36, 0.16);
  --csb-stroke: rgba(251, 191, 36, 0.25);
  --csb-badge-bg: #FBBF24;
  --csb-badge-border: #FBBF24;
  --csb-badge-fg: #090D14;
  --csb-highlight-fg: #090D14;
  --csb-highlight-bg: #FBBF24;
  --csb-glow-shadow: none;
}

.cs-slide[data-theme="minimal_creator"] {
  --csb-bg: #0F172A;
  --csb-bg-image: none;
  --csb-bg-soft: rgba(255, 255, 255, 0.035);
  --csb-card-bg: rgba(255, 255, 255, 0.035);
  --csb-accent: #38BDF8;
  --csb-accent-soft: rgba(56, 189, 248, 0.12);
  --csb-ink: #F1F5F9;
  --csb-ink-soft: rgba(241, 245, 249, 0.66);
  --csb-ink-faint: rgba(241, 245, 249, 0.42);
  --csb-stroke: rgba(241, 245, 249, 0.14);
  --csb-badge-bg: transparent;
  --csb-badge-border: rgba(241, 245, 249, 0.4);
  --csb-badge-fg: var(--csb-ink-soft);
  --csb-highlight-fg: #38BDF8;
  --csb-highlight-bg: transparent;
  --csb-glow-shadow: none;
}

/* Editorial Light — clean infographic look matching the generated cover
   images: paper background, white cards with a soft shadow instead of a
   glow, dark ink for AA contrast on white. */
.cs-slide[data-theme="editorial_light"] {
  --csb-bg: #F8FAFC;
  --csb-bg-image: none;
  --csb-bg-soft: rgba(11, 28, 48, 0.04);
  --csb-card-bg: #FFFFFF;
  --csb-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  --csb-accent: #2DD4BF;
  --csb-accent-soft: rgba(45, 212, 191, 0.14);
  --csb-ink: #0B1C30;
  --csb-ink-soft: #334155;
  --csb-ink-faint: rgba(51, 65, 85, 0.62);
  --csb-warn: #D97706;
  --csb-warn-soft: rgba(217, 119, 6, 0.12);
  --csb-danger: #DC2626;
  --csb-stroke: rgba(11, 28, 48, 0.08);
  --csb-badge-bg: rgba(45, 212, 191, 0.14);
  --csb-badge-border: #2DD4BF;
  --csb-badge-fg: #0B1C30;
  --csb-highlight-fg: #0B1C30;
  --csb-highlight-bg: rgba(45, 212, 191, 0.35);
  --csb-glow-shadow: none;
}

.cs-slide[data-format="tiktok"] {
  height: 1920px;
}

.cs-slide__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 76px 72px;
  box-sizing: border-box;
}

/* TikTok safe zone: keeps the native like/comment rail, caption and status
   bar from ever covering slide content — see spec section 4.3. */
.cs-slide[data-format="tiktok"] .cs-slide__inner {
  padding-top: 140px;
  padding-bottom: 220px;
  padding-right: 120px;
}

/* Stories progress bar — top of every archetype, active index lit in the
   theme's accent color, emulating native Stories/TikTok chrome. */
.cs-stories {
  display: flex;
  gap: 8px;
  margin-bottom: 44px;
}

.cs-stories__bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--csb-ink-faint);
  opacity: 0.32;
}

.cs-stories__bar.is-seen {
  opacity: 0.65;
  background: var(--csb-ink-soft);
}

.cs-stories__bar.is-active {
  opacity: 1;
  background: var(--csb-accent);
}

/* Smart **highlight** parser output — see slideHighlight() in backoffice.js. */
.slide-highlight {
  color: var(--csb-highlight-fg);
  font-weight: 800;
}

.cs-slide[data-theme="warning_tape"] .slide-highlight {
  display: inline-block;
  background: var(--csb-highlight-bg);
  color: var(--csb-highlight-fg);
  padding: 2px 12px;
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(-1deg);
}

.cs-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--csb-badge-bg);
  border: 1px solid var(--csb-badge-border);
  color: var(--csb-badge-fg);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.cs-badge--sm {
  font-size: 22px;
  padding: 10px 22px;
}

.cs-handle,
.cs-domain {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  color: var(--csb-ink-soft);
}

/* 1. statistical_hero — hook slide with a giant stat display */
.cs-slide--statistical_hero .cs-slide__inner {
  justify-content: space-between;
}

.cs-hero__top {
  display: flex;
}

.cs-hero__body {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.cs-hero__title {
  margin: 0;
  font-size: 58px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.cs-hero__statwrap {
  display: inline-flex;
  align-self: flex-start;
  align-items: baseline;
  gap: 16px;
  padding: 26px 40px;
  border-radius: 28px;
  background: var(--csb-card-bg);
  border: 2px solid var(--csb-stroke);
  box-shadow: var(--csb-card-shadow);
}

.cs-hero__stat {
  font-size: 72px;
  font-weight: 800;
  color: var(--csb-accent);
  letter-spacing: -0.02em;
  line-height: 1;
}

.cs-hero__statunit {
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--csb-ink-soft);
}

.cs-hero__subtitle {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--csb-ink-soft);
  max-width: 92%;
}

.cs-hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cs-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  color: var(--csb-ink-soft);
}

.cs-brand__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csb-accent);
  color: #04140F;
  font-weight: 800;
  font-size: 20px;
}

.cs-verified {
  color: var(--csb-accent);
  font-size: 20px;
}

.cs-swipe {
  font-size: 30px;
  font-weight: 700;
  color: var(--csb-accent);
}

/* 2. comparison — error card vs. law/solution card */
.cs-cmp__title {
  margin: 32px 0 18px;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.cs-cmp__subtitle {
  margin: 0 0 40px;
  font-size: 30px;
  font-weight: 500;
  color: var(--csb-ink-soft);
}

.cs-cmp__cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  flex: 1;
}

.cs-cmp__card {
  padding: 36px 38px;
  border-radius: 24px;
  border: 2px solid var(--csb-stroke);
  background: var(--csb-card-bg);
  box-shadow: var(--csb-card-shadow);
}

.cs-cmp__card--bad {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.08);
}

.cs-cmp__card--good {
  border-color: var(--csb-accent);
  background: var(--csb-accent-soft);
}

.cs-cmp__label {
  display: block;
  margin-bottom: 16px;
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cs-cmp__card--bad .cs-cmp__label {
  color: #F87171;
}

.cs-cmp__card--good .cs-cmp__label {
  color: var(--csb-accent);
}

.cs-cmp__card p {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.35;
}

.cs-cmp__foot {
  margin-top: auto;
}

/* 3. process — 3 connected steps with circular neon numbers */
.cs-proc__title {
  margin: 32px 0 12px;
  font-size: 58px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.cs-proc__subtitle {
  margin: 0 0 30px;
  font-size: 28px;
  font-weight: 500;
  color: var(--csb-ink-soft);
}

.cs-proc__steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  flex: 1;
}

.cs-proc__step {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 30px 34px;
  border-radius: 22px;
  background: var(--csb-card-bg);
  border: 1px solid var(--csb-stroke);
  box-shadow: var(--csb-card-shadow);
  position: relative;
}

.cs-proc__num {
  flex: none;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  font-weight: 800;
  background: var(--csb-accent-soft);
  border: 2px solid var(--csb-accent);
  color: var(--csb-accent);
  position: relative;
  z-index: 1;
}

.cs-proc__step p {
  margin: 16px 0 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
}

.cs-proc__foot {
  margin-top: auto;
}

/* 4. checklist — do's & don'ts card list */
.cs-check__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}

.cs-step {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  font-weight: 600;
  color: var(--csb-ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cs-check__title {
  margin: 0 0 20px;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.cs-check__subtitle {
  margin: 0 0 36px;
  font-size: 30px;
  font-weight: 500;
  color: var(--csb-ink-soft);
}

.cs-check__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  flex: 1;
}

.cs-check__item {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 26px 30px;
  background: var(--csb-card-bg);
  border: 1px solid var(--csb-stroke);
  border-radius: 20px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: var(--csb-card-shadow);
}

.cs-check__mark {
  flex: none;
  font-size: 34px;
  font-weight: 800;
  color: var(--csb-accent);
}

.cs-check__item--bad .cs-check__mark {
  color: var(--csb-danger);
}

.cs-check__item--warn .cs-check__mark {
  color: var(--csb-warn);
}

.cs-check__foot {
  margin-top: 36px;
}

/* 5. cta — SocialProfileCardBlock: a tangible product/value card, not a
   floating web <button> — a static IG/TikTok image can't be tapped, so the
   close is native social copy (save / bio link) instead — see
   brand-content-director/SKILL.md §4. */
.cs-cta__title {
  margin: 32px 0 18px;
  font-size: 68px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.cs-cta__subtitle {
  margin: 0 0 36px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--csb-ink-soft);
}

/* Wraps subtitle/card so short copy centers in the available height
   instead of clumping under the title with a void above the footer — same
   fix as .cs-cmp__cards / .cs-proc__steps / .cs-check__list. */
.cs-cta__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs-social-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px 40px;
  border-radius: 20px;
  border: 1px solid var(--csb-stroke);
  background: var(--csb-card-bg);
  box-shadow: var(--csb-card-shadow);
}

.cs-social-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cs-social-card__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csb-accent);
  color: #04140F;
  font-weight: 800;
  font-size: 24px;
}

.cs-social-card__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-social-card__brand {
  font-size: 28px;
  font-weight: 700;
  color: var(--csb-ink);
}

.cs-social-card__handle {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  color: var(--csb-ink-soft);
}

.cs-social-card__tag {
  flex: none;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--csb-stroke);
  background: var(--csb-bg-soft);
  font-size: 20px;
  font-weight: 600;
  color: var(--csb-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cs-cta__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cs-cta__list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-size: 30px;
  font-weight: 600;
}

.cs-cta__list li::before {
  content: '✓';
  color: var(--csb-accent);
  font-weight: 800;
}

/* Social-native action row — never a web <button>, just native IG/TikTok
   micro-action copy (save / bio link) inside its own crisp-bordered row. */
.cs-social-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cs-social-actions__pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-radius: 16px;
  border: 1px solid var(--csb-stroke);
  background: var(--csb-bg-soft);
  font-size: 26px;
  font-weight: 600;
  color: var(--csb-ink-soft);
}

.cs-cta__foot {
  margin-top: 36px;
}

@media (max-width: 1180px) {
  .cs-modalbody {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }

  .cs-editor {
    overflow-y: visible;
  }
}

@media (max-width: 640px) {
  .bo-modal__panel--wide {
    max-width: 100%;
  }

  .cs-stage {
    max-width: 260px;
  }

  .cs-stage[data-format="tiktok"] {
    max-width: 210px;
  }
}