:root {
  color-scheme: light;
  --bg-main: #f4f5fb;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f7f8fc;
  --bg-card: #ffffff;
  --bg-input: #ffffff;

  --border: #e5e7f2;
  --border-hover: #c7cbe0;
  --border-active: rgba(79, 70, 229, 0.4);

  --text-primary: #1e1b4b;
  --text-secondary: #6b7093;
  --text-muted: #9497b3;

  --brand-primary: #6366f1;
  --brand-primary-hover: #4f46e5;
  --brand-emerald: #10b981;
  --brand-emerald-glow: rgba(16, 185, 129, 0.2);
  --brand-cyan: #06b6d4;
  --brand-amber: #f59e0b;
  --brand-danger: #ef4444;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --shadow-sm: 0 2px 8px rgba(30, 27, 75, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 27, 75, 0.1);
  --shadow-glow: 0 0 25px rgba(99, 102, 241, 0.15);
}

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

[hidden] {
  display: none !important;
}

html, body {
  min-height: 100vh;
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  transition: all 0.18s ease-in-out;
}

input, textarea, select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-primary);
  transition: border-color 0.18s ease;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

textarea {
  resize: vertical;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
}

/* ==========================================================================
   MOBILE TOP HEADER & MOBILE BOTTOM NAV (Hidden on desktop)
   ========================================================================== */
.mobile-header {
  display: none;
}

.mobile-bottom-nav {
  display: none;
}

.mobile-backdrop {
  display: none;
}

/* ==========================================================================
   AUTH / LANDING PAGE
   ========================================================================== */
.auth-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 45%),
    var(--bg-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.auth-footer {
  width: 100%;
  max-width: 1240px;
  padding: 20px 24px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.auth-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.auth-footer-links a,
.auth-footer-support a {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}

.auth-footer-links a:hover,
.auth-footer-support a:hover {
  text-decoration: underline;
}

.auth-footer-support {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.auth-footer-legal {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.8;
  margin: 0;
}

.home-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.home-footer-legal {
  font-size: 11px;
  color: var(--text-muted);
}

.home-footer-links {
  display: flex;
  gap: 14px;
}

.home-footer-links a {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}

.home-footer-links a:hover {
  text-decoration: underline;
}

.auth-layout {
  width: 100%;
  max-width: 1240px;
  min-height: 100vh;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 60px;
  align-items: center;
}

.auth-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.brand-badge-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark-cube {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--brand-primary), #818cf8);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.4);
}

.brand-mark-cube.mini {
  width: 28px;
  height: 28px;
}

.brand-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #1e1b4b, #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.live-pill {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--brand-emerald);
}

.ai-pill {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.14), rgba(6, 182, 212, 0.14), rgba(99, 102, 241, 0.14));
  background-size: 200% 100%;
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--brand-primary);
  text-transform: none;
  letter-spacing: 0.01em;
  animation: aiPillShimmer 5s ease-in-out infinite;
}

.ai-pill-spark {
  display: inline-block;
  animation: aiSparkPulse 2.4s ease-in-out infinite;
}

@keyframes aiPillShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes aiSparkPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(8deg); opacity: 0.75; }
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--brand-emerald);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--brand-emerald);
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.auth-hero-text h1 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 12px 0 18px;
  background: linear-gradient(135deg, #1e1b4b 40%, #4f46e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-eyebrow, .eyebrow {
  color: var(--brand-emerald);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-lede {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  max-width: 620px;
}

.auth-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* "For communities" pill row (screens/CommunitiesVisual.html, condensed for
   the signup page — the full illustrative calendar mockup doesn't belong on
   a conversion-focused auth screen, but the real capability it's promoting
   does: all 6 of these platforms are genuinely supported). */
.communities-badge-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.communities-tag {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: #cfc5fb;
  border: 1.5px solid #15171c;
  color: #15171c;
  transform: rotate(-2deg);
}

.communities-heading {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.communities-subtitle {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 560px;
}

.communities-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.communities-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid #15171c;
}

.communities-day-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #4a4f5b;
}

.communities-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px;
  border-radius: 10px;
  border: 1.5px solid #15171c;
  box-shadow: 2px 2px 0 #15171c;
}

.communities-chip-meta {
  font-size: 9px;
  font-weight: 800;
  color: #15171c;
}

.communities-chip-text {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  color: #15171c;
}

@media (max-width: 900px) {
  .communities-calendar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .communities-calendar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.auth-trust-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  max-width: 560px;
}

.auth-trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.auth-trust-icon {
  flex-shrink: 0;
}

.communities-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.communities-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid #15171c;
  box-shadow: 2px 2px 0 #15171c;
  color: #15171c;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}

.feature-icon {
  font-size: 20px;
  background: rgba(30, 27, 75, 0.05);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-card strong {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.feature-card span {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.auth-quote-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(16, 185, 129, 0.04));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.quote-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.star-rating {
  color: var(--brand-amber);
  letter-spacing: 2px;
}

.quote-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.quote-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
}

/* Auth Panel Form */
.auth-panel-wrapper {
  display: flex;
  justify-content: center;
}

.auth-panel {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.auth-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-emerald));
}

.auth-panel-head {
  margin-bottom: 24px;
}

.auth-panel-head h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 6px 0 4px;
}

.auth-panel-head p {
  color: var(--text-secondary);
  font-size: 13px;
}

.auth-tabs-segmented {
  display: flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 22px;
}

.seg-tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.seg-tab.active {
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.auth-form-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label span, .form-label-bold, .form-sublabel span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.field-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.suggest-password-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-primary);
  cursor: pointer;
  font-family: inherit;
}

.suggest-password-link:hover {
  text-decoration: underline;
}

.pw-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 23, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.pw-modal {
  position: relative;
  background: var(--bg-card, #fff);
  border-radius: 16px;
  padding: 28px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pw-modal h3 {
  margin: 0;
  font-size: 16px;
}

.pw-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.pw-modal-close:hover {
  color: var(--text-primary);
}

.pw-modal-value {
  font-family: var(--font-mono, monospace);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  word-break: break-all;
  user-select: all;
}

.pw-modal-note {
  margin: 0;
  font-size: 13px;
  color: var(--brand-emerald, #16a34a);
  font-weight: 600;
}

.pw-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.input-with-toggle {
  position: relative;
  display: flex;
}

.input-with-toggle input {
  flex: 1;
  padding-right: 40px;
}

.password-toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  margin: 0;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle-btn:hover {
  color: var(--text-primary);
}

.password-strength-meter {
  height: 5px;
  border-radius: 999px;
  background: var(--bg-input);
  overflow: hidden;
}

.password-strength-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--brand-danger);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.btn-primary-glow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--brand-primary), #4f46e5);
  color: white;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.btn-primary-glow:hover {
  background: linear-gradient(135deg, #7174f8, var(--brand-primary));
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.btn-demo-quick {
  background: rgba(30, 27, 75, 0.04);
  border: 1px dashed var(--border-hover);
  color: var(--brand-cyan);
  font-size: 12px;
  font-weight: 600;
  padding: 9px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.btn-demo-quick:hover {
  background: rgba(6, 182, 212, 0.08);
  border-color: var(--brand-cyan);
}

.form-error-banner {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #b91c1c;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.auth-footer-notes {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.status-indicator-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.mini-status-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-emerald);
}

.auth-legal-links {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 11px;
}

.auth-legal-links a {
  color: var(--text-muted);
}

.auth-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -4px;
}

.auth-checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
}

.auth-checkbox-row input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.auth-checkbox-row-muted {
  color: var(--text-muted);
}

.verify-email-banner {
  background: #fdede6;
  border: 1px solid #f2622e;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  margin-top: 16px;
  text-align: left;
}

/* ==========================================================================
   APP SHELL (DASHBOARD)
   ========================================================================== */
.dashboard-body {
  overflow-x: hidden;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.2s ease;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 76px 1fr;
}

.sidebar-collapsed .sidebar {
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed .workspace-name,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-badge,
.sidebar-collapsed .plan-pill,
.sidebar-collapsed .ai-quota-widget,
.sidebar-collapsed .sidebar-brand .brand-title {
  display: none;
}

.sidebar-collapsed .sidebar-brand,
.sidebar-collapsed .nav-item {
  justify-content: center;
}

.sidebar-collapsed .nav-item {
  gap: 0;
}

/* Sidebar */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 20;
}

.sidebar-brand {
  padding: 16px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brand-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  display: block;
  line-height: 1.2;
}

.workspace-name {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 105px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-top: 1px;
}

.plan-pill {
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-emerald);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

.plan-pill[data-plan="free"] {
  color: var(--text-secondary);
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.25);
}

.plan-pill[data-plan="starter"] {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}

.plan-pill[data-plan="business"] {
  color: var(--brand-emerald);
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

.plan-pill[data-plan="agency"] {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  border-color: rgba(192, 132, 252, 0.3);
}

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

.btn-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-right: 6px;
  vertical-align: -2px;
}

.side-nav {
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
}

.nav-group-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, #6b6257);
  padding: 10px 12px 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  transition: all 0.15s ease;
  position: relative;
}

.nav-item:hover {
  background: rgba(30, 27, 75, 0.04);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--bg-surface-elevated);
  color: var(--brand-primary);
  border-left: 3px solid var(--brand-primary);
}

.nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.nav-badge {
  margin-left: auto;
  background: var(--brand-primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(0, 0, 0, 0.15);
}

.ai-quota-widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.quota-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 6px;
}

.quota-title {
  color: var(--text-muted);
  font-weight: 600;
}

.quota-count {
  color: var(--brand-cyan);
  font-weight: 700;
  font-family: var(--font-mono);
}

.progress-track {
  height: 5px;
  background: rgba(30, 27, 75, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-cyan));
  border-radius: 999px;
  transition: width 0.3s ease;
}

.quota-sub {
  font-size: 10px;
  color: var(--text-muted);
}

.user-profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: white;
}

