/* BrIQ Studio: Creative Lab, Brand Coach, Brand Brain, Library */

.studio {
  --s-bg: #050806;
  --s-panel: rgba(17, 22, 19, 0.78);
  --s-panel-solid: #111613;
  --s-panel-2: #171d19;
  --s-line: rgba(232, 240, 226, 0.09);
  --s-line-2: rgba(232, 240, 226, 0.16);
  --s-text: #f1f5ee;
  --s-muted: #9ba597;
  --s-soft: #6d766a;
  --s-accent: #36f27e;
  --s-accent-ink: #03140a;
  --s-good: #36f27e;
  --s-mid: #ffc94d;
  --s-low: #ff6b6b;
  --s-radius: 14px;
  --s-radius-sm: 10px;
  color: var(--s-text);
  font-family: var(--briq-font-body, "DM Sans", system-ui, -apple-system, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.studio h1, .studio h2, .studio h3, .studio p { margin: 0; }
.studio button { font: inherit; color: inherit; }
.studio [hidden] { display: none !important; }
.s-icon { flex: none; }

/* ─── Shell ─────────────────────────────────────────────── */

.st-shell {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(54, 242, 126, 0.07), transparent 60%),
    var(--s-bg);
}

.st-rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px 16px;
  border-right: 1px solid var(--s-line);
  background: rgba(8, 11, 9, 0.9);
}

.st-rail-logo { padding: 0 8px; }

.s-logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.s-logo-img { display: block; height: 32px; width: auto; }
.studio h1, .studio h2, .studio .st-page-title { font-family: var(--briq-font-display, "Syne", system-ui, sans-serif); letter-spacing: -0.03em; }

.st-brand-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: var(--s-panel-2);
  text-align: left;
  transition: border-color 0.15s;
}
.st-brand-chip:hover { border-color: var(--s-line-2); }
.st-brand-initial {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(54, 242, 126, 0.25), rgba(114, 167, 255, 0.2));
  font-weight: 800;
}
.st-brand-meta { display: grid; gap: 3px; min-width: 0; flex: 1; }
.st-brand-meta strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-brand-meta small { color: var(--s-muted); font-size: 12px; }

.st-progress { display: block; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.st-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--s-accent); transition: width 0.4s ease; }
.st-progress-lg { height: 7px; }

.st-nav { display: grid; gap: 4px; }
.st-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 11px;
  color: var(--s-muted);
  transition: background 0.15s, color 0.15s;
}
.st-nav-item span { display: grid; gap: 1px; }
.st-nav-item strong { font-size: 14px; font-weight: 650; }
.st-nav-item small { font-size: 11.5px; color: var(--s-soft); }
.st-nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--s-text); }
.st-nav-item.active { background: rgba(54, 242, 126, 0.1); color: var(--s-text); }
.st-nav-item.active .s-icon { color: var(--s-accent); }
.st-nav-item.is-live small { color: var(--s-accent); }

.st-rail-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px 0;
  border-top: 1px solid var(--s-line);
}
.st-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-user > span:last-child { display: grid; min-width: 0; }
.st-user strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-user small { font-size: 11.5px; color: var(--s-soft); }
.st-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--s-panel-2);
  border: 1px solid var(--s-line-2);
  font-size: 12px;
  font-weight: 700;
}

.st-main { overflow-y: auto; min-width: 0; }
.st-view { max-width: 1240px; margin: 0 auto; padding: 36px 40px 64px; }

.st-center {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  background: var(--s-bg, #050806);
}
.st-center-inline { min-height: 50vh; background: none; }
.st-loader {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(54, 242, 126, 0.15);
  border-top-color: #36f27e;
  animation: s-spin 0.8s linear infinite;
}
@keyframes s-spin { to { transform: rotate(360deg); } }

.st-muted { color: var(--s-muted); }
.st-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--s-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.st-page-head { margin-bottom: 28px; max-width: 760px; }
.st-page-head h1 { margin: 10px 0 10px; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
.st-page-head p { color: var(--s-muted); font-size: 16px; line-height: 1.55; }
.st-page-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; max-width: none; }
.st-page-head-row > div { max-width: 720px; }

.st-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 72px 24px;
  border: 1px dashed var(--s-line-2);
  border-radius: var(--s-radius);
  text-align: center;
  color: var(--s-muted);
}
.st-empty h2 { color: var(--s-text); font-size: 22px; }

/* ─── Components ────────────────────────────────────────── */

.s-card {
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: var(--s-panel);
  padding: 22px;
  backdrop-filter: blur(12px);
}
.s-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--s-line-2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.s-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.s-btn:active:not(:disabled) { transform: translateY(1px); }
.s-btn-primary { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-accent-ink) !important; }
.s-btn-primary:hover:not(:disabled) { background: #5cf799; }
.s-btn-block { width: 100%; }
.s-btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.s-btn-lg { min-height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.s-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.s-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--s-muted);
  transition: background 0.15s, color 0.15s;
}
.s-icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--s-text); }

.s-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--s-muted);
  font-size: 13px;
  font-weight: 600;
}
.s-link:hover { color: var(--s-text); }

.s-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--s-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
}
.s-seg button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--s-muted);
  font-size: 14px;
  font-weight: 650;
}
.s-seg button.active { background: var(--s-panel-2); color: var(--s-text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 14px rgba(0, 0, 0, 0.3); }
.s-seg-sm button { padding: 7px 13px; font-size: 13px; }

.s-field { display: grid; gap: 7px; }
.s-field > span { font-size: 13px; font-weight: 650; color: var(--s-muted); }
.s-field em { font-style: normal; font-weight: 500; color: var(--s-soft); }
.s-field-wide { grid-column: 1 / -1; }
.studio input[type="text"],
.studio input[type="email"],
.studio input[type="url"],
.studio select,
.studio textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--s-line-2);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
  color: var(--s-text);
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.studio textarea { resize: vertical; }
.studio input:focus, .studio select:focus, .studio textarea:focus { border-color: rgba(54, 242, 126, 0.55); box-shadow: 0 0 0 3px rgba(54, 242, 126, 0.12); }
.studio input::placeholder, .studio textarea::placeholder { color: var(--s-soft); }

.s-input-icon { position: relative; }
.s-input-icon .s-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--s-soft); }
.s-input-icon input { padding-left: 38px !important; }

.s-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.s-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.s-chip-good { color: var(--s-good); background: rgba(54, 242, 126, 0.12); }
.s-chip-mid { color: var(--s-mid); background: rgba(255, 201, 77, 0.12); }
.s-chip-low { color: var(--s-low); background: rgba(255, 107, 107, 0.12); }

.s-tone-good { color: var(--s-good); }
.s-tone-mid { color: var(--s-mid); }
.s-tone-low { color: var(--s-low); }
.s-bg-good { background: var(--s-good); }
.s-bg-mid { background: var(--s-mid); }
.s-bg-low { background: var(--s-low); }

.s-mini-score {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 26px;
  padding: 0 7px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid currentColor;
  font-size: 13px;
  font-weight: 800;
}

.s-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--s-muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.s-tag-good { background: rgba(54, 242, 126, 0.12); color: var(--s-good); }
.s-tag-mid { background: rgba(255, 201, 77, 0.12); color: var(--s-mid); }
.s-tag-low { background: rgba(255, 107, 107, 0.12); color: var(--s-low); }

.s-sev { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.s-sev-critical { background: rgba(255, 107, 107, 0.15); color: var(--s-low); }
.s-sev-major { background: rgba(255, 201, 77, 0.14); color: var(--s-mid); }
.s-sev-minor { background: rgba(255, 255, 255, 0.07); color: var(--s-muted); }

.s-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: s-spin 0.7s linear infinite;
}

.s-ring { position: relative; flex: none; }
.s-ring svg { width: 100%; height: 100%; }
.s-ring circle { fill: none; }
.s-ring-track { stroke: rgba(255, 255, 255, 0.07); }
.s-ring-value { stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.s-ring-good .s-ring-value { stroke: var(--s-good, #36f27e); filter: drop-shadow(0 0 8px rgba(54, 242, 126, 0.45)); }
.s-ring-mid .s-ring-value { stroke: var(--s-mid, #ffc94d); filter: drop-shadow(0 0 8px rgba(255, 201, 77, 0.4)); }
.s-ring-low .s-ring-value { stroke: var(--s-low, #ff6b6b); filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.4)); }
.s-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.s-ring-label strong { font-size: 2.3em; font-weight: 850; letter-spacing: -0.04em; line-height: 1; }
.s-ring-label span { margin-top: 4px; font-size: 10.5px; color: var(--s-muted, #9ba597); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

.studio-toast-error { border-color: rgba(255, 107, 107, 0.45) !important; }

/* ─── Sign in ───────────────────────────────────────────── */

.st-auth {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 100vh;
  background:
    radial-gradient(700px 500px at 10% 10%, rgba(54, 242, 126, 0.1), transparent 60%),
    var(--s-bg);
}
.st-auth-pitch { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 64px clamp(32px, 6vw, 96px); }
.st-auth-logo { position: absolute; top: 32px; left: clamp(32px, 6vw, 96px); }
.st-auth-logo .s-logo-img { height: 36px; }
.st-auth-pitch h1 { font-size: clamp(36px, 4.5vw, 58px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 850; }
.st-auth-pitch h1 span { color: var(--s-accent); }
.st-auth-pitch > p { max-width: 520px; color: var(--s-muted); font-size: 18px; line-height: 1.55; }
.st-auth-demo {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 480px;
  padding: 20px;
  border: 1px solid var(--s-line);
  border-radius: 18px;
  background: var(--s-panel);
}
.st-auth-demo ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--s-muted); font-size: 14px; }
.st-auth-demo li { display: flex; align-items: center; gap: 8px; }
.st-auth-demo li .s-icon { color: var(--s-accent); }
.st-auth-card {
  align-self: center;
  justify-self: center;
  display: grid;
  gap: 16px;
  width: min(420px, calc(100% - 48px));
  padding: 32px;
  border: 1px solid var(--s-line-2);
  border-radius: 20px;
  background: var(--s-panel-solid);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.st-auth-card h2 { font-size: 24px; letter-spacing: -0.02em; }
.st-or { display: flex; align-items: center; gap: 12px; color: var(--s-soft); font-size: 12px; }
.st-or::before, .st-or::after { content: ''; flex: 1; height: 1px; background: var(--s-line-2); }
.st-dev-form { display: grid; gap: 10px; }
.st-dev-form label { font-size: 13px; font-weight: 700; color: var(--s-muted); }
.st-dev-form small { color: var(--s-soft); font-size: 12px; line-height: 1.5; }

/* ─── Creative Lab ──────────────────────────────────────── */

.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.lab-main { display: grid; gap: 20px; padding: 24px; }
.lab-main > .s-seg { justify-self: start; }

.lab-drop {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 56px 24px;
  border: 1.5px dashed rgba(54, 242, 126, 0.3);
  border-radius: var(--s-radius);
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(54, 242, 126, 0.07), transparent 70%),
    rgba(0, 0, 0, 0.22);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.lab-drop:hover, .lab-drop.is-over { border-color: var(--s-accent); background-color: rgba(54, 242, 126, 0.05); }
.lab-drop.is-busy { cursor: progress; }
.lab-drop strong { font-size: 16px; }
.lab-drop small { color: var(--s-muted); }
.lab-drop-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(54, 242, 126, 0.1);
  color: var(--s-accent);
  margin-bottom: 4px;
}

.lab-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 18px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.025) 0 25%, transparent 0 50%) 0 0 / 22px 22px, rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.lab-preview > img { max-height: 460px; border-radius: 8px; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5); }
.lab-preview-video { place-items: stretch; }
.lab-preview-mini { min-height: 220px; }
.lab-swap {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--s-line-2);
  border-radius: 9px;
  background: rgba(5, 8, 6, 0.8);
  font-size: 13px;
  font-weight: 650;
  backdrop-filter: blur(6px);
}
.lab-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.lab-strip figure { margin: 0; display: grid; gap: 6px; }
.lab-strip img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 8px; background: #000; }
.lab-strip figcaption { color: var(--s-muted); font-size: 12px; font-weight: 600; text-align: center; }
.lab-video-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px !important; color: var(--s-muted); font-size: 13px; }

.lab-or { display: flex; align-items: center; gap: 12px; color: var(--s-soft); font-size: 12.5px; }
.lab-or::before, .lab-or::after { content: ''; flex: 1; height: 1px; background: var(--s-line); }

.lab-scan {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(3, 6, 4, 0.66);
  backdrop-filter: blur(2px);
}
.lab-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(54, 242, 126, 0.22), transparent);
  border-bottom: 2px solid rgba(54, 242, 126, 0.8);
  box-shadow: 0 6px 24px rgba(54, 242, 126, 0.5);
  animation: lab-scan 2.4s ease-in-out infinite alternate;
}
@keyframes lab-scan { from { top: -90px; } to { top: calc(100% - 10px); } }
.lab-scan ol {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 22px;
  list-style: none;
  border: 1px solid var(--s-line-2);
  border-radius: 14px;
  background: rgba(10, 14, 11, 0.92);
  min-width: 300px;
}
.lab-scan li { display: flex; align-items: center; gap: 10px; color: var(--s-soft); font-size: 14px; font-weight: 600; transition: color 0.3s; }
.lab-scan li > span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; }
.lab-scan li.active { color: var(--s-text); }
.lab-scan li.active > span { border-color: var(--s-accent); border-right-color: transparent; animation: s-spin 0.8s linear infinite; }
.lab-scan li.done { color: var(--s-accent); }