.user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-email {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.logout-link {
  font-size: 11px;
  color: var(--text-muted);
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
}

.logout-link:hover {
  color: var(--brand-danger);
}

/* Workspace Main Area */
.workspace-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Global Topbar */
.topbar {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-context {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sidebar-collapse-toggle {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.sidebar-collapse-toggle:hover {
  background: var(--bg-surface-elevated);
  color: var(--brand-primary);
}

.breadcrumb-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.view-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.env-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  white-space: nowrap;
}

.env-live {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #059669;
}

.env-live .status-indicator-dot {
  background: #059669;
  box-shadow: 0 0 8px #059669;
}

.env-partial {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.env-partial .status-indicator-dot {
  background: #fbbf24;
}

.env-demo {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #4f46e5;
}

.env-demo .status-indicator-dot {
  background: #818cf8;
}

.status-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.btn-ghost-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: rgba(30, 27, 75, 0.05);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.btn-ghost-icon:hover {
  background: rgba(30, 27, 75, 0.08);
  color: var(--text-primary);
}

.btn-secondary-sm, .btn-secondary-xs {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.btn-secondary-sm {
  padding: 7px 13px;
  font-size: 12px;
}

.btn-secondary-xs {
  padding: 5px 10px;
  font-size: 11px;
}

.btn-secondary-sm:hover, .btn-secondary-xs:hover {
  background: rgba(30, 27, 75, 0.1);
  border-color: var(--border-hover);
}

.btn-approval-sm {
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
  background: #a8e6c9;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: #0b6e4b;
}

.btn-approval-sm:hover {
  background: #93dab9;
}

.btn-primary-sm, .btn-primary-xs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-primary);
  color: white;
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

.btn-primary-sm {
  padding: 7px 14px;
  font-size: 12px;
}

.btn-primary-xs {
  padding: 5px 10px;
  font-size: 11px;
}

.btn-primary-sm:hover, .btn-primary-xs:hover {
  background: var(--brand-primary-hover);
}

.btn-danger-sm {
  background: var(--brand-danger);
  color: white;
  font-weight: 600;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
}

.btn-ghost-xs {
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

.btn-ghost-xs:hover {
  background: rgba(30, 27, 75, 0.05);
  color: var(--text-primary);
}

.text-danger {
  color: #f87171 !important;
}

/* ==========================================================================
   VIEWS CONTAINER & COMMON CARD SURFACES
   ========================================================================== */
.views-wrapper {
  padding: 28px 32px 60px;
  flex: 1;
}

.view-panel {
  display: none;
}

.view-panel.active {
  display: block;
  animation: viewFadeIn 0.22s ease-out;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.panel-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.panel-header-row h2, .panel-header-row h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dashboard-split-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.dashboard-split-2col > * {
  min-width: 0;
}

.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }

.divider-line {
  height: 1px;
  background: var(--border);
  width: 100%;
}

.muted-text {
  color: var(--text-muted);
  font-size: 13px;
}

/* ==========================================================================
   VIEW 1: OVERVIEW & KPIS
   ========================================================================== */
.quick-start-banner {
  margin-bottom: 24px;
}

.quick-start-card {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.9), rgba(255, 255, 255, 0.95));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
}

.qs-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.qs-header h3 {
  font-size: 18px;
  font-weight: 800;
  margin-top: 2px;
}

.qs-progress-tag {
  font-size: 11px;
  font-weight: 700;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #4f46e5;
  padding: 4px 10px;
  border-radius: 999px;
}

.qs-steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.qs-step-item {
  background: rgba(30, 27, 75, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qs-step-item:hover {
  background: rgba(30, 27, 75, 0.06);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.qs-step-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(30, 27, 75, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.qs-step-item.is-done .qs-step-indicator {
  background: var(--brand-emerald);
  color: white;
}

.qs-step-text strong {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.qs-step-text small {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
  display: block;
}

/* KPI Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.18s ease;
}

.kpi-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.kpi-card.has-alert {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, var(--bg-surface), rgba(245, 158, 11, 0.04));
}

.kpi-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kpi-icon {
  font-size: 14px;
}

.kpi-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 4px 0 2px;
}

.kpi-trend {
  font-size: 11px;
  color: var(--brand-emerald);
  font-weight: 600;
}

/* Accounts Chip List */
.accounts-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.account-card-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.acc-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(30, 27, 75, 0.08);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}

.acc-meta {
  flex: 1;
  min-width: 0;
}

.acc-meta strong {
  display: block;
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-meta span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-disconnect-btn {
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
}

.acc-disconnect-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--brand-danger);
}

/* Post Stream */
.post-preview-stream {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stream-post-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stream-post-item:hover {
  border-color: var(--border-hover);
  background: rgba(30, 27, 75, 0.03);
}

.stream-post-body {
  flex: 1;
  min-width: 0;
}

.stream-post-body strong {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.stream-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.status-chip {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.status-chip.published {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.status-chip.scheduled {
  background: rgba(99, 102, 241, 0.15);
  color: #4f46e5;
}

.status-chip.pending_approval {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.status-chip.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-chip.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-chip.processing {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Platform Capability Matrix */
.platform-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.platform-capability-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.platform-capability-card.is-connected {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, var(--bg-card), rgba(16, 185, 129, 0.04));
}

.platform-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.platform-card-name {
  font-size: 13px;
  font-weight: 700;
}

.status-connected-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(16, 185, 129, 0.2);
  color: #059669;
  padding: 1px 5px;
  border-radius: 4px;
}

.capabilities-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.cap-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
}

.cap-tag.yes {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.cap-tag.no {
  background: rgba(30, 27, 75, 0.04);
  color: var(--text-muted);
  opacity: 0.5;
}

.platform-notes {
  font-size: 10px;
  color: var(--text-muted);
}

/* ==========================================================================
   VIEW 2: COMPOSER & AI
   ========================================================================== */
.composer-split-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  align-items: flex-start;
}

.composer-split-layout > * {
  min-width: 0;
}

.composer-form-card {
  background: var(--bg-surface);
}

.composer-assistant-drafts-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eeebfd;
  border: 1.5px solid var(--border, #e4e0d8);
  font-size: 13px;
  margin-bottom: 14px;
}

.composer-assistant-drafts-label {
  font-weight: 700;
  color: var(--cp-ink, #15171c);
}

.composer-assistant-drafts-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.composer-assistant-draft-pill {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border, #e4e0d8);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.composer-assistant-draft-pill.active {
  background: var(--cp-ink, #15171c);
  color: #fff;
  border-color: var(--cp-ink, #15171c);
}

.composer-autosave-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff8e1;
  border: 1.5px solid var(--border, #e4e0d8);
  font-size: 13px;
  margin-bottom: 14px;
}

.composer-autosave-actions {
  display: flex;
  gap: 8px;
}

.composer-postto-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.composer-groups-wrap,
.composer-rewrite-wrap,
.composer-emoji-wrap,
.composer-snippets-wrap {
  position: relative;
  display: inline-flex;
}

.composer-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 180px;
  max-width: 280px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e2e2);
  border-radius: var(--radius-md, 8px);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.composer-dropdown-menu button {
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: normal;
}

.composer-dropdown-menu button:hover {
  background: var(--bg-subtle, rgba(148, 163, 184, 0.12));
}

.composer-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  min-width: 220px;
}

.composer-emoji-grid button {
  font-size: 18px;
  text-align: center;
  padding: 6px;
}

.composer-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.composer-network-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.composer-network-tab {
  position: relative;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px 10px 0 0;
  border: 1.5px solid var(--border, #e4e0d8);
  border-bottom: none;
  background: var(--bg-subtle, #efe7da);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.composer-network-tab.active {
  background: var(--bg-card, #fff);
  font-weight: 800;
}

.composer-tab-warning-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-orange, #f2622e);
  margin-left: 6px;
}

.composer-customize-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.composer-customize-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--brand-primary);
  box-shadow: none;
}

.composer-customize-toggle input[type="checkbox"]:focus,
.composer-customize-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.composer-tab-content-card {
  border: 1.5px solid var(--border, #e4e0d8);
  border-radius: 0 14px 14px 14px;
  padding: 14px;
  background: var(--bg-card, #fff);
}

.composer-subtype-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.composer-subtype-tabs {
  display: flex;
  gap: 4px;
}

.composer-post-label-input {
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border, #e4e0d8);
  background: #ffe58f;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  width: 160px;
  flex-shrink: 0;
}

.composer-post-label-input::placeholder {
  color: #7a6a2e;
  opacity: 0.7;
}

.composer-subtype-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border, #e4e0d8);
  background: var(--bg-subtle, #f7f5f0);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.composer-subtype-btn.active {
  background: var(--cp-ink, #15171c);
  color: #fff;
  border-color: var(--cp-ink, #15171c);
}

.composer-media-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.composer-media-preview {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1.5px solid var(--border, #e4e0d8);
  overflow: hidden;
  background: var(--bg-subtle, #f7f5f0);
}

.composer-media-preview img,
.composer-media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.composer-media-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(21, 23, 28, 0.85);
  color: #fff;
  letter-spacing: 0.3px;
}

.composer-media-badge-cover {
  background: #ffe58f;
  color: #15171c;
}

.composer-media-actions {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.composer-media-upload-row {
  display: flex;
  gap: 6px;
}

.composer-library-wrap {
  position: relative;
  display: inline-flex;
}

.composer-library-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  min-width: 260px;
  max-height: 220px;
  overflow-y: auto;
}

.composer-library-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px;
}

.composer-library-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

.composer-library-video-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--bg-subtle, #efe7da);
  border-radius: 6px;
}

.composer-library-item small {
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
}

.composer-quick-insert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.textarea-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.char-counters-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.char-pill {
  font-size: 10px;
  font-family: var(--font-mono);
  background: rgba(30, 27, 75, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
}

.char-pill.char-over {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  font-weight: 700;
}

.account-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-select-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.account-select-pill input {
  display: none;
}

.pill-check-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--text-muted);
  transition: all 0.15s ease;
}

.account-select-pill input:checked + .pill-check-indicator {
  background: var(--brand-emerald);
  border-color: var(--brand-emerald);
  box-shadow: 0 0 6px var(--brand-emerald);
}

.account-select-pill:has(input:checked) {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.08);
}

.pill-platform {
  font-size: 12px;
  font-weight: 700;
}

.pill-handle {
  font-size: 11px;
  color: var(--text-muted);
}

/* Accordion */
.override-accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.accordion-toggle {
  width: 100%;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.accordion-toggle:hover {
  color: var(--text-primary);
  background: rgba(30, 27, 75, 0.02);
}

.accordion-content {
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-input);
}

.override-grid {
  display: grid;
  gap: 14px;
}

.override-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(30, 27, 75, 0.02);
  padding: 10px;
  border-radius: var(--radius-sm);
}

.override-title {
  font-size: 12px;
  color: var(--brand-primary);
}

.form-sublabel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inline-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.inline-checkbox input {
  width: auto;
}

.form-row-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.form-row-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.form-row-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 720px) {
  .form-row-4col { grid-template-columns: repeat(2, 1fr); }
}

.approval-toggle-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(30, 27, 75, 0.02);
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.approval-toggle-box input {
  width: auto;
  margin-top: 3px;
}

.approval-toggle-box strong {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
}

.muted-block {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.composer-submit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.split-btn-group {
  display: flex;
  position: relative;
}

.split-btn-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.split-btn-toggle {
  width: 36px;
  border: 1px solid var(--border);
  border-left: none;
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
  cursor: pointer;
  font-weight: 700;
}

.split-btn-toggle:hover {
  background: var(--bg-input);
}

.publish-more-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 280px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 5px 5px 0 var(--border);
  padding: 6px;
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.publish-more-menu button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.publish-more-menu button:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.1);
}

.publish-more-menu button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.publish-more-menu strong {
  font-size: 12px;
  color: var(--text-primary);
}

.publish-more-menu small {
  font-size: 11px;
  color: var(--text-muted);
}

.composer-checks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.composer-check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.composer-check-row.check-ok {
  background: #e8f6ee;
  color: #0b6e4b;
}

.composer-check-row.check-warn {
  background: #fdede6;
  color: #b8481c;
}

.composer-check-row .check-icon {
  font-weight: 800;
}

.composer-saved-indicator {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.composer-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.composer-reel-extras {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px dashed var(--border, #e4e0d8);
  background: var(--bg-subtle, #f7f5f0);
}

.composer-carousel-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px dashed var(--border, #e4e0d8);
  background: var(--bg-subtle, #f7f5f0);
  margin-bottom: 14px;
}

.composer-carousel-slides-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
}

.composer-carousel-slides-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.composer-carousel-slide {
  position: relative;
  width: 72px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e4e0d8);
  overflow: hidden;
  cursor: grab;
  background: #fff;
}

.composer-carousel-slide.active {
  border: 2.5px solid var(--brand-primary, #4b34e8);
  box-shadow: 2px 2px 0 var(--cp-ink, #15171c);
}

.composer-carousel-slide img,
.composer-carousel-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.composer-carousel-slide-num {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(21, 23, 28, 0.85);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.composer-carousel-slide-drag {
  position: absolute;
  right: 4px;
  top: 4px;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.composer-carousel-slide-alt-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(21, 23, 28, 0.85);
  color: #fff;
}

.composer-carousel-add-tile {
  width: 72px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 2px dashed var(--border, #e4e0d8);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.composer-carousel-add-tile small {
  font-weight: 600;
  color: var(--text-muted);
}

.composer-carousel-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: #f4f1ff;
  border: 1.5px solid var(--border, #e4e0d8);
}

.composer-carousel-detail-actions {
  display: flex;
  gap: 6px;
}

.composer-crop-pills {
  display: flex;
  gap: 4px;
}

.composer-audio-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
}

.composer-audio-result {
  text-align: left;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.composer-audio-result:hover {
  border-color: var(--brand-primary);
}

.composer-crop-pill {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1.5px solid var(--border, #e4e0d8);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.composer-crop-pill.active {
  background: var(--cp-ink, #15171c);
  color: #fff;
  border-color: var(--cp-ink, #15171c);
}

.composer-sound-toggle {
  display: flex;
  gap: 6px;
}

.composer-sound-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border, #e4e0d8);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.composer-sound-btn.active {
  background: var(--cp-ink, #15171c);
  color: #fff;
  border-color: var(--cp-ink, #15171c);
}

.composer-suggested-times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.composer-suggested-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 2px;
}

.composer-suggested-pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--border, #e4e0d8);
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
}

.composer-suggested-pill:hover {
  border-color: var(--cp-ink, #15171c);
}

/* AI Post Generator Box */
.composer-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-card-glow {
  border-color: rgba(99, 102, 241, 0.25);
  background: linear-gradient(135deg, var(--bg-surface), rgba(99, 102, 241, 0.05));
  position: relative;
}

.ai-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-spark-icon {
  font-size: 16px;
}

.ai-model-tag {
  font-size: 10px;
  font-weight: 700;
  background: rgba(99, 102, 241, 0.15);
  color: #4f46e5;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.btn-ai-generate {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: white;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-ai-generate:hover {
  background: linear-gradient(135deg, #6366f1, #818cf8);
}

.ai-results-stream {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.ai-variant-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.ai-variant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.ai-variant-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-emerald);
}

.ai-variant-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Social Preview Mockup */
.preview-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.preview-tab-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(30, 27, 75, 0.05);
  color: var(--text-muted);
}

.preview-tab-btn.active {
  background: var(--brand-primary);
  color: white;
}

.preview-device-toggle {
  display: inline-flex;
  border: 1.5px solid var(--border, #e4e0d8);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.preview-device-btn {
  height: 30px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.preview-device-btn.active {
  background: var(--cp-ink, #15171c);
  color: #fff;
  font-weight: 800;
}

.social-preview-mockup {
  background: #000000;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  margin: 0 auto;
}

.social-preview-mockup.is-desktop-preview {
  max-width: 100%;
  border-radius: var(--radius-md);
}

.preview-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

.preview-author-info strong {
  display: block;
  font-size: 12px;
}

.preview-author-info span {
  font-size: 10px;
  color: var(--text-muted);
}

.preview-collaborator-credit {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.preview-body-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  min-height: 48px;
}

.preview-carousel-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-input);
  margin-bottom: 8px;
}

.preview-carousel-media img,
.preview-carousel-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview-carousel-counter {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(21, 23, 28, 0.7);
  color: #fff;
}

.preview-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  font-weight: 800;
  cursor: pointer;
}

.preview-carousel-prev { left: 6px; }
.preview-carousel-next { right: 6px; }

.preview-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}

.preview-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
}

.preview-carousel-dot.active {
  background: var(--brand-primary);
}

.preview-carousel-tag {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(21, 23, 28, 0.85);
  color: #ffffff;
  pointer-events: none;
}

.preview-footer-actions {
  display: flex;
  gap: 18px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid rgba(30, 27, 75, 0.08);
  padding-top: 8px;
}

/* ==========================================================================
   VIEW 3: CONTENT CALENDAR
   ========================================================================== */
.calendar-wrapper-card {
  padding: 24px;
}

.calendar-header-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.calendar-nav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-month-title {
  font-size: 18px;
  font-weight: 800;
  min-width: 170px;
  text-align: center;
}

.calendar-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.calendar-tz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
}

.calendar-tz-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand-emerald);
  flex-shrink: 0;
}

.btn-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.btn-icon:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.calendar-weekdays-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.calendar-day-cell {
  background: var(--bg-surface);
  min-height: 105px;
  min-width: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.calendar-day-cell.is-other-month {
  background: rgba(10, 15, 29, 0.6);
  opacity: 0.45;
}

.calendar-day-cell.is-today {
  background: rgba(99, 102, 241, 0.06);
}

.day-cell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.day-number {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.today-marker {
  font-size: 9px;
  font-weight: 700;
  background: var(--brand-primary);
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
}

.day-posts-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 80px;
}

.cal-post-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}

.cal-post-chip.published {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: #059669;
}

.cal-post-chip.scheduled {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #4f46e5;
}

.cal-post-chip.pending_approval {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.chip-platform {
  font-weight: 800;
  font-size: 9px;
}

.chip-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scheduled Queue List */
.scheduled-queue-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scheduled-queue-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 16px;
  align-items: center;
}

.queue-time-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.queue-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.queue-content-col strong {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

.queue-content-col small {
  font-size: 11px;
  color: var(--text-muted);
}

.queue-actions-col {
  display: flex;
  gap: 8px;
}

/* ==========================================================================
   VIEW 4: UNIFIED COMMENTS INBOX
   ========================================================================== */
.inbox-toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.inbox-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-select {
  width: auto;
  padding: 6px 10px;
  font-size: 12px;
}

.calendar-multiselect {
  position: relative;
}

.calendar-multiselect-btn {
  cursor: pointer;
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  white-space: nowrap;
}

.calendar-multiselect-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px;
}

.calendar-multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
}

.calendar-multiselect-option:hover {
  background: var(--bg-surface-hover, rgba(127, 127, 127, 0.1));
}

.comments-inbox-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comment-thread-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.15s ease;
}

.comment-thread-card.is-unreplied {
  border-left: 3px solid var(--brand-amber);
}

.comment-thread-card.is-replied {
  border-left: 3px solid var(--brand-emerald);
}

.comment-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.commenter-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.commenter-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(30, 27, 75, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.commenter-name {
  font-size: 13px;
  color: var(--text-primary);
  margin-right: 8px;
}

.comment-channel-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(30, 27, 75, 0.08);
}

.comment-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
}

.comment-rating-badge {
  font-size: 12px;
  color: #f2622e;
  letter-spacing: 1px;
  margin-left: 6px;
}

.badge-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.tag-unreplied {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.tag-replied {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.comment-text-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}

.existing-reply-bubble {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.existing-reply-bubble strong {
  font-size: 11px;
  color: var(--brand-emerald);
  display: block;
  margin-bottom: 4px;
}

.existing-reply-bubble p {
  font-size: 13px;
  color: var(--text-secondary);
}

.reply-timestamp {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

.reply-composer-box {
  margin-top: 4px;
}

.reply-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.reply-text-field {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  font-size: 13px;
}

.btn-ai-suggest-reply {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.2));
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.btn-ai-suggest-reply:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(6, 182, 212, 0.3));
  border-color: var(--brand-primary);
}

.inbox-reply-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.chip-quick-action {
  background: var(--bg-subtle, rgba(148, 163, 184, 0.12));
  border: 1px solid var(--border, rgba(148, 163, 184, 0.3));
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.chip-quick-action:hover {
  border-color: var(--brand-primary, #6366f1);
}

.chip-quick-action:disabled {
  opacity: 0.6;
}

/* ==========================================================================
   VIEW 5: ANALYTICS
   ========================================================================== */
.analytics-chart-container {
  padding: 10px 0;
}

.svg-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: center;
}

.chart-label-col strong {
  display: block;
  font-size: 13px;
}

.chart-label-col small {
  font-size: 11px;
  color: var(--text-muted);
}

.chart-track-col {
  background: rgba(30, 27, 75, 0.04);
  border-radius: 999px;
  height: 28px;
  overflow: hidden;
  position: relative;
}

.chart-fill-bar {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
  transition: width 0.4s ease-out;
}

.bar-value {
  font-size: 11px;
  font-weight: 800;
  color: white;
  font-family: var(--font-mono);
}

.ranking-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranking-row-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.ranking-row-card:hover {
  border-color: var(--border-hover);
}

.rank-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(30, 27, 75, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}

.rank-post-text {
  flex: 1;
}

.rank-post-text strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.rank-post-text small {
  font-size: 11px;
  color: var(--text-muted);
}

.rank-metric-pill {
  text-align: right;
  flex-shrink: 0;
}

.rank-metric-pill strong {
  display: block;
  font-size: 15px;
  color: var(--brand-emerald);
}

.rank-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.btn-inspect-eye {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #4f46e5;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-inspect-eye:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

.posted-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  margin-left: 8px;
  vertical-align: middle;
}

.scheduled-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  margin-left: 8px;
  vertical-align: middle;
}


/* ==========================================================================
   VIEW 6: MEDIA & BULK CSV
   ========================================================================== */
.file-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.15);
}

.file-dropzone:hover, .file-dropzone.drag-active {
  border-color: var(--brand-primary);
  background: rgba(99, 102, 241, 0.05);
}

.file-dropzone input {
  display: none;
}

.dropzone-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

.media-assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.media-card-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.media-thumb-box {
  height: 90px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-info-box {
  padding: 8px;
}

.media-info-box strong {
  display: block;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-info-box small {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

.media-actions {
  display: flex;
  justify-content: space-between;
}

.mono-textarea {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ==========================================================================
   VIEW 7: GROWTH & TEMPLATES
   ========================================================================== */
.hashtag-cloud-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.hashtag-group strong {
  font-size: 12px;
  color: var(--brand-primary);
  display: block;
  margin-bottom: 4px;
}

.tag-pill {
  display: inline-block;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #4f46e5;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  margin-right: 4px;
  margin-bottom: 4px;
}

.tag-pill:hover {
  background: var(--brand-primary);
  color: white;
}

.best-times-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.best-time-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.bt-platform {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-emerald);
}

.bt-time {
  font-size: 15px;
  font-weight: 800;
  margin: 2px 0;
}

.bt-reason {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
}

.template-chips-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.template-item-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.template-item-row strong {
  font-size: 12px;
  display: block;
}

.template-item-row p {
  font-size: 11px;
  color: var(--text-muted);
}

.team-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.member-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.member-role-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(30, 27, 75, 0.08);
}

/* ==========================================================================
   VIEW 8: SETTINGS & PLANS
   ========================================================================== */
.pricing-plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s ease;
}

.pricing-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.pricing-card.is-current-plan {
  border-color: var(--brand-emerald);
  box-shadow: 0 0 20px var(--brand-emerald-glow);
}

.pricing-card.is-popular {
  border-color: var(--brand-primary);
}

.popular-ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--brand-primary);
  color: white;
  padding: 2px 7px;
  border-radius: 999px;
}

.pricing-card h4 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 16px;
}

.price-val {
  font-size: 32px;
  font-weight: 800;
}

.price-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.pricing-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  flex: 1;
}

.pricing-features-list strong {
  color: var(--text-primary);
}

.btn-current-plan {
  width: 100%;
  padding: 9px;
  border-radius: var(--radius-sm);
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid var(--brand-emerald);
  color: var(--brand-emerald);
  font-weight: 700;
  font-size: 12px;
  cursor: default;
}

.env-config-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.env-inspect-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.env-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.tag-live {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.tag-dev {
  background: rgba(99, 102, 241, 0.15);
  color: #4f46e5;
}

.render-deploy-hint {
  background: rgba(30, 27, 75, 0.02);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
}

.render-deploy-hint strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.render-deploy-hint p {
  font-size: 13px;
  color: var(--text-secondary);
}

.accent-link {
  color: var(--brand-cyan);
  text-decoration: underline;
}

/* ==========================================================================
   MODALS & TOAST NOTIFICATION
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-backdrop[hidden] {
  display: none !important;
}

.modal-window {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 580px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: modalScale 0.2s ease-out;
}

.modal-window.modal-sm {
  max-width: 400px;
}

@keyframes modalScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 700;
}

.modal-close-btn {
  font-size: 16px;
  color: var(--text-muted);
}

.modal-close-btn:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
}

.pd-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.pd-content-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.pd-media-row {
  margin-top: 12px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.toast-popup {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e293b;
  border: 1px solid var(--brand-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  color: white;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  z-index: 1000;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: all 0.25s ease;
}

.toast-popup.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Empty states */
.empty-state-box {
  padding: 36px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.empty-icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.empty-state-box strong {
  font-size: 15px;
  color: var(--text-primary);
}

.empty-state-box p {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 320px;
}

.empty-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS (MOBILE & TABLET EXCELLENCE)
   ========================================================================== */

@media (max-width: 1080px) {
  .pricing-plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .composer-split-layout {
    grid-template-columns: 1fr;
  }
  .dashboard-split-2col {
    grid-template-columns: 1fr;
  }
  .auth-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  /* Prevent mobile zooming on input focus */
  input, textarea, select {
    font-size: 16px;
  }

  .app-shell {
    grid-template-columns: 1fr;
    position: relative;
  }

  /* Mobile Top Bar */
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .mobile-menu-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 27, 75, 0.05);
    color: var(--text-primary);
  }

  .mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 45;
  }

  /* Sliding Drawer Sidebar */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    height: 100vh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.8);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Mobile Bottom Navigation Bar */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    z-index: 25;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mb-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.15s ease;
  }

  .mb-nav-item.active {
    color: var(--brand-primary);
  }

  .mb-icon {
    font-size: 16px;
    line-height: 1;
  }

  /* Content area adjustments */
  .views-wrapper {
    padding: 16px 16px 84px; /* Extra bottom padding for bottom nav */
  }

  .topbar {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    position: relative;
  }

  .topbar-actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    justify-content: flex-start;
  }

  /* Auth / Landing page mobile adjustments */
  .auth-layout {
    padding: 24px 16px;
  }

  .auth-feature-grid {
    grid-template-columns: 1fr;
  }

  .qs-steps-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .kpi-card {
    padding: 14px 12px;
  }

  .kpi-value {
    font-size: 20px;
  }

  .form-row-2col {
    grid-template-columns: 1fr;
  }

  /* Calendar Mobile Optimization */
  .calendar-wrapper-card {
    padding: 14px;
  }

  .calendar-header-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .calendar-nav-controls {
    justify-content: space-between;
  }

  .calendar-month-title {
    font-size: 15px;
    min-width: unset;
  }

  .calendar-day-cell {
    min-height: 52px;
    padding: 4px;
    gap: 2px;
  }

  .day-number {
    font-size: 10px;
  }

  .cal-post-chip {
    padding: 1px 3px;
    font-size: 8px;
  }

  .scheduled-queue-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Analytics chart on mobile */
  .chart-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Inbox on mobile */
  .inbox-filter-bar {
    width: 100%;
  }

  .filter-select {
    flex: 1;
  }

  .reply-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-ai-suggest-reply {
    text-align: center;
  }

  .pricing-plans-grid {
    grid-template-columns: 1fr;
  }

  .env-config-cards-grid {
    grid-template-columns: 1fr;
  }

  .best-times-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .account-select-pill {
    max-width: 100%;
  }

  .pill-handle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
  }

  .env-status-pill {
    width: 100%;
    justify-content: center;
  }
}
/* ==========================================================================
   IN-APP CONNECT CHANNELS (picker modal + standalone consent/result page)
   ========================================================================== */

/* Utilities used by the connect modal and connect-auth page.
   Origin's stylesheet uses .muted-text / .btn-* / .modal-actions-row, so these
   plain helpers are exclusive to the connect feature and safe to define. */
.muted {
  color: var(--text-secondary);
  font-size: 13px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s ease-in-out;
}

.primary {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

.primary:hover {
  background: var(--brand-primary-hover);
}

.secondary {
  background: var(--bg-surface-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}

.secondary:hover {
  background: rgba(30, 27, 75, 0.1);
  border-color: var(--border-hover);
}

/* Connect Channels picker modal card */
.confirm-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 22px;
  width: 100%;
  max-width: 580px;
  animation: modalScale 0.2s ease-out;
}

.confirm-modal h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 6px 0;
}

.connect-modal {
  max-width: min(620px, 100%);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.connect-modal .connect-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  padding-right: 6px;
}

.connect-modal .modal-actions {
  flex-shrink: 0;
  padding-top: 14px;
  background: var(--bg-surface);
}

.connect-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.connect-row {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
  background: var(--bg-card);
}

.connect-row strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.connect-row small {
  color: var(--text-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.connect-row .secondary,
.connect-row .secondary.mini {
  width: 100%;
  padding: 6px 10px;
  font-size: 11px;
}

.connect-row mark {
  width: 100%;
  background: var(--brand-emerald-glow);
  color: var(--brand-emerald);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}

.connect-hint {
  grid-column: 1 / -1;
  margin: -4px 0 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(99, 102, 241, 0.08);
  border: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-secondary);
  text-align: left;
}

.connect-workspace-choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
}

.inline-form-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.inline-form-row input {
  flex: 1;
  min-width: 0;
}

/* Standalone channel authorization page (connect-auth.html) */
.connect-auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg-main);
}

.connect-auth {
  width: min(460px, 100%);
}

.connect-auth-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.connect-auth label {
  display: block;
  margin: 16px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.connect-auth label input {
  margin-top: 6px;
}

.connect-auth label small {
  display: block;
  margin-top: 6px;
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
}

.connect-scopes {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 13px;
}

.connect-auth-actions {
  margin-top: 20px;
}

.connect-auth-actions .secondary,
.connect-auth-actions .primary {
  flex: 1;
}

/* ==========================================================================
   PLATFORM-BRANDED CONSENT SCREEN (connect-auth)
   ========================================================================== */
.pauth-card {
  position: relative;
  overflow: hidden;
}

.pauth-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand-primary);
}

.pauth-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.pauth-head .connect-auth-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.pauth-head h2 {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.pauth-sub {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 3px;
}

.pauth-scopes-title {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  margin: 16px 0 4px;
}

.pauth-allow {
  border: none;
}

.pauth-deny {
  text-align: center;
}

/* ==========================================================================
   FULL PRICING PAGE (Settings view) — software dark theme
   ========================================================================== */
.pf-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 6px;
}

.pf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.pf-head-main {
  max-width: 640px;
}

.pf-title {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
}

.pf-lead {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.pf-head-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.pf-toggle {
  display: flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}

.pf-tog {
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
}

.pf-tog.active {
  background: var(--brand-primary);
  color: #ffffff;
}

.pf-cycle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pf-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.pf-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-card.pf-popular {
  background: var(--bg-surface-elevated);
  border-color: var(--border-active);
  box-shadow: var(--shadow-glow);
}

.pf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pf-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.pf-pop {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  background: var(--brand-amber);
  color: #1a1206;
  border-radius: 999px;
  padding: 4px 10px;
}

.pf-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.pf-price {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
}

.pf-per {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}

.pf-sub {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
}

.pf-div {
  height: 1px;
  background: var(--border);
}

.pf-feats {
  font-size: 13px;
  line-height: 2;
  color: var(--text-secondary);
}

.pf-btn {
  margin-top: auto;
  height: 42px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-md);
}

.pf-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.pf-btn.primary {
  color: #ffffff;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.pf-btn.primary:hover {
  background: var(--brand-primary-hover);
  color: #ffffff;
}

.pf-btn.is-current,
.pf-btn.is-current:hover {
  color: var(--brand-emerald);
  border-color: var(--brand-emerald);
  background: rgba(16, 185, 129, 0.08);
  cursor: default;
}

.pf-table {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px 20px 14px;
  overflow-x: auto;
}

.pf-table-inner {
  min-width: 760px;
}

.pf-row {
  display: flex;
  align-items: center;
  min-height: 42px;
  border-radius: var(--radius-sm);
}

.pf-row.alt {
  background: rgba(30, 27, 75, 0.03);
}

.pf-row-head {
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.pf-label {
  width: 320px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-primary);
  padding-left: 8px;
}

.pf-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pf-val {
  flex-grow: 1;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.pf-val-h {
  font-weight: 700;
  color: var(--text-primary);
}

.pf-mut {
  color: var(--text-muted);
}

.pf-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pf-note {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
}

.pf-note b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.pf-note span {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.pf-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
}

.pf-faq > div > b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.pf-faq > div > span {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

@media (max-width: 1200px) {
  .pf-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .pf-title {
    font-size: 26px;
  }

  .pf-cards,
  .pf-notes,
  .pf-faq {
    grid-template-columns: 1fr;
  }

  .pf-label {
    width: 190px;
  }
}

/* ==========================================================================
   CONNECT COMPLETE POPUP PAGE (bundle.social OAuth handoff tab)
   ========================================================================== */
.connect-complete-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 45%),
    var(--bg-main);
}

.connect-complete-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.connect-complete-card h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}

.connect-complete-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.cc-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--brand-primary);
  animation: ccSpin 0.9s linear infinite;
}

@keyframes ccSpin {
  to {
    transform: rotate(360deg);
  }
}

.cc-check {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: var(--brand-emerald);
  font-size: 26px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-back {
  display: inline-block;
  margin-top: 6px;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

/* ==========================================================================
   ONBOARDING WIZARD (Welcome / Know-you-better / Create workspace / Final)
   Deliberately light/elegant (Publer-style) — scoped to these pages only,
   independent of the app's dark --bg-main/--text-primary tokens.
   ========================================================================== */
.onboard-shell {
  --ob-bg: #f7f5f0;
  --ob-card: #ffffff;
  --ob-border: #15171c;
  --ob-text: #15171c;
  --ob-text-secondary: #4a4f5b;
  --ob-text-muted: #6b6257;
  --ob-accent: #4b34e8;
  --ob-accent-teal: #0e8a5f;
  --ob-shadow: 4px 4px 0 #15171c;
  --ob-font-display: 'Bricolage Grotesque', Georgia, serif;

  /* Also re-point the app's shared tokens (same idiom as .shell-playful on
     the dashboard) so components here that reference --border/--bg-card/etc
     directly, instead of the --ob-* aliases above, still pick up the same
     playful look instead of the default SaaS palette. */
  --bg-main: var(--ob-bg);
  --bg-surface: var(--ob-card);
  --bg-card: var(--ob-card);
  --border: var(--ob-border);
  --border-hover: var(--ob-accent);
  --text-primary: var(--ob-text);
  --text-secondary: var(--ob-text-secondary);
  --text-muted: var(--ob-text-muted);
  --brand-primary: var(--ob-accent);
  --brand-primary-hover: #3a26bd;
  --brand-emerald: var(--ob-accent-teal);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;

  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 20px;
  background-color: var(--ob-bg);
  background-image: radial-gradient(#e4e0d8 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--ob-text);
  font-family: 'Manrope', system-ui, sans-serif;
}

.onboard-shell input,
.onboard-shell select,
.onboard-shell textarea,
.onboard-shell button {
  font-family: 'Manrope', system-ui, sans-serif;
}

.onboard-steps-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
}

.onboard-shell {
  padding-top: 112px;
}

.onboard-steps-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ob-font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.onboard-steps-logo-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ob-accent) 50%, var(--cp-orange, #f2622e) 50%);
  display: inline-block;
}

.onboard-steps-track {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
  justify-content: center;
}

.onboard-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 5px;
  border-radius: 999px;
  border: 2px solid var(--ob-border);
  background: #ffffff;
  font-weight: 800;
  font-size: 13px;
  color: var(--ob-text);
}

.onboard-step-pill.active {
  background: var(--cp-yellow, #ffe58f);
}

.onboard-step-num {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #ffffff;
  border: 1.5px solid var(--ob-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.onboard-step-pill.active .onboard-step-num {
  background: var(--ob-border);
  color: #ffffff;
}

.onboard-step-pill.done .onboard-step-num {
  background: var(--ob-accent-teal);
  color: #ffffff;
  font-size: 0;
}

.onboard-step-pill.done .onboard-step-num::before {
  content: '✓';
  font-size: 12px;
}

.onboard-step-line {
  width: 28px;
  height: 2px;
  background: var(--ob-border);
}

.onboard-step-badge {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cp-purple, #cfc5fb);
  border: 1.5px solid var(--ob-border);
  transform: rotate(-2deg);
}

.onboard-step-badge-mint {
  background: var(--cp-mint, #a8e6c9);
}

.onboard-step-badge-peach {
  background: var(--cp-peach, #ffcdb4);
}

.onboard-stickers-row {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.onboard-sticker {
  padding: 10px 14px;
  border-radius: 20px;
  border: 2px solid var(--ob-border);
  box-shadow: 3px 3px 0 var(--ob-border);
  font-weight: 800;
  font-size: 12px;
}

.onboard-sticker-yellow {
  background: var(--cp-yellow, #ffe58f);
  transform: rotate(-2deg);
}

.onboard-sticker-mint {
  background: var(--cp-mint, #a8e6c9);
  transform: rotate(1.5deg);
}

.onboard-skip-setup-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--ob-text-secondary);
  text-decoration: none;
  z-index: 5;
  white-space: nowrap;
}

.onboard-skip-setup-link:hover {
  color: var(--ob-text);
  text-decoration: underline;
}

.onboard-role-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.onboard-role-fieldset legend {
  font-size: 13px;
  font-weight: 700;
  padding: 0;
  margin-bottom: 4px;
}

.onboard-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.onboard-role-pill {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 22px;
  border: 2px solid var(--ob-border);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
}

.onboard-role-pill:has(input:checked) {
  background: var(--cp-peach, #ffcdb4);
  box-shadow: 4px 4px 0 var(--ob-accent);
}

.onboard-role-pill-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
}

.onboard-role-pill-head input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.onboard-role-pill-desc {
  font-size: 11px;
  font-weight: 600;
  color: var(--ob-text-secondary);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .onboard-role-grid {
    grid-template-columns: 1fr;
  }
}

.onboard-shell input,
.onboard-shell select,
.onboard-shell textarea {
  background: #ffffff;
  border: 1.5px solid var(--ob-border);
  border-radius: 999px;
  color: var(--ob-text);
  font-weight: 600;
  height: 46px;
  box-sizing: border-box;
  padding: 0 16px;
}

.onboard-shell textarea {
  border-radius: 18px;
  height: auto;
  padding: 12px 16px;
}

.onboard-shell input:focus,
.onboard-shell select:focus,
.onboard-shell textarea:focus {
  border-color: var(--ob-accent);
  box-shadow: 0 0 0 3px rgba(75, 52, 232, 0.15);
  outline: none;
}

.onboard-wrap {
  width: 100%;
  max-width: 480px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Steps 1-3 (workspace/connect/assistant) use the mockup's real two-column
   layout: a fixed-width text/branding column on the left, a separate white
   card panel on the right — not one centered stack. */
.onboard-wrap-split {
  max-width: 1120px;
  text-align: left;
  align-items: stretch;
}

.onboard-columns {
  display: flex;
  gap: 40px;
  width: 100%;
  align-items: flex-start;
}

.onboard-info-col {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
  text-align: left;
}

.onboard-info-col h1 {
  text-align: left;
}

.onboard-info-col > p {
  font-size: 15px;
  color: var(--ob-text-secondary);
  line-height: 1.6;
  text-align: left;
  margin: 0;
  max-width: none;
}

.onboard-panel-split {
  flex-grow: 1;
  min-width: 0;
  min-height: 440px;
  display: flex;
  flex-direction: column;
}

.onboard-panel-spacer {
  flex-grow: 1;
}

.onboard-actions-end {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

.onboard-actions-end button {
  flex: none;
}

@media (max-width: 900px) {
  .onboard-columns {
    flex-direction: column;
  }
  .onboard-info-col {
    width: 100%;
  }
}

.onboard-icon-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cp-yellow, #ffe58f);
  border: 2px solid var(--ob-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 12px;
  box-shadow: var(--ob-shadow);
}

.onboard-wrap h1 {
  font-family: var(--ob-font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ob-text);
}

.onboard-wrap > p {
  font-size: 14px;
  color: var(--ob-text-secondary);
  line-height: 1.6;
  max-width: 400px;
  margin-bottom: 8px;
}

.onboard-panel {
  width: 100%;
  background: var(--ob-card);
  border: 2px solid var(--ob-border);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 8px 8px 0 var(--ob-border);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.onboard-panel .form-label span {
  color: var(--ob-text);
  font-weight: 600;
}

.onboard-client-link-callout {
  width: 100%;
  box-sizing: border-box;
  background: var(--cp-yellow, #ffe58f);
  border: 2px solid var(--ob-border);
  border-radius: 22px;
  box-shadow: 4px 4px 0 var(--ob-border);
  transform: rotate(-1.2deg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.onboard-client-link-callout strong {
  font-size: 15px;
}

.onboard-client-link-callout span {
  font-size: 13px;
  color: var(--ob-text-secondary);
}

.onboard-client-link-callout button {
  align-self: flex-start;
  margin-top: 4px;
  background: var(--ob-border) !important;
  color: #ffffff !important;
  border-color: var(--ob-border) !important;
}

#clientLinkResult {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

#clientLinkResult input {
  flex-grow: 1;
  min-width: 0;
}

.onboard-panel-header-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 800;
  font-size: 15px;
}

.onboard-connected-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--ob-accent-teal);
}

.onboard-knows-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.onboard-knows-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.onboard-knows-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--ob-border);
  color: var(--ob-text);
  text-decoration: none;
}

.onboard-knows-edit {
  background: #cfc5fb;
  cursor: pointer;
}

.onboard-actions {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.onboard-actions-split {
  max-width: none;
}

.onboard-back-link {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 800;
  font-size: 14px;
  color: var(--ob-text);
  cursor: pointer;
}

.onboard-back-link:hover {
  text-decoration: underline;
}

.onboard-shell .btn-primary-glow,
.onboard-shell .btn-secondary-sm {
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
  border: 2px solid var(--ob-border);
}

.onboard-actions button {
  flex: 1;
}

.onboard-shell .btn-primary-glow {
  background: var(--ob-accent);
  color: #ffffff;
  box-shadow: 4px 4px 0 var(--ob-border);
}

.onboard-shell .btn-primary-glow:hover {
  background: #3a26bd;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ob-border);
}

.onboard-shell .btn-secondary-sm {
  background: #ffffff;
  color: var(--ob-text-secondary);
}

.onboard-shell .btn-secondary-sm:hover {
  background: #efe7da;
  color: var(--ob-text);
}

.onboard-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
}

.onboard-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e4e0d8;
  border: 1.5px solid var(--ob-border);
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.onboard-dot.active {
  width: 20px;
  border-radius: 4px;
  background: var(--ob-accent);
}

.onboard-dot.done {
  background: var(--ob-accent-teal);
}

.onboard-platform-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}

.onboard-platform-tile:hover:not(:disabled) {
  border-color: var(--brand-primary);
}

.onboard-platform-tile:disabled {
  cursor: default;
  opacity: 0.8;
}

.onboard-platform-tile.is-connected {
  border-color: var(--brand-emerald);
}

.onboard-platform-more-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid var(--text-primary);
  background: #F7F5F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #15171C;
}

.onboard-platform-tile small {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.onboard-draft-panel {
  background: var(--cp-purple, #cfc5fb) !important;
  gap: 14px;
}

.onboard-draft-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboard-draft-panel-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid var(--ob-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.onboard-draft-panel-title {
  font-family: var(--ob-font-display);
  font-weight: 800;
  font-size: 20px;
}

.onboard-draft-panel-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onboard-draft-panel-body > #draftWeekBtn {
  align-self: flex-start;
}

.onboard-draft-bubble {
  align-self: flex-start;
  max-width: 90%;
  background: #ffffff;
  border: 2px solid var(--ob-border);
  border-radius: 18px 18px 18px 4px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.onboard-draft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.onboard-draft-card {
  background: #ffffff;
  border: 2px solid var(--ob-border);
  border-radius: 18px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onboard-draft-thumb {
  position: relative;
  height: 90px;
  border-radius: 12px;
  border: 1.5px solid var(--ob-border);
  display: block;
}

.onboard-draft-thumb-peach {
  background: var(--cp-peach, #ffcdb4);
}

.onboard-draft-thumb-yellow {
  background: var(--cp-yellow, #ffe58f);
}

.onboard-draft-thumb-mint {
  background: var(--cp-mint, #a8e6c9);
}

.onboard-draft-thumb-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--ob-border);
}

.onboard-draft-card strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.onboard-draft-card p {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ob-text-secondary);
}

.onboard-draft-disclaimer {
  align-self: flex-end;
  font-size: 11px;
  font-weight: 700;
  margin: 0;
}

@media (max-width: 700px) {
  .onboard-draft-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PRODUCT TOUR (Spotlight walkthrough)
   ========================================================================== */
.tour-highlight {
  position: relative;
  z-index: 1201;
  outline: 3px solid var(--brand-emerald);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.18), 0 0 24px rgba(16, 185, 129, 0.4);
  transition: outline-color 0.2s ease;
}

.tour-tooltip {
  position: fixed;
  z-index: 1202;
  width: 300px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(0, 0, 0, 0.5));
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: tourPop 0.18s ease;
}

@keyframes tourPop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.tour-tooltip-close {
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.tour-tooltip-close:hover {
  color: var(--text-primary);
}

.tour-tooltip p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.tour-tooltip p strong {
  color: var(--text-primary);
}

.tour-tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tour-tooltip-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.tour-progress-track {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.tour-progress-fill {
  height: 100%;
  background: var(--brand-emerald);
  transition: width 0.2s ease;
}

.tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: transparent;
}

/* Post Details Modal & Live Verification */
.post-detail-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pd-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}

.pd-content-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.pd-media-gallery {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.pd-media-thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
  transition: transform 0.15s ease;
}

.pd-media-thumb:hover {
  transform: scale(1.05);
  border-color: var(--brand-primary);
}

.pd-live-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-sm);
}

.pd-live-banner-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pd-live-banner-content strong {
  color: #10b981;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pd-live-banner-content a {
  color: #38bdf8;
  font-size: 12px;
  text-decoration: underline;
  word-break: break-all;
}

.pd-channel-verify-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.pd-channel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(30, 27, 75, 0.05);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pd-channel-btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}


.cc-back:hover {
  background: var(--brand-primary-hover);
  color: #ffffff;
}

/* Rotating Sync Button Animation */
@keyframes syncRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-icon,
#syncBtn.is-syncing svg,
.btn-ghost-icon.is-syncing svg {
  animation: syncRotate 0.75s linear infinite !important;
  transform-origin: center;
}

/* Draft Status Badges */
.status-chip.draft {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-secondary);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-secondary);
  border: 1px solid rgba(148, 163, 184, 0.3);
  margin-left: 8px;
}


/* Publer-style automation, link, and media feature panels */
.publer-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.publer-tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  min-width: 0;
}

.publer-tool-card h4 {
  font-size: 14px;
  margin-bottom: 10px;
}

.publer-list {
  display: grid;
  gap: 10px;
}

.publer-list > div,
.publer-folder-grid > div {
  display: grid;
  gap: 4px;
  background: rgba(30, 27, 75, 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  min-width: 0;
}

.publer-list strong,
.publer-folder-grid strong {
  font-size: 12px;
  color: var(--text-primary);
}

.publer-list span,
.publer-folder-grid span {
  color: var(--text-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.publer-evergreen-row,
.publer-folder-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.publer-folder-grid > div {
  min-width: 160px;
}

@media (max-width: 1100px) {
  .publer-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   MOUSE-TRACKING CURSOR ACCENT (decorative — native cursor stays visible)
   ========================================================================== */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--brand-primary);
}

.cursor-ring {
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-primary);
}

.cursor-dot.is-visible,
.cursor-ring.is-visible {
  opacity: 0.55;
}

.cursor-ring.is-active {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-color: var(--brand-cyan);
  opacity: 0.35;
  background: rgba(6, 182, 212, 0.06);
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

/* ==========================================================================
   WORKSPACE SWITCHER
   ========================================================================== */
.workspace-switcher {
  position: relative;
}

.sidebar-workspace-switcher {
  width: 100%;
  margin: 4px 0 2px;
}

.sidebar-workspace-switcher .workspace-switcher-btn {
  width: 100%;
  box-sizing: border-box;
}

.sidebar-workspace-switcher .ws-switcher-meta strong,
.sidebar-workspace-switcher .ws-switcher-meta small {
  max-width: 150px;
}

.sidebar-plan-pill {
  display: none;
}

.workspace-switcher-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.workspace-switcher-btn:hover {
  border-color: var(--border-hover);
}

.ws-switcher-badge {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.ws-switcher-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.ws-switcher-meta strong {
  font-size: 13px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-switcher-meta small {
  font-size: 10.5px;
  color: var(--text-muted);
}

.workspace-switcher-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 10px;
  z-index: 60;
}

.ws-switcher-search {
  margin-bottom: 8px;
}

.ws-switcher-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.ws-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-align: left;
  width: 100%;
}

.ws-switcher-item:hover {
  background: var(--bg-surface-elevated);
}

.ws-switcher-item-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  overflow: hidden;
}

.ws-switcher-item-meta strong {
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-switcher-item-meta small {
  font-size: 11px;
  color: var(--text-muted);
}

.ws-switcher-check {
  color: var(--brand-primary);
  flex-shrink: 0;
}

.ws-switcher-create {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 8px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 13px;
}

.ws-switcher-create:hover {
  background: var(--bg-surface-elevated);
}

.ws-switcher-create-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.ws-switcher-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ==========================================================================
   BULK CSV — IMPORTED QUEUE PREVIEW
   ========================================================================== */
.imported-queue-box {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.imported-queue-box input {
  margin: 8px 0 10px;
}

.imported-queue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.iq-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
}

.iq-row-text {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iq-row-meta {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.iq-empty {
  padding: 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
}

/* ==========================================================================
   BULK CSV — FORMAT EXAMPLE POPUP
   ========================================================================== */
.direct-paste-label-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.direct-paste-label-row .field-hint {
  min-width: 0;
  overflow-wrap: anywhere;
}

.csv-format-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.08);
  flex-shrink: 0;
}

.csv-format-info-btn:hover {
  background: rgba(99, 102, 241, 0.15);
}

.csv-format-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 360px;
  max-width: 90vw;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 14px;
  z-index: 40;
}

.csv-format-popup-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.csv-format-popup-row {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin-bottom: 6px;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--text-secondary);
}

.csv-format-popup-header {
  color: var(--brand-primary);
  font-weight: 700;
}

.csv-format-popup-list {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.csv-format-popup-list li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.csv-format-popup-list strong {
  color: var(--text-primary);
}

/* ==========================================================================
   ANALYTICS — PLATFORM-WISE KPI TILES
   ========================================================================== */
.kpi-grid-analytics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.kpi-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin-top: 8px;
}

.kpi-sparkline span {
  flex: 1;
  background: var(--brand-primary);
  opacity: 0.55;
  border-radius: 2px 2px 0 0;
  min-height: 3px;
}

/* ==========================================================================
   CALENDAR — "Playful" skin (scoped to .calendar-playful, i.e. the
   Content Calendar view only). Inspired by a neo-brutalist design
   reference: cream dotted backdrop, thick black borders, big radii,
   hard "sticker" offset shadows, bold display type, bright status
   colors. Layout/data logic is unchanged — only the visual skin.
   ========================================================================== */
.calendar-playful {
  --cp-ink: #15171c;
  --cp-bg: #f7f5f0;
  --cp-dot: #e4e0d8;
  --cp-card: #ffffff;
  --cp-muted: #4a4f5b;
  --cp-indigo: #4b34e8;
  --cp-orange: #f2622e;
  --cp-peach: #ffcdb4;
  --cp-purple: #cfc5fb;
  --cp-green: #0e8a5f;
  --cp-mint: #a8e6c9;
  --cp-yellow: #ffe58f;
  --cp-red: #c4321a;
  --cp-font-display: 'Bricolage Grotesque', Georgia, serif;
  --cp-font-body: 'Manrope', system-ui, sans-serif;
  --cp-font-mono: 'JetBrains Mono', monospace;
}

.calendar-playful .calendar-wrapper-card,
.calendar-playful .scheduled-queue-list-wrap {
  background-color: var(--cp-bg);
  background-image: radial-gradient(var(--cp-dot) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  border: 2px solid var(--cp-ink);
  border-radius: 26px;
  box-shadow: none;
}

.calendar-playful .card-panel.mt-6 {
  background-color: var(--cp-bg);
  background-image: radial-gradient(var(--cp-dot) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  border: 2px solid var(--cp-ink);
  border-radius: 26px;
}

.calendar-playful .calendar-month-title,
.calendar-playful h3 {
  font-family: var(--cp-font-display);
  color: var(--cp-ink);
  letter-spacing: -0.02em;
}

.calendar-playful .panel-subtitle {
  font-family: var(--cp-font-body);
  color: var(--cp-muted);
}

.calendar-playful .btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink);
  background: #ffffff;
  color: var(--cp-ink);
  font-size: 16px;
  font-weight: 800;
}

.calendar-playful .btn-icon:hover {
  background: #efe7da;
}

.calendar-playful #calTodayBtn {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink);
  background: #ffffff;
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
  font-weight: 700;
  font-size: 13px;
}