.lab-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lab-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 4px; border-top: 1px solid var(--s-line); padding-top: 18px; }

.lab-side { display: grid; gap: 16px; }
.lab-brain { display: grid; gap: 12px; }
.lab-brain.is-low { border-color: rgba(255, 201, 77, 0.3); }
.lab-brain.is-low .st-progress span { background: var(--s-mid); }
.lab-brain-top { display: flex; justify-content: space-between; align-items: baseline; }
.lab-brain-top strong { font-size: 24px; font-weight: 800; }
.lab-brain p { color: var(--s-muted); font-size: 13.5px; line-height: 1.5; }
.lab-brain .s-btn { justify-self: start; }

.lab-recent { display: grid; gap: 6px; }
.lab-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
}
.lab-recent-item:hover { background: rgba(255, 255, 255, 0.04); }
.lab-recent-item img, .lab-recent-ph { width: 42px; height: 42px; flex: none; border-radius: 8px; object-fit: cover; background: #000; }
.lab-recent-ph { display: grid; place-items: center; color: var(--s-soft); }
.lab-recent-item > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.lab-recent-item strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-recent-item small { color: var(--s-soft); font-size: 12px; }

.lab-promise ul { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--s-muted); font-size: 14px; }
.lab-promise li { display: flex; gap: 10px; align-items: center; }
.lab-promise .s-icon { color: var(--s-accent); }

/* ─── Report ────────────────────────────────────────────── */

.rp-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.rp-topbar-actions { display: flex; align-items: center; gap: 8px; }
.rp-export { display: grid; gap: 22px; }
.rp-head h1 { margin-top: 8px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; font-weight: 800; }

.rp-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 22px; align-items: start; }
.rp-visual { display: grid; gap: 14px; padding: 16px; }
.rp-canvas-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  border-radius: 10px;
  background: #000;
  overflow: hidden;
}
.rp-canvas-wrap canvas { display: block; max-width: 100%; max-height: 620px; width: auto; height: auto; }
.rp-canvas-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--s-muted); }
.rp-visual > .s-seg { justify-self: center; }
.rp-legend { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--s-muted); font-size: 13px; text-align: center; }

.rp-verdict { display: grid; gap: 18px; }
.rp-verdict-top { display: flex; align-items: center; gap: 22px; }
.rp-verdict-top > div:last-child { display: grid; gap: 10px; justify-items: start; }
.rp-verdict-top h2 { font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 750; }
.rp-summary { color: #cfd6cb; font-size: 15px; line-height: 1.6; }

.rp-shares { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--s-line); }
.rp-shares h3, .rp-card-title { font-size: 13px; font-weight: 750; color: var(--s-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.rp-card-title { margin-bottom: 14px; }
.rp-share { display: grid; grid-template-columns: 10px 150px 1fr 42px; align-items: center; gap: 10px; font-size: 13.5px; }
.rp-share-dot { width: 10px; height: 10px; border-radius: 3px; }
.rp-share-label { color: #d6ddd2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-share-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.rp-share-bar span { display: block; height: 100%; border-radius: inherit; }
.rp-share strong { text-align: right; font-size: 13.5px; }
.rp-warn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 107, 107, 0.1); color: #ffb3b3; font-size: 13.5px; }
.rp-glance { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: rgba(54, 242, 126, 0.06); border: 1px solid rgba(54, 242, 126, 0.16); }
.rp-glance span { display: inline-flex; align-items: center; gap: 7px; color: var(--s-accent); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; }
.rp-glance p { color: #d6ddd2; font-size: 14px; line-height: 1.55; }

.rp-section { display: grid; gap: 14px; }
.rp-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.rp-section-head h2, .rp-list h2 { font-size: 19px; letter-spacing: -0.02em; font-weight: 750; }
.rp-section-head .st-muted { font-size: 13px; }

.rp-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.rp-metric { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-panel); }
.rp-metric-top { display: flex; justify-content: space-between; align-items: baseline; }
.rp-metric-top span { font-size: 14px; font-weight: 650; color: #d6ddd2; }
.rp-metric-top strong { font-size: 28px; font-weight: 850; letter-spacing: -0.03em; }
.rp-metric p { color: var(--s-muted); font-size: 13px; line-height: 1.5; }
.rp-bar { position: relative; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); }
.rp-bar-thin { height: 6px; }
.rp-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.rp-bar-bench { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: #fff; opacity: 0.75; }
.rp-metric-delta { font-size: 12px; font-weight: 700; }
.rp-metric-delta.up { color: var(--s-good); }
.rp-metric-delta.down { color: var(--s-low); }

.rp-signals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rp-signal { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: linear-gradient(180deg, rgba(114, 167, 255, 0.05), transparent), var(--s-panel); }
.rp-signal-top { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 650; color: #d6ddd2; }
.rp-signal strong { font-size: 30px; font-weight: 850; letter-spacing: -0.03em; }
.rp-signal p { color: var(--s-muted); font-size: 12.5px; line-height: 1.5; }

.rp-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.rp-list { display: grid; gap: 14px; }
.rp-list h2 { display: flex; align-items: center; gap: 9px; }
.rp-list-good h2 .s-icon { color: var(--s-good); }
.rp-list-bad h2 .s-icon { color: var(--s-mid); }
.rp-item { display: grid; gap: 5px; padding-top: 14px; border-top: 1px solid var(--s-line); }
.rp-item:first-of-type { padding-top: 0; border-top: 0; }
.rp-item-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rp-item strong { font-size: 14.5px; }
.rp-item p { color: var(--s-muted); font-size: 13.5px; line-height: 1.55; }

.rp-fixes { display: grid; gap: 10px; }
.rp-fix {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: var(--s-panel);
}
.rp-fix:first-child { border-color: rgba(54, 242, 126, 0.3); background: linear-gradient(90deg, rgba(54, 242, 126, 0.07), transparent 60%), var(--s-panel); }
.rp-fix-num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(54, 242, 126, 0.12); color: var(--s-accent); font-weight: 850; }
.rp-fix strong { font-size: 15px; }
.rp-fix p { margin-top: 5px; color: #c6cec2; font-size: 14px; line-height: 1.55; }
.rp-fix-meta { display: grid; justify-items: end; gap: 6px; }
.rp-fix-impact { padding: 4px 10px; border-radius: 8px; background: rgba(54, 242, 126, 0.12); color: var(--s-accent); font-size: 13px; font-weight: 800; white-space: nowrap; }
.rp-fix-meta small { color: var(--s-soft); font-size: 12px; white-space: nowrap; }

.rp-rewrites { display: grid; gap: 10px; }
.rp-rewrite { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 11px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--s-line); }
.rp-rewrite-body { display: grid; gap: 5px; }
.rp-rewrite-tags { display: flex; gap: 6px; }
.rp-rewrite-tags .s-tag { color: var(--s-accent); background: rgba(54, 242, 126, 0.1); }
.rp-rewrite-tags .s-tag-lang { color: #b9c7ff; background: rgba(114, 167, 255, 0.12); }
.rp-rewrite p { font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.rp-rewrite small { color: var(--s-soft); font-size: 12px; }
.rp-direction-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.s-link-inline { display: inline; padding: 0; font-size: inherit; color: var(--s-accent); text-decoration: underline; }
.studio kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--s-line-2); background: rgba(255, 255, 255, 0.06); font: 600 11px Inter, system-ui, sans-serif; color: var(--s-text); }

.rp-platforms { display: grid; gap: 16px; }
.rp-platform { display: grid; gap: 7px; }
.rp-platform-top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 650; }
.rp-platform p { color: var(--s-muted); font-size: 13px; line-height: 1.5; }

.rp-direction { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; background: linear-gradient(120deg, rgba(54, 242, 126, 0.07), transparent 55%), var(--s-panel); }
.rp-direction-copy { display: grid; gap: 12px; justify-items: start; }
.rp-direction-copy p { font-size: 15px; line-height: 1.6; color: #d6ddd2; }
.rp-direction-image { display: grid; place-items: center; min-height: 220px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); overflow: hidden; color: var(--s-muted); }
.rp-direction-image img { width: 100%; display: block; }
.s-btn-stop { border-color: rgba(255, 107, 107, 0.4); color: #ffb3b3; }
.s-btn-stop:hover:not(:disabled) { background: rgba(255, 107, 107, 0.12); }
.rp-creative-chat { grid-column: 1 / -1; display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--s-line); width: 100%; }
.rp-chat-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.rp-chat-log { display: grid; gap: 10px; max-height: 280px; overflow-y: auto; padding: 2px; }
.rp-chat-empty { color: var(--s-muted); font-size: 13.5px; }
.rp-chat-tips { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chat-tip { padding: 7px 12px; border: 1px solid var(--s-line); border-radius: 99px; background: rgba(255, 255, 255, 0.03); color: var(--s-muted); font-size: 12.5px; font-weight: 600; }
.rp-chat-tip:hover { border-color: rgba(54, 242, 126, 0.4); color: var(--s-text); background: rgba(54, 242, 126, 0.05); }
.rp-chat-msg { display: flex; gap: 10px; max-width: 100%; }
.rp-chat-user { justify-content: flex-end; }
.rp-chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--s-panel-2); border: 1px solid var(--s-line-2); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.rp-chat-bot { align-items: flex-start; }
.rp-chat-bot p { margin: 0; font-size: 14px; line-height: 1.55; color: #dfe6db; }
.rp-chat-avatar { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--s-accent); color: var(--s-accent-ink); font-size: 9px; font-weight: 900; margin-top: 1px; }
.rp-chat-avatar em { font-style: normal; font-size: 7px; }
.rp-chat-compose { display: flex; gap: 8px; align-items: flex-end; }
.studio .rp-chat-compose textarea { min-height: 44px; max-height: 120px; resize: none; }
.rp-foot { color: var(--s-soft); font-size: 12px; text-align: center; padding-top: 8px; }

.rp-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.rp-frame { margin: 0; display: grid; gap: 7px; }
.rp-frame-img { position: relative; border-radius: 9px; overflow: hidden; background: #000; border: 2px solid transparent; }
.rp-frame img { display: block; width: 100%; aspect-ratio: 9 / 14; object-fit: cover; }
.rp-flag-strong .rp-frame-img { border-color: rgba(54, 242, 126, 0.7); }
.rp-flag-drop .rp-frame-img { border-color: rgba(255, 107, 107, 0.7); }
.rp-flag-weak .rp-frame-img { border-color: rgba(255, 201, 77, 0.55); }
.rp-frame-att { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 6px; color: #04110a; font-size: 12px; font-weight: 850; }
.rp-frame figcaption { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12px; }
.rp-flag { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); color: var(--s-muted); font-size: 10.5px; font-weight: 750; text-transform: uppercase; }
.rp-flag-drop .rp-flag { color: var(--s-low); }
.rp-flag-strong .rp-flag { color: var(--s-good); }
.rp-curve-wrap { display: grid; gap: 6px; padding: 12px 12px 4px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); }
.rp-curve-label { color: var(--s-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.rp-curve { width: 100%; height: 150px; }
.rp-curve-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.rp-curve-line { fill: none; stroke: #36f27e; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.rp-hook { display: grid; gap: 8px; padding: 16px; border-radius: 12px; background: rgba(54, 242, 126, 0.06); border: 1px solid rgba(54, 242, 126, 0.16); }
.rp-hook-head { display: flex; justify-content: space-between; align-items: center; }
.rp-hook-head span { display: inline-flex; align-items: center; gap: 7px; color: var(--s-accent); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; }
.rp-hook-head strong { font-size: 26px; font-weight: 850; }
.rp-hook p { color: #d6ddd2; font-size: 14px; line-height: 1.55; }
.rp-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-facts span { padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--s-muted); font-size: 12.5px; font-weight: 600; }

.rp-moments { display: grid; gap: 8px; }
.rp-moment { display: grid; grid-template-columns: 64px minmax(0, 1fr) 56px; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--s-line); border-left: 3px solid var(--s-line-2); border-radius: 12px; background: var(--s-panel); }
.rp-moment.rp-flag-strong { border-left-color: var(--s-good); }
.rp-moment.rp-flag-drop { border-left-color: var(--s-low); }
.rp-moment.rp-flag-weak { border-left-color: var(--s-mid); }
.rp-moment-time { font-weight: 800; font-size: 14px; }
.rp-moment strong { font-size: 14px; }
.rp-moment p { margin-top: 3px; color: var(--s-muted); font-size: 13px; line-height: 1.5; }
.rp-moment-att { text-align: right; font-size: 18px; font-weight: 850; }
.rp-moment-att small { display: block; font-size: 10.5px; font-weight: 600; color: var(--s-soft); text-transform: uppercase; letter-spacing: 0.06em; }

/* ─── Brand Coach ───────────────────────────────────────── */

.st-view:has(.co) { max-width: none; padding: 0; height: 100%; }
.co { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: 100vh; }
.co-threads { display: flex; flex-direction: column; gap: 14px; padding: 22px 14px; border-right: 1px solid var(--s-line); background: rgba(8, 11, 9, 0.5); overflow: hidden; }
.co-thread-list { display: grid; gap: 2px; align-content: start; overflow-y: auto; }
.co-thread { display: flex; align-items: center; border-radius: 10px; }
.co-thread > button:first-child { flex: 1; display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border: 0; background: none; text-align: left; }
.co-thread strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-thread small { color: var(--s-soft); font-size: 11.5px; }
.co-thread .s-icon-btn { opacity: 0; width: 30px; height: 30px; }
.co-thread:hover { background: rgba(255, 255, 255, 0.04); }
.co-thread:hover .s-icon-btn { opacity: 1; }
.co-thread.active { background: rgba(54, 242, 126, 0.09); }
.co-thread-empty { padding: 8px 12px; font-size: 13px; }

.co-main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.co-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding: 26px 36px 18px; border-bottom: 1px solid var(--s-line); }
.co-head h1 { margin-top: 6px; font-size: 26px; letter-spacing: -0.03em; font-weight: 800; }
.co-context { display: flex; flex-wrap: wrap; gap: 8px; }
.co-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--s-line); border-radius: 99px; background: rgba(255, 255, 255, 0.03); color: var(--s-muted); font-size: 12.5px; font-weight: 600; }
.co-chip .s-icon { color: var(--s-accent); }
.co-chip-focus { border-color: rgba(54, 242, 126, 0.35); color: var(--s-text); }
.co-chip-focus .s-mini-score { height: 20px; min-width: 28px; font-size: 11.5px; }
.co-chip button { border: 0; background: none; color: var(--s-muted); font-size: 16px; line-height: 1; padding: 0 2px; }

.co-messages { flex: 1; overflow-y: auto; padding: 28px 36px; display: flex; flex-direction: column; gap: 24px; }
.co-msg { display: flex; gap: 14px; max-width: 860px; width: 100%; margin: 0 auto; }
.co-user { justify-content: flex-end; }
.co-bubble { max-width: 78%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--s-panel-2); border: 1px solid var(--s-line-2); font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.co-avatar, .co-empty-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: var(--s-accent);
  color: var(--s-accent-ink);
  font-size: 11px;
  font-weight: 900;
}
.co-avatar em, .co-empty-mark em { font-style: normal; font-size: 8px; }
.co-answer { flex: 1; min-width: 0; display: grid; gap: 10px; }
.co-msg-actions { display: flex; gap: 16px; }
.co-msg-actions .s-link { font-size: 12.5px; }
.co-error { display: flex; align-items: center; gap: 8px; color: #ffb3b3; }

.co-rich { font-size: 15px; line-height: 1.65; color: #dfe6db; display: grid; gap: 12px; }
.co-rich > * { margin: 0; }
.co-rich p, .co-rich ul, .co-rich ol { margin: 0; }
.co-rich ul, .co-rich ol { padding-left: 20px; display: grid; gap: 5px; }
.co-rich h1, .co-rich h2, .co-rich h3 { font-size: 16px; font-weight: 750; color: var(--s-text); margin-top: 6px; }
.co-rich strong { color: var(--s-text); }
.co-rich a { color: var(--s-accent); text-decoration: underline; }
.co-rich code { padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); font-size: 0.9em; }
.co-rich blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--s-line-2); color: var(--s-muted); }
.co-rich table { border-collapse: collapse; font-size: 14px; }
.co-rich th, .co-rich td { padding: 7px 10px; border: 1px solid var(--s-line-2); text-align: left; }