.calendar-playful #calTodayBtn:hover {
  background: #efe7da;
}

.calendar-playful .btn-primary-sm[data-nav-to="composer"] {
  border-radius: 999px;
  border: 2px solid var(--cp-ink);
  background: var(--cp-indigo);
  color: #ffffff;
  font-family: var(--cp-font-body);
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--cp-ink);
}

.calendar-playful .btn-primary-sm[data-nav-to="composer"]:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--cp-ink);
}

.calendar-playful .calendar-weekdays-header {
  border-bottom: none;
  font-family: var(--cp-font-mono);
  letter-spacing: 0.12em;
  color: var(--cp-muted);
  padding: 4px 0 10px;
}

.calendar-playful .calendar-days-grid {
  background: transparent;
  border: none;
  border-radius: 0;
  gap: 10px;
}

.calendar-playful .calendar-day-cell {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--cp-dot);
  border-radius: 18px;
  min-height: 112px;
}

.calendar-playful .calendar-day-cell.is-other-month {
  background: rgba(255, 255, 255, 0.25);
  border-color: var(--cp-dot);
  opacity: 0.6;
}

.calendar-playful .calendar-day-cell.is-today {
  background: #ffffff;
  border-color: var(--cp-ink);
}

.calendar-playful .day-number {
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--cp-ink);
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.calendar-playful .calendar-day-cell.is-today .day-number {
  background: var(--cp-indigo);
  color: #ffffff;
  min-width: 28px;
  height: 28px;
}

.calendar-playful .today-marker {
  font-family: var(--cp-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--cp-indigo);
  border-radius: 999px;
}

.calendar-playful .cal-post-chip {
  border-radius: 10px;
  border: 1.5px solid var(--cp-ink);
  background: #ffffff;
  padding: 4px 7px;
  font-family: var(--cp-font-body);
  font-weight: 700;
  gap: 5px;
}

.calendar-playful .chip-platform {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--cp-ink);
  background: var(--cp-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 800;
  color: var(--cp-ink);
}

.calendar-playful .cal-post-chip.published {
  background: #ffffff;
  border-color: var(--cp-ink);
  color: var(--cp-green);
}

.calendar-playful .cal-post-chip.scheduled {
  background: #ffffff;
  border-color: var(--cp-ink);
  color: var(--cp-indigo);
  box-shadow: 2px 2px 0 var(--cp-ink);
}

.calendar-playful .cal-post-chip.draft {
  background: #efe7da;
  border-style: dashed;
  border-color: var(--cp-ink);
  color: var(--cp-muted);
}

.calendar-playful .cal-post-chip.pending_approval {
  background: #ffffff;
  border-color: var(--cp-ink);
  color: var(--cp-orange);
  box-shadow: 2px 2px 0 var(--cp-orange);
}

.calendar-playful .cal-post-chip.failed {
  background: #ffffff;
  border-color: var(--cp-red);
  color: var(--cp-red);
  box-shadow: 2px 2px 0 var(--cp-red);
}