.co-empty { margin: auto; max-width: 680px; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 20px 0; }
.co-empty-mark { width: 52px; height: 52px; border-radius: 16px; font-size: 16px; box-shadow: 0 0 40px rgba(54, 242, 126, 0.3); }
.co-empty-mark em { font-size: 11px; }
.co-empty h2 { font-size: 26px; letter-spacing: -0.03em; font-weight: 800; }
.co-empty p { color: var(--s-muted); font-size: 15px; line-height: 1.55; max-width: 520px; }
.co-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 10px; }
.co-suggestion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--s-line);
  border-radius: 12px;
  background: var(--s-panel);
  color: #d6ddd2;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.co-suggestion .s-icon { color: var(--s-soft); }
.co-suggestion:hover { border-color: rgba(54, 242, 126, 0.4); background: rgba(54, 242, 126, 0.05); }
.co-suggestion:hover .s-icon { color: var(--s-accent); }

.co-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: min(860px, calc(100% - 72px));
  margin: 0 auto;
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--s-line-2);
  border-radius: 16px;
  background: var(--s-panel-solid);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.co-composer:focus-within { border-color: rgba(54, 242, 126, 0.45); }
.studio .co-composer textarea { flex: 1; min-height: 24px; max-height: 180px; padding: 8px 0; border: 0; background: none; box-shadow: none; resize: none; font-size: 15px; }
.co-send { width: 42px; min-height: 42px; padding: 0; border-radius: 11px; }
.co-disclaimer { padding: 8px 0 14px; color: var(--s-soft); font-size: 11.5px; text-align: center; }

/* Rich cards inside coach answers */
.rc { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--s-line-2); border-radius: 14px; background: var(--s-panel-2); }
.rc-title, .rc-kicker { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--s-muted); }
.rc-kicker { display: inline-flex; align-items: center; gap: 7px; }
.rc-verdict strong { font-size: 17px; color: var(--s-text); line-height: 1.35; }
.rc-verdict p { color: #cfd6cb; font-size: 14px; }
.rc-good { border-color: rgba(54, 242, 126, 0.35); background: linear-gradient(120deg, rgba(54, 242, 126, 0.1), transparent 70%), var(--s-panel-2); }
.rc-good .rc-kicker { color: var(--s-good); }
.rc-mid { border-color: rgba(255, 201, 77, 0.35); background: linear-gradient(120deg, rgba(255, 201, 77, 0.09), transparent 70%), var(--s-panel-2); }
.rc-mid .rc-kicker { color: var(--s-mid); }
.rc-low { border-color: rgba(255, 107, 107, 0.35); background: linear-gradient(120deg, rgba(255, 107, 107, 0.09), transparent 70%), var(--s-panel-2); }
.rc-low .rc-kicker { color: var(--s-low); }
.rc-checklist ul { list-style: none; padding: 0 !important; display: grid; gap: 8px; margin: 0; }
.rc-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.rc-check { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; flex: none; padding: 0; border: 1.5px solid var(--s-line-2); border-radius: 6px; background: none; color: transparent; }
.rc-checklist li.done .rc-check { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-accent-ink); }
.rc-checklist li.done span { color: var(--s-soft); text-decoration: line-through; }
.rc-copy-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--s-line); }
.rc-copy-row:first-of-type { border-top: 0; padding-top: 2px; }
.rc-copy-label { color: var(--s-accent); font-size: 12px; font-weight: 750; }
.rc-copy-row p { font-size: 15px; font-weight: 600; color: var(--s-text); line-height: 1.4; }
.rc-action { display: inline-flex; grid-auto-flow: column; justify-self: start; align-items: center; gap: 10px; padding: 11px 16px; border-color: rgba(54, 242, 126, 0.4); color: var(--s-accent); font-size: 14px; font-weight: 700; cursor: pointer; }
.rc-action:hover { background: rgba(54, 242, 126, 0.08); }
.rc-pending { display: inline-flex; gap: 5px; padding: 10px 0; border: 0; background: none; }
.rc-pending span { width: 7px; height: 7px; border-radius: 50%; background: var(--s-accent); animation: rc-bounce 1s infinite ease-in-out; }
.rc-pending span:nth-child(2) { animation-delay: 0.15s; }
.rc-pending span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rc-bounce { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.rc-raw { white-space: pre-wrap; font-size: 12px; color: var(--s-muted); }

/* ─── Brand Brain ───────────────────────────────────────── */

.br-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.05); color: var(--s-muted); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.br-status[data-state="saved"] { color: var(--s-good); }
.br-status[data-state="error"] { color: var(--s-low); }
.br-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.br-main, .br-side { display: grid; gap: 18px; }
.br-section { display: grid; gap: 18px; }
.br-section h2 { font-size: 17px; font-weight: 750; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.br-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.br-chip-group { display: grid; gap: 9px; }
.br-chip-group > span { font-size: 13px; font-weight: 650; color: var(--s-muted); }
.br-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.br-chip { padding: 8px 13px; border: 1px solid var(--s-line-2); border-radius: 99px; background: rgba(0, 0, 0, 0.25); color: var(--s-muted); font-size: 13.5px; font-weight: 600; transition: all 0.15s; }
.br-chip:hover { color: var(--s-text); border-color: rgba(255, 255, 255, 0.28); }
.br-chip.active { background: rgba(54, 242, 126, 0.13); border-color: rgba(54, 242, 126, 0.5); color: var(--s-text); }
.br-sliders { display: grid; gap: 18px; }
.br-slider-labels { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; font-weight: 650; color: var(--s-muted); }
.br-slider input[type="range"] { width: 100%; accent-color: #36f27e; }
.br-meter { display: grid; gap: 12px; }
.br-meter p { color: var(--s-muted); font-size: 13.5px; line-height: 1.5; }
.br-doc { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--s-line); }
.br-doc-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(114, 167, 255, 0.12); color: #9dc0ff; }
.br-doc strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-doc small { color: var(--s-soft); font-size: 12px; }
.br-doc p { margin-top: 4px; color: var(--s-muted); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.br-upload { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; border: 1.5px dashed var(--s-line-2); border-radius: 12px; cursor: pointer; color: var(--s-accent); transition: border-color 0.15s; }
.br-upload:hover { border-color: var(--s-accent); }
.br-upload span { display: grid; gap: 2px; }
.br-upload strong { font-size: 14px; color: var(--s-text); }
.br-upload small { color: var(--s-soft); font-size: 12px; line-height: 1.4; }
.br-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.br-asset { display: grid; margin: 0; border: 1px solid var(--s-line); border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, 0.25); }
.br-asset-img { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 10px; background: repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0% 25%, transparent 0% 50%) 50% / 16px 16px; color: var(--s-soft); font-size: 12px; }
.br-asset-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.br-asset figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 4px 4px 10px; font-size: 12px; color: var(--s-muted); }
.br-asset figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-asset-add { place-items: center; align-content: center; gap: 4px; aspect-ratio: 4 / 3.6; padding: 12px; text-align: center; border: 1.5px dashed var(--s-line-2); cursor: pointer; color: var(--s-accent); transition: border-color 0.15s; }
.br-asset-add:hover, .br-asset-add.is-over { border-color: var(--s-accent); }
.br-asset-add strong { font-size: 13px; color: var(--s-text); }
.br-asset-add small { font-size: 11px; line-height: 1.35; color: var(--s-soft); }
.br-asset-logo { border-color: rgba(54, 242, 126, 0.45); }
.br-assets-intro { margin: 0 0 4px; font-size: 13px; color: var(--s-muted); line-height: 1.5; }
.br-assets-h { display: flex; justify-content: space-between; margin: 16px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--s-soft); }
.br-assets-h em { font-style: normal; font-weight: 500; }
.br-assets-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--s-muted); line-height: 1.4; }
.br-note-form { display: flex; gap: 8px; }
.br-note-form .s-btn { flex: none; }
.br-notes { display: grid; gap: 8px; margin-top: 12px; max-height: 420px; overflow-y: auto; }
.br-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 11px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--s-line); }
.br-note p { font-size: 13.5px; line-height: 1.5; color: #d6ddd2; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.br-note .s-icon-btn { width: 28px; height: 28px; }
.br-learned { border-color: rgba(54, 242, 126, 0.25); }
.br-learned h2 .s-icon { color: var(--s-accent); }
.br-learned p { color: #d6ddd2; font-size: 14px; }
.br-privacy { display: flex; gap: 10px; padding: 4px 6px; color: var(--s-soft); font-size: 12.5px; line-height: 1.5; }
.br-privacy .s-icon { margin-top: 2px; }

/* ─── Library ───────────────────────────────────────────── */

.lib-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.lib-stats .s-card { display: grid; gap: 6px; padding: 18px; }
.lib-stats small { color: var(--s-muted); font-size: 12.5px; font-weight: 650; }
.lib-stats strong { font-size: 30px; font-weight: 850; letter-spacing: -0.03em; }
.lib-filters { margin-bottom: 16px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 36px; }
.lib-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; width: 100%; padding: 0; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-panel); text-align: left; overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.lib-card:hover { border-color: var(--s-line-2); transform: translateY(-2px); }
.lib-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: #000; color: var(--s-soft); }
.lib-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib-kind { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px; background: rgba(0, 0, 0, 0.7); color: #dfe6db; font-size: 11.5px; font-weight: 700; backdrop-filter: blur(4px); }
.lib-score { position: absolute; right: 10px; top: 10px; }
.lib-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.lib-body strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-body p { color: var(--s-muted); font-size: 13px; line-height: 1.45; min-height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lib-foot small { color: var(--s-soft); font-size: 12px; }
.lib-foot .s-chip { padding: 3px 9px; font-size: 11.5px; }
.lib-threads { display: grid; gap: 8px; }
.lib-thread { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-panel); text-align: left; }
.lib-thread .s-icon { color: var(--s-accent); }
.lib-thread strong { flex: 1; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-thread small { color: var(--s-soft); font-size: 12px; }
.lib-thread:hover { border-color: var(--s-line-2); }

/* ─── Nav badge ─────────────────────────────────────────── */

.st-nav-icon { position: relative; display: inline-grid; }
.st-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--s-low);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px #080b09;
}

/* ─── Unified chat: attachments, tool steps, live chip ─── */

.co-main { position: relative; }
.co-chip-live { border-color: rgba(54, 242, 126, 0.35); color: var(--s-good); cursor: pointer; }
.co-chip-live .s-dot { width: 6px; height: 6px; }
.co-chip-connect { cursor: pointer; }
.co-chip-connect:hover, .co-chip-live:hover { background: rgba(54, 242, 126, 0.08); }
.co-chip-critical { border-color: rgba(255, 107, 107, 0.45); }
.co-chip-critical .s-icon { color: var(--s-low); }
.co-chip-major .s-icon { color: var(--s-mid); }
.co-empty-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--s-soft) !important; font-size: 12.5px !important; }

.studio .co-composer { display: grid; align-items: stretch; gap: 8px; padding: 8px; }
.co-composer-row { display: flex; align-items: flex-end; gap: 6px; }
.co-composer-row textarea { padding-left: 4px !important; }
.co-attach { width: 42px; height: 42px; flex: none; color: var(--s-muted); }
.co-attach:hover { color: var(--s-accent); }
.co-reading { display: flex; align-items: center; gap: 8px; padding: 2px 8px; color: var(--s-muted); font-size: 12.5px; }

.co-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.co-att {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 6px 8px 6px 6px;
  border: 1px solid var(--s-line-2);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.3);
}
.co-att-thumb, .co-att-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 8px; overflow: hidden; background: #000; color: var(--s-soft); }
.co-att-icon { background: rgba(114, 167, 255, 0.12); color: #9dc0ff; }
.co-att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-att-meta { display: grid; min-width: 0; }
.co-att-meta strong { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.co-att-meta small { color: var(--s-soft); font-size: 11.5px; }
.co-att .s-link { font-size: 12px; white-space: nowrap; }
.co-att-import { color: var(--s-accent) !important; }
.co-att-x { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--s-soft); }
.co-att-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--s-text); }
.co-user-col { display: grid; justify-items: end; gap: 8px; max-width: 78%; }
.co-user-col .co-bubble { max-width: 100%; }
.co-atts-sent { justify-content: flex-end; }
.co-atts-sent .co-att-thumb { width: 64px; height: 64px; }

.co-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.co-step { display: flex; align-items: center; gap: 9px; color: var(--s-muted); font-size: 13.5px; }
.co-step .s-spinner { width: 13px; height: 13px; border-width: 2px; }
.co-step-done .s-icon { color: var(--s-accent); }
.co-step-error .s-icon { color: var(--s-mid); }
.co-step-running span:last-child { color: var(--s-text); }
.co-steps-done summary { display: inline-flex; align-items: center; gap: 7px; color: var(--s-soft); font-size: 12.5px; cursor: pointer; list-style: none; }
.co-steps-done summary::-webkit-details-marker { display: none; }
.co-steps-done summary:hover { color: var(--s-muted); }
.co-steps-done[open] summary { margin-bottom: 8px; }

.co-dropzone {
  position: absolute;
  inset: 12px;
  z-index: 20;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border: 2px dashed rgba(54, 242, 126, 0.6);
  border-radius: 18px;
  background: rgba(5, 8, 6, 0.86);
  color: var(--s-accent);
  pointer-events: none;
}
.co-dropzone strong { color: var(--s-text); font-size: 18px; }
.co-dropzone small { color: var(--s-muted); }
.co-main.is-dragging .co-dropzone { display: grid; }