.calendar-playful .cal-day-add-btn {
  margin-top: auto;
  height: 22px;
  border: 1.5px dashed var(--cp-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
  font-size: 10px;
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.calendar-playful .calendar-day-cell:hover .cal-day-add-btn {
  opacity: 1;
}

.calendar-playful .cal-day-add-btn:hover {
  background: var(--cp-peach);
}

/* ==========================================================================
   APP SHELL — "Playful" skin, global.
   Scoped to .shell-playful (added to .app-shell), so it reaches every
   screen at once: sidebar, topbar and the shared buttons/pills/cards
   every view is built from. This reuses the design tokens established by
   the Calendar "playful" pass above and works the same way — redefine the
   existing --bg / --text / --border / --radius custom properties inside
   the scope so every component that already reads them (kpi-card,
   card-panel, buttons, chips, etc.) repaints automatically, no per-view
   rewrite required. Deeper per-screen layouts get their own treatment
   later (Calendar is already done); this pass covers chrome + Home.
   ========================================================================== */
.shell-playful {
  --cp-ink: #15171c;
  --cp-bg: #f7f5f0;
  --cp-dot: #e4e0d8;
  --cp-card: #ffffff;
  --cp-muted: #4a4f5b;
  --cp-indigo: #4b34e8;
  --cp-orange: #f2622e;
  --cp-peach: #ffcdb4;
  --cp-purple: #cfc5fb;
  --cp-green: #0e8a5f;
  --cp-mint: #a8e6c9;
  --cp-yellow: #ffe58f;
  --cp-red: #c4321a;
  --cp-font-display: 'Bricolage Grotesque', Georgia, serif;
  --cp-font-body: 'Manrope', system-ui, sans-serif;
  --cp-font-mono: 'JetBrains Mono', monospace;

  /* Re-point the app's own design tokens at the playful palette so every
     existing component (buttons, cards, pills) repaints without needing
     its own override rule. */
  --bg-main: var(--cp-bg);
  --bg-surface: var(--cp-card);
  --bg-surface-elevated: #efe7da;
  --bg-card: var(--cp-card);
  --bg-input: #ffffff;

  --border: var(--cp-ink);
  --border-hover: var(--cp-ink);

  --text-primary: var(--cp-ink);
  --text-secondary: var(--cp-muted);
  --text-muted: #6b6257;

  --brand-primary: var(--cp-indigo);
  --brand-primary-hover: #3a26bd;
  --brand-emerald: var(--cp-green);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(21, 23, 28, 0.05);
  --shadow-md: 0 4px 14px rgba(21, 23, 28, 0.08);

  font-family: var(--cp-font-body);
  background: var(--cp-bg) radial-gradient(var(--cp-dot) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

/* Generic rounded control used across the playful-skin mockups (mockups
   consistently mark these buttons "pill") — one real definition every
   screen can reuse instead of inventing its own near-duplicate. */
.shell-playful .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink);
  background: #ffffff;
  color: var(--cp-ink);
  font-weight: 800;
  font-size: 12px;
  font-family: var(--cp-font-body);
  cursor: pointer;
}

.shell-playful .pill:hover {
  box-shadow: 2px 2px 0 var(--cp-ink);
}

.shell-playful .pill.is-active {
  background: var(--cp-ink);
  color: #ffffff;
}

.shell-playful h1,
.shell-playful h2,
.shell-playful h3,
.shell-playful h4,
.shell-playful .view-title,
.shell-playful .brand-title {
  font-family: var(--cp-font-display);
  letter-spacing: -0.02em;
}

/* Thicken borders on the main containers — --border only carries color,
   width still needs bumping to get the "outlined" neo-brutalist feel. */
.shell-playful .card-panel,
.shell-playful .kpi-card,
.shell-playful .sidebar,
.shell-playful .topbar,
.shell-playful .account-card-chip,
.shell-playful .stream-post-item,
.shell-playful .platform-capability-card,
.shell-playful .workspace-switcher-btn,
.shell-playful .env-status-pill {
  border-width: 2px;
  border-style: solid;
  box-shadow: none;
}

/* ---- Sidebar ---- */
.shell-playful .sidebar {
  background: #ffffff;
  border-color: var(--cp-ink);
  margin: 14px 0 14px 14px;
  border-radius: var(--radius-lg);
  height: calc(100vh - 28px);
}

.shell-playful .sidebar-brand {
  border-bottom: none;
  padding: 16px 14px 8px;
}

.shell-playful .brand-mark-cube {
  background: none;
  border-radius: 0;
}

.shell-playful .plan-pill {
  border-radius: 999px;
  border: 1.5px solid var(--cp-ink);
  font-family: var(--cp-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.shell-playful .sidebar-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin: 4px 14px 6px;
  border-radius: 999px;
  background: var(--cp-indigo);
  border: 2px solid var(--cp-ink);
  box-shadow: 3px 3px 0 var(--cp-ink);
  color: #ffffff;
  font-family: var(--cp-font-body);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.shell-playful .sidebar-cta-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--cp-ink);
}

.shell-playful .side-nav {
  padding: 6px 12px 14px;
  gap: 2px;
}

.shell-playful .nav-item {
  border-radius: 999px;
  font-family: var(--cp-font-body);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 10px;
  gap: 10px;
}

.shell-playful .nav-item:hover {
  background: #efe7da;
  color: var(--cp-ink);
}

.shell-playful .nav-item.active {
  background: var(--cp-ink);
  color: #ffffff;
  border-left: none;
}

.shell-playful .nav-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--cp-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.shell-playful .nav-item:nth-child(1) .nav-icon { background: var(--cp-purple); }
.shell-playful .nav-item:nth-child(2) .nav-icon { background: var(--cp-peach); }
.shell-playful .nav-item:nth-child(3) .nav-icon { background: var(--cp-mint); }
.shell-playful .nav-item:nth-child(4) .nav-icon { background: var(--cp-peach); }
.shell-playful .nav-item:nth-child(5) .nav-icon { background: var(--cp-mint); }
.shell-playful .nav-item:nth-child(6) .nav-icon { background: #efe7da; }
.shell-playful .nav-item:nth-child(7) .nav-icon { background: var(--cp-yellow); }
.shell-playful .nav-item:nth-child(8) .nav-icon { background: #efe7da; }
.shell-playful .nav-item.active .nav-icon { background: #ffffff; }

.shell-playful .nav-badge {
  background: var(--cp-orange);
  border: 1.5px solid var(--cp-ink);
  border-radius: 999px;
  font-family: var(--cp-font-mono);
}

.shell-playful .sidebar-footer {
  background: transparent;
  border-top: 1.5px dashed var(--cp-dot);
  padding: 12px 14px 14px;
}

.shell-playful .ai-quota-widget {
  border: 1.5px solid var(--cp-ink);
  border-radius: var(--radius-sm);
  background: #fbf9f4;
}

.shell-playful .quota-title {
  font-family: var(--cp-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}

.shell-playful .quota-count {
  color: var(--cp-indigo);
}

.shell-playful .progress-track {
  height: 10px;
  background: #efe7da;
  border: 1.5px solid var(--cp-ink);
}

.shell-playful .progress-fill {
  background: var(--cp-indigo);
}

.shell-playful .user-avatar {
  background: var(--cp-yellow);
  color: var(--cp-ink);
  border: 1.5px solid var(--cp-ink);
  font-weight: 800;
}

/* ---- Topbar ---- */
.shell-playful .topbar {
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  padding: 18px 24px 10px;
}

.shell-playful .breadcrumb-text {
  font-family: var(--cp-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}

.shell-playful .sidebar-collapse-toggle {
  border-radius: 999px;
  border: 1.5px dashed var(--cp-dot);
}

.shell-playful .workspace-switcher-btn {
  border-radius: 999px;
  border-color: var(--cp-ink);
  background: var(--cp-peach);
}

.shell-playful .ws-switcher-badge {
  border-radius: 999px;
  background: #ffffff;
  color: var(--cp-ink);
  border: 1.5px solid var(--cp-ink);
}

.shell-playful .env-status-pill {
  border-radius: 999px;
  border-color: var(--cp-ink);
  background: #ffffff;
  font-family: var(--cp-font-mono);
}

/* ---- Shared buttons/pills (used across every view) ---- */
.shell-playful .btn-primary-sm,
.shell-playful .btn-primary-xs,
.shell-playful .btn-primary-glow {
  background: var(--cp-indigo);
  border: 2px solid var(--cp-ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--cp-ink);
  font-family: var(--cp-font-body);
  font-weight: 800;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.shell-playful .btn-primary-sm:hover,
.shell-playful .btn-primary-xs:hover,
.shell-playful .btn-primary-glow:hover {
  background: var(--cp-indigo);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--cp-ink);
}

.shell-playful .btn-secondary-sm,
.shell-playful .btn-secondary-xs,
.shell-playful .btn-ghost-icon,
.shell-playful .btn-approval-sm {
  background: #ffffff;
  border: 2px solid var(--cp-ink);
  border-radius: 999px;
  font-family: var(--cp-font-body);
  font-weight: 700;
}

.shell-playful .btn-approval-sm {
  background: #a8e6c9;
}

.shell-playful .btn-approval-sm:hover {
  background: #93dab9;
}

.shell-playful .btn-secondary-sm:hover,
.shell-playful .btn-secondary-xs:hover,
.shell-playful .btn-ghost-icon:hover {
  background: #efe7da;
  border-color: var(--cp-ink);
}

.shell-playful .badge-tag {
  border: 1.5px solid var(--cp-ink);
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--cp-font-mono);
}

.shell-playful .status-chip {
  border-radius: 999px;
  font-family: var(--cp-font-mono);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   HOME / OVERVIEW — "Playful" skin (scoped to .home-playful, the
   Overview view only). Same approach as Calendar: layout/data logic is
   untouched (same #statsGrid, #accountsList, #overviewPostsList,
   #platformList render functions), only the visual skin changes —
   sticker-style KPI cards on a dotted canvas, bordered account chips,
   post stream rows and platform cards matching the design reference.
   ========================================================================== */
.home-playful {
  padding-bottom: 12px;
}

.home-playful .kpi-grid {
  gap: 16px;
}

.home-playful .kpi-card {
  border-radius: var(--radius-md);
  padding: 16px 16px 14px;
  gap: 8px;
  transform: rotate(-1deg);
}

.home-playful .kpi-card:nth-child(4n+1) { background: var(--cp-peach); }
.home-playful .kpi-card:nth-child(4n+2) { background: var(--cp-yellow); transform: rotate(1deg); }
.home-playful .kpi-card:nth-child(4n+3) { background: var(--cp-purple); transform: rotate(-0.8deg); }
.home-playful .kpi-card:nth-child(4n+4) { background: var(--cp-mint); transform: rotate(1.3deg); }

.home-playful .kpi-card:hover {
  transform: translate(-1px, -1px) rotate(0deg) !important;
  box-shadow: 5px 5px 0 var(--cp-ink);
}

.home-playful .kpi-card.has-alert {
  background: #ffffff !important;
  border-style: dashed;
  border-color: var(--cp-orange);
}

.home-playful .kpi-card-top {
  align-items: flex-start;
}

.home-playful .kpi-label {
  font-family: var(--cp-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #ffffff;
  border: 1.5px solid var(--cp-ink);
  border-radius: 999px;
  padding: 4px 9px;
  order: 2;
}

.home-playful .kpi-icon {
  order: 1;
  font-size: 26px;
}

.home-playful .kpi-value {
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.03em;
  color: var(--cp-ink);
}

.home-playful .kpi-trend {
  font-size: 12px;
  font-weight: 600;
  color: var(--cp-muted);
}

.home-playful .dashboard-split-2col,
.home-playful .card-panel.mt-6 {
  margin-top: 20px;
}

.home-playful .card-panel {
  border-radius: var(--radius-lg);
}

.home-playful .account-card-chip {
  border-radius: 999px;
  padding: 8px 10px;
}

.home-playful .acc-badge-icon {
  border-radius: 999px;
  border: 1.5px solid var(--cp-ink);
  background: var(--cp-purple);
  color: var(--cp-ink);
  font-weight: 800;
}

.home-playful .stream-post-item {
  border-radius: var(--radius-md);
}

.home-playful .stream-post-item:hover {
  background: #fbf9f4;
  border-color: var(--cp-ink);
}

.home-playful .platform-capability-card {
  border-radius: var(--radius-md);
}

.home-playful .platform-capability-card.is-connected {
  background: #ffffff;
  border-color: var(--cp-green);
}

.home-playful .status-connected-pill {
  background: var(--cp-mint);
  color: var(--cp-ink);
  border: 1.5px solid var(--cp-ink);
  border-radius: 999px;
}

.home-playful .cap-tag {
  border-radius: 999px;
  font-family: var(--cp-font-mono);
}

.home-playful .cap-tag.yes {
  background: var(--cp-mint);
  color: #0e5c3f;
}

/* ==========================================================================
   ACCOUNTS — "Playful" skin (scoped to .accounts-playful, the Accounts
   view only). Matches screens/Accounts.html from the design pack: accounts
   grouped by platform, a dashed "connect more" grid, and a right rail with
   client-connect / permissions / workspace info cards.
   ========================================================================== */
.accounts-page-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.accounts-main-col {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accounts-side-col {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 960px) {
  .accounts-page-grid {
    flex-direction: column;
  }
  .accounts-side-col {
    width: 100%;
  }
}

.accounts-grouped-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accounts-group-card {
  background: var(--cp-card);
  border: 2px solid var(--cp-ink);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accounts-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.accounts-group-badge {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
}

.accounts-group-name {
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 19px;
  flex-grow: 1;
}

.accounts-group-add {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 800;
  color: #2f1fa8;
  cursor: pointer;
  padding: 0;
  font-family: var(--cp-font-body);
}

.accounts-group-add:hover {
  text-decoration: underline;
}

.accounts-account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 16px;
  background: #faf9f6;
  border: 1.5px solid var(--cp-ink);
  flex-wrap: wrap;
}

.accounts-account-row > * {
  min-width: 0;
}

.accounts-account-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid var(--cp-ink);
  flex-shrink: 0;
}

.accounts-account-meta {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.accounts-account-meta strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--cp-ink);
}

.accounts-account-meta small {
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-muted);
}

.accounts-status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f6ee;
  color: #0b6e4b;
  border: 1.5px solid #0b6e4b;
  white-space: nowrap;
}

.accounts-status-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #0b6e4b;
}

.accounts-more-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink);
  background: #ffffff;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.accounts-more-btn:hover {
  background: #efe7da;
}

.accounts-connect-more-card {
  background: var(--cp-card);
  border: 2px dashed var(--cp-ink);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mono-label {
  font-family: var(--cp-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-muted);
}

.accounts-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
}

.accounts-plat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 16px;
  border: 2px solid var(--cp-ink);
  background: #ffffff;
  font: 800 11px var(--cp-font-body);
  cursor: pointer;
  color: var(--cp-ink);
}

.accounts-plat-btn:hover {
  background: var(--cp-yellow);
}

.accounts-plat-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid var(--cp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
}

.accounts-all-connected {
  grid-column: 1 / -1;
  margin: 0;
}

.accounts-side-card {
  background: var(--cp-card);
  border: 2px solid var(--cp-ink);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accounts-side-card h3 {
  margin: 0;
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 16px;
}

.accounts-side-card p {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #2c3038;
}

.accounts-side-client {
  background: var(--cp-yellow);
  box-shadow: 4px 4px 0 var(--cp-ink);
}

.accounts-client-placeholder {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px dashed var(--cp-ink);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.accounts-client-placeholder p {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-ink);
}

.accounts-side-workspace {
  background: var(--cp-purple);
}

.accounts-new-workspace-btn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  color: #2f1fa8;
  cursor: pointer;
  font-family: var(--cp-font-body);
}

.accounts-new-workspace-btn:hover {
  text-decoration: underline;
}

/* ==========================================================================
   ALL CLIENTS — "Playful" skin (scoped to .allclients-playful). Agency/
   Business only; opened from the workspace switcher's "All clients" row,
   not a sidebar item. Matches screens/AllClients.html: KPI strip + one
   table row per workspace the user owns.
   ========================================================================== */
.allclients-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.allclients-kpi-tile {
  background: var(--cp-card);
  border: 2px solid var(--cp-ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--cp-ink);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.allclients-kpi-tile:nth-child(2) { background: var(--cp-peach); }
.allclients-kpi-tile:nth-child(3) { background: var(--cp-yellow); }
.allclients-kpi-tile:nth-child(4) { background: var(--cp-purple); }

.allclients-kpi-value {
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: var(--cp-ink);
}

.allclients-kpi-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--cp-ink);
}

.allclients-table-card {
  background: var(--cp-card);
  border: 2px solid var(--cp-ink);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  overflow-x: auto;
}

.allclients-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.allclients-table thead th {
  font-family: var(--cp-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-muted);
  text-align: left;
  padding: 0 8px 8px 0;
}

.allclients-table tbody td {
  padding: 9px 8px 9px 0;
  border-top: 1.5px solid var(--cp-dot);
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
  color: var(--cp-ink);
}

.allclients-client-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.allclients-client-badge {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--cp-purple);
  border: 2px solid var(--cp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

.allclients-reconnect-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fdede6;
  color: #b8481c;
  border: 1px solid #b8481c;
}

.allclients-next-post {
  font-size: 12px;
  font-weight: 600;
}

.allclients-week-row {
  display: flex;
  gap: 3px;
}

.allclients-week-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #efe7da;
  border: 1px solid var(--cp-ink);
}

.allclients-week-dot.is-active {
  background: var(--cp-indigo);
}

.allclients-unreplied-high {
  color: #b8481c;
}

.allclients-open-btn {
  background: none;
  border: none;
  padding: 0;
  font-weight: 800;
  color: #2f1fa8;
  cursor: pointer;
  font-family: var(--cp-font-body);
}

.allclients-open-btn:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .allclients-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   ANALYTICS — "Playful" skin + tabbed sections (scoped to .analytics-playful).
   Matches screens/Analytics.html (Overview tab) and
   screens/AnalyticsSections.html (Posts, Audience, Best times, Hashtags,
   Competitors, Reports). Only Overview's KPI/chart/leaderboard markup
   already existed — the other tabs and the tab strip are new here.
   ========================================================================== */
.analytics-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.analytics-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink);
  background: var(--cp-card);
  flex-wrap: wrap;
}

.analytics-tab {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.analytics-tab.active {
  background: var(--cp-ink);
  color: #ffffff;
}

.analytics-phase2-badge {
  margin-left: 6px;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cp-purple);
  color: var(--cp-ink);
}

.analytics-pane {
  display: none;
}

.analytics-pane.active {
  display: block;
}

.analytics-table-wrap {
  overflow-x: auto;
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.analytics-table thead th {
  font-family: var(--cp-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-muted);
  text-align: left;
  padding: 0 8px 8px 0;
}

.analytics-table tbody td {
  padding: 8px 8px 8px 0;
  border-top: 1.5px solid var(--cp-dot);
  font-size: 12px;
  font-weight: 700;
  color: var(--cp-ink);
}

.analytics-post-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.analytics-post-cell small {
  font-size: 10px;
  color: var(--cp-muted);
  font-weight: 600;
}

.analytics-again-btn {
  background: none;
  border: none;
  padding: 0;
  color: #2f1fa8;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--cp-font-body);
}

.analytics-again-btn:hover {
  text-decoration: underline;
}

.analytics-phase2-card {
  background: #efe7da;
  text-align: left;
}

.analytics-phase2-badge-lg {
  align-self: flex-start;
  margin-left: 0;
  font-size: 10px;
  padding: 3px 9px;
}

.analytics-reports-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.analytics-audience-totals {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.analytics-audience-tile {
  flex: 1 1 140px;
  padding: 10px;
  border-radius: 16px;
  border: 2px solid var(--cp-ink);
  background: var(--cp-card);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.analytics-audience-tile strong {
  font-family: var(--cp-font-display);
  font-size: 22px;
  font-weight: 800;
}

.analytics-databadge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

.analytics-databadge.is-real {
  background: #e8f6ee;
  color: #0b5e41;
  border-color: #0b5e41;
}

.analytics-databadge.is-general {
  background: #fdede6;
  color: #b8481c;
  border-color: #b8481c;
}

.best-times-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

/* Playful re-skin of the pre-existing KPI/chart/leaderboard components
   (unchanged markup and data logic — same approach as .home-playful). */
.analytics-playful .kpi-card {
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--cp-ink);
}

.analytics-playful .kpi-grid-analytics .kpi-card:nth-child(6n+1) { background: var(--cp-card); }
.analytics-playful .kpi-grid-analytics .kpi-card:nth-child(6n+2) { background: var(--cp-yellow); }
.analytics-playful .kpi-grid-analytics .kpi-card:nth-child(6n+3) { background: var(--cp-peach); }
.analytics-playful .kpi-grid-analytics .kpi-card:nth-child(6n+4) { background: var(--cp-card); }
.analytics-playful .kpi-grid-analytics .kpi-card:nth-child(6n+5) { background: var(--cp-purple); }
.analytics-playful .kpi-grid-analytics .kpi-card:nth-child(6n+6) { background: var(--cp-mint); }

.analytics-playful .kpi-label {
  font-family: var(--cp-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.analytics-playful .kpi-value {
  font-family: var(--cp-font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cp-ink);
}

.analytics-playful .chart-fill-bar {
  background: var(--cp-indigo);
  border: 1.5px solid var(--cp-ink);
  border-radius: 8px;
}

.analytics-playful .chart-track-col {
  background: #efe7da;
  border: 1.5px solid var(--cp-ink);
  border-radius: 8px;
}

.analytics-playful .ranking-row-card {
  border: 1.5px solid var(--cp-ink);
  border-radius: var(--radius-md);
  background: #faf9f6;
}

.analytics-playful .rank-badge {
  background: var(--cp-ink);
  color: #ffffff;
  border-radius: 999px;
}

/* ==========================================================================
   APPROVALS BOARD — "Playful" skin (scoped to .approvals-playful). Matches
   screens/ApprovalsBoard.html: 3 real columns (Upcoming, Needs our work,
   Waiting on client) backed by actual post/approval data, a 4th column
   (Feedback) that stays honestly empty until client-side commenting exists,
   and a detail panel with an internal note thread.
   ========================================================================== */
.approvals-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.approvals-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--cp-ink);
}

.approvals-toggle input {
  accent-color: var(--cp-indigo);
  width: 16px;
  height: 16px;
  margin: 0;
}

.approvals-board-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.approvals-columns {
  flex-grow: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .approvals-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.approvals-col {
  border: 2px solid var(--cp-ink);
  border-radius: var(--radius-lg);
  padding: 10px;
  background: var(--cp-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}

.approvals-col-work { background: #fff7f2; }
.approvals-col-client { background: #fffbea; }
.approvals-col-feedback { background: #f4f1ff; }

.approvals-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
}

.approvals-col-head span:first-child {
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 15px;
}

.approvals-col-count {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cp-ink);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.approvals-col-hint {
  margin: 0;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: #2c3038;
}

.approvals-col-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.approvals-empty-note {
  font-size: 11px;
  margin: 4px;
}

.approvals-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid var(--cp-ink);
  color: var(--cp-ink);
  text-align: left;
  cursor: pointer;
  font-family: var(--cp-font-body);
}

.approvals-card:hover {
  box-shadow: 3px 3px 0 var(--cp-ink);
}

.approvals-card.is-selected {
  border-width: 2.5px;
  box-shadow: 3px 3px 0 var(--cp-orange);
}

.approvals-card.is-alert {
  border-color: #c4321a;
}

.approvals-card-title {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.approvals-card-platforms {
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-muted);
}

.approvals-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #2c3038;
}

.approvals-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.approvals-card-comments {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cp-yellow);
  border: 1px solid var(--cp-ink);
}

.approvals-card-reminded {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cp-mint);
  border: 1px solid var(--cp-ink);
}

.approvals-remind-btn {
  background: var(--cp-peach);
}

#approvalsMineOnlyBtn.is-active {
  background: var(--cp-ink);
  color: #ffffff;
}

.approvals-detail-panel {
  width: 330px;
  flex-shrink: 0;
  background: var(--cp-card);
  border: 2px solid var(--cp-ink);
  border-radius: var(--radius-lg);
  box-shadow: 5px 5px 0 var(--cp-ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 400px;
}

.approvals-detail-empty {
  padding: 20px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cp-muted);
}

.approvals-detail-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}

.approvals-detail-head {
  padding: 12px 14px;
  border-bottom: 2px solid var(--cp-ink);
  background: var(--cp-yellow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.approvals-detail-head strong {
  font-family: var(--cp-font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.approvals-detail-status {
  font-size: 11px;
  font-weight: 800;
  color: #b8481c;
  text-transform: capitalize;
}

.approvals-detail-media {
  display: flex;
  gap: 8px;
  padding: 12px 14px 0;
}

.approvals-media-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background-color: #f4f1ff;
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--cp-ink);
  flex-shrink: 0;
}

.approvals-media-badge {
  position: absolute;
  left: 3px;
  bottom: 3px;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  background: #ffffff;
  border-radius: 999px;
  border: 1px solid var(--cp-ink);
}

.approvals-detail-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
}

.approvals-tab-btn {
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1.5px solid var(--cp-ink);
  background: #ffffff;
  font-weight: 700;
  font-size: 11px;
  color: var(--cp-ink);
  cursor: pointer;
}

.approvals-tab-btn.is-active {
  background: var(--cp-ink);
  color: #ffffff;
  font-weight: 800;
}

.approvals-detail-thread {
  flex-grow: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 120px;
}

.approvals-thread-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 14px;
  background: #f7f5f0;
  border: 1.5px dashed var(--cp-ink);
}