/* Data cards: built by the server from tool results */
.rc-data { gap: 12px; }
.rc-data-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rc-data-head small { color: var(--s-soft); font-size: 12px; }
.rc-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rc-kpi { display: grid; gap: 3px; padding: 11px 12px; border-radius: 11px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--s-line); }
.rc-kpi > span:first-child { color: var(--s-muted); font-size: 11.5px; font-weight: 650; }
.rc-kpi strong { font-size: 19px; font-weight: 850; letter-spacing: -0.02em; color: var(--s-text); }
.rc-pill { display: inline-flex; align-items: center; margin-right: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); color: var(--s-muted); font-size: 10.5px; font-weight: 750; letter-spacing: 0.02em; vertical-align: 1px; }
.rc-pill-meta { background: rgba(114, 167, 255, 0.14); color: #a9c6ff; }
.rc-pill-google { background: rgba(255, 201, 77, 0.13); color: #ffd978; }
.rc-badge { padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.rc-badge-low { background: rgba(255, 107, 107, 0.15); color: var(--s-low); }
.rc-badge-mid { background: rgba(255, 201, 77, 0.14); color: var(--s-mid); }
.rc-rows { display: grid; }
.rc-row { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(56px, 0.8fr)) 32px; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--s-line); font-size: 13.5px; }
.rc-row-head { padding-top: 0; border-top: 0; color: var(--s-soft); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; }
.rc-row-head > span:not(:first-child), .rc-cell { text-align: right; }
.rc-cell { font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-row-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-row-name > span:nth-child(2), .rc-row-name > span:first-child:not(.rc-thumb) { display: grid; min-width: 0; }
.rc-row-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.rc-row-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-soft); font-size: 11.5px; }
.rc-thumb { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 8px; overflow: hidden; background: #000; color: var(--s-soft); }
.rc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rc-row-lab { width: 30px; height: 30px; color: var(--s-soft); }
.rc-row-lab:hover { color: var(--s-accent); }
.rc-ad { grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: start; }
.rc-ad-media { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 11px; overflow: hidden; background: #000; color: var(--s-soft); }
.rc-ad-media img { width: 100%; height: 100%; object-fit: cover; }
.rc-ad-media span { display: grid; justify-items: center; gap: 6px; font-size: 12px; }
.rc-ad-body { display: grid; gap: 8px; align-content: start; }
.rc-ad-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rc-ad-body > strong { font-size: 16px; color: var(--s-text); }
.rc-ad-headline { font-weight: 700; color: #dfe6db; font-size: 14px; }
.rc-ad-copy { color: var(--s-muted); font-size: 13px; line-height: 1.5; }
.rc-ad-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rc-ad-stats div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 9px; background: rgba(0, 0, 0, 0.28); }
.rc-ad-stats span { color: var(--s-soft); font-size: 11px; }
.rc-ad-stats strong { font-size: 14.5px; color: var(--s-text); }
.rc-ad .s-btn { justify-self: start; }
.rc-split-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 13px; }
.rc-split-name { display: flex; align-items: center; min-width: 0; }
.rc-split-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: #dfe6db; }
.rc-split-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.rc-split-bar span { display: block; height: 100%; border-radius: inherit; }
.rc-split-bar .good { background: var(--s-good); }
.rc-split-bar .mid { background: var(--s-mid); }
.rc-split-bar .low { background: var(--s-low); }
.rc-split-meta { color: var(--s-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-split-meta b { color: var(--s-text); }
.rc-split-foot { color: var(--s-soft); font-size: 11.5px; }
.rc-recommend { border-color: rgba(54, 242, 126, 0.35); background: linear-gradient(120deg, rgba(54, 242, 126, 0.09), transparent 65%), var(--s-panel-2); }
.rc-recommend .rc-kicker { color: var(--s-accent); }
.rc-recommend strong { font-size: 16.5px; color: var(--s-text); }
.rc-recommend p { color: #cfd6cb; font-size: 14px; }
.rc-recommend ol { margin: 2px 0 0; padding-left: 20px; display: grid; gap: 6px; color: #dfe6db; font-size: 14px; }
.rc-recommend small { display: inline-flex; align-items: center; gap: 6px; color: var(--s-soft); font-size: 11.5px; }

/* Shared chart + delta chips */
.pf-chart { display: block; width: 100%; height: auto; overflow: visible; }
.pf-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pf-line { fill: none; stroke: #36f27e; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(54, 242, 126, 0.45)); }
.pf-line-prev { fill: none; stroke: rgba(232, 240, 226, 0.35); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.pf-peak { fill: #050806; stroke: #36f27e; stroke-width: 2; vector-effect: non-scaling-stroke; }
.pf-peak-label { fill: var(--s-text); font-size: 12px; font-weight: 800; text-anchor: middle; }
.pf-axis { fill: var(--s-soft); font-size: 11px; text-anchor: middle; }
.pf-chart-empty { padding: 30px; color: var(--s-soft); text-align: center; font-size: 13px; }
.pf-delta { display: inline-flex; align-items: center; gap: 3px; justify-self: start; padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-delta-good { background: rgba(54, 242, 126, 0.12); color: var(--s-good); }
.pf-delta-bad { background: rgba(255, 107, 107, 0.13); color: var(--s-low); }
.pf-delta-flat { background: rgba(255, 255, 255, 0.06); color: var(--s-muted); font-weight: 650; }

/* ─── Performance dashboard ─────────────────────────────── */

.pf-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-sample { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 11px 14px; border: 1px solid rgba(255, 201, 77, 0.3); border-radius: 12px; background: rgba(255, 201, 77, 0.08); color: #ffe3a0; font-size: 13.5px; }
.pf-sample .s-icon { color: var(--s-mid); }
.pf-inbox-strip { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 16px; padding: 12px 16px; border: 1px solid rgba(54, 242, 126, 0.25); border-radius: 12px; background: linear-gradient(90deg, rgba(54, 242, 126, 0.08), transparent 70%), var(--s-panel); color: #dfe6db; font-size: 14px; text-align: left; cursor: pointer; }
.pf-inbox-strip span { flex: 1; }
.pf-inbox-strip .s-icon { color: var(--s-accent); }
.pf-inbox-strip.is-critical { border-color: rgba(255, 107, 107, 0.35); background: linear-gradient(90deg, rgba(255, 107, 107, 0.1), transparent 70%), var(--s-panel); }
.pf-inbox-strip.is-critical .s-icon:first-child { color: var(--s-low); }
.pf-note { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--s-muted); font-size: 13px; }
.pf-note .s-icon { color: var(--s-mid); }
.pf-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.pf-tile { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: linear-gradient(180deg, rgba(54, 242, 126, 0.035), transparent 60%), var(--s-panel); }
.pf-tile > span:first-child { color: var(--s-muted); font-size: 12.5px; font-weight: 650; }
.pf-tile strong { font-size: 25px; font-weight: 850; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.pf-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: stretch; }
.pf-row-even { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pf-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-card-head h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.pf-card-head small { display: block; margin-top: 4px; color: var(--s-soft); font-size: 12.5px; }
.pf-chart-card { display: grid; align-content: start; }
.pf-channels { display: grid; gap: 14px; align-content: start; }
.pf-channels .pf-card-head { margin-bottom: 0; }
.pf-split-bar { display: flex; gap: 3px; height: 10px; border-radius: 99px; overflow: hidden; }
.pf-split-bar span { display: block; height: 100%; }
.pf-split-meta { background: #72a7ff; }
.pf-split-google { background: #ffc94d; }
.pf-channel-grid { display: grid; gap: 10px; }
.pf-channel { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--s-line); border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.pf-channel-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.pf-channel-top b { color: var(--s-muted); font-weight: 650; }
.pf-channel-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-channel-stats div { display: grid; gap: 3px; }
.pf-channel-stats span { color: var(--s-soft); font-size: 11.5px; }
.pf-channel-stats strong { font-size: 17px; font-weight: 800; }
.pf-channels .s-link { justify-self: start; }
.pf-ads-section { display: grid; gap: 12px; margin-bottom: 22px; }
.pf-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pf-ad { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-panel); overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.pf-ad:hover { border-color: var(--s-line-2); transform: translateY(-2px); }
.pf-ad-top { border-top: 2px solid rgba(54, 242, 126, 0.6); }
.pf-ad-bottom { border-top: 2px solid rgba(255, 107, 107, 0.55); }
.pf-ad-media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; background: #000; color: var(--s-soft); overflow: hidden; }
.pf-ad-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-ad-text { display: grid; justify-items: center; gap: 8px; padding: 18px; text-align: center; }
.pf-ad-text small { color: #dfe6db; font-size: 14px; font-weight: 700; line-height: 1.35; }
.pf-ad-rank { position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(0, 0, 0, 0.72); font-size: 12.5px; font-weight: 850; backdrop-filter: blur(4px); }
.pf-ad-flag { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 7px; background: rgba(0, 0, 0, 0.75); font-size: 11px; font-weight: 800; backdrop-filter: blur(4px); }
.pf-flag-fatigued { color: var(--s-low); }
.pf-flag-watch { color: var(--s-mid); }
.pf-ad-body { display: grid; gap: 8px; align-content: start; padding: 12px 14px 14px; }
.pf-ad-body > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pf-ad-body > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-soft); font-size: 11.5px; }
.pf-ad-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.pf-ad-stats div { display: flex; justify-content: space-between; font-size: 12.5px; }
.pf-ad-stats span { color: var(--s-soft); }
.pf-ad-stats b { font-variant-numeric: tabular-nums; }
.pf-ad-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; border-top: 1px solid var(--s-line); }
.pf-ad-actions .s-link { font-size: 12px; padding: 0; }
.pf-finding-link { color: var(--s-mid) !important; }
.pf-note-card { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; color: var(--s-muted); font-size: 14px; }
.pf-fatigue-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 110px 64px 70px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--s-line); }
.pf-fatigue-row:first-of-type { border-top: 0; }
.pf-fatigue-thumb { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #000; color: var(--s-soft); }
.pf-fatigue-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-fatigue-name { display: grid; min-width: 0; }
.pf-fatigue-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.pf-fatigue-name small { color: var(--s-soft); font-size: 11.5px; }
.pf-meter { position: relative; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); }
.pf-meter span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.pf-meter span.low { background: var(--s-low); }
.pf-meter span.mid { background: var(--s-mid); }
.pf-meter i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; opacity: 0.6; border-radius: 2px; }
.pf-fatigue-num { display: grid; text-align: right; }
.pf-fatigue-num b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pf-fatigue-num small { color: var(--s-soft); font-size: 10.5px; }
.pf-ok { display: flex; align-items: center; gap: 8px; color: var(--s-muted); font-size: 14px; }
.pf-ok .s-icon { color: var(--s-accent); }
.pf-table { display: grid; }
.pf-tr { display: grid; grid-template-columns: minmax(0, 2.6fr) repeat(5, minmax(70px, 1fr)); gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--s-line); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pf-tr > span:not(:first-child) { text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.pf-th { padding-top: 0; border-top: 0; color: var(--s-soft); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; }
.pf-td-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pf-td-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.pf-td-name .rc-badge { margin-left: 6px; }
.pf-tr .pf-delta { font-size: 10.5px; padding: 1px 5px; }
.pf-bench-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--s-line); font-size: 13px; }
.pf-bench-row a { color: var(--s-accent); }
.pf-empty .cn-actions, .ib-empty .cn-actions { justify-content: center; }

/* ─── Inbox ─────────────────────────────────────────────── */

.ib-run { display: flex; gap: 8px; flex-wrap: wrap; }
.ib-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ib-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-filter { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--s-line); border-radius: 99px; background: rgba(255, 255, 255, 0.02); color: var(--s-muted); font-size: 13px; font-weight: 600; }
.ib-filter b { min-width: 18px; padding: 0 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); color: var(--s-text); font-size: 11px; line-height: 18px; text-align: center; }
.ib-filter:hover { color: var(--s-text); border-color: var(--s-line-2); }
.ib-filter.active { border-color: rgba(54, 242, 126, 0.45); background: rgba(54, 242, 126, 0.1); color: var(--s-text); }
.ib-filter.active .s-icon { color: var(--s-accent); }
.ib-list { display: grid; gap: 14px; }
.ib-card { display: grid; gap: 12px; padding: 20px 22px; border: 1px solid var(--s-line); border-left: 3px solid var(--s-line-2); border-radius: var(--s-radius); background: var(--s-panel); }
.ib-critical { border-left-color: var(--s-low); background: linear-gradient(100deg, rgba(255, 107, 107, 0.06), transparent 45%), var(--s-panel); }
.ib-major { border-left-color: var(--s-mid); }
.ib-minor { border-left-color: var(--s-soft); }
.ib-brief { border-left-color: var(--s-accent); background: linear-gradient(110deg, rgba(54, 242, 126, 0.08), transparent 50%), var(--s-panel); }
.ib-card.is-done { opacity: 0.7; }
.ib-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.ib-agent { display: inline-flex; align-items: center; gap: 6px; color: var(--s-text); font-weight: 750; }
.ib-agent .s-icon { color: var(--s-accent); }
.ib-sev { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--s-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ib-critical .ib-sev { background: rgba(255, 107, 107, 0.15); color: var(--s-low); }
.ib-major .ib-sev { background: rgba(255, 201, 77, 0.14); color: var(--s-mid); }
.ib-brief .ib-sev { background: rgba(54, 242, 126, 0.12); color: var(--s-accent); }
.ib-sample { padding: 2px 8px; border-radius: 6px; background: rgba(255, 201, 77, 0.1); color: #ffe3a0; font-size: 11px; font-weight: 700; }
.ib-top small { margin-left: auto; color: var(--s-soft); }
.ib-card h2 { font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 750; }
.ib-changed { color: #d6ddd2; font-size: 14.5px; line-height: 1.55; }
.ib-why { color: var(--s-muted); font-size: 14px; line-height: 1.55; }
.ib-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ib-fact { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid var(--s-line); border-radius: 11px; background: rgba(0, 0, 0, 0.26); }
.ib-fact span { color: var(--s-soft); font-size: 11.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-fact strong { font-size: 18px; font-weight: 850; letter-spacing: -0.02em; }
.ib-fact small { color: var(--s-soft); font-size: 11px; }
.ib-entities { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-entity { display: inline-flex; align-items: center; gap: 9px; max-width: 320px; padding: 5px 10px 5px 5px; border: 1px solid var(--s-line); border-radius: 10px; background: rgba(0, 0, 0, 0.22); }
.ib-entity > .s-icon { margin-left: 5px; color: var(--s-soft); }
.ib-entity > span:last-child { display: grid; min-width: 0; }
.ib-entity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.ib-entity small { color: var(--s-soft); font-size: 11px; text-transform: capitalize; }
.ib-entity-thumb { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 7px; overflow: hidden; background: #000; color: var(--s-soft); }
.ib-entity-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ib-steps { border: 1px solid var(--s-line); border-radius: 12px; background: rgba(0, 0, 0, 0.2); }
.ib-steps-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border: 0; background: none; color: var(--s-text); font-size: 13.5px; font-weight: 700; text-align: left; }
.ib-steps-toggle .s-icon { color: var(--s-accent); }
.ib-steps-toggle span { margin-left: auto; color: var(--s-soft); font-size: 16px; }
.ib-steps ol { margin: 0; padding: 0 16px 14px 36px; display: grid; gap: 7px; color: #d6ddd2; font-size: 14px; line-height: 1.5; }
.ib-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.ib-spacer { flex: 1; }
.ib-actions .s-link { font-size: 13px; }

/* ─── Connections ───────────────────────────────────────── */

.cn-readonly { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid rgba(54, 242, 126, 0.22); border-radius: 12px; background: rgba(54, 242, 126, 0.05); color: #d6ddd2; font-size: 14px; }
.cn-readonly .s-icon { color: var(--s-accent); }
.cn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.cn-card { display: grid; gap: 14px; align-content: start; }
.cn-head { display: flex; align-items: center; gap: 12px; }
.cn-head > div { flex: 1; min-width: 0; }
.cn-head h2 { font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.cn-head small { color: var(--s-soft); font-size: 12.5px; }
.cn-logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; }
.cn-logo-meta { background: rgba(114, 167, 255, 0.14); color: #9dc0ff; }
.cn-logo-google { background: rgba(255, 201, 77, 0.13); color: var(--s-mid); }
.cn-logo-csv { background: rgba(255, 255, 255, 0.07); color: #dfe6db; }
.cn-logo-sample { background: rgba(54, 242, 126, 0.12); color: var(--s-accent); }
.cn-logo-mail { background: rgba(54, 242, 126, 0.12); color: var(--s-accent); }
.cn-chip-off { color: var(--s-muted); background: rgba(255, 255, 255, 0.06); }
.cn-body { color: var(--s-muted); font-size: 14px; line-height: 1.55; }
.cn-sync { color: var(--s-muted); font-size: 13px; }
.cn-error, .cn-paused { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.45; }
.cn-error { color: #ffb3b3; }
.cn-paused { color: #ffe3a0; }
.cn-error .s-icon, .cn-paused .s-icon { margin-top: 2px; }
.cn-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cn-danger { color: #ffb3b3 !important; }
.cn-off { display: flex; gap: 10px; padding: 12px 14px; border: 1px dashed var(--s-line-2); border-radius: 12px; color: var(--s-muted); font-size: 13px; line-height: 1.55; }
.cn-off .s-icon { margin-top: 2px; color: var(--s-soft); }
.cn-off code, .cn-help code { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); color: #dfe6db; font-size: 12px; }
.cn-help { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--s-line); }
.cn-help p { display: flex; gap: 8px; color: var(--s-soft); font-size: 12.5px; line-height: 1.5; }
.cn-help .s-icon { margin-top: 2px; }
.cn-help b { color: var(--s-muted); }
.cn-uri { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--s-soft); font-size: 12px; }
.cn-uri .s-link { justify-self: start; }
.cn-uri code { word-break: break-all; color: var(--s-text); font-size: 12px; }
.cn-dev summary { color: var(--s-muted); font-size: 13px; cursor: pointer; }
.cn-dev form { display: flex; gap: 8px; margin: 10px 0 6px; }
.cn-dev input { flex: 1; }
.cn-dev small { color: var(--s-soft); font-size: 12px; }
.cn-label { display: flex; justify-content: space-between; color: var(--s-muted); font-size: 12.5px; font-weight: 700; }
.cn-label em { font-style: normal; font-weight: 500; color: var(--s-soft); }
.cn-accounts { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.cn-accounts .s-btn { justify-self: start; margin-top: 4px; }
.cn-account { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--s-line); border-radius: 10px; background: rgba(0, 0, 0, 0.22); cursor: pointer; }
.cn-account input { accent-color: #36f27e; }
.cn-account span { display: grid; min-width: 0; }
.cn-account strong { font-size: 13.5px; }
.cn-account small { color: var(--s-soft); font-size: 11.5px; }
.cn-account.is-error { opacity: 0.6; cursor: not-allowed; }
.cn-file { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid var(--s-line); border-radius: 11px; background: rgba(0, 0, 0, 0.22); }
.cn-file > .s-icon { margin-top: 2px; color: var(--s-soft); }
.cn-file > span { display: grid; gap: 3px; min-width: 0; }
.cn-file strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-note { color: var(--s-soft); font-size: 12px; line-height: 1.45; }
.cn-csv { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; align-items: stretch; }
.cn-drop { min-height: 96px; padding: 16px; gap: 4px; }
.cn-sample { background: linear-gradient(135deg, rgba(54, 242, 126, 0.06), transparent 55%), var(--s-panel); }
.cn-alerts { display: grid; gap: 16px; }
.cn-alert-form { display: grid; gap: 14px; }
.cn-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.cn-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cn-toggle > span { position: relative; width: 38px; height: 22px; flex: none; margin-top: 1px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); transition: background 0.15s; }
.cn-toggle > span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.cn-toggle input:checked + span { background: var(--s-accent); }
.cn-toggle input:checked + span::after { transform: translateX(16px); background: var(--s-accent-ink); }
.cn-toggle input:focus-visible + span { box-shadow: 0 0 0 3px rgba(54, 242, 126, 0.25); }
.cn-toggle div { display: grid; gap: 2px; }
.cn-toggle strong { font-size: 14px; }
.cn-toggle small { color: var(--s-muted); font-size: 12.5px; }
.cn-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cn-foot { color: var(--s-soft); font-size: 12px; line-height: 1.5; }

/* ─── Brand Brain: What works for us ────────────────────── */

.br-works { border-color: rgba(54, 242, 126, 0.25); background: linear-gradient(160deg, rgba(54, 242, 126, 0.07), transparent 55%), var(--s-panel); }
.br-works h2 .s-icon { color: var(--s-accent); }
.br-works-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.br-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 99px; background: rgba(54, 242, 126, 0.12); color: var(--s-good); font-size: 11px; font-weight: 750; }
.br-live .s-dot { width: 6px; height: 6px; }
.br-live.is-sample { background: rgba(255, 201, 77, 0.12); color: var(--s-mid); }
.br-works ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: #dfe6db; font-size: 13.5px; line-height: 1.5; }
.br-works-ads { display: flex; gap: 6px; }
.br-works-ads span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; overflow: hidden; background: #000; color: var(--s-soft); }
.br-works-ads img { width: 100%; height: 100%; object-fit: cover; }
.br-works small { font-size: 12px; line-height: 1.45; }
.br-works .s-link { justify-self: start; font-size: 12.5px; }

/* ─── Nav badge ─────────────────────────────────────────── */

.st-nav-icon { position: relative; display: inline-flex; }
.st-badge {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--s-low);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px #080b09;
}

/* ─── Chat: composer, attachments, tool steps ───────────── */

.co-main { position: relative; }
.co-composer { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 10px 8px 8px; }
.co-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.co-attach { width: 42px; height: 42px; flex: none; color: var(--s-muted); }
.co-attach:hover { color: var(--s-accent); }
.co-reading { display: flex; align-items: center; gap: 8px; padding: 2px 8px; color: var(--s-muted); font-size: 12.5px; }
.co-atts { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 0; }
.co-att { display: inline-flex; align-items: center; gap: 9px; max-width: 320px; padding: 6px 8px 6px 6px; border: 1px solid var(--s-line-2); border-radius: 12px; background: rgba(0, 0, 0, 0.3); }
.co-att-thumb, .co-att-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 8px; overflow: hidden; background: #000; color: var(--s-soft); }
.co-att-icon { background: rgba(114, 167, 255, 0.12); color: #9dc0ff; }
.co-att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-att-meta { display: grid; min-width: 0; }
.co-att-meta strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-att-meta small { color: var(--s-soft); font-size: 11.5px; }
.co-att-x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--s-muted); cursor: pointer; }
.co-att-x:hover { background: rgba(255, 107, 107, 0.18); color: var(--s-low); }
.co-att .s-link { font-size: 12px; white-space: nowrap; }
.co-att-import { color: var(--s-accent) !important; }
.co-user-col { display: grid; justify-items: end; gap: 8px; max-width: 78%; }
.co-user-col .co-bubble { max-width: 100%; }
.co-atts-sent { justify-content: flex-end; padding: 0; }
.co-atts-sent .co-att { background: var(--s-panel-2); }
.co-atts-sent .co-att-thumb { width: 64px; height: 64px; }
.co-empty-hint { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--s-soft) !important; font-size: 13px !important; }

.co-dropzone {
  position: absolute;
  inset: 12px;
  z-index: 20;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border: 2px dashed rgba(54, 242, 126, 0.6);
  border-radius: 18px;
  background: rgba(5, 8, 6, 0.86);
  color: var(--s-accent);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.co-dropzone strong { color: var(--s-text); font-size: 18px; }
.co-dropzone small { color: var(--s-muted); }
.co-main.is-dragging .co-dropzone { display: grid; }

.co-chip-live { border-color: rgba(54, 242, 126, 0.35); color: var(--s-text); cursor: pointer; }
.co-chip-live .s-dot { color: var(--s-accent); width: 6px; height: 6px; }
.co-chip-connect { cursor: pointer; }
.co-chip-connect:hover, .co-chip-live:hover { border-color: rgba(54, 242, 126, 0.55); }
.co-chip-critical { border-color: rgba(255, 107, 107, 0.45); }
.co-chip-critical .s-icon { color: var(--s-low); }

.co-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.co-step { display: flex; align-items: center; gap: 9px; color: var(--s-muted); font-size: 13.5px; }
.co-step .s-spinner { width: 13px; height: 13px; border-width: 2px; }
.co-step-done .s-icon { color: var(--s-accent); }
.co-step-error .s-icon { color: var(--s-mid); }
.co-step-running { color: var(--s-text); }
.co-steps-done { color: var(--s-soft); font-size: 12.5px; }
.co-steps-done summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; }
.co-steps-done summary::-webkit-details-marker { display: none; }
.co-steps-done summary:hover { color: var(--s-muted); }
.co-steps-done .co-steps { margin-top: 8px; padding-left: 4px; }

/* ─── Chat data cards (built from tool results) ─────────── */

.rc-data { gap: 12px; background: linear-gradient(180deg, rgba(54, 242, 126, 0.035), transparent 40%), var(--s-panel-2); }
.rc-data-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rc-data-head small { color: var(--s-soft); font-size: 12px; }
.rc-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rc-kpi { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--s-line); border-radius: 11px; background: rgba(0, 0, 0, 0.25); }
.rc-kpi span:first-child { color: var(--s-muted); font-size: 12px; font-weight: 650; }
.rc-kpi strong { font-size: 20px; font-weight: 850; letter-spacing: -0.02em; color: var(--s-text); }
.rc-pill { display: inline-flex; align-items: center; padding: 1px 7px; margin-right: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: var(--s-muted); font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.rc-pill-meta { background: rgba(114, 167, 255, 0.14); color: #a9c6ff; }
.rc-pill-google { background: rgba(255, 201, 77, 0.13); color: #ffd87a; }
.rc-badge { padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.rc-badge-low { background: rgba(255, 107, 107, 0.16); color: var(--s-low); }
.rc-badge-mid { background: rgba(255, 201, 77, 0.15); color: var(--s-mid); }
.rc-rows { display: grid; }
.rc-row { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(64px, 0.8fr)) 34px; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--s-line); font-size: 13.5px; }
.rc-row-head { border-top: 0; padding-top: 0; color: var(--s-soft); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; }
.rc-row-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-row-name > span:not(.rc-thumb) { display: grid; min-width: 0; }
.rc-row-name strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-row-name small { display: flex; align-items: center; color: var(--s-soft); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-thumb { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 8px; overflow: hidden; background: #000; color: var(--s-soft); }
.rc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rc-cell { font-weight: 700; color: #e4eadf; font-variant-numeric: tabular-nums; }
.rc-row-lab { width: 32px; height: 32px; }
.rc-ad { grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: start; }
.rc-ad-media { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #000; color: var(--s-soft); }
.rc-ad-media img { width: 100%; height: 100%; object-fit: cover; }
.rc-ad-media span { display: grid; justify-items: center; gap: 6px; font-size: 12px; }
.rc-ad-body { display: grid; gap: 8px; justify-items: start; }
.rc-ad-top { display: flex; align-items: center; gap: 4px; }
.rc-ad-body > strong { font-size: 16px; color: var(--s-text); }
.rc-ad-headline { color: #e4eadf; font-size: 14.5px; font-weight: 650; }
.rc-ad-copy { color: var(--s-muted); font-size: 13px; line-height: 1.5; }
.rc-ad-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; width: 100%; }
.rc-ad-stats div { display: grid; }
.rc-ad-stats span { color: var(--s-soft); font-size: 11px; font-weight: 650; }
.rc-ad-stats strong { font-size: 15px; font-weight: 800; color: var(--s-text); }
.rc-split-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; }
.rc-split-name { display: flex; align-items: center; min-width: 0; }
.rc-split-name strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-split-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.rc-split-bar span { display: block; height: 100%; border-radius: inherit; }
.rc-split-bar .good { background: var(--s-good); }
.rc-split-bar .mid { background: var(--s-mid); }
.rc-split-bar .low { background: var(--s-low); }
.rc-split-meta { color: var(--s-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-split-meta b { color: var(--s-text); }
.rc-split-foot { color: var(--s-soft); font-size: 11.5px; }
.rc-recommend { border-color: rgba(54, 242, 126, 0.35); background: linear-gradient(120deg, rgba(54, 242, 126, 0.08), transparent 65%), var(--s-panel-2); }
.rc-recommend .rc-kicker { color: var(--s-accent); }
.rc-recommend strong { font-size: 16.5px; color: var(--s-text); }
.rc-recommend p { color: #cfd6cb; font-size: 14px; }
.rc-recommend ol { margin: 2px 0 0; padding-left: 22px !important; display: grid; gap: 6px; font-size: 14px; color: #dfe6db; }
.rc-recommend small { display: inline-flex; align-items: center; gap: 6px; color: var(--s-soft); font-size: 11.5px; }

/* ─── Performance dashboard ─────────────────────────────── */

.pf-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-sample { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 11px 14px; border: 1px solid rgba(255, 201, 77, 0.3); border-radius: 12px; background: rgba(255, 201, 77, 0.07); color: #ffe3a0; font-size: 13.5px; }
.pf-note { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--s-muted); font-size: 13px; }
.pf-inbox-strip { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--s-line-2); border-radius: 12px; background: var(--s-panel); color: #d6ddd2; font-size: 14px; text-align: left; cursor: pointer; }
.pf-inbox-strip > span { flex: 1; }
.pf-inbox-strip .s-icon:first-child { color: var(--s-accent); }
.pf-inbox-strip.is-critical { border-color: rgba(255, 107, 107, 0.4); background: linear-gradient(90deg, rgba(255, 107, 107, 0.08), transparent 60%), var(--s-panel); }
.pf-inbox-strip.is-critical .s-icon:first-child { color: var(--s-low); }
.pf-inbox-strip:hover { border-color: rgba(54, 242, 126, 0.45); }

.pf-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.pf-tile { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), var(--s-panel); }
.pf-tile > span:first-child { color: var(--s-muted); font-size: 12.5px; font-weight: 650; }
.pf-tile strong { font-size: clamp(20px, 1.9vw, 27px); font-weight: 850; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pf-delta { justify-self: start; padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.pf-delta-good { background: rgba(54, 242, 126, 0.12); color: var(--s-good); }
.pf-delta-bad { background: rgba(255, 107, 107, 0.13); color: var(--s-low); }
.pf-delta-flat { background: rgba(255, 255, 255, 0.06); color: var(--s-muted); font-weight: 650; }

.pf-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: stretch; }
.pf-row-even { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pf-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.pf-card-head h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.pf-card-head h2 .s-icon { color: var(--s-mid); }
.pf-card-head small { display: block; margin-top: 3px; color: var(--s-soft); font-size: 12.5px; }
.pf-chart { display: block; width: 100%; height: auto; overflow: visible; }
.pf-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.pf-line { fill: none; stroke: #36f27e; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(54, 242, 126, 0.35)); }
.pf-line-prev { fill: none; stroke: rgba(232, 240, 226, 0.35); stroke-width: 1.6; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.pf-peak { fill: #050806; stroke: #36f27e; stroke-width: 2; vector-effect: non-scaling-stroke; }
.pf-peak-label { fill: #e4eadf; font: 700 12px Inter, system-ui, sans-serif; text-anchor: middle; }
.pf-axis { fill: var(--s-soft); font: 600 11px Inter, system-ui, sans-serif; text-anchor: middle; }
.pf-chart-empty { padding: 36px 0; color: var(--s-soft); font-size: 13px; text-align: center; }

.pf-channels { display: grid; align-content: start; gap: 14px; }
.pf-channels .pf-card-head { margin-bottom: 0; }
.pf-split-bar { display: flex; gap: 3px; height: 10px; border-radius: 99px; overflow: hidden; }
.pf-split-bar span { display: block; height: 100%; }
.pf-split-meta { background: #72a7ff; }
.pf-split-google { background: #ffc94d; }
.pf-channel-grid { display: grid; gap: 10px; }
.pf-channel { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--s-line); border-radius: 12px; background: rgba(0, 0, 0, 0.22); }
.pf-channel-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--s-muted); }
.pf-channel-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-channel-stats div { display: grid; gap: 3px; align-content: start; }
.pf-channel-stats span { color: var(--s-soft); font-size: 11.5px; font-weight: 650; }
.pf-channel-stats strong { font-size: 17px; font-weight: 800; }
.pf-channels > .s-link { justify-self: start; font-size: 13px; }

.pf-ads-section { display: grid; gap: 12px; margin-bottom: 22px; }
.pf-ads { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pf-ad { display: grid; align-content: start; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-panel); overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.pf-ad:hover { border-color: var(--s-line-2); transform: translateY(-2px); }
.pf-ad-top:hover { border-color: rgba(54, 242, 126, 0.35); }
.pf-ad-media { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #000; color: var(--s-soft); overflow: hidden; }
.pf-ad-media img { width: 100%; height: 100%; object-fit: cover; }
.pf-ad-text { display: grid; justify-items: center; gap: 8px; padding: 16px; text-align: center; }
.pf-ad-text small { color: #d6ddd2; font-size: 13px; font-weight: 650; line-height: 1.35; }
.pf-ad-rank { position: absolute; top: 9px; left: 9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 12px; font-weight: 850; backdrop-filter: blur(4px); }
.pf-ad-top .pf-ad-rank { background: var(--s-accent); color: var(--s-accent-ink); }
.pf-ad-flag { position: absolute; right: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; font-size: 11px; font-weight: 800; backdrop-filter: blur(4px); }
.pf-flag-fatigued { background: rgba(255, 107, 107, 0.9); color: #1b0505; }
.pf-flag-watch { background: rgba(255, 201, 77, 0.9); color: #1b1305; }
.pf-ad-body { display: grid; gap: 7px; padding: 12px 13px 13px; min-width: 0; }
.pf-ad-body > strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-ad-body > small { display: flex; align-items: center; color: var(--s-soft); font-size: 11.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-ad-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.pf-ad-stats div { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.pf-ad-stats span { color: var(--s-soft); }
.pf-ad-stats b { font-variant-numeric: tabular-nums; }
.pf-ad-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 6px; border-top: 1px solid var(--s-line); }
.pf-ad-actions .s-link { font-size: 12px; }
.pf-finding-link { color: var(--s-low) !important; }
.pf-note-card { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--s-muted); font-size: 14px; }

.pf-fatigue { display: grid; align-content: start; gap: 4px; }
.pf-fatigue-row { display: grid; grid-template-columns: 38px minmax(0, 1.4fr) minmax(80px, 1fr) 70px 80px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--s-line); }
.pf-fatigue-thumb { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; background: #000; color: var(--s-soft); }
.pf-fatigue-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-fatigue-name { display: grid; min-width: 0; }
.pf-fatigue-name strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-fatigue-name small { color: var(--s-soft); font-size: 11.5px; }
.pf-meter { position: relative; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); }
.pf-meter span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.pf-meter .low { background: var(--s-low); }
.pf-meter .mid { background: var(--s-mid); }
.pf-meter i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; opacity: 0.6; }
.pf-fatigue-num { display: grid; text-align: right; }
.pf-fatigue-num b { font-size: 15px; font-weight: 800; }
.pf-fatigue-num small { color: var(--s-soft); font-size: 10.5px; }
.pf-ok { display: flex; align-items: center; gap: 8px; padding: 12px 0; color: var(--s-muted); font-size: 14px; }
.pf-ok .s-icon { color: var(--s-accent); }

.pf-campaigns { margin-bottom: 18px; }
.pf-table { display: grid; }
.pf-tr { display: grid; grid-template-columns: minmax(0, 2.6fr) repeat(5, minmax(70px, 1fr)); gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--s-line); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pf-th { border-top: 0; padding-top: 0; color: var(--s-soft); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; }
.pf-tr > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-td-name { min-width: 0; flex-wrap: nowrap !important; }
.pf-td-name strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-bench-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 9px 0; border-top: 1px solid var(--s-line); font-size: 13.5px; }
.pf-bench-row a { color: var(--s-accent); font-size: 12px; }

/* ─── Inbox ─────────────────────────────────────────────── */

.ib-run { display: flex; gap: 8px; flex-wrap: wrap; }
.ib-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ib-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-filter { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--s-line); border-radius: 99px; background: rgba(0, 0, 0, 0.2); color: var(--s-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.ib-filter b { min-width: 19px; padding: 0 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); font-size: 11px; line-height: 19px; text-align: center; }
.ib-filter:hover { color: var(--s-text); border-color: var(--s-line-2); }
.ib-filter.active { border-color: rgba(54, 242, 126, 0.5); background: rgba(54, 242, 126, 0.1); color: var(--s-text); }
.ib-filter.active b { background: var(--s-accent); color: var(--s-accent-ink); }
.ib-list { display: grid; gap: 12px; }
.ib-card { display: grid; gap: 11px; padding: 20px 22px; border: 1px solid var(--s-line); border-left: 3px solid var(--s-line-2); border-radius: var(--s-radius); background: var(--s-panel); }
.ib-critical { border-left-color: var(--s-low); background: linear-gradient(90deg, rgba(255, 107, 107, 0.06), transparent 40%), var(--s-panel); }
.ib-major { border-left-color: var(--s-mid); }
.ib-minor { border-left-color: var(--s-soft); }
.ib-brief { border-color: rgba(54, 242, 126, 0.3); border-left-color: var(--s-accent); background: linear-gradient(120deg, rgba(54, 242, 126, 0.08), transparent 55%), var(--s-panel); }
.ib-card.is-done { opacity: 0.72; }
.ib-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.ib-top small { margin-left: auto; color: var(--s-soft); }
.ib-agent { display: inline-flex; align-items: center; gap: 6px; color: var(--s-muted); font-weight: 700; }
.ib-agent .s-icon { color: var(--s-accent); }
.ib-sev { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: var(--s-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ib-critical .ib-sev { background: rgba(255, 107, 107, 0.15); color: var(--s-low); }
.ib-major .ib-sev { background: rgba(255, 201, 77, 0.14); color: var(--s-mid); }
.ib-brief .ib-sev { background: rgba(54, 242, 126, 0.13); color: var(--s-accent); }
.ib-sample { padding: 2px 8px; border-radius: 6px; background: rgba(255, 201, 77, 0.12); color: var(--s-mid); font-size: 11px; font-weight: 700; }
.ib-card h2 { font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 750; }
.ib-changed { color: #d6ddd2; font-size: 14.5px; line-height: 1.55; }
.ib-why { color: var(--s-muted); font-size: 14px; line-height: 1.55; }
.ib-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ib-fact { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--s-line); border-radius: 11px; background: rgba(0, 0, 0, 0.25); }
.ib-fact span { color: var(--s-soft); font-size: 11.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-fact strong { font-size: 18px; font-weight: 850; letter-spacing: -0.02em; }
.ib-fact small { color: var(--s-soft); font-size: 11px; }
.ib-entities { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-entity { display: inline-flex; align-items: center; gap: 9px; padding: 5px 11px 5px 5px; border: 1px solid var(--s-line); border-radius: 10px; background: rgba(0, 0, 0, 0.2); font-size: 12.5px; }
.ib-entity > .s-icon { margin-left: 6px; color: var(--s-soft); }
.ib-entity > span:last-child { display: grid; }
.ib-entity small { color: var(--s-soft); font-size: 11px; }
.ib-entity-thumb { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; overflow: hidden; background: #000; color: var(--s-soft); }
.ib-entity-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ib-steps { border: 1px solid var(--s-line); border-radius: 11px; background: rgba(0, 0, 0, 0.2); }
.ib-steps-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border: 0; background: none; color: #d6ddd2; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; }
.ib-steps-toggle .s-icon { color: var(--s-accent); }
.ib-steps-toggle span { margin-left: auto; color: var(--s-soft); font-size: 16px; }
.ib-steps ol { margin: 0; padding: 0 16px 14px 36px; display: grid; gap: 7px; color: #d6ddd2; font-size: 14px; line-height: 1.5; }
.ib-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ib-spacer { flex: 1; }
.ib-actions .s-link { font-size: 13px; }
.ib-empty { gap: 10px; }
.ib-empty .s-icon { color: var(--s-accent); }

/* ─── Connections ───────────────────────────────────────── */

.cn-readonly { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid rgba(54, 242, 126, 0.22); border-radius: 12px; background: rgba(54, 242, 126, 0.05); color: #cfe9d6; font-size: 14px; }
.cn-readonly .s-icon { color: var(--s-accent); }
.cn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.cn-card { display: grid; align-content: start; gap: 14px; }
.cn-head { display: flex; align-items: center; gap: 12px; }
.cn-head > div { flex: 1; min-width: 0; }
.cn-head h2 { font-size: 17px; font-weight: 750; }
.cn-head small { color: var(--s-soft); font-size: 12.5px; }
.cn-logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; }
.cn-logo-meta { background: rgba(114, 167, 255, 0.15); color: #a9c6ff; }
.cn-logo-google { background: rgba(255, 201, 77, 0.14); color: #ffd87a; }
.cn-logo-csv { background: rgba(255, 255, 255, 0.07); color: #d6ddd2; }
.cn-logo-sample, .cn-logo-mail { background: rgba(54, 242, 126, 0.12); color: var(--s-accent); }
.cn-chip-off { color: var(--s-muted); background: rgba(255, 255, 255, 0.06); }
.cn-body { color: #c6cec2; font-size: 14px; line-height: 1.55; }
.cn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-danger:hover:not(:disabled) { border-color: rgba(255, 107, 107, 0.5); color: var(--s-low); }
.cn-off { display: flex; gap: 10px; padding: 12px 14px; border: 1px dashed var(--s-line-2); border-radius: 11px; color: var(--s-muted); font-size: 13px; line-height: 1.55; }
.cn-off .s-icon { margin-top: 2px; color: var(--s-soft); }
.cn-off code, .cn-foot code { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); color: #d6ddd2; font-size: 12px; }
.cn-help { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--s-line); }
.cn-help p { display: flex; gap: 8px; color: var(--s-soft); font-size: 12.5px; line-height: 1.5; }
.cn-help .s-icon { margin-top: 2px; }
.cn-help b { color: var(--s-muted); }
.cn-sync { color: var(--s-muted); font-size: 13px; }
.cn-error, .cn-paused { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.cn-error { color: #ffb3b3; }
.cn-paused { color: var(--s-mid); }
.cn-label { font-size: 12.5px; font-weight: 700; color: var(--s-muted); }
.cn-label em { font-style: normal; font-weight: 500; color: var(--s-soft); }
.cn-accounts { display: grid; gap: 6px; justify-items: start; }
.cn-account { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 1px solid var(--s-line); border-radius: 10px; background: rgba(0, 0, 0, 0.2); cursor: pointer; }
.cn-account input { accent-color: #36f27e; width: 16px; height: 16px; }
.cn-account span { display: grid; }
.cn-account strong { font-size: 13.5px; }
.cn-account small { color: var(--s-soft); font-size: 11.5px; }
.cn-account.is-error { opacity: 0.6; }
.cn-dev { color: var(--s-muted); font-size: 13px; }
.cn-dev summary { cursor: pointer; }
.cn-dev form { display: flex; gap: 8px; margin: 10px 0 6px; }
.cn-dev form input { flex: 1; }
.cn-dev small { color: var(--s-soft); font-size: 12px; line-height: 1.5; }
.cn-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid var(--s-line); border-radius: 11px; background: rgba(0, 0, 0, 0.2); }
.cn-file > .s-icon { margin-top: 2px; color: var(--s-accent); }
.cn-file strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-file .cn-sync { font-size: 12px; }
.cn-note { display: block; color: var(--s-soft); font-size: 11.5px; line-height: 1.45; }
.cn-csv { display: grid; gap: 10px; }
.cn-drop { min-height: 118px; padding: 18px; }
.cn-drop .s-icon { color: var(--s-accent); }
.cn-alerts { display: grid; gap: 16px; }
.cn-alert-form { display: grid; gap: 14px; }
.cn-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.cn-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cn-toggle > span { position: relative; width: 38px; height: 22px; flex: none; margin-top: 1px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); transition: background 0.15s; }
.cn-toggle > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #d6ddd2; transition: transform 0.15s; }
.cn-toggle input:checked + span { background: var(--s-accent); }
.cn-toggle input:checked + span::after { transform: translateX(16px); background: var(--s-accent-ink); }
.cn-toggle input:focus-visible + span { box-shadow: 0 0 0 3px rgba(54, 242, 126, 0.25); }
.cn-toggle div { display: grid; gap: 2px; }
.cn-toggle strong { font-size: 14px; }
.cn-toggle small { color: var(--s-soft); font-size: 12.5px; }
.cn-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cn-foot { color: var(--s-soft); font-size: 12px; line-height: 1.5; }

/* ─── Brand Brain: what works for us ────────────────────── */

.br-works { border-color: rgba(54, 242, 126, 0.28); background: linear-gradient(160deg, rgba(54, 242, 126, 0.07), transparent 50%), var(--s-panel); }
.br-works h2 .s-icon { color: var(--s-accent); }
.br-works-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.br-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: rgba(54, 242, 126, 0.12); color: var(--s-accent); font-size: 11px; font-weight: 750; }
.br-live .s-dot { width: 6px; height: 6px; }
.br-live.is-sample { background: rgba(255, 201, 77, 0.13); color: var(--s-mid); }
.br-works ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: #d6ddd2; font-size: 13.5px; line-height: 1.5; }
.br-works-ads { display: flex; gap: 6px; }
.br-works-ads span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; overflow: hidden; background: #000; color: var(--s-soft); }
.br-works-ads img { width: 100%; height: 100%; object-fit: cover; }
.br-works small { font-size: 12px; line-height: 1.45; }
.br-works .s-link { justify-self: start; font-size: 12.5px; }

/* ─── Responsive ────────────────────────────────────────── */

@media (max-width: 1180px) {
  .lab-grid, .br-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-hero { grid-template-columns: minmax(0, 1fr); }
  .rp-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co { grid-template-columns: minmax(0, 1fr); }
  .co-threads { display: none; }
  .pf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-row { grid-template-columns: minmax(0, 1fr); }
  .pf-ads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cn-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .st-shell { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100vh; overflow: visible; }
  .st-rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    flex-direction: row;
    padding: 8px;
    border-right: 0;
    border-top: 1px solid var(--s-line);
    backdrop-filter: blur(14px);
  }
  .st-rail-logo, .st-brand-chip, .st-rail-foot { display: none; }
  .st-nav { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .st-nav-item { flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; }
  .st-nav-item small { display: none; }
  .st-nav-item strong { font-size: 11.5px; }
  .st-main { overflow: visible; }
  .st-view { padding: 24px 18px 110px; }
  .st-page-head-row { flex-direction: column; }
  .lab-fields, .br-fields, .rp-2col, .lab-side { grid-template-columns: minmax(0, 1fr); }
  .lib-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-direction { grid-template-columns: minmax(0, 1fr); }
  .rp-verdict-top { flex-direction: column; align-items: flex-start; }
  .rp-share { grid-template-columns: 10px 110px 1fr 38px; }
  .rp-fix { grid-template-columns: 32px minmax(0, 1fr); }
  .rp-fix-meta { grid-column: 2; justify-items: start; grid-auto-flow: column; }
  .rp-topbar { flex-wrap: wrap; }
  .co, .co-main { height: calc(100vh - 70px); }
  .co-head, .co-messages { padding-left: 18px; padding-right: 18px; }
  .co-composer { width: calc(100% - 24px); }
  .co-suggestions { grid-template-columns: minmax(0, 1fr); }
  .st-auth { grid-template-columns: minmax(0, 1fr); }
  .st-auth-pitch { padding-top: 96px; }
  .st-auth-card { margin-bottom: 48px; }
  .st-nav { grid-auto-columns: minmax(62px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .st-nav::-webkit-scrollbar { display: none; }
  .st-badge { right: -8px; }
  .pf-tiles, .rc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-tr { grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(60px, 1fr)); }
  .pf-tr > span:nth-child(3), .pf-tr > span:nth-child(5), .pf-tr > span:nth-child(6) { display: none; }
  .pf-fatigue-row { grid-template-columns: 38px minmax(0, 1fr) 60px 70px; }
  .pf-fatigue-row .pf-meter { display: none; }
  .cn-grid, .cn-fields { grid-template-columns: minmax(0, 1fr); }
  .rc-row { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(56px, 0.8fr)); }
  .rc-row > span:nth-child(4), .rc-row > span:nth-child(5), .rc-row-lab { display: none; }
  .rc-ad { grid-template-columns: minmax(0, 1fr); }
  .rc-ad-media { max-width: 220px; }
  .co-user-col { max-width: 90%; }
  .ib-card { padding: 16px; }
}