.approvals-thread-item.is-client {
  background: #fffbea;
  border-style: solid;
}

.approvals-thread-item.is-internal {
  background: #f4f1ff;
  border-style: solid;
}

.approvals-thread-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
}

.approvals-thread-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #efe7da;
  border: 1px solid var(--cp-ink);
}

.approvals-thread-tag.is-client {
  background: var(--cp-yellow);
}

.approvals-thread-when {
  margin-left: auto;
  color: var(--cp-muted);
  font-weight: 700;
}

.approvals-thread-body {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.approvals-detail-footer {
  padding: 10px 14px 14px;
  border-top: 2px solid var(--cp-ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.approvals-detail-footer textarea {
  border: 1.5px solid var(--cp-ink);
  border-radius: 14px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  resize: none;
  font-family: var(--cp-font-body);
}

.approvals-internal-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--cp-ink);
}

.approvals-internal-check input {
  accent-color: var(--cp-indigo);
  width: 15px;
  height: 15px;
  margin: 0;
}

.approvals-detail-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ==========================================================================
   ASSISTANT PANEL — global slide-over, opens over any view (sidebar button
   or Cmd/Ctrl+J). Matches screens/AssistantPanel.html / AssistantStates.html.
   Colors are hardcoded (not the --cp-* tokens) because this panel is global
   chrome outside .shell-playful's scope and should look the same everywhere.
   ========================================================================== */
.nav-item-assistant {
  border: none;
  width: 100%;
  cursor: pointer;
  background: #f3f0ff;
}

.nav-icon-assistant {
  background: #cfc5fb !important;
}

.nav-shortcut-hint {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #6b6257;
}

.assistant-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(21, 23, 28, 0.15);
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}

.assistant-panel {
  width: 440px;
  max-width: 100%;
  flex-shrink: 0;
  background: #ffffff;
  border: 2px solid #15171c;
  border-radius: 28px;
  box-shadow: 6px 6px 0 #15171c;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 500px) {
  .assistant-overlay { padding: 0; }
  .assistant-panel { width: 100%; height: 100%; border-radius: 0; }
}

.assistant-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 2px solid #15171c;
  background: #cfc5fb;
}

.assistant-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #15171c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.assistant-header-meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.assistant-header-meta strong {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 800;
  font-size: 18px;
}

.assistant-header-meta small {
  font-size: 11px;
  font-weight: 700;
  color: #2c3038;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assistant-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid #15171c;
  background: #ffffff;
  cursor: pointer;
  font-weight: 800;
  flex-shrink: 0;
}

.assistant-thread {
  flex-grow: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  background: #faf9f6;
  min-height: 320px;
}

.assistant-empty-state {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assistant-empty-title {
  margin: 0;
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.2;
}

.assistant-empty-sub {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #2c3038;
}

.assistant-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.assistant-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 2px solid #15171c;
  background: #ffffff;
  font-weight: 700;
  font-size: 12px;
  color: #15171c;
  cursor: pointer;
}

.assistant-chip:hover {
  background: #ffe58f;
}

.assistant-bubble-user {
  align-self: flex-end;
  max-width: 82%;
  background: #4b34e8;
  color: #ffffff;
  border: 2px solid #15171c;
  border-radius: 20px 20px 6px 20px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.assistant-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #4b34e8;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1.5px dashed #6b6257;
  background: #ffffff;
  align-self: flex-start;
}

.assistant-thinking-spinner {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #4b34e8;
  border-right-color: transparent;
  animation: assistant-spin 0.7s linear infinite;
}

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

.assistant-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1.5px dashed #6b6257;
  background: #ffffff;
}

.assistant-step-item {
  font-size: 12px;
  font-weight: 700;
  color: #0b5e41;
}

.assistant-reply-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #15171c;
  white-space: pre-line;
}

.assistant-card {
  background: #ffe58f;
  border: 2px solid #15171c;
  border-radius: 20px;
  box-shadow: 3px 3px 0 #15171c;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assistant-card-head strong {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 800;
  font-size: 16px;
}

.assistant-card-subtitle {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}

.assistant-draft-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #15171c;
  font-size: 12px;
}

.assistant-card-actions {
  display: flex;
  gap: 8px;
}

.assistant-card-quota {
  background: #efe7da;
}

.assistant-quota-bar {
  height: 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1.5px solid #15171c;
  overflow: hidden;
}

.assistant-quota-bar span {
  display: block;
  height: 100%;
  background: #f2622e;
}

.assistant-card-error {
  background: #fbe9e4;
  border-color: #c4321a;
}

.assistant-card-error strong {
  color: #c4321a;
}

.assistant-footer {
  border-top: 2px solid #15171c;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
}

.assistant-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border: 2px solid #15171c;
  border-radius: 20px;
  padding: 8px 8px 8px 14px;
}

.assistant-input-row textarea {
  flex-grow: 1;
  border: 0;
  outline: none;
  resize: none;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  font-family: 'Manrope', sans-serif;
}

.assistant-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid #15171c;
  background: #4b34e8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.assistant-footer-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: #4a4f5b;
}

/* ==========================================================================
   CALENDAR — view switcher, filters, week view and Ideas sidebar
   (scoped to .calendar-playful, which already defines --cp-* tokens).
   Matches screens/CalendarPlayful.html. Day/List/IG-grid views are a
   separate screen (CalendarViews) per the design pack itself, so those
   just show a placeholder here, same as the mockup does.
   ========================================================================== */
.calendar-view-switcher {
  display: flex;
  border: 2px solid var(--cp-ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--cp-card);
}

.cal-view-btn {
  height: 36px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--cp-ink);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--cp-font-body);
}

.cal-view-btn.active {
  background: var(--cp-ink);
  color: #ffffff;
}

.calendar-filters-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.calendar-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink);
  background: var(--cp-card);
  width: 200px;
  box-sizing: border-box;
}

.calendar-search-box input {
  border: 0;
  outline: none;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
  background: transparent;
  font-family: var(--cp-font-body);
}

.calendar-status-legend {
  display: flex;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cp-ink);
  flex-wrap: wrap;
}

.calendar-status-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1.5px solid var(--cp-ink);
  display: inline-block;
}

.calendar-body-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.calendar-main-col {
  flex-grow: 1;
  min-width: 0;
}

.calendar-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.calendar-week-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--cp-dot);
  border-radius: 22px;
  padding: 10px;
  min-height: 240px;
}

.calendar-week-day.is-today {
  background: #ffffff;
  border-color: var(--cp-ink);
}

.calendar-week-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
}

.calendar-week-daynum {
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 15px;
}

.calendar-week-daynum.is-today {
  background: var(--cp-indigo);
  color: #ffffff;
}

.calendar-week-post-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid var(--cp-ink);
  cursor: pointer;
}

.calendar-week-post-thumb {
  height: 44px;
  border-radius: 9px;
  border: 1.5px solid var(--cp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-week-post-time {
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 13px;
}

.calendar-week-post-text {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.calendar-other-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--cp-ink);
  border-radius: 22px;
  background: var(--cp-card);
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--cp-muted);
  text-align: center;
  padding: 20px;
}

.calendar-ideas-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--cp-yellow);
  border: 2px solid var(--cp-ink);
  border-radius: 24px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calendar-ideas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendar-ideas-head h3 {
  margin: 0;
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 19px;
}

.calendar-ideas-board-link {
  font-size: 12px;
  font-weight: 800;
  color: inherit;
}

.calendar-ideas-hint {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #4a3700;
}

.calendar-ideas-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.calendar-idea-card {
  background: #ffffff;
  border: 2px solid var(--cp-ink);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  cursor: grab;
}

.calendar-idea-column-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #4a4f5b);
  font-weight: 600;
}

.calendar-idea-actions {
  display: flex;
  gap: 6px;
}

.calendar-ideas-empty {
  font-size: 12px;
  margin: 0;
}

.calendar-idea-add-row {
  display: flex;
  gap: 6px;
}

.ideas-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ideas-page-grid .calendar-idea-card {
  font-size: 14px;
}

.calendar-idea-add-row input {
  flex-grow: 1;
  height: 36px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--cp-font-body);
  min-width: 0;
}

@media (max-width: 1100px) {
  .calendar-body-row { flex-direction: column; }
  .calendar-ideas-sidebar { width: 100%; }
  .calendar-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Day / List / IG grid views (screens/CalendarViews.html) ---- */
.calendar-day-view-head {
  margin-bottom: 10px;
}

.calendar-day-view-title {
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 16px;
}

.calendar-day-lanes-header {
  display: grid;
  gap: 0;
  margin-left: 54px;
  margin-bottom: 4px;
}

.calendar-day-lane-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  padding: 0 4px;
  min-width: 0;
}

.calendar-day-lane-chip span.lane-initials {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--cp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  flex-shrink: 0;
}

.calendar-day-lane-chip span.lane-handle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-day-timeline {
  position: relative;
  margin-left: 54px;
  border-top: 1px solid var(--cp-dot);
}

.calendar-day-lane-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--cp-dot);
}

.calendar-day-queue-slot {
  position: absolute;
  border-radius: 10px;
  border: 1.5px dashed #0b6e4b;
  background: #f1faf5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #0b6e4b;
  cursor: pointer;
}

.calendar-day-post-block[draggable="true"] { cursor: grab; }
.calendar-day-post-block.is-dragging { opacity: 0.4; }

.calendar-day-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--cp-dot);
}

.calendar-day-hour-line .mono-label {
  position: absolute;
  left: -54px;
  top: -7px;
  width: 46px;
  text-align: right;
  color: var(--cp-muted);
}

.calendar-day-post-block {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #ffffff;
  border: 2px solid var(--cp-ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--cp-indigo);
}

.calendar-day-post-block.draft { border-style: dashed; box-shadow: none; }
.calendar-day-post-block.published { box-shadow: 3px 3px 0 #0e8a5f; }
.calendar-day-post-block.failed { box-shadow: 3px 3px 0 #c4321a; }
.calendar-day-post-block.pending_approval,
.calendar-day-post-block.warning { box-shadow: 3px 3px 0 #f2622e; }

.calendar-day-post-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--cp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}

.calendar-day-post-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.calendar-day-post-info strong {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-day-now-line {
  position: absolute;
  left: -6px;
  right: 0;
  border-top: 2px solid #f2622e;
}

.calendar-list-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--cp-ink);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
}

.calendar-list-bulk-bar .btn-ghost-xs {
  color: #ffffff;
  border-color: #ffffff;
}

.calendar-list-date-label {
  display: block;
  padding-top: 8px;
  color: var(--cp-muted);
}

.calendar-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-top: 1.5px solid var(--cp-dot);
}

.calendar-list-row.is-queue {
  cursor: pointer;
  color: #0b6e4b;
}

.calendar-list-row.is-queue .calendar-list-thumb {
  border: 1.5px dashed #0b6e4b;
  background: #f1faf5 !important;
}

.calendar-list-check {
  accent-color: var(--cp-indigo);
  margin: 0;
}

.calendar-list-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--cp-ink);
  flex-shrink: 0;
}

.calendar-list-time {
  width: 42px;
  flex-shrink: 0;
}

.calendar-list-content {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.calendar-list-content strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-list-content small {
  font-size: 10px;
  color: var(--cp-muted);
  font-weight: 700;
}

.calendar-iggrid-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
}

.calendar-iggrid-phone {
  width: 300px;
  border: 3px solid var(--cp-ink);
  border-radius: 34px;
  background: var(--cp-ink);
  padding: 8px;
  box-sizing: border-box;
}

.calendar-iggrid-phone-inner {
  border-radius: 26px;
  background: #ffffff;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-iggrid-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.calendar-iggrid-profile strong {
  display: block;
  font-size: 12px;
}

.calendar-iggrid-profile small {
  font-size: 10px;
  color: var(--cp-muted);
}

.calendar-iggrid-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--cp-peach);
  border: 1.5px solid var(--cp-ink);
  flex-shrink: 0;
}

.calendar-iggrid-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.calendar-iggrid-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background: var(--cp-purple);
  border: 1px solid var(--cp-ink);
  cursor: pointer;
}

.calendar-iggrid-tile.scheduled { border: 2px solid var(--cp-indigo); }
.calendar-iggrid-tile.draft { border: 2px dashed var(--cp-ink); }
.calendar-iggrid-tile.published { background: var(--cp-mint); opacity: 0.85; }
.calendar-iggrid-tile.failed { border: 2px solid #c4321a; }

.calendar-iggrid-tile .mono-label {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-size: 8px;
  padding: 1px 5px;
  background: #ffffff;
  border-radius: 999px;
  border: 1px solid var(--cp-ink);
}

.calendar-iggrid-empty {
  grid-column: 1 / -1;
  font-size: 11px;
  text-align: center;
  padding: 20px 0;
}

.calendar-iggrid-section-label {
  display: block;
  margin: 10px 0 4px;
  padding: 0 4px;
  color: var(--cp-muted);
}

.calendar-iggrid-tile.is-dragging { opacity: 0.4; }
.calendar-iggrid-tile[draggable="true"] { cursor: grab; }

.calendar-iggrid-legend {
  display: flex;
  gap: 12px;
  font-size: 10px;
  font-weight: 800;
}

.calendar-iggrid-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.calendar-iggrid-note {
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-muted);
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   MEDIA — Library/Canva tabs (scoped within .shell-playful for --cp-* tokens).
   Matches screens/CanvaEdit.html: 3 panels (Connect, Edit from a post,
   Bring the new version back). Fully wired to the real Canva Connect API
   (verified endpoints), dormant until CANVA_CLIENT_ID/SECRET are configured —
   shown honestly as "not set up yet" rather than faked.
   ========================================================================== */
.media-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink, #15171c);
  background: var(--cp-card, #fff);
  width: fit-content;
  margin-bottom: 14px;
}

.media-tab {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cp-ink, #15171c);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.media-tab.active {
  background: var(--cp-ink, #15171c);
  color: #ffffff;
}

.media-pane {
  display: none;
}

.media-pane.active {
  display: block;
}

.canva-panels-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

@media (max-width: 960px) {
  .canva-panels-row { grid-template-columns: 1fr; }
}

.canva-panel {
  padding: 0;
  overflow: hidden;
}

.canva-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--cp-ink, #15171c);
  background: var(--cp-purple, #cfc5fb);
}

.canva-panel-head-peach { background: var(--cp-peach, #ffcdb4); }
.canva-panel-head-mint { background: var(--cp-mint, #a8e6c9); }

.canva-panel-num {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--cp-ink, #15171c);
  color: #ffffff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.canva-panel-title {
  font-family: var(--cp-font-display, inherit);
  font-weight: 800;
  font-size: 18px;
}

.canva-panel-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
}

.canva-panel-body strong {
  font-size: 14px;
  font-weight: 800;
}

.canva-note {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--cp-muted, #4a4f5b);
}

.settings-pages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .settings-pages-grid {
    grid-template-columns: 1fr;
  }
}

.settings-account-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.settings-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.notification-prefs-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notification-prefs-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-bottom: 4px;
}

.notification-prefs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.settings-privacy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.settings-privacy-row:first-of-type {
  border-top: none;
}

.settings-privacy-row small {
  display: block;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

.settings-danger-card {
  grid-column: span 2;
  border-color: var(--brand-red, #c4321a) !important;
}

@media (max-width: 900px) {
  .settings-danger-card {
    grid-column: span 1;
  }
}

.report-preview-modal {
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.report-preview-toolbar > div {
  display: flex;
  gap: 8px;
}

.report-preview-page {
  display: flex;
  justify-content: center;
}

.rp-sheet {
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  color: #15171c;
  border: 2px solid #15171c;
  box-shadow: 6px 6px 0 #15171c;
  padding: 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body, sans-serif);
}

.rp-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rp-logo-box {
  width: 100px;
  height: 36px;
  border: 2px dashed #15171c;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
}

.rp-logo-box img {
  max-width: 100%;
  max-height: 100%;
}

.rp-title {
  font-family: var(--cp-font-display, Georgia, serif);
  font-size: 28px;
  line-height: 1.1;
  margin: 0;
}

.rp-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rp-kpi {
  padding: 8px 10px;
  border: 1.5px solid #15171c;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rp-kpi strong {
  font-family: var(--cp-font-display, Georgia, serif);
  font-size: 20px;
}

.rp-highlights {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.rp-top-posts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rp-post-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid #e4e0d8;
  font-size: 12px;
  font-weight: 700;
}

.rp-footer {
  font-size: 9px;
  color: #4a4f5b;
  margin-top: auto;
}

@media print {
  body > *:not(#reportPreviewModal) {
    display: none !important;
  }
  #reportPreviewModal {
    position: static !important;
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
  #reportPreviewModal .report-preview-toolbar,
  #reportPreviewModal .panel-header-row button {
    display: none !important;
  }
  .report-preview-modal {
    box-shadow: none !important;
    max-height: none !important;
    max-width: none !important;
  }
  .rp-sheet {
    box-shadow: none !important;
  }
}

.x-cost-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
}

.x-cost-box strong {
  font-size: 18px;
}

.phone-upload-qr-modal {
  max-width: 420px;
  width: 100%;
}

.phone-upload-qr-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.phone-upload-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
}

.step-row .n {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.phone-upload-link-row {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-size: 11px;
  word-break: break-all;
}

.phone-upload-arriving {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.phone-upload-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  text-align: left;
}

.phone-upload-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ob-bg, #f4f5fb);
  font-size: 13px;
}

.phone-upload-status {
  font-weight: 700;
  font-size: 12px;
  color: var(--ob-accent-teal, #14b8a6);
}

.disconnect-confirm-modal {
  max-width: 420px;
  width: 100%;
}

.move-workspace-modal,
.invite-teammate-modal {
  max-width: 460px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.analytics-posts-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 14px;
}

.analytics-columns-picker {
  position: relative;
}

.analytics-columns-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e2e2);
  border-radius: var(--radius-md, 8px);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 120px;
}

.analytics-columns-menu label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.automation-editor-modal {
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
}

.automation-recurring-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
}

.automation-days-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.automation-days-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.home-greeting-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.home-greeting-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-weather-icon {
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
}

.home-greeting-text {
  margin: 0;
  font-size: 28px;
}

.home-greeting-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.home-greeting-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.home-search-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 250px;
  flex-shrink: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
}

.home-search-btn span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.home-search-btn kbd {
  flex-shrink: 0;
}

.home-search-btn kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-input);
}

.home-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.lang-toggle {
  display: flex;
  border: 1.5px solid var(--cp-ink, var(--border));
  border-radius: 999px;
  overflow: hidden;
  height: 40px;
  flex-shrink: 0;
}

.lang-toggle-btn {
  width: 42px;
  border: 0;
  background: #fff;
  color: var(--cp-ink, var(--text-primary));
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lang-toggle-btn[aria-pressed="true"] {
  background: var(--cp-ink, #15171c);
  color: #fff;
}

.home-clock-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand-emerald);
  flex-shrink: 0;
}

.home-notifications-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.home-notifications-btn:hover {
  background: var(--bg-input);
}

.home-alert-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.home-alert-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 2px solid var(--cp-ink, #15171c);
  border-radius: 20px;
  min-height: 160px;
  text-align: left;
  cursor: pointer;
  color: #15171c;
  font-family: inherit;
}

.home-alert-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.home-alert-count {
  font-family: var(--cp-font-display, var(--font-display));
  font-weight: 800;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.home-alert-tag {
  font-family: var(--cp-font-mono, var(--font-mono));
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--cp-ink, #15171c);
}

.home-alert-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.home-alert-desc {
  font-size: 13px;
  line-height: 1.4;
  flex-grow: 1;
}

.home-alert-cta {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cp-ink, #15171c);
  color: #fff;
}

.home-quick-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.home-qa-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-qa-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.home-qa-pill:hover {
  border-color: var(--brand-primary);
}

.home-qa-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.home-week-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 16px;
}

.home-week-card {
  flex: 1 1 0;
  min-width: 0;
}

.home-side-col {
  flex: 0 0 320px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-talking-card {
  background: var(--cp-purple, #cfc5fb);
  border: 2px solid var(--cp-ink, var(--border));
  border-radius: 26px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-talking-card .panel-header-row h3 {
  margin: 0;
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.home-talking-suggested-bubble.is-loading {
  opacity: 0.7;
  cursor: default;
}

.home-talking-all-link {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--cp-ink, var(--text-primary));
  cursor: pointer;
  padding: 0;
}

.home-talking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-talking-item {
  background: #fff;
  border: 1.5px solid var(--cp-ink, var(--border));
  border-radius: 18px 18px 18px 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: flex-start;
  max-width: 92%;
}

.home-talking-meta {
  font-family: var(--cp-font-mono, var(--font-mono));
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a4f5b;
}

.home-talking-text {
  font-size: 14px;
  font-weight: 600;
  color: #15171c;
}

.home-talking-suggested {
  display: flex;
  justify-content: flex-end;
}

.home-talking-suggested .btn-secondary-xs {
  background: #fff;
}

.home-talking-suggested-bubble {
  align-self: flex-end;
  max-width: 88%;
  background: var(--cp-indigo, #4b34e8);
  color: #fff;
  border: 1.5px solid var(--cp-ink, #15171c);
  border-radius: 18px 18px 4px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.home-fuel-card {
  background: var(--bg-card);
  border: 2px solid var(--cp-ink, var(--border));
  border-radius: 22px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-fuel-card .panel-header-row h3 {
  margin: 0;
}

.home-fuel-plan-link {
  font-size: 13px;
  font-weight: 800;
  color: var(--cp-indigo, var(--brand-primary));
  text-decoration: none;
}

.home-fuel-meters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-fuel-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.home-fuel-row-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
}

.home-fuel-bar {
  height: 14px;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1.5px solid var(--cp-ink, var(--border));
  overflow: hidden;
}

.home-fuel-bar-fill {
  height: 100%;
  border-right: 1.5px solid var(--cp-ink, #15171c);
}

@media (max-width: 860px) {
  .home-week-row {
    flex-direction: column;
  }
  .home-side-col {
    width: 100%;
    flex: 1 1 auto;
  }
}

.home-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.home-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

.home-week-day.is-today {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

.home-week-day.is-empty {
  border: 1.5px dashed var(--border);
  background: transparent;
}

.home-week-day.is-empty .home-week-count {
  color: var(--brand-primary);
}

.home-week-dow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  opacity: 0.7;
}

.home-week-num {
  font-size: 18px;
  font-weight: 800;
}

.home-week-count {
  font-size: 10px;
  font-weight: 700;
}

.home-week-posts-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
}

.home-week-post-row {
  display: grid;
  grid-template-columns: 36px 60px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.home-week-post-row:first-child {
  border-top: none;
}

.home-week-post-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-week-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-week-post-thumb-fallback {
  font-weight: 800;
  font-size: 13px;
  color: var(--text-muted);
}

.home-week-post-time {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.home-week-post-text {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-week-post-platforms {
  display: flex;
  gap: 4px;
}

.help-search-input {
  height: 48px;
  font-size: 14px;
  margin-bottom: 16px;
}

.help-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .help-grid {
    grid-template-columns: 1fr;
  }
}

.help-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.help-topics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.help-topic-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  color: #15171c;
  cursor: default;
}

.help-topic-tile strong {
  font-size: 14px;
}

.help-topic-tile span {
  font-size: 11px;
  font-weight: 600;
}

.help-faq-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-faq-item {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.help-faq-item summary {
  cursor: pointer;
  font-weight: 700;
}

.help-faq-item p {
  margin: 8px 0 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.help-shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.help-shortcut-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
}

.help-shortcut-row kbd {
  min-width: 44px;
  text-align: center;
  font-family: var(--font-mono);
  padding: 3px 6px;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
}

.integrations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-width: 0;
}

.integrations-grid > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .integrations-grid {
    grid-template-columns: 1fr;
  }
}

.integrations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.integration-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  min-width: 0;
}

.integration-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.integration-row-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  min-width: 0;
}

.integration-row-text span {
  white-space: normal;
  overflow-wrap: break-word;
}

.integration-row-text strong {
  font-size: 13px;
}

.integration-row-text span {
  font-size: 11px;
  color: var(--text-muted);
}

.api-key-reveal {
  padding: 12px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--brand-emerald);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.api-key-reveal code {
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
  user-select: all;
}

.billing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .billing-grid {
    grid-template-columns: 1fr;
  }
}

.billing-plan-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.billing-plan-card h2 {
  margin: 0;
  font-size: 30px;
}

.billing-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.billing-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.billing-usage-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.billing-usage-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.billing-usage-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
}

.billing-usage-track {
  height: 12px;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  overflow: hidden;
}

.billing-usage-track span {
  display: block;
  height: 100%;
  background: var(--brand-primary);
}

.inbox-queue-modal {
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inbox-queue-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inbox-queue-header h2 {
  margin: 0;
  font-size: 18px;
}

.inbox-queue-progress-track {
  flex-grow: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  overflow: hidden;
}

.inbox-queue-progress-track span {
  display: block;
  height: 100%;
  background: var(--brand-primary);
  transition: width 0.2s ease;
}

.inbox-queue-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inbox-queue-body textarea {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  background: var(--bg-input);
  color: var(--text-primary);
  resize: vertical;
}

.inbox-queue-actions {
  display: flex;
  gap: 8px;
}

.inbox-queue-actions kbd {
  margin-left: 4px;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid currentColor;
  opacity: 0.7;
}

.inbox-queue-upnext {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
}

.inbox-queue-upnext-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg-input);
  font-size: 12px;
}

.inbox-queue-upnext-row strong {
  flex-shrink: 0;
}

.inbox-queue-upnext-row span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

#savedRepliesModal {
  z-index: 150;
}

.saved-replies-modal {
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.saved-replies-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.saved-reply-row {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
}

.saved-reply-row:hover {
  border-color: var(--brand-primary);
}

.saved-reply-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.saved-reply-row p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-reply-form {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.gbp-split-bar {
  display: flex;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg-input);
}

.gbp-split-bar span {
  display: block;
  height: 100%;
  background: var(--brand-primary);
}

.gbp-split-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  margin-top: 6px;
}

.canva-panels-note {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cp-muted, #4a4f5b);
}

/* ---- Import from Canva modal (screens/CanvaImport.html) ---- */
.canva-import-modal {
  max-width: 980px;
  width: 100%;
}

.canva-import-body {
  padding: 0;
  display: flex;
  min-height: 460px;
}

.canva-import-not-connected {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
}

.canva-import-connected {
  display: flex;
  flex-grow: 1;
  min-width: 0;
}

.canva-import-main {
  flex-grow: 1;
  min-width: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.canva-import-search {
  width: 100%;
  box-sizing: border-box;
}

.canva-import-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  overflow-y: auto;
}

.canva-import-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  cursor: pointer;
  text-align: left;
}

.canva-import-tile.is-selected {
  border-color: var(--brand-primary);
  box-shadow: 3px 3px 0 var(--brand-primary);
}

.canva-import-tile strong {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}

.canva-import-thumb {
  position: relative;
  height: 110px;
  border-radius: 10px;
  background-color: var(--bg-surface-elevated, #efe7da);
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--border);
}

.canva-import-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--brand-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canva-import-side {
  width: 260px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.canva-import-fmt {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.canva-import-fmt legend {
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 4px;
  padding: 0;
}

.canva-import-fmt-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.canva-import-folder-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.canva-import-folder-field label {
  font-weight: 800;
  font-size: 13px;
}

.canva-import-folder-field input {
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 0 10px;
  font-size: 13px;
}

.canva-import-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.canva-import-progress-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--bg-surface-elevated, #f3f3f7);
}

/* ---- Sidebar "What's new" link + changelog modal ---- */
.sidebar-changelog-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  padding: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
}

.sidebar-changelog-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.changelog-modal {
  max-width: 640px;
}

.changelog-body {
  max-height: 70vh;
  overflow-y: auto;
}

.changelog-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.changelog-group h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.changelog-item {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.changelog-item-date {
  flex-shrink: 0;
  width: 74px;
  color: var(--text-muted);
}

.changelog-item-text {
  font-weight: 600;
}

/* ==========================================================================
   CLIENT APPROVAL PAGE — public, no-login (screens/ClientApproval.html).
   Standalone page (approve.html), so colors are hardcoded rather than
   relying on --cp-* tokens scoped to the dashboard shell.
   ========================================================================== */
.capage-body {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  color: #15171c;
  background: #f7f5f0;
  background-image: radial-gradient(#e4e0d8 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  min-height: 100vh;
}

#capageRoot {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.capage-loading,
.capage-error-screen {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 40px;
}

.capage-error-screen h1 {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-size: 24px;
}

.capage-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  background: #ffffff;
  border-bottom: 2px solid #15171c;
}

.capage-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px dashed #15171c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  flex-shrink: 0;
}

.capage-header-meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.capage-header-meta strong {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.capage-header-meta small {
  font-size: 12px;
  font-weight: 700;
  color: #4a4f5b;
}

.capage-lang-toggle {
  display: flex;
  border: 2px solid #15171c;
  border-radius: 999px;
  overflow: hidden;
  height: 36px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.capage-lang-toggle button {
  width: 40px;
  border: 0;
  background: #ffffff;
  font: 800 12px 'Manrope', sans-serif;
  cursor: pointer;
}

.capage-lang-toggle button[aria-pressed="true"] {
  background: #15171c;
  color: #ffffff;
}

.capage-btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid #15171c;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  flex-shrink: 0;
}

.capage-btn-approve {
  background: #0b6e4b;
  color: #ffffff;
  box-shadow: 3px 3px 0 #15171c;
}

.capage-btn-secondary {
  background: #ffffff;
  color: #15171c;
}

.capage-body-row {
  flex-grow: 1;
  display: flex;
  gap: 20px;
  padding: 22px 32px;
  min-height: 0;
}

@media (max-width: 900px) {
  .capage-body-row { flex-direction: column; }
}

.capage-nav {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 900px) {
  .capage-nav { width: 100%; flex-direction: row; overflow-x: auto; }
}

.capage-nav-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4a4f5b;
}

.capage-nav-item {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 18px;
  background: #ffffff;
  border: 1.5px solid #e4e0d8;
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
}

.capage-nav-item.is-selected {
  border: 2.5px solid #15171c;
  box-shadow: 3px 3px 0 #4b34e8;
}

.capage-nav-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #cfc5fb;
  border: 1.5px solid #15171c;
  flex-shrink: 0;
}

.capage-nav-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.capage-nav-info strong {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.capage-nav-info small {
  font-size: 11px;
  font-weight: 600;
  color: #4a4f5b;
}

.capage-nav-status {
  font-size: 11px;
  font-weight: 800;
}

.capage-nav-status.is-pending { color: #b8481c; }
.capage-nav-status.is-changes { color: #c4321a; }
.capage-nav-status.is-approved { color: #0b6e4b; }

.capage-empty {
  font-size: 13px;
  font-weight: 600;
  color: #4a4f5b;
}

.capage-preview {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  gap: 20px;
  background: #ffffff;
  border: 2px solid #15171c;
  border-radius: 28px;
  box-shadow: 5px 5px 0 #15171c;
  padding: 20px;
}

@media (max-width: 900px) {
  .capage-preview { flex-direction: column; }
}

.capage-preview-empty {
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #4a4f5b;
}

.capage-preview-media {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.capage-platform-tabs {
  display: flex;
  border: 2px solid #15171c;
  border-radius: 999px;
  overflow: hidden;
  align-self: flex-start;
}

.capage-platform-tabs button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  background: #ffffff;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.capage-platform-tabs button[aria-pressed="true"] {
  background: #15171c;
  color: #ffffff;
  font-weight: 800;
}

.capage-media-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  text-transform: capitalize;
}

.capage-media-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ffcdb4;
  border: 1.5px solid #15171c;
}

.capage-media-box {
  position: relative;
  height: 340px;
  border-radius: 18px;
  border: 2px solid #15171c;
  background: #efe7da;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.capage-media-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capage-media-placeholder {
  font-size: 12px;
  font-weight: 700;
  color: #6b6257;
}

.capage-media-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1.5px solid #15171c;
}

.capage-media-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.capage-media-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid #15171c;
  background: #d8d3c8;
  cursor: pointer;
}

.capage-media-dot.is-current {
  background: #4b34e8;
}

.capage-tap-hint {
  font-size: 12px;
  font-weight: 700;
  color: #4a4f5b;
}

.capage-preview-main {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.capage-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a4f5b;
}

.capage-preview-main h1 {
  margin: 4px 0 0;
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.capage-caption {
  margin: 0;
  padding: 14px;
  border-radius: 18px;
  background: #faf9f6;
  border: 1.5px solid #15171c;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.capage-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.capage-note {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid #15171c;
}

.capage-note-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #ffcdb4;
  color: #15171c;
  border: 1.5px solid #15171c;
  font-weight: 800;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.capage-note-avatar.is-pin {
  background: #4b34e8;
  color: #ffffff;
  border-color: #15171c;
}

.capage-note-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.capage-note-body strong {
  font-size: 12px;
  font-weight: 800;
}

.capage-note-body span:last-child {
  font-size: 13px;
  font-weight: 600;
}

.capage-preview-main textarea {
  border: 2px solid #15171c;
  border-radius: 16px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  resize: none;
  font-family: 'Manrope', sans-serif;
}

.capage-actions {
  display: flex;
  gap: 10px;
}

.capage-actions .capage-btn {
  flex-grow: 1;
}

.capage-fineprint {
  font-size: 11px;
  font-weight: 600;
  color: #4a4f5b;
}

.capage-final-note {
  font-size: 13px;
  font-weight: 800;
  color: #0b6e4b;
}

.capage-footer {
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #5c6270;
  border-top: 2px solid #15171c;
  background: #ffffff;
}

.capage-footer-links {
  display: flex;
  gap: 16px;
}

.capage-footer-links a {
  color: #5c6270;
}

/* ---- Read-only client calendar view (calendar-view.html) ---- */
.calview-list {
  flex-grow: 1;
  padding: 24px 32px;
  overflow-y: auto;
}

.calview-month-group {
  margin-bottom: 28px;
}

.calview-month-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5c6270;
  margin: 0 0 12px;
}

.calview-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  border: 2px solid #15171c;
  border-radius: 14px;
  background: #ffffff;
  margin-bottom: 12px;
}

.calview-card-media {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f3f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calview-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.calview-card-body {
  flex-grow: 1;
  min-width: 0;
}

.calview-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.calview-card-caption {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.calview-live-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #0b6e4b;
}

/* ---- Mobile single-post layout (screens/ClientApprovalMobile.html) ---- */
.capage-header-mobile {
  padding: 14px 16px;
}

.capage-header-mobile .capage-logo {
  width: 36px;
  height: 36px;
  font-size: 8px;
}

.capage-header-mobile .capage-header-meta strong {
  font-size: 15px;
}

.capage-mobile-body {
  flex-grow: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.capage-mobile-dots {
  display: flex;
  gap: 4px;
}

.capage-mobile-dot {
  flex-grow: 1;
  height: 6px;
  border-radius: 999px;
  background: #e4e0d8;
}

.capage-mobile-dot.is-current {
  background: #4b34e8;
}

.capage-mobile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.capage-mobile-meta strong {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  min-width: 0;
  overflow-wrap: break-word;
}

.capage-mobile-media {
  position: relative;
  height: 280px;
  border-radius: 22px;
  border: 2px solid #15171c;
  background: #ffe58f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.capage-mobile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capage-mobile-status {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eeebfd;
  border: 1.5px solid #15171c;
  font-size: 11px;
  font-weight: 800;
}

.capage-caption-short {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.capage-link-btn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  color: #2f1fa8;
  cursor: pointer;
}

.capage-mobile-actions {
  padding: 12px 16px 18px;
  background: #ffffff;
  border-top: 2px solid #15171c;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.capage-btn-block {
  width: 100%;
  height: 52px;
  font-size: 16px;
}

/* ==========================================================================
   BRAND MEMORY — "What the Assistant knows" (scoped to .brandmemory-playful).
   Matches screens/BrandMemory.html. Facts grouped by category with Edit/
   Forget, a real usage meter, and honest "learns from" toggles — only
   sources that are actually wired up show as on.
   ========================================================================== */
.brandmemory-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.brandmemory-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.brandmemory-add-form select,
.brandmemory-add-form input {
  height: 36px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink);
  padding: 0 12px;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--cp-font-body);
}

.brandmemory-add-form input {
  flex-grow: 1;
  min-width: 200px;
}

.brandmemory-error {
  color: #c4321a;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 10px;
}

.brandmemory-board-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.brandmemory-groups {
  flex-grow: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
}

@media (max-width: 960px) {
  .brandmemory-board-row { flex-direction: column; }
  .brandmemory-groups { grid-template-columns: 1fr; }
}

.brandmemory-group {
  background: var(--cp-card);
  border: 2px solid var(--cp-ink);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brandmemory-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brandmemory-group-head h3 {
  margin: 0;
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 18px;
}

.brandmemory-fact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid var(--cp-ink);
}

.brandmemory-fact-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brandmemory-fact-body {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cp-ink);
}

.brandmemory-fact-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brandmemory-source-tag {
  font-family: var(--cp-font-mono);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cp-mint);
  border: 1px solid var(--cp-ink);
}

.brandmemory-fact-meta span:last-child {
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-muted);
}

.brandmemory-derived-note {
  font-size: 10px;
  flex-shrink: 0;
}

.brandmemory-side {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brandmemory-side h3 {
  margin: 0 0 8px;
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 17px;
}

.brandmemory-sources {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brandmemory-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brandmemory-source-meta {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.brandmemory-source-meta strong {
  font-size: 13px;
  font-weight: 800;
}

.brandmemory-source-meta small {
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-muted);
}

.brandmemory-source-toggle {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #e4e0d8;
  border: 1.5px solid var(--cp-ink);
  position: relative;
  flex-shrink: 0;
}

.brandmemory-source-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1.5px solid var(--cp-ink);
  transition: left 0.15s ease;
}

.brandmemory-source-toggle.is-on {
  background: #0e8a5f;
}

.brandmemory-source-toggle.is-on::after {
  left: 18px;
}

.brandmemory-usage-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.brandmemory-usage-bar {
  height: 12px;
  border-radius: 999px;
  background: #f7f5f0;
  border: 1.5px solid var(--cp-ink);
  overflow: hidden;
  margin-bottom: 6px;
}

.brandmemory-usage-bar > div {
  height: 100%;
  background: var(--cp-indigo);
}

.brandmemory-privacy-card {
  background: #eeebfd;
}

.brandmemory-privacy-card strong {
  font-size: 13px;
  font-weight: 800;
}

.brandmemory-privacy-card p {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #2c3038;
}

.brandmemory-forget-all-btn {
  height: 42px;
  border-radius: 999px;
  border: 2px solid #c4321a;
  background: #ffffff;
  color: #c4321a;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.brandmemory-forget-all-btn:hover {
  background: #fbe9e4;
}

/* "All clients" row inside the workspace switcher dropdown */
.ws-switcher-all {
  border-bottom: 1.5px dashed var(--cp-dot, #e4e0d8);
  margin-bottom: 4px;
  padding-bottom: 8px;
}

.ws-switcher-badge-all {
  background: var(--cp-ink, #15171c) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   LINK IN BIO
   ========================================================================== */
.linkbio-url-card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--brand-primary-soft, #fff3cd);
}

.linkbio-url-text {
  flex-grow: 1;
  min-width: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  word-break: break-all;
}

.linkbio-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.linkbio-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: var(--radius-md, 10px);
  background: var(--bg-subtle, #f7f5f0);
  border: 1.5px solid var(--border, #e4e0d8);
}

.linkbio-link-row.is-dragging {
  opacity: 0.4;
}

.linkbio-link-row.is-editing {
  background: var(--bg-card, #fff);
}

.linkbio-link-row.is-editing input {
  flex: 1 1 160px;
  min-width: 0;
}

.linkbio-drag-handle {
  cursor: grab;
  color: var(--text-muted, #6b6257);
  font-weight: 800;
}

.linkbio-link-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-grow: 1;
}

.linkbio-link-info span {
  font-size: 12px;
  color: var(--text-muted, #4a4f5b);
  overflow-wrap: anywhere;
}

.linkbio-click-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  white-space: nowrap;
}

.linkbio-active-toggle {
  white-space: nowrap;
}

.linkbio-autoadd-card {
  gap: 6px;
}

.linkbio-stats-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.linkbio-stats-row > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.linkbio-stats-row strong {
  font-size: 22px;
  font-family: 'Bricolage Grotesque', Georgia, serif;
}

.linkbio-preview-col {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.linkbio-preview-phone {
  width: 100%;
  min-height: 420px;
  border: 3px solid var(--cp-ink, #15171c);
  border-radius: 32px;
  background: var(--cp-ink, #15171c);
  padding: 8px;
  box-sizing: border-box;
  display: flex;
}

.linkbio-preview-inner {
  flex-grow: 1;
  border-radius: 24px;
  background: var(--cp-peach, #ffcdb4);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.linkbio-preview-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--cp-ink, #15171c);
  object-fit: cover;
}

.linkbio-preview-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
}

.linkbio-preview-name {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-size: 17px;
}

.linkbio-preview-bio {
  font-size: 12px;
  font-weight: 600;
}

.linkbio-preview-links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.linkbio-preview-link-btn {
  display: block;
  padding: 10px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--cp-ink, #15171c);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .linkbio-preview-col {
    width: 100%;
  }
}

/* ==========================================================================
   IDEAS BOARD
   ========================================================================== */
.ideas-toolbar-actions {
  display: flex;
  gap: 10px;
}

.ideas-board-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}

.ideas-view-toggle {
  display: flex;
  border: 1.5px solid var(--border, #e4e0d8);
  border-radius: 999px;
  overflow: hidden;
}

.ideas-view-btn {
  height: 32px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary);
}

.ideas-view-btn.active {
  background: var(--cp-ink, #15171c);
  color: #fff;
  font-weight: 800;
}

.ideas-drag-hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: auto;
}

.ideas-board-columns {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}

.ideas-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  background: var(--bg-card, #fff);
  border: 2px solid var(--cp-ink, #15171c);
  min-height: 200px;
}

.ideas-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 15px;
}

.ideas-column-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--cp-ink, #15171c);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ideas-column-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 40px;
}

.ideas-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  background: var(--bg-subtle, #f7f5f0);
  border: 1.5px solid var(--border, #e4e0d8);
  cursor: grab;
}

.ideas-card.is-dragging {
  opacity: 0.4;
}

.ideas-card-thumb {
  height: 60px;
  border-radius: 10px;
  background: var(--cp-peach, #ffcdb4);
  border: 1.5px solid var(--border, #e4e0d8);
}

.ideas-card-title {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  color: inherit;
}

.ideas-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.ideas-card-format {
  flex-grow: 1;
}

.ideas-card-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cp-ink, #15171c);
  color: #fff;
}

.ideas-card-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--bg-card, #efe7da);
  border: 1.5px solid var(--border, #e4e0d8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}

.ideas-card-turn-into-post {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-primary, #2f1fa8);
  cursor: pointer;
}

.ideas-add-idea-btn {
  height: 34px;
  border-radius: 999px;
  border: 2px dashed var(--cp-ink, #15171c);
  background: transparent;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}

.ideas-add-column-btn {
  align-self: start;
  height: 44px;
  border-radius: 18px;
  border: 2px dashed var(--cp-ink, #15171c);
  background: var(--bg-card, #fff);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.idea-editor-modal {
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
}

.idea-editor-title-input {
  border: 0;
  border-bottom: 2px solid var(--cp-ink, #15171c);
  font-family: var(--cp-font-display, inherit);
  font-weight: 800;
  font-size: 22px;
  padding: 4px 0;
  background: transparent;
  resize: none;
  width: 100%;
}

.idea-editor-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.idea-editor-attachment-thumbs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.idea-editor-attachment-thumb {
  width: 48px;
  height: 60px;
  border-radius: 8px;
  border: 1.5px solid var(--cp-ink, #15171c);
  background-size: cover;
  background-position: center;
  position: relative;
}

.idea-editor-attachment-thumb button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--cp-ink, #15171c);
  background: #fff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.idea-editor-comments {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.idea-editor-comment {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--bg-subtle, #f7f5f0);
  border: 1.5px solid var(--cp-dot, #e4e0d8);
}

.idea-editor-comment strong {
  font-size: 11px;
  font-weight: 800;
}

.idea-editor-comment span {
  font-size: 12px;
  font-weight: 600;
}

.idea-editor-comment-add-row {
  display: flex;
  gap: 8px;
}

.idea-editor-comment-add-row input {
  flex-grow: 1;
  border: 1.5px solid var(--border, #e4e0d8);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
}

/* ---- Automations page ---- */
.automations-page-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
}

.automations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.automation-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  background: var(--bg-card, #fff);
  border: 2px solid var(--cp-ink, #15171c);
}

.automation-row-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid var(--cp-ink, #15171c);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.automation-row-info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.automation-row-info strong {
  font-size: 14px;
  font-weight: 800;
}

.automation-row-info small {
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-muted, #4a4f5b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.automation-row-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-subtle, #f7f5f0);
  border: 1.5px solid var(--cp-ink, #15171c);
  white-space: nowrap;
}

.automation-toggle {
  position: relative;
  display: inline-block;
}

.automation-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.automation-toggle-track {
  display: block;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d8d3c8;
  border: 1.5px solid var(--cp-ink, #15171c);
  position: relative;
  transition: background 0.15s;
  cursor: pointer;
}

.automation-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cp-ink, #15171c);
  transition: left 0.15s;
}

.automation-toggle input:checked + .automation-toggle-track {
  background: #0b6e4b;
}

.automation-toggle input:checked + .automation-toggle-track .automation-toggle-knob {
  left: 19px;
}

.automation-activity-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.automation-activity-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 0;
  border-top: 1.5px solid var(--cp-dot, #e4e0d8);
}

.automation-activity-row .mono-label {
  width: 110px;
  flex-shrink: 0;
  font-weight: 500;
}

.automation-activity-name {
  width: 130px;
  flex-shrink: 0;
}

.automation-activity-msg {
  flex-grow: 1;
}

.automations-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.automation-template-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 18px;
  border: 2px solid var(--cp-ink, #15171c);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.automation-template-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.automation-template-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.automation-template-btn span:last-child {
  font-size: 11px;
  font-weight: 600;
}

.automations-template-card {
  background: #fffbea;
}

.automations-safety-card {
  background: #f4f1ff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.automations-safety-card p {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  color: #2f1fa8;
  cursor: pointer;
}

.link-btn.is-danger {
  color: #c4321a;
}

.link-btn.is-active {
  color: #0b6e4b;
}

.inbox-platform-mod-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .ideas-board-columns {
    grid-template-columns: 1fr;
  }
  .ideas-drag-hint {
    display: none;
  }
}

/* Brand lockup: "Engage" bold, "Digital" regular — as in the EngageDigital design */
.brand-title-light {
  font-weight: 400;
}

/* ==========================================================================
   INBOX — "Playful" skin. 3-pane layout: Show/Channels sidebar, a sortable
   conversation list, and a persistent reply detail panel, all backed by
   real store.comments data (assign/done/hide/drafted-reply are genuine
   persisted fields, not UI-only state).
   ========================================================================== */
.inbox-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.inbox-header-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.inbox-header-title h1 {
  margin: 0;
  font-family: var(--cp-font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.03em;
}

.inbox-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inbox-assistant-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--cp-yellow);
  border: 2px solid var(--cp-ink);
  box-shadow: 3px 3px 0 var(--cp-ink);
}

.inbox-banner-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 800;
  font-size: 14px;
}

.inbox-banner-text small {
  font-size: 11px;
  font-weight: 700;
  color: #2c3038;
}

.inbox-banner-review-btn {
  background: var(--cp-ink);
  color: #ffffff;
}

.inbox-body-row {
  flex-grow: 1;
  display: flex;
  gap: 14px;
  min-height: 0;
}

.inbox-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--cp-card);
  border: 2px solid var(--cp-ink);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.inbox-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.inbox-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--cp-ink);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.inbox-nav-item span:first-of-type {
  flex-grow: 1;
}

.inbox-nav-item:hover {
  background: #f7f5f0;
}

.inbox-nav-item.is-active {
  background: var(--cp-ink);
  color: #ffffff;
}

.inbox-nav-item.is-active .mono-label {
  color: #ffffff;
}

.inbox-sync-note {
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-muted);
  line-height: 1.4;
  padding: 0 4px;
}

.inbox-list-pane {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.inbox-list-sort {
  display: flex;
  gap: 6px;
}

.inbox-conversation-list {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inbox-row {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: var(--cp-card);
  border: 2px solid var(--cp-ink);
  color: var(--cp-ink);
  text-align: left;
  cursor: pointer;
  font-family: var(--cp-font-body);
}

.inbox-row:hover {
  box-shadow: 2px 2px 0 var(--cp-ink);
}

.inbox-row.is-selected {
  box-shadow: 3px 3px 0 var(--cp-indigo);
}

.inbox-row-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1.5px solid var(--cp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}

.inbox-row-platform {
  position: absolute;
  right: -6px;
  bottom: -6px;
  line-height: 0;
}

.inbox-row-platform svg {
  border-radius: 999px;
  border: 1.5px solid var(--cp-ink);
}

.inbox-row-body {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inbox-row-head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.inbox-row-head strong {
  font-size: 13px;
  font-weight: 800;
}

.inbox-row-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--cp-muted);
  flex-shrink: 0;
}

.inbox-row-snippet {
  font-size: 13px;
  font-weight: 600;
  color: #2c3038;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-row-tags {
  display: flex;
  gap: 6px;
  align-items: center;
}

.inbox-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #efe7da;
  color: var(--cp-ink);
}

.inbox-tag.is-drafted {
  background: #eeebfd;
  color: #2f1fa8;
}

.inbox-detail-pane {
  flex-grow: 1;
  min-width: 0;
  background: var(--cp-card);
  border: 2px solid var(--cp-ink);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inbox-detail-empty {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--cp-muted);
}

.inbox-detail-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.inbox-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--cp-ink);
  background: var(--cp-mint);
  flex-wrap: wrap;
}

.inbox-detail-avatar {
  flex-shrink: 0;
  line-height: 0;
}

.inbox-detail-headmeta {
  flex-grow: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
}

.inbox-detail-headmeta strong {
  font-size: 15px;
  font-weight: 800;
}

.inbox-detail-headmeta .mono-label {
  color: #0b4a33;
}

.inbox-detail-scroll {
  flex-grow: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #faf9f6;
  overflow-y: auto;
  min-height: 0;
}

.inbox-original-bubble {
  align-self: flex-start;
  max-width: 85%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #ffffff;
  border: 2px solid var(--cp-ink);
  border-radius: 20px 20px 20px 6px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.inbox-stars {
  color: #b8481c;
  font-size: 14px;
  letter-spacing: 2px;
}

.inbox-reply-bubble {
  align-self: flex-end;
  max-width: 92%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #eeebfd;
  border: 2px solid var(--cp-ink);
  border-radius: 20px 20px 6px 20px;
  padding: 12px 14px;
}

.inbox-reply-bubble.is-sent {
  background: #f1faf5;
}

.inbox-reply-bubble.is-sent strong {
  font-size: 12px;
  font-weight: 800;
  color: #0b6e4b;
}

.inbox-reply-bubble.is-sent p {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.inbox-draft-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cp-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #2f1fa8;
}

.inbox-reply-bubble textarea {
  border: 1.5px solid var(--cp-ink);
  border-radius: 14px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  resize: none;
  background: #ffffff;
  font-family: var(--cp-font-body);
}

.inbox-draft-why {
  font-size: 11px;
  font-weight: 700;
  color: #2c3038;
}

.inbox-reply-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inbox-detail-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 2px solid var(--cp-ink);
}

.inbox-detail-footer > .muted-text {
  flex-grow: 1;
  font-size: 11px;
  font-weight: 700;
}

.inbox-detail-footer-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .inbox-body-row {
    flex-direction: column;
  }
  .inbox-sidebar,
  .inbox-list-pane {
    width: 100%;
  }
}

/* ---- Inbox review-queue + saved-replies combined modal ---- */
.inbox-rq-modal {
  max-width: 1180px;
  width: 100%;
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.inbox-rq-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  max-height: 88vh;
}

.inbox-rq-tile {
  display: flex;
  flex-direction: column;
  background: var(--cp-card, #ffffff);
  border: 2px solid var(--cp-ink, #15171c);
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  max-height: 88vh;
}

.inbox-rq-tile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--cp-ink, #15171c);
}

.inbox-rq-head-queue {
  background: var(--cp-yellow, #ffe58f);
}

.inbox-rq-head-saved {
  background: var(--cp-mint, #a8e6c9);
}

.inbox-rq-tile-num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--cp-ink, #15171c);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inbox-rq-tile-title {
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.inbox-rq-new-btn {
  margin-left: auto;
  background: var(--cp-indigo, #4b34e8);
  color: #ffffff;
}

.inbox-rq-tile-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  min-height: 0;
  overflow-y: auto;
}

.inbox-queue-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inbox-rq-search {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 2px solid var(--cp-ink, #15171c);
  flex-shrink: 0;
}

.inbox-rq-search input {
  border: 0;
  outline: none;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
}

.inbox-context-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #faf9f6;
  border: 1.5px solid var(--cp-ink, #15171c);
}

.inbox-context-thumb {
  width: 60px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: var(--cp-purple, #cfc5fb);
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--cp-ink, #15171c);
}

.inbox-context-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.inbox-context-body a {
  color: #2f1fa8;
}

.inbox-context-caption {
  font-size: 13px;
  font-weight: 700;
}

.inbox-context-stats {
  font-size: 11px;
  font-weight: 700;
  color: #4a4f5b;
}

.inbox-queue-more-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.inbox-queue-assign {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
}

.inbox-queue-assign select {
  border: 1.5px solid var(--cp-ink, #15171c);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 700;
}

.inbox-queue-cap {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #4a4f5b;
}

.saved-reply-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #4a4f5b;
}

.saved-reply-edit-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #f4f1ff;
  border: 2px solid var(--cp-ink, #15171c);
}

.saved-reply-editor-title {
  font-size: 13px;
  font-weight: 800;
}

.saved-reply-edit-panel textarea {
  border: 1.5px solid var(--cp-ink, #15171c);
  border-radius: 12px;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  resize: vertical;
}

.inbox-lang-seg {
  display: flex;
  border: 2px solid var(--cp-ink, #15171c);
  border-radius: 999px;
  overflow: hidden;
  align-self: flex-start;
}

.inbox-lang-seg button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  background: #ffffff;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}

.inbox-lang-seg button.is-active {
  background: var(--cp-ink, #15171c);
  color: #ffffff;
}

.saved-reply-slash-popup {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  background: #ffffff;
  border: 2px solid var(--cp-ink, #15171c);
  box-shadow: 3px 3px 0 var(--cp-ink, #15171c);
  max-height: 180px;
  overflow-y: auto;
}

.saved-reply-slash-popup button {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.saved-reply-slash-popup button:hover {
  background: #f4f1ff;
}

.saved-reply-slash-popup button strong {
  color: #2f1fa8;
  flex-shrink: 0;
}

.saved-reply-slash-popup button span {
  color: #4a4f5b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .inbox-rq-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .inbox-rq-tile {
    max-height: none;
  }
}