@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..900&display=swap');

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

:root {
  --sidebar-w: 216px;
  --dash-preview-rows: 5;
  --dash-preview-row-h: 48px;
  --dash-preview-head-h: 30px;
  --dash-preview-table-h: calc(var(--dash-preview-head-h) + var(--dash-preview-rows) * var(--dash-preview-row-h));

  /* Dark surfaces - original deep dark-blue navy (reverted from the lighter
     grey-blue "3-level" experiment back to the rich original tones). */
  --bg:             #0D1B38;
  --surface:        #0B1324;
  --surface-raised: #101A2E;
  --surface-high:   #13203A;
  --sidebar-bg:     #08101D;

  /* Surface layers - deep navy, subtle steps. Level 0 = page (darkest),
     Level 1 = cards/panels, Level 2 = inner rows / stat tiles. */
  --surface-0:      #0D1B38;
  --surface-1:      #0E1A2E;
  --surface-1-grad: linear-gradient(160deg, #112038 0%, #0C1726 100%);
  --surface-2:      #13203A;

  /* Text - warm blue-gray, premium neutral - toned down from pure white */
  --text:           #CBD9EB;
  --text-secondary: #C0CFE2;
  --text-muted:     #A4B6CB;

  /* Dashboard typography tokens - muted blue-gray hierarchy (no pure/near white) */
  --tresso-text-primary:   #d7e4f5;
  --tresso-text-secondary: #9fb2cc;
  --tresso-text-muted:     #7f92ad;

  /* Borders */
  --border:         rgba(140, 170, 220, 0.16);
  --border-strong:  rgba(140, 170, 220, 0.24);
  --border-sidebar: rgba(140, 170, 220, 0.08);
  --border-blue:    rgba(96, 165, 250, 0.22);

  /* Accent */
  --accent:         #3B6CFF;
  --accent-hover:   #2F5BE0;
  --accent-glow:    rgba(59, 108, 255, 0.18);
  --accent-surface: rgba(59, 108, 255, 0.12);

  /* Branded selects */
  --select-bg:           #122038;
  --select-bg-hover:     #152845;
  --select-bg-active:    rgba(59, 108, 255, 0.14);
  --select-border:       rgba(96, 140, 255, 0.24);
  --select-border-hover: rgba(96, 140, 255, 0.40);
  --select-border-focus: rgba(59, 108, 255, 0.58);
  --select-text:         #C8D8EC;
  --select-text-hover:   #DCE8FF;
  --select-text-focus:   #EAF1FF;
  --select-option-bg:    #13203A;
  --select-option-text:  #C4D4E8;

  /* States */
  --success:          #60A5FA;
  --success-surface:  rgba(79, 141, 255, 0.14);
  --error:            #E06060;
  --error-surface:    rgba(224, 96, 96, 0.14);
  --warning:          #5DA9FF;
  --warning-surface:  rgba(93, 169, 255, 0.14);

  /* License / subscription "Active" — purple, word + dot matched (status bar + billing). */
  --status-active:        #C490FF;
  --status-active-dot:    #C490FF;
  --status-active-bg:     rgba(168, 85, 247, 0.14);
  --status-active-border: rgba(168, 85, 247, 0.28);

  /* ── Consolidated status-badge palette (single source of truth) ──────────────
     ONE set of state colors reused by the canonical .status-badge--* modifiers and
     every legacy badge/pill/chip family, so the SAME state looks the SAME everywhere. */
  --badge-connected-bg: rgba(59,130,246,0.16);  --badge-connected-fg: #8FC3FF;  --badge-connected-bd: rgba(96,165,250,0.42);
  --badge-live-bg:      rgba(52,211,153,0.13);   --badge-live-fg:      #34D399;   --badge-live-bd:      rgba(52,211,153,0.30);
  --badge-soon-bg:      rgba(140,163,184,0.10);  --badge-soon-fg:      #9AB0CC;   --badge-soon-bd:      rgba(140,163,184,0.24);
  --badge-pending-bg:   rgba(249,168,212,0.14);  --badge-pending-fg:   #F9A8D4;   --badge-pending-bd:   rgba(249,168,212,0.38);
  --badge-disabled-bg:  rgba(148,163,184,0.10);  --badge-disabled-fg:  var(--text-muted, #94A3B8);  --badge-disabled-bd:  rgba(148,163,184,0.22);
  --badge-locked-bg:    rgba(148,163,184,0.10);  --badge-locked-fg:    #AEBFD6;   --badge-locked-bd:    rgba(148,163,184,0.24);
  --badge-error-bg:     var(--error-surface);    --badge-error-fg:     var(--error); --badge-error-bd:  rgba(224,96,96,0.30);

  /* Shadows */
  --shadow-card:  0 2px 8px rgba(0,0,0,0.32), 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.055);
  --shadow-hover: 0 4px 16px rgba(0,0,0,0.44), 0 16px 48px rgba(0,0,0,0.38);
  --shadow-sidebar: 1px 0 0 var(--border-sidebar), 4px 0 24px rgba(0,0,0,0.22);

  /* Radius */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 18px;

  --page-pad: 28px;

  /* Shared app canvas - body, main, and every page scroll area.
     Flat approved navy (#0D1B38). No glow, no center stripe, no overlays. */
  --app-bg-base: #0D1B38;
  --app-bg-accent: none;

  /* Dashboard/queue table rows - subtle alternation, stronger only on hover/selected. */
  --table-header-bg:   rgba(7, 18, 36, 0.72);
  --table-row-bg:      rgba(15, 35, 66, 0.44);
  --table-row-alt-bg:  rgba(18, 43, 80, 0.54);
  --table-row-hover-bg:rgba(33, 78, 138, 0.34);
  --table-row-border:  rgba(148, 163, 184, 0.08);

  /* ── Centralized platform color tokens (single source of truth) ──────────
     YouTube/YT = red/coral · Instagram/IG = purple · TikTok/TT = cyan
     All/Both = neutral slate (never a platform color). Every platform pill,
     label, metric, badge, link, and dropdown option resolves to these. */
  --platform-youtube:        #F87171;
  --platform-youtube-bg:     rgba(248, 113, 113, 0.16);
  --platform-youtube-border: rgba(248, 113, 113, 0.38);

  --platform-instagram:        #C084FC;
  --platform-instagram-bg:     rgba(192, 132, 252, 0.16);
  --platform-instagram-border: rgba(192, 132, 252, 0.38);

  --platform-tiktok:        #22D3EE;
  --platform-facebook:        #1877F2;
  --platform-facebook-bg:     rgba(24, 119, 242, 0.16);
  --platform-facebook-border: rgba(24, 119, 242, 0.42);
  --platform-pinterest:        #f472b6;
  --platform-pinterest-bg:     rgba(244, 114, 182, 0.12);
  --platform-pinterest-border: rgba(244, 114, 182, 0.42);
  --platform-tiktok-bg:     rgba(34, 211, 238, 0.16);
  --platform-tiktok-border: rgba(34, 211, 238, 0.38);

  --platform-threads:        #BCC8DA;
  --platform-threads-bg:     rgba(188, 200, 218, 0.16);
  --platform-threads-border: rgba(188, 200, 218, 0.38);

  --platform-neutral:        #CBD5E1;
  --platform-neutral-bg:     rgba(148, 163, 184, 0.12);
  --platform-neutral-border: rgba(148, 163, 184, 0.28);
}

/* Pulsing "thinking" state for in-progress buttons (e.g. Retry -> Queuing...). */
@keyframes btn-pulsing {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.btn-pulsing {
  animation: btn-pulsing 0.9s ease-in-out infinite;
}

/* ── Shared platform class family - use everywhere via getPlatformClass() ──── */
.platform-chip,
.platform-label,
.platform-filter-option,
.platform-metric {
  color: var(--platform-neutral);
}
.platform--youtube   { color: var(--platform-youtube);   background: var(--platform-youtube-bg);   border-color: var(--platform-youtube-border); }
.platform--instagram { color: var(--platform-instagram); background: var(--platform-instagram-bg); border-color: var(--platform-instagram-border); }
.platform--facebook { color: var(--platform-facebook); background: var(--platform-facebook-bg); border-color: var(--platform-facebook-border); }
.platform--tiktok    { color: var(--platform-tiktok);    background: var(--platform-tiktok-bg);    border-color: var(--platform-tiktok-border); }
.platform--all,
.platform--both,
.platform--neutral   { color: var(--platform-neutral);   background: var(--platform-neutral-bg);   border-color: var(--platform-neutral-border); }

/* Inter (variable) bundled locally so the UI actually renders in Inter offline -
   previously 'Inter' was named but never loaded, so Windows fell back to Segoe UI
   (the "muddy" look). Variable file covers weights 100-900. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #F4EBDD;
  background: var(--app-bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Custom checkboxes - dim appearance to match dark UI ────────────── */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
  vertical-align: middle;
}
input[type="checkbox"]:hover {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.07);
}
input[type="checkbox"]:checked {
  background: var(--accent, #3b6cff);
  border-color: var(--accent, #3b6cff);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
input[type="checkbox"]:indeterminate {
  background: var(--accent, #3b6cff);
  border-color: var(--accent, #3b6cff);
}
input[type="checkbox"]:indeterminate::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 4px;
  width: 8px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  /* Premium dark rail (dashboard revamp 2026-07-08): deep-navy gradient + hairline right border. */
  background: linear-gradient(180deg, #06111f 0%, #071426 100%);
  border-right: 1px solid rgba(93, 132, 190, 0.22);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  box-shadow: var(--shadow-sidebar);
  position: relative;
  z-index: 10;
}

.sidebar-logo {
  /* Intentional brand zone: roomy top/side padding and a clear gap before the
     nav, so the mark reads as the product brand, not a sticker in the corner.
     Tightened bottom space so the Campaign section sits closer under the logo. */
  padding: 18px 18px 14px;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;   /* center the brand mark in the sidebar width */
}

.sidebar-logo-img {
  /* Wide TRESSO lockup — sized to the narrow nav rail, not the other way around. */
  display: block;
  width: 100%;
  max-width: 196px;
  height: auto;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}

.nav-campaign-wrap {
  padding: 8px 14px 8px;
  border-bottom: 1px solid var(--border-sidebar);
}
.nav-campaign-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.nav-campaign-select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  appearance: auto;
}
.nav-campaign-select:hover { border-color: rgba(255,255,255,0.18); }
.nav-campaign-select:focus { border-color: var(--accent); }

.sidebar-nav {
  flex: 1;
  padding: 8px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* No scrollbar on the nav rail - it reads as noise. Scrolls via wheel/trackpad;
     the nav is short enough that a visible bar is rarely needed. Clean and quiet. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  color: #B8C4D8;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
  user-select: none;
  position: relative;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
}

.nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: #FFFFFF;
}

/* Original active state (restored per owner — no solid blue pill). */
.nav-item.active {
  background: rgba(59, 108, 255, 0.11);
  color: #C5D8FF;
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-item svg { flex-shrink: 0; opacity: 0.55; transition: opacity 0.14s; }
.nav-item:hover svg  { opacity: 0.75; }
.nav-item.active svg { opacity: 1; }

/* Connection status dot on Connections nav item */
.nav-conn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-left: auto; flex-shrink: 0;
  background: var(--error);
  box-shadow: 0 0 6px rgba(224,92,92,0.6);
  animation: connDotPulse 2s ease-in-out infinite;
}
@keyframes connDotPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.sidebar-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 10px 10px 12px;
  border-top: 1px solid var(--border-sidebar);
}

/* Bottom of sidebar: premium plan card + user tile (mockup look, real license data). */
.sidebar-license-info {
  width: 100%;
  min-width: 0;
  margin: 0 0 10px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-user {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  padding: 8px 10px; border-radius: 11px; text-align: left; cursor: pointer; color: inherit; font: inherit;
  border: 1px solid var(--border-sidebar); background: rgba(255,255,255,0.015);
}
.sb-user:hover { background: rgba(255,255,255,0.03); border-color: rgba(96,165,250,0.22); }
.sb-user-avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(45,123,255,.18); color: #6FB0FF; }
.sb-user-copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; flex: 1; }
.sb-user-name { font-size: 12.5px; font-weight: 600; color: #EAF2FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 11px; color: #8EA0BA; }
/* Status dot shows ONLY on a problem (warning). No persistent green "active" dot. */
.sb-user-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #F97316; box-shadow: 0 0 0 2px rgba(249,115,22,.18); }
.sb-user-dot--warn { background: #F97316; box-shadow: 0 0 0 2px rgba(249,115,22,.20); }
.sidebar-license-info--warn .sb-user { border-color: rgba(249,115,22,.4); }
.sidebar-license-info--warn .sb-user-role { color: #F9A56B; font-weight: 600; }
.sidebar-license-info-inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-sidebar);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.sidebar-license-info-inner:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(96, 165, 250, 0.22);
}
.sidebar-license-info-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  margin-top: 4px;
  flex-shrink: 0;
  background: var(--status-active-dot);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18);
}
.sidebar-license-info--warn .sidebar-license-info-dot {
  background: #00C6FF;
  box-shadow: 0 0 0 2px rgba(0, 198, 255, 0.18);
}
.sidebar-license-info--off .sidebar-license-info-dot {
  background: #FF3333;
  box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.18);
}
.sidebar-license-info-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.sidebar-license-info-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
}
.sidebar-license-info-email {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.scheduler-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 4px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(79,141,255,0.28); }
  50%       { box-shadow: 0 0 0 5px rgba(79,141,255,0.08); }
}

.status-dot.running {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(79,141,255,0.22);
  animation: statusPulse 2.4s ease-in-out infinite;
}

.status-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }

.btn-scheduler {
  width: 100%;
  padding: 10px;
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(59, 108, 255, 0.55);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, box-shadow 0.16s, border-color 0.16s;
  background: rgba(59, 108, 255, 0.24);
  color: #C5D8FF;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 16px rgba(59,108,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.btn-scheduler:hover {
  background: rgba(59, 108, 255, 0.38);
  border-color: rgba(59, 108, 255, 0.75);
  box-shadow: 0 0 28px rgba(59, 108, 255, 0.32), inset 0 1px 0 rgba(255,255,255,0.10);
}

.sidebar-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0;
  font-size: 10px;
  flex-shrink: 0;
}
.sidebar-legal a {
  color: var(--text-tertiary, #3a5070);
  text-decoration: none;
  transition: color 0.2s;
}
.sidebar-legal a:hover { color: var(--text-secondary); }
.sidebar-legal-sep { color: var(--text-tertiary, #3a5070); }
/* Copyright + trademark ownership notice (matches the site's legal entity). */
.sidebar-copyright {
  margin-top: 6px;
  padding: 0 8px 2px;
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
  color: var(--text-tertiary, #3a5070);
  flex-shrink: 0;
}

/* ── Mobile app shell (remote access / phone browsers) ─────────────────── */
@media (max-width: 768px) {
  :root { --page-pad: 12px; }

  html {
    overflow-x: hidden;
    width: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    height: 100dvh;
    height: -webkit-fill-available;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(92vw, var(--sidebar-w));
    min-width: 0;
    max-width: 92vw;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    z-index: 200;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
    z-index: 100030;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
    z-index: 100025;
  }

  .main {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    overflow-x: hidden;
    height: 100dvh;
    height: -webkit-fill-available;
  }

  .topbar {
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
    gap: 8px;
    align-items: center;
  }

  .topbar-left { align-items: center; }
  .topbar-subtitle { display: none; }
  .topbar-actions {
    min-width: 0;
    flex-shrink: 1;
  }
  .topbar-actions .topbar-btn-neutral { display: none; }
  .topbar-actions .topbar-btn-secondary { display: none; }
  .topbar-btns { gap: 8px; }
  .topbar-btns .topbar-btn-primary {
    padding: 0 10px;
    font-size: 11.5px;
  }

  .app-global-status-bar {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

  .page-content {
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

  .page {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  #page-dashboard.active {
    min-height: 0;
    gap: 14px;
    padding-bottom: 16px;
  }

  .dash-toolbar {
    justify-content: stretch;
    flex-wrap: wrap;
  }
  .dash-toolbar-select {
    flex: 1;
    min-width: 0;
    max-width: 100%;
  }

  .dash-status-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 10px 12px;
    font-size: 11.5px;
  }
  .dash-hs-sep { display: none; }
  .dash-hs-item { white-space: normal; min-width: 0; }

  .dash-kpi-card {
    padding: 12px 12px;
    min-height: 72px;
  }
  .dash-kpi-icon { display: none; }
  .dash-kpi-value { font-size: 22px; }

  .dash-panel--main > :not(.dash-panel-hdr),
  .dash-panel--perf > :not(.dash-panel-hdr) {
    padding: 12px 12px 14px;
  }

  .page-content { overflow-y: auto; }
}

@media (max-width: 900px) {
  /* Dashboard tables → stacked cards (no 520px horizontal bleed) */
  .up-table-wrap--dashboard {
    overflow: visible;
    max-width: 100%;
  }
  .up-table-wrap--dashboard .up-table,
  .up-table-wrap--dashboard .dash-table {
    min-width: 0 !important;
    width: 100%;
    display: block;
  }
  .up-table-wrap--dashboard thead { display: none; }
  .up-table-wrap--dashboard tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .up-table-wrap--dashboard tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: rgba(255, 255, 255, 0.02);
  }
  .up-table-wrap--dashboard .dash-td {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    white-space: normal;
  }
  .up-table-wrap--dashboard .dash-td::before {
    flex-shrink: 0;
    min-width: 68px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 2px;
  }
  .up-table-wrap--dashboard .dash-td.col-file {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .up-table-wrap--dashboard .dash-td.col-file::before { content: 'Video'; }
  .up-table-wrap--dashboard .dash-td.col-campaign::before { content: 'Campaign'; }
  .up-table-wrap--dashboard .dash-td.col-sched::before { content: 'When'; }
  .up-table-wrap--dashboard .dash-td.col-plats::before { content: 'Platforms'; }
  .up-table-wrap--dashboard .dash-td.col-actions {
    justify-content: flex-end;
    padding-top: 4px;
  }
  .up-table-wrap--dashboard .dash-td.col-actions::before { display: none; }
  .up-table-wrap--dashboard .dash-filename {
    white-space: normal;
    word-break: break-word;
  }
  .up-table-wrap--dashboard .up-plats-cell {
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
  }

}

@media (max-width: 480px) {
  .topbar-btns .topbar-btn-text { display: none; }
  .topbar-btns .topbar-btn-primary .btn-icon,
  .topbar-btns .topbar-btn-primary svg { margin-right: 0; }
  .topbar-btns .topbar-btn-primary { padding: 0 9px; }
}

.btn-scheduler.running {
  background: rgba(224,96,96,0.10);
  color: #FFC4C4;
  border-color: rgba(224,96,96,0.28);
  box-shadow: none;
}

.btn-scheduler.running:hover {
  background: rgba(224,96,96,0.18);
  border-color: rgba(224,96,96,0.46);
  box-shadow: 0 0 18px rgba(224,96,96,0.16);
  color: #FFD8D8;
}

.btn-scheduler:active { transform: scale(0.97); transition-duration: 0.06s; }

/* ── Main layout ──────────────────────────────────────────────────────── */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
  /* Flat canvas - no center glow. */
  background: var(--app-bg-base);
}

.topbar {
  background: linear-gradient(180deg, #0F1B30 0%, var(--surface) 70%);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--page-pad);
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-shrink: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.topbar-left-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
@media (min-width: 769px) {
  .mobile-menu-btn { display: none; }
}
.mobile-menu-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(3, 10, 24, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* GLOBAL RULE: every page title is the same size everywhere — the larger 24px/800.
   No per-page overrides. If a title needs to differ, that is a bug, not a feature. */
.topbar-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
/* "· N scheduled" / "· N total" count that lives in the page title - muted and
   lighter so the title still reads as the title. */
.topbar-title-count { font-weight: 500; color: var(--text-muted); }

.topbar-subtitle { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; flex-wrap: wrap; position: relative; }

/* ── Global account status bar (Phase A) ──────────────────────────────── */
.account-status-bar {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.96) 0%, rgba(11, 19, 36, 0.92) 100%);
}
.account-status-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px var(--page-pad);
  min-height: 52px;
}
.account-status-bar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(79, 141, 255, 0.16);
}
.account-status-bar--info .account-status-bar-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 108, 255, 0.16);
}
.account-status-bar--warn .account-status-bar-dot {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(93, 169, 255, 0.16);
}
.account-status-bar--error .account-status-bar-dot {
  background: var(--error);
  box-shadow: 0 0 0 3px rgba(224, 96, 96, 0.16);
}
.account-status-bar-copy {
  flex: 1;
  min-width: 0;
}
.account-status-bar-message {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.account-status-bar-detail {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 2px;
}
.account-status-bar-detail:empty { display: none; }
.account-status-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.account-status-bar-actions .btn { white-space: nowrap; }

/* ── Global app status bar (scheduler + license) ─────────────────────────── */
/* Host for the single shared status row - just page padding, no card chrome. */
.app-global-status-bar {
  flex-shrink: 0;
  padding: 0 var(--page-pad);
  background: none;
  border: none;
}

/* ── Shared app status row (Dashboard / Queue / History / ...) ───────────── */
/* Status row = a compact glass chip strip in its own rounded container, so it
   reads as a calm status block and not loose text blended into the tabs. */
.app-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 9px 16px;
  margin: 6px 0 12px;
  background: rgba(15, 35, 66, 0.55);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
}
.app-status-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.18);
  white-space: nowrap;
}
.app-status-item--clickable { cursor: pointer; }
.app-status-item--clickable:hover { background: rgba(96, 165, 250, 0.16); border-color: rgba(96, 165, 250, 0.30); }

/* Lock TRESSO button - pushed to the right of the status row */
.app-status-lock-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; height: 30px; padding: 0 14px;
  font-size: 13px; font-weight: 600; color: var(--text, #F5F5F3);
  background: rgba(96, 165, 250, 0.10); border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.app-status-lock-btn:hover { background: rgba(96, 165, 250, 0.18); border-color: rgba(96, 165, 250, 0.34); }
.app-status-lock-btn svg { flex-shrink: 0; }

/* Lock screen sits above every other overlay/modal */
.lock-overlay { z-index: 100000; }
.lock-pin-input { text-align: center; letter-spacing: 0.4em; font-size: 18px; }
.lock-pin-input::placeholder { letter-spacing: normal; }

/* Generic form fields (e.g. Pinterest board picker) — were unstyled and rendered as
   browser-default WHITE. Match the app's dark surface theme. */
.form-input, .form-select {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-high, #13203A);
  color: #E8EFFA;
  border: 1px solid var(--border-strong, rgba(140, 170, 220, 0.24));
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
.form-input::placeholder { color: rgba(160, 185, 220, 0.5); }
.form-control::placeholder, textarea.form-control::placeholder { color: rgba(160, 185, 220, 0.5); }
.form-input:focus, .form-select:focus {
  outline: none;
  border-color: #1877F2;
  box-shadow: 0 0 0 3px var(--border-blue, rgba(96, 165, 250, 0.22));
}
.form-select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.form-select option { background: var(--surface-high, #13203A); color: #E8EFFA; }
.lock-running-note { color: var(--text-muted, #94A3B8); font-size: 12.5px; }

/* App Lock settings card — one compact settings block, not a full-width banner. */
.lock-settings-card { padding: 20px 22px; }
.lock-settings-card .setup-card-desc { max-width: 600px; margin-bottom: 8px; line-height: 1.5; text-wrap: pretty; }
/* Auto-lock row: label sized to its content with the selector right beside it - no
   stretched column stranding the select at the far right (which left dead space). */
.lock-settings-row {
  display: grid;
  grid-template-columns: max-content 180px;
  justify-content: start;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.lock-settings-label { font-size: 13px; color: var(--text-b, #C9D2E3); line-height: 1.5; }
.lock-settings-select {
  width: 100%; height: 34px; padding: 0 10px; border-radius: 8px;
  background: rgba(0,0,0,0.18); color: var(--text, #F5F5F3);
  border: 1px solid var(--border, rgba(148,163,184,0.14)); font-size: 13px;
}
.lock-settings-actions { display: flex; gap: 8px; margin-top: 16px; }
@media (max-width: 560px) { .lock-settings-row { grid-template-columns: 1fr; } }
.app-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #60A5FA;          /* Running / Connected / On - light blue (our palette), never green */
  flex-shrink: 0;
}
.app-status-dot--warn { background: #F97316; }   /* License / Active / Pending */
.app-status-dot--off  { background: #FF3333; }   /* Failed / Disconnected */
.app-status-label { color: #CFE1FF; font-weight: 600; }
.app-status-value { color: #60A5FA; font-weight: 700; }
.app-status-value.is-on  { color: #60A5FA; }
.app-status-value.is-off { color: #94A3B8; }
.app-status-value.is-stopped { color: #F87171; }
.app-status-item--license-ok .app-status-dot { background: var(--status-active-dot); }
.app-status-item--license-ok .app-status-value { color: var(--status-active); }
.app-status-item--license-warn .app-status-dot { background: #00C6FF; }
.app-status-item--license-warn .app-status-value { color: #7DD3FC; }
.app-status-item--license-off .app-status-dot { background: #FF3333; }
.app-status-item--license-off .app-status-value { color: #F87171; }

/* ── Connections panel: three labelled sections (System / Live / Coming soon) ──
   The status row is restructured from one wrapped "pill soup" into stacked, labelled
   sections so it reads as an intentional status block. Destination pills are equal-width
   and wrap cleanly; System pills keep their own (.app-status-item) styling. */
.app-status-row.conn-sections {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}
.conn-sec {
  display: flex;
  align-items: center;
  gap: 12px;
}
.conn-sec-title {
  flex: 0 0 118px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9EC5FF;
}
/* Platform logo inside a Connections destination pill. */
.conn-pill-logo { width: 16px; height: 16px; flex: none; border-radius: 4px; }
.conn-pill--soon .conn-pill-logo { opacity: 0.85; }
/* Diagnostics: Scheduler + Problems Found on the same row (equal width, not stacked). */
.diag-2col { display: flex; gap: 14px; align-items: stretch; margin-bottom: 22px; }
.diag-2col > .diag-section { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
/* Account-header status as subtle metadata under the platform name (not a loud green pill). */
.dxhero-type-status { color: #8FA3C0; font-weight: 500; }
/* Diagnostics 2-col: Problems Found (.setup-card) is styled to be IDENTICAL to the Scheduler card
   (.dash-health-card) — same background, border, radius, padding, and title size/weight/color — so
   the two cards read as a matched pair. Equal height comes from .diag-2col { align-items: stretch }. */
.diag-2col > .setup-card {
  background: var(--card, #0F2342);
  border-color: var(--border, rgba(148, 163, 184, 0.10));
  border-radius: 14px;
  box-shadow: none;
  padding: 16px 18px;                 /* match .dash-health-card */
}
.diag-2col > .setup-card > .setup-card-title {
  font-size: 14px;                    /* match .dhc-title */
  font-weight: 700;
  color: var(--text, #F5F5F3);
  margin-bottom: 10px;                /* match .dhc-head bottom margin */
}
.conn-sec-pills {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 164px));
  gap: 8px;
}
/* Coming soon: fixed 3-column grid so the six destinations render as a clean 3x2 and TikTok
   (placed last) sits directly UNDER YouTube. */
.conn-sec--soon .conn-sec-pills {
  grid-template-columns: repeat(3, minmax(150px, 164px));
}
@media (max-width: 720px) {
  .conn-sec--soon .conn-sec-pills { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
/* System section keeps its two distinct pills at natural width (not the destination grid). */
.conn-sec--system .conn-sec-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
/* Destination pill: equal-width, calm, no dotted underline, no dot. */
.conn-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.09);
  border: 1px solid rgba(96, 165, 250, 0.18);
  font-size: 12px;
  overflow: hidden;
}
.conn-pill-label { color: #CFE1FF; font-weight: 600; white-space: nowrap; }
.conn-pill-value {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
/* Live + connected = stronger blue (driven by app.js toggling .is-on on the value). */
.conn-pill--connected,
.conn-pill:has(.app-status-value.is-on) {
  background: var(--badge-connected-bg);
  border-color: var(--badge-connected-bd);
}
.conn-pill--connected .conn-pill-value,
.conn-pill:has(.app-status-value.is-on) .conn-pill-value { color: var(--badge-connected-fg); }
/* Coming soon = neutral grey/blue; must never read as a setup failure. */
.conn-pill--soon {
  background: rgba(140, 163, 184, 0.08);
  border-color: rgba(140, 163, 184, 0.20);
}
.conn-pill--soon .conn-pill-label { color: #AEBFD6; }
.conn-pill--soon .conn-pill-value { color: #8CA0BC; }
/* Lock button: consistently pinned to the bottom-right of the card, never floating. */
.conn-sections .conn-lock-btn {
  align-self: flex-end;
  margin-left: 0;
  margin-top: 2px;
}

/* Compact license warning — main content only, under the status chips. */
.license-status-banner {
  flex-shrink: 0;
  padding: 0 var(--page-pad);
  margin: 0 0 10px;
}
.license-status-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0, 198, 255, 0.10);
  border: 1px solid rgba(0, 198, 255, 0.32);
}
.license-status-banner--error .license-status-banner-inner {
  background: rgba(0, 114, 255, 0.12);
  border-color: rgba(0, 114, 255, 0.34);
}
.license-status-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  background: #00C6FF;
  box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.20);
}
.license-status-banner--error .license-status-banner-dot {
  background: #38BDF8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.20);
}
.license-status-banner-text {
  flex: 1;
  min-width: min(100%, 220px);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #C8F0FF;
}
.license-status-banner--error .license-status-banner-text { color: #DDF4FF; }
.license-status-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.license-status-banner-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(0, 198, 255, 0.45);
  background: rgba(0, 114, 255, 0.22);
  color: #E8F9FF;
  cursor: pointer;
  white-space: nowrap;
}
.license-status-banner-btn:hover {
  background: rgba(0, 114, 255, 0.32);
  border-color: rgba(0, 198, 255, 0.58);
}
.license-status-banner-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
.license-status-banner--error .license-status-banner-btn {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(0, 114, 255, 0.24);
  color: #E8F9FF;
}

/* Inline Start button beside the Scheduler item when the scheduler is off. */
#ags-scheduler-wrap { position: relative; }

/* Suppress dashboard hover elevation while scheduler popover is open */
body.sched-popover-open .dcc-card:hover {
  transform: none;
  z-index: 1;
  box-shadow: var(--shadow-card);
  border-color: var(--border);
}
body.sched-popover-open .dcc-card--queue:hover { border-color: var(--border); }
body.sched-popover-open .dcc-card--next:hover { border-color: var(--border); }
body.sched-popover-open .dcc-card--platforms:hover { border-color: var(--border); }
body.sched-popover-open .dcc-card--failed:hover { border-color: var(--border); }

/* ── Dashboard layout ─────────────────────────────────────────────────────── */
#page-dashboard.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 220px);
  padding-bottom: 24px;
}

.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: -4px;
}
.dash-toolbar-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-toolbar-select {
  min-width: 160px;
  font-size: 12px;
}

.dash-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-status-row .dash-status-bar { flex: 1; min-width: 0; }
.dash-campaign-select {
  flex-shrink: 0;
  background: linear-gradient(160deg, #131E33 0%, #101A2E 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  padding: 12px 14px;
  cursor: pointer;
  outline: none;
  appearance: auto;
  height: 100%;
}
.dash-campaign-select:hover { border-color: var(--border-strong); }
.dash-campaign-select:focus { border-color: var(--accent); }
/* Dashboard campaign filter bar (right-aligned, compact). */
.dash-filter-bar { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-bottom: 6px; }
.dash-filter-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.dash-campaign-select--filter { height: auto; padding: 7px 30px 7px 12px; font-size: 12.5px; min-width: 175px; }
.dash-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 9px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 12px;
}
.dash-hs-item { white-space: nowrap; }
.dash-hs-item--clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.14s;
}
.dash-hs-item--clickable:hover { background: rgba(255, 255, 255, 0.05); }
.dash-hs-key { color: var(--text-muted); font-weight: 500; }
.dash-hs-val { font-weight: 600; color: var(--text); }
.dash-hs-val--ok { color: #60A5FA; }
.dash-hs-val--warn { color: #FB923C; }
.dash-hs-val--muted { color: var(--text-muted); }
.dash-hs-sep { color: var(--text-muted); opacity: 0.35; user-select: none; }

.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.dash-kpi-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #0E2142;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 24px 18px 18px 22px;
  min-height: 112px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.dash-kpi-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dash-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  opacity: 1;
  pointer-events: none;
}
/* Flat, crisp solid accent bars - vivid dashboard KPI palette. */
.dash-kpi-card--queue::before  { background: #F97316; }
.dash-kpi-card--passed::before { background: #2563EB; }
.dash-kpi-card--failed::before { background: #EC4899; }
.dash-kpi-card--views::before  { background: #00D4FF; }
.dash-kpi-card--rate::before   { background: #9333EA; }
.dash-kpi-card:hover {
  z-index: 2;
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.dash-kpi-card--queue:hover  { border-color: rgba(249, 115, 22, 0.45); }
.dash-kpi-card--passed:hover { border-color: rgba(37, 99, 235, 0.45); }
.dash-kpi-card--failed:hover { border-color: rgba(236, 72, 153, 0.45); }
.dash-kpi-card--views:hover  { border-color: rgba(0, 212, 255, 0.45); }
.dash-kpi-card--rate:hover   { border-color: rgba(147, 51, 234, 0.45); }

.dash-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
  margin-top: 0;
}
.dash-kpi-icon svg { width: 16px; height: 16px; }
/* Icon chips: vivid accent fill + icon tint on the dark card body. */
.dash-kpi-icon--queue   { background: rgba(249, 115, 22, 0.18); color: #FB923C; border: none; }
.dash-kpi-icon--passed  { background: rgba(37, 99, 235, 0.18); color: #3B82F6; border: none; }
.dash-kpi-icon--failed  { background: rgba(59, 130, 246, 0.18);  color: #3B82F6; border: none; }
.dash-kpi-icon--views   { background: rgba(0, 212, 255, 0.18); color: #00D4FF; border: none; }
.dash-kpi-icon--rate    { background: rgba(147, 51, 234, 0.18); color: #A855F7; border: none; }

.dash-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.25;
  margin-bottom: 4px;
}
.dash-kpi-card--rate .dash-kpi-label {
  font-size: 9px;
  letter-spacing: 0.07em;
  line-height: 1.35;
}
.dash-kpi-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: #D8E8F8;
  /* Was -0.03em which crammed the unit ("1.6K") against the digits. Positive
     tracking gives clear space between the number and the K/M letter. */
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
}
.kpi-views-ignote {
  display: inline-block;
  margin-top: 3px;
  font-size: 10.5px;
  color: #8BAAC4;
  opacity: .85;
}
.dash-kpi-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.dash-kpi-link:hover { color: var(--text); }

.dash-kpi-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 107, 107, 0.34);
  background: rgba(255, 107, 107, 0.11);
  color: #FFC4C4;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
}
.dash-kpi-action:hover {
  background: rgba(255, 107, 107, 0.18);
  border-color: rgba(255, 107, 107, 0.52);
  color: #FFE0E0;
  box-shadow: 0 0 12px rgba(255, 107, 107, 0.15);
}

/* System Health cards: scheduler + connection health, directly under the KPI row. */
.dash-health-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; margin-bottom: 16px;
}
@media (max-width: 860px) { .dash-health-grid { grid-template-columns: 1fr; } }
.dash-health-card {
  background: var(--card, #0F2342);
  border: 1px solid var(--border, rgba(148,163,184,0.10));
  border-radius: 14px; padding: 16px 18px;
}
.dhc-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 10px; }
.dhc-title { font-size: 14px; font-weight: 700; color: var(--text, #F5F5F3); }
.dhc-head-link { font-size: 12px; color: var(--blue, #60A5FA); text-decoration: none; }
.dhc-head-link:hover { text-decoration: underline; }
.dhc-badge { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; letter-spacing: 0.01em; }
.dhc-badge--ok { background: rgba(59,130,246,0.16); color: #60A5FA; }
.dhc-badge--warn { background: rgba(96,165,250,0.14); color: #8FB7E8; }
.dhc-badge--info { background: rgba(96,165,250,0.16); color: #60A5FA; }
.dhc-badge--muted { background: rgba(148,163,184,0.14); color: #94A3B8; }
.dhc-hint { font-size: 12.5px; color: var(--text-muted, #94A3B8); line-height: 1.5; margin-bottom: 12px; }
.dhc-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.dhc-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.dhc-k { color: var(--text-muted, #94A3B8); }
.dhc-v { color: var(--text, #F5F5F3); font-weight: 600; }
.dhc-note { font-size: 12px; line-height: 1.5; padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; }
.dhc-note--warn { background: rgba(0,198,255,0.10); color: #5DA9FF; }
.dhc-req { font-size: 11.5px; color: var(--text-muted, #94A3B8); line-height: 1.5; border-top: 1px solid var(--border, rgba(148,163,184,0.10)); padding-top: 10px; }
.dhc-req a { color: var(--blue, #60A5FA); text-decoration: none; }
.dhc-req a:hover { text-decoration: underline; }
.dhc-conn-list { display: flex; flex-direction: column; gap: 4px; }
.dhc-conn-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.dhc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dhc-dot--ok { background: #60A5FA; }
.dhc-dot--warn { background: #5DA9FF; }
.dhc-dot--muted { background: #64748B; }
.dhc-conn-name { font-size: 13px; font-weight: 600; color: var(--text, #F5F5F3); min-width: 78px; }
.dhc-conn-state { font-size: 12.5px; }
.dhc-conn-state--ok { color: #60A5FA; }
.dhc-conn-state--warn { color: #5DA9FF; }
.dhc-conn-state--muted { color: #94A3B8; }
.dhc-fixbtn {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: #60A5FA;
  background: rgba(96,165,250,0.10); border: 1px solid rgba(96,165,250,0.28);
  border-radius: 999px; padding: 3px 12px; cursor: pointer;
}
.dhc-fixbtn:hover { background: rgba(96,165,250,0.18); }
.dhc-conn-reason { font-size: 11.5px; color: var(--text-muted, #94A3B8); line-height: 1.45; padding: 0 0 4px 19px; }

/* Performance Snapshot moved full-width directly under the KPI cards (placement test). */
.dash-perf-section { margin-bottom: 16px; }
.dash-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 20px;
  align-items: stretch;
}
.dash-top-grid > .dash-top-cell:nth-child(1),
.dash-top-grid > .dash-top-cell:nth-child(2) {
  align-self: stretch;
}
.dash-top-grid > .dash-top-cell:nth-child(1) > .dash-panel--main,
.dash-top-grid > .dash-top-cell:nth-child(2) > .dash-panel--main {
  flex: 1 1 auto;
  height: 100%;
}
.dash-top-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dash-top-cell > .dash-panel--main,
.dash-top-cell > .dash-panel--perf {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-top-cell .dash-panel--main > :not(.dash-panel-hdr),
.dash-top-cell .dash-panel--perf > :not(.dash-panel-hdr) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-top-cell #dash-upcoming-body,
.dash-top-cell #dash-recent-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-top-cell .dash-panel-preview {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-panel-body-inner {
  position: relative;
  flex: 0 0 var(--dash-preview-table-h);
  height: var(--dash-preview-table-h);
  min-height: var(--dash-preview-table-h);
  max-height: var(--dash-preview-table-h);
  overflow: hidden;
}
.dash-top-cell .dash-panel-body-inner > .dash-table-wrap {
  flex: 0 0 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
.dash-top-cell .up-table-wrap--dashboard {
  flex: 0 0 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
.dash-top-cell .dash-panel-footer {
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dash-top-cell .dash-panel-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dash-panel-empty-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  pointer-events: none;
  text-align: center;
}
.dash-panel-preview--empty .dash-panel-empty-head {
  font-size: 13px;
  font-weight: 600;
  color: #DCE8F4;
  margin-bottom: 4px;
}
.dash-panel-preview--empty .dash-panel-empty-hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  max-width: 240px;
}

.dash-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
#page-dashboard .dash-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
@media (max-width: 900px) {
  .dash-top-grid { grid-template-columns: 1fr; }
}
.dash-panel--main,
.dash-panel--perf {
  background: rgba(8, 16, 32, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.dash-panel-hdr {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 61px;
  box-sizing: border-box;
}
.dash-panel-hdr--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Header rendered BELOW the content (Performance Snapshot title/Refresh under the
   view stats): flip the divider to the top edge. */
.dash-panel-hdr--footer { border-bottom: none; border-top: 1px solid var(--border); }
.dash-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #60A5FA;   /* light blue (was purple #C084FC) - Upcoming Queue / Recently Posted / Failed Posts */
}
.dash-panel--main > :not(.dash-panel-hdr),
.dash-panel--perf > :not(.dash-panel-hdr) {
  padding: 16px 20px 20px;
}
.dash-panel--perf > :not(.dash-panel-hdr) {
  padding: 16px 20px 18px;
}
.dash-panel--failed { margin-bottom: 0; }
.dash-panel--perf { margin-top: 0; }
.dash-top-cell > * { margin-top: 0 !important; }

/* All-clear failed state: a full panel matching the other quadrants (same frame
   + "Failed Posts" header), with a calm green confirmation body - so it never
   reads as a stray little bar breaking the 2x2 grid. */
.dash-panel--nofailed { display: flex; flex-direction: column; }
/* Calm "nothing needs attention" state: a compact icon+text row tucked at the
   top-left, not a centered celebration. The panel frame still fills its grid
   quadrant; the content stays small so it reads as a no-op, not a trophy. */
.dash-nofailed-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 20px;
  text-align: left;
}
.dash-nofailed-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #74B4FF;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.30);
  flex-shrink: 0;
  margin-top: 1px;
}
.dash-nofailed-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-nofailed-head { font-size: 13px; font-weight: 700; color: #74B4FF; }
.dash-nofailed-hint { font-size: 12px; color: var(--text-muted); }
.dash-nofailed-count {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 999px; min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-perf-rows { display: flex; flex-direction: column; gap: 16px; }
.dash-perf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.dash-perf-grid--engagement {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(140, 170, 220, 0.08);
}
/* Each metric sits in a light inner tile - subtle, not a heavy nested card. */
.dash-perf-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  min-height: 82px;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(18, 40, 72, 0.55);
  border: 1px solid rgba(120, 160, 220, 0.16);
  box-sizing: border-box;
}
/* TikTok unavailable tile: SAME background/border as the others (the muted "-" +
   "Analytics unavailable" text conveys the disabled state, not a different box). */
.dash-perf-tile--disabled {
  background: rgba(18, 40, 72, 0.55);
  border-color: rgba(120, 160, 220, 0.16);
}
/* Muted N/A value (e.g. TikTok with no public views) - intentional, not a big number. */
.dash-perf-v.dash-perf-v--na { color: var(--text-muted); font-weight: 600; font-size: 15px; }
/* "Synced ..." moved into the panel header (next to Refresh Views) to save a row. */
.dash-perf-synced { margin-left: auto; margin-right: 12px; font-size: 12px; color: #8BAAC4; white-space: nowrap; }
.dash-perf-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.dash-perf-row--bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-perf-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-perf-grid--six { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

/* ── Platform Performance panel: 4-across cards, same colored top bar as KPI cards ── */
.dash-pp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 16px; }
.dash-pp-title { font-size: 17px; font-weight: 800; color: #EAF2FB; }
.dash-pp-sub { font-size: 12.5px; color: #8BAAC4; }
.dash-plat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dash-plat-card {
  position: relative; overflow: hidden;
  background: #0E2142;
  border: 1px solid rgba(148,163,184,0.10);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 22px 16px 16px;
  min-height: 118px;
  display: flex; flex-direction: column; gap: 4px;
}
.dash-plat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--r-xl) var(--r-xl) 0 0; pointer-events: none;
  /* Uniform muted top bar across ALL platform cards - nothing bright. Platform identity
     comes from the colored NAME, not the bar. */
  background: rgba(148, 163, 184, 0.28);
}
/* Inactive cards read as clearly secondary (identity still via the name color). */
.dash-plat-card.is-unavailable, .dash-plat-card.is-coming-soon { opacity: 0.8; }
.dash-plat-name { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.dash-plat-name--instagram { color: var(--platform-instagram); }
.dash-plat-name--youtube   { color: var(--platform-youtube); }
.dash-plat-name--tiktok    { color: var(--platform-tiktok); }
.dash-plat-name--facebook  { color: var(--platform-facebook); }
.dash-plat-name--pinterest { color: var(--platform-pinterest); }
.dash-plat-name--threads   { color: #B57BF0; }
.dash-plat-metric { font-size: 30px; font-weight: 800; color: #EAF2FB; line-height: 1.05; margin-top: 2px; }
.dash-plat-metric--na { color: #5A7A9A; font-weight: 700; }
.dash-plat-sub { font-size: 12.5px; color: #C7D9EE; margin-top: 4px; }
.dash-plat-status { font-size: 11.5px; color: #8BAAC4; }
@media (max-width: 1180px) { .dash-plat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .dash-plat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .dash-plat-grid { grid-template-columns: 1fr; } }
.dash-perf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}
.dash-perf-k {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25;
  white-space: normal;
  width: 100%;
}
.dash-perf-k--ig { color: var(--platform-instagram); }
.dash-perf-k--yt { color: var(--platform-youtube); }
.dash-perf-k--tt { color: var(--platform-tiktok); }
.dash-perf-k--fb { color: var(--platform-facebook); }
.dash-perf-k--pt { color: var(--platform-pinterest); }
/* Platform-colored performance numbers - match the header label colors exactly.
   Doubled class so they win over the base .dash-perf-v color (defined below). */
.dash-perf-v.dash-perf-v--ig { color: var(--platform-instagram); }
.dash-perf-v.dash-perf-v--yt { color: var(--platform-youtube); }
.dash-perf-v.dash-perf-v--tt { color: var(--platform-tiktok); }
.dash-perf-v.dash-perf-v--fb { color: var(--platform-facebook); }
.dash-perf-v.dash-perf-v--pt { color: var(--platform-pinterest); }
.dash-perf-k.dash-perf-k--total,
.dash-perf-k--total { color: #0080FF; }
.dash-perf-v.dash-perf-v--total {
  color: #0080FF;
}
.dash-perf-v.dash-perf-v--total.dash-perf-v--pending {
  color: var(--text-muted);
}
.dash-perf-v {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  min-width: 0;
  width: 100%;
  /* Space between the number and the K/M unit so "1.6K" isn't cramped. */
  letter-spacing: 0.02em;
}
.dash-perf-v--pending {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
}
.dash-perf-v--unavail {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
}
.dash-perf-v--sm { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.dash-perf-v--truncate {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dash-perf-v--nowrap { white-space: nowrap; }
.dash-perf-v--muted { color: var(--text-muted); font-weight: 500; font-size: 14px; }
.dash-perf-pending { color: var(--text-muted); font-weight: 500; font-size: 14px; }
.dash-perf-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dash-perf-sync {
  font-size: 13px;
  color: #8BAAC4;
  line-height: 1.4;
  white-space: nowrap;
}

.dash-perf-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-perf-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Five tiles (when Facebook Pages has real posted history) sit in one row on the
   full-width snapshot. Overrides the legacy unused --five (repeat 3) above. */
.dash-perf-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Tiles get tight in the dashboard quadrant on smaller screens - wrap. */
@media (max-width: 1240px) {
  .dash-perf-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .dash-perf-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
}

/* Shared external-link icon */
.ext-link-icon {
  flex-shrink: 0;
  opacity: 0.85;
  vertical-align: -1px;
}

/* Top Video callout (Performance Snapshot) */
.dash-topvid {
  margin-top: 6px;
  padding: 16px 2px 0;
  border: none;
  border-top: 1px solid rgba(120, 160, 220, 0.10);
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
/* Views info on the left, platform badges pinned right - one compact line. */
.dash-topvid-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-topvid--pending {
  gap: 5px;
}
.dash-topvid-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dash-topvid-why {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.dash-topvid-views { font-weight: 600; color: var(--text); }
.dash-topvid-views--unavail { color: var(--text-muted); font-weight: 500; }
.dash-topvid-dot { color: var(--text-muted); }
.dash-topvid-window { color: var(--text-muted); }
.dash-topvid-badges {
  display: flex;
  gap: 6px;
}
.dash-topvid-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 2px;
}
.dash-topvid-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5BC8FF;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.dash-topvid-link:hover { text-decoration: underline; }
.dash-topvid-link--instagram { color: #B79BDE; }
.dash-topvid-link--youtube { color: #60A5FA; }
.dash-topvid-link--tiktok { color: #8AB4D8; }
.dash-topvid-link--history { color: var(--text-secondary); }

/* ── Top Performer insight row (replaces the loose Top Video footer) ─────── */
.dash-topperf {
  margin-top: 14px;
  padding: 18px 22px;
  min-height: 96px;
  background: rgba(15, 35, 66, 0.62);
  border: 1px solid rgba(96, 165, 250, 0.10);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-topperf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  column-gap: 24px;
}
@media (max-width: 720px) { .dash-topperf-row { grid-template-columns: 1fr; row-gap: 14px; } }
.dash-topperf-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-topperf-title {
  font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.dash-topperf .dash-perf-k { color: #60A5FA; }
.dash-topperf-meta { font-size: 12.5px; color: var(--text-secondary); }
.dash-topperf-plats { font-size: 12px; color: var(--text-muted); }
.dash-topperf-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; }
/* Right metric block, vertically centered against the left content. */
.dash-topperf-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dash-tp-splits { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dash-tp-split {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent;
}
.dash-tp-split--instagram { background: rgba(192,132,252,0.12); color: #BCC8DA; border-color: rgba(192,132,252,0.30); }
.dash-tp-split--youtube   { background: rgba(248,113,113,0.12); color: #F1A0A0; border-color: rgba(248,113,113,0.30); }
.dash-tp-split--tiktok    { background: rgba(34,211,238,0.12);  color: #7FD3E6; border-color: rgba(34,211,238,0.30); }
.dash-tp-best { font-size: 12px; color: var(--text-muted); }
.dash-tp-best strong { color: var(--text-secondary); font-weight: 700; }
.dash-tp-nosplit { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dash-tp-total { font-size: 14px; font-weight: 700; color: var(--text); }
.dash-tp-nosplit-note { font-size: 11.5px; color: var(--text-muted); }
.dash-topperf--pending { gap: 6px; min-height: 0; }
/* TikTok tile's two-line unavailable context. */
.dash-perf-tile--disabled .dash-perf-ctx { white-space: pre-line; }

/* Connected-account proof - compact glass mini-card under the status bar */
.dash-account-strip {
  display: block;
  margin: -4px 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.02);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.dash-acct-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.dash-acct-soon {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}
/* TikTok coming-soon note inline on the Posting-to row (muted, secondary). */
.dash-acct-soon-inline {
  font-size: 11.5px;
  color: #7DD3FC;
  white-space: nowrap;
}
.dash-account-strip .dash-acct-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.dash-acct-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.dash-acct-name {
  font-weight: 600;
  color: var(--text);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-acct-sep { color: var(--text-muted); }
.dash-acct-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #5BC8FF;
  text-decoration: none;
}
.dash-acct-link:hover { text-decoration: underline; }
/* Platform "View" links carry the platform's identity color (IG magenta, YT red). */
.dash-acct-link--instagram { color: var(--platform-instagram); }
.dash-acct-link--youtube   { color: var(--platform-youtube); }
/* Compact "Active accounts" row: small linked chips on one quiet line. */
.dash-acct-main--compact { gap: 4px 10px; align-items: center; }
.dash-acct-chip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.dash-acct-chip .up-plat { flex-shrink: 0; }

/* Connections page: "View profile / channel" external link */
.conn-view-link-row { margin-top: 10px; }
.conn-view-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5BC8FF;
  text-decoration: none;
}
.conn-view-link:hover { text-decoration: underline; }

/* History/Posted: per-platform "View Reel / View Short" links */
.hrc-view-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
}
.hrc-view-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #5BC8FF;
  text-decoration: none;
}
.hrc-view-link:hover { text-decoration: underline; }
.hrc-view-link--instagram { color: var(--platform-instagram); }
.hrc-view-link--youtube { color: var(--platform-youtube); }

.dash-panel-footer {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  text-align: right;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  box-sizing: border-box;
}
.dash-top-cell .dash-panel-footer {
  margin-top: auto;
}
.dash-panel-footer-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #5BC8FF;
  cursor: pointer;
}
.dash-panel-footer-link:hover { text-decoration: underline; }
.dash-panel-empty {
  padding: 16px 0;
  text-align: center;
}
.dash-panel-empty-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.dash-panel-empty-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.dash-attn-ready {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 8px 0;
}
.dash-attn-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #60A5FA;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.45);
}
.dash-attn-list { list-style: none; margin: 0 0 10px; padding: 0; }
.dash-attn-list li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-attn-list li:last-child { border-bottom: none; }
.dash-attn-more { font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; }
.dash-attn-actions { margin-top: 4px; }

@media (max-width: 1200px) {
  .dash-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-perf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dash-main-grid { grid-template-columns: 1fr; }
  .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-perf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-toolbar { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .dash-kpi-row { grid-template-columns: 1fr; }
  .dash-perf-grid { grid-template-columns: 1fr; }
}

.dash-main-grid--spacious {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: 20px;
  align-items: start;
}
#page-dashboard .dash-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dash-panel--spacious {
  background: var(--surface-1-grad);
  border: 1px solid var(--border-blue);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.dash-panel--spacious .dash-panel-hdr {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.dash-panel--spacious .dash-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #60A5FA;
}
.dash-panel--spacious > :not(.dash-panel-hdr) {
  padding: 14px 18px 16px;
}

.dcc-sub--action {
  color: var(--text-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dash-panel-footer {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  text-align: right;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  box-sizing: border-box;
}
.dash-top-cell .dash-panel-footer {
  margin-top: auto;
}
.dash-panel-footer-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #5BC8FF;
  cursor: pointer;
}
.dash-panel-footer-link:hover { text-decoration: underline; }
.dash-panel-empty {
  padding: 12px 0;
  text-align: center;
}
.dash-panel-empty-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.dash-panel-empty-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.dash-attn-ready {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.dash-attn-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #60A5FA;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.45);
}
.dash-attn-count { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.dash-attn-list { list-style: none; margin: 0 0 8px; padding: 0; }
.dash-attn-list li {
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-attn-list li:last-child { border-bottom: none; }
.dash-attn-more { font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; }
.dash-attn-actions { margin-top: 4px; }
.dash-attn-ops {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
}
.dash-attn-ops li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 6px 0;
}
.dash-attn-op {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: #8BC7FF;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.dash-attn-op:hover {
  background: rgba(96,165,250,0.08);
  border-color: rgba(96,165,250,0.22);
}
.dash-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.dash-kv:last-child { border-bottom: none; padding-bottom: 0; }
.dash-kv-k { color: var(--text-muted); flex-shrink: 0; }
.dash-kv-v { color: var(--text); font-weight: 600; text-align: right; min-width: 0; }
.dash-kv-v--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58%; }
.dash-kv-v--muted { color: var(--text-muted); font-weight: 500; }
.dash-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.dash-health-stat { display: flex; flex-direction: column; gap: 3px; }
.dash-health-stat--wide { grid-column: 1 / -1; }
.dash-health-k {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-health-v { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; }
.dash-health-v--sm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-health-v--fail { color: var(--error); }
.dash-health-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 900px) {
  .dash-main-grid--spacious { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
  .dash-command-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dash-command-row { grid-template-columns: 1fr; }
}

.dash-command-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  flex-shrink: 0;
  align-items: stretch;
}

.dcc-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--surface-1-grad);
  border: 1px solid var(--border-blue);
  border-radius: var(--r-xl);
  padding: 18px 58px 16px 20px;
  box-shadow: var(--shadow-card);
  min-height: 108px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
  box-sizing: border-box;
}
.dcc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.dcc-card:hover {
  z-index: 2;
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.dcc-card--queue::before     { background: var(--warning); box-shadow: 0 0 14px var(--warning-surface); }
.dcc-card--next::before      { background: #4F8DFF; box-shadow: 0 0 14px rgba(79, 141, 255, 0.22); }
.dcc-card--platforms::before { background: #4F8DFF; box-shadow: 0 0 14px rgba(79, 141, 255, 0.22); }
.dcc-card--failed::before    { background: rgba(148, 163, 184, 0.22); }
.dcc-card--views::before     { background: #A78BFA; box-shadow: 0 0 14px rgba(167, 139, 250, 0.22); }

.dcc-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dcc-icon svg { width: 16px; height: 16px; }

.dcc-icon--queue      { background: rgba(93, 169, 255, 0.13); color: var(--warning); border: 1px solid rgba(93, 169, 255, 0.22); }
.dcc-icon--next       { background: rgba(79, 141, 255, 0.12); color: #5BC8FF; border: 1px solid rgba(79, 141, 255, 0.20); }
.dcc-icon--platforms   { background: rgba(148, 163, 184, 0.12); color: #A8BFD4; border: 1px solid rgba(148, 163, 184, 0.22); }
.dcc-icon--failed      { background: rgba(148, 163, 184, 0.12); color: #C8D4E0; border: 1px solid rgba(148, 163, 184, 0.22); }
.dcc-icon--views       { background: rgba(167, 139, 250, 0.12); color: #C4B5FD; border: 1px solid rgba(167, 139, 250, 0.22); }

.dcc-card--queue:hover      { border-color: rgba(93, 169, 255, 0.28); }
.dcc-card--next:hover       { border-color: rgba(79, 141, 255, 0.28); }
.dcc-card--platforms:hover  { border-color: rgba(79, 141, 255, 0.28); }

.dcc-card--platforms {
  justify-content: flex-start;
  gap: 8px;
}

.dcc-card--platforms .dcc-platform-body {
  margin-top: 0;
  width: 100%;
}

.dcc-card--platforms .platform-status-list {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 8px;
}

.dcc-card--platforms .platform-status-pill {
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 6px 12px;
  gap: 12px;
}

.dcc-card--platforms .platform-status-sep { display: none; }

.dcc-card--failed.dcc-card--warn::before {
  background: rgba(148, 163, 184, 0.22);
  box-shadow: none;
}

.dcc-card--failed.dcc-card--warn:hover {
  border-color: var(--border-strong);
}

.dcc-sub--action .dcc-action {
  font-weight: 600;
  color: var(--text-secondary);
}

.dcc-card--failed.dcc-card--warn .dcc-sub--action .dcc-action {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dcc-platform-body {
  min-width: 0;
  width: 100%;
}
.platform-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.platform-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.platform-status-name  { color: var(--text-secondary); }
.platform-status-sep   { opacity: 0.42; color: var(--text-muted); }
.platform-status-pill--connected .platform-status-label { color: #74B4FF; }
.platform-status-pill--connected {
  background: rgba(96, 165, 250, 0.10);
  border-color: rgba(96, 165, 250, 0.22);
}
.platform-status-pill--setup .platform-status-label { color: var(--badge-pending-fg); }
.platform-status-pill--setup {
  background: var(--badge-pending-bg);
  border-color: var(--badge-pending-bd);
}
.platform-status-pill--disconnected .platform-status-label { color: #E08A8A; }
.platform-status-pill--disconnected {
  background: rgba(224, 96, 96, 0.08);
  border-color: rgba(224, 96, 96, 0.18);
}
.platform-status-pill--soon .platform-status-label { color: var(--text-muted); }
.platform-status-pill--soon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.dcc-card--failed .dcc-value { font-size: 28px; color: var(--text); }
.dcc-card--failed.dcc-card--warn .dcc-value { color: var(--text); }
.dcc-card--failed.dcc-card--warn .dcc-sub { color: var(--text-muted); }
.dcc-card--failed.dcc-card--warn .dcc-sub.dcc-sub--action { color: var(--text-secondary); }

.dcc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dcc-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
}
.dcc-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
}
.dcc-next-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dcc-next-time {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.dash-schedule-wrap {
  flex: 0 0 auto;
  min-height: 0;
  background: var(--surface-raised);
  border: 1px solid rgba(96,165,250,0.16);
  border-radius: var(--r-xl);
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dash-schedule-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.dash-schedule-hdr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.dash-schedule-campaign-select {
  min-width: 148px;
  max-width: 220px;
}
.dash-schedule-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.dash-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 14px;
  flex-shrink: 0;
  align-items: stretch;
}
.dash-bottom-row--health {
  grid-template-columns: 1fr;
  gap: 12px;
}
.dash-health-card {
  min-height: 0;
  padding: 14px 18px 12px;
}
.dash-setup-card {
  padding: 12px 18px 10px;
}
.dash-setup-card--ok {
  border-color: rgba(96, 165, 250, 0.18);
}
.dash-health-card .op-card-header,
.dash-setup-card .op-card-header {
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-activity-card { min-height: 200px; }
.dash-ok-card,
.dash-attn-card { min-height: 200px; }

.dash-ok-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 6px 0;
}
.dash-ok-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: #8BC7FF;
  background: rgba(96,165,250,0.10);
  border: 1px solid rgba(96,165,250,0.22);
}
.dash-ok-headline {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.dash-ok-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.dash-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dash-activity-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: baseline;
}
.dash-activity-row:last-child { border-bottom: none; }
.dash-activity-ts {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.dash-activity-line {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  min-width: 0;
}
.dash-activity-action {
  font-weight: 600;
  color: var(--text);
}
.dash-activity-context {
  color: var(--text-secondary);
}
.dash-activity-link {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: #5BC8FF;
  cursor: pointer;
  text-decoration: none;
}
.dash-activity-link:hover { text-decoration: underline; }
.dash-activity-overflow {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 2px;
}
.dash-activity-more {
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
}
.dash-activity-more:hover { text-decoration: underline; }

.na-card--lite { padding: 2px 0 4px; gap: 4px; }
.na-count--lite {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.na-list-row--lite {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
}
.na-list-row--lite:last-child { border-bottom: none; }
.na-list-row--lite .na-list-name { font-size: 12.5px; }
.na-list-row--lite .na-list-reason { font-size: 11.5px; color: var(--text-muted); }
.na-overflow--lite { font-size: 11px; color: var(--text-muted); padding-top: 4px; }
#failed-panel.dash-attn-card {
  border-color: rgba(224,96,96,0.16);
  background: rgba(224,96,96,0.03);
}
#failed-panel .op-card-title { color: var(--text-secondary); font-size: 13px; }

@media (max-width: 1100px) {
  .dash-command-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .dash-command-row { grid-template-columns: 1fr; }
}

.page-content {
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: var(--page-pad);
  padding-top: 20px;
  min-height: 0;
  background: var(--app-bg-base);
}

/* History uses the same canvas as dashboard/queue - no flat panel fill */
#page-history,
#history-content,
.hrc-panel {
  background: transparent;
}

/* Gradient text for help card titles */
.grad-text {
  background: linear-gradient(125deg, #0072ff 0%, #00c6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page { display: none; }
.page.active { display: block; }

/* ── Stat cards ───────────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 0;
  margin-bottom: 18px;
}

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

/* ── Stat detail drawer ───────────────────────────────────────────────────── */
.stat-detail-panel {
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  margin-top: 16px;
  margin-bottom: 4px;
  overflow: hidden;
}
.stat-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.stat-detail-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.stat-detail-body { padding: 0; }
.stat-detail-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.stat-detail-body td { padding: 13px 20px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; }
.stat-detail-body tr:last-child td { border-bottom: none; }
.stat-detail-body td:first-child { color: var(--text); font-weight: 500; }
.stat-detail-empty { padding: 18px 20px; color: var(--text-muted); font-size: 13px; text-align: center; }

.platform-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.platform-badge.ok   { background: var(--success-surface); color: #74B4FF; }
.platform-badge.err  { background: var(--error-surface); color: var(--error); }
.platform-badge.warn { background: rgba(93, 169, 255,0.14); color: var(--warning); cursor: help; }
.platform-status.warn { color: var(--warning); }

/* ── Log card ─────────────────────────────────────────────────────────── */

.log-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

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

.log-card-title    { font-size: 13.5px; font-weight: 600; color: var(--text); }
.log-card-subtitle { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }


/* ── Log panel (terminal) ─────────────────────────────────────────────── */

.log-panel {
  background: #0A1A33;
  padding: 10px 14px;
  overflow-y: auto;
  overflow-x: auto;
  white-space: pre;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: 10.5px;
  line-height: 1.45;
}

.log-panel--customer {
  white-space: normal;
  font-family: inherit;
  line-height: 1.35;
}

.log-panel.dash { height: 210px; }
.log-panel.full { height: calc(100vh - 190px); }
.log-panel.diag { height: calc(100vh - 370px); }

.log-line {
  color: #D3E1F7;
  padding: 1px 0;
}
.log-line.err { color: #FF8F8F; }
.log-line .log-ts { color: #7F95B8; margin-right: 8px; font-size: 10.5px; user-select: none; }

.log-token.info    { color: #78A6FF; font-weight: 600; }
.log-token.skip    { color: #A8B4CC; font-weight: 600; }
.log-token.invalid { color: #F2A674; font-weight: 600; }
.log-token.error   { color: #FF8F8F; font-weight: 600; }
.log-token.dry     { color: #F2C46D; font-weight: 600; }
.log-token.success { color: #74B4FF; font-weight: 600; }

/* Activity Log - customer view */
.al-empty {
  color: var(--text-muted);
  padding: 10px 2px;
  font-size: 12px;
  line-height: 1.4;
}
.al-entry {
  display: flex;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(140, 170, 220, 0.07);
}
.al-entry:first-child { padding-top: 2px; }
.al-entry:last-child { border-bottom: none; padding-bottom: 2px; }
.al-entry-ts {
  flex-shrink: 0;
  width: 58px;
  font-size: 10.5px;
  color: var(--text-muted);
  padding-top: 1px;
  line-height: 1.35;
}
.al-entry-body { flex: 1; min-width: 0; }
.al-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.al-entry-row--main { margin-bottom: 1px; }
.al-entry-file {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary, #E8EEF8);
  margin-top: 1px;
  word-break: break-word;
  line-height: 1.3;
}
.al-entry-headline {
  font-size: 12px;
  color: var(--text-secondary, #C5D4EA);
  line-height: 1.3;
  min-width: 0;
}
.al-entry-detail {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 2px;
}
.al-badge {
  display: inline-block;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.2;
}
.alb--success   { background: rgba(96, 165, 250, 0.14); color: #74B4FF; }
.alb--scheduled { background: rgba(120, 166, 255, 0.14); color: #78A6FF; }
.alb--skipped   { background: rgba(168, 180, 204, 0.12); color: #A8B4CC; }
.alb--attn      { background: rgba(255, 143, 143, 0.14); color: #FF8F8F; }
body:not(.activity-log-advanced) .activity-log-advanced-only { display: none !important; }
body.activity-log-advanced .log-panel .al-entry { display: none; }

/* ── Generic card ─────────────────────────────────────────────────────── */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border-blue);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  margin-bottom: 18px;
}

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

.card-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.card-body  { padding: 20px; }

/* ── Table ────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

table { width: 100%; border-collapse: collapse; background: var(--surface-raised); font-size: 13px; }

th {
  background: rgba(255,255,255,0.03);
  text-align: left;
  padding: 10px 18px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(140,170,220,0.07);
  vertical-align: middle;
  color: var(--text);
}

tr:last-child td { border-bottom: none; }
tr:hover td      { background: rgba(255,255,255,0.036); }

.file-name  { font-weight: 500; font-size: 13px; color: var(--text); }
.title-cell { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }

.history-views-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 120px;
}
.history-view-plat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.history-view-plat {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.history-view-plat-muted { color: var(--text-muted); }
.history-view-plat-label {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-right: 3px;
}
.history-view-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold, #5DA9FF);
}
.history-view-total-muted {
  font-weight: 500;
  color: var(--text-muted);
}
th.history-views-col { min-width: 140px; }

.hist-action-cell { white-space: nowrap; }
.hist-action-link {
  font-size: 12px;
  font-weight: 500;
  color: #5BC8FF;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.hist-action-link:hover { opacity: 1; text-decoration: underline; }
.hist-action-sep {
  font-size: 11px;
  color: var(--border-strong);
  margin: 0 7px;
  user-select: none;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;   /* never fall back to the browser-default white fill; modifiers set their own */
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background 0.14s, box-shadow 0.14s, border-color 0.14s;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-primary {
  background: rgba(59,108,255,0.19);
  color: #B8CDFF;
  border: 1px solid rgba(59,108,255,0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.btn-primary:hover {
  background: rgba(59,108,255,0.30);
  border-color: rgba(59,108,255,0.60);
  box-shadow: 0 0 22px rgba(59,108,255,0.26), inset 0 1px 0 rgba(255,255,255,0.09);
  color: #D0E0FF;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(140,170,220,0.32); color: var(--text); }

/* Standard secondary CTA - subtle blue. Defined so a bare .btn-secondary (e.g. a dialog
   Cancel) never renders as the browser-default white chip. Sits below .btn-primary in weight. */
.btn-secondary {
  background: rgba(96,165,250,0.12);
  color: #9DBFE0;
  border: 1px solid rgba(96,165,250,0.30);
}
.btn-secondary:hover { background: rgba(96,165,250,0.20); border-color: rgba(96,165,250,0.48); color: #C4D9EE; }

.btn-danger {
  background: var(--error-surface);
  color: var(--error);
  border: 1px solid rgba(224,96,96,0.20);
}
.btn-danger:hover { background: rgba(224,96,96,0.22); }

td .btn + .btn { margin-left: 6px; }

.btn-sm { padding: 6px 12px; font-size: 13px; font-weight: 600; }
.btn:active { transform: scale(0.97); transition-duration: 0.06s; }

/* Inline "Start Scheduler" action shown beside a Stopped status (Dashboard + Queue).
   Uses .btn .btn-primary for the blue style; this just makes it compact + inline. */
.start-scheduler-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 7px;
  vertical-align: middle;
}
/* Compact Start button beside the global scheduler status pill. */
.ags-start-btn {
  margin-left: 6px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(59,108,255,0.19);
  color: #B8CDFF;
  border: 1px solid rgba(59,108,255,0.40);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ags-start-btn:hover { background: rgba(59,108,255,0.30); border-color: rgba(59,108,255,0.60); color: #D0E0FF; }
.ags-start-btn[hidden] { display: none; }

/* ── Badges ───────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.badge-success { background: var(--success-surface); color: #74B4FF; }
.badge-danger  { background: var(--error-surface); color: var(--error); }
.badge-warning { background: var(--warning-surface); color: var(--warning); }
.badge-neutral { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.badge-blue    { background: var(--accent-surface); color: #7AABFF; }

/* ── Section header ───────────────────────────────────────────────────── */

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-title  { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }

/* ── Empty state ──────────────────────────────────────────────────────── */

.empty { padding: 52px 24px; text-align: center; }
.empty-icon  { font-size: 34px; margin-bottom: 12px; opacity: 0.5; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.empty-sub   { font-size: 13px; color: var(--text-muted); }

/* ── Diagnostics ──────────────────────────────────────────────────────── */

.diag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }

.diag-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.diag-section {
  padding: 20px 24px 22px;
}
.diag-section-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.diag-section-hdr .setup-card-title { margin-bottom: 4px; }
.diag-section > .setup-card-title { margin-bottom: 14px; }
/* Diagnostics page section titles in pale blue (scoped - other setup cards unchanged) */
.diag-section .setup-card-title { color: #9EC5FF; }
/* Content Library title in pale blue */
.content-setup-intro .setup-card-title { color: #9EC5FF; }

.diag-readiness-checklist {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Status summary + grouped Ready / Needs-attention layout */
.diag-status-summary { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; border-radius: var(--r); background: rgba(255,255,255,0.03); border: 1px solid var(--border-soft); }
.diag-status-summary.is-attention { background: rgba(93, 169, 255,0.08); border-color: rgba(93, 169, 255,0.28); }
.diag-status-summary.is-ready { background: rgba(94,158,126,0.08); border-color: rgba(94,158,126,0.22); }
.diag-status-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; flex-shrink: 0; }
.diag-status-value { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.diag-status-summary.is-attention .diag-status-value { color: #5DA9FF; }
.diag-status-summary.is-ready .diag-status-value { color: #5E9E7E; }
.diag-group { display: flex; flex-direction: column; gap: 2px; }
/* Ready items fill the previously-empty right-hand space as a balanced 2-column grid. */
.diag-ready-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 2px;
  align-items: start;
}
.diag-group-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; }
.diag-group-head--warn { color: #5DA9FF; }
.diag-item { display: flex; align-items: center; gap: 11px; min-height: 40px; font-size: 13.5px; }
.diag-mark { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.diag-mark--ok { background: rgba(59,130,246,0.12); color: #60A5FA; border: 1px solid rgba(96,165,250,0.30); }
.diag-mark--bad { background: rgba(255,107,107,0.10); color: #FF6B6B; border: 1px solid rgba(255,107,107,0.24); }
.diag-mark--prompt { background: rgba(96,165,250,0.10); color: #7FB0FF; border: 1px dashed rgba(96,165,250,0.40); }
.diag-item-label { color: var(--text-secondary); font-weight: 500; }
.diag-item--bad .diag-item-label { color: #E6EDF7; }
.diag-item--prompt .diag-item-label { color: #B7CBE6; }
.diag-group--prompt { margin-top: 4px; }
.diag-item-btn { margin-left: auto; flex-shrink: 0; }
.diag-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 13px;
}
.diag-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.diag-check-item--ok .diag-check-icon {
  background: rgba(94, 158, 126, 0.12);
  color: #5E9E7E;
  border: 1px solid rgba(94, 158, 126, 0.28);
}
.diag-check-item--fail .diag-check-icon {
  background: rgba(255, 107, 107, 0.10);
  color: #FF6B6B;
  border: 1px solid rgba(255, 107, 107, 0.24);
}
.diag-check-label { color: var(--text-secondary); font-weight: 500; }
.diag-check-hint { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }

.diag-problems-body { display: flex; flex-direction: column; gap: 10px; }
.diag-problems-ok {
  padding: 14px 16px;
  border-radius: var(--r);
  background: rgba(94, 158, 126, 0.08);
  border: 1px solid rgba(94, 158, 126, 0.22);
  color: #5E9E7E;
  font-size: 13px;
  font-weight: 600;
}
.diag-problem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: rgba(255, 107, 107, 0.06);
  border: 1px solid rgba(255, 107, 107, 0.18);
}
.diag-problem-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.diag-loading, .diag-events-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 0;
}

/* TikTok Debug / Test (Diagnostics, sandbox-only) */
.diag-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--badge-pending-fg); background: var(--badge-pending-bg); border: 1px solid var(--badge-pending-bd);
  padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
.tiktok-debug-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px;
}
.tiktok-debug-select { flex: 1; min-width: 180px; max-width: 360px; }
/* TikTok Status diagnostic readout (always-on capability/scope rows). */
.ttsd-body { display: flex; flex-direction: column; gap: 1px; }
.ttsd-row {
  display: grid; grid-template-columns: minmax(150px, 210px) 1fr; align-items: baseline; gap: 18px;
  padding: 6px 2px; border-bottom: 1px solid rgba(140,170,220,0.08);
  font-size: 12.5px;
}
.ttsd-row:last-child { border-bottom: none; }
.ttsd-k { color: var(--text-muted); }
.ttsd-v { color: var(--text-secondary); text-align: left; word-break: break-word; }
.ttsd-v--ok   { color: #5FD08A; font-weight: 600; }
.ttsd-v--warn { color: #5DA9FF; font-weight: 600; }

.tiktok-debug-verdict {
  font-size: 12.5px; font-weight: 600; padding: 10px 14px; border-radius: var(--r);
  margin-bottom: 14px; display: none;
}
.tiktok-debug-verdict.is-shown { display: block; }
.tiktok-debug-verdict--pass { background: rgba(94,158,126,0.08); border: 1px solid rgba(94,158,126,0.22); color: #5E9E7E; }
.tiktok-debug-verdict--fail { background: rgba(255,107,107,0.06); border: 1px solid rgba(255,107,107,0.18); color: #FF8A8A; }
.tiktok-debug-verdict--info { background: rgba(96,165,250,0.06); border: 1px solid rgba(96,165,250,0.18); color: #74B4FF; }
.tiktok-debug-steps { display: flex; flex-direction: column; gap: 8px; }
.ttd-step { border-radius: var(--r); background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; }
.ttd-step-hdr { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; }
/* Metric rows have no step number - 2 columns (label + pill) so the label gets full width. */
.ttd-step-hdr--metric { grid-template-columns: minmax(0,1fr) auto; }
.ttd-step-num {
  width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0; background: rgba(255,255,255,0.05); color: var(--text-muted);
}
.ttd-step-body { min-width: 0; }
.ttd-step-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ttd-step-detail { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; margin-top: 2px; word-break: break-word; }
.ttd-pill { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ttd-pill--pass { background: rgba(94,158,126,0.12); color: #5E9E7E; border: 1px solid rgba(94,158,126,0.28); }
.ttd-pill--fail { background: rgba(255,107,107,0.10); color: #FF8A8A; border: 1px solid rgba(255,107,107,0.24); }
.ttd-pill--info { background: rgba(96,165,250,0.10); color: #74B4FF; border: 1px solid rgba(96,165,250,0.24); }
.ttd-pill--skip { background: rgba(148,163,184,0.10); color: var(--text-muted); border: 1px solid rgba(148,163,184,0.20); }
.ttd-pill--pending { background: var(--badge-pending-bg); color: var(--badge-pending-fg); border: 1px solid var(--badge-pending-bd); }
.ttd-raw-toggle { display: inline-block; margin: 0 14px 10px; font-size: 11px; font-weight: 600; color: #74B4FF; cursor: pointer; background: none; border: none; padding: 0; }
.ttd-raw {
  display: none; margin: 0 14px 12px; padding: 10px 12px; background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: #B8C4D8; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto;
}
.ttd-raw.is-open { display: block; }

.diag-events-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.diag-event {
  /* Compact single row: status pill | title + file inline | timestamp. The
     plain-language reason/action wrap below within .diag-event-main only when
     present (failures), so routine "Already posted" rows stay one line. */
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  font-size: 12px;
}
.diag-event--success { border-left-color: rgba(95, 179, 154, 0.55); }
.diag-event--error   { border-left-color: rgba(217, 128, 144, 0.55); }
.diag-event--warn    { border-left-color: rgba(93, 169, 255, 0.55); }
.diag-event--info    { border-left-color: rgba(91, 158, 224, 0.55); }
.diag-event-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.diag-event-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.diag-event-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #DCE8F4;
  line-height: 1.3;
}
.diag-event-file {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  word-break: break-word;
}
.diag-event-repeat {
  font-size: 11px;
  font-weight: 600;
  color: #8BA8E8;
}
.diag-event-reason,
.diag-event-action {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.diag-event-label {
  color: var(--text-muted);
  font-weight: 600;
}
.diag-event-ts {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.3;
}
/* Status pill: color lives on the pill (consistent with the dashboard health
   bar and platform/alert badges); the title text stays neutral. */
.diag-event-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Same semantic palette used across the app (KPI icons, alert badges). */
.diag-event-status--success { color: #62BE9A; background: rgba(95, 179, 154, 0.12); border: 1px solid rgba(95, 179, 154, 0.30); }
.diag-event-status--error   { color: #E58A98; background: rgba(217, 128, 144, 0.12); border: 1px solid rgba(217, 128, 144, 0.30); }
.diag-event-status--warn    { color: #5DA9FF; background: rgba(93, 169, 255, 0.12);  border: 1px solid rgba(93, 169, 255, 0.30); }
.diag-event-status--info    { color: #67A8E8; background: rgba(91, 158, 224, 0.12);  border: 1px solid rgba(91, 158, 224, 0.30); }
@media (max-width: 640px) {
  .diag-event { flex-wrap: wrap; gap: 6px 10px; }
  .diag-event-ts { width: 100%; }
}

.diag-tech-wrap { margin-top: 12px; }
.diag-tech-wrap .log-panel.diag { max-height: 280px; }

.diag-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}

.diag-card-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.diag-card-desc  { font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.55; }

/* ── Modal ────────────────────────────────────────────────────────────── */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9,23,45,0.82);
  backdrop-filter: blur(6px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open { display: flex; }

.modal {
  /* Match the marketing site's locked page blue (#0C1D3A) - the previous
     #132A4E/#0F2342 gradient read too bright next to the deep navy UI. */
  background: #0C1D3A;
  border-radius: var(--r-xl);
  width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
  border: 1px solid var(--border-blue);
  position: relative;
}

.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(59,108,255,0.55) 25%, rgba(107,142,255,0.80) 50%, rgba(59,108,255,0.55) 75%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

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

.modal-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }

.modal-close {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: background 0.14s, color 0.14s;
}

.modal-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }
/* .modal-x is the same close affordance used by the destination Manage panel + several modals;
   it had no styling and rendered as a default white browser button. Match .modal-close exactly. */
.modal-x {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: rgba(255,255,255,0.04);
  cursor: pointer; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: background 0.14s, color 0.14s;
}
.modal-x:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.modal-body { padding: 22px 26px 26px; }

/* ── Schedule modal (viewport-fit two-column) ──────────────────────────── */
.modal.schedule-modal {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 22px;
}

.schedule-modal .modal-header {
  padding: 20px 48px 14px;
}

/* ── Quick Post single-column layout ──────────────────────────────────── */
.schedule-modal.quick-post-mode {
  width: min(640px, calc(100vw - 48px));
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.schedule-modal.quick-post-mode .modal-header {
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.schedule-modal.quick-post-mode .schedule-modal-body {
  display: block;
  min-height: 0;
  overflow-y: auto;
  /* Extra bottom padding so the last preset row clears the sticky footer. */
  padding: 14px 22px 28px;
}
.schedule-modal.quick-post-mode .schedule-modal-footer,
.schedule-modal.quick-post-mode .schedule-modal-actions {
  height: 60px;
  padding: 0 24px;
  flex-shrink: 0;
}
.qp-layout { display: none; flex-direction: column; gap: 0; }
.qp-layout.active { display: flex; }
.qp-layout .form-group { margin-bottom: 12px; }
.qp-layout .form-group:last-child { margin-bottom: 6px; }
.qp-layout .schedule-datetime-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.qp-layout .schedule-datetime-row .form-group { margin-bottom: 0; }
.qp-layout .schedule-upload-dropzone { margin-bottom: 12px; }
.qp-layout #edit-bottom-row { display: flex; gap: 12px; margin-bottom: 12px; }
.qp-layout #edit-bottom-row .form-group { flex: 1; margin-bottom: 0; min-width: 0; }
.qp-layout #edit-fg-platforms { margin-bottom: 12px; }
.qp-layout textarea.schedule-caption,
.qp-layout textarea.caption-field { height: 120px; min-height: 120px; max-height: 180px; resize: vertical; }
.qp-layout #edit-fg-hashtags .tags-wrap { min-height: 40px; }
.qp-preset-wrap { display: none; }

/* Quick Post: Platforms (left) + Date/Time stacked (right) in one 2-col row. */
.qp-layout .qp-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  align-items: start;
  margin-bottom: 12px;
}
.qp-layout .qp-top-grid #edit-fg-platforms { margin-bottom: 0; }
.qp-layout .qp-dt-col { display: flex; flex-direction: column; gap: 10px; }
.qp-layout .qp-top-grid .schedule-datetime-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 0; }
.qp-layout .qp-top-grid .schedule-datetime-row .form-group { margin-bottom: 0; }
.qp-layout .qp-top-grid .schedule-time-hint { margin: 2px 0 0; }

/* Quick Post: smaller, calmer fonts in the Hashtag Set / Category / Privacy row. */
.qp-layout #edit-bottom-row .form-control { font-size: 12px; padding: 8px 10px; width: 100%; min-width: 0; text-overflow: ellipsis; }
.qp-layout #edit-bottom-row .form-label { font-size: 10.5px; }
.qp-layout #edit-bottom-row { gap: 14px; }

/* Quick Post date/time quick-set chips (Today / Tonight / Post now). Hidden in
   the full edit modal; shown only in the quick-post flow. */
.qp-quickset { display: none; }
.qp-layout .qp-quickset { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.qp-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.qp-chip:hover { background: rgba(96, 165, 250, 0.10); border-color: rgba(96, 165, 250, 0.30); color: var(--text); }
.qp-chip--now { color: #DCE8FF; background: rgba(59, 108, 255, 0.18); border-color: rgba(96, 165, 250, 0.42); }
.qp-chip--now:hover { background: rgba(59, 108, 255, 0.28); }

/* Quick Post: a file dropzone does not need to be tall - keep it compact. */
.qp-layout .schedule-upload-dropzone { min-height: 112px; max-height: 128px; padding: 14px 16px; margin-bottom: 12px; }
.qp-layout .schedule-upload-dropzone .upload-zone-icon { font-size: 18px; margin-bottom: 4px; }
.qp-layout .schedule-upload-dropzone .upload-zone-text { font-size: 12.5px; }
.qp-layout .schedule-upload-dropzone .upload-zone-sub { font-size: 11px; margin-top: 2px; }
.qp-layout .schedule-upload-dropzone .upload-zone-tip { display: none; }

/* ── Shared form modal shell (Edit Schedule + Bulk Edit) ─────────────── */
.schedule-modal.edit-mode,
.schedule-modal.bulk-edit-mode {
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.schedule-modal.edit-mode .modal-header,
.schedule-modal.bulk-edit-mode .modal-header {
  padding: 14px 24px 10px;
  flex-shrink: 0;
}

.schedule-modal.edit-mode .schedule-modal-body,
.schedule-modal.bulk-edit-mode .schedule-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 24px 18px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: none;
}

.schedule-modal.edit-mode .modal-section,
.schedule-modal.bulk-edit-mode .modal-section {
  gap: 10px;
}

.schedule-modal.edit-mode .modal-section-title,
.schedule-modal.bulk-edit-mode .modal-section-title {
  margin-bottom: 0;
}

.schedule-modal.edit-mode .schedule-video-card,
.schedule-modal.bulk-edit-mode .schedule-video-card {
  padding: 10px 12px;
  gap: 10px;
  align-items: center;
}

.schedule-modal.edit-mode .schedule-video-card-icon,
.schedule-modal.bulk-edit-mode .schedule-video-card-icon,
.schedule-modal.edit-mode .edit-file-icon,
.schedule-modal.bulk-edit-mode .edit-file-icon {
  font-size: 18px;
}

.schedule-modal.edit-mode .schedule-video-card-title,
.schedule-modal.bulk-edit-mode .schedule-video-card-title,
.schedule-modal.edit-mode .edit-file-name,
.schedule-modal.bulk-edit-mode .edit-file-name {
  font-size: 13.5px;
  line-height: 1.3;
}

.schedule-modal.edit-mode .schedule-video-card-sub,
.schedule-modal.bulk-edit-mode .schedule-video-card-sub,
.schedule-modal.edit-mode .edit-file-sub,
.schedule-modal.bulk-edit-mode .edit-file-sub {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
}

.schedule-modal.edit-mode .edit-layout.active,
.schedule-modal.bulk-edit-mode .edit-layout.active {
  gap: 14px;
}

.schedule-modal.edit-mode .form-grid-2,
.schedule-modal.bulk-edit-mode .form-grid-2,
.schedule-modal.edit-mode .form-grid-3,
.schedule-modal.bulk-edit-mode .form-grid-3 {
  gap: 12px;
}

.modal-section {
  display: grid;
  gap: 14px;
}

.modal-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9EC5FF;
  margin: 0;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.schedule-video-card {
  display: none;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(79,141,255,0.06);
  border: 1px solid rgba(79,141,255,0.18);
  border-radius: var(--r-md);
}
.schedule-video-card-icon { font-size: 22px; flex-shrink: 0; line-height: 1; color: #8BAAC4; display: inline-flex; align-items: center; }
.schedule-video-card-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; }
.schedule-video-card-sub  { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }

.edit-file-card { display: none; }
.edit-file-icon { font-size: 22px; flex-shrink: 0; }
.edit-file-name { font-size: 14px; font-weight: 600; color: var(--text); }
.edit-file-sub  { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.edit-file-card--missing { border-color: rgba(224,96,96,0.30); }
.edit-file-card--missing .edit-file-sub { color: #E7A0A0; }

.edit-layout {
  display: none;
  flex-direction: column;
  gap: 22px;
}
.edit-layout.active { display: flex; }

#edit-top-row { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
#edit-top-row > * { width: 100%; }
/* Clear, breathable separation before Date/Time so it never feels jammed under
   the Posting notes card. (#edit-top-row already adds 14px gap between children;
   this lifts it to ~28px total ahead of the Date/Time fields.) */
#edit-top-row .schedule-datetime-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
#edit-top-row .schedule-time-hint { margin: 0; }
#edit-bottom-row { display: flex; gap: 12px; }

.schedule-modal.edit-mode .modal-section .form-group,
.schedule-modal.bulk-edit-mode .modal-section .form-group {
  margin-bottom: 0;
}

.schedule-modal.edit-mode .form-label,
.schedule-modal.bulk-edit-mode .form-label {
  margin-bottom: 8px;   /* more space between labels and their fields */
  position: static;
  padding-right: 0;
  font-size: 12.5px;
}

.schedule-modal.edit-mode .form-label-meta,
.schedule-modal.bulk-edit-mode .form-label-meta {
  display: block;
  margin-left: 0;
  margin-top: 4px;
  font-size: 11px;
}

.schedule-modal.edit-mode .char-count,
.schedule-modal.bulk-edit-mode .char-count {
  position: static;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.schedule-modal.edit-mode .form-control,
.schedule-modal.bulk-edit-mode .form-control {
  padding: 9px 12px;
}

.schedule-modal.edit-mode .schedule-platform-checks,
.schedule-modal.bulk-edit-mode .schedule-platform-checks {
  /* Flex-wrap row: chips size to their content and wrap. (Was a rigid 2-col grid whose
     1fr columns squeezed the wide "Coming soon" chips into overlapping the next column
     at narrower modal widths.) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.schedule-modal.edit-mode .schedule-platform-checks .platform-check,
.schedule-modal.bulk-edit-mode .schedule-platform-checks .platform-check {
  font-size: 13px;
  line-height: 1.4;
}

.schedule-modal.edit-mode #edit-fg-caption textarea {
  min-height: 120px;
  max-height: none;
  resize: vertical;
}

.schedule-modal.edit-mode #edit-fg-preset {
  display: block;
  margin: 0;
}

.schedule-modal.edit-mode .edit-pw-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin-bottom: 0;
}

.schedule-modal.edit-mode .edit-pw-label--link {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  text-align: left;
}

.schedule-modal.edit-mode .edit-pw-sel {
  width: 100%;
}

.schedule-modal.edit-mode .edit-pw-settings-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  text-align: left;
}

.schedule-modal.edit-mode .edit-pw-settings-link:hover {
  color: var(--blue);
}

.schedule-modal.bulk-edit-mode .edit-pw-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 0;
}

.schedule-modal.bulk-edit-mode .edit-pw-sel {
  width: 100%;
}

.schedule-modal.bulk-edit-mode .edit-pw-settings-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  text-align: left;
}

.schedule-modal.bulk-edit-mode .edit-pw-settings-link:hover {
  color: var(--blue);
}

.schedule-modal.edit-mode .preset-guide-toggle,
.schedule-modal.bulk-edit-mode .preset-guide-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
}

.schedule-modal.edit-mode .preset-guide-toggle-link,
.schedule-modal.bulk-edit-mode .preset-guide-toggle-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.schedule-modal.edit-mode .preset-guide-toggle:hover .preset-guide-toggle-link,
.schedule-modal.bulk-edit-mode .preset-guide-toggle:hover .preset-guide-toggle-link {
  color: var(--blue-h, #93c5fd);
}

.schedule-modal.edit-mode .preset-guide-panel,
.schedule-modal.bulk-edit-mode .preset-guide-panel {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background: rgba(8, 20, 40, 0.45);
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.schedule-modal.edit-mode .preset-guide-panel[hidden],
.schedule-modal.bulk-edit-mode .preset-guide-panel[hidden] {
  display: none !important;
}

.schedule-modal.edit-mode .preset-guide-item-name,
.schedule-modal.bulk-edit-mode .preset-guide-item-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 1px;
}

.schedule-modal.edit-mode .preset-guide-item-line,
.schedule-modal.bulk-edit-mode .preset-guide-item-line {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ── Schedule preset cleanup (applies in EVERY modal mode, incl. quick post) ──── */
/* The full preset guide stays hidden until "View preset guide" is clicked, and when
   open it's a compact styled panel - never a wall of raw text in the form. */
.preset-guide-panel[hidden] { display: none !important; }
.preset-guide-panel {
  margin-top: 6px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(96,165,250,0.14); background: rgba(8,20,40,0.45);
  max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.preset-guide-item-name { font-size: 12.5px; font-weight: 700; color: var(--text-secondary, #C8D6E5); margin-bottom: 1px; }
.preset-guide-item-line { font-size: 11.5px; line-height: 1.45; color: var(--text-muted, #9aa); }
.preset-guide-item-line .preset-guide-lbl { color: var(--text-secondary, #9EB0C2); font-weight: 600; }

/* One clean summary card for the SELECTED preset only. */
.preset-summary-card {
  margin-top: 8px; padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(96,165,250,0.18); background: rgba(8,20,40,0.40);
}
.preset-summary-name { font-size: 13px; font-weight: 700; color: var(--text, #F5F5F3); margin-bottom: 5px; }
.preset-summary-line { font-size: 12px; line-height: 1.55; color: var(--text-muted, #9aa); }
.preset-summary-line + .preset-summary-line { margin-top: 2px; }
.preset-summary-lbl { color: var(--text-secondary, #9EB0C2); font-weight: 600; margin-right: 5px; }

.schedule-modal.edit-mode .preset-guide-lbl,
.schedule-modal.bulk-edit-mode .preset-guide-lbl {
  font-weight: 600;
}

.schedule-modal.edit-mode .schedule-time-hint {
  margin: 0;
  font-size: 11px;
}

.schedule-modal.edit-mode .schedule-modal-footer,
.schedule-modal.edit-mode .schedule-modal-actions,
.schedule-modal.bulk-edit-mode .schedule-modal-footer,
.schedule-modal.bulk-edit-mode .schedule-modal-actions {
  padding: 18px 28px;
  flex-shrink: 0;
  gap: 12px;
  height: auto;
  min-height: 64px;
}

.schedule-modal.edit-mode #upload-zone,
.schedule-modal.edit-mode #edit-fg-hashtags,
.schedule-modal.edit-mode #video-check-result { display: none !important; }

@media (max-width: 640px) {
  .schedule-modal.edit-mode,
  .schedule-modal.bulk-edit-mode {
    width: calc(100vw - 24px);
  }
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
  .schedule-modal.edit-mode .schedule-modal-body,
  .schedule-modal.bulk-edit-mode .schedule-modal-body {
    padding: 12px 18px 16px;
    gap: 12px;
  }
}

/* ── tp-* chip picker ─────────────────────────────────────────────────────── */
.tp-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
/* 2×2 grid so all 4 windows fit compactly */
.tp-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.tp-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tp-group-name {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}
.tp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tp-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.tp-chip:hover {
  border-color: rgba(79,141,255,0.45);
  background: rgba(79,141,255,0.08);
  color: var(--text);
}
.tp-chip.selected {
  background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
  border-color: rgba(99,141,255,0.70);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 0 14px rgba(59,108,255,0.40), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ── Edit modal: active-preset posting windows ─────────────────────────────── */
/* Full-width preset card: spans the whole content column, never squeezed into a
   narrow Date/Time sub-column. */
#edit-fg-preset {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(96,165,250,.14);
  background: rgba(11,29,58,.5);
}
/* The duplicate static quick-post select is no longer used - edit-fg-preset
   serves every mode now. Keep it hidden so it never renders. */
#qp-preset-wrap { display: none !important; }
.edit-pw-header {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  margin-bottom: 12px;
}
.edit-pw-header .form-label,
.edit-pw-header .edit-pw-label {
  text-align: left; align-self: flex-start; margin: 0;
}
.edit-pw-label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); flex-shrink: 0;
}
.edit-pw-label--link {
  background: none; border: none; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
  color: var(--text-muted);
}
.edit-pw-label--link:hover { color: #7AABFF; }
.edit-pw-sel {
  font-size: 12px;
  padding: 6px 28px 6px 10px;
  flex: 1;
  min-width: 0;
}
.edit-pw-recommend-label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); margin: 4px 0 6px;
}
.edit-pw-list { display: flex; flex-direction: column; gap: 4px; }
.edit-pw-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(15,35,66,.4);
  transition: background .12s, border-color .12s;
}
.edit-pw-row--match,
.edit-pw-row--done {
  background: rgba(79,141,255,.1);
  border-color: rgba(79,141,255,.4);
  /* Calm "locked in" accent bar so a completed row stays visibly chosen even
     after the user moves on to the next row. */
  box-shadow: inset 3px 0 0 rgba(79,141,255,.6);
}
/* The row the user just touched gets a stronger ring; completed-but-inactive
   rows still keep their done state above. */
.edit-pw-row--active {
  border-color: rgba(120,170,255,.85);
  box-shadow: inset 3px 0 0 rgba(120,170,255,.95), 0 0 0 1px rgba(79,141,255,.35);
}
/* Compact summary + completion count above the rows. */
.edit-pw-summary {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 12px;
  margin: 0 0 8px; padding: 7px 11px;
  border-radius: 8px;
  background: rgba(15,35,66,.55); border: 1px solid rgba(255,255,255,.07);
}
.edit-pw-summary-line { font-size: 11.5px; color: var(--text-secondary); min-width: 0; }
.edit-pw-summary-lbl { color: var(--text-muted); margin-right: 4px; }
.edit-pw-summary-none { color: var(--text-muted); font-style: italic; }
.edit-pw-summary-count {
  font-size: 11px; font-weight: 700; color: #93c5fd; white-space: nowrap;
}
.edit-pw-confirm-check { color: #6FBF95; font-weight: 800; }
.edit-pw-meta {
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
  grid-column: 1; grid-row: 1;
}
.edit-pw-day {
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
  min-width: 64px; white-space: nowrap;
}
.edit-pw-window {
  font-size: 11.5px; color: var(--text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.edit-pw-dot { color: rgba(255,255,255,.25); margin: 0 1px; }
.edit-pw-span { color: var(--text-secondary); white-space: nowrap; }
.edit-pw-wname { font-size: 11px; color: var(--text-muted); }
.edit-pw-chips {
  display: flex; flex-wrap: nowrap; gap: 5px; align-items: center;
  grid-column: 2; grid-row: 1; justify-content: flex-end;
}
.edit-pw-chip {
  font-size: 11px; font-family: inherit; font-weight: 500;
  /* Uniform width + centered text so the three time columns line up dead
     straight across every row (10:00 AM is wider than 8:00 AM otherwise). */
  min-width: 70px; padding: 3px 8px; text-align: center;
  border-radius: 20px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: background .1s, border-color .1s, color .1s;
}
.edit-pw-chip:hover { background: rgba(79,141,255,.1); border-color: rgba(79,141,255,.35); color: var(--text-secondary); }
.edit-pw-chip.is-sel {
  background: linear-gradient(180deg, rgba(79,141,255,.34), rgba(79,141,255,.24));
  border-color: rgba(120,170,255,.85);
  color: #eaf2ff; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(79,141,255,.35), 0 2px 8px rgba(79,141,255,.22);
}
.edit-pw-chip-check { font-size: 10px; opacity: .95; margin-right: 1px; }
.edit-pw-chip--custom { color: rgba(255,255,255,.3); font-style: italic; }
/* Row 2: a plain confirmation of the chosen time + its window status. */
.edit-pw-confirm {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px;
}
.edit-pw-selected {
  font-size: 11px; font-weight: 600; color: #cfe0ff; font-style: normal;
}
.edit-pw-selected strong { color: #fff; font-weight: 800; }
.edit-pw-status {
  font-size: 10.5px; font-style: italic;
}
.edit-pw-status--in  { color: #60A5FA; }
.edit-pw-status--out { color: var(--warning); }
/* Calm context helper copy for preset time selection (posting modal + Settings). */
.edit-pw-help, .sched-win-help {
  font-size: 11px; color: var(--text-muted); line-height: 1.4; margin: 0 0 8px;
}
.sched-win-help { margin: 2px 0 8px; }
.edit-pw-no-match {
  font-size: 11px; color: var(--text-muted); font-style: italic;
  padding: 6px 8px;
}
.edit-pw-none {
  font-size: 11px; color: var(--text-muted); padding: 2px 0 6px;
}


.schedule-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  padding: 28px 32px;
  overflow-y: auto;
  min-height: 0;
  align-content: start;
}

.schedule-modal-col {
  min-width: 0;
}

.schedule-modal-col-content {
  padding-bottom: 4px;
}

.schedule-modal .form-group {
  margin-bottom: 12px;
}

.schedule-modal .form-group:last-child {
  margin-bottom: 12px;
}

.schedule-modal-col-content > .form-group:last-child {
  margin-top: 6px;
}

.schedule-modal .form-label {
  display: block;
  margin-bottom: 8px;
  line-height: 1.35;
}

.schedule-modal .form-label-meta {
  display: block;
  margin-left: 0;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
  color: var(--text-muted);
  line-height: 1.45;
}

.schedule-modal .char-count {
  margin-top: 6px;
  margin-bottom: 2px;
}

.schedule-modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}

.schedule-datetime-row .form-group {
  margin-bottom: 0;
}

.schedule-time-hint {
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 1.35;
}

.schedule-upload-dropzone {
  min-height: 120px;
  max-height: 128px;
  padding: 18px;
  border-radius: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.schedule-upload-dropzone .upload-zone-icon {
  font-size: 22px;
  margin-bottom: 6px;
}

.schedule-upload-dropzone .upload-zone-text {
  font-size: 13px;
}

.schedule-upload-dropzone .upload-zone-sub {
  font-size: 11.5px;
  margin-top: 2px;
}

.schedule-modal textarea.schedule-caption,
.schedule-modal textarea.caption-field {
  height: 120px;
  min-height: 120px;
  max-height: 180px;
  resize: vertical;
  overflow: auto;
  border-radius: 15px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.45;
  text-transform: none;             /* never auto-uppercase the user's caption */
  border: 1px solid rgba(120,150,200,0.22);   /* subtle blue-gray */
  transition: border-color 0.14s, box-shadow 0.14s;
}
.schedule-modal textarea.caption-field:focus,
.schedule-modal textarea.schedule-caption:focus {
  border-color: rgba(79,141,255,0.55);
  box-shadow: 0 0 0 3px rgba(79,141,255,0.16);   /* crisp blue + soft glow */
  outline: none;
}

.schedule-modal .tags-wrap.hashtag-input-box {
  min-height: 92px;
  max-height: 128px;
  overflow: visible;
  align-content: flex-start;
  padding: 10px 12px;
}

.schedule-modal .schedule-platform-checks {
  /* Flex-wrap row: chips size to their content and wrap cleanly. (Was a rigid 3x2
     column-major grid whose 1fr columns were narrower than the "Coming soon" chips,
     so wide chips overflowed and overlapped into the next column.) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.schedule-modal .schedule-platform-checks .platform-check {
  font-size: 13px;
}

.schedule-modal-footer,
.schedule-modal-actions {
  position: static;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 20px 48px;
  border-top: 1px solid rgba(118, 134, 158, 0.28);
  background: var(--surface-raised);
  /* Subtle lift so the sticky footer reads as intentional above scrolled content. */
  box-shadow: 0 -8px 18px -10px rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.schedule-modal-footer .btn-primary,
.schedule-modal-actions .btn-primary {
  min-width: 160px;
}

.schedule-modal-footer .btn,
.schedule-modal-actions .btn {
  min-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

.schedule-btn-post-now {
  font-size: 12.5px;
  color: var(--text-muted);
}

.schedule-modal .video-check-result {
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .modal.schedule-modal:not(.edit-mode):not(.bulk-edit-mode) {
    width: min(560px, calc(100vw - 24px));
  }

  .schedule-modal:not(.edit-mode):not(.bulk-edit-mode) .schedule-modal-body {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 24px;
    overflow-y: auto;
  }

  .schedule-modal-col-settings {
    margin-top: 0;
  }

  .schedule-modal .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .schedule-datetime-row .form-group {
    margin-bottom: 12px;
  }

  .schedule-datetime-row .form-group:last-child {
    margin-bottom: 0;
  }

  .schedule-modal-footer,
  .schedule-modal-actions {
    padding: 16px 24px;
    flex-wrap: wrap;
  }

  .schedule-modal-footer .btn,
  .schedule-modal-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

/* ── Form ─────────────────────────────────────────────────────────────── */

.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-label span { font-weight: 400; color: var(--text-muted); margin-left: 4px; }

.form-label-meta {
  margin-left: 6px;
  font-weight: 400;
  opacity: 0.75;
  color: var(--text-muted);
}

.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface-high);
  transition: border-color 0.14s, box-shadow 0.14s;
  outline: none;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.65);
  cursor: pointer;
}

.form-control:focus {
  border-color: rgba(59,108,255,0.50);
  box-shadow: 0 0 0 3px rgba(59,108,255,0.12);
}

/* ── Branded selects - all dropdowns ─────────────────────────────────────── */
select,
select.form-control,
.hf-select,
.edit-pw-sel,
.sched-slot-sel {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.35;
  border-radius: var(--r-sm);
  border: 1px solid var(--select-border);
  background-color: var(--select-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.5L6 6.5L10.5 1.5' stroke='%237AABFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 8px;
  color: var(--select-text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.14s, box-shadow 0.14s, background-color 0.14s, color 0.14s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

select:hover:not(:disabled),
select.form-control:hover:not(:disabled),
.hf-select:hover:not(:disabled),
.edit-pw-sel:hover:not(:disabled),
.sched-slot-sel:hover:not(:disabled) {
  border-color: var(--select-border-hover);
  background-color: var(--select-bg-hover);
  color: var(--select-text-hover);
}

select:focus,
select.form-control:focus,
.hf-select:focus,
.edit-pw-sel:focus,
.sched-slot-sel:focus {
  border-color: var(--select-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 108, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--select-text-focus);
}

select:disabled,
select.form-control:disabled,
.hf-select:disabled,
.edit-pw-sel:disabled,
.sched-slot-sel:disabled,
.sched-slot-sel.is-readonly {
  opacity: 0.48;
  cursor: not-allowed;
  border-color: rgba(140, 163, 184, 0.14);
}

select option,
select optgroup {
  background: var(--select-option-bg);
  color: var(--select-option-text);
}

select option:checked,
select option:hover {
  background: rgba(59, 108, 255, 0.28);
  color: #F0F4FF;
}

select.form-control {
  padding-right: 36px;
  cursor: pointer;
}

textarea.form-control { resize: vertical; min-height: 90px; }

/* ── Schedule a Video modal: one consistent dark dropdown style everywhere ── */
.schedule-modal select.form-control {
  height: 48px;
  background-color: rgba(15, 35, 66, 0.75);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 12px;
  color: #C4D9EE;
  padding: 0 38px 0 16px;   /* right room for the chevron; no clipping */
  /* Uniform with the text inputs (13.5px) so values are not bigger than labels. */
  font-size: 13.5px;
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
}
/* Hashtag Set + Category share one row; YouTube Privacy gets its own full-width
   row so its label and options never truncate to "P...". */
.schedule-modal:not(.qp-layout) #edit-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.schedule-modal:not(.qp-layout) #edit-bottom-row .form-group:last-child {
  grid-column: 1 / -1;
}
/* Breathing room before the full-width YouTube Privacy section so platform
   selection (chips) reads as its own calm block, not crowded into Privacy. */
.schedule-modal:not(.qp-layout) #edit-bottom-row #fg-yt-privacy {
  margin-top: 14px;
}
.schedule-modal #edit-bottom-row .form-group { min-width: 0; margin-bottom: 0; }
/* Posting Preset: full-width select + two inline dark links (no white buttons) */
.schedule-modal .edit-pw-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
.schedule-modal .edit-pw-header .form-label { margin-bottom: 0; }
.schedule-modal .edit-pw-header select { width: 100%; }

/* ── Add-mode "Video Details / Posting Setup" two-rail layout ──────────────
   Answers the modal in order: what video → where → when → what text → final
   settings. Right column is a dedicated, grouped posting-setup rail. */
.schedule-col-title {
  font-size: 14px;
  font-weight: 700;
  color: #60A5FA;
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}
/* Composer "More options": keep the first-post path fast - Campaign + Category (org) hide
   until the user opts in. Fields stay in the DOM, so nothing that reads them regresses. */
.composer-adv-collapsed #edit-fg-campaign,
.composer-adv-collapsed #edit-fg-category { display: none; }
.composer-more-toggle {
  background: none; border: none; color: #60A5FA; font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 0 0 10px; margin-top: -6px;
}
.composer-more-toggle:hover { text-decoration: underline; }
/* Headings belong to the full add-mode layout only. */
.schedule-modal.edit-mode .schedule-col-title,
.schedule-modal.bulk-edit-mode .schedule-col-title,
.schedule-modal.quick-post-mode .schedule-col-title { display: none; }

/* The right column reads as one clear "Posting Setup" card/rail. */
.schedule-modal:not(.edit-mode):not(.bulk-edit-mode):not(.quick-post-mode) .schedule-modal-col-settings {
  background: rgba(8, 24, 48, 0.72);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 18px;
  padding: 18px;
  align-self: start;
}
.schedule-modal:not(.edit-mode):not(.bulk-edit-mode):not(.quick-post-mode) #edit-top-row { gap: 16px; }

/* Preset block: compact - it was a bulky card for just a dropdown + two links. */
.schedule-modal:not(.edit-mode):not(.bulk-edit-mode) #edit-fg-preset {
  padding: 0;
  background: none;
  border: none;
}
.schedule-modal #edit-fg-preset select { height: 44px; }

/* Upload zone collapses to a compact one-line file summary once a file is
   chosen, so it never keeps dominating the modal. */
.schedule-upload-dropzone.has-file {
  min-height: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 18px;
  text-align: left;
}
.schedule-upload-dropzone.has-file .upload-zone-icon { font-size: 20px; margin: 0; }
.schedule-upload-dropzone.has-file .upload-zone-text {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schedule-upload-dropzone.has-file .upload-zone-sub { margin: 0; flex-shrink: 0; }
.schedule-upload-dropzone.has-file .upload-zone-tip { display: none; }
.schedule-upload-dropzone.has-file::after {
  content: 'Change video';
  flex-shrink: 0;
  color: #60A5FA;
  font-size: 12px;
  font-weight: 600;
}
/* Bulk Edit: the selected preset's actual posting windows, shown inline under
   the dropdown (never hidden behind "View preset guide"). */
.qbe-preset-inline { margin-top: 8px; }
.qbe-preset-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.qbe-preset-times {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 8px;
}
.qbe-preset-times-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8BC7FF;
}
.qbe-preset-times-val {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
/* One compact helper row: "View preset guide  .  Change defaults in Settings" */
.edit-pw-links {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 1px;
}
.edit-pw-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 11px; color: #6E8BA8; line-height: 1.4;
}
.edit-pw-link:hover { color: #93B4FD; text-decoration: underline; }
.edit-pw-link-dot { color: var(--text-muted); opacity: 0.5; font-size: 11px; }
/* Recommended-times rows sit just under the helper links inside the card. */
#edit-fg-preset .edit-pw-recommend-label { margin-top: 14px; }
#edit-fg-preset .edit-pw-list { margin-top: 2px; }

/* Instagram Metrics diagnostic */
.igm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 6px 0 12px; }
.igm-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05); min-width: 0; }
.igm-k { color: var(--text-muted); white-space: nowrap; }
.igm-v { color: #C4D9EE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 760px) { .igm-grid { grid-template-columns: 1fr; } }

.char-count      { font-size: 11.5px; color: var(--text-muted); text-align: right; margin-top: 3px; }
.char-count.over { color: var(--error); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Upload zone ──────────────────────────────────────────────────────── */

.upload-zone {
  border: 1.5px dashed rgba(96,165,250,0.32);
  border-radius: var(--r-lg);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  margin-bottom: 18px;
  /* Lighter than the modal with a soft blue wash + faint ring - reads as an
     active dropzone, never a dark disabled box. */
  background: rgba(96,165,250,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px rgba(96,165,250,0.06);
}

.upload-zone:hover, .upload-zone.drag-over {
  border-color: rgba(96,165,250,0.55);
  background: rgba(96,165,250,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(96,165,250,0.16), 0 8px 24px rgba(63,125,244,0.12);
}

.upload-zone.has-file {
  border-style: solid;
  border-color: rgba(96,165,250,0.45);
  background: rgba(96,165,250,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(96,165,250,0.14);
}

.upload-zone.edit-locked {
  border-color: rgba(140,170,220,0.14) !important;
  background: rgba(255,255,255,0.02) !important;
  cursor: default;
  pointer-events: none;
  opacity: 0.65;
}

.upload-zone-icon { font-size: 26px; margin-bottom: 8px; opacity: 0.9; }
.upload-zone-text { font-size: 13.5px; font-weight: 500; color: var(--text); }
.upload-zone-sub  { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.upload-zone-tip  { font-size: 11.5px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; max-width: 340px; opacity: 0.9; }

/* ── Platform checkboxes ──────────────────────────────────────────────── */

.platform-checks { display: flex; gap: 16px; }

/* Compact "Select all / Deselect all" links above a platform checkbox group. */
.plat-select-all { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; }
.plat-select-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: #6E97E8;
  cursor: pointer;
  text-decoration: none;
  transition: color .13s;
}
.plat-select-link:hover { color: #9abfff; text-decoration: underline; text-underline-offset: 2px; }
.plat-select-sep { font-size: 11px; color: var(--text-muted); }

/* Not-yet-live platform option (e.g. Facebook Pages in Stage 1) - visible but disabled.
   Single consolidated definition (was 3 conflicting opacity rules). */
.platform-check--soon { opacity: 0.55; cursor: default; pointer-events: none; }
.platform-check {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.platform-check input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; }

.platform-check--soon input[type=checkbox] { cursor: default; }

/* ── Unified platform picker: logo chips (Quick Post + both Bulk screens) ── */
.plat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plat-chip {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--border, rgba(148,163,184,0.22));
  background: rgba(255,255,255,0.03);
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.plat-chip:hover { border-color: rgba(96,165,250,0.45); background: rgba(255,255,255,0.05); }
.plat-chip:has(input:checked) {
  background: rgba(59,130,246,0.16);
  border-color: rgba(96,165,250,0.60);
  color: var(--text-primary, #F5F8FF);
}
.plat-chip input[type="checkbox"] { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--accent, #3B82F6); flex: 0 0 auto; }
.plat-chip img { width: 17px; height: 17px; object-fit: contain; flex: 0 0 auto; }
.plat-chip.is-mixed input { opacity: .6; }
/* Disabled/coming-soon chip: intentionally unavailable but the platform NAME stays readable. */
.plat-chip.is-disabled, .plat-chip--soon { opacity: 0.72; cursor: default; pointer-events: none; }
.plat-chip .plat-soon-tag { margin-left: 2px; }

/* Post-type segmented control (Video | Carousel). Capability-gated: hidden unless a selected
   destination supports carousel. Defaults to Video. */
.posttype-seg {
  display: inline-flex; gap: 0; margin: 0 0 12px; padding: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, rgba(148,163,184,0.22));
  border-radius: 12px;
}
.posttype-seg-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 7px 18px; border-radius: 9px;
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  transition: background .14s, color .14s;
}
.posttype-seg-btn.is-active { background: rgba(59,130,246,0.18); color: var(--text-primary, #F5F8FF); }

/* Carousel media list — ordered thumbnails with remove + reorder controls. */
.carousel-media-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; margin-top: 12px; }
.carousel-item { position: relative; border: 1px solid var(--border, rgba(148,163,184,0.22)); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.03); }
.carousel-item-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: rgba(0,0,0,0.25); }
.carousel-item-thumb--vid { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-secondary); aspect-ratio: 1 / 1; }
.carousel-item-ord { position: absolute; top: 4px; left: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: rgba(12,29,58,0.85); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.carousel-item-rm { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(220,38,38,0.9); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; }
.carousel-item-move { position: absolute; bottom: 4px; right: 4px; display: flex; gap: 3px; }
.carousel-item-move button { width: 18px; height: 18px; border: 0; border-radius: 4px; background: rgba(12,29,58,0.85); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.carousel-hint { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }

/* Destination chip reason — why a chip can't take the chosen post type (carousel not supported,
   pending approval, not connected). */
.plat-chip.is-unavailable { opacity: 0.6; }
.plat-chip .plat-reason { margin-left: 6px; font-size: 11px; font-weight: 600; color: #F87171; white-space: nowrap; }

/* Bulk Schedule (and any .platform-checks) picker: equal-width chips in a 2-column grid, content
   left-aligned so every checkbox + logo lines up vertically — matches the Default Platforms polish. */
.platform-checks.plat-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.platform-checks.plat-chips .plat-chip { justify-content: flex-start; width: 100%; min-width: 0; }

/* Settings > Destinations — replaces the old Default Platforms grid AND the top status matrix.
   Live platforms are actionable rows (Default toggle); coming-soon are quiet informational rows.
   Renders ENTIRELY from the platform-availability registry (status.platformAvailability). */

/* One concise status line under the page title (left: counts, right: system state). */
.settings-status-row {
  margin: 18px 32px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
  line-height: 1.4;
  color: #7FA8FF;
}
.settings-status-muted { color: #9FB1C7; }

.destinations-card {
  margin: 28px 32px 0;
  padding: 28px 32px 30px;
  border: 1px solid rgba(91, 139, 210, 0.28);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(18, 43, 79, 0.72), rgba(12, 31, 58, 0.86));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.destinations-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 26px;
}
.destinations-title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: #63A5FF;
  margin: 0 0 8px;
}
.destinations-copy {
  font-size: 15px;
  line-height: 1.45;
  color: #B7C5D8;
  margin: 0;
  max-width: 620px;
}
.destinations-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.destinations-link-button {
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(105, 153, 230, 0.32);
  background: rgba(22, 48, 86, 0.72);
  color: #82B1FF;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.destinations-link-button:hover {
  border-color: rgba(105, 153, 230, 0.55);
  background: rgba(29, 62, 110, 0.82);
}
/* "Use all connected" is the primary action (filled); "Clear defaults" stays a secondary outline. */
.destinations-link-button--primary {
  background: #2D7BFF;
  border-color: #2D7BFF;
  color: #FFFFFF;
}
.destinations-link-button--primary:hover {
  background: #1F6BEF;
  border-color: #1F6BEF;
}

.destinations-section { margin-top: 24px; }
.destinations-section:first-of-type { margin-top: 0; }
/* Extra breathing room so connected vs coming-soon read as two intentional groups. */
.destinations-section--soon { margin-top: 38px; }
.destinations-section-title {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #83B7FF;
}

/* Available-now: actionable rows with a Default toggle. */
.destination-live-list { display: grid; gap: 10px; }
.destination-live-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border: 1px solid rgba(92, 139, 210, 0.32);
  border-radius: 16px;
  background: rgba(10, 27, 52, 0.54);
}
.destination-live-row.is-default {
  border-color: rgba(79, 140, 255, 0.88);
  background: rgba(26, 66, 122, 0.50);
  box-shadow: 0 0 0 1px rgba(79, 140, 255, 0.12), 0 12px 28px rgba(19, 89, 200, 0.16);
}
.destination-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.destination-icon img { width: 26px; height: 26px; border-radius: 7px; }
.destination-icon--sm { width: 24px; height: 24px; border-radius: 7px; }
.destination-icon--sm img { width: 20px; height: 20px; border-radius: 5px; }
/* Name + status sit on ONE line: "Pinterest  ● Connected". */
.destination-live-text { min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.destination-name {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  color: #E7F0FF;
  margin: 0;
}
.destination-meta {
  font-size: 12.5px;
  line-height: 1.25;
  color: #41D9A0;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.destination-dot { width: 7px; height: 7px; border-radius: 50%; background: #41D9A0; box-shadow: 0 0 6px rgba(65,217,160,0.5); flex-shrink: 0; }
.destination-meta--off { color: #9FB1C7; }
/* The switch is the visual focus; "Default" is a small, light label beside it. */
.destination-default-control {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.destination-default-lbl { font-size: 12px; font-weight: 600; color: #8496AE; }
/* Native checkbox stays functional (savePostingDefaults reads it) but invisible — the pill is the UI. */
.destination-default-control input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.destination-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(119, 151, 194, 0.35);
  background: rgba(13, 29, 53, 0.92);
  cursor: pointer;
  flex-shrink: 0;
}
.destination-toggle::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #8FA2BA;
  transition: transform 140ms ease, background 140ms ease;
}
.destination-default-control input:checked + .destination-toggle {
  border-color: rgba(79, 140, 255, 0.85);
  background: #126BFF;
}
.destination-default-control input:checked + .destination-toggle::after {
  transform: translateX(20px);
  background: #FFFFFF;
}

/* Coming-soon: compact informational grid — not cards, not controls. */
.destination-soon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
}
.destination-soon-item {
  min-height: 36px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(8, 22, 43, 0.38);
  border: 1px solid rgba(96, 130, 176, 0.14);
}
.destination-soon-item .destination-name {
  font-size: 14px;
  font-weight: 700;
  color: #9EADBF;
}
.destination-soon-status {
  font-size: 12px;
  line-height: 1;
  font-weight: 750;
  color: #7F8FA5;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .destination-soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .settings-status-row { flex-direction: column; gap: 4px; }
  .destinations-card { margin: 24px 18px 0; padding: 22px 18px; }
  .destinations-card-header { flex-direction: column; gap: 16px; }
  .destinations-actions { width: 100%; }
  .destinations-link-button { flex: 1; }
}
@media (max-width: 680px) {
  .destination-soon-grid { grid-template-columns: 1fr; }
  .destination-live-row { grid-template-columns: 38px minmax(0, 1fr); }
  .destination-default-control { grid-column: 2; justify-content: flex-start; }
}

/* Composer coming-soon platform (e.g. TikTok): muted but readable, with a small refined pill. */
#edit-fg-platforms .platform-check--soon {
  opacity: 1;
  color: var(--text-muted, #8B98AD);
  font-size: 13px;
}
#edit-fg-platforms .platform-check--soon .plat-soon-tag {
  margin-left: 8px;
  color: var(--text-muted, #8B98AD);
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: .05em;
  padding: 1.5px 7px;
}

/* ── Composer platform CHIPS (founder redesign) ───────────────────────────
   Platform selection reads as configuration, not a legal disclaimer. Each
   .platform-check is a rounded toggle chip; the native checkbox is hidden but
   kept in the DOM (ids drive Select all / presets / defaults via app.js). The
   chips flow as a flex-wrap row (no rigid 2-col grid), and the selected look is
   driven purely off :checked. TikTok renders as a muted "Coming soon" chip last. */
/* De-scoped container layout so bulk + quick-post chip rows match the composer. */
.platform-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-auto-flow: row;
  gap: 8px;
}

/* De-scoped from #edit-fg-platforms so the SAME chip styling renders in the
   single-post composer, edit-post, quick-post, AND bulk-schedule modals. Any
   .platform-chips container gets identical pill chips. */
.platform-chips .platform-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(140, 170, 220, 0.22);
  cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
}
.platform-chips .platform-check:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(140, 170, 220, 0.36);
  color: var(--text);
}

/* Hide the native checkbox WITHOUT moving it off-screen: lay it transparently
   over its own chip (position:relative on the label). Focusing it never scrolls
   the modal, because the input is already in view on top of the chip it toggles. */
.platform-chips .platform-check {
  position: relative;
}
.platform-chips .platform-check input[type=checkbox] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Selected chip (input:checked) - filled brand-tinted blue, with a small check. */
.platform-chips .platform-check:has(> input:checked) {
  color: #EAF2FF;
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.55);
}
.platform-chips .platform-check:has(> input:checked)::before {
  content: "\2713";
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: #8CBBFF;
}
.platform-chips .platform-check:has(> input:checked):hover {
  background: rgba(96, 165, 250, 0.26);
  border-color: rgba(96, 165, 250, 0.7);
}

/* TikTok "Coming soon" chip - muted, disabled, sits at the end of the flow. */
.platform-chips .platform-check--soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 12px 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted, #8B98AD);
  background: rgba(148, 163, 184, 0.06);
  border: 1px dashed rgba(148, 163, 184, 0.24);
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

/* Quick Post / Edit — coming-soon platforms appear ONCE as a quiet single line (no chips, no icons,
   no per-platform controls). Registry-driven text set by syncComposerPlatformRows(). */
.composer-soon-line {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #8496AE;
}
.composer-soon-line:empty { display: none; }

/* TikTok Direct Post composer settings */
.tt-settings { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: rgba(15, 35, 66, 0.45); border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 12px; }
.tt-settings-sub { display: block; font-size: 12px; color: #9FB3D1; margin-bottom: 4px; }
.tt-settings-toggles { display: flex; flex-wrap: wrap; gap: 14px; }
.tt-settings-note { font-size: 12px; color: #8FA7C9; line-height: 1.4; }
.tt-settings-note--warn { color: #F0B86E; }
.tt-settings-disclosure { border-top: 1px solid rgba(148, 163, 184, 0.10); padding-top: 8px; }
/* An interaction toggle that's locked off because the post is private (Only me). */
.tt-row--locked { opacity: 0.45; cursor: not-allowed; }
.tt-row--locked input { cursor: not-allowed; }
/* TikTok Music Usage Confirmation consent (required for Direct Post audit). */
.tt-music-consent { font-size: 11.5px; color: #7D8DA3; line-height: 1.5; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(148, 163, 184, 0.10); }
.tt-music-consent a { color: #6EA8FF; }
.tt-music-consent a:hover { text-decoration: underline; }

/* TikTok Draft-mode hint: the app is approved for Draft Upload (video.upload), not
   auto-publish. A subtle blue "Draft" tag next to the TikTok picker label, plus the
   inline composer note explaining the video lands in the creator's TikTok drafts. */
.plat-draft-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #60A5FA; background: rgba(96,165,250,.10);
  border: 1px solid rgba(96,165,250,.30); border-radius: 4px; padding: 1px 5px;
  margin-left: 6px;
}
.tiktok-draft-note { color: var(--text-muted); margin-top: 6px; }

/* ── Tags ─────────────────────────────────────────────────────────────── */

/* Unified Hashtags section: "Saved set" + "Post hashtags" sub-labels stack cleanly. */
#edit-fg-hashtags .hashtag-sub-label { display: block; margin: 8px 0 4px; }
#edit-fg-hashtags .hashtag-sub-label--spaced { margin-top: 14px; }
#edit-fg-hashtags #form-hashtag-set { width: 100%; }

/* ── Caption section (premium polish): header count, one pill bar, light endings ── */
.cap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.cap-head .form-label { margin: 0; }
.cap-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cap-count .cap-count-plat { color: var(--text-secondary); font-weight: 600; }
.cap-count.warn { color: #E08A8A; }
.cap-count.over { color: var(--error, #E06060); font-weight: 600; }

/* One clean tools bar - offline caption quick fixes, pills all the same size */
.cap-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.cap-pill {
  height: 34px; padding: 0 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: rgba(255,255,255,0.045); border: 1px solid var(--border-strong, rgba(140,170,220,0.22)); color: var(--text-secondary);
}
.cap-pill:hover { background: rgba(255,255,255,0.08); border-color: rgba(140,170,220,0.34); color: var(--text); }
.cap-pill--undo { margin-left: auto; color: var(--text-muted); }
.cap-pill--undo:hover { color: var(--text); }

/* Saved endings - lower weight than the caption field */
.cta-sub-label { display: block; margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.cta-manager-hint { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--text-muted, #9aa); }
.cta-insert { margin-top: 16px; }
.cta-insert-row { display: flex; gap: 8px; align-items: stretch; }
.cta-insert-row .cta-insert-select { flex: 1; min-width: 0; }
.cta-insert-row .cta-manage-btn { flex-shrink: 0; height: auto; white-space: nowrap; }
.cta-manager { margin-top: 8px; padding: 10px; border: 1px solid var(--border, rgba(255,255,255,0.12)); border-radius: 8px; background: rgba(255,255,255,0.03); }
.cta-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cta-list-item { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.cta-list-text { font-size: 13px; word-break: break-word; }
.cta-del-btn { flex-shrink: 0; width: 22px; height: 22px; line-height: 1; border: none; border-radius: 6px; cursor: pointer; background: rgba(255,255,255,0.08); color: var(--text-muted, #9aa); font-size: 16px; }
.cta-del-btn:hover { background: rgba(239,68,68,0.18); color: #fca5a5; }
.cta-empty { font-size: 12px; color: var(--text-muted, #9aa); padding: 2px 0 6px; }
.cta-add-row { display: flex; gap: 8px; align-items: center; }
.cta-add-row .cta-new-input { flex: 1; }

/* Platform presets - quick way to set the platform mix */
#edit-fg-platforms .platform-preset-select { width: 100%; margin-bottom: 6px; }
#edit-fg-platforms .platform-preset-hint { margin-top: 0; margin-bottom: 14px; }

/* Composer Platforms header: label on the left, Select all / Deselect all on the right */
#edit-fg-platforms .plat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
#edit-fg-platforms .plat-head-label { margin: 0; }
#edit-fg-platforms .plat-head .plat-select-all { margin: 0; }
/* Composer Select all / Deselect all: small blue text-links per founder spec. */
#edit-fg-platforms .plat-head .plat-select-link { color: #60A5FA; font-weight: 700; }
#edit-fg-platforms .plat-head .plat-select-link:hover { color: #8CBBFF; }

/* Grouped "Posting notes" card below the platform grid - compact, subtle blue
   bordered box (no gold). Replaces the old paragraph wall. */
.posting-notes-card {
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 16px;
}
.posting-notes-title {
  font-size: 13px;
  font-weight: 800;
  color: #EAF2FF;
  margin: 0 0 8px;
}
.posting-notes-card p {
  margin: 0 0 7px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(190, 207, 230, 0.9);
}
.posting-notes-card p:last-child { margin-bottom: 0; }

.tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  min-height: 42px;
  background: var(--surface-high);
  cursor: text;
  transition: border-color 0.14s, box-shadow 0.14s;
}

.tags-wrap:focus-within {
  border-color: rgba(59,108,255,0.50);
  box-shadow: 0 0 0 3px rgba(59,108,255,0.12);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-surface);
  color: #7AABFF;
  border: 1px solid rgba(59,108,255,0.22);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
}

.tag-remove { cursor: pointer; opacity: 0.6; font-size: 14px; line-height: 1; background: none; border: none; color: inherit; padding: 0; }
.tag-remove:hover { opacity: 1; }

.tags-input {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  flex: 1;
  min-width: 120px;
  background: transparent;
}

/* ── Toast ────────────────────────────────────────────────────────────── */

.toast-container { position: fixed; top: 72px; right: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }

.toast {
  background: var(--surface-high);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 11px 18px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 28px rgba(0,0,0,0.44);
  animation: slideIn 0.2s ease;
  max-width: 320px;
}

.toast.success { background: #0f1b38; color: #74B4FF;   border-color: rgba(79,141,255,0.40); }
/* Error/redirect toasts use calm light blue (no annoying red/pink) on the app navy. */
.toast.error   { background: #14233f; color: #74B4FF;   border-color: rgba(96,165,250,0.34); }
.toast.info    { background: #0f1b38; color: #9abfff;   border-color: rgba(59,108,255,0.40); }
.toast--persist { max-width: 420px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.toast-dismiss {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.85;
  flex-shrink: 0;
  padding: 0;
}
.toast-dismiss:hover { opacity: 1; text-decoration: underline; }

/* Actionable "Bulk schedule saved" resume toast */
.toast--bulk-resume { max-width: 480px; align-items: center; }
.toast-rich-title { font-size: 13px; font-weight: 700; color: #C6DAF5; }
.toast-rich-sub { font-size: 12px; color: #9abfff; opacity: 0.85; margin-top: 2px; line-height: 1.4; }
.toast-rich-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.toast-action {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  font: inherit; font-size: 12px; font-weight: 700; padding: 7px 12px; cursor: pointer;
  white-space: nowrap; transition: filter .15s;
}
.toast-action:hover { filter: brightness(1.08); }

.billing-setup-notice {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.billing-setup-notice--info {
  background: rgba(59, 108, 255, 0.08);
  border: 1px solid rgba(59, 108, 255, 0.22);
  color: #9abfff;
}
.billing-setup-notice--success {
  background: rgba(59, 108, 255, 0.08);
  border: 1px solid rgba(59, 108, 255, 0.22);
  color: #9abfff;
}
.billing-setup-notice-dismiss {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  opacity: 0.85;
}
.billing-setup-notice-dismiss:hover { opacity: 1; text-decoration: underline; }

@keyframes slideIn {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Scrollbar ────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(140,170,220,0.16); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(140,170,220,0.28); }

.log-panel::-webkit-scrollbar-thumb { background: rgba(140,170,220,0.12); }
.log-panel::-webkit-scrollbar-thumb:hover { background: rgba(140,170,220,0.22); }

/* ── Meta Setup ───────────────────────────────────────────────────────────── */

.setup-card {
  background: var(--surface-1);
  border: 1px solid var(--border-blue);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

#account-health-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  grid-column: 1 / -1;
  min-height: 0;
  overflow: visible;
  margin-top: 4px;
}

#account-health-card .settings-card-header {
  padding: 18px 22px 16px;
}

#account-health-card .account-health-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

#account-health-card #account-health-results {
  padding: 16px 22px 22px;
}

.account-health-placeholder {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.setup-card-header {
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.setup-card-title { font-size: 16px; font-weight: 700; color: #60A5FA; margin-bottom: 5px; }
.setup-card-desc  { font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 520px; }

.info-rows { padding: 4px 22px 8px; }

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(140,170,220,0.07);
  gap: 20px;
  min-height: 38px;
}

.info-row:last-child { border-bottom: none; }

.info-label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 210px;
}

.info-value      { font-size: 12.5px; color: var(--text-secondary); text-align: right; }
.info-value.ok   { color: var(--success); }
.info-value.warn { color: var(--warning); }
.info-value.err  { color: var(--error); }
.info-value.dim  { color: var(--text-muted); }
.info-value.mono { font-family: inherit; }

.setup-messages {
  padding: 12px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid rgba(140,170,220,0.06);
}

.setup-messages:empty { display: none; }

.setup-msg {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.6;
  align-items: flex-start;
}

.setup-msg.error   { background: var(--accent-surface);   color: #74B4FF; border: 1px solid rgba(96,165,250,0.22); }
.setup-msg.warning { background: var(--warning-surface); color: #5DA9FF; border: 1px solid rgba(93, 169, 255,0.22); }
.setup-msg.info    { background: var(--accent-surface);  color: #A8C4FF; border: 1px solid rgba(59,108,255,0.22); }
.setup-msg.success { background: var(--success-surface); color: #74B4FF; border: 1px solid rgba(79,141,255,0.22); }

.setup-msg-icon { flex-shrink: 0; font-weight: 700; font-size: 13px; line-height: 1.6; }

.pages-list {
  padding: 14px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(140,170,220,0.06);
}

.page-item {
  background: var(--surface-high);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 18px;
}

.page-item.target {
  border-color: rgba(59,108,255,0.28);
  background: rgba(59,108,255,0.05);
}

.page-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.page-item-name   { font-size: 13px; font-weight: 600; color: var(--text); }
.page-item-meta   { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.page-item-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; padding-top: 2px; }

.token-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(140,170,220,0.09);
}

.token-preview-box {
  flex: 1;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.token-instruction {
  font-size: 12px;
  line-height: 1.55;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(93, 169, 255,0.08);
  border-radius: var(--r-sm);
  border: 1px solid rgba(93, 169, 255,0.16);
  color: #5DA9FF;
}

.token-instruction code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  background: rgba(255,255,255,0.07);
  padding: 1px 5px;
  border-radius: 3px;
}

.user-token-row {
  padding: 14px 22px 20px;
}

.user-token-label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.user-token-field {
  font-size: 12px;
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  color: var(--text-secondary);
}

/* Instagram Connection Setup */
.ig-setup-step-label {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.ig-setup-helper {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.6; max-width: 560px;
}
.ig-setup-where-link {
  font-size: 13px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.ig-setup-where-link:hover { color: var(--accent-hover); }
.ig-advanced-body { display: none; margin-top: 10px; }
.ig-advanced-body.ig-advanced-open { display: block; }

.setup-loading {
  padding: 16px 22px;
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Operational panels ──────────────────────────────────────────────────── */

/*
 * Dashboard ops grid - single column stack
 * Row 1: [Upcoming Posts - full width]
 * Row 2: [Needs Attention - full width]
 * Row 3: [Platform Health - full width]
 */
.dashboard-ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 4px;
  align-items: start;
}

.dash-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Daily Status panel */
.ds-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ds-row:last-child { border-bottom: none; }
.ds-label {
  flex: 0 0 120px;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 12px;
}
.ds-val {
  flex: 1;
  color: var(--text);
  font-size: 13px;
}
.ds-val--next { display: flex; flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ds-time { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.ds-time::before { content: '·'; margin-right: 4px; opacity: 0.5; }
.ds-val--top { font-size: 12px; word-break: break-word; }
.ds-val--muted { color: var(--text-muted); font-size: 12px; }
/* Connected status - matches the dashboard health strip blue (#8BC7FF). */
.ds-val--connected { color: #8BC7FF; font-weight: 600; }
.ds-footer { margin-top: 14px; }

/* Needs Attention compact card */
.na-card {
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.na-count {
  font-size: 13px;
  font-weight: 600;
  color: #D07070;
}
.na-recent-title {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.na-reason {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.na-actions { margin-top: 6px; }

@media (max-width: 900px) {
  .dashboard-ops-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Platform Health card ─────────────────────────────────────────────────── */

.phc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.phc-row:last-child { border-bottom: none; padding-bottom: 0; }

.phc-name {
  flex: 1;
  font-weight: 500;
  color: var(--text);
}

.phc-views {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 120px;
  text-align: right;
}

.op-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
}

.op-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.op-card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.op-empty {
  padding: 18px 0 4px;
}
.op-empty-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.op-empty-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 320px;
}

#failed-panel.op-card {
  padding: 16px 18px 14px;
}
#failed-panel .op-card-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#failed-panel-body {
  min-height: 48px;
  display: flex;
  flex-direction: column;
}

/* Needs Attention card */
.na-count {
  font-size: 13px;
  font-weight: 600;
  color: #f87171;
  margin-bottom: 10px;
}
.na-recent-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.na-recent-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.na-reason-sep {
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}
.na-reason {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.na-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.na-card { }
.na-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 4px; }
.na-overflow { font-size: 11.5px; color: var(--text-muted); padding: 4px 0 2px; }
.na-list-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  border-radius: 4px;
}
.na-list-row:last-child { border-bottom: none; }
.na-list-row:hover { background: rgba(255,255,255,0.03); padding-left: 4px; }
.na-list-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
  flex-shrink: 0;
}
.na-list-reason {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-queue-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.op-queue-info { flex: 1; min-width: 0; }
.op-queue-list .op-queue-row:last-child { border-bottom: none; }

.op-queue-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.op-queue-range {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.op-queue-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.op-queue-page-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.op-queue-pager-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
}

.op-queue-pager-btn:hover:not(:disabled) {
  color: #A8D4FF;
  text-decoration: underline;
}

.op-queue-pager-btn:disabled {
  opacity: 0.38;
  cursor: default;
}

.op-queue-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-queue-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-queue-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.op-queue-chips    { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 6px; }
.op-queue-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-queue-plats    { display: flex; gap: 4px; flex-wrap: wrap; }
.op-queue-actions  { display: flex; gap: 5px; flex-shrink: 0; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.qi-btn--sm { padding: 4px 10px; font-size: 11.5px; }

/* ── Failed Posts card - compact dashboard summary ─────────────────────────── */

.fp-panel-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: -4px 0 18px;
}

.fp-headline {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.fp-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.fp-item:last-child { border-bottom: none; padding-bottom: 4px; }

.fp-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.fp-filename {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
  line-height: 1.4;
  margin-bottom: 10px;
}

.fp-overall-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  background: rgba(220,60,60,.10);
  color: #D97070;
  border: 1px solid rgba(220,60,60,.18);
  flex-shrink: 0;
}

.fp-plat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.fp-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 11px;
}
.fp-chip--failed     { background: rgba(220,60,60,.10);  color: #D97070; border: 1px solid rgba(220,60,60,.18); }
.fp-chip--reconnect  { background: rgba(93,169,255,.11); color: #5DA9FF; border: 1px solid rgba(93,169,255,.26); }
.fp-chip--category   { background: rgba(255,255,255,.04); color: var(--text-secondary); border: 1px solid var(--border); }

.fp-summary-msg {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 16px;
}

/* Detail view styles - used on Posted and Analytics page */
.fp-plat-section {
  padding: 14px 0 10px;
  border-top: 1px solid var(--border);
}

.fp-plat-section:first-of-type { border-top: none; padding-top: 4px; }

.fp-explain {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 4px;
}

.fp-fix-line {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 6px;
}

.fp-tech-spec {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

.fp-plat-retry {
  margin-top: 4px;
}

.fp-item-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.fp-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 5px;
  transition: color .15s;
  margin-left: auto;
}
.fp-remove-btn:hover { color: var(--error); }

/* legacy - kept for any non-redesigned references */
.op-failed-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--border); gap: 10px; }
.op-failed-row:last-child { border-bottom: none; }
.op-failed-info { flex: 1; min-width: 0; }
.op-failed-name { font-size: 12.5px; font-weight: 500; color: var(--text); word-break: break-all; }
.op-failed-reason { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; word-break: break-word; }
.op-failed-reason-line { margin-bottom: 2px; }
.op-failed-plat-label { color: var(--error); font-weight: 600; }
.op-failed-actions { display: flex; gap: 4px; flex-shrink: 0; margin-top: 1px; }

.op-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.op-status-row:last-child { border-bottom: none; }
.op-status-label { color: var(--text-muted); }
.op-status-value { font-weight: 500; }

.op-status-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ── First-run onboarding banner ────────────────────────────────────────── */

.onboarding-banner {
  margin-bottom: 18px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(59,130,246,0.10) 0%, rgba(0, 198, 255,0.08) 100%);
  border: 1px solid rgba(99,160,255,0.28);
  padding: 20px 22px;
}
.onboarding-banner-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.onboarding-banner-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(59,130,246,0.14);
  border: 1px solid rgba(99,160,255,0.25);
  display: flex; align-items: center; justify-content: center;
  color: #60a5fa;
}
.onboarding-banner-body { flex: 1; min-width: 200px; }
.onboarding-banner-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.onboarding-banner-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.onboarding-banner-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-btn);
  background: rgba(59,130,246,0.18);
  border: 1px solid rgba(99,160,255,0.35);
  color: #93c5fd;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.onboarding-banner-cta:hover {
  background: rgba(59,130,246,0.30);
  border-color: rgba(99,160,255,0.60);
  color: #bfdbfe;
}

/* ── Dry Run banner ──────────────────────────────────────────────────────── */

.dry-run-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(93, 169, 255,0.10);
  border: 1px solid rgba(93, 169, 255,0.32);
  border-radius: var(--r);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--warning);
  letter-spacing: 0.01em;
}

/* Persistent warning when the scheduler is OFF but posts are queued — posts will not
   publish until the user turns it on. Clickable: turns the scheduler on in place. */
.scheduler-off-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(231,76,60,0.12);
  border: 1px solid rgba(231,76,60,0.40);
  border-radius: var(--r);
  padding: 11px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: #ff6b5e;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.scheduler-off-banner:hover { background: rgba(231,76,60,0.18); }
.scheduler-off-banner svg { flex: 0 0 auto; }

/* ── Activity Log Drawer ─────────────────────────────────────────────────── */

.activity-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,8,18,0.55);
  backdrop-filter: blur(2px);
  z-index: 95;
  display: flex;
  justify-content: flex-end;
}

.activity-drawer {
  width: 820px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  box-shadow: -12px 0 48px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.activity-drawer-header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.activity-drawer-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.activity-drawer-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
  max-width: 320px;
}

.activity-drawer-bar {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--surface-raised);
}

.log-filter-tabs { display: flex; gap: 3px; }

.log-filter-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11.5px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s, background 0.12s;
}
.log-filter-tab:hover { color: var(--text); background: var(--surface-high); }
.log-filter-tab.active { background: var(--accent-surface); color: #7AA3FF; border-color: rgba(59,108,255,0.22); }

.activity-drawer-actions { display: flex; align-items: center; gap: 6px; }

.log-autoscroll-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.log-panel.drawer-log {
  flex: 1;
  height: auto;
  min-height: 0;
  white-space: pre;
  overflow-x: auto;
}

.log-line.hidden { display: none; }

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

.conn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding: 0 0 8px;
  /* Every card is the SAME size: equal columns + equal rows (grid-auto-rows: 1fr makes
     all rows the tallest card's height) + stretch so each card fills its cell. Dead space
     is minimized by tight internal padding, not by letting cards shrink unevenly. */
  grid-auto-rows: 1fr;
  align-items: stretch;
}
@media (max-width: 720px) { .conn-grid { grid-template-columns: 1fr; } }

#page-connections.active {
  padding-bottom: 72px;
}

.conn-card {
  --conn-pad-x: 18px;
  background: var(--surface-1);
  border: 1px solid var(--border-blue);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  overflow: visible;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.conn-card-loading {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.conn-card-header {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  column-gap: 14px;
  align-items: center;
  padding: 16px var(--conn-pad-x);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.conn-card-header > .conn-platform-icon { grid-column: 1; }
.conn-card-header > div:not(.conn-platform-icon) { grid-column: 2; min-width: 0; }

.conn-platform-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-left: 0;
}
.conn-platform-icon.youtube,
.conn-platform-icon.instagram,
.conn-platform-icon.tiktok    { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.1); }

/* Real platform logo images inside connection cards */
.plat-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 11px;
  display: block;
  flex-shrink: 0;
}

/* Status badge - right column, aligned with conn-actions below */
.conn-card-header .conn-status-badge { grid-column: 3; margin-left: 0; justify-self: end; flex-shrink: 0; }

.conn-card-coming-soon .conn-platform-name { color: var(--text-muted); }
.conn-status-badge.coming-soon { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.1); }
.conn-status-badge.review-pending { background: var(--badge-pending-bg); color: var(--badge-pending-fg); border: 1px solid var(--badge-pending-bd); }
.conn-sandbox-banner {
  font-size: 12px;
  line-height: 1.5;
  color: #B8C6D8;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.conn-platform-name { font-size: 15px; font-weight: 700; color: var(--text); }
.conn-platform-sub  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Pinterest connection card key/value rows: light-blue label + clear gap to the value
   (was "BoardTRESSO" run together). conn-card-row/k/v are used only by the Pinterest card. */
.conn-card-row { margin-top: 5px; line-height: 1.5; }
.conn-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.conn-card-k   { color: #60A5FA; font-weight: 600; font-size: 12px; margin-right: 14px; }
.conn-card-v   { color: var(--text); word-break: break-word; }

/* ONE badge spec for every card + every state so Connected, Pending approval, Coming soon,
   Needs setup, etc. are identical in size and sit in the same visual lane - only the color
   changes per state. The transparent base border keeps the box height identical whether or
   not a state adds a colored border. */
.conn-status-badge {
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.conn-status-badge.connected {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.22);
  color: #93C5FD;
}
.conn-status-badge.needs-setup { background: var(--warning-surface); color: var(--warning); }
.conn-status-badge.warn        { background: var(--warning-surface); color: var(--warning); }
.conn-status-badge.expired          { background: rgba(93,169,255,.15);  color: #5DA9FF; }
.conn-status-badge.needs-reconnect  { background: rgba(93,169,255,.14);   color: #5DA9FF; }
.conn-status-badge.error            { background: var(--error-surface);   color: var(--error); }
.conn-status-badge.checking    { background: var(--accent-surface);  color: var(--accent); }

.conn-card-body {
  padding: 10px var(--conn-pad-x) 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.conn-coming-soon-text {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  opacity: 0.75;
}

.conn-info-rows { margin-bottom: 18px; }
.conn-info-row  { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.conn-info-row:last-child { border-bottom: none; }
.conn-info-label { color: var(--text-muted); min-width: 120px; flex-shrink: 0; }
.conn-info-value { color: var(--text); font-weight: 500; }
.conn-info-value.ok   { color: var(--success); }
.conn-info-value.warn { color: var(--warning); }
.conn-info-value.err  { color: var(--error); }

.conn-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  margin-left: 0;
  margin-top: auto;
  padding-top: 2px;
}

.conn-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.conn-step  { display: flex; gap: 12px; align-items: flex-start; }
.conn-step-num {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong);
  color: var(--text-muted); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.conn-step-num.done  { background: var(--success-surface); border-color: var(--success); color: var(--success); }
.conn-step-num.active { border-color: var(--accent); color: var(--accent); }
.conn-step-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.conn-step-desc  { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.conn-step-action { margin-top: 8px; }
.conn-step-detail { display: none; margin-top: 8px; padding: 10px 12px; background: var(--surface-high); border-radius: var(--r-sm); border: 1px solid var(--border); }
.conn-step-detail.open { display: block; }

.conn-notice {
  padding: 10px 14px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.5;
  margin-bottom: 14px;
}
.conn-notice.info    { background: var(--accent-surface);   color: #7BA7FF; border: 1px solid rgba(59,108,255,0.22); }
.conn-notice.success { background: var(--success-surface);  color: var(--success); border: 1px solid rgba(79,141,255,0.22); }
.conn-notice.warn    { background: var(--warning-surface);  color: var(--warning); border: 1px solid rgba(93, 169, 255,0.22); }
.conn-notice.error   { background: var(--accent-surface);   color: #7BA7FF;   border: 1px solid rgba(59,108,255,0.22); }

.conn-page-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.conn-page-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--surface-high); border: 1px solid var(--border);
}
.conn-page-name { font-size: 13px; font-weight: 600; color: var(--text); }
.conn-page-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.conn-replace-helper {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 8px;
}

.conn-replace-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

/* conn-grid uses auto-fill minmax - no manual breakpoint needed */

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

@media (max-width: 960px) {
  .stat-grid     { grid-template-columns: 1fr 1fr; }
  .diag-grid     { grid-template-columns: 1fr; }
  .form-row      { grid-template-columns: 1fr; }
}

/* ── Health Banner ───────────────────────────────────────────────────────── */

#health-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

#health-banner:empty { display: none; }

.health-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 38px 12px 14px;
  border-radius: var(--r);
  border: 1px solid;
  position: relative;
}

.health-alert.error {
  background: rgba(224, 96, 96, 0.09);
  border-color: rgba(224, 96, 96, 0.30);
}

.health-alert.warning {
  background: rgba(93, 169, 255, 0.09);
  border-color: rgba(93, 169, 255, 0.28);
}

.health-alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}

.health-alert.error   .health-alert-icon { background: rgba(224, 96, 96, 0.22); color: var(--error); }
.health-alert.warning .health-alert-icon { background: rgba(93, 169, 255, 0.22); color: var(--warning); }

.health-alert-body { flex: 1; min-width: 0; }

.health-alert-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.health-alert-message {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.health-alert-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.health-alert-dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 3px 5px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.health-alert-dismiss:hover {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.06);
}

/* ── Auto-start toggle ───────────────────────────────────────────────────── */

.auto-start-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 12px;
}

.auto-start-label {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.toggle-switch {
  position: relative;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
}

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

.toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-track::before {
  content: '';
  position: absolute;
  height: 12px;
  width: 12px;
  left: 3px;
  top: 3px;
  background: rgba(255,255,255,0.45);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.toggle-switch input:checked + .toggle-track { background: var(--accent); }

.toggle-switch input:checked + .toggle-track::before {
  transform: translateX(14px);
  background: #fff;
}

/* ── Video check result ──────────────────────────────────────────────────── */

.video-check-result {
  margin-top: 8px;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: 12px;
  line-height: 1.55;
  border: 1px solid transparent;
}

.video-check-result.ready {
  background: var(--success-surface);
  border-color: rgba(79, 141, 255, 0.25);
  color: var(--success);
}

.video-check-result.needs-conversion {
  background: var(--warning-surface);
  border-color: rgba(93, 169, 255, 0.25);
  color: var(--warning);
}

.video-check-result.cannot-post {
  background: var(--error-surface);
  border-color: rgba(224, 96, 96, 0.25);
  color: var(--error);
}

.video-check-result.checking {
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border-color: var(--border);
}

/* ── Dashboard quick actions ──────────────────────────────────────────────── */

.dash-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }

/* ── Bulk Schedule Modal ──────────────────────────────────────────────────── */

/* Wide enough for the Review table's 4 columns (File · Platforms · Scheduled · Remove)
   to show without the right side (date/Remove) being clipped; responsive so it never
   exceeds the window. .table-wrap keeps overflow-x:auto as a fallback for tiny screens. */
.bulk-modal { width: 820px; max-width: calc(100vw - 48px); }
/* Long filenames must not force the table wider than the modal (re-introducing the cut-off). */
.bulk-review-table td:first-child { max-width: 320px; }
.bulk-review-table .bulk-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bulk-steps-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* ── TikTok Direct Post review (pre-publish creator-control screen) ──────────── */
.ttdp-modal { max-width: 560px; width: 100%; }
.ttdp-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.ttdp-loading, .ttdp-msg { padding: 28px 8px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.ttdp-creator {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  border-radius: var(--r-sm); background: rgba(34,211,238,0.06); border: 1px solid rgba(34,211,238,0.20);
}
.ttdp-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: rgba(255,255,255,0.06); }
.ttdp-avatar--blank { display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #7FD3E6; }
.ttdp-creator-name { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.ttdp-creator-handle { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.ttdp-sandbox-note {
  font-size: 12px; color: #7FD3E6; background: rgba(34,211,238,0.08);
  border: 1px solid rgba(34,211,238,0.22); border-radius: var(--r-sm);
  padding: 8px 12px; margin-bottom: 14px;
}
.ttdp-section { margin-bottom: 16px; }
.ttdp-label { display: block; font-size: 12px; font-weight: 700; color: #9EC5FF; margin-bottom: 6px; letter-spacing: 0.01em; }
.ttdp-video { display: flex; align-items: center; gap: 13px; }
/* Shared auto first-frame video preview (composer + TikTok review). Temporary
   visual confirmation only - not a stored thumbnail. */
.vthumb {
  position: relative; flex: 0 0 auto;
  border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  display: grid; place-items: center;
}
/* Use opacity (not display:none) so lazy-loaded list thumbnails actually fetch - a
   display:none image is never loaded by the browser, leaving the placeholder forever. */
.vthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
.vthumb.is-loaded img { opacity: 1; }
.vthumb.is-error img { display: none; }
.vthumb-fallback { font-size: 10.5px; color: var(--text-muted); text-align: center; padding: 0 6px; }
/* "File removed" tile: the source video is gone, so no thumbnail is possible. */
.vthumb--missing { border-color: rgba(230,184,115,0.30); }
.vthumb--missing .vthumb-fallback { color: #5DA9FF; }
.vthumb.is-loaded .vthumb-fallback { display: none; }
.vthumb--ttdp { width: 84px; height: 112px; }
.vthumb--composer { width: 92px; height: 123px; }
/* Compact list thumbnail for Queue + History rows. */
.vthumb--list { width: 40px; height: 54px; border-radius: 7px; flex: 0 0 auto; }
.vthumb--list .vthumb-fallback { font-size: 8.5px; padding: 0 2px; }

/* Queue row: thumbnail beside the title block. */
.qi-col--video { display: flex; align-items: center; gap: 11px; min-width: 0; }
.qi-video-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* History row: thumbnail beside the post name. */
.hist-video-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hist-video-row .history-video-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-video-row .history-video-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
/* Archive: the caption actually published, previewed under the file name (truncated). */
.history-video-caption { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-muted); }
/* Archive ownership banner — local-first "your content stays yours". Blue-tinted glass, no card grid. */
/* Archive tools — compact utility card (title + one-line copy + 3 actions on the right). */
.archive-tools-card {
  margin: 0 32px 18px;
  padding: 8px 24px;
  border: 1px solid rgba(91, 139, 210, 0.24);
  border-radius: 14px;
  background: rgba(16, 39, 74, 0.72);
}
.archive-tools-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.archive-tools-copy h2 {
  margin: 0 0 1px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  color: #63A5FF;
}
.archive-tools-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  color: #AFC0D4;
}
.archive-tools-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .archive-tools-card { margin: 18px; padding: 10px 14px; }
  .archive-tools-header { flex-direction: column; align-items: stretch; gap: 16px; }
  .archive-tools-actions { display: grid; grid-template-columns: 1fr; }
}

/* Pinterest Smart Details — composer panel, Pinterest-only. Blue-tinted
   glass to match the design system (no green/purple/gold). */
.pin-smart { border: 1px solid rgba(96,165,250,0.18); background: rgba(96,165,250,0.05); border-radius: 12px; padding: 14px 16px; }
.pin-smart-help { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin: 6px 0 10px; }
.pin-smart-gen { margin-bottom: 12px; }
.pin-smart-fields { display: flex; flex-direction: column; gap: 10px; }
.pin-smart-field { display: flex; flex-direction: column; gap: 4px; }
/* Pin preview */
.pin-preview { margin-top: 14px; }
.pin-preview-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.pin-preview-card { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(5,16,31,0.55); border: 1px solid rgba(96,165,250,0.18); }
.pin-preview-thumb { flex: 0 0 64px; width: 64px; height: 90px; border-radius: 9px; background: rgba(96,165,250,0.10); border: 1px solid rgba(96,165,250,0.14); overflow: hidden; }
.pin-preview-thumb img, .pin-preview-thumb video { width: 100%; height: 100%; object-fit: cover; }
.pin-preview-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pin-preview-name { font-size: 14px; font-weight: 700; color: var(--text-primary, #F5F8FF); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pin-preview-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.pin-preview-meta { margin-top: auto; font-size: 11.5px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 2px; }
.pin-preview-meta a { color: #60A5FA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Blocking validation */
.pin-validation { margin-top: 12px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #FCA5A5; background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.32); }
.pin-smart-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.pin-smart-req { font-size: 10px; font-weight: 700; color: #F9A56B; text-transform: uppercase; letter-spacing: .04em; }
.pin-board-refresh { margin-left: auto; font-size: 11px; font-weight: 600; color: #60A5FA; background: none; border: none; cursor: pointer; padding: 0; }
.pin-board-refresh:hover { color: #93C5FD; text-decoration: underline; }
.pin-field-error { margin-top: 5px; font-size: 11.5px; font-weight: 600; color: #FCA5A5; }
.pin-smart-opt { font-weight: 500; color: var(--text-muted); }
.pin-smart .pin-smart-board-manual { margin-top: 6px; }
.ttdp-video-meta { min-width: 0; }

/* Composer auto-preview row */
.composer-video-preview { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; }
.composer-preview-cap { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.ttdp-file { font-size: 13.5px; font-weight: 600; color: var(--text-primary); word-break: break-word; }
.ttdp-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; }
.ttdp-toggles { display: flex; flex-direction: column; gap: 8px; }
.ttdp-toggle { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.ttdp-toggle input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); flex: 0 0 auto; }
.ttdp-toggle--master { font-weight: 600; color: var(--text-primary); }
.ttdp-toggle--off { color: var(--text-muted); cursor: not-allowed; }
.ttdp-toggle--off input { cursor: not-allowed; }
.ttdp-toggle-note { font-size: 11px; color: var(--text-muted); font-style: italic; }
.ttdp-disclose-opts {
  margin-top: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.ttdp-disclose-msg { font-size: 11.5px; color: var(--platform-youtube); }
/* "Branded content visibility cannot be set to private." help text (TikTok rule) - calm, not error red. */
.ttdp-branded-help { font-size: 11.5px; color: #AEC2DC; margin-top: 4px; font-style: italic; line-height: 1.4; }
/* TikTok content-label note (Promotional content / Paid partnership) shown for the chosen disclosure. */
.ttdp-content-label { font-size: 11.5px; color: #9DB8FF; margin-top: 6px; line-height: 1.4; }
/* TRESSO-styled confirm dialog (replaces native confirm()). */
.tconfirm-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 14, 28, 0.66); backdrop-filter: blur(3px);
  animation: tconfirm-fade .12s ease;
}
@keyframes tconfirm-fade { from { opacity: 0; } to { opacity: 1; } }
.tconfirm {
  width: 400px; max-width: calc(100vw - 40px);
  background: var(--surface-raised, #101A2E);
  border: 1px solid var(--border-strong, rgba(140,170,220,0.24));
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: tconfirm-pop .14s ease;
}
@keyframes tconfirm-pop { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.tconfirm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 0;
}
.tconfirm-title { font-size: 16px; font-weight: 700; color: var(--text, #CBD9EB); }
.tconfirm-x {
  background: transparent; border: none; color: var(--text-muted, #A4B6CB);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 7px;
}
.tconfirm-x:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.tconfirm-body {
  padding: 10px 18px 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary, #C0CFE2);
}
.tconfirm-actions {
  display: flex; justify-content: flex-end; gap: 10px; padding: 18px;
}
.tconfirm-ok--danger {
  background: rgba(96,165,250,0.16); border: 1px solid rgba(96,165,250,0.5); color: #74B4FF;
}
.tconfirm-ok--danger:hover { background: rgba(96,165,250,0.26); border-color: rgba(96,165,250,0.7); }
/* Calm auto-fix note (not an error) shown when the branded/private rule corrects itself. */
.ttdp-autofix {
  margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: #5DA9FF;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: rgba(230,184,115,0.10); border: 1px solid rgba(230,184,115,0.28);
}
.ttdp-consent {
  font-size: 11.5px; color: var(--text-secondary); line-height: 1.5;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.03); border: 1px solid var(--border); margin-bottom: 12px;
}
.ttdp-consent a { color: #9EC5FF; }
.ttdp-error { font-size: 12px; color: var(--platform-youtube); margin-bottom: 10px; font-weight: 600; }
.ttdp-footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 4px; }
.ttdp-footer .btn-primary { min-width: 150px; }
.ttdp-footer--wrap { flex-wrap: wrap; justify-content: flex-end; }
.ttdp-footer--wrap .btn { flex: 0 0 auto; }

/* Compact, no-scroll layout for the TikTok review modal (app-ready + clean for the demo).
   Tightens spacing, shrinks the preview, and lays the interaction toggles in a row so the
   whole creator-control screen fits in one view without scrolling on a normal display. */
.ttdp-modal { max-height: 94vh; max-width: 720px; }
/* Two-column body so the whole review fits on one screen (no scrolling): the creator
   header + consent + footer span full width; the fields flow into two balanced columns. */
.ttdp-modal .modal-body { padding: 14px 24px 16px; columns: 2; column-gap: 26px; }
.ttdp-modal .modal-body > * { break-inside: avoid; }
.ttdp-modal .ttdp-creator { padding: 9px 12px; margin-bottom: 9px; column-span: all; }
.ttdp-modal .ttdp-sandbox-note { padding: 6px 11px; margin-bottom: 9px; column-span: all; }
.ttdp-modal .ttdp-section { margin-bottom: 10px; }
.ttdp-modal .vthumb--ttdp { width: 56px; height: 75px; }
.ttdp-modal .ttdp-toggles { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.ttdp-modal .ttdp-hint { margin-top: 3px; }
.ttdp-modal .ttdp-consent, .ttdp-modal .ttdp-error, .ttdp-modal .ttdp-footer { column-span: all; }
.ttdp-modal .ttdp-disclose-opts { margin-top: 7px; padding: 8px 11px; gap: 6px; }
.ttdp-modal .ttdp-consent { padding: 8px 11px; margin-bottom: 8px; }
.ttdp-modal .ttdp-footer { padding-top: 2px; }
.ttdp-modal textarea#ttdp-caption { min-height: 52px; }

/* TikTok consent now lives ONLY in the audited review modal. The old inline composer panel is
   retired so there's exactly one place to set audience/interactions/branded - no duplicate
   prompts (TikTok's review explicitly flags duplicated branded-content prompts). */
#tiktok-post-settings { display: none !important; }

.bulk-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 11px 4px 5px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
}
.bulk-step-num,
.bulk-step-check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}

.bulk-step-pill.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(59,108,255,0.35);
}
.bulk-step-pill.active .bulk-step-num {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.bulk-step-pill.done {
  color: var(--success);
  background: var(--success-surface);
  border-color: rgba(79,141,255,0.26);
}
.bulk-step-pill.done .bulk-step-check {
  background: var(--success);
  color: #fff;
}

/* ── Bulk Schedule Step 1 - premium upload. Inner panels are LIGHTER than the
   modal navy so nothing reads as a dark disabled box. No green/orange. ─────── */
.modal.bulk-modal {
  background:
    radial-gradient(circle at top center, rgba(96,165,250,0.12), transparent 38%),
    linear-gradient(180deg, rgba(15,35,66,0.98), rgba(8,24,48,0.98));
  border: 1px solid rgba(96,165,250,0.24);
  box-shadow: 0 28px 90px rgba(0,0,0,0.42);
}

/* The modal body already has 22px 26px padding; the panel/footer add the rest. */
.bulk-step-panel { padding: 6px 14px 2px; }

.bulk-upload-dropzone {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border: 1.5px dashed rgba(96,165,250,0.36);
  border-radius: 24px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  background: rgba(15,35,66,0.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 18px 46px rgba(0,0,0,0.18);
}
/* Calm, intentional lift - not a neon flash. */
.bulk-upload-dropzone:hover {
  border-color: rgba(96,165,250,0.45);
  background: rgba(15,35,66,0.82);
  box-shadow: 0 0 0 1px rgba(96,165,250,0.12), 0 18px 42px rgba(37,99,235,0.16);
  transform: translateY(-1px);
}
/* Drag-over: stronger than hover, still controlled. */
.bulk-upload-dropzone.is-dragover {
  border-color: rgba(96,165,250,0.70);
  background: rgba(37,99,235,0.12);
  box-shadow: 0 0 0 1px rgba(96,165,250,0.18), 0 20px 50px rgba(37,99,235,0.22);
  transform: none;
}
.bulk-upload-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  color: #fff; font-size: 1.7rem; font-weight: 900; line-height: 1;
  box-shadow: 0 12px 30px rgba(96,165,250,0.28);
}
.bulk-upload-copy { min-width: 0; }
.bulk-upload-copy h3 { margin: 0 0 5px; color: #f8fbff; font-size: 1.1rem; line-height: 1.2; font-weight: 800; }
.bulk-upload-copy p  { margin: 0; color: rgba(226,234,248,0.82); font-size: 0.9rem; line-height: 1.45; }
.bulk-upload-copy span { display: block; margin-top: 5px; color: rgba(147,197,253,0.86); font-size: 0.78rem; font-weight: 700; }
.bulk-upload-button {
  border: 0; border-radius: 999px; padding: 12px 18px;
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  color: #fff; font-family: inherit; font-weight: 800; font-size: 0.9rem;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 14px 32px rgba(96,165,250,0.24);
  transition: filter .15s, box-shadow .15s;
}
.bulk-upload-button:hover { filter: brightness(0.93); box-shadow: 0 12px 28px rgba(96,165,250,0.20); }

.bulk-upload-meta {
  display: flex; gap: 10px; margin: 16px 0 12px;
  color: rgba(203,213,225,0.82); font-size: 0.85rem; font-weight: 700;
}
.bulk-upload-meta span {
  padding: 7px 11px; border: 1px solid rgba(96,165,250,0.14);
  border-radius: 999px; background: rgba(15,35,66,0.56);
}
.bulk-upload-meta strong { color: #fff; }

.bulk-file-list {
  display: grid; gap: 10px; max-height: 300px; overflow: auto;
  padding-right: 5px; margin-bottom: 6px;
}
.bulk-file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 15px; border: 1px solid rgba(96,165,250,0.16); border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,43,80,0.9), rgba(14,32,61,0.94));
  box-shadow: 0 12px 30px rgba(0,0,0,0.16);
}
.bulk-file-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
.bulk-file-icon {
  width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 13px; background: rgba(96,165,250,0.14); color: #93c5fd;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
}
.bulk-file-thumb {
  width: 40px; height: 54px; flex: 0 0 auto; border-radius: 8px; overflow: hidden;
  background: var(--surface-0); border: 1px solid rgba(255,255,255,0.08);
}
.bulk-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bulk-file-thumb .vthumb-fallback { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; color: #93c5fd; }
.bulk-file-thumb--pending { display: grid; place-items: center; }
.bulk-file-details { min-width: 0; }
.bulk-file-name {
  color: rgba(248,251,255,0.94); font-size: 0.92rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bulk-file-subline { margin-top: 3px; color: rgba(203,213,225,0.7); font-size: 0.8rem; font-weight: 600; }
.bulk-file-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.bulk-file-status { border-radius: 999px; padding: 6px 11px; font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
/* Pending action (still uploading) - pulse so it reads as actively in progress. */
.bulk-file-status--uploading { border: 1px solid rgba(96,165,250,0.22); background: rgba(37,99,235,0.18); color: #93c5fd; animation: pendingPulse 1.3s ease-in-out infinite; }
@keyframes pendingPulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 0 0 rgba(96,165,250,0); }
  50%      { opacity: 0.62; box-shadow: 0 0 0 3px rgba(96,165,250,0.16); }
}
@media (prefers-reduced-motion: reduce) { .bulk-file-status--uploading { animation: none; } }
.bulk-file-status--ready     { border: 1px solid rgba(34,197,94,0.32); background: rgba(34,197,94,0.15); color: #86EFAC; }
.bulk-file-row--failed {
  border-color: rgba(248,113,113,0.34);
  background: linear-gradient(180deg, rgba(76,29,47,0.54), rgba(31,24,48,0.92));
}
.bulk-file-row--failed .bulk-file-icon { background: rgba(248,113,113,0.14); color: #fecaca; }
.bulk-file-status--failed { border: 1px solid rgba(248,113,113,0.28); background: rgba(248,113,113,0.13); color: #fecaca; }
.bulk-file-remove {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent;
  color: rgba(203,213,225,0.7); font-size: 1.35rem; line-height: 1; cursor: pointer;
  font-family: inherit; transition: background .15s, color .15s;
}
.bulk-file-remove:hover { background: rgba(255,255,255,0.08); color: #fff; }

.bulk-modal-footer {
  display: flex; justify-content: flex-end; gap: 12px;
  margin: 18px -26px -26px;            /* break out of .modal-body padding for a full-width border */
  padding: 18px 40px 26px;
  border-top: 1px solid rgba(96,165,250,0.14);
}
.bulk-secondary-btn, .bulk-primary-btn {
  border: 0; border-radius: 999px; padding: 12px 20px;
  font-family: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer;
  transition: opacity .15s;
}
.bulk-secondary-btn { background: rgba(15,35,66,0.82); color: rgba(226,234,248,0.86); border: 1px solid rgba(96,165,250,0.16); }
.bulk-secondary-btn:hover { color: #fff; }
.bulk-primary-btn { background: linear-gradient(135deg, #0072ff, #00c6ff); color: #fff; box-shadow: 0 14px 34px rgba(96,165,250,0.24); }
.bulk-primary-btn:hover:not(:disabled) { opacity: 0.92; }
.bulk-primary-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

@media (max-width: 760px) {
  .bulk-step-panel { padding: 2px 0; }
  .bulk-upload-dropzone { grid-template-columns: 1fr; text-align: center; }
  .bulk-upload-icon { margin: 0 auto; }
  .bulk-upload-button { width: 100%; }
  .bulk-file-row { align-items: flex-start; }
  .bulk-file-actions { flex-direction: column; align-items: flex-end; }
  .bulk-modal-footer { margin: 14px -16px -16px; padding: 14px 18px 18px; }
}

.bulk-day-picker { display: flex; gap: 6px; flex-wrap: wrap; }

.bulk-day-btn {
  width: 48px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-high);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.bulk-day-btn:hover { border-color: rgba(59,108,255,0.40); color: var(--text); }
.bulk-day-btn.active {
  background: var(--accent-surface);
  border-color: rgba(59,108,255,0.50);
  color: var(--accent);
}

/* Bulk Schedule: method toggle (Posting Preset / Custom Schedule) */
.bulk-startdate-warn { margin-top: 6px; font-size: 12px; line-height: 1.4; color: #8FBEFF; background: rgba(59,130,246,0.10); border: 1px solid rgba(96,165,250,0.28); border-radius: 8px; padding: 7px 10px; }
.bulk-startdate-warn strong { color: #CFE1FF; font-weight: 700; }
.bulk-method-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
}
/* Posting Rhythm (bulk even-spacing) */
.bulk-rhythm-intro { font-size: 13px; line-height: 1.5; color: var(--text-muted, #9aa); margin-bottom: 14px; }
.bulk-rhythm-spacing { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.bulk-rhythm-spacing .bulk-rhythm-amount { width: 92px; flex: 0 0 auto; }
.bulk-rhythm-spacing .bulk-rhythm-unit { flex: 1; }
.bulk-method-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  box-sizing: border-box;
  padding: 11px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.bulk-method-btn:hover { color: var(--text); }
.bulk-method-btn.is-active {
  background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
  color: #F5F5F3;
  box-shadow: 0 4px 14px rgba(79,141,255,0.30);
}

/* Bulk Schedule: preset slot summary */
.bulk-slot-summary {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.bulk-slot-summary-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}
.bulk-slot-summary-list { display: flex; flex-wrap: wrap; gap: 7px; }
.bulk-slot-day {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(59,108,255,0.10);
  border: 1px solid rgba(96,165,250,0.22);
}
.bulk-slot-day strong { color: var(--text); font-weight: 700; margin-right: 3px; }

.bulk-summary-notice {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 12px;
}
.bulk-summary-notice.ok   { background: rgba(96,165,250,0.07); color: #C6DAF5; border: 1px solid rgba(96,165,250,0.18); }
.bulk-summary-notice.warn { background: var(--warning-surface); color: var(--warning); border: 1px solid rgba(93, 169, 255,0.25); }
.bulk-summary-notice.bulk-pace-note { background: rgba(96,165,250,0.09); color: #C6DAF5; border: 1px solid rgba(96,165,250,0.22); border-left: 3px solid #60A5FA; }
.bulk-summary-title { font-size: 13.5px; font-weight: 700; color: #DCE9FB; }
.bulk-summary-sub   { font-size: 11.5px; font-weight: 500; opacity: 0.68; margin-top: 3px; }

/* Bulk confirm partial-failure panel: which files did not schedule, and why. */
.bulk-err-panel { border: 1px solid rgba(239,68,68,0.30); background: rgba(239,68,68,0.06); border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 16px; }
.bulk-err-title { font-size: 13.5px; font-weight: 700; color: #FCA5A5; }
.bulk-err-sub   { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
.bulk-err-list  { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.bulk-err-row   { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 7px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; }
.bulk-err-name  { color: #E4ECF7; font-weight: 600; word-break: break-word; }
.bulk-err-reason { color: #FCA5A5; text-align: right; flex-shrink: 0; max-width: 55%; }
.bulk-err-actions { display: flex; gap: 10px; margin-top: 14px; }

/* "Some slots were already booked" explainer + opt-in stacking toggle */
.bulk-skip-note {
  padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--r-sm);
  background: rgba(96,165,250,0.055);
  border: 1px solid rgba(96,165,250,0.16);
}
.bulk-skip-note--on { background: rgba(93, 169, 255,0.07); border-color: rgba(93, 169, 255,0.22); }
.bulk-skip-note-title { font-size: 12.5px; font-weight: 700; color: #DCE9FB; }
.bulk-skip-note-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.bulk-skip-slots { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.bulk-skip-toggle-row { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.bulk-skip-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.bulk-skip-toggle input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }

.bulk-row-skip td { opacity: 0.55; }

/* Branded, platform-coloured chips (Bulk Review + Confirm) */
.bulk-plat-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin: 1px 4px 1px 0;
  white-space: nowrap;
  border: 1px solid transparent;
}
.bulk-plat-chip--instagram { color: var(--platform-instagram); background: var(--platform-instagram-bg); border-color: var(--platform-instagram-border); }
.bulk-plat-chip--youtube   { color: var(--platform-youtube); background: var(--platform-youtube-bg);  border-color: var(--platform-youtube-border); }
.bulk-plat-chip--tiktok    { color: var(--platform-tiktok); background: rgba(34,211,238,0.12); border-color: rgba(34,211,238,0.32); }
.bulk-plat-chip--facebook  { color: var(--platform-facebook); background: var(--platform-facebook-bg); border-color: var(--platform-facebook-border); }
.bulk-plat-chip--threads   { color: #BCC8DA; background: rgba(188,200,218,0.14); border-color: rgba(188,200,218,0.34); }

/* Bulk Schedule "Set Schedule" row: YouTube Privacy is a narrow dropdown, so give it just
   the width it needs on the left and shift the Platforms block into the open space on the
   right (instead of crowding it against the dropdown with empty space far-right). */
.bulk-sched-row {
  grid-template-columns: minmax(160px, 240px) 1fr;
  align-items: start;
}
.bulk-sched-row > .form-group:last-child {
  justify-self: end;
  width: 100%;
  max-width: 480px;
  padding-left: 18px;
}
@media (max-width: 960px) {
  .bulk-sched-row { grid-template-columns: 1fr; }
  .bulk-sched-row > .form-group:last-child {
    justify-self: stretch; max-width: none; padding-left: 0;
  }
}

/* Bulk Review table contrast pass (premium, crisp - no text-shadow/blur). */
.bulk-review-table th {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #9EADC3;
}
.bulk-review-table td { padding-top: 11px; padding-bottom: 11px; border-bottom-color: rgba(120,150,190,0.10); }
.bulk-review-table .bulk-file-name { color: #F2F6FF; font-weight: 700; }
.bulk-review-table .bulk-sched-cell { color: #B9C6DA; }

/* Bulk Review table polish */
.bulk-file-meta { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
.bulk-file-meta--edited { color: #8FC0FF; font-weight: 600; }
/* Row actions: Edit details + Remove, stacked so touch targets stay tappable on mobile */
.bulk-row-action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.bulk-row-detailsbtn {
  background: rgba(96,165,250,0.08); color: #BFD6F5; border: 1px solid rgba(96,165,250,0.22);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .12s, border-color .12s;
}
.bulk-row-detailsbtn:hover { background: rgba(96,165,250,0.15); border-color: rgba(96,165,250,0.4); }
.bulk-row-detailsbtn.is-open { background: rgba(96,165,250,0.18); border-color: #60A5FA; color: #EAF2FF; }
.bulk-row-detailsbtn.has-override::after { content: "•"; margin-left: 5px; color: #8FC0FF; font-weight: 800; }
/* Edit-details expander panel (full-width row under the video) */
.bulk-details-row > td { padding: 0 !important; border-bottom-color: rgba(120,150,190,0.10); }
.bulk-details-panel {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; margin: 0 0 4px; background: rgba(96,165,250,0.045);
  border: 1px solid rgba(96,165,250,0.16); border-radius: 10px;
}
.bulk-details-field { display: flex; flex-direction: column; gap: 5px; }
.bulk-details-label { font-size: 12px; font-weight: 700; color: #DCE9FB; }
.bulk-details-hint { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.bulk-details-textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 44px;
  background: var(--surface-0); color: #EAF2FF; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; line-height: 1.4;
}
.bulk-details-textarea:focus { outline: none; border-color: #60A5FA; box-shadow: 0 0 0 2px rgba(96,165,250,0.18); }
.bulk-details-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bulk-details-note { font-size: 11.5px; color: var(--text-muted); }
.bulk-details-clear {
  background: none; border: none; color: #F87171; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; padding: 4px 2px;
}
.bulk-details-clear:hover { text-decoration: underline; }
.bulk-details-done {
  background: rgba(96,165,250,0.14); color: #EAF2FF; border: 1px solid rgba(96,165,250,0.32);
  border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.bulk-details-done:hover { background: rgba(96,165,250,0.22); }
/* Inline per-item time editor in the Review step */
.bulk-time-input {
  background: rgba(96,165,250,0.07); color: #DCE9FB;
  border: 1px solid rgba(96,165,250,0.22); border-radius: 8px;
  padding: 5px 8px; font-size: 12px; font-family: inherit; color-scheme: dark; max-width: 210px;
}
.bulk-time-input:hover  { border-color: rgba(96,165,250,0.40); }
.bulk-time-input:focus  { outline: none; border-color: #60A5FA; box-shadow: 0 0 0 2px rgba(96,165,250,0.18); }
.bulk-time-edit { margin-top: 6px; }
/* Per-item platform toggles in the Review step */
.bulk-plat-toggles { display: flex; flex-wrap: wrap; gap: 5px; }
.bulk-plat-toggle {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: 8px;
  background: rgba(255,255,255,0.03); color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08); opacity: 0.55; transition: opacity .12s, border-color .12s, background .12s;
}
.bulk-plat-toggle img { opacity: 0.5; filter: grayscale(1); transition: opacity .12s, filter .12s; }
.bulk-plat-toggle:hover { opacity: 0.8; border-color: rgba(96,165,250,0.3); }
.bulk-plat-toggle.is-on {
  background: rgba(96,165,250,0.12); color: #DCE9FB;
  border-color: rgba(96,165,250,0.35); opacity: 1;
}
.bulk-plat-toggle.is-on img { opacity: 1; filter: none; }
.bulk-row-action { width: 86px; text-align: right; white-space: nowrap; }
.bulk-review-remove {
  border: 0; background: transparent; cursor: pointer;
  color: #7F8DA5; font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 6px; transition: color .15s, background .15s;
}
.bulk-review-table tr:hover .bulk-review-remove { color: #9AA8BE; }
.bulk-review-remove:hover { color: var(--platform-youtube); background: rgba(248,113,113,0.10); }

/* Bulk Confirm readiness banner */
.bulk-ready-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; margin-bottom: 14px;
  border-radius: var(--r-sm);
  background: var(--success-surface);
  border: 1px solid rgba(79,141,255,0.28);
}
.bulk-ready-check {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--success); color: #fff; font-size: 14px; font-weight: 800;
}
.bulk-ready-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.bulk-ready-sub   { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }

/* Bulk Confirm per-video schedule list. Two-class selector so it wins over the
   base .bulk-confirm-row (which is defined later in the file). */
.bulk-confirm-row.bulk-confirm-row--block { flex-direction: column; align-items: stretch; gap: 8px; }
.bulk-assign-list { display: flex; flex-direction: column; gap: 6px; }
.bulk-assign-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 7px 11px; border-radius: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
}
.bulk-assign-file { font-size: 12.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-assign-when { font-size: 12.5px; font-weight: 600; color: #9EC5FF; white-space: nowrap; flex: 0 0 auto; }

.bulk-confirm-card {
  background: var(--surface-high);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 4px 0;
  margin-bottom: 16px;
}

.bulk-confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.bulk-confirm-row:last-child { border-bottom: none; }
.bulk-confirm-label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.bulk-confirm-value { font-size: 12.5px; color: var(--text); font-weight: 600; text-align: right; }

.bulk-progress-bar {
  background: var(--surface-high);
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.bulk-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  width: 0%;
  transition: width 0.25s ease;
}

.bulk-progress-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  text-align: center;
}

.bulk-nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.bulk-nav .btn:last-child { min-width: 180px; }

/* ── Queue Management ─────────────────────────────────────────────────────── */

.queue-reorder-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: rgba(59,108,255,0.07);
  border: 1px solid rgba(59,108,255,0.28);
  border-radius: var(--r);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.queue-reorder-label {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 160px;
}

.queue-reorder-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Tight, square table rows matching the Dashboard preview tables - no per-row
   gap, rounding, or card border; thin dividers between rows instead. */
.queue-list { display: flex; flex-direction: column; gap: 0; }

.queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(140, 170, 220, 0.14);
  border-radius: 0;
  transition: background 0.12s;
  user-select: none;
}
.queue-list .queue-item:last-child { border-bottom: none; }

.queue-item:hover { background: rgba(120, 150, 210, 0.06); }

.queue-item.dragging { opacity: 0.45; }

.queue-item.drag-over {
  border-color: rgba(59,108,255,0.55);
  background: rgba(59,108,255,0.05);
  box-shadow: 0 0 0 2px rgba(59,108,255,0.15);
}

.queue-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.7;
  padding: 2px 3px;
  transition: opacity 0.12s;
}

.queue-item:hover .queue-drag-handle { opacity: 0.75; }
.queue-drag-handle:active { cursor: grabbing; }

.queue-item-pos {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  width: 18px;
  text-align: right;
  flex-shrink: 0;
}

.queue-item-file {
  flex: 1;
  min-width: 0;
}

.queue-item-filename {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-item-sub { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.queue-sub-sep { color: var(--text-muted); }
.queue-sub-ready { color: #74B4FF; font-weight: 600; }
.queue-sub-posted { color: #74B4FF; font-weight: 600; }
.queue-sub-failed { color: var(--error); font-weight: 600; }
.queue-sub-attention { color: var(--warning); font-weight: 600; }
.queue-sub-paused { color: var(--text-muted); font-weight: 600; }
.queue-sub-hset {
  color: #B8CFEA;
  font-weight: 600;
  background: rgba(15, 35, 66, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  letter-spacing: 0.01em;
}

/* ── Queue view toggle & calendar ───────────────────────────────────────── */
.queue-count-label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.queue-view-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  /* No container shell - controls sit directly under the status row. */
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  margin: 8px 0 10px;
  min-width: 0;
  max-width: 100%;
}

.queue-add-btn { margin-left: auto; flex-shrink: 0; }

.queue-view-toggle {
  display: inline-flex;
  padding: 3px;
  background: rgba(10, 22, 44, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r);
  gap: 2px;
}

.queue-view-btn {
  padding: 7px 18px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  text-align: center;
  color: #8499B8;
  background: transparent;
  border: none;
  border-radius: calc(var(--r-sm) - 1px);
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}

.queue-view-btn:hover { color: #B8CBE6; }

.queue-view-btn.active {
  background: rgba(59, 108, 255, 0.30);
  color: #EAF2FF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.25);
}

.queue-select-cb {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.queue-item-selected,
.queue-item.qi-selected,
.queue-row.selected {
  background: var(--surface-raised) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
  box-shadow: inset 2px 0 0 rgba(96, 165, 250, 0.9);
}

.queue-select-header {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.queue-select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.queue-select-all-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.queue-select-all-text {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
}

.queue-select-count-inline {
  font-size: 12px;
  color: var(--text-muted);
}

/* Shared modal shell */
.shuffle-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,8,18,0.78);
  backdrop-filter: blur(4px);
  z-index: 110;
  align-items: center;
  justify-content: center;
}

.shuffle-overlay.open { display: flex; }

.shuffle-modal {
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
  position: relative;
}

.shuffle-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,108,255,0.60) 40%, rgba(107,142,255,0.75) 50%, rgba(59,108,255,0.60) 60%, transparent);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  pointer-events: none;
}

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

.shuffle-title { font-size: 15px; font-weight: 700; color: var(--text); }
/* Reschedule Failed Posts modal title in light blue (#60A5FA) to match other modal titles. */
.rsf-modal .shuffle-title { color: #60A5FA; }

.shuffle-body {
  padding: 14px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Style label in Upcoming Queue */
.op-queue-style {
  display: inline-block;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--accent-surface);
  color: #7AABFF;
  border: 1px solid rgba(59,108,255,0.22);
  vertical-align: middle;
}

.badge-error { background: var(--error-surface); color: var(--error); }

/* ── Post-Now / Re-send platform picker overlay ─────────────────────────── */

#post-now-overlay,
#posting-status-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Live posting status panel - the message line with spinner/check/x icon. */
.pstat-msg { display: flex; align-items: center; gap: 9px; justify-content: center; }
.pstat-spin { animation: spin 0.9s linear infinite; flex-shrink: 0; }

.pnow-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4,8,18,0.72);
  backdrop-filter: blur(3px);
}

.pnow-dialog {
  position: relative;
  background: var(--surface-raised);
  border-radius: var(--r-xl);
  border: 1px solid rgba(118,134,158,0.18);
  padding: 28px 28px 22px;
  width: 360px;
  box-shadow: 0 20px 56px rgba(0,0,0,0.55);
}

.pnow-title    { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 5px; letter-spacing: -0.01em; }
.pnow-filename { font-size: 12px; color: var(--text-muted); margin-bottom: 18px; word-break: break-all; }

/* Reconnect modal body message */
.pnow-message {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 22px;
}

/* Single-platform retry row (no checkbox) */
.pnow-platform-row {
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}
.pnow-platform-row--failed {
  background: rgba(224,96,96,.05);
  border-color: rgba(224,96,96,.22);
}
.pnow-platform-name  { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.pnow-platform-issue { font-size: 12px; color: var(--text-muted); }
.pnow-platform-row--failed .pnow-platform-issue { color: #f08080; }
.pnow-platform-fix   { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; font-style: italic; }
.pnow-helper { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
/* Repost clarity note: reposting = a new post, views start fresh (not a continuation). */
.pnow-note {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  margin: 4px 0 18px; padding: 10px 12px;
  background: rgba(96,165,250,0.06); border: 1px solid rgba(96,165,250,0.16); border-radius: 8px;
}
.pnow-note strong { color: var(--text-secondary); font-weight: 700; }

/* Multi-platform retry rows (with checkboxes) */
.pnow-platforms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.pnow-platform-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.pnow-platform-label:hover { background: rgba(255,255,255,.05); }


/* ── Queue bulk edit overlay (shared schedule-modal shell) ───────────────── */
#queue-bulk-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: rgba(3, 10, 22, 0.72);
  backdrop-filter: blur(4px);
}

#queue-bulk-edit-overlay .schedule-modal {
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.bulk-sched-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  /* Breathing room between the toggle label (Date / Time / Stagger posts) and its
     input below — they were touching. */
  margin: 0 0 8px;
}

.bulk-sched-toggle input { flex-shrink: 0; }

.bulk-sched-field:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bulk-plat-rows {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

#queue-bulk-edit-overlay .bulk-plat-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Segmented control (Replace / Add / Clear) - one clean pill group, not loose
   radio dots. The native inputs are hidden; the checked label fills in. */
.bulk-radio-group {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.bulk-radio-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  margin: 0;
  padding: 6px 15px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.bulk-radio-row input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.bulk-radio-row:hover { color: var(--text-secondary); }
.bulk-radio-row:has(input:checked) {
  background: var(--accent-surface);
  color: #DCE8FF;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.30);
}

#qbe-hashtag-error { display: none; margin-top: 6px; }

/* ── Platform requirements reference (schedule + import flows) ───────────── */
.plat-reqs {
  margin: 12px 0 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}
.plat-reqs summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.plat-reqs summary::-webkit-details-marker { display: none; }
.plat-reqs summary::before {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
  margin-left: 2px;
}
.plat-reqs[open] summary::before { transform: rotate(45deg); }
.plat-reqs summary:hover { color: var(--text); }
.plat-reqs-body {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.plat-req-row { display: flex; gap: 10px; align-items: flex-start; }
.plat-req-row img { margin-top: 1px; flex-shrink: 0; }
.plat-req-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plat-req-name { font-size: 12.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; }
.plat-req-spec { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.plat-req-soon {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #D7C49A; background: rgba(201, 161, 74, 0.12);
  border: 1px solid rgba(201, 161, 74, 0.26); border-radius: 999px; padding: 1px 6px;
}
.plat-req-note {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
  padding-top: 9px; border-top: 1px solid var(--border);
}

/* ── Bulk Edit modal v2 (2-column, sticky header/footer) ─────────────────── */
.schedule-modal.bulk-edit-mode.qbe-v2 {
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100vh - 60px);
}
.qbe-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 14px !important;
  border-bottom: 1px solid var(--border);
}
.qbe-header-text { min-width: 0; }
.qbe-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 8px;
}
.qbe-summary-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #BFD8F5;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  padding: 3px 11px;
}
.qbe-summary-note { font-size: 12px; color: var(--text-muted); }

.schedule-modal.qbe-v2 .qbe-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 16px 22px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.qbe-col {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}
.qbe-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.qbe-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Platform cards: 3 across, navy glass, TikTok shows disabled until enabled. */
.qbe-plat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.qbe-plat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.qbe-plat-card:hover { border-color: rgba(96, 165, 250, 0.35); }
.qbe-plat-card.is-checked {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.07);
}
/* Mixed (some-but-not-all selected videos have this platform): dashed + faint tint,
   reinforcing the indeterminate dash on the checkbox. One click makes it uniform. */
.qbe-plat-card.is-mixed {
  border-style: dashed;
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.035);
}
.qbe-plat-card.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-0);
}
.qbe-plat-card.is-disabled:hover { border-color: var(--border); }
.qbe-plat-card input {
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
  cursor: inherit;
}
.qbe-plat-card-logo { width: 22px; height: 22px; object-fit: contain; }
.qbe-plat-card-name { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.qbe-plat-card.is-checked .qbe-plat-card-name { color: var(--text); }
.qbe-plat-badge {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D7C49A;
  background: rgba(201, 161, 74, 0.12);
  border: 1px solid rgba(201, 161, 74, 0.26);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Soft inline warnings - amber and small by default, red only after Apply tried. */
.qbe-soft-warn {
  font-size: 11.5px;
  color: #D7C49A;
  margin-top: 8px;
  line-height: 1.4;
}
.qbe-soft-warn.is-hard { color: var(--error); }

/* Sticky footer */
.qbe-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px !important;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.qbe-footer-note { font-size: 12px; color: var(--text-muted); }
.qbe-footer-actions { display: flex; gap: 10px; }

@media (max-width: 860px) {
  .schedule-modal.qbe-v2 .qbe-body { grid-template-columns: 1fr; gap: 22px; }
  .qbe-footer-note { display: none; }
}

/* ── Apply Posting Defaults confirmation modal ───────────────────────────── */
#apply-defaults-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}
#apply-defaults-overlay .apply-defaults-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 22, 0.72);
  backdrop-filter: blur(4px);
}
#apply-defaults-overlay .apply-defaults-modal {
  position: relative;
  width: 520px;
  max-width: calc(100vw - 32px);
  background: var(--surface-raised);
  border-radius: var(--r-xl);
  border: 1px solid rgba(100, 120, 180, 0.22);
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.apply-defaults-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.apply-defaults-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
}

/* Shared modal title/subtitle (used by the posting-defaults row modal) */
.bulk-plat-title  { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: -0.01em; }
.bulk-plat-sub    { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }

/* Action buttons */
.pnow-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

.pnow-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pnow-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.pnow-btn--ghost { background: none; }
.pnow-btn--primary {
  background: var(--accent-surface);
  border-color: rgba(59,108,255,.3);
  color: #7AABFF;
}
.pnow-btn--primary:hover { background: rgba(59,108,255,.2); color: #A8D4FF; }
.pnow-btn--reconnect {
  background: rgba(93,169,255,.10);
  border-color: rgba(93,169,255,.28);
  color: #5DA9FF;
}
.pnow-btn--reconnect:hover { background: rgba(93,169,255,.18); color: #7DB9FF; }

/* ── Spin animation (refresh icons) ─────────────────────────────────────── */
@keyframes spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.icon-spinning { animation: spin-once 0.55s linear; }

/* ── Quick Add button ───────────────────────────────────────────────────── */

/* ── Topbar action button row ────────────────────────────────────────────── */
.topbar-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  /* No container - buttons sit directly on the page surface. */
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.topbar-btns .btn {
  height: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 14px;
  margin: 0;
  line-height: 1;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.topbar-btns .btn .btn-icon,
.topbar-btns .btn svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 6px;
  pointer-events: none;
}

.topbar-btns .topbar-btn-primary {
  /* Solid CTA blue (same as the marketing "Download for Windows" button). */
  padding: 0 12px;
  background: #0056d6;
  color: #F4F8FF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 20px rgba(59, 108, 232, 0.30);
}
.topbar-btns .topbar-btn-primary:hover {
  background: #0062ec;
  box-shadow: 0 10px 32px rgba(59, 130, 246, 0.38);
  color: #FFFFFF;
}

.topbar-btns .topbar-btn-secondary {
  background: #0056d6;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F4F8FF;
}
.topbar-btns .topbar-btn-secondary:hover {
  background: #0062ec;
  color: #FFFFFF;
}

/* Solid CTA blue, same as the other dashboard buttons. */
.topbar-btns .topbar-btn-neutral {
  background: #0056d6;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F4F8FF;
  box-shadow: none;
}
.topbar-btns .topbar-btn-neutral:hover {
  background: #0062ec;
  color: #FFFFFF;
}

/* Refresh views (History only): small utility text button, not a full outline. */
.topbar-actions .btn-refresh-views,
.topbar-actions .btn-refresh-views:focus {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-muted);
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 500;
  height: auto;
}
.topbar-actions .btn-refresh-views:hover {
  background: none;
  color: #C3D4EA;
}

/* ── Remote Access page ──────────────────────────────────────────────────── */

.ra-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ra-status-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.ra-status-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ra-status-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ra-status-card .ra-health-list { margin-bottom: 14px; }
.ra-status-card .ra-warning { margin-bottom: 0; }

.ra-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ra-badge-ready      { background: rgba(79,141,255,0.12); color: #74B4FF; border: 1px solid rgba(79,141,255,0.3); }
.ra-badge-ok         { background: rgba(79,141,255,0.08); color: #74B4FF; border: 1px solid rgba(79,141,255,0.2); }
.ra-badge-warn       { background: rgba(192,132,252,0.1);   color: #C084FC; border: 1px solid rgba(192,132,252,0.25); }
.ra-badge-needs-attn { background: rgba(96,165,250,0.12); color: #93c5fd; border: 1px solid rgba(96,165,250,0.3); }

/* ── Remote Access redesign: one clear hero state + grouped readiness ───────── */
.ra-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 20px 22px; margin-bottom: 16px; border-radius: var(--r);
  border: 1px solid var(--border);
}
.ra-hero--ready { background: rgba(92,149,126,0.10); border-color: rgba(92,149,126,0.34); }
.ra-hero--setup { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.30); }
.ra-hero-status { font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; }
.ra-hero--ready .ra-hero-status { color: #8FD3B6; }
.ra-hero--setup .ra-hero-status { color: #9EC5FF; }
.ra-hero-reason { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.ra-hero-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.ra-setup-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 20px; margin-bottom: 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px;
}
.ra-group-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.ra-ready-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; color: var(--text-secondary); }
.ra-ready-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--text-muted); }
.ra-ready-row.is-ok .ra-ready-dot { background: #5C957E; }
.ra-ready-row.is-ok .ra-ready-label { color: var(--text-primary); }
.ra-ready-row.is-missing .ra-ready-dot { background: #5688C4; }
.ra-ready-row.is-off .ra-ready-dot { background: rgba(148,163,184,0.45); }
.ra-ready-row.is-next { background: rgba(86,136,196,0.10); border-radius: 8px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.ra-ready-row.is-next .ra-ready-label { color: #9EC5FF; font-weight: 700; }
.ra-ready-next { margin-left: auto; font-size: 11px; font-weight: 700; color: #9EC5FF; }

/* Multi-line recommended rows: label line + small helper note. Top-align the
   status dot with the first line of text (it stays a STATUS DOT - not clickable). */
.ra-ready-row:has(.ra-ready-text) { align-items: flex-start; }
.ra-ready-row:has(.ra-ready-text) .ra-ready-dot { margin-top: 6px; }
.ra-ready-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ra-ready-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; }
/* Neutral gray tag - NOT a warning. "Optional — requires administrator" must read
   as informational, never as an error/amber state. */
.ra-ready-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-muted, #7595AC);
  background: rgba(148,163,184,0.12);
  border: 1px solid rgba(148,163,184,0.26);
  border-radius: 5px; padding: 1px 7px; white-space: nowrap;
}
.ra-ready-row.is-ok .ra-ready-tag {
  color: #8FB7A6; background: rgba(92,149,126,0.14); border-color: rgba(92,149,126,0.30);
}
.ra-ready-note { font-size: 12px; line-height: 1.4; color: var(--text-muted, #7595AC); font-weight: 400; }

.ra-info-callout {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
  padding: 11px 14px; margin-bottom: 20px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
}
.ra-secondary-tag { font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: rgba(148,163,184,0.12); padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.ra-firewall-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.ra-admin-btn { margin-top: 8px; }

@media (max-width: 640px) { .ra-setup-card { grid-template-columns: 1fr; } }

.ra-recheck-btn { margin-left: auto; }

.ra-health-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }

.ra-health-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ra-health-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.ra-health-ok   .ra-health-dot { background: #74B4FF; }
.ra-health-fail .ra-health-dot { background: #f87171; }
.ra-health-ok   { color: var(--text-secondary); }
.ra-health-fail { color: #f87171; }

.ra-warning {
  font-size: 12.5px;
  color: var(--text-muted);
  background: rgba(192,132,252,0.06);
  border: 1px solid rgba(192,132,252,0.18);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 22px;
}

.ra-divider      { border: none; border-top: 1px solid var(--border); margin: 22px 0; }
.ra-section-head { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ra-section-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.ra-muted        { font-size: 13px; color: var(--text-muted); }
/* Mobile-access: trusted-network warning + restart-to-rebind note (blue/red only, no green/gold) */
.ra-trust-warn {
  font-size: 12.5px; line-height: 1.5; color: #F8C9C9;
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.28);
  border-radius: 10px; padding: 10px 13px; margin: 4px 0 12px;
}
.ra-restart-note {
  background: rgba(96,165,250,0.09); border: 1px solid rgba(96,165,250,0.28);
  border-left: 3px solid #60A5FA; border-radius: 10px; padding: 12px 14px; margin: 4px 0 6px;
}
.ra-restart-title { font-size: 13.5px; font-weight: 700; color: #DCE9FB; margin-bottom: 2px; }
.ra-restart-note .btn { margin-top: 10px; }
.ra-field-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin: 4px 0 7px; }
.ra-field-hint { font-weight: 500; color: var(--text-muted); }
.ra-phone-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ra-phone-empty { padding: 12px 14px; border-radius: 10px; background: rgba(93, 169, 255,0.07); border: 1px solid rgba(93, 169, 255,0.22); margin-bottom: 12px; }
.ra-phone-empty .ra-section-desc { margin-bottom: 10px; }
.ra-advanced { margin-top: 14px; }
.ra-advanced > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: #6E97E8; list-style: none; }
.ra-advanced > summary::-webkit-details-marker { display: none; }
.ra-advanced > summary::before { content: '▸ '; }
.ra-advanced[open] > summary::before { content: '▾ '; }
.ra-advanced-help { margin-top: 8px; }

.ra-url-row   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ra-url-label { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.ra-url-code  {
  font-family: inherit;
  font-size: 13px;
  color: #9abfff;
  background: rgba(59,108,255,0.07);
  border: 1px solid rgba(59,108,255,0.15);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  word-break: break-all;
}

.ra-qr-wrap { margin: 10px 0; }
.ra-qr      { width: 160px; height: 160px; border-radius: var(--r-sm); border: 1px solid var(--border); }

/* QR beside its text/controls as one tight, balanced row (QR left, text right). */
.ra-qr-row    { display: flex; gap: 20px; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: 10px 0; }
.ra-qr-row .ra-qr-col  { flex: 0 0 auto; margin: 0; }
.ra-qr-row .ra-qr      { width: 150px; height: 150px; }
.ra-qr-row .ra-qr-text { flex: 0 1 auto; min-width: 0; max-width: 340px; }
.ra-qr-row .ra-qr-text .ra-url-row     { margin-bottom: 0; }
.ra-qr-row .ra-qr-text .ra-section-desc { margin-bottom: 10px; }
@media (max-width: 640px) {
  .ra-qr-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ra-qr-row .ra-qr-text { max-width: 100%; }
}

/* Companion + Same Network shown as two equal columns side by side, with a
   vertical divider between them (replaces the horizontal divider that used to
   stack them). Collapses to a single stacked column on narrow widths. */
.ra-two-col-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  width: 100%;
}
.ra-two-col-sections .ra-col-section { min-width: 0; width: auto; }
.ra-two-col-sections .ra-col-section + .ra-col-section {
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
/* Inside a half-width column, stack the QR above its text so neither cramps. */
.ra-two-col-sections .ra-qr-row { flex-direction: column; align-items: flex-start; gap: 14px; }
.ra-two-col-sections .ra-qr-row .ra-qr-text { max-width: 100%; }
/* Collapse to a single stacked column ONLY on genuinely narrow widths. The desktop
   app window is >=960px (minWidth), so at any normal desktop size the two sections
   stay side by side; this only trips on a hard-shrunk window / small screen. */
@media (max-width: 640px) {
  .ra-two-col-sections { grid-template-columns: 1fr; gap: 0; }
  .ra-two-col-sections .ra-col-section + .ra-col-section {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin-top: 20px;
  }
}

.ra-ts-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.ra-ts-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  outline: none;
}
.ra-ts-input:focus { border-color: rgba(59,108,255,0.5); }

.ra-autostart { margin-bottom: 12px; }
.ra-autostart-grid { display: flex; flex-direction: column; }
.ra-toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.ra-toggle-label:last-child { border-bottom: none; }
.ra-toggle-label input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer;
}
.ra-toggle-label--disabled { opacity: .55; cursor: not-allowed; }
.ra-toggle-label--disabled input[type="checkbox"] { cursor: not-allowed; }
.ra-toggle-admin-note {
  font-size: 11.5px; color: var(--warning); margin-top: 6px;
  background: rgba(255,165,0,.07); border: 1px solid rgba(255,165,0,.18);
  border-radius: 6px; padding: 6px 10px; line-height: 1.4;
}
.ra-toggle-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.ra-toggle-desc  { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.ra-recommended {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9abfff;
  background: rgba(59,108,255,0.1);
  border: 1px solid rgba(59,108,255,0.2);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 6px;
}

.ra-autostart-status { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.ra-result-ok  { color: #74B4FF; margin-left: 4px; }
.ra-result-err { color: #f87171; margin-left: 4px; }

.ra-qa-notes         { margin-top: 20px; font-size: 12.5px; color: var(--text-muted); }
.ra-qa-notes summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.ra-qa-notes ul      { padding-left: 20px; line-height: 1.65; }
.ra-qa-notes li      { margin-bottom: 6px; }
.ra-qa-notes code    {
  font-family: monospace;
  font-size: 11.5px;
  background: rgba(59,108,255,0.07);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Help Page ───────────────────────────────────────────────────────────── */

/* Sidebar help item - slightly separated from main nav */
.nav-item-help {
  /* Center the Tessa card in the open space below the nav items (the nav is a
     flex:1 column, so auto top+bottom margins split the leftover space evenly). */
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 11px;
  padding-bottom: 11px;
  /* Calm card - must not compete with the Dashboard content. */
  border: 1px solid var(--border-sidebar);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.015);
  box-shadow: none;
  margin-left: 2px;
  margin-right: 2px;
  flex-direction: column;
  align-items: center;
}
.nav-item-help:hover {
  background: rgba(59, 108, 255, 0.06);
  border-color: var(--border-blue);
  box-shadow: none;
}

.nav-item-help .tessa-help-card {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 12px;
}

.nav-item-help .nav-tessa-text {
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.nav-tessa-avatar-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 0 0 1.5px rgba(91, 120, 255, 0.28), 0 2px 10px rgba(59, 108, 255, 0.16);
}

.nav-item-help .nav-tessa-avatar {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center 10%;
  transform: scale(1.1);
  transform-origin: center 18%;
  display: block;
}

.nav-tessa-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.nav-tessa-label {
  font-size: 14px;
  font-weight: 700;
  color: #E2ECFF;
  line-height: 1.2;
}
.nav-tessa-sub {
  font-size: 11px;
  color: rgba(160, 185, 255, 0.88);
  line-height: 1.25;
  font-weight: 500;
}
.nav-tessa-helper {
  font-size: 10px;
  color: rgba(140, 165, 215, 0.58);
  line-height: 1.3;
  margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════════════
   HISTORY TABLE - premium redesign
   ══════════════════════════════════════════════════════════════════ */
.hist-note {
  font-size: 11px; color: var(--text-muted); padding: 12px 20px 8px;
  font-style: italic;
}
.hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hist-table thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  white-space: nowrap; text-align: left; background: none;
}
.hist-table thead th:first-child { padding-left: 20px; }
.hist-table thead th:last-child  { padding-right: 20px; }
.hist-table tbody tr { transition: background .12s; }
.hist-table tbody tr:hover { background: rgba(120, 150, 210, 0.05); }
.hist-table tbody tr td {
  padding: 16px 14px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.hist-table tbody tr:last-child td { border-bottom: none; }
.hist-table tbody tr td:first-child { padding-left: 20px; }
.hist-table tbody tr td:last-child  { padding-right: 20px; }

/* Video column */
.hist-video-col { min-width: 200px; }
.hist-filename { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-all; line-height: 1.4; margin-bottom: 7px; }
.hist-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hist-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; border-radius: 20px; padding: 2px 9px; }
.hist-chip--posted  { background: var(--success-surface); color: #74B4FF; }
.hist-chip--partial { background: rgba(96,165,250,.10); color: #86B3E6; border: 1px solid rgba(96,165,250,.22); }
.hist-chip--failed  { background: rgba(220,60,60,.10); color: #E87070;  border: 1px solid rgba(220,60,60,.2); }

/* Platform column */
.hist-plat-col { white-space: nowrap; }
.hist-plat-chips { display: flex; flex-direction: column; gap: 5px; }
.hist-plat-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; border-radius: 6px;
  padding: 3px 10px; white-space: nowrap; width: fit-content;
}
.hist-plat--youtube   { background: var(--platform-youtube-bg);   color: var(--platform-youtube);   border: 1px solid var(--platform-youtube-border); }
.hist-plat--instagram { background: var(--platform-instagram-bg); color: var(--platform-instagram); border: 1px solid var(--platform-instagram-border); }
.hist-plat--tiktok    { background: var(--platform-tiktok-bg);    color: var(--platform-tiktok);    border: 1px solid var(--platform-tiktok-border); }
.hist-plat--failed          { background: rgba(255,255,255,.04); color: var(--text-muted); border: 1px solid var(--border); }
/* Failed platform chip used in history per-platform status */
.hist-plat-chip--failed     { background: rgba(220,60,60,.10); color: #E87070; border: 1px solid rgba(220,60,60,.2); }

/* Failure reason lines under platform chips */
.hist-fail-reasons  { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.hist-fail-line     { font-size: 11px; color: var(--text-muted); line-height: 1.4; word-break: break-word; }
.hist-fail-plat     { font-weight: 600; color: #E87070; }

/* Views column */
.hist-views-col { min-width: 110px; }
.hist-views-total  { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.hist-views-unsync { font-size: 12px; color: var(--text-muted); font-style: italic; }
.hist-views-break  { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.hist-views-row    { font-size: 11.5px; color: var(--text-muted); }

/* Posted date column */
.hist-date-col  { white-space: nowrap; }
.hist-date-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.hist-date-val   { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.hist-date-time  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Actions column */
.hist-act-col  { white-space: nowrap; }
.hist-act-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hist-btn {
  font-size: 12px; font-weight: 500; font-family: inherit;
  padding: 5px 13px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.hist-btn:hover { background: rgba(255,255,255,.09); color: var(--text); border-color: var(--border-strong); }
.hist-btn--primary { background: var(--accent-surface); border-color: rgba(59,108,255,.3); color: #7AABFF; }
.hist-btn--primary:hover { background: rgba(59,108,255,.2); color: #A8D4FF; }

/* ══════════════════════════════════════════════════════════════════
   UPCOMING POSTS CARD
   ══════════════════════════════════════════════════════════════════ */

/* Empty state */
.up-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 0 4px;
}

/* Shared icon tile - used in Upcoming Posts empty state and similar cards */
.empty-icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(30, 45, 68, 0.65);
  border: 1px solid rgba(118, 134, 158, 0.22);
  box-shadow: 0 2px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5E7A96;
  margin-bottom: 14px;
  flex-shrink: 0;
}

/* Legacy - kept for backwards compat, now replaced by .empty-icon-tile */
.up-empty-icon {
  color: var(--text-muted);
  margin-bottom: 10px;
}

.up-empty-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.up-empty-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 360px;
  margin-bottom: 14px;
}

.up-empty-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Featured next post - legacy; dashboard now uses .up-table */
.up-featured {
  padding: 16px 16px;
  background: var(--accent-surface);
  border: 1px solid rgba(59,108,255,.2);
  border-radius: 10px;
  margin-bottom: 14px;
  transition: border-color .15s, background .15s;
}
.up-featured:hover {
  border-color: rgba(59,108,255,.35);
  background: rgba(59,108,255,.15);
}

.up-featured-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7AABFF;
  margin-bottom: 5px;
}

.up-featured-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin-bottom: 8px; min-width: 0; }

.up-featured-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.up-featured-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.up-featured-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Also queued */
.up-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

#upcoming-posts-panel.op-card {
  padding: 16px 18px 14px;
}
#upcoming-posts-panel .op-card-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#upcoming-posts-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

/* Compact dashboard tables - thead/tbody share column widths; no scrollbars in preview panels */
.dash-table-wrap {
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.up-table-wrap { max-height: min(420px, 36vh); }
.up-table-wrap--dashboard {
  max-height: none;
  min-height: 0;
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
}
.up-table-wrap--dashboard .dash-table,
.up-table-wrap--dashboard .up-table {
  table-layout: fixed;
  width: 100%;
}
.up-table-wrap--dashboard .dash-table tbody tr.dash-row {
  height: var(--dash-preview-row-h);
}
.up-table-wrap--dashboard .dash-table thead tr {
  height: var(--dash-preview-head-h);
}
.up-table--dashboard tbody tr {
  min-height: var(--dash-preview-row-h);
}
.dash-row--pad {
  pointer-events: none;
}
.dash-row--pad .dash-row-pad {
  height: var(--dash-preview-row-h);
  padding: 0;
  border-bottom: none;
  visibility: hidden;
}
/* Empty padding rows must show NO divider line. The generic row-border rule
   (tr:not(:last-child) .dash-td) is more specific than the cell's own
   border-bottom:none, so it was drawing lines on blank rows - override it. */
.up-table-wrap--dashboard .dash-table tbody tr.dash-row.dash-row--pad .dash-td.dash-row-pad { border-bottom: none; }
.up-table-wrap--dashboard .dash-table tbody tr.dash-row {
  height: var(--dash-preview-row-h);
  max-height: var(--dash-preview-row-h);
}
.up-table-wrap--dashboard .dash-table tbody tr.dash-row .dash-td {
  height: var(--dash-preview-row-h);
  max-height: var(--dash-preview-row-h);
  box-sizing: border-box;
  overflow: hidden;
  vertical-align: middle;
}
/* One consistent row background across all 3 dashboard list containers - no zebra
   striping. Subtle blue divider between rows; soft blue hover only. */
.up-table-wrap--dashboard .dash-table tbody tr.dash-row .dash-td,
.up-table-wrap--dashboard .dash-table tbody tr.dash-row:nth-child(even) .dash-td {
  background: rgba(15, 35, 66, 0.72);
}
.up-table-wrap--dashboard .dash-table tbody tr:not(:last-child) .dash-td {
  border-bottom: 1px solid rgba(96, 165, 250, 0.10);
}
.up-table-wrap--dashboard .dash-table tbody tr:last-child .dash-td {
  border-bottom: none;
}
/* Hover/selected: soft blue only. */
.up-table-wrap--dashboard .dash-table tbody tr.dash-row:hover .dash-td,
.up-table-wrap--dashboard .dash-table tbody tr.dash-row.is-selected .dash-td {
  background: rgba(96, 165, 250, 0.08);
}
/* Round only the first and last visible rows, not every row. */
.up-table-wrap--dashboard .dash-table tbody tr.dash-row:first-child .dash-td:first-child { border-top-left-radius: 10px; }
.up-table-wrap--dashboard .dash-table tbody tr.dash-row:first-child .dash-td:last-child  { border-top-right-radius: 10px; }
.up-table-wrap--dashboard .dash-table tbody tr.dash-row:last-child  .dash-td:first-child { border-bottom-left-radius: 10px; }
.up-table-wrap--dashboard .dash-table tbody tr.dash-row:last-child  .dash-td:last-child  { border-bottom-right-radius: 10px; }
/* Posted/schedule date - softer than the title. */
.up-table-wrap--dashboard .dash-table .dash-sched-time {
  font-size: 12.5px;
  font-weight: 600;
  color: #9FB0C8;
}
/* 16px left/right padding on the row edges; compact 8px between inner cells. */
.up-table-wrap--dashboard .dash-table .dash-td { padding: 7px 8px; }
.up-table-wrap--dashboard .dash-table .dash-td:first-child { padding-left: 16px; }
.up-table-wrap--dashboard .dash-table .dash-td:last-child  { padding-right: 16px; }
.up-table--dashboard .dash-td { padding: 7px 8px; }

/* Queued Posts columns (legacy compact table) */
.up-table .col-num    { width: 24px; text-align: center; }
.up-table .col-file   { width: 38%; text-align: left; }
.up-table .col-sched  { width: 38%; text-align: left; }
.up-table .col-plats  { width: 24%; text-align: left; }

/* Dashboard preview tables - built for 3 platforms (IG/YT/TT), compact + premium.
   Fixed columns so the platform cluster always fits and the title truncates first. */
.up-table--dashboard { table-layout: fixed; width: 100%; }
.up-table--dashboard .col-file    { width: auto; overflow: hidden; }
.up-table--dashboard .col-sched   { width: 118px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Platform column is a protected fixed width that always holds 3 compact badges
   (3 x 19px min + 2 x 4px gap = 65px), with a GENEROUS right buffer so the badge
   cluster sits well inside and can never be clipped/crowded at the card edge
   (scrollbar, overlay, narrow window). Title truncates first (col-file is auto). */
.up-table--dashboard .col-plats   { width: 92px; padding-right: 8px; overflow: visible; white-space: nowrap; }
.up-table--dashboard .up-plats-cell { overflow: visible; flex-wrap: wrap; white-space: normal; row-gap: 5px; }
.up-table--dashboard .col-actions { width: 60px; text-align: right; }
.up-table--dashboard .dash-td     { padding: 7px 8px; vertical-align: middle; }
/* Edit column: pencil sits 24px in from the card edge (14 read too tight, 32 too
   wide). Platforms shrinks by the same 8px the Edit cell grows, so total table
   width is unchanged. 60 - 8(left) - 24(right) = 28 = button width, no clipping. */
.up-table--dashboard .col-actions,
.up-table--dashboard .dash-td.col-actions,
.up-table--dashboard th.col-actions { padding-right: 24px; }
.up-table--dashboard .dash-filename {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #EAF2FF;
}
/* Compact, uniform platform mini-badges (scoped to the preview cells). */
.up-plats-cell { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.up-plats-cell { gap: 4px; }
.up-plats-cell .up-plat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
}
/* Pencil-only Edit button - no longer a wide text button. */
.up-act--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  width: 28px;
  height: 28px;
}
/* Performance tile context line (the "From N videos posted with TRESSO" trust label). */
.dash-perf-ctx {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.3;
}
.dash-campaign {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(93, 169, 255, 0.30);
  background: rgba(93, 169, 255, 0.12);
  color: #F2C14E;
}
.dash-campaign--none {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
}
.up-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}
.up-act {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.up-act:hover {
  background: rgba(96,165,250,0.08);
  border-color: rgba(96,165,250,0.22);
  color: var(--text);
}
.up-act--danger:hover {
  background: rgba(224,96,96,0.08);
  border-color: rgba(224,96,96,0.22);
  color: #D89898;
}
/* Upcoming Queue edit (pencil) button: lighter navy chip, not heavy. */
.up-table-wrap--dashboard .up-act--icon {
  background: rgba(15, 35, 66, 0.55);
  border-color: rgba(96, 165, 250, 0.18);
  color: #B8CFEA;
}
.up-table-wrap--dashboard .up-act--icon:hover {
  background: rgba(24, 58, 108, 0.75);
  border-color: rgba(96, 165, 250, 0.32);
  color: #E5EDF8;
}
.up-overflow-note {
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 2px 2px 0;
}
.up-row--clickable { cursor: pointer; }
.rf-table-wrap { max-height: min(640px, 52vh); }

.dash-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
.up-table-wrap--dashboard .dash-table,
.up-table-wrap--dashboard .up-table {
  width: 100%;
  table-layout: fixed;
}
.dash-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 10px 10px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  vertical-align: bottom;
}
.dash-table .dash-td {
  padding: 11px 10px;
  font-size: 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  min-width: 0;
  overflow: hidden;
}
.dash-table tbody tr:last-child .dash-td { border-bottom: none; }
.up-table-wrap--dashboard .dash-table .dash-td {
  border-bottom: none;
}
/* Mockup table header: subtle dark bar, dim blue-gray labels. */
.up-table-wrap--dashboard .dash-table thead th {
  background: rgba(6, 12, 24, 0.5);
  border-bottom: 1px solid rgba(148, 163, 184, 0.07);
  color: #496A8C;
  letter-spacing: 0.08em;
}

/* Queued Posts columns */
.up-table .col-num    { width: 24px; text-align: center; }
.up-table .col-file   { width: 38%; text-align: left; }
.up-table .col-sched  { width: 38%; text-align: left; }
.up-table .col-plats  { width: 24%; text-align: left; }
.up-table .col-status { width: 72px; text-align: center; }
.up-table thead .col-file,
.up-table thead .col-sched,
.up-table thead .col-plats { text-align: left; }

/* Dashboard compact table - VIDEO fills remaining width, other cols fixed.
   POST is capped (not width:100%) so it can't eat all the slack and strand
   POSTED/WHEN far right; POSTED/WHEN is wide enough for the full
   "Mon DD · H:MM PM" timestamp without clipping. */
.up-table-wrap--dashboard .up-table .col-file    { width: auto; max-width: 360px; }
.up-table-wrap--dashboard .up-table .col-campaign { width: 88px; }
.up-table-wrap--dashboard .up-table .col-sched   { width: 150px; min-width: 150px; white-space: nowrap; overflow: visible; text-overflow: clip; }
/* Wide enough for THREE compact badges (IG + YT + TT) plus a right buffer so the
   3rd badge never spills/clips at the card edge. 3 x ~27px + 2 x 4px gap = ~89px;
   112px col - 8px left - 8px right padding = 96px content box (7px slack). */
.up-table-wrap--dashboard .up-table .col-plats   { width: 200px; }
/* Cap the table so columns group toward the left (SCHEDULED/PLATFORMS not stranded at
   the far edge of the now full-width container) and PLATFORMS has room for all badges. */
.up-table-wrap--dashboard .up-table { max-width: 860px; }
.up-table-wrap--dashboard .up-table .col-views   { width: 72px; text-align: right; }
.up-table-wrap--dashboard .up-table .col-actions { width: 66px; text-align: right; padding-right: 22px; }
.up-table-wrap--dashboard .up-table thead .col-actions { padding-right: 22px; }
.up-table-wrap--dashboard .up-table .dash-td.col-actions { padding-right: 22px; }
.up-table-wrap--dashboard .up-table .dash-td.col-plats { overflow: visible; padding-right: 8px; }
/* Compact badges in the dashboard preview so all three platforms fit the column. */
.up-table-wrap--dashboard .up-table .up-plat { font-size: 10px; padding: 3px 6px; }
.up-table-wrap--dashboard .up-table thead th { padding-left: 8px; padding-right: 8px; }
.up-table-wrap--dashboard .up-table thead th.col-actions { padding-right: 22px; }
.up-table-wrap--dashboard .up-table thead th.col-plats { padding-right: 8px; }
.up-table-wrap--dashboard .dash-table .dash-td { padding-left: 8px; padding-right: 8px; }
.up-table-wrap--dashboard .dash-table .dash-td.col-actions { padding-left: 4px; }
.up-table-wrap--dashboard .up-plats-cell {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.up-table-wrap--dashboard .up-table thead .col-actions,
.up-table-wrap--dashboard .up-table thead .col-views { text-align: right; }
/* Keep the posted/failed status chips on ONE line in the dashboard preview and
   compact them, so all three (IG/YT/TT) fit the Platforms column. Wrapping made
   that row ~3x tall, which overflowed the panel's fixed height and clipped the
   bottom row ("cut off"). */
.up-table-wrap--dashboard .pstat-group { flex-wrap: nowrap; gap: 4px; }
.up-table-wrap--dashboard .pstat { height: 19px; padding: 0 6px; gap: 2px; font-size: 10px; }
.up-table-wrap--dashboard .pstat-icon { font-size: 12px; margin-left: 2px; }

.up-row { cursor: pointer; transition: background .12s; }
.up-row:hover { background: rgba(255,255,255,0.025); }
.dash-row--clickable { cursor: pointer; }
/* Brief pulse on the destination row after jumping to it from a dashboard row. */
.dash-jump-highlight { animation: dash-jump-pulse 2.2s ease; }
@keyframes dash-jump-pulse {
  0%, 100% { background-color: transparent; }
  12% { background-color: rgba(96, 165, 250, 0.20); }
  55% { background-color: rgba(96, 165, 250, 0.10); }
}

.dash-filename {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-table .dash-filename {
  font-weight: 600;
  color: var(--text);
}
.dash-sched-time {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
}
.rf-table .dash-sched-time { color: var(--text-secondary); }

.up-plats-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.up-plat {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
}
/* Canonical platform pills (shared across the whole app): Instagram = magenta
   tint, YouTube = red tint. Readable text on navy, tinted chips not solid blocks. */
/* Distinct platform colors: YT red, IG purple/magenta, TT cyan. */
.up-plat--youtube   { color: var(--platform-youtube);   background: var(--platform-youtube-bg);   border: 1px solid var(--platform-youtube-border); }
.up-plat--instagram { color: var(--platform-instagram); background: var(--platform-instagram-bg); border: 1px solid var(--platform-instagram-border); }
.up-plat--tiktok    { color: var(--platform-tiktok);    background: var(--platform-tiktok-bg);    border: 1px solid var(--platform-tiktok-border); }
.up-plat--facebook  { color: var(--platform-facebook);  background: var(--platform-facebook-bg);  border: 1px solid var(--platform-facebook-border); }
/* Source-file hint under a queue title - shown only when the title differs from the
   filename, so two different videos sharing one title (e.g. an original and a
   re-encoded "_1080p_caption" variant) are never mistaken for the same scheduled item. */
.qi-file-hint { font-size: 11px; color: var(--text-muted, #7595AC); opacity: 0.8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }

/* Getting Started: platform availability callout (IG/YT now, TikTok coming soon) */
.gs-plat-callout {
  margin: 4px 24px 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}
.gs-plat-callout-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.gs-plat-callout-body { font-size: 12px; color: var(--text-secondary); margin: 4px 0 12px; line-height: 1.5; }
.gs-plat-rows { display: flex; flex-direction: column; gap: 8px; }
.gs-plat-row {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  align-items: center;
  gap: 10px;
}
.gs-plat-name { font-size: 13px; font-weight: 600; color: var(--text); }
.gs-plat-status {
  font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px;
}
.gs-plat-status--available { color: #93c5fd; background: rgba(79,141,255,.14); }
.gs-plat-status--connected { color: #8BAAC4; background: rgba(255,255,255,.05); }
.gs-plat-status--soon      { color: #8BAAC4; background: rgba(255,255,255,.04); }
.gs-plat-action:empty { display: none; }

.up-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.up-status--sched  { color: rgba(93, 232, 155, 0.72); }
.up-status--paused { color: var(--text-muted); }
.up-status--nodate { color: rgba(93, 169, 255, 0.75); }

@media (max-width: 900px) {
  .dash-table-wrap:not(.up-table-wrap--dashboard) { overflow-x: auto; max-width: 100%; }
  .up-table-wrap:not(.up-table-wrap--dashboard) .up-table { min-width: 520px; }
}

.up-also-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.up-also-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

.up-also-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.up-also-row:last-child { border-bottom: none; }

.up-also-title {
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.up-also-time {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.up-also-more {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.up-also-link {
  color: #7AABFF;
  cursor: pointer;
  text-decoration: underline;
}

.up-footer {
  padding-top: 11px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ── Failed Posts panel (compact list) ─────────────────────────────────────── */
.rf-table .col-num    { width: 28px; text-align: center; }
.rf-table .col-file   { width: 18%; text-align: left; }
.rf-table .col-sched  { width: 22%; text-align: left; }
.rf-table .col-plats  { width: 80px; text-align: left; }
.rf-table .col-reason { text-align: left; padding-left: 20px; }
.rf-table .col-acts   { width: 228px; text-align: center; }
.rf-table thead .col-num,
.rf-table thead .col-acts { text-align: center; }
.rf-table thead .col-file,
.rf-table thead .col-sched,
.rf-table thead .col-reason { text-align: left; }
.rf-table thead .col-plats { text-align: left; }

.rf-row:hover { background: rgba(255,255,255,0.02); }
.rf-row--clickable { cursor: pointer; }
.rf-row--clickable:hover { background: rgba(59,108,255,0.09); }
.rf-row--clickable:hover .dash-filename { color: #7AABFF; text-decoration: underline; text-underline-offset: 2px; }

.rf-plat { font-size: 10px; font-weight: 700; line-height: 1; margin-right: 6px; }
.rf-plat--youtube   { color: var(--platform-youtube); }
.rf-plat--instagram { color: var(--platform-instagram); }

.rf-table .col-reason {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rf-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.rf-table .col-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.up-table .col-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}


/* ── Reschedule Failed Posts modal ─────────────────────────────────────────── */
.rsf-desc { font-size: 13px; color: var(--text-muted); margin: 0 0 18px; line-height: 1.55; }
.rsf-dt-input { width: 100%; }
.rsf-interval-group { margin-top: 14px; }
.rsf-preview {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(59,108,255,0.06);
  border: 1px solid rgba(59,108,255,0.14);
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: center;
  min-height: 38px;
}
.rsf-preview:empty { display: none; }
.rsf-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  opacity: 0.75;
  line-height: 1.5;
}
.rsf-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.rsf-actions .btn-ghost { flex: 1; }
.rsf-actions .btn-primary { flex: 2; }

/* Dashboard panel footer CTAs */
.dash-cta {
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.dash-cta--queue {
  background: rgba(59, 108, 255, 0.12);
  border-color: rgba(59, 108, 255, 0.28);
  color: #9BB8F0;
}
.dash-cta--queue:hover {
  background: rgba(59, 108, 255, 0.2);
  border-color: rgba(59, 108, 255, 0.4);
  color: #C8D8F8;
}
.dash-cta--list {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.22);
  color: var(--platform-instagram);
}
.dash-cta--list:hover {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.32);
  color: #D4B4FF;
}

#failed-panel .fa-footer {
  flex-shrink: 0;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .rf-table { min-width: 720px; }
  .rf-actions { flex-direction: column; align-items: stretch; }
}

.fa-footer {
  padding-top: 18px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  display: flex;
  justify-content: flex-start;
}

/* ══════════════════════════════════════════════════════════════════
   POST HISTORY - card layout
   ══════════════════════════════════════════════════════════════════ */

/* ── History: two-tab split view ──────────────────────────────────────────── */

/* Filter chip row - replaces summary strip + tab bar */
.hrc-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0 14px;
  flex-wrap: wrap;
}
.hrc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
  user-select: none;
  white-space: nowrap;
}
.hrc-filter-chip:hover              { border-color: rgba(255,255,255,.18); color: var(--text-secondary); }
.hrc-filter-chip--blue              { background: rgba(59,108,255,.12); border-color: rgba(59,108,255,.38); color: #7AABFF; }
.hrc-filter-chip--blue:hover        { background: rgba(59,108,255,.18); border-color: rgba(59,108,255,.55); }
.hrc-filter-chip--attn-base         { }
.hrc-filter-chip--amber             { background: rgba(224,96,96,.12); border-color: rgba(224,96,96,.40); color: #E06060; }
.hrc-filter-chip--amber:hover       { background: rgba(224,96,96,.18); border-color: rgba(224,96,96,.60); }
.hrc-filter-chip--pending           { background: transparent; border-color: rgba(255,255,255,.06); color: var(--text-muted); font-size: 12px; height: 30px; cursor: pointer; }
.hrc-filter-chip--pending:hover     { border-color: rgba(255,255,255,.16); color: var(--text-secondary); }
.hrc-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 99px;
  background: rgba(255,255,255,.10);
  color: inherit;
}
.hrc-filter-badge--attn    { background: rgba(224,96,96,.25); }
.hrc-filter-badge--pending { background: rgba(255,255,255,.07); }

.hrc-panel         { }
.hrc-panel--hidden { display: none; }

/* History filter bar - compact dropdown toolbar */
/* Filters are controls on the page surface - no big rounded shell/panel. */
.hf-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* wrap so the Export control never falls off the right edge on narrow widths */
  gap: 8px 10px;
  padding: 2px 0 0;
  background: none;
  border: none;
  border-radius: 0;
  margin-bottom: 8px;
}
.hf-select {
  height: 32px;
  padding: 0 32px 0 12px;
  font-size: 12px;
  min-width: 120px;
}
.hf-select--active {
  border-color: rgba(96, 140, 255, 0.42);
  color: #9EC5FF;
  background-color: var(--select-bg-active);
}
.hf-search {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid rgba(140,163,184,0.16);
  background: rgba(0,0,0,0.15);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  width: 190px;
  min-width: 150px;    /* hold enough width for the "Search videos..." placeholder — never clip it */
  flex-shrink: 1;
  transition: border-color 0.12s;
}
.hf-search:focus { border-color: rgba(96,140,255,0.40); }
.hf-search::placeholder { color: var(--text-muted); }
.hf-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.65;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.hf-clear:hover { opacity: 1; color: var(--text-secondary); }
/* "Show hidden (N)" — muted secondary control (a real toggle), not an underlined link. */
.hf-hidden-toggle {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(140,163,184,0.08);
  border: 1px solid rgba(140,163,184,0.16);
  border-radius: 7px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.hf-hidden-toggle:hover { color: var(--text-secondary); background: rgba(140,163,184,0.14); border-color: rgba(140,163,184,0.26); }

/* One unified control bar: tabs (left) · filters (middle) · export (right). */
.hrc-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.hrc-controls .hrc-tab-seg { flex-shrink: 0; }
.hrc-controls .hf-bar { flex: 1; min-width: 260px; margin-bottom: 0; padding: 0; }
/* History tab bar - bold, impossible to miss */
.hrc-tab-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
/* Segmented control around the Posted/Failed tabs */
.hrc-tab-seg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  /* No container - tabs sit directly on the page (was a boxed segmented control). */
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.hrc-tab-bar-spacer { flex: 1; min-width: 8px; }
.hrc-tab-bar-action {
  flex-shrink: 0;
  padding-bottom: 8px;
}
.hrc-tab-bar-action--group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hrc-tab-bar-action--hidden { display: none; }
.hrc-failed-count { font-size: 13px; color: var(--text-muted); }
.hrc-tab-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: none; border-radius: 9px;
  background: none; cursor: pointer; font-size: 13px; font-weight: 600;
  color: #9FB0C8; transition: color 0.15s, background 0.15s;
}
.hrc-tab-btn:hover { color: #C3D4EA; }
.hrc-tab-btn--active {
  background: rgba(96, 165, 250, 0.12);
  color: #EAF2FF;
  font-weight: 700;
}
/* Failed active state: subtle rose tint (recognizable, not bulky) - doesn't pull
   attention away from the actual failed rows below. */
.hrc-tab-btn--active-fail {
  background: rgba(96, 165, 250, 0.12);
  color: #CFE3FF;
  font-weight: 700;
}
.hrc-tab-btn--fail { }
.hrc-tab-ct {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: rgba(96,165,250,0.16); border: none;
  color: #A9D4FF; font-size: 11px; font-weight: 700;
}
.hrc-tab-ct--fail { background: rgba(96,165,250,0.16); color: #A9D4FF; }
/* History table text colors - crisp but not harsh (exact spec values). */
.history-video-name { color: #A8B8CE; font-weight: 700; }
.history-cell--num { color: #7489A7; font-weight: 600; }
.history-grid-row--head .history-cell { color: #7FA3C8; font-weight: 800; letter-spacing: 0.08em; }
.hrc-tab-badge--fail {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: rgba(96,165,250,0.16); border: none;
  color: #A9D4FF; font-size: 11px; font-weight: 700;
}

/* Failed tab - table layout (Details opens fix panel) */
.hrc-table {
  width: 100%;
  font-size: 13px;
  display: block;
}
.hrc-table thead,
.hrc-table tbody { display: block; }
.hrc-thead-row,
.hrc-row,
.hrc-row--failed {
  display: grid;
  grid-template-columns: 36px minmax(140px, 1fr) 190px 140px 190px 180px;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
}
.hrc-table--failed .hrc-thead-row,
.hrc-table--failed .hrc-row--failed {
  grid-template-columns: 36px minmax(140px, 1fr) 190px 150px 340px;
}
.hrc-thead-row {
  border-bottom: 1px solid var(--border);
  min-height: 36px;
}
.hrc-thead-row th {
  padding: 8px 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}
.hrc-th--num { text-align: right; }
.hrc-th--action { text-align: right; }
.hrc-row,
.hrc-row--failed {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
  min-height: 56px;
}
.hrc-row:hover,
.hrc-row--failed:hover { background: rgba(255,255,255,.025); }
.hrc-td {
  padding: 0 8px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hrc-td--num    { font-size: 11.5px; color: var(--text-muted); font-weight: 600; justify-content: flex-end; padding-right: 4px; }
.hrc-td--file   { min-width: 0; }
.hrc-td--date   { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.hrc-td--plats  { flex-wrap: wrap; gap: 4px; }
.hrc-td--action { justify-content: flex-end; padding-right: 0; overflow: visible; }
.hrc-action-cell-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* History grid - queue-style card rows (Posted tab) */
.history-grid {
  width: 100%;
  font-size: 13px;
  overflow-x: auto;
}

.history-grid-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.history-grid-row {
  display: grid;
  /* Every row is its OWN grid (the body is flex-column), so any content-sized track
     (max-content) resolves PER ROW and the VIEWS column drifts when a row has a 3rd
     platform. DATE + PLATFORMS are therefore FIXED widths: with only VIEWS as the fr
     track, every row computes identical column edges and VIEWS lines up straight. */
  /* POST is the flexible (1fr) absorber so the fixed PLATFORMS/VIEWS lanes stay snug (no dead-space
     gaps) while every row still computes identical column edges (all non-POST tracks are fixed). */
  grid-template-columns: 46px minmax(160px, 1fr) 150px 172px 168px 96px;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* Failed tab - flexible POST + PLATFORMS columns use minmax(0,*) so they SHRINK
   to fit; DATE + ACTION are fixed lanes that always stay fully on screen (no clip). */
.history-grid--failed .history-grid-row {
  /* ACTIONS lane widened to 248px so the common 3-item row ("Retry X" + Edit + ⋯) stays on
     one line; crowded rows ("Finish YouTube Upload" + "Retry X" + Edit + ⋯) wrap cleanly. */
  grid-template-columns: 30px minmax(0, 1.5fr) 128px minmax(0, 1.1fr) 248px;
  column-gap: 16px;
}

/* Match the Successful tab row size exactly (was condensed: 3px/10px + 2px gap). */
.history-grid--failed .history-grid-row--data {
  min-height: 0;
  padding: 8px 14px;
  align-items: center;
}

.history-grid--failed .history-grid-body {
  gap: 0;
}

.history-grid--failed .history-cell {
  padding: 0 2px;
  line-height: 1.2;
}

.history-grid--failed .history-video-name {
  font-size: 14px;
  font-weight: 700;
  color: #EAF2FF;
  line-height: 1.2;
}

.history-grid--failed .history-cell--date {
  font-size: 10.5px;
  line-height: 1.2;
}
/* DATE column: pin hard-left in both tabs so every date starts at the same x
   (the optional "Tried" prefix must not shift the date around). */
.history-cell--date {
  justify-self: start;
  text-align: left;
  white-space: nowrap;
}

.history-grid--failed .history-cell--num {
  font-size: 11px;
}

.history-grid--failed .hrc-plat-status {
  font-size: 11px;
  gap: 3px;
}

.history-grid--failed .hrc-vi {
  font-size: 10.5px;
}

.history-cell--date .history-date-attempted,
.history-cell--date .history-date-when {
  display: inline;
}
.history-date-attempted {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(224, 96, 96, 0.88);
  line-height: 1.3;
  margin-right: 6px;
}
.history-date-when {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.history-platforms--failed {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}
.history-platforms--failed .hrc-plat-status {
  margin-right: 0;
}

.history-grid--failed .history-actions--failed {
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: flex-end;
  overflow: visible;
  container-type: normal;
  padding: 0;
}
.history-grid--failed .history-cell--actions {
  /* min-width:0 lets the 248px grid track BOUND the button group so .fp-actions wraps to a
     second line instead of spilling left over the platform pills. overflow stays visible so
     the "⋯" more-menu dropdown can still escape the cell. */
  overflow: visible;
  min-width: 0;
}
.history-grid--failed .history-cell--platforms {
  min-width: 0;
  overflow: hidden;
}
.history-grid--failed .history-actions--failed .hrc-action-btn {
  height: 24px;
  padding: 0 7px;
  font-size: 10.5px;
  white-space: nowrap;
}

.history-grid--failed .history-actions--failed .qi-more-btn {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
}

/* Posted tab - success pills should read clearly, not queue-style dimmed */
.history-grid .qi-plat-col--posted {
  opacity: 1;
  font-weight: 600;
}
.history-grid .qi-plat-col--youtube.qi-plat-col--posted {
  color: var(--platform-youtube) !important;
  background: var(--platform-youtube-bg);
  border-color: var(--platform-youtube-border);
}
.history-grid .qi-plat-col--instagram.qi-plat-col--posted {
  color: var(--platform-instagram) !important;
  background: var(--platform-instagram-bg);
  border-color: var(--platform-instagram-border);
}
.history-grid .qi-plat-col--tiktok.qi-plat-col--posted {
  color: var(--platform-tiktok) !important;
  background: var(--platform-tiktok-bg);
  border-color: var(--platform-tiktok-border);
}
/* Posted Facebook chip keeps Facebook blue (rule was missing -> FB rendered muted gray). */
.history-grid .qi-plat-col--facebook.qi-plat-col--posted {
  color: var(--platform-facebook) !important;
  background: var(--platform-facebook-bg);
  border-color: var(--platform-facebook-border);
}
/* Failed / did-not-publish platform in a History row: the initials KEEP their own
   platform color (pass or fail) - ONLY the red ✕ marks the failure. A mixed row still
   reads at a glance which target needs attention, via the glyph rather than a red chip. */
.history-grid .qi-plat-col--failed {
  opacity: 1;
  font-weight: 600;
}
.history-grid .qi-plat-col--failed .qi-plat-icon--fail { color: #E05C5C; }
/* Manual-upload-required (gated YouTube pending Google verification) — light blue, NOT a failure. */
.history-grid .qi-plat-col--manual {
  color: #74B4FF !important;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.34);
  opacity: 1;
  font-weight: 600;
}
/* Platform Readiness badge on a scheduled queue pill (Manual upload required / Sandbox only / etc.). */
.qi-plat-rbadge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  vertical-align: middle;
  background: rgba(96, 165, 250, 0.14);
  color: #60A5FA;
  white-space: nowrap;
}
/* Checkmark inherits the pill color (no green). */
.history-grid .qi-plat-col--posted .qi-plat-icon--ok {
  opacity: 0.95;
  color: #60A5FA;   /* consistent blue success check across queue + history (not platform-tinted, never green) */
}
/* Clickable platform badge: the badge itself opens the post (no separate link). */
.history-grid .qi-plat-col--link {
  cursor: pointer;
  text-decoration: none;
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}
.history-grid .qi-plat-col--link:hover {
  filter: brightness(1.12);
  border-color: currentColor;
}
.history-grid .qi-plat-col--link:focus-visible {
  outline: 2px solid #5BC8FF;
  outline-offset: 2px;
}
/* External-link affordance: tucked away until hover/focus to keep rows calm. */
.history-grid .qi-plat-col--link .qi-plat-ext {
  display: inline-flex;
  align-items: center;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .14s ease, opacity .14s ease, margin-left .14s ease;
}
.history-grid .qi-plat-col--link:hover .qi-plat-ext,
.history-grid .qi-plat-col--link:focus-visible .qi-plat-ext {
  max-width: 14px;
  margin-left: 3px;
  opacity: 0.9;
}
.history-grid .qi-plat-col--link .ext-link-icon { display: block; }
.history-cell--views .hrc-views-none {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.9;
}

.history-grid-row--head {
  margin-bottom: 4px;
  min-height: auto;
  padding: 0 14px;
  border: none;
  background: transparent;
}

/* Tight, square table rows matching the Dashboard preview tables. */
.history-grid-row--data,
.history-queue-row {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(140, 170, 220, 0.14);
  border-radius: 0;
  padding: 8px 14px;
  min-height: 0;
  transition: background 0.12s;
  user-select: none;
}
.history-grid-body .history-grid-row--data:last-child,
.history-grid-body .history-queue-row:last-child { border-bottom: none; }
.history-grid-row--data:hover,
.history-queue-row:hover {
  background: rgba(120, 150, 210, 0.06);
}

.history-cell {
  min-width: 0;
  overflow: hidden;
  padding: 0 8px;
  box-sizing: border-box;
  line-height: 1.3;
}

.history-grid-row--head .history-cell {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7FA3C8;
  white-space: nowrap;
  background: transparent !important;
  border: none;
  box-shadow: none;
}

.history-grid-row--head .history-cell--num {
  text-align: right;
}

.history-grid:not(.history-grid--failed) .history-grid-row--head .history-cell--video,
.history-grid:not(.history-grid--failed) .history-cell--video {
  text-align: left;
}

.history-grid:not(.history-grid--failed) .history-grid-row--head .history-cell--date,
.history-grid:not(.history-grid--failed) .history-cell--date {
  text-align: left;
}

.history-grid:not(.history-grid--failed) .history-grid-row--head .history-cell--platforms,
.history-grid:not(.history-grid--failed) .history-cell--platforms {
  text-align: left;
}

.history-grid:not(.history-grid--failed) .history-grid-row--head .history-cell--views,
.history-grid:not(.history-grid--failed) .history-cell--views {
  text-align: left;
  justify-content: flex-start;
  justify-items: start;
}
/* Views read straight + flush-left across EVERY row/variant (failed + posted), so the
   IG/YT/TT counts line up vertically no matter the row width or status. */
.history-cell--views { text-align: left !important; justify-content: flex-start !important; justify-items: start !important; }
/* Wrap (don't clip) when YT/IG/FB tokens exceed the column - a long "unavailable"
   token must drop to the next line, never get cut off mid-word (e.g. "FB unavailai"). */
.history-cell--views .hrc-vi-row { justify-content: flex-start !important; width: 100%; flex-wrap: wrap; row-gap: 2px; }

.history-grid:not(.history-grid--failed) .history-grid-row--head .history-cell--actions {
  text-align: left;
}

.history-grid--failed .history-grid-row--head .history-cell--actions {
  text-align: right;
}

.history-cell--num {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  font-size: 11.5px;
  color: #7D8494;
  font-weight: 600;
}

.history-video-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #A8B8CE;
}

.history-cell--date {
  font-weight: 500;
  white-space: nowrap;
  color: #A8B8CE;
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-platforms {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  width: auto;
}

.history-cell--views {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  font-size: 12px;
}

.history-cell--actions {
  overflow: visible;
}

.history-grid:not(.history-grid--failed) .history-cell--actions {
  overflow: visible;
}

.history-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  overflow: visible;
  container-type: inline-size;
}
@container (max-width: 320px) {
  .history-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}
.history-actions .hrc-action-btn,
.history-actions .hrc-repost-wrap {
  flex-shrink: 0;
  max-width: 100%;
  margin-left: 0;
}
.history-actions .hrc-action-btn {
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
}
.history-actions .hrc-repost-toggle { min-width: 76px; }

.history-actions--failed {
  flex-wrap: nowrap;
  gap: 6px;
  overflow: visible;
  justify-content: flex-end;
  align-items: center;
  padding: 2px 0;
  max-width: none;
}

.history-grid--failed .history-actions--failed .hrc-more-wrap {
  flex-shrink: 0;
}

.history-video-btn {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}
.history-video-btn:hover .history-video-name {
  color: var(--accent);
}

.history-issue-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.history-issue-btn,
.history-issue-line {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 11.5px;
  line-height: 1.35;
  color: #C06868;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-issue-btn:hover,
.history-issue-line:hover {
  color: #E08080;
  text-decoration: underline;
}
.history-cell--issue {
  padding-top: 2px;
  padding-bottom: 2px;
}

.hrc-filename {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}
.hrc-issue-label {
  font-size: 12px;
  color: #C06868;
  font-weight: 500;
}

/* Platform chips - 24px height, pill shape */
.hrc-chip-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.hrc-chip {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
}
.hrc-chip--youtube   { background: var(--platform-youtube-bg);   color: var(--platform-youtube);   border: 1px solid var(--platform-youtube-border); }
.hrc-chip--instagram { background: var(--platform-instagram-bg); color: var(--platform-instagram); border: 1px solid var(--platform-instagram-border); }
.hrc-chip--tiktok    { background: var(--platform-tiktok-bg);    color: var(--platform-tiktok);    border: 1px solid var(--platform-tiktok-border); }
.hrc-chip--issue     { background: rgba(220,60,60,.08);   color: #D07070; border: 1px solid rgba(220,60,60,.16); }
.hrc-chip--reconnect { background: rgba(93,169,255,.10);  color: #5DA9FF; border: 1px solid rgba(93,169,255,.22); }

/* Views cells */
.hrc-views-num     { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.hrc-views-pending { font-size: 12px; color: var(--text-muted); }

/* Inline platform status items (Issues rows) */
.hrc-pi              { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-muted); margin-right: 8px; white-space: nowrap; }
.hrc-pi--youtube     { color: var(--platform-youtube); }
.hrc-pi--instagram   { color: var(--platform-instagram); }
.hrc-pi-ok           { color: #60A5FA; font-weight: 700; }
.hrc-pi-fail         { color: #C06868; font-weight: 700; }

/* Clean per-platform pass/fail chips in Failed rows */
.hrc-plat-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-right: 10px; white-space: nowrap; }
.hrc-plat-status--ok   { color: #60A5FA; }
.hrc-plat-status--fail { color: #C06868; }
.hrc-plat-status-icon  { font-size: 11px; }
.hrc-plat-status-name  { font-size: 11px; opacity: 0.8; }

/* Repost dropdown on Posted rows */
.hrc-repost-wrap  { position: relative; display: inline-block; }
.hrc-repost-menu  { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 40;
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.30); min-width: 240px; overflow: hidden; }
.hrc-repost-menu.open { display: block; }
.hrc-repost-sep {
  height: 1px;
  margin: 4px 10px;
  background: var(--border-strong);
}
.hrc-repost-opt { display: block; width: 100%; padding: 9px 14px; text-align: left;
  font-size: 13px; color: var(--text-secondary); background: none; border: none; cursor: pointer; transition: background 0.12s; }
.hrc-repost-opt:hover { background: var(--accent-surface); color: var(--text); }
/* Platform repost options carry their brand color (matches the badge palette). */
.hrc-repost-opt--instagram { color: var(--platform-instagram); font-weight: 600; }
.hrc-repost-opt--youtube   { color: var(--platform-youtube); font-weight: 600; }
.hrc-repost-opt--tiktok    { color: var(--platform-tiktok); font-weight: 600; }
.hrc-repost-opt--instagram:hover { background: var(--platform-instagram-bg); color: var(--platform-instagram); }
.hrc-repost-opt--youtube:hover   { background: var(--platform-youtube-bg); color: var(--platform-youtube); }
.hrc-repost-opt--tiktok:hover    { background: var(--platform-tiktok-bg); color: var(--platform-tiktok); }
.hrc-repost-opt--facebook  { color: var(--platform-facebook, #1877F2); font-weight: 600; }
.hrc-repost-opt--facebook:hover  { background: var(--platform-facebook-bg, rgba(24,119,242,0.12)); color: var(--platform-facebook, #1877F2); }
.hrc-repost-opt--pinterest  { color: var(--platform-pinterest, #E60023); font-weight: 600; }
.hrc-repost-opt--pinterest:hover  { background: var(--platform-pinterest-bg, rgba(230,0,35,0.12)); color: var(--platform-pinterest, #E60023); }
.hrc-repost-opt--disabled,
.hrc-repost-opt:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.hrc-repost-opt--disabled:hover,
.hrc-repost-opt:disabled:hover {
  background: transparent;
  color: var(--text-muted);
}
.hrc-repost-toggle { min-width: 90px; justify-content: center; }
.hrc-action-btn--ghost { background: none; border-color: rgba(140,170,220,0.14); color: var(--text-muted); font-size: 14px; padding: 0 8px; letter-spacing: 1px; }
/* Inline views items */
.hrc-vi-row          { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hrc-vi              { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.hrc-vi--youtube     { color: var(--platform-youtube); }
.hrc-vi--instagram   { color: var(--platform-instagram); }
.hrc-vi--tiktok      { color: var(--platform-tiktok); }
.hrc-vi--facebook    { color: var(--platform-facebook); }
.hrc-vi--pinterest   { color: var(--platform-pinterest); }

/* ── Pinterest platform styling (siblings of the facebook/tiktok rules; one block
   since CSS is global). Canonical Pinterest = pink/magenta #f472b6. ───────────── */
.platform--pinterest { color: var(--platform-pinterest); background: var(--platform-pinterest-bg); border-color: var(--platform-pinterest-border); }
.qi-plat-col--pinterest { background: var(--platform-pinterest-bg); color: var(--platform-pinterest); border-color: var(--platform-pinterest-border); }
.qi-col--platforms .qi-plat-col--pinterest { background: var(--platform-pinterest-bg); border-color: var(--platform-pinterest-border); color: var(--platform-pinterest); }
.history-grid .qi-plat-col--pinterest.qi-plat-col--posted { color: var(--platform-pinterest) !important; background: var(--platform-pinterest-bg); border-color: var(--platform-pinterest-border); }
/* Failed Pinterest: keep the berry IDENTITY pill, but the X stays RED (status). So a
   failed PT chip reads as Pinterest + needs-attention, never identical to a failed YT. */
.history-grid .qi-plat-col--pinterest.qi-plat-col--failed { color: var(--platform-pinterest) !important; background: var(--platform-pinterest-bg); border-color: var(--platform-pinterest-border); }
.history-grid .qi-plat-col--pinterest.qi-plat-col--failed .qi-plat-icon--fail { color: #E05C5C; }
.bulk-plat-chip--pinterest { color: var(--platform-pinterest); background: var(--platform-pinterest-bg); border-color: var(--platform-pinterest-border); }
.up-plat--pinterest { color: var(--platform-pinterest); background: var(--platform-pinterest-bg); border: 1px solid var(--platform-pinterest-border); }
.up-plat--threads { color: #BCC8DA; background: rgba(188,200,218,0.14); border: 1px solid rgba(188,200,218,0.34); }
.hrc-view-link--pinterest { color: var(--platform-pinterest); }
.hrc-chip--pinterest { background: var(--platform-pinterest-bg); color: var(--platform-pinterest); border: 1px solid var(--platform-pinterest-border); }
.pstat--pinterest { background: var(--platform-pinterest-bg); color: var(--platform-pinterest); border-color: var(--platform-pinterest-border); }
.fp-pill--fail.fp-pill--pinterest { background: rgba(244,114,182,0.15); color: #F4A1C9; border-color: rgba(244,114,182,0.34); }
.fp-pill--ok.fp-pill--pinterest { background: rgba(244,114,182,0.09); color: #DDA0C2; border-color: rgba(244,114,182,0.20); }
/* Threads + Facebook fp-pill variants (were missing - fell back to the generic blue ok/fail). */
.fp-pill--fail.fp-pill--facebook { background: rgba(91,157,248,0.15); color: #A8C9FB; border-color: rgba(91,157,248,0.38); }
.fp-pill--ok.fp-pill--facebook   { background: rgba(91,157,248,0.09); color: #9FBDE8; border-color: rgba(91,157,248,0.22); }
.fp-pill--fail.fp-pill--threads  { background: rgba(188,200,218,0.15); color: #BCC8DA; border-color: rgba(188,200,218,0.34); }
.fp-pill--ok.fp-pill--threads    { background: rgba(188,200,218,0.09); color: #AEB9CB; border-color: rgba(188,200,218,0.22); }
.dash-perf-k--pin { color: var(--platform-pinterest); }
.dash-perf-v.dash-perf-v--pin { color: var(--platform-pinterest); }
.conn-platform-icon.pinterest { background: transparent; }
.conn-platform-icon.threads   { background: transparent; border: none; overflow: hidden; }
.hrc-view-link--tiktok { color: var(--platform-tiktok); }
.hrc-view-note       { color: var(--text-muted); cursor: default; }
.hrc-view-note:hover { text-decoration: none; }
.hrc-vi-val          { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.hrc-vi-na           { font-size: 12px; color: #7D8494; font-weight: 400; cursor: help; }
.hrc-vi-sep          { color: var(--text-muted); opacity: 0.35; font-size: 11px; user-select: none; }
.hrc-views-none      { font-size: 11px; color: var(--text-muted); opacity: 0.45; }
.hrc-views-unavail   { font-size: 12px; color: #7D8494; font-weight: 400; cursor: help; }
.hrc-vi-val--unavail { color: #7D8494; font-weight: 400; cursor: help; }
.hrc-fp-stat-val--unavail { cursor: help; }
/* Sticky last-known views: subtle "~" so the number reads as carried-forward, not live. */
.hrc-vi-val--stale   { cursor: help; }
.hrc-vi-stale        { color: #7D8494; opacity: 0.7; margin-left: 1px; font-size: 11px; }
.hrc-final-synced    { display: inline; font-size: 10px; color: var(--text-muted); opacity: 0.5; margin-left: 6px; white-space: nowrap; }
/* View-count trend: sparkline + signed delta (views over time). No green — up=blue, down=red. */
.hrc-trend           { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.hrc-trend-delta     { font-size: 10.5px; font-weight: 700; white-space: nowrap; letter-spacing: .2px; }
.hrc-trend-delta--up   { color: #60A5FA; }
.hrc-trend-delta--down { color: #F87171; }
.hrc-views-pending   { font-size: 10.5px; color: var(--text-muted); opacity: 0.5; }
.hrc-views-na        { font-size: 10.5px; color: var(--text-muted); opacity: 0.4; }
.hrc-td--views-inline { white-space: nowrap; }

/* In-row action buttons - pill shape */
.hrc-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,.28);
  background: rgba(8,18,50,.65);
  color: rgba(122,171,255,.80);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
  white-space: nowrap;
  margin-left: 6px;
  box-sizing: border-box;
}
.hrc-action-btn:hover          { border-color: rgba(59,130,246,.55); color: #A8D4FF; background: rgba(8,18,50,.85); }
.hrc-action-btn--primary       { background: rgba(30,55,140,.50); border-color: rgba(59,108,255,.45); color: #7AABFF; }
.hrc-action-btn--primary:hover { background: rgba(30,55,140,.70); border-color: rgba(59,108,255,.70); color: #A8D4FF; }
.hrc-action-btn--fix           { background: rgba(37,99,235,.14); border-color: rgba(96,165,250,.45); color: #9EC5FF; }
.hrc-action-btn--fix:hover     { background: rgba(37,99,235,.22); border-color: rgba(147,197,253,.70); color: #D8E8FF; }
.hrc-action-btn--fix-conn      { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(93,169,255,.40); background: rgba(20,40,75,.55); color: #5DA9FF; font-size: 12px; font-weight: 500; cursor: pointer; margin-top: 8px; transition: border-color .14s, color .14s; }
.hrc-action-btn--fix-conn:hover { border-color: rgba(93,169,255,.70); color: #7DB9FF; }
.hrc-action-btn--dismiss       { background: none; border-color: rgba(255,107,107,0.18); color: rgba(255,140,140,0.6); }
.hrc-action-btn--dismiss:hover { background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.38); color: #FF8C8C; }

.hrc-empty-tab {
  padding: 40px 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.hrc-purge-note { display: none; }

/* ── Fix panel - right-side slide-in drawer ───────────────────────────────── */
.hrc-fix-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 200;
}
.hrc-fix-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--surface-raised);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,.45);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.22,.6,.36,1);
}
.hrc-fix-panel--open { transform: translateX(0); }

.hrc-fp-header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.hrc-fp-filename {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 28px;
}
.hrc-fp-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.hrc-fp-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: background .13s, color .13s;
}
.hrc-fp-close:hover { background: rgba(255,255,255,.07); color: var(--text); }

.hrc-fp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 12px;
  min-height: 0;
}
.hrc-fp-footer {
  flex-shrink: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hrc-fp-footer .hrc-action-btn {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.hrc-fp-section           { margin-bottom: 24px; }
.hrc-fp-section--sep      { padding-top: 14px; border-top: 1px solid var(--border); }
.hrc-fp-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.hrc-lifecycle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hrc-lifecycle-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.hrc-lifecycle-row:last-child { border-bottom: none; }
.hrc-lifecycle-label { color: var(--text-secondary); font-weight: 500; }
.hrc-lifecycle-when { color: var(--text-muted); font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.queue-sub-posting { color: #a0b4ff; }
.queue-sub-repost { color: #7BC4FF; }
.queue-sub-retry { color: #C084FC; }
.hrc-fp-plat-row          { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hrc-fp-plat-status       { font-size: 12px; color: #60A5FA; font-weight: 500; }
.hrc-fp-status            { font-size: 12px; font-weight: 600; }
.hrc-fp-status--issue     { color: #C06868; }
.hrc-fp-status--reconnect { color: #5DA9FF; }

.hrc-fp-fail-block {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.hrc-fp-fail-body {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 6px;
  margin-bottom: 4px;
}
.hrc-fp-raw {
  font-size: 11px;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  color: var(--text-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 4px 8px;
  margin-top: 4px;
  word-break: break-all;
}
.hrc-fp-tech { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Issue drawer - new clean format */
.hrc-fp-issue-block  { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.hrc-fp-issue-block:last-of-type { border-bottom: none; }
.hrc-fp-issue-title  { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.hrc-fp-issue-label  { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; margin-top: 10px; }
.hrc-fp-issue-text   { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.hrc-fp-posted-note  { font-size: 13px; color: #60A5FA; padding: 4px 0; }

/* Platform status icons - Failed tab rows */
.hrc-ps-row      { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.hrc-ps-icon     { font-size: 13px; font-weight: 700; width: 16px; text-align: center; }
.hrc-ps-ok       { color: #60A5FA; }
.hrc-ps-fail     { color: #E05C5C; }
.hrc-ps-name                { font-size: 12.5px; color: var(--text-secondary); min-width: 76px; display: inline-block; }
.hrc-ps-name--youtube       { color: var(--platform-youtube); }
.hrc-ps-name--instagram     { color: var(--platform-instagram); }

/* Per-platform views cell */
.hrc-vr-row   { display: flex; align-items: baseline; gap: 6px; padding: 1px 0; }
.hrc-vr-label { font-size: 12px; color: var(--text-muted); }
.hrc-vr-count { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.hrc-vr-dash  { font-size: 12px; color: var(--text-muted); }
.hrc-vr-na    { font-size: 12px; color: var(--text-muted); font-style: italic; }

.hrc-fp-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.hrc-fp-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 50px;
}
.hrc-fp-stat-val            { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.hrc-fp-stat-val--muted     { font-weight: 400; font-style: italic; color: var(--text-muted); }

.hrc-fp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

@media (max-width: 700px) {
  .hrc-fix-panel  { width: 100%; max-width: 100%; }
}

/* ── Settings: subnav tabs ───────────────────────────────────────────────── */
.settings-subnav {
  display: flex;
  gap: 28px;
  padding: 22px 32px 0;
  border-bottom: 1px solid rgba(96, 140, 190, 0.18);
  margin: 0 0 24px;
  overflow-x: auto;
}

.settings-tab-btn {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 0 0 16px;
  font-size: 15px;
  font-weight: 650;
  color: #9FB1C7;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
  flex-shrink: 0;
}
.settings-tab-btn:hover  { color: var(--text-secondary); }
.settings-tab-btn.active { color: #E7F0FF; border-bottom-color: #4F8CFF; }

/* Tab panes */
.stab-pane        { display: none; }
.stab-pane.active { display: block; }

/* Content Setup tab - two-column grid */
.content-setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.setup-card--full { grid-column: 1 / -1; }

/* Content Setup: three separate management cards (no spreadsheet dividers).
   Desktop 3-up, tablet 2-up, mobile 1-up. */
.content-setup-intro {
  margin-bottom: 14px;
}
.content-setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;   /* equal-height cards so empty-state buttons line up */
}
.content-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
}
/* Top row: title + count on the left, primary add button pinned right. */
.content-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.content-card-headings { min-width: 0; }
.content-card-title { font-size: 15px; font-weight: 700; color: #9EC5FF; }
.bulk-modal .form-label { color: #9EC5FF; }   /* bulk-upload labels in pale blue (scoped) */
.content-card-count { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.content-card-head .btn { flex-shrink: 0; white-space: nowrap; }
.content-card-list { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.content-card-list .settings-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--border-faint, rgba(96,165,250,0.10));
}
.content-card-list .settings-row:last-child { border-bottom: none; }
.content-card-list .settings-empty { padding: 8px 0; font-size: 12.5px; }
/* Usage-context / hashtag preview: allow up to 2 lines so it stays readable,
   then clamp (no single-line ellipsis that hides everything). */
.content-card-list .settings-row-sub {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .content-setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .content-setup-grid { grid-template-columns: 1fr; }
}

/* ── Content Library: education + clarity pass ───────────────────────────── */
/* Slim "How this works" strip above the three cards. */
.content-howto {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding: 11px 16px; margin-bottom: 16px;
  background: rgba(18,40,72,0.45);
  border: 1px solid rgba(96,165,250,0.12);
  border-radius: 12px;
}
.content-howto-item { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12.5px; line-height: 1.4; }
.content-howto-key { font-weight: 800; color: #cbd7ea; }
.content-howto-val { color: #8fa1b8; }

/* Per-card explanation under the title; count drops below it as secondary context. */
.content-card-desc { font-size: 13px; color: #8fa1b8; margin-top: 3px; line-height: 1.4; }
.content-card-count { order: 3; }

/* Rows: name on top, muted context under it; dot aligns with the name line. */
.content-card-list .content-row { align-items: flex-start; }
.content-card-list .content-row .cc-dot,
.content-card-list .content-row .settings-row-dot { margin-top: 5px; }
.content-card-list .content-row .settings-row-actions { margin-top: 1px; }
.content-card-list .content-row .settings-row-name { font-weight: 700; }
.hset-tagpreview { color: #7d8da3; }
.hset-tagcount { color: #9dbfe0; font-weight: 700; }

/* Beginner-friendly empty state (no empty box). */
/* Empty state fills the card so its "+ Add" button pins to the bottom and lines up
   across cards regardless of how much description text sits above it. */
.content-empty { padding: 10px 0 8px; flex: 1 1 auto; display: flex; flex-direction: column; }
.content-empty-title { font-size: 13.5px; font-weight: 700; color: #cbd7ea; }
.content-empty-body { font-size: 12.5px; color: #8fa1b8; line-height: 1.5; margin: 5px 0 14px; max-width: 34ch; }
.content-empty .btn { margin-top: auto; align-self: flex-start; }

/* Scheduling hint tying the library back to the posting workflow. */
.content-schedule-hint {
  margin-top: 16px; font-size: 12.5px; color: #7d8da3; line-height: 1.5;
}

/* ── Phase 4: schedule modal posting preview + readiness checklist ───────── */
.post-preview {
  margin-top: 16px; padding: 14px 16px;
  background: rgba(18,40,72,0.45); border: 1px solid rgba(96,165,250,0.14);
  border-radius: 12px;
  /* Stack the split based on THIS block's own width, not the viewport - in the
     standard Schedule-a-Video layout the preview sits in the narrow Posting Setup
     rail, where a viewport media query never fires. */
  container-type: inline-size;
}
.post-preview-title {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #60A5FA; margin-bottom: 10px;
}
.post-preview-split {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(148px, 210px);
  gap: 12px 20px;
  align-items: start;
}
.post-preview-meta { min-width: 0; }
.post-preview-checklist {
  min-width: 0;
  border-left: 1px solid rgba(96,165,250,0.12);
  padding-left: 16px;
}
/* Narrow container: stack the preview rows + checklist instead of squeezing the
   values into a near-zero column (which rendered text one platform per line and
   clipped the readiness checklist at the modal edge). Keyed to the preview's own
   width so it stacks inside the narrow Posting Setup rail and stays side-by-side
   in the full-width Quick Post / Edit layouts. */
@container (max-width: 460px) {
  .post-preview-split { grid-template-columns: 1fr; }
  .post-preview-checklist {
    border-left: none;
    border-top: 1px solid rgba(96,165,250,0.12);
    padding-left: 0;
    padding-top: 12px;
  }
}
/* Fallback for engines without container queries: stack on a narrow viewport. */
@supports not (container-type: inline-size) {
  @media (max-width: 620px) {
    .post-preview-split { grid-template-columns: 1fr; }
    .post-preview-checklist {
      border-left: none;
      border-top: 1px solid rgba(96,165,250,0.12);
      padding-left: 0;
      padding-top: 12px;
    }
  }
}
.pp-rows { display: flex; flex-direction: column; gap: 6px; }
.pp-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.3; }
.pp-k { flex: 0 0 92px; color: #7d8da3; font-weight: 600; }
.pp-v { color: #cbd7ea; font-weight: 600; min-width: 0; word-break: break-word; }
.pp-v--missing { color: #7d8da3; font-weight: 500; font-style: italic; }
.post-checklist-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #9dbfe0; }
.post-checklist-title--ready { color: #60A5FA; }   /* calm green only when ready */
.pp-checks { display: flex; flex-direction: column; gap: 6px; }
.pp-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.3; }
.pp-check-mark {
  flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; margin-top: 1px;
}
.pp-check--ok .pp-check-mark { background: rgba(127,200,160,0.18); color: #60A5FA; }
.pp-check--ok .pp-check-text { color: #aebfd4; }
.pp-check--warn .pp-check-mark { background: rgba(96,165,250,0.16); color: #9dbfe0; }
.pp-check--warn .pp-check-text { color: #8fa1b8; }
/* Muted recommendation (Pinterest optional items) — clearly NOT a blocker. */
.pp-check--muted .pp-check-mark { background: rgba(140,163,184,0.10); color: #7E93AE; font-weight: 700; }
.pp-check--muted .pp-check-text { color: #6f8299; }

/* Pinterest-first Quick Post: hide the generic IG/YouTube content flow so the Pin composer stands
   alone (Video → Pin Details → Pinterest Preview). Reversible — the class is only on the modal while
   Pinterest is the sole platform. */
.schedule-modal.pin-only-mode #edit-fg-title,
.schedule-modal.pin-only-mode #edit-fg-caption,
.schedule-modal.pin-only-mode #edit-fg-hashtags,
.schedule-modal.pin-only-mode #fg-yt-privacy,
.schedule-modal.pin-only-mode .platform-preset-select,
.schedule-modal.pin-only-mode .platform-preset-hint { display: none !important; }

/* In-modal posting status bar (above the footer during Post Now). */
.modal-posting-status {
  display: flex; align-items: center; gap: 12px;
  margin: 0 26px 14px; padding: 12px 16px; border-radius: 12px;
  background: rgba(18,40,72,0.6); border: 1px solid rgba(96,165,250,0.20);
}
.modal-posting-status[hidden] { display: none; }
/* Consistent with the app's toast palette: blue success, calm rose error - no green. */
.modal-posting-status--success { border-color: rgba(79,141,255,0.35); background: rgba(15,27,56,0.72); }
.modal-posting-status--error   { border-color: rgba(96,165,250,0.34); background: rgba(20,35,63,0.72); }
.modal-posting-status--info    { border-color: rgba(96,165,250,0.30); background: rgba(15,27,56,0.6); }
.modal-posting-status--attention { border-color: rgba(96,165,250,0.34); background: rgba(15,27,56,0.66); }
.mps-icon--info { background: rgba(96,165,250,0.18); color: #9EC5FF; font-style: normal; }
.mps-dot { width: 9px; height: 9px; border-radius: 50%; background: #5BC8FF; flex-shrink: 0; animation: posting-pulse 1.2s ease-in-out infinite; }
/* The Post Now button pulses while it works ("Preparing.../Finalizing...") so a disabled
   button still reads as actively in progress. Override the dimmed disabled look. */
.btn--working { opacity: 1 !important; animation: btn-working-pulse 1.1s ease-in-out infinite; }
@keyframes btn-working-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(147,197,253,0.0); filter: brightness(1); }
  50%      { box-shadow: 0 0 0 6px rgba(147,197,253,0.35); filter: brightness(1.15); }
}
.mps-icon { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.mps-icon--ok  { background: rgba(79,141,255,0.18); color: #74B4FF; }
.mps-icon--err { background: rgba(204,118,118,0.18); color: #E0A3A3; }
.mps-text { flex: 1; min-width: 0; }
.mps-title { font-size: 13.5px; font-weight: 700; color: #EAF2FF; }
.mps-sub { font-size: 12.5px; color: #9AAEC6; margin-top: 2px; line-height: 1.35; }
.mps-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* On-brand failed-banner buttons (never stark white): Retry = calm blue accent,
   View Details = subtle dark ghost - matching the rest of the TRESSO UI. */
.mps-actions .mps-btn-retry {
  background: rgba(96,165,250,0.16);
  border: 1px solid rgba(96,165,250,0.45);
  color: #BBD7FF;
}
.mps-actions .mps-btn-retry:hover { background: rgba(96,165,250,0.26); }
.mps-actions .mps-btn-details {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.mps-actions .mps-btn-details:hover { background: rgba(255,255,255,0.08); }

/* Scheduler helper line under the Queue status bar */
.queue-sched-note {
  margin: 6px 0 2px;
  font-size: 12.5px;
  color: var(--text-secondary, #9fb0c9);
  line-height: 1.5;
}
.queue-sched-note--warn { color: #93A6C4; }

/* Campaign color swatches */
.camp-color-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: border-color 0.12s;
  flex-shrink: 0;
}
.camp-color-swatch--none { background: rgba(140,163,184,0.25); }
.camp-color-swatch--blue   { background: #3B82F6; }
.camp-color-swatch--violet { background: #8B5CF6; }
.camp-color-swatch--rose   { background: #F43F5E; }
.camp-color-swatch--slate  { background: #7C8BA3; }
/* Legacy colors (retained so existing campaigns still render; not selectable). */
.camp-color-swatch--purple { background: #A855F7; }
.camp-color-swatch--green  { background: #6366F1; }
.camp-color-swatch--gold   { background: #C084FC; }
.camp-color-swatch--coral  { background: #F97316; }
.camp-color-swatch--teal   { background: #8B5CF6; }
.camp-color-swatch--active { border-color: #fff; }
/* Small color dot for the Settings campaign list */
.cc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
.cc-dot--blue   { background: #6490CC; }
.cc-dot--violet { background: #A99AD6; }
.cc-dot--rose   { background: #CC93A8; }
.cc-dot--slate  { background: #9AAABB; }
.cc-dot--purple { background: #A070CC; }
.cc-dot--green  { background: #54B878; }
.cc-dot--gold   { background: #C4A840; }
.cc-dot--coral  { background: #C88050; }
.cc-dot--teal   { background: #48A090; }
.camp-default-badge {
  font-size: 10px; font-weight: 600; color: #60A5FA;
  background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.25);
  border-radius: 4px; padding: 1px 5px; margin-left: 6px;
  vertical-align: middle;
}
@media (max-width: 900px) {
  .content-setup-grid { grid-template-columns: 1fr; }
}

/* Posting Defaults - title+caption row, hashtag row */
@media (max-width: 900px) {
  .pd-title-caption-row,
  .pd-hashtag-row {
    flex-direction: column !important;
  }
  .pd-title-caption-row > .setup-card {
    flex: 1 1 auto !important;
  }
}

/* Card section header */
.settings-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}

/* Compact settings list rows */
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 24px;
  border-top: 1px solid var(--border);
}
.settings-row:first-child { border-top: none; }

.settings-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.settings-row-main  { flex: 1; min-width: 0; }

.settings-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-row-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-row-cat {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-high);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Row action buttons - focus/active above neighbors; queue rows keep actions visible */
.settings-row {
  position: relative;
  isolation: isolate;
  z-index: 1;
  overflow: hidden;
}
.queue-row:not(.queue-item) {
  position: relative;
  isolation: isolate;
  z-index: 1;
  overflow: hidden;
}
.queue-item.queue-row {
  position: relative;
  isolation: isolate;
  z-index: 1;
  overflow: visible;
}
.queue-row.qi:has(.qi-more-menu.open),
.queue-item.qi.queue-row:has(.qi-more-menu.open) {
  overflow: visible;
  z-index: 4;
}
.queue-row:focus-within,
.settings-row:focus-within,
.queue-row:has(.qi-more-menu.open),
.settings-row:has(.more-menu.open) {
  z-index: 4;
  overflow: visible;
}

.queue-actions,
.qi-acts,
.settings-row-actions {
  position: relative;
  z-index: 1;
}

.queue-actions button,
.qi-acts button,
.settings-row-actions button {
  position: relative;
  z-index: 2;
}

.queue-actions button:focus,
.queue-actions button:active,
.qi-acts button:focus,
.qi-acts button:active,
.settings-row-actions button:focus,
.settings-row-actions button:active {
  z-index: 3;
}

.queue-actions button:focus-visible,
.qi-acts button:focus-visible,
.settings-row-actions button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.5);
}

.queue-actions .btn:active,
.qi-acts .btn:active,
.qi-acts .qi-btn:active,
.qi-acts .qi-more-btn:active,
.settings-row-actions .btn:active {
  transform: none;
}

.setup-card:has(.more-menu.open),
.setup-card:has(.qi-more-menu.open) {
  overflow: visible;
  z-index: 2;
}

.settings-empty {
  padding: 16px 24px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ── Help and Support settings tab ──────────────────────────────────────── */
.hst-intro { margin-bottom: 14px; }
.hst-intro-title { font-size: 17px; font-weight: 700; color: #60A5FA; }
.hst-flow-rec { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #60A5FA; background: rgba(96,165,250,0.14); border: 1px solid rgba(96,165,250,0.30); vertical-align: middle; }
.hst-intro-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

.hst-flow-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 900px) { .hst-flow-row { grid-template-columns: 1fr; } }
.hst-flow-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px 14px;
  /* Icon + title share the top row; desc and button span full width beneath. */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
}
.hst-flow-icon  { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.hst-flow-title { grid-column: 2; grid-row: 1; }
.hst-flow-desc  { grid-column: 1 / -1; }
.hst-flow-btn   { grid-column: 1 / -1; justify-self: end; }
.hst-flow-card--accent {
  background: rgba(79,141,255,.07);
  border-color: rgba(79,141,255,.34);
}
/* Small accent mark, top-left of each card. */
.hst-flow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(148,163,184,0.10);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.hst-flow-icon--tessa {
  background: rgba(79,141,255,0.14);
  border-color: rgba(79,141,255,0.34);
  color: #8FB6FF;
}
.hst-flow-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.hst-flow-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  flex: 1;
}
/* Buttons hug their label - not full-width form fields. */
.hst-flow-btn { align-self: flex-start; width: auto; margin-top: 4px; }
.hst-flow-examples {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.hst-flow-examples span {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hst-flow-examples span:hover { opacity: .8; }
.hst-flow-email { font-size: 11.5px; }
.hst-flow-email a { color: var(--accent); text-decoration: none; }
.hst-flow-email a:hover { text-decoration: underline; }
/* Popular Help Topics: light section, no heavy container. 4-up x 2 rows. */
.hst-report-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; margin-bottom: 14px;
  background: rgba(96,165,250,0.06);
  border: 1px solid rgba(96,165,250,0.22); border-radius: 12px;
}
.hst-report-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.hst-report-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; max-width: 540px; }
.hst-report-btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) { .hst-report-card { flex-direction: column; align-items: flex-start; } }
.hst-diag-toggle { display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px 14px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; cursor: pointer; }
.hst-diag-toggle input { margin-top: 2px; flex-shrink: 0; }

/* Owner Admin: Support dashboard */
.as-head { margin-bottom: 14px; }
.as-title { font-size: 16px; font-weight: 700; color: var(--text); display: block; }
.as-sub, .as-parser-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.as-empty, .as-dist-empty { font-size: 13px; color: var(--text-muted); padding: 14px 0; }
.as-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.as-kpi { background: var(--card, #0F2342); border: 1px solid var(--border, rgba(148,163,184,0.10)); border-radius: 12px; padding: 12px 14px; }
.as-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.as-kpi-val { font-size: 22px; font-weight: 700; color: var(--text); margin-top: 4px; }
.as-kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.as-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.as-panel { background: var(--card, #0F2342); border: 1px solid var(--border, rgba(148,163,184,0.10)); border-radius: 12px; padding: 14px 16px; }
.as-panel-t { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.as-dist-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.as-dist-k { color: var(--text-b, #C9D2E3); min-width: 90px; flex-shrink: 0; }
.as-dist-bar { flex: 1; height: 6px; background: rgba(148,163,184,0.12); border-radius: 999px; overflow: hidden; }
.as-dist-fill { display: block; height: 100%; background: #60A5FA; border-radius: 999px; }
.as-dist-n { color: var(--text); font-weight: 600; min-width: 28px; text-align: right; }
.as-pv { color: var(--text); font-weight: 600; }
.as-parser { background: var(--card, #0F2342); border: 1px solid var(--border, rgba(148,163,184,0.10)); border-radius: 12px; padding: 14px 16px; }
.as-textarea { width: 100%; min-height: 120px; margin-top: 10px; background: rgba(0,0,0,0.18); border: 1px solid var(--border, rgba(148,163,184,0.14)); border-radius: 8px; color: var(--text); font-family: monospace; font-size: 12px; padding: 10px; resize: vertical; }
.as-parser-actions { display: flex; gap: 8px; margin-top: 10px; }
.as-report-output { margin-top: 14px; }
.as-parsed-sec { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.as-parsed-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-b, #C9D2E3); line-height: 1.7; }

.hst-topics-section { margin-bottom: 14px; }
.hst-topics-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.hst-topics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
@media (max-width: 900px)  { .hst-topics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .hst-topics-grid { grid-template-columns: 1fr; } }
/* Lighter, smaller topic pills. */
.hst-topic-card {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(148,163,184,0.10);
  border-radius: 7px;
  padding: 6px 11px;
  text-align: left;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-secondary);
  transition: border-color .12s, color .12s, background .12s;
  font-family: inherit;
}
.hst-topic-card:hover {
  border-color: rgba(79,141,255,.28);
  background: rgba(79,141,255,.04);
  color: var(--text);
}

/* System Information: collapsed, lightweight panel (not a big stacked card). */
.hst-sysinfo {
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.015);
}
.hst-sysinfo-summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
}
.hst-sysinfo-summary::-webkit-details-marker { display: none; }
.hst-sysinfo-summary::before {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform .15s;
  flex-shrink: 0;
}
.hst-sysinfo[open] .hst-sysinfo-summary::before { transform: rotate(45deg); }
.hst-sysinfo-body { padding: 2px 16px 14px; }

/* ── Posting Defaults tab ────────────────────────────────────────────────── */

/* Schedule rows */
.pd-sched-list   { padding: 4px 0 0; }
.pd-sched-row    {} /* uses .settings-row */
.pd-move-btn     { min-width: 28px; padding: 4px 6px !important; font-size: 13px !important; }
.pd-delete-row-btn { color: var(--error) !important; }
.pd-delete-row-btn:hover { background: var(--error-surface) !important; border-color: rgba(224,96,96,.3) !important; }

/* Apply-defaults confirmation preview */
.pd-apply-preview {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-apply-row   { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
.pd-apply-label { flex-shrink: 0; width: 68px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 10px; letter-spacing: .05em; }
.pd-apply-value { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }

/* Posting rhythm presets */
.sched-rhythm-card { overflow: hidden; }
.sched-rhythm-header { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.sched-rhythm-helper {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 640px;
}
.sched-rhythm-tz {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
}
.sched-rhythm-tz-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sched-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 14px;
  padding: 10px 24px 8px;
}
.sched-preset-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.sched-preset-card.is-selected {
  border-color: rgba(79,141,255,.6);
  box-shadow: 0 0 0 1px rgba(79,141,255,.25);
}
.sched-preset-accent {
  height: 4px;
  width: 100%;
}
.sched-preset-card--gold .sched-preset-accent   { background: #E8A66A; }
.sched-preset-card--blue .sched-preset-accent   { background: #4F7DFF; }
.sched-preset-card--rose .sched-preset-accent   { background: #D47AFF; }
.sched-preset-card--purple .sched-preset-accent { background: #38BDF8; }
.sched-preset-card--slate .sched-preset-accent  { background: #5EEAD4; }
.sched-preset-card--gold .sched-preset-title   { color: #E8A66A; }
.sched-preset-card--blue .sched-preset-title   { color: #4F7DFF; }
.sched-preset-card--rose .sched-preset-title   { color: #D47AFF; }
.sched-preset-card--purple .sched-preset-title { color: #38BDF8; }
.sched-preset-card--slate .sched-preset-title  { color: #5EEAD4; }
.sched-preset-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 100%; }
.sched-preset-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sched-preset-selected-pill {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(79,141,255,.16); border: 1px solid rgba(79,141,255,.4); color: #93c5fd;
  margin-top: 2px;
}
.sched-preset-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sched-preset-actions .sched-reset-btn {
  background: transparent;
  opacity: .85;
}
.sched-preset-theme {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sched-preset-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin: 0;
}
.sched-preset-best {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}
.sched-preset-best span {
  font-weight: 600;
  color: var(--text-muted);
}
.sched-card-windows { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }

/* ── Posting Windows 4-column grid ─────────────────────────────────────── */
.sched-win-section { display: flex; flex-direction: column; gap: 6px; }
.sched-win-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
}
.sched-win-hdr,
.sched-win-row {
  display: grid;
  grid-template-columns: 62px 100px 78px 1fr;
  gap: 0 6px;
  align-items: center;
}
.sched-win-hdr {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.25);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sched-win-table { display: flex; flex-direction: column; }
.sched-win-row {
  font-size: 11.5px; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sched-win-row:last-child { border-bottom: none; }
.sched-win-day  { font-weight: 600; color: var(--text-secondary); }
.sched-win-name { font-size: 11px; color: var(--text-muted); }
.sched-win-span { font-size: 11px; color: var(--text-muted); }

/* Selected time selector */
.sched-slot-time-sel { display: flex; flex-direction: column; gap: 3px; }
.sched-slot-sel {
  font-size: 11.5px;
  padding: 5px 28px 5px 8px;
  border-radius: 6px;
  width: 100%;
}
.sched-slot-custom-input {
  font-size: 11px; font-family: inherit;
  padding: 3px 4px; border-radius: 5px; width: 100%;
  background: rgba(255,255,255,.05); border: 1px solid rgba(79,141,255,.4);
  color: var(--text);
}
.sched-slot-warn {
  font-size: 9.5px; color: var(--warning); font-style: italic; line-height: 1.3;
}
.sched-current-preset {
  font-size: 12px; color: var(--text-muted);
  padding: 8px 24px 0;
}
.sched-current-preset strong { color: var(--text-secondary); font-weight: 600; }
.sched-card-chips { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sched-slot-group {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.05);
}
.sched-slot-group--removed { opacity: .55; }
.sched-slot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.sched-slot-day { font-size: 11px; font-weight: 700; color: var(--text); }
.sched-slot-window { font-size: 11px; color: var(--text-muted); }
.sched-slot-remove, .sched-slot-restore {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
}
.sched-slot-restore { color: var(--accent); font-weight: 600; }
.sched-time-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-time-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.sched-time-chip:hover:not(:disabled) { border-color: rgba(79,141,255,.35); color: var(--text); }
.sched-time-chip.is-selected {
  background: rgba(79,141,255,.18);
  border-color: rgba(79,141,255,.5);
  color: #dbeafe;
}
.sched-time-chip.is-readonly { cursor: default; opacity: .7; }
.sched-use-btn { margin-top: auto; align-self: flex-end; }
.sched-preview {
  margin: 8px 24px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(79,141,255,.06);
  border: 1px solid rgba(79,141,255,.16);
}
.sched-preview--empty {
  color: var(--text-muted);
  font-size: 12.5px;
  background: rgba(255,255,255,.02);
  border-color: var(--border);
}
.sched-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.sched-preview-list {
  margin: 0;
  padding-left: 18px;
  /* Compact multi-column grid so a week of days fills ~2 rows instead of 6 single-file
     bullet lines. Auto-fits 2-4 columns by width. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 20px;
  font-size: 13px;
  color: var(--text-secondary);
}
.sched-rhythm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 16px 24px 22px;
}
.sched-rhythm-actions-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
/* Save Schedule is the isolated primary action at the lower-right of the box. */
.sched-save-btn { margin-left: auto; }
.sched-rhythm-future-hint {
  font-size: 11px;
  color: var(--text-muted);
}
.sched-disclaimer-cell {
  font-family: inherit;
  font-style: normal;
  font-size: 12px;
  color: #8BAAC4;
  line-height: 1.5;
  padding: 12px 14px;
  background: rgba(15, 35, 66, 0.45);
  border: 1px solid rgba(96, 165, 250, 0.12);
  border-radius: 12px;
  align-self: start;
}
.sched-custom-panel { margin-top: 8px; }
.sched-custom-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sched-custom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.12);
}
.sched-custom-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sched-customize-panel {
  margin: 0 24px 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.sched-customize-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.sched-customize-title { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }

/* More-menu dropdown */
.more-menu-wrap { position: relative; }

.more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface-high);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 4px 0;
  min-width: 130px;
  z-index: 300;
  box-shadow: var(--shadow-card);
}
.more-menu.open { display: block; }

.more-menu-item {
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: background .1s, color .1s;
}
.more-menu-item:hover              { background: rgba(255,255,255,.05); color: var(--text); }
.more-menu-item--danger            { color: #C07070; }
.more-menu-item--danger:hover      { background: rgba(220,60,60,.08); color: #E08080; }

/* Placeholder panes (Account, etc.) */
.stab-placeholder {
  padding: 56px 0;
  text-align: center;
}
.stab-placeholder-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.stab-placeholder-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Quiet page refresh control (topbar) ───────────────────────────────────── */
.topbar-refresh-wrap {
  display: flex;
  align-items: center;
  margin-right: 8px;
}
/* The "Updated ..." status IS the refresh control: a quiet utility affordance,
   icon inline with the text. No separate competing Refresh button. */
.topbar-refresh-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 6px;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
  color: #8BAAC4;
  transition: color .14s ease, background .14s ease;
}
.topbar-refresh-inline:hover { color: #C8DAEE; background: rgba(255,255,255,0.04); }
.topbar-refresh-inline:disabled { opacity: .55; cursor: default; }
.topbar-updated {
  font-size: 11.5px;
  color: inherit;
  white-space: nowrap;
}
.topbar-refresh-icon { transition: transform .2s ease; color: inherit; }
.topbar-refresh-inline:hover .topbar-refresh-icon { transform: rotate(-40deg); }
.topbar-refresh-inline.is-refreshing .topbar-refresh-icon {
  animation: tb-refresh-spin .7s linear infinite;
}
.topbar-refresh-inline.is-refreshing:hover .topbar-refresh-icon { transform: none; }
@keyframes tb-refresh-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .topbar-refresh-label { display: none; }
  .topbar-updated { display: none; }
}

/* ── Account and Billing ─────────────────────────────────────────────────── */
.billing-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1180px;
}

.billing-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 14px;
  background: rgba(59, 108, 255, 0.08);
  border: 1px solid rgba(96, 140, 255, 0.22);
  border-radius: var(--r);
  font-size: 12.5px;
  color: #9abfff;
  line-height: 1.45;
}

.billing-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.billing-badge--active    { background: var(--status-active-bg); color: var(--status-active); border: 1px solid var(--status-active-border); }
.billing-badge--checking  { background: rgba(59, 108, 255, 0.08); color: #8BA8E8; border: 1px solid rgba(96, 140, 255, 0.18); }
.billing-badge--emphasis  { background: rgba(120, 100, 255, 0.12); color: #B8AEFF; border: 1px solid rgba(140, 120, 255, 0.28); }
.billing-badge--muted     { background: rgba(140, 170, 220, 0.06); color: var(--text-muted); border: 1px solid var(--border); }

.billing-field { min-width: 0; }
.billing-field-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.billing-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.billing-field-grid .billing-field + .billing-field { margin-top: 0; }
.billing-field-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.billing-field-val {
  display: block;
  font-size: 13px;
  color: #DCE8F4;
  line-height: 1.4;
  word-break: break-word;
}
.billing-val-strong { color: #EAF1FF; font-weight: 600; }
.billing-val-muted { color: var(--text-muted); font-style: normal; }

/* Cancellation is destructive: a quiet rose caution button - distinct from Refresh
   Status, never purple/blue, signals caution without alarming. */
.btn-cancel-sub {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  color: #60A5FA;
  border: 1px solid rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.08);
}
.btn-cancel-sub:hover {
  color: #DBEAFE;
  border-color: rgba(96, 165, 250, 0.75);
  background: rgba(251, 113, 133, 0.16);
}

/* Post to more platforms modal */
.pm-filename { font-size: 13px; font-weight: 700; color: #8FC0FF; margin-bottom: 14px; word-break: break-word; }
.pm-missing { font-size: 13px; color: #5DA9FF; background: rgba(93, 169, 255,0.07); border: 1px solid rgba(93, 169, 255,0.22); border-radius: 10px; padding: 12px 14px; line-height: 1.5; }
.pm-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 16px 0 8px; }
.pm-plats { display: flex; flex-direction: column; gap: 6px; }
.pm-plat { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(140,170,220,0.16); }
.pm-plat input { accent-color: #3B82F6; flex-shrink: 0; }
.pm-plat--done { color: var(--text-muted); cursor: not-allowed; opacity: 0.7; }
.pm-already { margin-left: auto; font-size: 11px; font-weight: 700; color: #5FD08A; background: rgba(94,158,126,0.12); border: 1px solid rgba(94,158,126,0.26); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pm-none { font-size: 13px; color: var(--text-muted); }
.pm-caption, .pm-hashtags, .pm-when { width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.22); border: 1px solid rgba(140,170,220,0.16); border-radius: 9px; color: #EAF1FF; font-family: inherit; font-size: 13.5px; padding: 9px 11px; }
.pm-caption { resize: vertical; line-height: 1.5; }
.pm-error { font-size: 12.5px; color: #E08A8A; background: rgba(220,60,60,0.06); border: 1px solid rgba(220,60,60,0.16); border-radius: 8px; padding: 8px 11px; margin-top: 14px; }
.pm-actions { display: flex; gap: 10px; margin-top: 18px; }
.pm-actions .btn { flex: 1; }
.hrc-repost-subhead { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px 4px; }
.hrc-repost-opt--more { font-weight: 700; }

/* Summary card */
.billing-summary {
  padding: 12px 14px 14px;
}
.billing-summary-head { margin-bottom: 10px; }
.billing-summary-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: #E4EDF8;
  letter-spacing: -0.01em;
}
.billing-summary-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 560px;
}
.billing-status-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 12px;
  background: rgba(7, 17, 31, 0.45);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.4;
}
.billing-status-item { white-space: nowrap; }
.billing-status-key { color: var(--text-muted); font-weight: 600; }
.billing-status-val { color: #EAF1FF; font-weight: 600; }
.billing-status-val--muted { color: var(--text-secondary); font-weight: 500; }
.billing-status-val--active { color: var(--status-active); font-weight: 700; }
/* Brief highlight on the Connections area when onboarding sends the user there. */
@keyframes qsConnectPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(96,165,250,0.35); } 50% { box-shadow: 0 0 0 2px rgba(96,165,250,0.75), 0 0 28px rgba(96,165,250,0.42); } }
.qs-connect-highlight { animation: qsConnectPulse 1.3s ease-in-out 2; border-radius: 14px; }
.billing-status-sep { color: var(--text-muted); opacity: 0.45; }

/* Two-column grid */
.billing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* Cards in the same row stretch to equal height for clean left/right symmetry
     (Subscription == License, Download == Backup), regardless of content length. */
  align-items: stretch;
}
/* When the top-row cards stretch, pin their footer actions to the bottom so the
   extra height reads as intentional spacing, not an empty gap. */
.billing-card:not(.billing-card--compact) .billing-card-foot { margin-top: auto; }

.billing-card {
  padding: 11px 13px 13px;
  display: flex;
  flex-direction: column;
}
.billing-card--compact { padding-bottom: 11px; }
.billing-card-lead--strong {
  font-weight: 600;
  color: #DCE8F4;
  margin-bottom: 4px;
}
.billing-info-panel {
  padding: 10px 12px;
  background: rgba(59, 108, 255, 0.06);
  border: 1px solid rgba(96, 140, 255, 0.16);
  border-radius: var(--r-sm);
}
.billing-info-panel-title {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #DCE8F4;
  line-height: 1.45;
}
.billing-info-panel-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.billing-info-panel--compact {
  margin-top: 10px;
}
.billing-card-copy {
  margin-bottom: 8px;
}
.billing-card-copy .billing-card-lead {
  margin-bottom: 4px;
}
.billing-card-copy .billing-card-lead:last-child {
  margin-bottom: 0;
}
.billing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.billing-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #7FB0FF;
}
.billing-card-body { flex: 0 1 auto; }
.billing-card-lead {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.billing-calm-notice {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.billing-card-foot {
  /* All card actions sit pinned to the lower-right corner of the card. */
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
}
.billing-card--compact .billing-card-foot {
  padding-top: 8px;
  border-top: none;
}

/* Cancel subscription: secondary / destructive-muted - clearly LOWER emphasis
   than the primary Refresh Status button (no bright-blue, no dark patterns). */
.billing-cancel-sub {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 600;
}
.billing-cancel-sub:hover {
  background: var(--error-surface);
  color: var(--error);
  border-color: rgba(224, 96, 96, 0.30);
}

/* License card footer: keep the one button on the left, group the plain text
   links on the right with comfortable spacing so the three actions don't
   visually compete. */
.billing-card-foot--license { justify-content: space-between; gap: 14px; }
.billing-text-links {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.billing-card--compact .billing-card-head { margin-bottom: 6px; padding-bottom: 6px; }
.billing-card--download .billing-card-foot--actions {
  padding-top: 16px;
  border-top: none;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

/* Download and Setup - account-recovery state + inline email field */
.dl-license-state { margin-top: 6px; font-size: 13px; }
.dl-state-row { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-secondary); }
.dl-state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto; }
.dl-state-dot--ok { background: #5C957E; box-shadow: 0 0 0 3px rgba(92,149,126,0.18); }
.dl-state-email { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.dl-muted { color: var(--text-muted); }
.dl-resend-inline { margin-top: 10px; }
.dl-resend-label { display: block; font-size: 12.5px; font-weight: 600; color: #9EC5FF; margin-bottom: 6px; }
.dl-resend-row { display: flex; gap: 8px; align-items: center; }
.dl-resend-input { flex: 1; height: 40px; min-width: 0; }
.dl-support-fallback { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.dl-support-fallback a { color: #9EC5FF; }

.billing-checking-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  background: rgba(59, 108, 255, 0.06);
  border: 1px solid rgba(96, 140, 255, 0.16);
  border-radius: var(--r-sm);
}
.billing-checking-line--late { color: var(--text-secondary); }
.billing-checking-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: billing-pulse 1.2s ease-in-out infinite;
}
@keyframes billing-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.billing-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  row-gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.billing-checklist--two-col { grid-template-columns: 1fr 1fr; }
.billing-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.billing-checklist li::before {
  content: '✓';
  color: #8BA8E8;
  font-weight: 700;
  flex-shrink: 0;
}

.billing-fine {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.billing-setup-notice {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.billing-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 2px;
  font-size: 12px;
}
.billing-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
}
.billing-footer-links a:hover { color: var(--accent); }
.billing-footer-sep { color: var(--text-muted); opacity: 0.45; }

.diag-dev-notice {
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #A8C4FF;
  background: rgba(59, 108, 255, 0.1);
  border: 1px solid rgba(96, 140, 255, 0.22);
  border-radius: var(--r-sm);
}

@media (max-width: 960px) {
  .billing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .billing-field-row { grid-template-columns: 1fr; }
  .billing-checklist,
  .billing-checklist--two-col { grid-template-columns: 1fr; }
  .billing-card--download .billing-card-foot--actions { flex-wrap: wrap; }
}

/* ── Email Alerts settings ───────────────────────────────────────────────── */
.email-section-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 14px 0 8px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.email-section-label:first-of-type { border-top: none; margin-top: 4px; }
.email-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.email-field { display: flex; flex-direction: column; gap: 4px; }
.email-field--wide { grid-column: span 1; }
.email-ssl-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); margin-top: 6px; cursor: pointer;
}
.form-label-note { font-weight: 400; color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.email-alert-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.email-alert-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.025); cursor: pointer;
}
.email-alert-row:hover { background: rgba(255,255,255,.04); }
.email-alert-title { font-size: 13px; font-weight: 600; color: var(--text); }
.email-alert-desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.email-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* Alert cards - 3-column row on desktop */
.email-alert-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.email-alert-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 13px;
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  cursor: pointer;
  height: 100%;
  box-sizing: border-box;
  transition: background .12s, border-color .12s;
}
.email-alert-card:hover { background: rgba(255,255,255,.045); border-color: var(--border-strong); }
.email-alert-card:has(input:checked) { border-color: rgba(96,165,250,0.30); }
.email-alert-body { flex: 1; min-width: 0; }
.email-alert-card > input[type="checkbox"] { margin-top: 1px; flex-shrink: 0; }
/* Subtle status icon badge per alert type. */
.email-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}
.email-alert-badge--fail { color: #E58A98; background: rgba(217,128,144,0.12); border: 1px solid rgba(217,128,144,0.28); }
.email-alert-badge--warn { color: #5DA9FF; background: rgba(93, 169, 255,0.12);  border: 1px solid rgba(93, 169, 255,0.28); }
.email-alert-badge--conn { color: #67A8E8; background: rgba(91,158,224,0.12);  border: 1px solid rgba(91,158,224,0.28); }
.email-alert-cards { align-items: stretch; }
@media (max-width: 780px) { .email-alert-cards { grid-template-columns: 1fr; } }
.email-save-status { font-size: 12px; color: var(--text-muted); }

/* Email Health Check (Notifications) */
.notif-health { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.notif-health-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.notif-health-k { color: var(--text-muted); }
.notif-health-v { font-weight: 700; }
.notif-health-v.is-ok    { color: #5C957E; }
.notif-health-v.is-bad   { color: #CC7676; }
.notif-health-v.is-muted { color: var(--text-muted); }
.notif-health-when { font-weight: 500; color: var(--text-muted); font-size: 11.5px; margin-left: 4px; }
.email-gmail-tip {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.55;
  padding: 10px 12px; border-radius: 7px;
  background: rgba(255,255,255,.02); border: 1px solid var(--border);
}
.email-gmail-tip code { font-size: 11px; color: var(--text-secondary); background: rgba(255,255,255,.06); padding: 1px 4px; border-radius: 3px; }

/* Email notifications redesign */
.notif-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
  align-items: stretch;
}
.notif-top-card {
  padding: 18px 22px;
  margin-bottom: 0;
}
.notif-top-card .setup-card-desc { max-width: none; }
.notif-top-card .form-control { width: 100%; max-width: none; }
.notif-email-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 780px) {
  .notif-top-row { grid-template-columns: 1fr; }
}
.notif-summary-list { list-style: none; padding: 6px 0 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.notif-summary-list li { font-size: 13px; color: var(--text-secondary); }
.notif-summary-none { color: var(--text-muted) !important; font-style: italic; }
.notif-unsaved-tag {
  display: none;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #93c5fd;
  background: rgba(79, 141, 255, 0.14);
  border: 1px solid rgba(79, 141, 255, 0.32);
  border-radius: 999px;
  padding: 2px 9px;
}
.notif-unsaved-tag--visible { display: inline-block; }

.notif-no-email-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  background: #111C2F;
  border: 1px solid rgba(245, 185, 66, 0.28);
  border-radius: var(--r);
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.notif-no-email-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.notif-no-email-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #D9A441;
  background: rgba(217, 164, 65, 0.08);
  border: 1px solid rgba(217, 164, 65, 0.18);
}
.notif-no-email-icon svg { width: 14px; height: 14px; }
.notif-no-email-title {
  font-size: 13px;
  font-weight: 600;
  color: #8BC7FF;
  line-height: 1.35;
}
.notif-no-email-body {
  font-size: 12.5px;
  color: #9AA8BD;
  line-height: 1.5;
  max-width: 52em;
}
.notif-no-email-banner .btn-primary {
  align-self: flex-start;
  margin-top: 2px;
}
.notif-alerts-email-note {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.notif-alerts-section { padding: 18px 22px; margin-bottom: 16px; }
/* Header row: title + helper on the left, Save Changes pinned top-right. */
.notif-alerts-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.notif-alerts-header-text { min-width: 0; }
.notif-alerts-helper { margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
.notif-alerts-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.notif-dirty-banner {
  display: none;
  margin: -4px 0 12px;
  padding: 8px 12px;
  border-radius: var(--r);
  font-size: 12.5px;
  font-weight: 600;
  color: #93c5fd;
  background: rgba(79, 141, 255, 0.10);
  border: 1px solid rgba(79, 141, 255, 0.28);
}
.notif-dirty-banner--visible { display: block; }
.notif-alerts-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.notif-alerts-preview {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
}
.notif-alerts-preview--dirty {
  border-color: rgba(79, 141, 255, 0.30);
  background: rgba(79, 141, 255, 0.05);
}
.notif-preview-block + .notif-preview-block { margin-top: 12px; }
.notif-preview-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.notif-preview-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.notif-preview-list li {
  font-size: 13px;
  color: var(--text-secondary);
}
.notif-preview-list li::before {
  content: '- ';
  color: var(--text-muted);
}
.notif-preview-none {
  color: var(--text-muted) !important;
  font-style: italic;
}
.notif-preview-none::before { content: '' !important; }
.notif-preview-unsaved {
  display: none;
  margin-top: 12px;
  font-size: 11.5px;
  color: #93c5fd;
  font-weight: 600;
}
.notif-preview-unsaved--visible { display: block; }
/* .setup-card has no padding of its own, so give the accordion comfortable
   breathing room (was cramped flush against the card edges). */
.notif-smtp-accordion { margin-top: 16px; padding: 18px 20px; }
.notif-smtp-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
  padding: 0;
  text-align: left;
}
.notif-smtp-toggle:hover { color: var(--text); }
.notif-smtp-chevron { transition: transform 0.2s; flex-shrink: 0; margin-left: 12px; }
.notif-smtp-toggle.open .notif-smtp-chevron { transform: rotate(180deg); }
.notif-smtp-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; }
.notif-smtp-body { display: none; padding-top: 18px; }
.notif-smtp-body.open { display: block; }

/* ── Cancellation confirmation view ──────────────────────────────────────── */
.canc-confirm {
  max-width: 560px;
  padding: 32px 0 16px;
}
.canc-confirm-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.3;
}
.canc-confirm-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 22px;
}
.canc-confirm-body p { margin: 0 0 10px; }
.canc-confirm-body p:last-child { margin-bottom: 0; }
.canc-confirm-softsave {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  background: rgba(59,108,255,.06);
  border: 1px solid rgba(59,108,255,.14);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 28px;
}
.canc-confirm-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.canc-confirm-support {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Safe (non-destructive) data action button */
.btn-dm-safe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-dm-safe:hover { background: rgba(255,255,255,.05); color: var(--text); }

/* ── Cancellation Feedback ───────────────────────────────────────────────── */
.cancel-reasons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cancel-reason-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .1s;
}
.cancel-reason-row:hover { background: rgba(255,255,255,.04); color: var(--text); }
.cancel-reason-row input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; }

/* ── Settings: Privacy and Data ─────────────────────────────────────────── */
.pd-bucket { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.pd-bucket:last-child { border-bottom: none; }
.pd-bucket-h { font-size: 12.5px; font-weight: 700; color: #93C5FD; margin-bottom: 4px; letter-spacing: .01em; }
.pd-bucket p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.pd-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.pd-row:last-child { border-bottom: none; }
.pd-row-text { display: flex; flex-direction: column; gap: 2px; }
.pd-row-text strong { font-size: 13.5px; color: var(--text); font-weight: 600; }
.pd-row-text span { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.pd-btn { flex-shrink: 0; background: rgba(79,141,255,.12); border: 1px solid rgba(79,141,255,.28); color: #93C5FD; text-decoration: none; display: inline-flex; align-items: center; }
.pd-btn:hover { background: rgba(79,141,255,.18); color: #BFDBFE; }

/* ── Platform State Guide (no-gold palette) ─────────────────────────────────
   Sandbox=blue, Review Pending=slate, Verification Pending=violet, Coming Soon=gray. */
.pstate-chip { display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; border:1px solid transparent; letter-spacing:.01em; }
.pstate-chip--sandbox              { background:rgba(96,165,250,.14);  border-color:rgba(96,165,250,.36);  color:#93C5FD; }
.pstate-chip--review-pending       { background:var(--badge-pending-bg); border-color:var(--badge-pending-bd); color:var(--badge-pending-fg); }  /* light pink (not amber) */
.pstate-chip--verification-pending { background:var(--badge-pending-bg); border-color:var(--badge-pending-bd); color:var(--badge-pending-fg); }  /* light pink (not orange) */
.pstate-chip--coming-soon          { background:rgba(120,140,165,.13); border-color:rgba(120,140,165,.30); color:#9FB3C8; }

.pstate-help { font-size:11.5px; line-height:1.5; color:var(--text-muted); margin-top:5px; padding-left:2px; }
.pstate-help-link { background:none; border:none; padding:0; margin-left:2px; font:inherit; font-size:11.5px; font-weight:600; color:#60A5FA; cursor:pointer; text-decoration:underline; }
.pstate-help-link:hover { color:#93C5FD; }
/* Clickable status value (opens the State Guide). No dotted underline — the pill styling
   carries the affordance; a dotted underline made the status row read as cramped. */
.ags-stateful { cursor:pointer; text-decoration:none; }
.ags-stateful:hover { text-decoration:none; }

.sg-modal { max-width:560px; }
.sg-body { display:flex; flex-direction:column; gap:22px; padding:8px 4px 4px; }
.sg-item { border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:20px 22px; background:rgba(255,255,255,.02); }
.sg-item--focus { border-color:rgba(96,165,250,.45); background:rgba(96,165,250,.05); }
.sg-item .pstate-chip { margin-bottom:16px; }
.sg-rows { display:flex; flex-direction:column; gap:14px; }
.sg-row { display:grid; grid-template-columns:148px 1fr; gap:16px; align-items:start; }
.sg-k { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); padding-top:2px; }
.sg-v { font-size:13px; line-height:1.7; color:var(--text); }
@media (max-width:480px){ .sg-row { grid-template-columns:1fr; gap:5px; } }

/* ── Settings: Data Management - new card grid layout ───────────────────── */
.dm-export-card {
  padding: 16px 0 4px;
}
.dm-export-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.dm-export-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 4px;
}
.dm-export-helper {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.dm-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) { .dm-cards-grid { grid-template-columns: 1fr; } }
.dm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Reset = highest danger, but NOT a different-looking card. Same neutral base as
   the others; severity shown via a subtle red border + a red top-accent line
   (inset box-shadow so it doesn't shift layout) + red title + stronger button. */
.dm-card--reset {
  border-color: rgba(224,96,96,.30);
  box-shadow: inset 0 2px 0 rgba(224,96,96,.55);
}
.dm-card-danger-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E08080;
}
.dm-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.dm-card--reset .dm-card-title { color: var(--error); }
.dm-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}
.dm-card-keeps {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.7;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 2px;
}
.dm-card-keeps span {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10.5px;
}
.dm-card-keeps span::before { content: '✓ '; }
.dm-card-btn { margin-top: 6px; width: fit-content; }

/* ── Settings: Data Management (legacy list layout - keep for compat) ───── */
.dm-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.dm-action:first-of-type { border-top: none; padding-top: 4px; }
.dm-action-info { flex: 1; min-width: 0; }
.dm-action-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.dm-action-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.dm-action--reset .dm-action-title { color: var(--error); }
.dm-action--reset .dm-action-desc  { color: #7A5A5A; }
.btn-dm-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid rgba(224,96,96,.25);
  background: rgba(224,96,96,.08);
  color: #C07070;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-dm-danger:hover { background: rgba(224,96,96,.16); color: #E08080; }
/* Reset button: stronger, filled red (clearly the highest-danger action) - but
   still polished, not a harsh block. The other two stay soft danger-outline. */
.btn-dm-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid rgba(224,96,96,.85);
  background: rgba(214,82,82,.85);
  color: #fff;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-dm-reset:hover { background: rgba(224,96,96,.95); border-color: rgba(224,96,96,1); }

/* Data management confirm modal */
.dm-confirm-phrase {
  display: block;
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 7px 12px;
  margin: 8px 0 16px;
  user-select: all;
}
.dm-confirm-input-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════════════
   QUEUE ITEM - 6-column grid: Select | Order | Video | Scheduled | Platforms | Actions
   (Campaign column removed; campaign now renders as an inline chip under the title.)
   ══════════════════════════════════════════════════════════════════ */
.queue-header,
.queue-list-header,
.queue-row,
.queue-row.qi,
.queue-item.qi {
  display: grid;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Columns SHRINK to fit so the Actions column is ALWAYS on screen and never
     pushed off / clipped (hard rule). Data columns target their desired widths
     (the max) but shrink toward their min when the window is tight; Video is the
     only fr track and absorbs all slack. Actions keeps a safe minimum that fits
     its buttons. Total minimum (~860px) fits any real desktop window. */
  /* Video is the ONLY flexible column (absorbs all surplus into the title area)
     so there is no dead gap; the right-hand columns are sized to hug their
     content. Video min keeps it always listed; Actions fixed stays visible. */
  /* select | order | video(flex) | scheduled(wide, no truncation) |
     platforms | actions(Post Now + more only - slim now that Edit/Pause moved
     into the menu). The freed actions width flows back into Video. */
  /* Video AND Actions both absorb surplus (50/50) so Video no longer hogs all the
     slack and leaves a big dead gap. The Scheduled/Platforms cluster sits closer
     to the post; Actions content stays right-aligned at the edge. */
  grid-template-columns:
    24px
    40px
    minmax(190px, 1fr)
    176px
    minmax(116px, 140px)
    minmax(150px, 1fr);
  column-gap: 12px;
  align-items: center;
}
.queue-header,
.queue-list-header {
  padding: 4px 16px 6px;
  min-height: auto;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.queue-row.qi,
.queue-item.qi {
  /* Tighter, cleaner row density. */
  padding: 8px 16px;
  min-height: 0;
  overflow: visible;
}
#page-queue,
#queue-content {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
#queue-content .queue-list {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.queue-cell:not(.qi-col--actions),
.qlh-col:not(.qlh-col--actions),
.qi-col:not(.qi-col--actions) {
  min-width: 0;
}
.qlh-col {
  display: flex;
  align-items: center;
}
.qlh-col--select { overflow: visible; }
.qlh-col--select .queue-select-all-label { min-width: max-content; overflow: visible; }
.qlh-col--select .queue-select-all-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
}
.qlh-col--scheduled { justify-content: center; }
.qlh-col--platforms { justify-content: flex-start; }
/* No artificial left padding: it pushed Scheduled content out of its own track
   and into neighbours (e.g. "Retry Pending" appearing in the wrong column). */
.qlh-col--scheduled,
.qi-col--scheduled {
  padding-left: 0;
}
/* Fixed tracks govern width now; cells must not impose a larger min-width. */
.qlh-col--scheduled,
.qi-col--scheduled { min-width: 0; }
.qlh-col--platforms,
.qi-col--platforms { min-width: 0; }
.qlh-col--actions { justify-content: flex-end; text-align: right; }
.qlh-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.qi-col--select { display: flex; align-items: center; justify-content: flex-start; }
.qi-col--order {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
.qi-order-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 14px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}
.qi-col--video {
  display: flex;
  flex-direction: row;          /* thumbnail left, title/hashtag stack to its right */
  align-items: flex-start;      /* title sits near the TOP of the thumbnail, reads as one unit */
  gap: 11px;
  overflow: hidden;
  min-width: 0;
}
.queue-video-title,
.qi-title.queue-video-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.queue-campaign,
.queue-campaign-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.queue-scheduled,
.qi-col--scheduled {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;             /* chip + date button stack when both present (e.g. Manual step required) */
  align-items: center;
  justify-content: center;     /* match the centered Scheduled header above */
  gap: 6px;
  /* No overflow:hidden — it clipped the date button to "M…" on chip+date rows. */
}
.qi-col--scheduled .qi-chip {
  flex-shrink: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qi-col--scheduled .qi-date-btn {
  flex: 0 0 auto;              /* never shrink the date button so its text stays whole */
  min-width: 0;
  max-width: 100%;
}
.queue-scheduled .qi-date-btn-text {
  white-space: nowrap;        /* full date text, no ellipsis truncation */
}
.queue-platforms,
.qi-col--platforms {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  min-width: 100px;
  overflow: visible;           /* platform badges have their own non-shrinking lane */
}
.qi-col--platforms .qi-plat-col,
.qi-col--platforms .qi-plat-text {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Queue row Actions cell ONLY (not the shared .queue-actions class, which is
   reused by Content Library / History rows - width:100% there overlapped names). */
.qi-col--actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: visible;
  box-sizing: border-box;
}
.queue-actions .qi-more-wrap {
  flex-shrink: 0;
}
.queue-actions button {
  height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
  flex-shrink: 0;
  white-space: nowrap;
}
.queue-actions .more-button,
.queue-actions .qi-more-btn {
  width: 32px;
  min-width: 32px;
  padding: 0;
  flex-shrink: 0;
}
.qi-video-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.queue-campaign-cell {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.queue-campaign-cell--none {
  /* Muted dash placeholder - quiet, not a repeated "No campaign" label. */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-tertiary, #5d7088);
  opacity: 0.7;
}
.queue-campaign-cell--default { background: rgba(93, 169, 255,0.07);  color: #5DA9FF; border-color: rgba(93, 169, 255,0.18); }
.queue-campaign-cell--blue   { background: rgba(59,130,246,0.07);  color: #6490CC; border-color: rgba(59,130,246,0.18); }
.queue-campaign-cell--violet { background: rgba(139,92,246,0.14); color: #C4B5FD; border-color: rgba(139,92,246,0.34); }
.queue-campaign-cell--rose   { background: rgba(214,178,92,0.14); color: #E8C878; border-color: rgba(214,178,92,0.38); }
.queue-campaign-cell--purple { background: rgba(168,85,247,0.07);  color: #A070CC; border-color: rgba(168,85,247,0.18); }
.queue-campaign-cell--green  { background: rgba(99,102,241,0.07);  color: #54B878; border-color: rgba(99,102,241,0.18); }
.queue-campaign-cell--gold   { background: rgba(192,132,252,0.07);   color: #C4A840; border-color: rgba(192,132,252,0.18); }
.queue-campaign-cell--coral  { background: rgba(249,115,22,0.07);  color: #C88050; border-color: rgba(249,115,22,0.18); }
.queue-campaign-cell--teal   { background: rgba(139,92,246,0.07);  color: #48A090; border-color: rgba(139,92,246,0.18); }
.queue-campaign-cell--slate  { background: rgba(148,163,184,0.08); color: #9AAABB; border-color: rgba(148,163,184,0.20); }

/* Queue campaign multi-select filter */
.queue-campaign-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.queue-cf-wrap { position: relative; }
.queue-cf-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.queue-cf-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-secondary);
  user-select: none;
}
.queue-cf-option:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.queue-cf-option input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.queue-cf-summary {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .queue-list-header { display: none; }
  .queue-item.qi {
    grid-template-columns: 36px 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "select order video actions"
      ". . scheduled scheduled"
      ". . platforms platforms";
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .qi-col--select { grid-area: select; }
  .qi-col--order { grid-area: order; }
  .qi-col--video { grid-area: video; }
  .qi-col--scheduled {
    grid-area: scheduled;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-left: 96px;
  }
  .qi-col--scheduled::before {
    content: 'Scheduled';
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  .qi-col--platforms { grid-area: platforms; padding-left: 2px; }
  .qi-col--actions { grid-area: actions; }
  .queue-item.qi {
    padding-left: 12px;
    padding-right: 12px;
  }
  .queue-campaign-filter { width: 100%; }
  .queue-cf-summary { white-space: normal; }
}
@media (max-width: 640px) {
  .qi-col--platforms { display: none; }
}
.qi-left { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qi-pos  { display: none; }
.qi-title-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow: hidden; align-items: flex-start; }
.qi-date-row  { display: flex; align-items: center; gap: 8px; }
.queue-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow: hidden; }
.qi-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-chips { display: flex; flex-wrap: nowrap; gap: 5px; align-items: center; flex-shrink: 0; }
.qi-chip  {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500; border-radius: 20px;
  padding: 2px 9px; white-space: nowrap; line-height: 1.5;
}
.qi-chip--scheduled { background: var(--success-surface); color: #74B4FF; }
/* Watched-folder import status. Auto-scheduled = calm blue confirm; Needs = red attention prompt. */
.qi-chip--auto  { background: var(--badge-connected-bg); color: var(--badge-connected-fg); border: 1px solid var(--badge-connected-bd); font-weight: 600; }
.qi-chip--needs { background: rgba(248,113,113,0.14); color: #FCA5A5; border: 1px solid rgba(248,113,113,0.36); font-weight: 600; }
/* Transient highlight when "View imported videos" jumps to the just-imported batch. */
.queue-row--just-imported { box-shadow: inset 0 0 0 2px rgba(96,165,250,0.65); background: rgba(59,130,246,0.10) !important; transition: box-shadow 0.3s, background 0.3s; }
/* Paused = active item, intentionally stopped, not broken. Styled as a blue
   gradient pill (chosen brand treatment). */
.qi-chip--paused    { background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%); color: #FFFFFF; border: 1px solid rgba(125, 211, 252, 0.55); font-weight: 600; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28); transition: background 0.2s, box-shadow 0.2s, transform 0.2s; }
.qi-chip--paused:hover { background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.36); transform: translateY(-1px); }
/* Allow multi-word reason in chip - truncate if very long */
.qi-chip--failed          { background: var(--error-surface); color: var(--error); }
.qi-chip--needs-reconnect { background: var(--error-surface); color: var(--error); border: 1px solid rgba(224,96,96,.26); }
.qi-chip--posted    { background: var(--success-surface); color: #74B4FF; }
.qi-chip--nodate    { background: var(--warning-surface); color: var(--warning); }
.qi-chip--meta      { background: rgba(140,163,184,0.10); color: #A8BFD4; border: 1px solid rgba(140,163,184,0.22); font-size: 10.5px; opacity: 1; }
/* Campaign chip - identical weight/size to the hashtag chip (inherits .qi-chip--meta),
   uppercase to match the "GENERAL" target look. Must NOT be heavier than the hashtag chip. */
.qi-chip--campaign  { text-transform: uppercase; letter-spacing: .03em; }
.qi-chip--posting   { background: rgba(99,128,255,.16); color: #a0b4ff; border: 1px solid rgba(99,128,255,.28); animation: posting-pulse 1.4s ease-in-out infinite; }
.qi-chip--now {
  background: rgba(99,128,255,.16);
  color: #a0b4ff;
  border: 1px solid rgba(99,128,255,.28);
  font-weight: 600;
}
.qi-chip--pacing {
  background: rgba(96,165,250,.14);
  color: #8FC0FF;
  border: 1px solid rgba(96,165,250,.30);
  font-weight: 600;
}
.qi-chip--retry {
  background: rgba(192, 132, 252, 0.12);
  color: #60A5FA;
  border: 1px solid rgba(192, 132, 252, 0.28);
  font-weight: 600;
  animation: qi-retry-pending-pulse 2s ease-in-out infinite;
}
@keyframes qi-retry-pending-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.2);
    border-color: rgba(192, 132, 252, 0.28);
  }
  50% {
    box-shadow: 0 0 14px 3px rgba(192, 132, 252, 0.42);
    border-color: rgba(192, 132, 252, 0.58);
    filter: brightness(1.14);
  }
}
.qi-chip--missed    { background: rgba(192, 132, 252, 0.12); color: #C084FC; border: 1px solid rgba(192, 132, 252, 0.45); font-weight: 600; }
.qi-chip--repost    { background: rgba(123, 196, 255, 0.12); color: #7BC4FF; border: 1px solid rgba(123, 196, 255, 0.28); }
.qi-chip--repeat    { background: rgba(86,136,196,0.14); color: #9EC5FF; border: 1px solid rgba(86,136,196,0.40); font-weight: 600; cursor: help; }

/* Reliable custom hover tooltip (replaces flaky native `title`; see initHoverTooltips). */
#app-tip {
  position: fixed;
  z-index: 100000;
  max-width: 280px;
  padding: 8px 11px;
  border-radius: 8px;
  background: #0B1B33;
  color: #E6EEF9;
  border: 1px solid rgba(96,165,250,0.30);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  pointer-events: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Owner / internal test build indicator - a distinct bottom bar, only present when the
   server reports status.ownerBuild (owner build only; never in the customer build). */
#owner-build-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999999;
  background: repeating-linear-gradient(135deg, #7A1020 0 14px, #5E0C18 14px 28px);
  color: #FFE8EC; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; padding: 5px 14px; line-height: 1.35;
  border-top: 1px solid rgba(255,255,255,0.18); box-shadow: 0 -2px 12px rgba(0,0,0,0.45);
  pointer-events: none; user-select: none;
}
/* Missing video file: neutral/quiet - intentionally NOT a platform-failure color
   and NOT alarmist red. Reads as "needs your attention", not "platform rejected it". */
.qi-chip--missing-file { background: rgba(148,163,184,0.12); color: #BCC8D8; border: 1px solid rgba(148,163,184,0.30); font-weight: 600; }
.qi-chip--attn { background: rgba(86,136,196,0.14); color: #9EC5FF; border: 1px solid rgba(86,136,196,0.40); font-weight: 600; }
.qi-chip--partial { background: rgba(59,130,246,0.14); color: #7FB0FF; border: 1px solid rgba(96,165,250,0.40); font-weight: 600; }
@keyframes posting-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}

.qi-sch { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.qi-sch-clock { font-size: 12px; opacity: 0.55; flex-shrink: 0; line-height: 1; }
.qi-sch-date  {
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer; border-bottom: 1px dashed transparent;
  transition: color .12s, border-color .12s;
}
.qi-sch-date:hover { color: var(--text); border-bottom-color: rgba(140,170,220,.3); }
.qi-sch-date--pastdue { color: var(--error); }

/* Date/time compact pill - single clickable control */
.qi-date-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(140,170,220,0.10);
  border-radius: 999px; padding: 2px 10px 2px 7px;
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.qi-date-btn:hover {
  background: rgba(79,141,255,0.10);
  border-color: rgba(79,141,255,0.28);
  color: var(--text);
}
.qi-date-btn-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Popover backdrop */
#qi-dp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(3, 10, 24, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Schedule dialog - centered in the viewport (was anchored to the clicked row,
   which dropped it into the lower-right corner). */
.qi-date-popover {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #0F1D33;
  /* Subtle border + soft glow - no thick neon top border. */
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 14px;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.42),
    0 0 42px rgba(59,130,246,0.14);
  padding: 20px;
  overflow: hidden;
}
.schedule-popover-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
}
.schedule-popover-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  background: #0F1D33;
  border-top: 1px solid rgba(59,99,168,0.5);
}
.recommended-time-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.time-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Brighter so window labels are actually readable. */
  color: rgba(200, 216, 238, 0.62);
  margin-bottom: 6px;
}
.time-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.time-chip {
  appearance: none;
  -webkit-appearance: none;
  background: #0F1D2E;
  border: 1px solid #233A56;
  color: #9CBAD2;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.time-chip:hover {
  border-color: #4F7DFF;
  color: #C8DDEF;
}
.time-chip.selected {
  background: #4F7DFF;
  border-color: #4F7DFF;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(79,125,255,0.45);
}
.qi-dp-title {
  font-size: 13px; font-weight: 700; color: #EAF2FF;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(39,70,111,0.4);
}
.qi-dp-field { margin-bottom: 12px; }
.qi-dp-field:last-of-type { margin-bottom: 0; }
.qi-dp-label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 5px;
}
.qi-dp-input { font-size: 13px; padding: 7px 10px; }
/* Change-schedule validation: inline error + red field + shake to guide the user to the missing field. */
.qi-dp-error { margin-top: 6px; font-size: 12px; font-weight: 600; color: #F87171; }
.qi-dp-input.input-error { border-color: #F87171; box-shadow: 0 0 0 3px rgba(248,113,113,0.18); }
.qi-dp-input.shake { animation: qiDpShake 0.42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes qiDpShake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }

.qi-plats { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 5px; align-items: center; min-width: 0; }
.qi-chip--repeat { white-space: nowrap; }
.qi-plat  {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  white-space: nowrap;
}
.qi-plat--youtube   { color: var(--platform-youtube); }
.qi-plat--instagram { color: var(--platform-instagram); }
/* Status glyph (checkmark / x / pending) - a touch larger with breathing room from
   the platform abbr, vertically centered, subtle hover brighten. Not a button. */
.qi-plat-icon        { font-size: 15px; font-weight: 900; margin-left: 3px; line-height: 1; transition: filter .15s; }
.qi-plat-col:hover .qi-plat-icon { filter: brightness(1.18); }

/* Queue meta grid columns */
.qi-chip-col { display: flex; flex-wrap: nowrap; gap: 5px; align-items: center; min-width: 0; }
.qi-plat-col {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid transparent;
  letter-spacing: 0.03em;
}
.qi-plat-col:empty { display: none; }
.qi-plat-col--campaign {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  font-weight: 700;
}
.qi-plat-col--camp-default,
.qi-plat-col--camp-none {
  background: rgba(93, 169, 255, 0.12);
  color: #F2C14E;
  border-color: rgba(93, 169, 255, 0.30);
}
.qi-plat-col--camp-blue   { background: rgba(59,130,246,0.12);  color: #7AABFF; border-color: rgba(59,130,246,0.28); }
.qi-plat-col--camp-violet { background: rgba(139,92,246,0.18); color: #C4B5FD; border-color: rgba(139,92,246,0.36); }
.qi-plat-col--camp-rose   { background: rgba(244,63,94,0.18); color: #FDA4AF; border-color: rgba(244,63,94,0.36); }
.qi-plat-col--camp-purple { background: rgba(168, 85, 247,0.12);  color: #C490FF; border-color: rgba(168, 85, 247,0.28); }
.qi-plat-col--camp-green  { background: rgba(99,102,241,0.12);  color: #6EE7A0; border-color: rgba(99,102,241,0.28); }
.qi-plat-col--camp-gold   { background: rgba(192,132,252,0.12);    color: #F5D060; border-color: rgba(192,132,252,0.30); }
.qi-plat-col--camp-coral  { background: rgba(249,115,22,0.12);   color: #FBAA72; border-color: rgba(249,115,22,0.28); }
.qi-plat-col--camp-teal   { background: rgba(139,92,246,0.12);  color: #5EEAD4; border-color: rgba(139,92,246,0.28); }
.qi-plat-col--camp-slate  { background: rgba(148,163,184,0.14);  color: #C8D4E4; border-color: rgba(148,163,184,0.30); }
.qi-plat-col--youtube   { background: var(--platform-youtube-bg);   color: var(--platform-youtube);   border-color: var(--platform-youtube-border); }
.qi-plat-col--instagram { background: var(--platform-instagram-bg); color: var(--platform-instagram); border-color: var(--platform-instagram-border); }
/* Threads chip - was missing, so it rendered as plain text next to the colored ones. Uses the
   app's established Threads accent so it's a consistent colored pill like YouTube/IG/Facebook. */
.qi-plat-col--threads   { background: rgba(188,200,218,0.14); color: #BCC8DA; border-color: rgba(188,200,218,0.34); }
.history-grid .qi-plat-col--threads.qi-plat-col--posted { color: #BCC8DA !important; background: rgba(188,200,218,0.14); border-color: rgba(188,200,218,0.34); }
.history-grid .qi-plat-col--threads.qi-plat-col--failed  { color: #BCC8DA !important; background: rgba(188,200,218,0.14); border-color: rgba(188,200,218,0.34); }

/* ── Queue "Platform · State" chips - consistent structure, calm status colors (no gold) ── */
.qi-pchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; line-height: 1.35;
  border: 1px solid transparent; white-space: nowrap;
}
/* Fixed-width abbreviation column so every platform pill (YT/IG/FB/PT/TH) is the same
   width and lines up - "YT" has wider glyphs than "IG"/"FB", so without this the YT pill
   was visibly wider than the rest. Centered so the 2-letter codes stay optically aligned. */
.qi-pchip-name  { font-weight: 800; letter-spacing: .02em; display: inline-block; min-width: 1.55em; text-align: center; }
.qi-pchip-sep   { opacity: .45; font-weight: 600; }
.qi-pchip-state { font-weight: 600; }
/* Per-platform color carries the chip (background tint + border + name color) so a queue/schedule
   "YT/IG/FB/TT/TH/PT · Ready" chip reads its platform at a glance instead of all-blue. The state
   word keeps a calm muted tone (set below) so platform color stays dominant. All six platforms have
   an explicit color - none fall back to the old default blue. */
.qi-pchip--youtube   { background: var(--platform-youtube-bg);   border-color: var(--platform-youtube-border);   color: var(--platform-youtube); }
.qi-pchip--instagram { background: var(--platform-instagram-bg); border-color: var(--platform-instagram-border); color: var(--platform-instagram); }
.qi-pchip--facebook  { background: var(--platform-facebook-bg);  border-color: var(--platform-facebook-border);  color: var(--platform-facebook); }
.qi-pchip--tiktok    { background: var(--platform-tiktok-bg);    border-color: var(--platform-tiktok-border);    color: var(--platform-tiktok); }
.qi-pchip--threads   { background: rgba(188,200,218,0.14);       border-color: rgba(188,200,218,0.34);            color: #BCC8DA; }
.qi-pchip--pinterest { background: var(--platform-pinterest-bg); border-color: var(--platform-pinterest-border); color: var(--platform-pinterest); }
.qi-pchip--youtube .qi-pchip-name   { color: var(--platform-youtube); }
.qi-pchip--instagram .qi-pchip-name { color: var(--platform-instagram); }
.qi-pchip--facebook .qi-pchip-name  { color: var(--platform-facebook); }
.qi-pchip--tiktok .qi-pchip-name    { color: var(--platform-tiktok); }
.qi-pchip--threads .qi-pchip-name   { color: #BCC8DA; }
.qi-pchip--pinterest .qi-pchip-name { color: var(--platform-pinterest); }
/* State word tone (does not override the platform-colored chip / name). */
.qi-pchip--ready   .qi-pchip-state { color: #9DB8FF; }   /* Ready / auto = calm blue */
.qi-pchip--needs   .qi-pchip-state { color: #C7D2E2; }   /* Needs upload = muted slate, NOT amber/red */
.qi-pchip--sandbox .qi-pchip-state { color: #CDB6F2; }   /* Sandbox = neutral purple */
.qi-pchip--pending .qi-pchip-state { color: #AEC2DC; }   /* Verification pending = muted blue-gray */
.qi-pchip--soon    .qi-pchip-state { color: #9AA8BC; }
.qi-pchip--needs[onclick]:hover { filter: brightness(1.12); cursor: pointer; }
.qi-plat-col--facebook { background: var(--platform-facebook-bg); color: var(--platform-facebook); border-color: var(--platform-facebook-border); }
.qi-plat-col--tiktok    { background: var(--platform-tiktok-bg);    color: var(--platform-tiktok);    border-color: var(--platform-tiktok-border); }
.qi-plat-col--posted {
  opacity: 0.5;
  font-weight: 400;
  color: var(--text-muted) !important;
}
.qi-plat-col--posted .qi-plat-icon--ok { opacity: 0.95; }
.qi-plat-icon--ok    { color: #60A5FA; opacity: 0.95; }
.qi-plat-icon--fail  { color: #E05C5C; }
.qi-plat-col--publishing .qi-plat-icon--pending { color: var(--badge-pending-fg); opacity: 0.95; }
.fp-pill--pending { background: var(--badge-pending-bg); color: var(--badge-pending-fg); border: 1px solid var(--badge-pending-bd); }
/* Retry-pending platform in the queue row: the one being retried (others above show posted). */
.qi-plat-col--retrypending {
  color: #E8A66A !important;
  font-weight: 600;
}

.qi-acts .qi-row-act {
  line-height: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qi-acts .qi-row-act:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
.qi-acts .qi-more-btn.qi-row-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  box-sizing: border-box;
}
.qi-col--platforms .qi-plat-col {
  padding: 2px 5px;
  font-size: 9px;
  font-weight: 700;
  min-width: 22px;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.02em;
}
/* Queue retry / partial-failure rows share the canonical pstat chip system. */
.qi-col--platforms .pstat-group { flex-wrap: nowrap; gap: 4px; }
.qi-col--platforms .pstat {
  height: 19px;
  padding: 0 6px;
  gap: 2px;
  font-size: 10px;
}
.qi-col--platforms .pstat-icon { font-size: 14px; margin-left: 2px; }
/* Brighter queue platform pills - the muted 0.16 backgrounds read as "disabled".
   Stronger fill/border and lighter text so IG/YT/TT look active, not greyed out. */
.qi-col--platforms .qi-plat-col--youtube   { background: var(--platform-youtube-bg);   border-color: var(--platform-youtube-border);   color: var(--platform-youtube); }
.qi-col--platforms .qi-plat-col--instagram { background: var(--platform-instagram-bg); border-color: var(--platform-instagram-border); color: var(--platform-instagram); }
.qi-col--platforms .qi-plat-col--facebook  { background: var(--platform-facebook-bg);  border-color: var(--platform-facebook-border);  color: var(--platform-facebook); }
.qi-col--platforms .qi-plat-col--tiktok    { background: var(--platform-tiktok-bg);    border-color: var(--platform-tiktok-border);    color: var(--platform-tiktok); }
.qi-col--platforms .qi-plat-col--threads   { background: var(--platform-threads-bg);   border-color: var(--platform-threads-border);   color: var(--platform-threads); }
.qi-col--platforms .qi-plat-col--pinterest { background: var(--platform-pinterest-bg); border-color: var(--platform-pinterest-border); color: var(--platform-pinterest); }
.qi-btn  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px; font-weight: 500; font-family: inherit;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
  line-height: 1; text-align: center; box-sizing: border-box;
  transition: background .12s, border-color .12s, color .12s;
}
.qi-btn:hover { background: rgba(255,255,255,.09); border-color: var(--border-strong); color: var(--text); }
.qi-btn--primary { background: #142238; border-color: #5B8CFF; color: #5B8CFF; }
.qi-btn--primary:hover { background: #1a2e4a; color: #7AABFF; border-color: #7AABFF; }
.qi-btn--reupload { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.35); color: #BFD6F5; font-weight: 600; }
.qi-btn--reupload:hover { background: rgba(96,165,250,0.20); }
.qi-btn--postnow { background: rgba(37, 76, 160, 0.55); border-color: rgba(96, 165, 250, 0.28); color: #D8E8FF; font-weight: 600; }
.qi-btn--postnow:hover { background: rgba(37, 76, 160, 0.70); border-color: rgba(96, 165, 250, 0.45); color: #E8F2FF; }
/* Working state: cyan color + glow pulse so the user can see the post is
   actively in progress. Stays full-opacity (overrides the disabled dim) and
   non-interactive while it runs. */
.qi-btn--postnow.is-posting,
.qi-acts .qi-row-act.qi-btn--postnow.is-posting {
  opacity: 1 !important;
  pointer-events: none;
  cursor: progress;
  font-weight: 600;
  animation: postnow-working 1.25s ease-in-out infinite;
}
@keyframes postnow-working {
  0%, 100% {
    color: #60A5FA;
    border-color: rgba(96, 165, 250, 0.45);
    background: #132840;
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
  }
  50% {
    color: #BFDBFE;
    border-color: #93C5FD;
    background: #1A3A5C;
    box-shadow: 0 0 13px 1px rgba(96, 165, 250, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qi-btn--postnow.is-posting,
  .qi-acts .qi-row-act.qi-btn--postnow.is-posting { animation: none; color: #93C5FD; border-color: #93C5FD; }
}
.qi-btn--pause {
  background: transparent;
  border-color: rgba(158, 128, 78, 0.34);
  color: rgba(168, 142, 96, 0.82);
  font-weight: 500;
}
.qi-btn--pause:hover {
  background: rgba(158, 128, 78, 0.07);
  border-color: rgba(168, 142, 96, 0.44);
  color: rgba(184, 158, 108, 0.9);
}
.qi-btn--reconnect { background: rgba(93,169,255,.10); border-color: rgba(93,169,255,.28); color: #5DA9FF; }
.qi-btn.troubleshoot-btn { color: #9EC5FF; border: 1px solid rgba(96,165,250,.45); background: rgba(37,99,235,.14); }
.qi-btn.troubleshoot-btn:hover { color: #D8E8FF; border-color: rgba(147,197,253,.7); background: rgba(37,99,235,.22); }
.qi-btn--reconnect:hover { background: rgba(93,169,255,.18); color: #7DB9FF; }

.qi-more-wrap { position: relative; }
.qi-more-btn  {
  font-size: 14px; font-family: inherit; letter-spacing: 2px; line-height: 1;
  padding: 5px 8px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s;
}
.qi-more-btn:hover { background: rgba(255,255,255,.09); color: var(--text-secondary); }
.queue-actions .qi-btn.qi-row-act {
  height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
}
.queue-actions .qi-more-btn.qi-row-more,
.queue-actions .more-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
  letter-spacing: 1px;
}
.qi-more-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 5px);
  background: var(--surface-high); border: 1px solid var(--border-strong);
  border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,.4);
  min-width: 168px; z-index: 300; padding: 4px 0;
}
.qi-more-sep {
  height: 1px;
  margin: 4px 10px;
  background: var(--border-strong);
}
.qi-more-menu.open { display: block; }
.qi-more-item {
  display: block; width: 100%; text-align: center; font-family: inherit;
  padding: 6px 14px; font-size: 12.5px; background: none; border: none;
  cursor: pointer; color: var(--text); white-space: nowrap;
  transition: background .1s;
}
.qi-more-item:hover { background: rgba(255,255,255,.05); }
/* Disabled menu item: muted + non-clickable, but still READABLE so the reason
   ("Edit unavailable — already posted") explains why the action is unavailable. */
.qi-more-item:disabled,
.qi-more-item--disabled {
  color: var(--text-muted, #7595AC);
  cursor: default;
  opacity: 0.85;
}
.qi-more-item:disabled:hover,
.qi-more-item--disabled:hover { background: none; }
.qi-more-item--disabled { font-size: 11.5px; white-space: normal; line-height: 1.3; }
.qi-more-danger     { color: #FF6B6B !important; }
.qi-selected,
.queue-row.selected { background: var(--surface-raised) !important; border-color: rgba(96, 165, 250, 0.45) !important; box-shadow: inset 2px 0 0 rgba(96, 165, 250, 0.9); }

.help-card-body strong { color: var(--text); font-weight: 600; }
.help-card-body em     { color: var(--text); font-style: normal; font-weight: 500; }

/* Platform limits quick-reference grid */
.plat-limit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) { .plat-limit-grid { grid-template-columns: 1fr; } }
.plat-limit-cell {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}
.plat-limit-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.plat-limit-label--yt { color: var(--platform-youtube); }
.plat-limit-label--ig { color: var(--platform-instagram); }
.plat-limit-label--tt { color: var(--platform-tiktok); }
.plat-limit-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Check / X lists */
.help-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.help-compare-card { height: 100%; }
@media (max-width: 720px) {
  .help-compare-row { grid-template-columns: 1fr; }
}

.help-check-list,
.help-x-list {
  padding-left: 0;
  list-style: none;
}

.help-check-list li,
.help-x-list li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
  line-height: 1.5;
}

.help-check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: rgba(77,200,130,.75);
  font-weight: 600;
  font-size: 12px;
  top: 1px;
}

.help-x-list li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: rgba(200,90,90,.7);
  font-weight: 600;
  font-size: 11px;
  top: 2px;
}

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

/* Contextual help links (inline in other pages) */
.help-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: #7AABFF;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.14s;
}
.help-inline-link:hover { opacity: 1; text-decoration: underline; }
.help-inline-link svg   { flex-shrink: 0; }

/* ── Notifications Settings tab ─────────────────────────────────────────── */

.notif-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.notif-toggle-row:last-child { border-bottom: none; }
.notif-toggle-row input[type="checkbox"] {
  width: 16px; height: 16px;
  flex-shrink: 0; margin-top: 2px; cursor: pointer;
}
.notif-toggle-title {
  font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px;
}
.notif-toggle-desc {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}

/* ── Account health banner (dashboard) ──────────────────────────────────── */

#acct-health-banner {
  margin-bottom: 14px;
  border: 1px solid rgba(239,68,68,0.30);
  background: rgba(239,68,68,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.acct-health-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--text);
  flex-wrap: wrap;
}
.acct-health-banner-inner span { flex: 1; min-width: 0; }

/* ── Account health result (Connections page) ───────────────────────────── */

.health-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  align-items: start;
}
@media (max-width: 560px) { .health-result-grid { grid-template-columns: 1fr; } }

.health-result-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
}

.health-result-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.health-result-platform {
  min-width: 88px; font-weight: 600; color: var(--text); font-size: 13px;
}

.health-result-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 16px;
  width: 100%;
}

.health-result-msg {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  flex: 1 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.health-result-action { flex-shrink: 0; }

.health-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; flex-shrink: 0;
}
.health-chip.ok    { background: rgba(79, 141, 255,0.12); color: #60A5FA; border: 1px solid rgba(79, 141, 255,0.28); }
.health-chip.err   { background: rgba(239,68,68,0.12);  color: #F87171; border: 1px solid rgba(239,68,68,0.28); }
.health-chip.muted { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); }
.health-chip.soon  { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); }

.health-result-soon-note {
  color: #6FA8DC;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* spin animation used in health check button */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── License overlay ────────────────────────────────────────────────────────── */

.lic-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0C1D3A;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.lic-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 58% at 50% 44%, rgba(59, 130, 246, 0.20) 0%, rgba(0, 114, 255, 0.10) 38%, transparent 72%);
  pointer-events: none;
}

.lic-card {
  position: relative;
  z-index: 1;
  background: rgba(10, 22, 44, 0.78);
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 20px;
  padding: 52px 44px 40px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(18px);
}

.lic-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.lic-logo span {
  background: linear-gradient(125deg, #0072ff 0%, #00c6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lic-logo-icon { width: 22px; height: 22px; border-radius: 5px; }
.lic-logo-img {
  display: block;
  width: 200px;
  max-width: 92%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}

.lic-ended-icon {
  font-size: 44px; margin-bottom: 12px;
}
.lic-reactivate-icon {
  margin: 0 auto 14px; line-height: 0;
  filter: drop-shadow(0 6px 18px rgba(96,165,250,0.35));
}
.lic-reactivate-icon svg { display: block; margin: 0 auto; }

/* Trial expired / subscription ended conversion screen */
.lic-overlay--ended::before {
  background:
    radial-gradient(ellipse 72% 58% at 50% 44%, rgba(0, 114, 255, 0.16) 0%, rgba(0, 198, 255, 0.08) 38%, transparent 72%);
}

.lic-card--ended {
  max-width: 440px;
  padding: 32px 32px 28px;
}

.lic-reactivate-icon--sm {
  margin: 0 auto 18px;
  opacity: 0.92;
  filter: drop-shadow(0 4px 14px rgba(0, 114, 255, 0.22));
}

.lic-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FDE68A;
  background: rgba(0, 198, 255, 0.10);
  border: 1px solid rgba(0, 198, 255, 0.24);
}

.lic-card--ended .lic-title {
  font-size: 26px;
  margin-bottom: 16px;
}

.lic-ended-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.lic-card--ended .lic-sub {
  margin-bottom: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.65;
}

.lic-sub-consequence {
  color: rgba(226, 232, 240, 0.92);
  font-weight: 600;
}

.lic-sub-price {
  margin-top: 2px;
  color: rgba(203, 213, 225, 0.88);
}

.lic-price-em {
  background: linear-gradient(to right, #0072ff, #00c6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.lic-sub-resume {
  color: rgba(148, 163, 184, 0.82);
  font-size: 13px;
}

.lic-actions,
.lic-ended-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lic-ended-actions {
  flex-direction: column;
}

.lic-title {
  font-size: 24px;
  font-weight: 800;
  color: #F5F5F3;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.lic-sub {
  font-size: 14px;
  color: rgba(184, 207, 234, 0.78);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

.lic-input-row {
  margin-bottom: 20px;
}

.lic-key-input {
  width: 100%;
  background: rgba(7, 17, 34, 0.72);
  border: 1.5px solid rgba(96, 165, 250, 0.22);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #E8F0FA;
  letter-spacing: 0.06em;
  text-align: center;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.lic-key-input::placeholder {
  color: rgba(148, 163, 184, 0.48);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 13px;
}
.lic-key-input:focus {
  border-color: rgba(96, 165, 250, 0.52);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14), 0 0 24px rgba(124, 58, 237, 0.10);
}

.lic-input-note {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.72);
  line-height: 1.5;
}

.lic-error {
  font-size: 13px; color: #F87171;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 8px; padding: 9px 14px;
  margin-bottom: 16px; line-height: 1.5;
}

.lic-divider {
  border: none; border-top: 1px solid rgba(96, 165, 250, 0.10);
  margin: 24px 0 18px;
}

.lic-footer {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(96, 165, 250, 0.10);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lic-helper {
  font-size: 13px;
  color: rgba(148, 163, 184, 0.82);
  line-height: 1.55;
  margin: 0;
}

.lic-helper-label {
  color: rgba(184, 207, 234, 0.72);
}

.lic-helper .lic-link {
  margin-left: 6px;
}

.lic-fine {
  font-size: 13px; color: rgba(203, 213, 225, 0.62); line-height: 1.6;
  margin-bottom: 4px;
}

.lic-link {
  color: #60A5FA;
  text-decoration: none; font-weight: 600;
}
.lic-link:hover { opacity: 0.85; text-decoration: underline; }

/* Grace period warning banner (shown inside app, not a blocking overlay) */
.lic-grace-banner {
  background: rgba(192,132,252,0.08);
  border: 1px solid rgba(192,132,252,0.22);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #C084FC;
  margin-bottom: 16px;
}
.lic-grace-banner a { color: #C084FC; font-weight: 600; }

/* ── Support tickets ─────────────────────────────────────────────────────── */
.support-ticket-list { padding: 12px 24px 18px; display: flex; flex-direction: column; gap: 8px; }
/* Compact, muted empty state - no oversized empty support box. */
.support-ticket-list .settings-empty { padding: 14px 0 6px; font-size: 12px; color: var(--text-muted); }
.support-ticket-row {
  width: 100%; text-align: left; border: 1px solid var(--border);
  background: rgba(255,255,255,0.02); border-radius: 10px; padding: 14px 16px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.support-ticket-row:hover { border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.04); }
.support-ticket-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.support-ticket-number { font-size: 12px; font-weight: 700; color: var(--accent); }
.support-ticket-subject { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.support-ticket-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }
.support-ticket-preview { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.support-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
.support-badge--new { background: rgba(59,130,246,0.14); color: #60A5FA; }
.support-badge--open { background: rgba(79, 141, 255,0.14); color: #60A5FA; }
.support-badge--waiting { background: rgba(192,132,252,0.14); color: #C084FC; }
.support-badge--resolved { background: rgba(148,163,184,0.14); color: #94A3B8; }
.support-badge--closed { background: rgba(100,116,139,0.14); color: #64748B; }
.support-context-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 16px; margin-top: 12px; font-size: 12px; color: var(--text-secondary);
}
.support-context-label { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.support-posting-issue {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(192,132,252,0.22); background: rgba(192,132,252,0.05);
}
.support-posting-issue-title { font-size: 12px; font-weight: 700; color: #C084FC; margin-bottom: 8px; }
.support-thread { padding: 0 24px 16px; display: flex; flex-direction: column; gap: 12px; }
.support-thread-msg { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); }
.support-thread-msg--customer { background: rgba(255,255,255,0.02); }
.support-thread-msg--support { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.18); }
.support-thread-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.support-thread-body { font-size: 13px; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; }
.support-reply-box { padding: 0 24px 20px; }
.support-closed-note { padding: 0 24px 20px; font-size: 12.5px; color: var(--text-muted); }
.support-attachments { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.support-attachment-link {
  font-size: 12px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.support-admin-filters {
  display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px;
  padding: 0 24px 12px; align-items: center;
}
.support-admin-controls {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px;
}
.support-priority { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.support-priority--low { background: rgba(148,163,184,0.14); color: #94A3B8; }
.support-priority--normal { background: rgba(59,130,246,0.12); color: #60A5FA; }
.support-priority--high { background: rgba(192,132,252,0.14); color: #C084FC; }
.support-priority--urgent { background: rgba(239,68,68,0.14); color: #F87171; }
.support-internal-notes { padding: 0 24px 12px; display: flex; flex-direction: column; gap: 10px; }
.support-internal-note {
  padding: 10px 12px; border-radius: 8px; border: 1px dashed rgba(148,163,184,0.35);
  background: rgba(148,163,184,0.06); font-size: 12.5px; color: var(--text-secondary);
}
.support-issue-log {
  margin-top: 12px; padding: 12px; border-radius: 8px; background: rgba(0,0,0,0.25);
  border: 1px solid var(--border); font-size: 11px; overflow: auto; max-height: 220px;
}
.form-label-muted { font-weight: 400; color: var(--text-muted); }
/* ── Compact branded TRESSO Support modal ─────────────────────────────────── */
.stm-modal {
  max-width: 720px; width: 100%;
  max-height: 86vh;
  border-radius: 24px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle at top center, rgba(96,165,250,0.10), transparent 42%),
    linear-gradient(180deg, rgba(15,35,66,0.98), rgba(8,24,48,0.985));
  border: 1px solid rgba(96,165,250,0.26);
  box-shadow: 0 28px 90px rgba(0,0,0,0.46);
  overflow: hidden;
}
.stm-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 24px 14px; flex: 0 0 auto;
}
.stm-title { font-size: 22px; font-weight: 800; color: #60A5FA; letter-spacing: -0.01em; line-height: 1.1; }
.stm-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.stm-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 14px; transition: background .15s, color .15s;
}
.stm-close:hover { background: rgba(255,255,255,0.09); color: #fff; }
.stm-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 24px 0; }
.stm-form { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }

.stm-row2 { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.stm-row2 .form-group { margin: 0; }
.stm-label { font-size: 13px; font-weight: 700; color: #B7C6DB; margin-bottom: 6px; display: block; }
.stm-input { height: 46px; }
.stm-input, .stm-desc {
  border: 1px solid rgba(96,165,250,0.22);
  background: rgba(255,255,255,0.03);
}
.stm-input:focus, .stm-desc:focus {
  border-color: rgba(96,165,250,0.55);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.14);
  outline: none;
}
.stm-input::placeholder, .stm-desc::placeholder { color: rgba(148,163,184,0.55); }
.stm-desc { height: 128px; min-height: 128px; resize: vertical; line-height: 1.5; padding: 12px 14px; }

/* Branded attachment row (no native file button) */
.stm-upload {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px;
  border: 1.5px dashed rgba(96,165,250,0.34); border-radius: 12px; cursor: pointer;
  background: rgba(96,165,250,0.04); transition: border-color .15s, background .15s;
}
.stm-upload:hover { border-color: rgba(96,165,250,0.55); background: rgba(96,165,250,0.07); }
.stm-upload-icon { color: #8FB6FF; display: inline-flex; }
.stm-upload-cta { font-size: 13px; font-weight: 700; color: #9EC5FF; white-space: nowrap; }
.stm-upload-name { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stm-upload-name--set { color: var(--text-secondary); }

/* Collapsed "Included automatically" strip */
.stm-context { border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,0.02); }
.stm-context-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px;
}
.stm-context-summary::-webkit-details-marker { display: none; }
.stm-context-strip { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stm-context-toggle { font-size: 12px; font-weight: 600; color: #9EC5FF; white-space: nowrap; flex: 0 0 auto; }
.stm-chev { display: inline-block; transition: transform .15s; }
.stm-context[open] .stm-chev { transform: rotate(90deg); }
.stm-context-detail { padding: 0 14px 14px; }
.stm-context-detail .support-context-grid { grid-template-columns: 1fr 1fr; margin-top: 0; }

/* Sticky footer - always visible without scrolling */
.stm-footer {
  position: sticky; bottom: 0;
  display: flex; justify-content: flex-end; gap: 10px;
  margin: 6px -24px 0; padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(10,26,52,0.6), rgba(8,24,48,0.98) 40%);
}
.stm-btn-cancel { min-width: 90px; }
.stm-btn-send {
  min-width: 130px;
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  border: 0; color: #fff;
}
.stm-btn-send:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 640px) {
  .stm-row2 { grid-template-columns: 1fr; }
  .stm-body { padding: 4px 18px 0; }
  .stm-footer { margin: 6px -18px 0; padding: 14px 18px; }
  .stm-desc { height: 120px; min-height: 120px; }
}

.hrc-fp-issue-block--verify {
  border-color: rgba(192,132,252,0.28);
  background: rgba(192,132,252,0.04);
}
.hrc-fp-plat-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}

@media (max-width: 760px) {
  .support-admin-filters { grid-template-columns: 1fr; }
}

/* ── Connections readiness checklist ─────────────────────────────────────── */
/* ── Connections page status bar ──────────────────────────────────────────── */
.conn-page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
/* The summary pill row was removed (it duplicated the per-platform cards). The
   empty #conn-status-bar stays as a flex spacer so Refresh remains right-aligned. */

.conn-readiness-card { margin-bottom: 18px; }
.conn-ready-rows { padding: 8px 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.conn-ready-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.conn-ready-row:last-child { border-bottom: none; }
.conn-ready-name { font-size: 13px; font-weight: 600; color: var(--text); }
.conn-ready-status { font-size: 12.5px; color: var(--text-muted); }
.conn-ready-status--ok { color: #60A5FA; }
.conn-ready-status--warn { color: var(--warning); }
.conn-ready-done { font-size: 12px; color: var(--text-muted); }

/* ── Needs Attention fix drawer support action ─────────────────────────────── */
.hrc-fp-support {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.hrc-action-btn--support {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 6px 0;
}
.hrc-action-btn--support:hover { color: var(--text-secondary); background: transparent; }

.hrc-fp-dismiss {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.hrc-fp-dismiss-btn {
  font-size: 12px;
  color: var(--text-muted);
  border-color: transparent;
}
.hrc-fp-dismiss-btn:hover { color: var(--text-secondary); border-color: var(--border); }

/* ── Compact failure panel v2 ─────────────────────────────────────────── */
.hrc-fp2-block {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.hrc-fp2-block:last-of-type { border-bottom: none; }
.hrc-fp2-status {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}
.hrc-fp2-status--fail { color: #EAF2FB; }
.hrc-fp2-status--warn { color: #EAF2FB; }
.hrc-fp2-status--info { color: #5DA9FF; }
.hrc-fp2-reason {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 8px;
}
.hrc-fp2-fix {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
}
.hrc-fp2-fix-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(96, 165, 250, 0.85);
  margin-bottom: 4px;
}
.hrc-fp2-fix-body {
  color: var(--text-secondary);
}
.hrc-fp2-action { margin-top: 10px; }
.hrc-fp2-meta-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.4;
}
.hrc-fp2-meta-label {
  flex: 0 0 110px;
  color: #8A90A2;
  font-weight: 500;
  font-size: 11px;
}
.hrc-fp2-meta-val {
  color: #E7E7E3;
  font-size: 11px;
}
.hrc-fp2-before-retry {
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 8px 10px;
  background: rgba(192, 132, 252, 0.06);
  border: 1px solid rgba(192, 132, 252, 0.15);
  border-radius: 6px;
}
.hrc-fp2-before-label {
  font-weight: 600;
  color: rgba(192, 132, 252, 0.85);
}
.hrc-fp2-confidence {
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 0 4px;
  line-height: 1.5;
}
.hrc-fp2-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.hrc-fp2-action .hrc-fp2-confidence {
  margin-top: 8px;
  padding-top: 0;
}
.hrc-fp2-action-primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 8px;
}
.hrc-fp2-action-primary .hrc-fp2-confidence {
  margin-top: 8px;
}
.hrc-fp2-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
/* Retry (button) + Repost + Abandon share one row, spaced apart so they read as
   distinct choices rather than crammed together. */
.hrc-fp2-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 4px;
}
.hrc-fp2-action-row .hrc-fp2-text-link { margin: 0; }
.hrc-fp-tech-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hrc-fp2-meta-row--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.hrc-fp2-meta-row--stack .hrc-fp2-meta-val {
  width: 100%;
}
.hrc-fp-footer.hrc-fp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
}
.hrc-fp2-plats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hrc-fp2-plat {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.hrc-fp2-plat--ok      { color: #0080FF; border-color: rgba(0, 128, 255, 0.35); }
.hrc-fp2-status--ok    { color: #60A5FA; }
.hrc-fp2-plat--fail    { color: #F87171; border-color: rgba(248, 113, 113, 0.35); }
.hrc-fp2-plat--neutral { color: var(--text-muted); border-color: var(--border); }
.hrc-fp-tech-details {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.hrc-fp-tech-details summary {
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.hrc-fp-tech-block { margin: 8px 0; }
.hrc-fp-tech-plat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.hrc-fp-tech-details .hrc-action-btn--support {
  margin-top: 10px;
}

.dismiss-failed-message {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 16px;
}
.dismiss-failed-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(192, 104, 104, 0.12);
  border: 1px solid rgba(192, 104, 104, 0.35);
  color: #E8A0A0;
  font-size: 12.5px;
  line-height: 1.45;
}
.dismiss-failed-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.dismiss-failed-actions .btn { flex: 1; }

/* ── Getting started checklist ─────────────────────────────────────────────── */
.help-checklist-card { margin-bottom: 18px; }
.gs-progress-bar-wrap {
  height: 3px;
  background: rgba(255,255,255,0.06);
  margin: 10px 24px 0;
  border-radius: 99px;
  overflow: hidden;
}
.gs-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0072ff, #00c6ff);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.gs-all-done-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(96,165,250,0.12);
  border: 1px solid rgba(96,165,250,0.3);
  color: #60A5FA;
}
.gs-check-rows { padding: 8px 24px 20px; }
.gs-check-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.gs-check-row:last-child { border-bottom: none; }
.gs-check-row--done .gs-check-label { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.15); }
.gs-check-mark {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #60A5FA;
  flex-shrink: 0;
}
.gs-check-row--done .gs-check-mark { border-color: rgba(96,165,250,0.4); background: rgba(96,165,250,0.1); }
.gs-check-label { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.gs-check-action { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ── First post guided walkthrough ───────────────────────────────────────── */
.first-post-guide { margin-bottom: 18px; }
.first-post-guide-inner {
  background: var(--surface);
  border: 1px solid rgba(59,130,246,0.22);
  border-radius: 12px;
  padding: 16px 18px;
}
.first-post-guide-step {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.first-post-guide-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.first-post-guide-detail { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; max-width: 640px; }
.first-post-guide-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Smart empty states ──────────────────────────────────────────────────── */
.empty-state .empty-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.hrc-empty-state .empty { padding: 28px 16px; }
.hrc-empty-state .empty-actions { justify-content: flex-start; }

@media (max-width: 640px) {
  .conn-ready-row { grid-template-columns: 1fr; gap: 6px; }
  .gs-check-row { grid-template-columns: 28px 1fr; }
  .gs-check-action { grid-column: 2; justify-content: flex-start; }
}

/* â"€â"€ Cloud Import modal â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
.import-modal { }
.import-modal-desc { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; line-height: 1.55; }

.import-source-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.import-source-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 18px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  color: var(--text-secondary);
}
.import-source-card:hover:not(:disabled) {
  background: rgba(96,165,250,0.10);
  border-color: rgba(96,165,250,0.30);
}
.import-source-card:disabled { opacity: 0.45; cursor: default; }
.import-source-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.import-source-name { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.import-source-sub  { font-size: 10.5px; color: var(--text-muted); text-align: center; }

.import-progress-wrap { padding: 16px 0 8px; }
.import-progress-label { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; text-align: center; }
.import-progress-bar-track {
  height: 4px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden;
}
.import-progress-bar-fill {
  height: 100%; background: linear-gradient(90deg, #0072ff, #00c6ff);
  border-radius: 999px; transition: width 0.2s ease; width: 0%;
}

.import-error {
  background: rgba(224,96,96,0.10); border: 1px solid rgba(224,96,96,0.28);
  color: #E06060; border-radius: 8px; padding: 10px 14px;
  font-size: 12.5px; line-height: 1.5; white-space: pre-line;
}

/* Source badges on queue items */
.qi-source-badge {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; display: inline-block;
}
.qi-source-badge--gdrive {
  background: rgba(66,133,244,0.12); color: #60A5FA;
  border: 1px solid rgba(66,133,244,0.22);
}
.qi-source-badge--dropbox {
  background: rgba(0,97,254,0.12); color: #60A5FA;
  border: 1px solid rgba(0,97,254,0.22);
}
.qi-source-badge--watched {
  background: rgba(168,85,247,0.10); color: var(--platform-instagram);
  border: 1px solid rgba(168,85,247,0.22);
}

/* ── Instagram connection card - Buffer-style clean states ─────────── */
.conn-ig-status-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.conn-ig-check { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.conn-ig-check--ok  { background: rgba(79, 141, 255,0.15); color: #60A5FA; border: 1px solid rgba(79, 141, 255,0.30); }
.conn-ig-check--warn{ background: rgba(192,132,252,0.12);  color: #C084FC; border: 1px solid rgba(192,132,252,0.28); }
.conn-ig-check--err { background: rgba(224,96,96,0.12);   color: #E06060; border: 1px solid rgba(224,96,96,0.28); }
.conn-ig-info  { display: flex; flex-direction: column; gap: 2px; }
.conn-ig-account { font-size: 14px; font-weight: 600; color: var(--text); }
.conn-ig-ready  { font-size: 12px; color: #60A5FA; }
.conn-ig-verified { font-size: 11px; margin-top: 2px; }
.conn-ig-ready--warn { color: #C084FC; }
.conn-ig-ready--err  { color: #E06060; }
.conn-ig-sub-notice { font-size: 12px; color: var(--text-muted); margin-top: 8px; padding: 8px 10px; background: rgba(255,255,255,0.04); border-radius: 8px; }
.conn-inline-btn { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.conn-ig-cta { text-align: center; padding: 4px 0; }
.conn-ig-cta-btn { width: 100%; justify-content: center; gap: 8px; }
.conn-ig-cta-note { font-size: 11.5px; color: var(--text-muted); margin: 8px 0 0; line-height: 1.45; }

.sched-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  width: fit-content;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 4px;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  font-family: inherit;
  transition: opacity 0.14s;
  position: relative;
}
.sched-status-pill:hover { opacity: 0.85; }
.sched-status-pill--on  { background: rgba(15, 35, 66, 0.65); color: #8BC7FF; border: 1px solid rgba(96, 165, 250, 0.18); }
.sched-status-pill--off { background: rgba(224, 96, 96, 0.08); color: #C89090; border: 1px solid rgba(224, 96, 96, 0.18); }
.ssp-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.ssp-dot--on  { background: #60A5FA; animation: pulse-ssp 2.5s ease-in-out infinite; }
.ssp-dot--off { background: #C87878; }
@keyframes pulse-ssp { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Scheduler popover - portaled to body, above dashboard cards */
.sched-popover {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  background: var(--surface-raised, #0E2040);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  padding: 18px;
  z-index: 1000;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}
.sched-popover.open { display: flex; }
.sp-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.sp-status { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 10px 0; border-bottom: 1px solid var(--border); }
.sp-status--on  { color: #8BC7FF; }
.sp-status--off { color: #C89090; }
.sp-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.sp-label { font-size: 12px; color: var(--text-secondary); }
.sp-toggle { flex-shrink: 0; }
.sp-sublabel { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin: -2px 0 8px; opacity: 0.8; }
.sp-last-check { font-size: 11px; color: var(--text-muted); padding: 2px 0 8px; }
.sp-next { font-size: 12px; color: #BFD8F5; margin: 2px 0 6px; font-weight: 600; }
.sp-next--off { color: #C084FC; }
.sp-action-btn { width: 100%; justify-content: center; margin-top: 4px; }
.sched-popover .sp-action-btn.btn-primary {
  background: rgba(59,108,255,0.38);
  border-color: rgba(59,108,255,0.55);
  color: #DCE8FF;
}
.sched-popover .sp-action-btn.btn-primary:hover {
  background: rgba(59,108,255,0.52);
  border-color: rgba(96,140,255,0.72);
  color: #F0F5FF;
  box-shadow: 0 0 14px rgba(59,108,255,0.24), inset 0 1px 0 rgba(255,255,255,0.10);
}
.sp-btn--stop { color: #E08080; border-color: rgba(224,96,96,0.28); }
.sp-btn--stop:hover { background: rgba(224,96,96,0.14); border-color: rgba(224,96,96,0.50); color: #F0A8A8; }
.sp-hint { font-size: 11px; color: var(--text-muted); opacity: 0.65; line-height: 1.5; margin-top: 6px; }

/* ── #1 First-post step wizard ───────────────────────────────────────── */
.fpg-steps { display:flex; gap:0; margin-bottom:16px; }
.fpg-step  { display:flex; align-items:center; gap:6px; flex:1; position:relative; }
.fpg-step:not(:last-child)::after { content:''; position:absolute; right:0; top:50%; width:calc(100% - 28px - 12px); height:1px; background:rgba(255,255,255,0.08); transform:translateY(-50%); left:28px; }
.fpg-step-dot { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:var(--text-muted); z-index:1; }
.fpg-step--done .fpg-step-dot   { background:rgba(79, 141, 255,0.15); border-color:rgba(79, 141, 255,0.35); color:#60A5FA; }
.fpg-step--active .fpg-step-dot { background:rgba(96,165,250,0.15); border-color:rgba(96,165,250,0.40); color:#60A5FA; }
.fpg-step-label { font-size:10.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fpg-step--done .fpg-step-label   { color:#60A5FA; }
.fpg-step--active .fpg-step-label { color:#60A5FA; font-weight:600; }

/* ── Quick Start onboarding modal ────────────────────────────────────────── */
/* ── Get Started onboarding modal ─────────────────────────────────────────────
   Premium onboarding feel: app navy card, subtle blue/violet top glow, soft
   border, clean shadow. Compact width. Not a settings list. */
.qs-modal {
  width: 420px;
  position: relative;
  padding: 26px 26px 22px;
  background:
    radial-gradient(ellipse 80% 42% at 50% 0%, rgba(0,198,255,0.16) 0%, rgba(96,165,250,0.10) 30%, transparent 70%),
    #0D1B38;
  border: 1px solid rgba(96,165,250,0.18);
  border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.qs-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.qs-modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text); border-color: rgba(255,255,255,0.18); }
.qs-modal-head { margin-bottom: 18px; padding-right: 28px; }
.qs-modal-title { font-size: 19px; font-weight: 700; color: var(--text); margin: 0 0 6px; letter-spacing: -0.01em; }
.qs-modal-sub { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.55; }

.qs-steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.qs-step {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 11px 13px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.14s, border-color 0.14s;
}
.qs-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-muted);
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.qs-step-text { min-width: 0; padding-top: 1px; flex: 1; }
.qs-step-title { font-size: 13.5px; font-weight: 600; color: var(--text-secondary, #c3d0e6); line-height: 1.3; }
.qs-step-helper { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* Future steps: visible but calm, no heavy outline. */
.qs-step--future { opacity: 0.78; }

/* Active step: brighter border + soft blue glow. */
.qs-step--active {
  background: rgba(96,165,250,0.08);
  border-color: rgba(96,165,250,0.32);
  box-shadow: 0 0 0 1px rgba(96,165,250,0.10), 0 6px 18px -8px rgba(59,108,255,0.45);
}
.qs-step--active .qs-step-num {
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  border-color: transparent; color: #fff;
}
.qs-step--active .qs-step-title { color: var(--text); }

/* Done step: quietly confirmed. */
.qs-step--done .qs-step-num {
  background: rgba(96,165,250,0.14); border-color: rgba(96,165,250,0.38); color: #60A5FA;
}
.qs-step--done .qs-step-title { color: var(--text); }

/* Per-step action button + clickable rows - the user can walk ANY step, not just the
   active one. Each row navigates to that step's screen. */
.qs-step[role="button"] { cursor: pointer; }
.qs-step[role="button"]:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
.qs-step--active[role="button"]:hover { background: rgba(96,165,250,0.12); }
.qs-step-action {
  flex-shrink: 0; align-self: center;
  font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-secondary, #c3d0e6);
  cursor: pointer; white-space: nowrap;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.qs-step-action:hover { background: rgba(255,255,255,0.09); color: var(--text); }
.qs-step-action--active {
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  border-color: transparent; color: #fff;
}
.qs-step-action--active:hover { filter: brightness(1.06); color: #fff; }
.qs-step-done {
  flex-shrink: 0; align-self: center;
  font-size: 11.5px; font-weight: 600;
  color: #60A5FA; white-space: nowrap; padding-right: 4px;
}

.qs-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.qs-btn-primary {
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  color: #fff; border: none; font-weight: 600;
  padding: 10px 20px; border-radius: 10px;
  box-shadow: 0 8px 22px -10px rgba(96,92,255,0.7);
}
.qs-btn-primary:hover { filter: brightness(1.07); }
.qs-btn-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-secondary, #c3d0e6);
  padding: 10px 18px; border-radius: 10px; font-weight: 500;
}
.qs-btn-secondary:hover { background: rgba(255,255,255,0.05); color: var(--text); border-color: rgba(255,255,255,0.22); }
.fpg-body { padding-top:4px; }

/* ── Instagram Connection Type Modal ─────────────────────────────────── */
.ig-type-modal { background:var(--card); border:1px solid rgba(148,163,184,0.12); border-radius:18px; max-width:580px; width:calc(100% - 32px); padding:28px; position:relative; }
.ig-type-modal-hdr { margin-bottom:20px; }
.ig-type-modal-title { font-size:17px; font-weight:700; color:var(--text); margin-bottom:6px; padding-right:28px; }
.ig-type-modal-sub { font-size:13px; color:var(--text-muted); line-height:1.5; }
.ig-type-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.ig-type-card { background:rgba(255,255,255,0.03); border:1.5px solid rgba(148,163,184,0.12); border-radius:12px; padding:18px; cursor:pointer; transition:border-color .18s, background .18s; display:flex; flex-direction:column; gap:10px; }
.ig-type-card:hover { background:rgba(96,165,250,0.05); }
.ig-type-card--primary { border-color:rgba(96,165,250,0.35); background:rgba(96,165,250,0.04); }
.ig-type-card--primary:hover { border-color:rgba(96,165,250,0.55); background:rgba(96,165,250,0.08); }
.ig-type-badge { font-size:9.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; padding:2px 8px; border-radius:999px; display:inline-block; width:fit-content; }
.ig-type-badge--auto    { background:rgba(79, 141, 255,0.14); color:#60A5FA; border:1px solid rgba(79, 141, 255,0.28); }
.ig-type-badge--reminder { background:rgba(168,85,247,0.12); color:var(--platform-instagram); border:1px solid rgba(168,85,247,0.25); }
.ig-type-card-title { font-size:14px; font-weight:700; color:var(--text); }
.ig-type-rec { font-size:10px; font-weight:600; color:#60A5FA; margin-left:6px; text-transform:none; letter-spacing:0; }
.ig-type-benefits { font-size:12.5px; color:var(--text-sec); line-height:1.6; padding-left:16px; flex:1; }
.ig-type-benefits li { margin-bottom:4px; }
.ig-type-cta { width:100%; justify-content:center; margin-top:4px; }
.ig-type-card-note { font-size:11px; color:var(--text-muted); line-height:1.5; }
.ig-type-faq { background:rgba(255,255,255,0.025); border:1px solid rgba(148,163,184,0.08); border-radius:10px; padding:14px 16px; margin-bottom:16px; }
.ig-type-faq-title { font-size:11px; font-weight:700; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.ig-type-faq-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:12.5px; color:var(--text-sec); line-height:1.55; margin-bottom:10px; }
.ig-type-faq-hint { font-size:12px; color:var(--text-muted); border-top:1px solid rgba(148,163,184,0.08); padding-top:10px; }
.ig-type-help { border-top:1px solid rgba(148,163,184,0.08); padding-top:14px; }
.ig-type-help-label { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--text-sec); cursor:pointer; user-select:none; padding:2px 0; }
.ig-type-help-label:hover { color:var(--text); }
.ig-type-help-arrow { transition:transform .22s; }
.ig-type-help-body { padding-top:12px; display:flex; flex-direction:column; gap:12px; }
.ig-type-help-item { }
.ig-type-help-q { font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:4px; }
.ig-type-help-a { font-size:12px; color:var(--text-muted); line-height:1.6; }
/* TikTok sandbox note on connected card */
.conn-sandbox-note { font-size:11.5px; color:var(--text-muted); margin-top:6px; padding:6px 8px; background:rgba(96,165,250,0.05); border:1px solid rgba(96,165,250,0.12); border-radius:6px; line-height:1.5; }
.conn-fb-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.conn-fb-disconnect { margin-left:8px; opacity:.85; }
/* Direct Post pending approval - calm amber, NOT an error. */
.conn-sandbox-note--pending { color:#5DA9FF; background:rgba(230,184,115,0.07); border-color:rgba(230,184,115,0.20); }
/* Neutral informational connection note (e.g. Facebook Page selection) - no gating semantics. */
.conn-note { font-size:11.5px; color:var(--text-muted); margin-top:6px; padding:6px 8px; background:rgba(96,165,250,0.05); border:1px solid rgba(96,165,250,0.12); border-radius:6px; line-height:1.5; }
.conn-note--info { color:#5DA9FF; background:rgba(230,184,115,0.07); border-color:rgba(230,184,115,0.20); }
/* Reminder Posting state in connection card */
.conn-ig-reminder-badge { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:rgba(168,85,247,0.12); color:var(--platform-instagram); border:1px solid rgba(168,85,247,0.22); display:inline-block; margin-bottom:4px; }
/* History reminder_sent chip */
.status-chip--reminder { background:rgba(168,85,247,0.10); color:var(--platform-instagram); border:1px solid rgba(168,85,247,0.22); }
/* ── Connection wizard ──────────────────────────────────────────────────── */
.conn-repair-msg { font-size:13px; color:var(--text-sec); line-height:1.55; margin:10px 0 14px; padding:10px 12px; background:rgba(255,255,255,0.03); border-radius:8px; border-left:3px solid rgba(239,68,68,0.5); }
.rights-notice-helper { font-size: 11.5px; color: var(--text-muted, #8B98AD); line-height: 1.45; margin: 8px 2px 0; }
/* Rights confirmation gate (copyright V1) */
.rights-attest-overlay { position:fixed; inset:0; background:rgba(6,12,24,0.62); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); display:none; align-items:center; justify-content:center; z-index:10000; padding:20px; }
.rights-attest-overlay.show { display:flex; }
.rights-attest-modal {
  background:linear-gradient(180deg, #11213B 0%, #0D1A2E 100%);
  border:1px solid rgba(120,150,220,0.18);
  border-radius:20px;
  padding:30px 32px 26px;
  max-width:540px; width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(96,165,250,0.05), inset 0 1px 0 rgba(255,255,255,0.05);
}
.rights-attest-overlay.show .rights-attest-modal { animation:raModalIn 0.18s ease-out; }
@keyframes raModalIn { from { opacity:0; transform:translateY(10px) scale(0.985); } to { opacity:1; transform:none; } }
.rights-attest-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.rights-attest-badge {
  flex-shrink:0; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
  color:#fff; box-shadow:0 8px 18px -6px rgba(79,108,255,0.7);
}
.rights-attest-title { font-size:18px; font-weight:700; color:var(--text,#EAF0F8); margin:0; line-height:1.2; letter-spacing:-0.01em; }
.rights-attest-sub { font-size:14px; color:var(--text-secondary,#AFC0D6); line-height:1.55; margin:0 0 22px; }
.rights-attest-check {
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px; color:var(--text,#EAF0F8); cursor:pointer; line-height:1.5;
  padding:14px 16px; border-radius:12px;
  background:rgba(96,165,250,0.06); border:1px solid rgba(96,165,250,0.16);
  transition:border-color .15s, background .15s;
}
.rights-attest-check:hover { border-color:rgba(96,165,250,0.32); background:rgba(96,165,250,0.10); }
.rights-attest-check input { margin-top:1px; width:18px; height:18px; flex-shrink:0; cursor:pointer; accent-color:#4F8DFF; }
.rights-attest-check input:focus-visible { outline:2px solid #6CA8FF; outline-offset:3px; }
.rights-attest-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:26px; }
/* Disabled Continue stays readable (muted blue + legible label), never washed out. */
#rights-attest-continue:disabled { opacity:1; background:rgba(79,141,255,0.30); color:rgba(255,255,255,0.78); cursor:not-allowed; box-shadow:none; }
#rights-attest-continue:focus-visible, .rights-attest-actions .btn-secondary:focus-visible { outline:2px solid #6CA8FF; outline-offset:2px; }
/* Compact recoverable-state warning strip (calm amber, not red) */
.conn-warn-strip { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; margin:2px 0; padding:10px 14px; background:var(--surface-2); border:1px solid rgba(93, 169, 255,0.18); border-left:3px solid var(--warning); border-radius:10px; }
.conn-warn-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.conn-warn-title { font-size:14px; font-weight:600; color:var(--text); }
.conn-warn-body { font-size:12.5px; color:var(--text-muted); line-height:1.45; }
.conn-warn-btn { flex-shrink:0; white-space:nowrap; align-self:center; }
.conn-why { margin-top:8px; }
.conn-why summary { font-size:11px; color:var(--text-muted); cursor:pointer; user-select:none; list-style:none; opacity:0.8; }
.conn-why summary::-webkit-details-marker { display:none; }
.conn-why summary::before { content:'Why this happens'; text-decoration:underline; text-underline-offset:2px; }
details[open].conn-why summary::before { content:'Why this happens'; }
.conn-why-body { font-size:11.5px; color:var(--text-muted); margin-top:6px; padding:8px 10px; background:rgba(255,255,255,0.03); border-radius:6px; line-height:1.55; word-break:break-word; }
/* Pre-check list inside IG type modal */
.ig-type-precheck { margin:8px 0 4px; padding:8px 0; border-top:1px solid rgba(148,163,184,0.10); }
.ig-type-precheck-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); margin-bottom:5px; }
.ig-type-precheck-item { display:flex; align-items:flex-start; gap:5px; font-size:11.5px; color:var(--text-sec); line-height:1.45; margin-bottom:3px; }
.ig-type-precheck-icon { color:#60A5FA; flex-shrink:0; }
/* YouTube wizard modal */
.yt-wizard-modal { position:relative; background:var(--surface); border:1.5px solid rgba(148,163,184,0.12); border-radius:16px; padding:28px 28px 24px; max-width:420px; width:100%; }
.yt-wizard-modal .modal-close { position:absolute; top:22px; right:22px; }
.wizard-prechecks { display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.wizard-precheck-item { display:flex; align-items:flex-start; gap:12px; }
.wizard-check-icon { width:22px; height:22px; border-radius:50%; background:rgba(96,165,250,0.12); color:#60A5FA; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.wizard-check-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.wizard-check-desc { font-size:12px; color:var(--text-muted); line-height:1.5; }
/* Post-connect verification checklist */
.conn-post-connect { margin-bottom:12px; padding:11px 13px; background:rgba(96,165,250,0.05); border:1px solid rgba(96,165,250,0.18); border-radius:9px; }
.conn-post-connect-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#60A5FA; margin-bottom:7px; }
.conn-post-connect-item { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-sec); margin-bottom:4px; }
.conn-post-connect-item:last-child { margin-bottom:0; }
.conn-post-connect-check { color:#60A5FA; font-size:13px; }
.conn-post-connect-warn { color:#C084FC; font-size:13px; }
@media (max-width:520px) { .ig-type-cards { grid-template-columns:1fr; } .ig-type-faq-row { grid-template-columns:1fr; } }

/* ── Tessa - in-app guide ─────────────────────────────────────────────────── */

/* nav sidebar avatar sized via .nav-item-help .nav-tessa-avatar above */

.tessa-overlay {
  position: fixed;
  inset: 0;
  z-index: 100020;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.tessa-overlay--open {
  opacity: 1;
  visibility: visible;
}

.tessa-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100021;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.tessa-panel--open { transform: translateX(0); }

.tessa-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tessa-panel-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}
.tessa-panel-head-text { flex: 1; min-width: 0; }
.tessa-panel-name { font-size: 16px; font-weight: 700; color: var(--text); }
.tessa-panel-tagline { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.tessa-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.tessa-panel-close:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.tessa-panel-search-wrap {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tessa-panel-search {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.tessa-panel-search:focus {
  border-color: rgba(59, 108, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 108, 255, 0.12);
}

.tessa-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.tessa-quick-label,
.tessa-cat-label,
.tessa-results-label,
.tessa-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.tessa-cat-label { margin-top: 22px; }

.tessa-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tessa-quick-card {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.35;
  transition: border-color 0.15s, background 0.15s;
}
.tessa-quick-card:hover {
  border-color: rgba(59, 108, 255, 0.4);
  background: rgba(59, 108, 255, 0.06);
}

.tessa-cat-list { display: flex; flex-direction: column; gap: 4px; }
.tessa-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  text-align: left;
}
.tessa-cat-row:hover { background: rgba(255,255,255,0.04); }
.tessa-cat-count {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  padding: 2px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* --- Tessa assistant command-center home --- */
.tessa-hero {
  padding: 6px 2px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.tessa-hero-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.tessa-hero-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.tessa-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.tessa-prompt-chip {
  font-size: 12.5px;
  font-weight: 500;
  color: #9EC5FF;
  background: rgba(59, 108, 255, 0.10);
  border: 1px solid rgba(59, 108, 255, 0.28);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s;
}
.tessa-prompt-chip:hover {
  background: rgba(59, 108, 255, 0.18);
  border-color: rgba(59, 108, 255, 0.5);
}

.tessa-qf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
}
.tessa-qf-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.tessa-qf-btn:hover {
  border-color: rgba(59, 108, 255, 0.45);
  background: rgba(59, 108, 255, 0.07);
}
.tessa-qf-arrow {
  color: var(--text-muted);
  font-size: 14px;
  transition: transform 0.15s, color 0.15s;
}
.tessa-qf-btn:hover .tessa-qf-arrow {
  color: #9EC5FF;
  transform: translateX(2px);
}

.tessa-cat-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tessa-cat-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.tessa-cat-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}

.tessa-back {
  background: none;
  border: none;
  color: #60A5FA;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 12px;
  margin-bottom: 4px;
}
.tessa-back:hover { text-decoration: underline; }

.tessa-article-title,
.tessa-category-title {
  font-size: 18px;
  font-weight: 700;
  color: #60A5FA;
  margin: 0 0 12px;
  line-height: 1.3;
}
.tessa-article-summary {
  font-size: 14px;
  color: var(--text-sec);
  line-height: 1.55;
  margin: 0 0 16px;
}
.tessa-steps {
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.tessa-steps li { margin-bottom: 8px; }
.tessa-notes {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(59, 108, 255, 0.06);
  border: 1px solid rgba(59, 108, 255, 0.12);
}
.tessa-notes-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.tessa-notes ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.55;
}
.tessa-related { margin-bottom: 20px; }
.tessa-related-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.tessa-related-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #7A9EC2;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}
.tessa-related-link:hover { color: #9BBAD8; text-decoration: underline; }

.tessa-escalation {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.tessa-escalation-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.tessa-escalation-link {
  font-size: 13px;
  color: #60A5FA;
  text-decoration: none;
}
.tessa-escalation-link:hover { text-decoration: underline; }

.tessa-result-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s;
}
.tessa-result-row:hover { border-color: rgba(59, 108, 255, 0.35); }
.tessa-result-title { font-size: 14px; font-weight: 600; color: var(--text); }
.tessa-result-summary { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }

.tessa-empty { text-align: center; padding: 32px 12px; }
.tessa-empty-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.tessa-empty-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.tessa-empty-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tessa-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-sec);
  font-size: 12.5px;
  cursor: pointer;
}
.tessa-chip:hover { border-color: rgba(59, 108, 255, 0.4); color: var(--text); }

.tessa-welcome-card {
  margin-bottom: 16px;
  border: 1px solid rgba(59, 108, 255, 0.2);
  border-radius: 12px;
  background: rgba(59, 108, 255, 0.06);
}
.tessa-welcome-card .tessa-help-card {
  padding: 14px 18px;
}
.tessa-welcome-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tessa-welcome-sub { font-size: 13px; color: var(--text-sec); line-height: 1.5; margin-bottom: 10px; }
.tessa-welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.tessa-context-link {
  background: none;
  border: none;
  padding: 0;
  color: #7A9EC2;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.tessa-context-link:hover { color: #9BBAD8; text-decoration: underline; }
.help-inline-link .tessa-context-link { font-size: 13px; }

.tessa-inline-context {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(59, 108, 255, 0.05);
  border: 1px solid rgba(59, 108, 255, 0.12);
}

.hrc-fp-tessa {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.queue-view-toolbar .tessa-context-link {
  font-size: 12.5px;
  margin-right: auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .tessa-panel { width: 100vw; }
  .queue-view-toolbar .tessa-context-link { white-space: normal; text-align: left; }
}

/* ── Watched Folders (Content Sources) ────────────────────────────────────── */

.wf-page-card { margin-bottom: 14px; }
.wf-explainer {
  margin: 0 24px 16px;
  padding: 14px 16px;
  background: rgba(79,141,255,.05);
  border: 1px solid rgba(79,141,255,.14);
  border-radius: 10px;
}
.wf-explainer-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(79,141,255,.7); margin-bottom: 10px;
}
.wf-explainer-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.wf-explainer-step {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
}
.wf-step-num {
  flex-shrink: 0; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(79,141,255,.2); border: 1px solid rgba(79,141,255,.3);
  font-size: 10px; font-weight: 700; color: #93c5fd; margin-top: 1px;
}
.wf-explainer-step strong { color: var(--text); font-weight: 600; }
.wf-explainer-note {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
  padding-top: 8px; border-top: 1px solid rgba(79,141,255,.1);
}
.wf-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 0 24px 16px;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.wf-summary strong { color: var(--text); font-weight: 600; }

/* Folder Monitoring - new how-it-works cards row */
.wf-how-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 16px 24px 0;
}
@media (max-width: 780px) { .wf-how-row { grid-template-columns: 1fr; } }
.wf-how-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.wf-how-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #7FB0FF;
  margin-bottom: 6px;
}
/* Folder Monitoring page uses the standard light blue for its heading (scoped so other
   settings-card titles keep their own colour). */
.wf-page-card .setup-card-title { color: #7FB0FF; }
.wf-how-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.wf-helper-note {
  padding: 10px 24px 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.wf-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 24px 14px;
  border-bottom: 1px solid var(--border);
}
.wf-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 12px;
}
.wf-pill strong { color: var(--text); font-weight: 600; margin: 0 3px; }

.wf-list { padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.wf-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.wf-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface);
}
.wf-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wf-card-name { font-size: 14px; font-weight: 700; color: #7FB0FF; }
.wf-card-path { font-size: 12px; color: var(--text-muted); margin-top: 4px; word-break: break-all; }
.wf-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.wf-status--ok { background: rgba(79, 141, 255,0.12); color: #60A5FA; }
.wf-status--muted { background: rgba(148,163,184,0.10); color: var(--text-muted); }
.wf-status--wait { background: rgba(192,132,252,0.12); color: #C084FC; }
.wf-status--err { background: rgba(239,68,68,0.10); color: #F87171; }
.wf-card-msg { font-size: 12.5px; color: var(--text-sec); margin-top: 10px; line-height: 1.45; }
/* Per-folder posting defaults on the card. */
.wf-card-defaults { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(96,165,250,0.10); font-size: 12.5px; }
.wf-def-label { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.wf-def { color: #C3D4EA; }
.wf-def-k { color: var(--text-muted); font-weight: 600; }
/* Folder modal defaults section. */
.wf-label-opt { font-weight: 400; color: var(--text-muted); font-size: 11.5px; }
.wf-defaults-hint { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; }
.wf-defaults-grid { gap: 12px; margin-bottom: 6px; }
.wf-plat-checks { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 4px; }
.wf-card-options { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.wf-card-archive { font-size: 12px; color: var(--text-muted); margin-top: 8px; word-break: break-all; }
.wf-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.wf-remove-btn { color: #F87171 !important; }

.wf-modal {
  width: 520px;
  max-width: calc(100vw - 32px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.wf-modal-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.wf-modal-title { font-size: 16px; font-weight: 700; color: var(--text); }
.wf-modal-body { padding: 16px 20px; }
.wf-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.wf-path-row { display: flex; gap: 8px; align-items: center; }
.wf-path-row .form-control { flex: 1; min-width: 0; }
.wf-field { margin-top: 14px; }
.wf-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-sec); margin-bottom: 6px; }
.wf-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  margin-top: 10px;
  cursor: pointer;
}
.wf-archive-wrap { margin-top: 10px; }
/* Defaults-mode chooser: "Use my posting defaults" vs "Customize this folder". */
.wf-defaults-mode { display: flex; flex-direction: column; gap: 8px; }
.wf-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wf-radio:hover { border-color: var(--border-strong, rgba(255,255,255,0.22)); }
.wf-radio input[type="radio"] { margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent, #C490FF); }
.wf-radio:has(input:checked) {
  border-color: var(--accent, #C490FF);
  background: rgba(196,144,255,0.06);
}
.wf-radio-text { display: flex; flex-direction: column; gap: 3px; }
.wf-radio-text strong { font-size: 13.5px; font-weight: 700; color: var(--text); }
.wf-radio-sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.wf-defaults-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.wf-modal-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.22);
  color: #F87171;
  font-size: 13px;
}
.wf-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--border);
}

/* ── Calendar view ──────────────────────────────────────────────────────────── */

.queue-cal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 12px;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cal-nav-btn:hover {
  background: var(--surface-high);
  color: var(--text);
  border-color: var(--border-strong);
}

.cal-nav-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  min-width: 120px;
  text-align: center;
}

.cal-today-btn { flex-shrink: 0; }

.cal-queue-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* Desktop grid / mobile agenda */
.cal-desktop { display: block; }
.cal-mobile  { display: none; }
@media (max-width: 640px) {
  .cal-desktop { display: none; }
  .cal-mobile  { display: block; }
}

/* Month grid */
.cal-month {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--surface-high);
  border-bottom: 1px solid var(--border);
}
.cal-weekday {
  text-align: center;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-day {
  min-width: 0;   /* strictly equal columns: content wraps within, never widens the day */
  min-height: 90px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 5px 5px;
  cursor: default;
  transition: background 0.1s;
}
.cal-day:nth-child(7n) { border-right: none; }

.cal-day-other {
  background: rgba(0,0,0,0.15);
  opacity: 0.45;
}
.cal-day-today { background: rgba(59,108,255,0.08); }
.cal-day-today .cal-day-num {
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.cal-day-drag-over {
  background: rgba(59,108,255,0.12) !important;
  outline: 2px dashed rgba(59,108,255,0.5);
  outline-offset: -2px;
}

.cal-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cal-day-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Event cards */
.cal-event-card {
  background: rgba(59,108,255,0.14);
  border: 1px solid rgba(59,108,255,0.26);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  /* Grow to fit the wrapped title + all platform pills - never clip content. */
  overflow: visible;
  min-width: 0;
}
.cal-event-card:hover {
  background: rgba(59,108,255,0.24);
  border-color: rgba(59,108,255,0.45);
}
.cal-event-card.dragging { opacity: 0.4; }

.cal-event-time {
  font-size: 10px;
  font-weight: 600;
  color: #9abfff;
  line-height: 1.2;
}
.cal-event-title {
  font-size: 11px;
  color: var(--text);
  /* Wrap the full title instead of truncating it - nothing on the calendar is cut off. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}
.cal-event-plats { margin-top: 2px; }

.cal-more-btn {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  margin-top: 1px;
}
.cal-more-btn:hover { text-decoration: underline; }

/* Agenda (mobile) */
.cal-agenda-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
}
.cal-agenda-day {
  margin-bottom: 12px;
}
.cal-agenda-day-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.cal-agenda-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.1s;
}
.cal-agenda-row:hover { background: var(--surface-high); }
.cal-agenda-time {
  font-size: 11.5px;
  font-weight: 600;
  color: #9abfff;
  flex-shrink: 0;
  min-width: 52px;
}
.cal-agenda-title {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-agenda-plats { flex-shrink: 0; }

/* Platform brand pills */
.plat-brand-line {
  display: inline-flex;
  gap: 3px;
  flex-wrap: wrap;
}
.plat-brand {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}
/* STANDARD platform colors (locked to the --platform-* palette - the single source of
   truth used across Queue, History, Dashboard and Connections). Do not hand-pick per-pill. */
.plat-brand--youtube   { background: var(--platform-youtube-bg);   color: var(--platform-youtube);   border: 1px solid var(--platform-youtube-border); }
.plat-brand--instagram { background: var(--platform-instagram-bg); color: var(--platform-instagram); border: 1px solid var(--platform-instagram-border); }
.plat-brand--facebook  { background: var(--platform-facebook-bg);  color: var(--platform-facebook);  border: 1px solid var(--platform-facebook-border); }
.plat-brand--tiktok    { background: var(--platform-tiktok-bg);    color: var(--platform-tiktok);    border: 1px solid var(--platform-tiktok-border); }
.plat-brand--pinterest { background: var(--platform-pinterest-bg); color: var(--platform-pinterest); border: 1px solid var(--platform-pinterest-border); }
.plat-brand--threads   { background: var(--platform-threads-bg);   color: var(--platform-threads);   border: 1px solid var(--platform-threads-border); }
/* Queue pills = SCHEDULED DESTINATIONS (where this post WILL go), never "posted".
   Hollow/outline treatment + a small clock so they read as planned targets and can
   never be mistaken for History's solid, checkmarked "posted" badges. */
.plat-brand--queue {
  background: transparent;
  border-style: dashed;
  opacity: 0.92;
  padding-left: 14px;
  position: relative;
}
.plat-brand--queue::before {
  content: '';
  position: absolute;
  left: 5px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px currentColor;
  /* tiny clock-hand tick */
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 1px 2.5px no-repeat;
  opacity: 0.85;
}
/* Scheduled-queue destination pills: ONE uniform chip, each in that platform's ASSIGNED
   color (the --platform-* palette used across History and the Dashboard) so the initials
   read the same everywhere. Solid, identical shape - no hollow/dashed variant. */
.qsp-line { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.qsp-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  line-height: 1.5;
}
.qsp-pill--youtube   { color: var(--platform-youtube);   background: var(--platform-youtube-bg);   border-color: var(--platform-youtube-border); }
.qsp-pill--instagram { color: var(--platform-instagram); background: var(--platform-instagram-bg); border-color: var(--platform-instagram-border); }
.qsp-pill--tiktok    { color: var(--platform-tiktok);    background: var(--platform-tiktok-bg);    border-color: var(--platform-tiktok-border); }
.qsp-pill--facebook  { color: var(--platform-facebook);  background: var(--platform-facebook-bg);  border-color: var(--platform-facebook-border); }
.qsp-pill--pinterest { color: var(--platform-pinterest); background: var(--platform-pinterest-bg); border-color: var(--platform-pinterest-border); }
.qsp-pill--threads   { color: var(--platform-threads);   background: var(--platform-threads-bg);   border-color: var(--platform-threads-border); }
/* Ready vs waiting: ready platforms stay solid with a check (they match "Post ready (N)");
   waiting platforms are dimmed with a clock so the user sees which targets aren't ready yet.
   Both keep the ASSIGNED platform color - only opacity + the little mark change. */
.qsp-pill .qsp-mark { margin-left: 4px; font-size: 9px; font-weight: 900; opacity: 0.9; }
.qsp-pill--pending  { opacity: 0.45; }

/* Day-detail overlay close button */
#cal-day-overlay .modal-close { cursor: pointer; }

/* Cal day empty state inside overlay */
.cal-day-empty {
  text-align: center;
  padding: 24px 20px;
  color: var(--text-muted);
  font-size: 13px;
}
.wf-error { padding: 24px; color: #F87171; font-size: 13px; }

/* ── Owner Admin Console ─────────────────────────────────────────────────── */
.admin-login-wrap { max-width: 360px; margin: 60px auto; text-align: center; }
.admin-login-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.admin-login-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.admin-tab {
  padding: 8px 16px; border: none; background: none; font-family: inherit;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.admin-tab:hover { color: var(--text-secondary); }
.admin-tab--active { color: #7AABFF; border-bottom-color: #7AABFF; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.admin-stat { background: var(--surface-raised, rgba(14,32,64,.6)); border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: center; }
.admin-stat-val { font-size: 24px; font-weight: 700; color: var(--text); }
.admin-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text-secondary); vertical-align: middle; }
.admin-table tr:hover td { background: rgba(255,255,255,.02); }
.admin-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.admin-badge--active, .admin-badge--trialing { background: rgba(60,180,60,.10); color: #70D090; }
.admin-badge--past_due, .admin-badge--unpaid { background: rgba(224,96,96,.10); color: #E08080; }
.admin-badge--canceled { background: rgba(140,140,140,.10); color: #909090; }
.admin-badge--unknown { background: rgba(140,140,140,.08); color: var(--text-muted); }
.admin-search-row { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.admin-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

/* Launch Readiness (Owner Admin) */
.lr-loading { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: 13px; }
.lr-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.lr-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 6px; letter-spacing: -0.02em; }
.lr-subtitle { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0; max-width: 560px; }
.lr-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.lr-checked { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.lr-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; border: 1px solid transparent; }
.lr-pill--ready { color: #8BC7FF; border-color: rgba(96, 140, 255, 0.35); background: rgba(59, 108, 255, 0.12); }
.lr-pill--review { color: var(--badge-pending-fg); border-color: var(--badge-pending-bd); background: var(--badge-pending-bg); }
.lr-pill--not-ready { color: #F0A0A0; border-color: rgba(224, 128, 128, 0.35); background: rgba(224, 96, 96, 0.10); }
.lr-summary-card { background: rgba(14, 32, 64, 0.55); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; backdrop-filter: blur(8px); }
.lr-summary-title { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.lr-summary-message { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.lr-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.lr-count { background: rgba(14, 32, 64, 0.45); border: 1px solid var(--border); border-radius: 10px; padding: 14px 12px; text-align: center; }
.lr-count-val { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.lr-count-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.lr-count--ready .lr-count-val { color: #8BC7FF; }
.lr-count--review .lr-count-val { color: #C084FC; }
.lr-count--failed .lr-count-val { color: #F0A0A0; }
.lr-rows { display: flex; flex-direction: column; gap: 10px; }
.lr-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--border); background: rgba(10, 22, 40, 0.55); }
.lr-row-icon { flex-shrink: 0; margin-top: 2px; }
.lr-icon--healthy { color: #8BC7FF; }
.lr-icon--warning { color: #C084FC; }
.lr-icon--failed { color: #F0A0A0; }
.lr-row-body { flex: 1; min-width: 0; }
.lr-row-top { margin-bottom: 6px; }
.lr-row-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.lr-row-message { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.lr-row-meta { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-muted); line-height: 1.45; }
.lr-row-detail { color: var(--text-muted); }
.lr-row-action { flex-shrink: 0; align-self: center; white-space: nowrap; }
.lr-error-card { background: rgba(224, 96, 96, 0.08); border: 1px solid rgba(224, 128, 128, 0.25); border-radius: 12px; padding: 20px 22px; }
.lr-error-title { font-size: 15px; font-weight: 700; color: #F0A0A0; margin-bottom: 8px; }
.lr-error-detail { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 8px; }
.lr-error-tech { font-size: 11px; color: var(--text-muted); }
@media (max-width: 720px) {
  .lr-header-actions { width: 100%; justify-content: flex-start; }
  .lr-row { flex-wrap: wrap; }
  .lr-row-action { width: 100%; margin-top: 4px; align-self: flex-start; }
  .lr-counts { grid-template-columns: 1fr; }
}

/* ── History fix panel v2 additions ─────────────────────────────────────── */

/* Header meta row - badge + date on one line */
.hrc-fp-header-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.hrc-fp-date--inline { font-size: 12px; color: var(--text-muted); }

/* FAILED / status badge */
.hrc-fp-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.hrc-fp-status-badge--fail { background: rgba(248,113,113,0.12); color: #F87171; border: 1px solid rgba(248,113,113,0.3); }
.hrc-fp-status-badge--warn { background: rgba(96,165,250,0.12); color: #60A5FA; border: 1px solid rgba(96,165,250,0.3); }

/* Inline section label (for collapsible summaries) */
.hrc-fp-section-label--inline { display: inline; }

/* Collapsible retry history */
.hrc-retry-hist-details { margin-bottom: 24px; }
.hrc-retry-hist-details[open] .hrc-lifecycle--collapsed { margin-top: 10px; }
.hrc-retry-hist-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hrc-retry-hist-summary::-webkit-details-marker { display: none; }
.hrc-retry-hist-summary::before {
  content: '›';
  font-size: 14px;
  color: var(--text-muted);
  transition: transform .15s;
  display: inline-block;
  line-height: 1;
}
.hrc-retry-hist-details[open] .hrc-retry-hist-summary::before { transform: rotate(90deg); }
.hrc-retry-hist-count { font-size: 11px; color: var(--text-muted); }

/* Collapsible success block */
.hrc-fp2-success-toggle {
  margin-bottom: 24px;
}
/* One calm line summarizing platforms already posted (so a single-platform retry
   doesn't read as a multi-platform post). */
.hrc-fp2-already {
  font-size: 12.5px; color: #8FA1B8; line-height: 1.5;
  margin: 12px 0 4px; padding: 9px 11px;
  background: rgba(95,208,138,0.06);
  border: 1px solid rgba(95,208,138,0.18);
  border-radius: 8px;
}
.hrc-fp2-already-check { color: #5FD08A; font-weight: 800; margin-right: 4px; }
.hrc-fp2-success-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
  color: var(--text-muted);
}
.hrc-fp2-success-summary::-webkit-details-marker { display: none; }
.hrc-fp2-success-check { color: #60A5FA; font-size: 13px; }
.hrc-fp2-success-detail { font-size: 11px; color: var(--text-muted); margin-top: 6px; padding-left: 2px; }

/* Secondary action text links */
.hrc-fp2-text-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.15);
  text-underline-offset: 2px;
  transition: color .13s;
}
.hrc-fp2-text-link:hover { color: var(--text-secondary); }
.hrc-fp2-text-link--danger { color: rgba(248,113,113,0.5); text-decoration-color: rgba(248,113,113,.2); }
.hrc-fp2-text-link--danger:hover { color: #F87171; }
/* Help guide link - styled to match the app, not a raw underlined browser link. */
.hrc-fp2-help { margin-top: 10px; }
.hrc-fp2-help-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent, #4F8DFF);
  text-decoration: none;
  cursor: pointer;
  transition: color .13s, gap .13s;
}
.hrc-fp2-help-link:hover { color: var(--accent-hover, #6FA0FF); gap: 8px; }
.hrc-fp2-help-arrow { transition: transform .13s; }
.hrc-fp2-help-link:hover .hrc-fp2-help-arrow { transform: translateX(2px); }

/* ── Clarity-first failure flyout ─────────────────────────────────────────
   Top summary (what failed / what was untouched), then a compact row per
   platform with one action; all prose hidden behind per-row Details. */
.hrc-fp2-summary {
  margin: 2px 0 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(59,108,255,.07);
  border: 1px solid rgba(59,108,255,.22);
}
.hrc-fp2-summary-title {
  font-size: 18px;
  font-weight: 800;
  color: #93C5FD;
  line-height: 1.25;
  margin-bottom: 6px;
}
.hrc-fp2-summary-line {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.hrc-fp2-platlist { margin-bottom: 6px; }

/* Platform-name heading on each row - tone tints it, reason sits below. */
.hrc-fp2-platname {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  color: #EAF2FB;
}
.hrc-fp2-platname--info { color: #5DA9FF; }
.hrc-fp2-platname--ok   { color: #60A5FA; }
.hrc-fp2-ok-check { font-weight: 800; margin-right: 2px; }
.hrc-fp2-block--ok .hrc-fp2-reason { color: var(--text-muted); }

/* The full explanation, shown only inside Details. */
.hrc-fp2-reason--full {
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* Visible, up-front fix steps for the "may already be posted" state - this is
   the one case where the how-to-fix is NOT hidden behind Details, because the
   user can only resolve it by checking and choosing mark-posted vs retry. */
.hrc-fp2-steps {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: 9px;
  background: rgba(59,108,255,.06);
  border: 1px solid rgba(59,108,255,.20);
}
.hrc-fp2-steps strong { color: var(--strong, #EAF2FB); font-weight: 600; }

/* Per-row Details toggle - quiet by default, holds all troubleshooting prose. */
.hrc-fp2-details { margin-top: 10px; }
.hrc-fp2-details-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .13s;
}
.hrc-fp2-details-summary:hover { color: var(--text-secondary); }
.hrc-fp2-details-summary::-webkit-details-marker { display: none; }
.hrc-fp2-details-summary::before {
  content: "›";
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transition: transform .13s;
}
.hrc-fp2-details[open] .hrc-fp2-details-summary::before { transform: rotate(90deg); }
.hrc-fp2-details-body { margin-top: 10px; }
.hrc-fp2-details-body .hrc-action-btn--ghost { margin: 4px 0 2px; }

/* Post details - collapsed metadata at the bottom, opened via chevron. */
.hrc-postdetails { margin-bottom: 24px; }
.hrc-postdetails-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hrc-postdetails-summary::-webkit-details-marker { display: none; }
.hrc-postdetails-chevron {
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  transition: transform .13s;
}
.hrc-postdetails[open] .hrc-postdetails-chevron { transform: rotate(90deg); }
.hrc-postdetails-body { margin-top: 12px; }

/* ── Connected card - calm finished state ─────────────────────────────── */
.conn-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 0;
}
.conn-card-top-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: #F5F5F3;
  letter-spacing: -0.01em;
}
/* Unified platform-card top row (pccTop): ONE grid for every card + every state so badges
   and gears line up and there is NO divider. icon | name+purpose | badge | gear-slot. */
.pcc-top {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 36px;
  align-items: center;
  column-gap: 12px;
  padding: 14px 18px 0;   /* deliberately no border-bottom -> no two-section feel */
}
/* Force a consistent 36px icon regardless of whether the card passed a compact or full icon. */
.pcc-top > .conn-platform-icon { width: 36px; height: 36px; border-radius: 10px; }
.pcc-top > .conn-platform-icon > .plat-logo,
.pcc-top > .plat-logo { width: 36px; height: 36px; border-radius: 10px; }
.pcc-head { min-width: 0; }
.pcc-top .conn-platform-name { font-size: 15px; font-weight: 700; color: #F5F5F3; letter-spacing: -0.01em; }
.pcc-top .conn-platform-sub  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pcc-top .conn-status-badge  { justify-self: end; }
/* Empty spacer that occupies the gear column on cards with no settings, so the badge
   column stays aligned across connected and not-yet-connected cards. */
.conn-gear-slot { width: 36px; height: 36px; display: block; }
.conn-platform-icon--compact {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.plat-logo--compact {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.conn-gear-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #A8AEBA;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.conn-gear-btn:hover {
  color: #E7E7E3;
  background: rgba(255, 255, 255, 0.06);
}
.conn-card-body--connected {
  padding: 6px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conn-account-line {
  font-size: 14px;
  font-weight: 600;
  color: #F5F5F3;
  line-height: 1.3;
}
.conn-ready-line {
  font-size: 13px;
  color: #60A5FA;
  line-height: 1.35;
}
/* Verified line + the view/manage link share ONE row: link pushed to the right ("up and
   over") so it never adds a separate bottom row of dead space. */
.conn-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.conn-meta-link { margin-left: auto; white-space: nowrap; }
.conn-meta-link .conn-view-link { font-size: 12px; }
.conn-verified-line {
  display: block;
  font-size: 12px;
  color: #8A90A2;
  line-height: 1.4;
}
.conn-verified-line--warn { color: #5DA9FF; }
/* Pending / not-available cards: same tile layout as connected, just muted so they read
   as "not yet available" rather than a broken/debug section. No heavy fill or box. */
.conn-card-body--muted .conn-account-line { color: #B8BDC9; font-weight: 600; }
.conn-card-body--muted .conn-ready-line   { color: #8A90A2; }
.conn-card-body--muted .conn-verified-line { color: #6E7484; }
.conn-insights-notice {
  margin-top: 8px;
  font-size: 12px;
  color: #A7AFBE;
  line-height: 1.45;
}

/* Connection settings modal */
.conn-settings-modal {
  width: min(420px, calc(100vw - 40px));
}
.conn-settings-body {
  padding: 18px 22px 20px;
}
.conn-settings-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.conn-settings-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}
.conn-settings-label {
  color: #8A90A2;
  flex-shrink: 0;
}
.conn-settings-value {
  color: #F5F5F3;
  font-weight: 500;
  text-align: right;
}
.conn-settings-value--ok { color: #93C5FD; }
.conn-settings-value--warn { color: #5DA9FF; }
.conn-settings-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.conn-settings-action {
  width: 100%;
  justify-content: center;
}
.conn-settings-danger {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.conn-settings-danger-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A90A2;
  margin-bottom: 10px;
}
.conn-settings-disconnect {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(224, 96, 96, 0.22);
  background: rgba(224, 96, 96, 0.08);
  color: #F87171;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.conn-settings-disconnect:hover {
  background: rgba(224, 96, 96, 0.14);
  border-color: rgba(224, 96, 96, 0.32);
}

/* ── Connection card View Details (legacy - disconnected states only) ─── */
.conn-details-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.15);
  text-underline-offset: 2px;
  transition: color .13s;
}
.conn-details-link:hover { color: var(--text-secondary); }

.conn-details-panel {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.conn-detail-btn {
  background: none;
  border: none;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--border);
  transition: color .13s;
}
.conn-detail-btn:last-child { border-bottom: none; }
.conn-detail-btn:hover { color: var(--text); }
.conn-detail-btn--danger { color: rgba(248,113,113,0.6); }
.conn-detail-btn--danger:hover { color: #F87171; }

/* ── Queue page redesign ─────────────────────────────────────────────────── */

/* Page header */
.queue-page-header {
  margin-bottom: 12px;
}
/* The page title "Queue" lives in the topbar; here we show only the count so the
   word is not repeated. */
.queue-subcount {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ── Queue operational banner (scheduler off) ──────────────────────────────── */
.queue-status-wrap { margin-bottom: 14px; }
/* When the scheduler is on there is no banner, so don't leave a dead gap. */
.queue-status-wrap:empty { margin: 0; }
/* Count + status chips on one row: count left, chips right, spaced cleanly. */
.queue-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.queue-op-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(232, 166, 106, 0.28);
  background: linear-gradient(180deg, rgba(232,166,106,0.06) 0%, rgba(255,255,255,0.02) 100%);
  margin-bottom: 10px;
}
.queue-op-dot {
  width: 9px; height: 9px; flex-shrink: 0;
  border-radius: 50%;
  background: #E8A66A;
  box-shadow: 0 0 0 3px rgba(232,166,106,0.16);
}
.queue-op-copy { flex: 1; min-width: 0; }
.queue-op-title { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.queue-op-body { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-top: 2px; }
.queue-op-btn { flex-shrink: 0; white-space: nowrap; }
.queue-op-banner--missed {
  border-color: rgba(0, 198, 255, 0.35);
  background: linear-gradient(180deg, rgba(0,198,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
}
.queue-op-dot--missed {
  background: #5DA9FF;
  box-shadow: 0 0 0 3px rgba(0,198,255,0.18);
}

/* Low-emphasis health chips (calm when healthy; only a problem is elevated). */
.queue-health-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.queue-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Match the Dashboard health strip exactly: OK status values are blue (#8BC7FF). */
.queue-chip strong { font-weight: 600; color: #8BC7FF; }
/* Healthy: tiny, calm, muted accent dot - reassures without shouting. */
.queue-chip-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(120, 190, 160, 0.6); flex-shrink: 0;
}
/* Warning (amber) - reserved for "needs attention soon". */
.queue-chip--warn { color: #E8A66A; }
.queue-chip--warn strong { color: #E8A66A; }
.queue-chip--warn .queue-chip-dot { background: #E8A66A; }
/* Error/blocking (rose) - disconnected platform, inactive license. Stands out. */
.queue-chip--error strong { color: #E68A8A; }
.queue-chip--error .queue-chip-dot { background: #E07C7C; width: 6px; height: 6px; }
.queue-chip-link {
  background: none; border: none; cursor: pointer;
  color: #5BC8FF; font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 0 0 0 4px;
}
.queue-chip-link:hover { text-decoration: underline; }

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

/* Queue list header + row grid defined above - no flex width overrides */

/* Platform text display */
.qi-plat-text { font-size: 12px; color: var(--text-secondary); }
.qi-plat-text--none { color: var(--text-muted); }

/* Bulk selection bar */
.queue-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 6px;
  background: rgba(96,165,250,0.06);
  border: 1px solid rgba(96,165,250,0.18);
  border-radius: var(--r);
}
.queue-bulk-count { font-size: 12px; color: #8BC7FF; font-weight: 600; margin-right: 4px; }
/* Archive/History bulk-selection bar - mirrors the queue bulk bar */
.hist-bulk-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 0 0 12px; background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.24); border-radius: var(--r); }
.hist-select-cb { cursor: pointer; vertical-align: middle; margin-right: 6px; }
.hist-num { vertical-align: middle; }
.hist-row-selected { background: rgba(59,130,246,0.08); }

/* Sub-items in more menu */
.qi-more-item--sub { color: var(--text-muted); font-size: 11.5px; }

/* Hide old select-all header if it somehow renders */
.queue-select-header { display: none; }

/* ── Missed-window recovery row (Queue) ─────────────────────────────────────
   A queued post whose time passed while TRESSO was closed/asleep. Recovery
   state, NOT a failure: subtle amber + brand-blue treatment, never red. */
/* Calm navy row (same as the rest of Queue) - the only missed cue is a thin yellow
   left accent plus the small yellow heading. No heavy yellow wash, no big box. */
.queue-item.qi--missed {
  box-shadow: inset 2px 0 0 rgba(192,132,252,0.40);
}
.queue-item.qi--missed:hover {
  box-shadow: inset 2px 0 0 rgba(192,132,252,0.55);
}
/* Selection ALWAYS wins the left bar: a selected row shows the blue selection bar even
   when it is also "missed" (purple). Higher specificity + !important beat the status accent
   and any source-order tie so checking a row is never ambiguous. */
.queue-item.queue-row.selected,
.queue-item.qi--missed.selected,
.queue-item.qi--missed.selected:hover {
  box-shadow: inset 2px 0 0 rgba(96, 165, 250, 0.95) !important;
}
.qi-missed { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.qi-missed-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #B8A6CE; letter-spacing: 0.005em; line-height: 1.2;
  white-space: nowrap;
}
.qi-missed-title svg { color: #C084FC; }
.qi-missed-when { font-size: 11.5px; color: #9FB0C8; line-height: 1.3; white-space: nowrap; }

/* Non-blocking "posting" pulse toast (replaces the old blocking modal). */
.posting-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px;
  background: rgba(15,35,66,0.96);
  border: 1px solid rgba(96,165,250,0.32);
  border-radius: 12px;
  color: #DCEAFF; font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.38);
  pointer-events: none;
}
.posting-toast-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #60A5FA; flex-shrink: 0;
  animation: posting-pulse 1.1s ease-in-out infinite;
}

/* Reschedule = visible secondary action beside Post Now (blue outline, not a black box). */
.qi-btn--reschedule {
  background: transparent;
  border: 1px solid rgba(96,165,250,0.40);
  color: #BFD4FF;
}
.qi-btn--reschedule:hover {
  border-color: rgba(96,165,250,0.62);
  background: rgba(96,165,250,0.12);
  color: #F5F9FF;
}
/* Missed row: actions stay on one tight horizontal line (Post Now | Choose New Time | menu). */
.qi--missed .queue-actions,
.qi--missed .qi-acts {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.qi--missed .qi-row-act { padding: 7px 11px; font-size: 12px; white-space: nowrap; }

/* ── Failed-tab recovery rows (History) ─────────────────────────────────────
   Each failed row explains, in plain English, what happened and what to do -
   no decoding IG/YT chips, no red "ATTEMPTED". */
.hist-recovery { margin-top: 5px; display: flex; flex-direction: column; gap: 1px; }
/* "Not posted" = the problem (rose); "Needs retry" = calm cyan (NO mustard). */
.hist-recovery-status { font-size: 13px; font-weight: 700; color: #F08C8C; letter-spacing: 0; }
.hist-recovery-status--partial { color: #60A5FA; }   /* light blue = needs retry (was cyan) */
.hist-recovery-help { font-size: 13px; color: #8FA1B8; font-weight: 500; line-height: 1.3; }
/* Per-platform inline issue summary on a failed/partial row ("YouTube needs retry  ·
   Instagram did not confirm"). Soft light-blue so the issue is readable, not alarming. */
.hist-issue-summary { font-size: 12px; color: #9FB8D6; font-weight: 500; line-height: 1.45; margin-top: 4px; }

/* Compact date cell: date on top (aligned across rows), small "Tried" tag below. */
.hist-date2 { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hist-date2-when { font-size: 13px; color: #D7E3F5; font-weight: 600; white-space: nowrap; }
.hist-date2-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6F86A6; }

/* Platform status pills (failed tab): small, muted - failed quieter rose, posted quieter blue. */
.fp-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.fp-pill {
  display: inline-flex; align-items: center;
  height: 21px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: 0;
  border: 1px solid transparent;
}
/* Generic fallback (kept) - platform-aware rules below override by specificity. */
.fp-pill--ok   { background: rgba(96,165,250,0.08); color: #9DBFE0; border-color: rgba(96,165,250,0.18); }
.fp-pill--fail { background: rgba(224,96,96,0.09);  color: #DEA3A3; border-color: rgba(224,96,96,0.22); }
.fp-pill--none { color: var(--text-muted); border-color: transparent; }
/* Platform-aware status. FAILED = platform-tinted + recognizable; POSTED = same
   family, softer/calmer. IG=purple, YT=coral, TT=cyan (TRESSO platform palette). */
.fp-pill--fail.fp-pill--instagram { background: rgba(192,132,252,0.15); color: #CBA6F2; border-color: rgba(192,132,252,0.34); }
.fp-pill--fail.fp-pill--youtube   { background: rgba(248,113,113,0.15); color: #F1A0A0; border-color: rgba(248,113,113,0.34); }
.fp-pill--fail.fp-pill--tiktok    { background: rgba(34,211,238,0.14);  color: #7FD3E6; border-color: rgba(34,211,238,0.34); }
.fp-pill--ok.fp-pill--instagram { background: rgba(192,132,252,0.09); color: #B89BDD; border-color: rgba(192,132,252,0.20); }
.fp-pill--ok.fp-pill--youtube   { background: rgba(248,113,113,0.09); color: #DBA0A0; border-color: rgba(248,113,113,0.20); }
.fp-pill--ok.fp-pill--tiktok    { background: rgba(34,211,238,0.08);  color: #86C7D6; border-color: rgba(34,211,238,0.20); }

/* ── Canonical compact platform-status chip (used in EVERY dense table) ────────
   "IG" posted / "YT" failed / "TT" pending. The chip hue = platform
   (IG purple, YT coral, TT cyan); the icon glyph + colour = status. */
.pstat-group { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pstat {
  display: inline-flex; align-items: center; gap: 4px;
  height: 21px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.pstat--none { color: var(--text-muted); }
.pstat-abbr { font-weight: 700; }
/* Status glyph a touch larger + breathing room from the abbr; subtle hover brighten. */
.pstat-icon { font-size: 16px; line-height: 1; font-weight: 900; margin-left: 3px; transition: filter .15s; }
.pstat:hover .pstat-icon { filter: brightness(1.18); }
/* Platform hue */
.pstat--instagram { background: var(--platform-instagram-bg); color: var(--platform-instagram); border-color: var(--platform-instagram-border); }
.pstat--youtube   { background: var(--platform-youtube-bg);   color: var(--platform-youtube);   border-color: var(--platform-youtube-border); }
.pstat--tiktok    { background: var(--platform-tiktok-bg);    color: var(--platform-tiktok);    border-color: var(--platform-tiktok-border); }
.pstat--facebook  { background: var(--platform-facebook-bg);  color: var(--platform-facebook);  border-color: var(--platform-facebook-border); }
.pstat--threads   { background: var(--platform-threads-bg);   color: var(--platform-threads);   border-color: var(--platform-threads-border); }
/* Status icon colour */
.pstat--ok      .pstat-icon { color: #60A5FA; }
.pstat--fail    .pstat-icon { color: #F87171; }
.pstat--missed  .pstat-icon { color: #5DA9FF; }
.pstat--pending .pstat-icon { color: rgba(255,255,255,0.55); }
.pstat--draft   .pstat-icon { color: #5DA9FF; }   /* uploaded as draft - finish in TikTok */
.pstat--sandbox .pstat-icon { color: #60A5FA; }   /* created in sandbox - not a live production post */
.pstat--sandbox { opacity: 0.95; }
/* Posted chips read calmer; failed chips get a touch more presence. */
.pstat--ok    { opacity: 0.92; }
.pstat--fail  { border-width: 1px; box-shadow: inset 0 0 0 1px rgba(248,113,113,0.10); }
.pstat--missed { border-width: 1px; box-shadow: inset 0 0 0 1px rgba(0,198,255,0.12); opacity: 0.95; }
.pstat--pending { opacity: 0.85; }
.qi-plats .pstat--pending .pstat-icon { animation: posting-pulse 1.4s ease-in-out infinite; }

/* Action column: compact calm primary retry on top, clearly-visible secondary
   row beneath. Right-aligned inside the fixed 196px lane so nothing clips. */
/* Action buttons WRAP to a second line when "Finish YouTube Upload" + "Retry X" + Edit + ⋯
   can't all fit on one line, instead of overflowing leftward onto the platform pills. */
.fp-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; min-width: 0; }
.fp-retry-btn {
  height: 30px; padding: 0 14px; border-radius: 8px;
  background: #2F58C0; color: #EAF2FF;
  border: 1px solid rgba(120,160,255,0.22); box-shadow: none; text-shadow: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0; line-height: 1;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .13s;
}
.fp-retry-btn:hover { background: #3A66D4; filter: none; }
/* Queuing / retry in progress — must pulse visibly (same posture as Post Now). */
.fp-retry-btn.btn-pulsing {
  opacity: 1 !important;
  pointer-events: none;
  cursor: progress;
  animation: fp-retry-working 1.1s ease-in-out infinite;
}
@keyframes fp-retry-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(90, 85, 244, 0.35); }
  50%      { box-shadow: 0 0 14px 2px rgba(96, 165, 250, 0.55); }
}
@keyframes fp-retry-working {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-retry-btn { animation: none; }
  .fp-retry-btn.btn-pulsing { animation: none; filter: brightness(1.08); }
  .qi-chip--retry { animation: none; }
}
/* Source file gone: not a real retry - a muted, honest "re-import" prompt instead. */
.fp-retry-btn--reimport {
  background: none; color: #5DA9FF;
  border: 1px solid rgba(230,184,115,0.40); box-shadow: none;
  animation: none;
}
.fp-retry-btn--reimport:hover { filter: none; background: rgba(230,184,115,0.08); }
/* Edit on failed rows: compact ghost (failed posts are fully editable before retry). */
.fp-edit-btn {
  height: 30px; padding: 0 12px; border-radius: 9px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(140,170,220,0.28); color: #C3D4EA;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
}
.fp-edit-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(140,170,220,0.42); color: #EAF2FF; }
.fp-actions-sub { display: flex; align-items: center; gap: 7px; }
.fp-link {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: #9AAEC6;
}
.fp-link:hover { color: #C5D6EC; text-decoration: underline; }
.fp-sep { color: var(--text-muted); opacity: 0.45; font-size: 11px; }
.fp-actions .qi-more-btn.fp-more-btn {
  width: 26px; height: 24px; border-radius: 7px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #8FA1B8;
}

/* Compact recovery bands, not oversized cards - dense + scannable. */
.history-grid--failed .history-grid-row--data {
  background: rgba(12, 31, 59, 0.78);
  border: 1px solid rgba(96, 165, 250, 0.10);
  box-shadow: none;
  border-radius: 14px;
  min-height: 78px;
  padding: 12px 16px;
  margin-bottom: 7px;
  align-items: center;
}
.history-grid--failed .history-grid-row--data:hover {
  background: rgba(15, 40, 76, 0.88);
  border-color: rgba(96, 165, 250, 0.18);
}
/* Column headers: tight, uppercase, aligned to the row grid; ACTION right. */
.history-grid--failed .history-grid-row--head {
  padding: 0 16px 8px;
  min-height: 0;
}
.history-grid--failed .history-grid-row--head .history-cell {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #6F86A6;
}
.history-grid--failed .history-grid-row--head .history-cell--actions {
  text-align: right; justify-self: end;
}
/* Tighten the POST cell so the row scans instead of sprawling. */
.history-grid--failed .hist-recovery { margin-top: 3px; gap: 0; }
.history-grid--failed .hist-recovery-help { line-height: 1.3; }
.history-grid--failed .history-video-name { margin-bottom: 1px; }

/* Failed-tab section header (replaces the loose "Need help" line). Compact, no big card. */
.fp-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 4px 0 20px; }
.fp-section-titles { min-width: 0; }
.fp-section-title { font-size: 16px; font-weight: 700; color: #EAF2FF; line-height: 1.2; }
.fp-section-count { color: #8FA1B8; font-weight: 600; }
.fp-section-sub { font-size: 13px; color: #8FA1B8; font-weight: 500; margin-top: 3px; line-height: 1.4; }
.fp-section-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fp-section-actions .btn-secondary { background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.35); color: #9DBFE0; }
.fp-section-actions .btn-secondary:hover { background: rgba(96,165,250,0.20); }
.fp-export-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: #8FA1B8; }
.fp-export-link:hover { color: #C5D6EC; text-decoration: underline; }
.history-date-tried { color: var(--text-muted); font-weight: 600; margin-right: 4px; }
.hrc-failed-help-label { font-size: 13px; color: var(--text-muted); margin-right: 8px; }
.history-actions--failed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }

/* TikTok DRAFT chip - video.upload uploads to the creator's drafts, not live.
   Amber so it never reads as a finished green "posted" check. */
.qi-plat-col--draft { background: rgba(192,132,252,0.12); border-color: rgba(192,132,252,0.34); color: #C084FC; }
.qi-plat-draft-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #C084FC; margin-left: 3px; }

/* Bulk Edit - inline "create campaign" panel (create without leaving the modal). */
.qbe-camp-create {
  margin-top: 8px;
  padding: 14px;
  border: 1px solid rgba(96,165,250,0.28);
  border-radius: 10px;
  background: rgba(96,165,250,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qbe-camp-create-title { font-size: 13px; font-weight: 700; color: #E2ECFF; }
.qbe-camp-create-help { font-size: 11.5px; color: #9FB0C8; line-height: 1.4; }
.qbe-camp-create-colors { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qbe-camp-create-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Feature Ideas (Suggest a Feature) - help/support section */
.feat-card { margin-top: 22px; padding: 20px 22px; background: rgba(255,255,255,0.03); border: 1px solid rgba(140,170,220,0.16); border-radius: 12px; }
.feat-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: #EAF2FB; }
.feat-sub { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: #8AA6C6; }
.feat-label { display: block; margin: 12px 0 5px; font-size: 12.5px; font-weight: 600; color: #C7D9EE; }
.feat-opt { color: #8AA6C6; font-weight: 400; }
.feat-input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 1px solid rgba(140,170,220,0.24); border-radius: 8px; color: #EAF2FB; font-size: 13px; padding: 9px 11px; font-family: inherit; }
.feat-input:focus { outline: none; border-color: #4F8DFF; }
textarea.feat-input { resize: vertical; }
.feat-send { margin-top: 16px; }
.feat-msg { margin-top: 10px; font-size: 13px; }
.feat-msg--err { color: #74B4FF; }
.feat-thanks { padding: 4px 0; }
.feat-thanks-title { font-size: 15px; font-weight: 800; color: #6FD08C; margin-bottom: 6px; }
.feat-thanks-body { font-size: 13px; line-height: 1.55; color: #C7D9EE; margin: 0; }

/* ── Connected Destinations — Connections page (Phase 3 Step 4) ─────────────────── */
.conn-hdr { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.conn-title { font-size:24px; font-weight:800; margin:0 0 4px; }
.conn-sub { color:var(--text-muted); font-size:14px; margin:0; }

.dest-summary { background:var(--panel,#122A4E); border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:18px; }
.dest-sum-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dest-sum-eyebrow { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.dest-sum-count { font-size:20px; color:var(--text); margin-top:2px; }
.dest-sum-count strong { font-size:26px; font-weight:800; }
.dest-cap-bar { height:10px; border-radius:999px; background:rgba(70,100,140,0.20); overflow:hidden; margin:14px 0 8px; }
.dest-cap-bar > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#2456C8 0%,#3B82F6 55%,#5FA0FF 100%); }
.dest-sum-note { font-size:12.5px; color:var(--text-muted); }
.dest-sum-actions { margin-top:10px; }
.dest-link-btn { background:none; border:none; color:#60A5FA; font-size:13px; font-weight:600; cursor:pointer; padding:0; }

.dest-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.dest-tab { background:none; border:none; padding:10px 16px; font-size:14px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.dest-tab.is-active { color:var(--text); border-bottom-color:#3B82F6; }

.dest-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.dest-filters { display:flex; gap:6px; }
.dest-filter { background:none; border:1px solid rgba(88,144,214,0.18); border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:color .16s, border-color .16s, background .16s; }
.dest-filter:hover { color:#cfe0f6; border-color:rgba(96,165,250,0.3); }
.dest-filter.is-active { background:rgba(59,130,246,0.14); border-color:rgba(96,165,250,0.38); color:#8FBEFF; }
.dest-filter-n { margin-left:6px; font-size:11px; font-weight:700; opacity:0.55; }
.dest-filter.is-active .dest-filter-n { opacity:0.9; }
.dest-search { background:var(--input-bg,#0b1930); border:1px solid var(--border); color:var(--text); border-radius:9px; padding:8px 12px; font-size:13px; min-width:200px; }

/* Compact settings-table density (not stacked hero cards). */
.dest-group { background:var(--panel,#122A4E); border:1px solid var(--border); border-radius:14px; margin-bottom:12px; overflow:hidden; }
.dest-group-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; padding:0 24px; border-bottom:1px solid var(--border); }
.dest-group-name { display:flex; align-items:baseline; font-weight:750; font-size:20px; line-height:1.15; color:var(--text); }
.dest-group-count { color:var(--text-muted); font-weight:650; font-size:15px; margin-left:8px; opacity:.72; }
.dest-add-plat { display:inline-flex; align-items:center; height:36px; padding:0 16px; background:rgba(59,130,246,0.12); border:1px solid rgba(96,165,250,0.32); color:#7FB0FF; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap; }
.dest-add-plat:disabled { opacity:.45; cursor:not-allowed; }
.dest-rows { display:flex; flex-direction:column; }
.dest-row { display:grid; grid-template-columns:minmax(260px,1fr) 132px 200px 70px 116px; align-items:center; column-gap:18px; min-height:56px; padding:0 24px; border-bottom:1px solid rgba(148,163,184,0.08); }
.dest-row:last-child { border-bottom:none; }
.dest-row.is-disabled { opacity:.62; }
.dest-account-cell { display:flex; align-items:center; gap:14px; min-width:0; }
.dest-row-ic { width:28px; height:28px; border-radius:7px; flex:0 0 28px; object-fit:contain; display:block; }
.dest-row-name { font-weight:700; font-size:16px; line-height:1.2; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dest-row-last { color:var(--text-muted); font-size:15px; line-height:1.2; opacity:.72; }
.dest-row-sets { color:var(--text-muted); font-size:15px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.9; }
.dest-row-actions { text-align:right; }
.dest-row-act { display:inline-flex; align-items:center; height:34px; padding:0 16px; background:none; border:1px solid var(--border); border-radius:10px; font-size:15px; font-weight:650; color:var(--text); cursor:pointer; }
.dest-row-act:hover { border-color:rgba(96,165,250,0.5); }
.dest-row-act--danger { color:#F87171; }
.dest-row-empty, .dest-set-empty { padding:12px 24px; color:var(--text-muted); font-size:13px; }

/* Status chips — text carries the meaning; color is support only. No green anywhere. */
.dest-chip { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; }
.dest-chip--connected { background:rgba(96,165,250,0.15); color:#7FB0FF; }
.dest-chip--needs_reconnect, .dest-chip--failed, .dest-chip--missing_permission, .dest-chip--token_expired, .dest-chip--needs_app_setup { background:rgba(239,68,68,0.14); color:#F87171; }
.dest-chip--checking { background:rgba(148,163,184,0.16); color:var(--text-muted); }
.dest-chip--disabled { background:rgba(148,163,184,0.14); color:#94A3B8; }

.dest-empty { text-align:center; padding:48px 20px; color:var(--text-muted); }
.dest-empty h3 { color:var(--text); margin:0 0 8px; }
.dest-empty p { margin:0 0 16px; }
.dest-loading { padding:30px; text-align:center; color:var(--text-muted); }

/* ── Connections page — compact Stripe-style settings cards (equal height, calm) ── */
.connections-provider-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:stretch; }
@media (max-width:1180px) { .connections-provider-grid { grid-template-columns:1fr; } }
.connection-provider-card { display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:rgba(16,34,64,0.45); border:1px solid rgba(88,144,214,0.13); }
.connection-provider-card.has-many-destinations { grid-column:1 / -1; }
/* Header: logo + name + muted count chip + quiet action - a subtle tint separates it from the rows below */
.conn-hd { display:flex; align-items:center; gap:9px; padding:10px 15px; background:rgba(88,144,214,0.055); border-bottom:1px solid rgba(88,144,214,0.12); }
.conn-hd-logo { width:22px; height:22px; flex:0 0 22px; border-radius:6px; object-fit:contain; display:block; }
.conn-hd-name { font-size:15px; font-weight:700; line-height:1.15; color:#eef4ff; white-space:nowrap; }
/* Quiet metadata — plain muted text, never a pill that competes with the platform name. */
.conn-hd-count { font-size:11.5px; font-weight:600; line-height:1; color:rgba(196,214,240,0.42); background:none; padding:0; white-space:nowrap; letter-spacing:0.01em; }
.conn-hd-count--empty { color:rgba(196,214,240,0.32); }
/* Add account = subtle outline; same height + min-width as Manage so buttons read as one system. */
.conn-hd-btn { margin-left:auto; display:inline-flex; align-items:center; justify-content:center; height:30px; min-width:96px; padding:0 14px; border-radius:8px; font-size:12.5px; font-weight:650; white-space:nowrap; cursor:pointer; background:none; border:1px solid rgba(88,144,214,0.20); color:rgba(220,232,248,0.90); }
.conn-hd-btn:hover { border-color:rgba(96,165,250,0.5); color:#fff; }
.conn-hd-btn--connect { background:rgba(59,130,246,0.14); border-color:rgba(96,165,250,0.4); color:#8FBEFF; font-weight:700; }
.conn-hd-btn:disabled { opacity:.45; cursor:not-allowed; }
.conn-bd { display:flex; flex-direction:column; flex:1; padding:4px 16px 6px; }
.conn-empty { padding:16px 0; font-size:13px; color:rgba(196,214,240,0.55); }
/* Destination row: avatar + (name / muted health) + quiet Manage; consistent height per row */
.cd-item { display:flex; align-items:center; gap:12px; padding:9px 0; min-height:46px; }
.cd-item + .cd-item { border-top:1px solid rgba(88,144,214,0.10); }
.cd-item.is-disabled { opacity:.6; }
.cd-ava { width:22px; height:22px; flex:0 0 22px; border-radius:6px; object-fit:contain; display:block; }
.cd-id { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.cd-nameline { display:flex; align-items:center; gap:8px; min-width:0; }
.cd-dot { width:7px; height:7px; border-radius:50%; flex:0 0 7px; }
.cd-dot--connected { background:#3B82F6; box-shadow:0 0 6px rgba(59,130,246,0.55); }
.cd-dot--needs_reconnect, .cd-dot--token_expired, .cd-dot--needs_app_setup { background:#F87171; box-shadow:0 0 6px rgba(248,113,113,0.5); }
.cd-dot--warn { background:#F87171; box-shadow:0 0 6px rgba(248,113,113,0.5); }
.cd-dot--disabled { background:rgba(148,163,184,0.55); }
.cd-dot--muted { background:#7E93AE; box-shadow:0 0 5px rgba(126,147,174,0.45); }  /* connected but gated (not postable yet) */
.cd-name { font-size:14.5px; font-weight:650; line-height:1.2; color:#eaf2ff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* Status line aligns under the name (a connected row shows NO dot; only needs-attention rows do). */
.cd-sub { font-size:12px; line-height:1.2; padding-left:0; color:rgba(196,214,240,0.5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-sub--warn { color:#FCA5A5; }
/* Manage is deliberately lower-emphasis than the header Add/Connect: a quiet text button, same height. */
/* Manage = outline button; matches Add account's height + min-width for a clean button hierarchy. */
.cd-manage { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; height:30px; min-width:96px; padding:0 14px; border-radius:8px; font-size:12.5px; font-weight:600; background:none; border:1px solid rgba(88,144,214,0.30); color:rgba(210,224,244,0.85); cursor:pointer; transition:color .16s, background .16s, border-color .16s; }
.cd-manage:hover { color:#fff; background:rgba(88,144,214,0.14); }
.cd-manage--reconnect { border-color:rgba(248,113,113,0.42); color:#FCA5A5; }
.cd-manage--reconnect:hover { border-color:rgba(248,113,113,0.7); color:#fff; }
/* Destination Sets — empty-state explainer */
.dse-explain { max-width:780px; margin:22px auto 0; text-align:center; }
.dse-intro h3 { font-size:20px; font-weight:750; color:#f2f7ff; margin:0 0 8px; }
.dse-intro p { font-size:14.5px; line-height:1.6; color:rgba(202,218,240,0.82); margin:0 auto; max-width:62ch; }
.dse-steps { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:26px 0; text-align:left; }
@media (max-width:820px) { .dse-steps { grid-template-columns:1fr; } }
.dse-step { display:flex; gap:12px; padding:16px; border-radius:13px; background:rgba(16,34,64,0.5); border:1px solid rgba(88,144,214,0.14); }
.dse-num { flex:0 0 26px; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:13px; font-weight:750; color:#8FBEFF; background:rgba(59,130,246,0.16); border:1px solid rgba(96,165,250,0.35); }
.dse-step h4 { font-size:14px; font-weight:700; color:#eaf2ff; margin:2px 0 5px; line-height:1.25; }
.dse-step p { font-size:12.5px; line-height:1.5; color:rgba(196,214,240,0.72); margin:0; }
.dse-example { display:flex; align-items:center; gap:12px; text-align:left; padding:14px 16px; border-radius:12px; background:rgba(9,20,38,0.55); border:1px solid rgba(88,144,214,0.14); margin:0 0 22px; }
.dse-example-tag { flex:0 0 auto; font-size:10.5px; font-weight:750; letter-spacing:0.08em; text-transform:uppercase; color:#8FBEFF; background:rgba(59,130,246,0.14); padding:4px 9px; border-radius:999px; }
.dse-example p { font-size:13.5px; line-height:1.55; color:rgba(202,218,240,0.85); margin:0; }
.dse-example strong { color:#eaf2ff; font-weight:700; }

/* Manage side panel */
.dest-panel-scrim { position:fixed; inset:0; background:rgba(4,8,16,0.55); z-index:900; }
.dest-panel { position:fixed; top:0; right:0; height:100vh; width:420px; max-width:92vw; background:var(--panel,#0f2340); border-left:1px solid var(--border); z-index:901; overflow-y:auto; box-shadow:-24px 0 60px rgba(0,0,0,0.4); }
.dest-panel-hd { display:flex; align-items:flex-start; justify-content:space-between; padding:20px; border-bottom:1px solid var(--border); }
.dest-panel-eyebrow { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.dest-panel-hd h3 { margin:4px 0 0; font-size:19px; }
.dest-panel-bd { padding:20px; }
.dest-panel-status { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.dest-panel-sub { color:var(--text-muted); font-size:12px; }
.dest-panel-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.dest-panel-meta > div { display:flex; flex-direction:column; gap:2px; }
.dest-panel-meta span { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.dest-panel-meta b { font-size:13.5px; color:var(--text); font-weight:600; }
.dest-panel-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.dest-field { display:block; margin-bottom:14px; }
.dest-field > span { display:block; font-size:12.5px; font-weight:600; color:var(--text-sec,#9EB0C2); margin-bottom:6px; }
.dest-field small { display:block; color:var(--text-muted); font-size:11.5px; margin-top:5px; }
.dest-rename-row { display:flex; gap:8px; }
.dest-rename-row .form-control { flex:1; }
.dest-remove-warn { color:#F8B4B4; font-size:12.5px; background:rgba(239,68,68,0.08); border-radius:8px; padding:9px 11px; }
.dest-add-note, .dest-add-modal small { color:var(--text-muted); font-size:12px; }

/* ── Connected Destination modals — shared premium shell (Add + Remove) ──────
   Self-contained + scoped under .modal-shell so no other modal is affected. */
.modal-shell {
  position: relative;
  width: min(680px, calc(100vw - 32px));
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,0.16), transparent 34%),
    rgba(8,20,40,0.96);
  border: 1px solid rgba(80,135,220,0.38);
  box-shadow: 0 24px 80px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.modal-shell .modal-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,31,58,0.9);
  color: #cbd5e1;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.modal-shell .modal-close:hover { background: rgba(30,50,86,0.95); border-color: rgba(148,163,184,0.4); color: #f8fafc; }

.modal-shell .modal-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding-right: 56px;
}
.modal-shell .modal-header h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #f8fafc;
}
.modal-shell .modal-header p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #cbd5e1;
}
.modal-shell .modal-icon {
  width: 56px; height: 56px;
  flex: 0 0 56px;
  border-radius: 18px;
  display: grid; place-items: center;
}
.modal-shell .modal-icon svg { width: 26px; height: 26px; }
.modal-shell .modal-icon-primary {
  color: #7db7ff;
  background: rgba(37,99,235,0.18);
  border: 1px solid rgba(96,165,250,0.32);
}
.modal-shell .modal-icon-danger {
  color: #ff6b7a;
  background: rgba(244,63,94,0.15);
  border: 1px solid rgba(244,63,94,0.32);
}

.modal-shell .modal-warning-card,
.modal-shell .modal-info-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.45;
}
.modal-shell .warning-icon,
.modal-shell .info-icon { flex: 0 0 22px; margin-top: 1px; }
.modal-shell .warning-icon svg,
.modal-shell .info-icon svg { width: 22px; height: 22px; display: block; }
.modal-shell .modal-warning-card { background: rgba(127,29,29,0.22); border: 1px solid rgba(248,113,113,0.38); color: #fecaca; }
.modal-shell .modal-warning-card .warning-icon { color: #ff8a94; }
.modal-shell .modal-warning-card strong { display: block; color: #ff7b87; font-weight: 800; margin-bottom: 4px; }
.modal-shell .modal-warning-card span { display: block; color: #f4b8bf; }
.modal-shell .modal-warning-card .warn-row + .warn-row { margin-top: 10px; }
.modal-shell .modal-info-card { background: rgba(37,99,235,0.14); border: 1px solid rgba(96,165,250,0.32); color: #bfdbfe; }
.modal-shell .modal-info-card .info-icon { color: #7db7ff; }

.modal-shell .modal-form { margin-top: 22px; }
.modal-shell .modal-form label {
  display: block;
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #cbd5e1;
}
.modal-shell .modal-form label:first-child { margin-top: 0; }
.modal-shell .modal-form input,
.modal-shell .modal-form select {
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(96,165,250,0.28);
  background: rgba(15,31,58,0.78);
  color: #f8fafc;
  padding: 0 16px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.modal-shell .modal-form input:focus,
.modal-shell .modal-form select:focus { border-color: rgba(96,165,250,0.6); box-shadow: 0 0 0 3px rgba(37,99,235,0.22); }
.modal-shell .modal-form input::placeholder { color: #64748b; }
.modal-shell .field-help { margin: 10px 0 0; color: #94a3b8; font-size: 14px; line-height: 1.4; }

.modal-shell .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(148,163,184,0.16);
}
.modal-shell .modal-footer button {
  min-width: 144px;
  height: 48px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.14s, background 0.14s, border-color 0.14s;
}
.modal-shell .modal-footer .btn-secondary {
  background: rgba(15,31,58,0.8);
  border: 1px solid rgba(148,163,184,0.28);
  color: #e2e8f0;
}
.modal-shell .modal-footer .btn-secondary:hover { background: rgba(24,42,72,0.9); border-color: rgba(148,163,184,0.42); }
.modal-shell .modal-footer .btn-primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}
.modal-shell .modal-footer .btn-primary:hover { filter: brightness(1.08); }
.modal-shell .modal-footer .btn-danger {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #e11d48, #fb7185);
}
.modal-shell .modal-footer .btn-danger:hover { filter: brightness(1.06); }

@media (max-width: 560px) {
  .modal-shell { padding: 24px 20px; }
  .modal-shell .modal-header h2 { font-size: 22px; }
  .modal-shell .modal-footer { flex-direction: column-reverse; }
  .modal-shell .modal-footer button { width: 100%; }
}

/* ── Disconnect modal + brand button (reversible-action styling) ─────────────
   Emitted by app.js destRemovePrompt(): a calmer, non-red variant of the premium
   modal shell for a reversible Disconnect. */

/* Brand-blue primary button for reversible actions. Self-contained so it works
   standalone AND inside .modal-shell .modal-footer (which sets its own size). */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(59,108,255,0.55);
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: filter 0.14s, background 0.14s, border-color 0.14s;
}
.btn-brand:hover { filter: brightness(1.08); border-color: rgba(59,108,255,0.75); }

/* ~10% narrower than the standard modal, no header/footer divider lines,
   footer aligned bottom-right. */
.modal-shell.modal-disconnect { width: min(612px, calc(100vw - 32px)); }
.modal-shell.modal-disconnect .modal-footer {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
  justify-content: flex-end;
}

/* Subtle dark-blue icon container holding a platform logo (sibling of .modal-icon-danger). */
.modal-shell .modal-icon-brand {
  color: #7db7ff;
  background: rgba(37,99,235,0.16);
  border: 1px solid rgba(96,165,250,0.30);
}
.modal-shell .modal-icon-brand img { width: 26px; height: 26px; object-fit: contain; }

/* Neutral (no red) warning card for reversible actions. */
.modal-shell .modal-warning-card--neutral {
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(96,165,250,0.26);
  color: #cbd8ec;
}
.modal-shell .modal-warning-card--neutral .warning-icon { color: #7db7ff; }
.modal-shell .modal-warning-card--neutral strong { color: #e6eefb; }
.modal-shell .modal-warning-card--neutral span { color: #b6c6dd; }

/* ── Consolidated status-badge system (see docs/style-system.md §3) ──────────
   ONE badge base + state modifiers. Palette: blue + red + neutrals. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-badge--connected {
  background: var(--badge-connected-bg);
  color: var(--badge-connected-fg);
  border-color: var(--badge-connected-bd);
}
.status-badge--live,
.status-badge--active {
  background: var(--badge-live-bg);
  color: var(--badge-live-fg);
  border-color: var(--badge-live-bd);
}
.status-badge--soon {
  background: var(--badge-soon-bg);
  color: var(--badge-soon-fg);
  border-color: var(--badge-soon-bd);
}
.status-badge--pending {
  background: var(--badge-pending-bg);
  color: var(--badge-pending-fg);
  border-color: var(--badge-pending-bd);
}
.status-badge--disabled {
  background: var(--badge-disabled-bg);
  color: var(--badge-disabled-fg);
  border-color: var(--badge-disabled-bd);
}
.status-badge--locked {
  background: var(--badge-locked-bg);
  color: var(--badge-locked-fg);
  border-color: var(--badge-locked-bd);
}
.status-badge--error {
  background: var(--badge-error-bg);
  color: var(--badge-error-fg);
  border-color: var(--badge-error-bd);
}

/* Destination Sets */
.dest-sets-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.dest-sets-hd h2 { font-size:18px; margin:0 0 4px; }
.dest-sets-sub { color:var(--text-muted); font-size:13px; margin:0; max-width:520px; }
.dest-set-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.dest-set-card { background:var(--panel,#122A4E); border:1px solid var(--border); border-radius:12px; padding:16px; }
.dest-set-name { font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; }
.dest-set-default { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#7FB0FF; background:rgba(59,130,246,0.16); border-radius:999px; padding:2px 8px; }
.dest-set-members { list-style:none; padding:0; margin:12px 0; font-size:13px; color:var(--text-sec,#9EB0C2); display:flex; flex-direction:column; gap:5px; }
.dest-set-actions { display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:12px; }
.dest-set-defnote { margin-top:10px; font-size:11.5px; color:var(--text-muted); }
.dest-set-checklist { max-height:340px; overflow-y:auto; }
.dest-set-grp { margin-bottom:12px; }
.dest-set-grp-name { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:6px; }
.dest-set-check { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; cursor:pointer; }

@media (max-width:760px) {
  .dest-row { grid-template-columns:1fr auto; column-gap:12px; row-gap:6px; min-height:0; padding:14px 16px; align-items:start; }
  .dest-account-cell { grid-column:1; grid-row:1; }
  .dest-row-actions { grid-column:2; grid-row:1; }
  .dest-row-status { grid-column:1 / -1; grid-row:2; }
  .dest-row-last { grid-column:1 / -1; grid-row:3; }
  .dest-row-sets { grid-column:1 / -1; grid-row:4; text-align:left; }
  .dest-panel { width:100vw; max-width:100vw; }
}

/* ── Trial Guard Test harness (owner admin) ─────────────────────────────────────── */
.tg-panel { max-width: 720px; }
.tg-title { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.tg-note { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; padding: 10px 12px; background: rgba(59,130,246,0.08); border: 1px solid rgba(96,165,250,0.22); border-radius: 10px; }
.tg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tg-muted { color: var(--text-muted); font-size: 13px; }
.tg-err { color: #F87171; font-size: 13px; }
.tg-card { background: var(--panel,#122A4E); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.tg-card-h { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tg-env { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; }
.tg-env--live { background: rgba(239,68,68,0.16); color: #F87171; }
.tg-env--test { background: rgba(96,165,250,0.16); color: #7FB0FF; }
.tg-env--unknown { background: rgba(148,163,184,0.16); color: #94A3B8; }
.tg-rows > div, .tg-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid rgba(148,163,184,0.08); }
.tg-rows > div span, .tg-kv span { color: var(--text-muted); }
.tg-yes { color: #7FB0FF; font-weight: 700; }
.tg-no { color: #94A3B8; font-weight: 700; }
.tg-results { display: flex; flex-direction: column; gap: 10px; }
.tg-result { background: var(--panel,#122A4E); border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; padding: 12px 14px; }
.tg-result--pass { border-left-color: #3B82F6; }
.tg-result--fail { border-left-color: #EF4444; }
.tg-result-h { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tg-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; }
.tg-badge--pass { background: rgba(59,130,246,0.16); color: #7FB0FF; }   /* PASS = blue (no green) */
.tg-badge--fail { background: rgba(239,68,68,0.16); color: #F87171; }
.tg-dry { font-size: 11px; color: var(--text-muted); font-weight: 500; }

/* ===== Dashboard revamp — connection switcher (Phase 2) ===== */
.dxsw { background: rgba(8,24,43,.72); border: 1px solid rgba(93,132,190,.22); border-radius: 18px; padding: 14px 20px; margin: 0; }
.dxsw-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.dxsw-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--tresso-text-primary); display: inline-flex; align-items: center; gap: 10px; }
.dxsw-count { height: 28px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 0 10px; border-radius: 9px; background: rgba(93,132,190,.18); color: #AFC2DD; }
.dxsw-tools { display: flex; align-items: center; gap: 10px; }
.dxsw-search { width: 300px; max-width: 40vw; height: 38px; border-radius: 11px; background: rgba(5,16,31,.82); border: 1px solid rgba(93,132,190,.22); color: #DDEAFF; padding: 0 14px; font-size: 13px; outline: none; }
.dxsw-search::placeholder { color: rgba(175,194,221,.55); }
.dxsw-search:focus { border-color: rgba(45,123,255,.55); }
.dxsw-strip-wrap { display: flex; align-items: center; gap: 14px; }
.dxsw-arrow { flex: 0 0 48px; width: 48px; height: 56px; border-radius: 13px; background: rgba(13,34,61,.78); border: 1px solid rgba(93,132,190,.22); color: #AFC2DD; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .16s, color .16s; }
.dxsw-arrow:hover { border-color: rgba(45,123,255,.5); color: var(--tresso-text-primary); }
.dxsw-strip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; overflow: hidden; scroll-behavior: smooth; scrollbar-width: none; padding: 2px; }
.dxsw-strip::-webkit-scrollbar { height: 0; display: none; }
.dxchip { flex: 0 0 auto; height: 56px; min-width: 150px; max-width: 176px; border-radius: 13px; padding: 0 14px; display: flex; align-items: center; gap: 12px; background: rgba(14,34,61,.82); border: 1px solid rgba(93,132,190,.22); cursor: pointer; text-align: left; transition: border-color .16s, box-shadow .16s, background .16s; }
.dxchip:hover { border-color: rgba(93,132,190,.45); }
.dxchip.is-active { border: 1px solid #217BFF; box-shadow: 0 0 0 1px rgba(33,123,255,.36), 0 0 24px rgba(33,123,255,.22); background: linear-gradient(180deg, rgba(22,54,96,.96), rgba(12,32,60,.96)); }
.dxchip-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; object-fit: contain; }
.dxchip-id { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dxchip-name { font-size: 13px; font-weight: 700; color: var(--tresso-text-primary); line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxchip-acct { font-size: 12px; color: #9DABC0; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; margin-left: auto; }
.dxdot--ok { background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,.6); }
.dxdot--warn { background: #F97316; box-shadow: 0 0 6px rgba(249,115,22,.55); }
.dxdot--off { background: rgba(148,163,184,.55); }
/* Connected but gated (not postable yet) — muted blue-gray, NEVER green. */
.dxdot--muted { background: #7E93AE; box-shadow: 0 0 5px rgba(126,147,174,.45); }
.dxsw-empty { color: #9FB2CF; font-size: 13px; padding: 10px 2px; }
.dxsw-empty a { color: #65A6FF; }
/* Header icon buttons (filter / grid) */
.dxsw-iconbtn { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: rgba(5,16,31,.82); border: 1px solid rgba(93,132,190,.22); color: #AFC2DD; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .16s, color .16s; }
.dxsw-iconbtn:hover { border-color: rgba(45,123,255,.5); color: var(--tresso-text-primary); }
.dxsw-iconbtn--active { background: rgba(45,123,255,.18); border-color: rgba(45,123,255,.5); color: #7FB0FF; }
/* +N more chip (compact, two-line) */
.more-chip { flex: 0 0 58px; width: 58px; height: 56px; border-radius: 13px; border: 1px dashed rgba(147,169,204,.35); background: rgba(14,34,61,.55); color: #AFC2DD; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 14px; font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .16s, color .16s; }
.more-chip:hover { border-color: rgba(45,123,255,.55); color: var(--tresso-text-primary); }
.more-chip b { font-size: 13px; }
/* Hidden-connections popover */
.dxsw-pop { position: absolute; z-index: 60; margin-top: 8px; width: 260px; max-height: 340px; overflow-y: auto; padding: 8px; border-radius: 14px; background: rgba(9,26,47,.98); border: 1px solid rgba(93,132,190,.3); box-shadow: 0 20px 44px rgba(0,0,0,.44); }
.dxsw-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; background: none; border: none; color: var(--tresso-text-primary); text-align: left; cursor: pointer; }
.dxsw-pop-item:hover { background: rgba(45,123,255,.14); }
.dxsw-pop-item img { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; object-fit: contain; }
.dxsw-pop-item .dxsw-pop-txt { display: flex; flex-direction: column; min-width: 0; }
.dxsw-pop-item .dxsw-pop-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxsw-pop-item .dxsw-pop-sub { font-size: 11.5px; color: #9DABC0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Grid view (grid control) + filter popover (sliders control) */
.dxsw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; }
.dxsw-grid .dxchip { width: auto; max-width: none; min-width: 0; }
.dxsw-filter { padding: 10px; width: 224px; }
.dxsw-filter-group { margin-bottom: 8px; }
.dxsw-filter-group:last-child { margin-bottom: 0; }
.dxsw-filter-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #8EA0BA; margin: 4px 8px; }
.dxsw-filter-opt { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px; background: none; border: none; color: #EAF2FF; font-size: 13px; cursor: pointer; }
.dxsw-filter-opt:hover { background: rgba(45,123,255,.14); }
.dxsw-filter-opt.is-on { background: rgba(45,123,255,.2); color: #7FB0FF; font-weight: 600; }

/* ===== Dashboard revamp — selected-connection header/hero (Phase 3) ===== */
.dxhero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 0; min-height: 0; box-sizing: border-box; border-radius: 16px; padding: 12px 22px; background: radial-gradient(circle at left center, rgba(33,123,255,.18), transparent 42%), linear-gradient(135deg, rgba(13,36,69,.96), rgba(7,22,42,.96)); border: 1px solid rgba(33,123,255,.55); box-shadow: 0 0 0 1px rgba(33,123,255,.14), 0 18px 44px rgba(0,0,0,.28); }
.dxhero-identity { display: flex; align-items: center; gap: 16px; min-width: 260px; flex: 1; }
.dxhero-avatar { position: relative; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dxhero-avatar img { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; display: block; }
.dxhero-verify { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: #2D7BFF; border: 2px solid #0B1B32; display: flex; align-items: center; justify-content: center; }
.dxhero-typeline { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.dxhero-type { font-size: 13.5px; font-weight: 600; color: #A9B6CC; }
.dxhero-handle { font-size: 13.5px; color: #7FB0FF; }
.dxhero-bio { font-size: 13px; color: #90A0B8; margin-top: 7px; max-width: 540px; line-height: 1.45; }
.dxhero-idtext { min-width: 0; }
.dxhero-nameline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dxhero-name { font-size: 22px; font-weight: 700; color: var(--tresso-text-primary); letter-spacing: -0.01em; }
.dxhero-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.dxhero-badge--ok { background: rgba(52,211,153,.15); color: #34D399; }
.dxhero-badge--warn { background: rgba(249,115,22,.16); color: #F9A56B; }
.dxhero-badge--muted { background: rgba(126,147,174,.16); color: #A9BBD3; }
.dxhero-meta { font-size: 13.5px; color: #A9B6CC; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dxhero-sync { display: flex; gap: 30px; flex: 0 0 auto; }
.dxhero-sync-item { display: flex; flex-direction: column; gap: 3px; }
.dxhero-sync-label { font-size: 12px; color: #8EA0BA; }
.dxhero-sync-val { font-size: 14px; font-weight: 600; color: var(--tresso-text-primary); }
.dxhero-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dxhero-btn { height: 42px; padding: 0 16px; border-radius: 9px; background: rgba(6,20,38,.55); border: 1px solid rgba(93,132,190,.28); color: var(--tresso-text-primary); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; transition: border-color .16s, background .16s, filter .16s; }
.dxhero-btn:hover { border-color: rgba(93,132,190,.5); }
.dxhero-btn--primary { background: #0056d6; border: none; color: #fff; font-weight: 700; padding: 0 18px; }
.dxhero-btn--primary:hover { filter: brightness(1.06); }
.dxhero-btn--warn { border-color: rgba(249,115,22,.5); color: #F9A56B; }

/* ===== Dashboard revamp — KPI row (Phase 4) ===== */
/* One horizontal row of six (matches the target). Only wraps on genuinely narrow windows. */
.dxkpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; }
@media (max-width: 1040px) { .dxkpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .dxkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Each KPI container carries its accent: a top accent bar + a subtle accent-tinted body so the
   cards read as colored containers (not flat navy), coordinated with the icon tint. */
.dxkpi { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(16,39,70,.92), rgba(10,28,52,.92)); border: 1px solid rgba(93,132,190,.22); border-radius: 13px; padding: 13px 14px 12px; min-height: 90px; display: flex; flex-direction: column; gap: 6px; }
.dxkpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--kpi-bar, #2D7BFF); z-index: 1; }
/* Accent = the top bar ONLY. Card body stays the base dark navy (no tint/glow).
   EXACT colors pulled from the original dashboard KPI cards (.dash-kpi-card--*). */
.dxkpi--orange { --kpi-bar: #F97316; }
.dxkpi--blue   { --kpi-bar: #2563EB; }
.dxkpi--pink   { --kpi-bar: #EC4899; }
.dxkpi--cyan    { --kpi-bar: #00D4FF; }
.dxkpi--purple  { --kpi-bar: #9333EA; }
.dxkpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dxkpi-ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; order: 2; }
/* Icon tints = exact original dashboard values (.dash-kpi-icon--*). Note: Needs Review keeps a BLUE
   icon on its pink bar, exactly like the original. */
.dxkpi-ico--orange { background: rgba(249,115,22,.18); color: #FB923C; }
.dxkpi-ico--blue { background: rgba(37,99,235,.18); color: #3B82F6; }
.dxkpi-ico--pink { background: rgba(236,72,153,.18); color: #F472B6; }
.dxkpi-ico--cyan { background: rgba(0,212,255,.18); color: #00D4FF; }
.dxkpi-ico--purple { background: rgba(147,51,234,.18); color: #A855F7; }
.dxkpi-ico--muted { background: rgba(148,163,184,.16); color: #9FB2CF; }
.dxkpi-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #9FB1CC; order: 1; }
.dxkpi-value { font-size: 25px; line-height: 1.05; font-weight: 800; color: var(--tresso-text-primary); letter-spacing: -0.02em; }
.dxkpi-sub { font-size: 12.5px; color: #8EA0BA; margin-top: auto; }
.dxkpi-trend { font-size: 12.5px; font-weight: 700; }
.dxkpi-trend--up { color: #34D399; }
.dxkpi-trend--down { color: #F97316; }

/* ===== Dashboard revamp — lower panels + upcoming posts (Phase 5) ===== */
.dxpanels { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; margin: 0; align-items: start; }
@media (max-width: 1100px) { .dxpanels { grid-template-columns: 1fr; } }
.dxpanel { background: rgba(8,24,43,.72); border: 1px solid rgba(93,132,190,.20); border-radius: 16px; padding: 16px 18px; }
.dxpanel--wide { grid-column: 1 / -1; }
.dxpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dxpanel-title { font-size: 16px; font-weight: 700; color: var(--tresso-text-primary); }
.dxpanel-count { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: rgba(93,132,190,.18); color: #AFC2DD; }
.dxpanel-empty { color: #9FB2CF; font-size: 13px; padding: 14px 2px; }
.dxup-body { display: flex; flex-direction: column; }
.dxup-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(93,132,190,.10); }
.dxup-row:first-child { border-top: none; }
.dxup-ico { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; object-fit: contain; }
.dxup-main { min-width: 0; flex: 1; }
.dxup-title { font-size: 13.5px; font-weight: 600; color: var(--tresso-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxup-when { font-size: 12px; color: #8EA0BA; margin-top: 2px; }
.dxup-status { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(45,123,255,.18); color: #80B8FF; }
.dxup-status.is-paused { background: rgba(148,163,184,.16); color: #AFC2DD; }

/* ===== Dashboard revamp — connection health panel (Phase 6) ===== */
.dxh-overall { font-size: 12.5px; font-weight: 600; }
.dxh-overall--ok { color: #34D399; }
.dxh-overall--warn { color: #F9A56B; }
.dxh-rows { display: flex; flex-direction: column; }
.dxh-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(93,132,190,.10); }
.dxh-row:first-child { border-top: none; }
.dxh-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.dxh-dot.is-ok { background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,.5); }
.dxh-dot.is-warn { background: #F97316; box-shadow: 0 0 6px rgba(249,115,22,.5); }
.dxh-label { font-size: 13px; color: #A9B6CC; flex: 1; }
.dxh-val { font-size: 13px; font-weight: 600; color: var(--tresso-text-primary); }
.dxh-foot { margin-top: 12px; }
.dxh-action { height: 36px; padding: 0 16px; border-radius: 9px; background: rgba(45,123,255,.18); border: 1px solid rgba(45,123,255,.42); color: #65A6FF; font-size: 13px; font-weight: 650; cursor: pointer; width: 100%; transition: filter .16s; }
.dxh-action--ghost { background: rgba(6,20,38,.55); border-color: rgba(93,132,190,.28); color: var(--tresso-text-primary); }
.dxh-action:hover { filter: brightness(1.08); }

/* ===== Dashboard revamp — recent/top content panel (Phase 7) ===== */
.dxpanel-sub { font-size: 12.5px; color: #9DABC0; }
.dxc-body { display: flex; flex-direction: column; }
.dxc-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(93,132,190,.10); }
.dxc-row:first-child { border-top: none; }
.dxc-thumb { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; overflow: hidden; object-fit: cover; background: rgba(9,28,52,.9); }
.dxc-thumb img, .dxc-thumb video { width: 100%; height: 100%; object-fit: cover; }
.dxc-main { min-width: 0; flex: 1; }
.dxc-title { font-size: 13.5px; font-weight: 600; color: var(--tresso-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxc-date { font-size: 12px; color: #8EA0BA; margin-top: 2px; }
.dxc-metric { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--tresso-text-primary); }
.dxc-link { color: #65A6FF; font-weight: 600; font-size: 13px; text-decoration: none; }
.dxc-muted { color: #6E7F98; }
.dxc-note { margin-top: 10px; font-size: 12px; color: #8EA0BA; }

/* ===== Dashboard revamp — Performance Overview (charts + top content) ===== */
.dxperf { margin: 0; border-radius: 16px; padding: 14px 18px 16px; background: rgba(8,24,43,.66); border: 1px solid rgba(93,132,190,.20); }
.dxperf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.dxperf-headings { display: flex; flex-direction: column; gap: 3px; }
.dxperf-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--tresso-text-primary); }
.dxperf-subtitle { font-size: 13px; color: #9DABC0; }
.dxperf-tools { display: flex; gap: 10px; }
.dxperf-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 1200px) { .dxperf-grid { grid-template-columns: 1fr; } }
.dxperf-card { background: rgba(11,30,54,.72); border: 1px solid rgba(93,132,190,.18); border-radius: 13px; padding: 14px; display: flex; flex-direction: column; min-height: 168px; }
.dxperf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dxperf-card-title { font-size: 14px; font-weight: 700; color: var(--tresso-text-primary); }
.dxperf-card-sub { font-size: 12px; color: #8EA0BA; padding: 3px 9px; border-radius: 7px; background: rgba(93,132,190,.16); }
.dxperf-headline { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.dxperf-big { font-size: 24px; font-weight: 800; color: var(--tresso-text-primary); letter-spacing: -0.02em; }
.dxperf-trend { font-size: 13px; font-weight: 700; }
.dxperf-trend--up { color: #34D399; }
.dxperf-trend--down { color: #F97316; }
.dxperf-chart { flex: 1; min-height: 96px; display: flex; align-items: flex-end; }
.dxchart-svg { width: 100%; height: 96px; display: block; }
.dxperf-chart--empty { align-items: center; justify-content: center; text-align: center; }
.dxperf-chart--empty span { font-size: 12.5px; color: #7E90A9; max-width: 220px; }
.dxperf-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #7E90A9; }
/* Top Content card */
.dxtc-body { display: flex; flex-direction: column; }
.dxtc-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid rgba(93,132,190,.10); }
.dxtc-row:first-child { border-top: none; }
.dxtc-thumb { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; overflow: hidden; object-fit: cover; background: rgba(9,28,52,.9); }
.dxtc-thumb img, .dxtc-thumb video { width: 100%; height: 100%; object-fit: cover; }
.dxtc-main { min-width: 0; flex: 1; }
.dxtc-title { font-size: 13px; font-weight: 600; color: var(--tresso-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxtc-date { font-size: 11.5px; color: #8EA0BA; margin-top: 2px; }
.dxtc-metric { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--tresso-text-primary); }
.dxtc-link { color: #65A6FF; font-weight: 600; font-size: 13px; text-decoration: none; }
.dxtc-muted { color: #6E7F98; }

/* ===== Dashboard revamp — Platform Health strip (blue/cyan, no green) ===== */
.dxph-overall { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #60A5FA; }
.dxph-overall--warn { color: #F9A56B; }
.dxph-overall-dot { width: 7px; height: 7px; border-radius: 50%; background: #60A5FA; box-shadow: 0 0 6px rgba(96,165,250,.6); }
.dxph-overall--warn .dxph-overall-dot { background: #F97316; box-shadow: 0 0 6px rgba(249,115,22,.55); }
.dxph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .dxph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dxph-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; background: rgba(11,30,54,.7); border: 1px solid rgba(93,132,190,.16); }
.dxph-ico { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 6px; object-fit: contain; }
.dxph-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dxph-name { font-size: 13px; font-weight: 600; color: var(--tresso-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxph-status { font-size: 11.5px; font-weight: 600; }
.dxph-status.is-ok { color: #60A5FA; }
.dxph-status.is-warn { color: #F9A56B; }
/* Ready to post = green, and ONLY for genuinely postable platforms (Pinterest today). */
.dxph-status--ready { color: #34D399; }
/* Connected but gated by app review / build = muted blue-gray, never green, never plain "Connected". */
.dxph-status--muted { color: #7E93AE; }
.dxph-overall--ready { color: #34D399; }
.dxph-overall--ready .dxph-overall-dot { background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,.55); }
.dxph-overall--muted { color: #7E93AE; }
.dxph-overall--muted .dxph-overall-dot { background: #7E93AE; box-shadow: none; }

/* ===== Dashboard revamp — mockup-match extras (ring, chart axes/dots, controls) ===== */
.dxkpi-ring { order: 2; display: inline-flex; align-items: center; justify-content: center; }
/* Perf controls */
.dxperf-daterange { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 9px; background: rgba(6,20,38,.55); border: 1px solid rgba(93,132,190,.28); color: #C7D6EE; font-size: 13px; font-weight: 600; }
.dxperf-daterange svg { color: #8EA0BA; }
.dxperf-export { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 9px; background: rgba(6,20,38,.55); border: 1px solid rgba(93,132,190,.28); color: var(--tresso-text-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .16s; }
.dxperf-export:hover { border-color: rgba(93,132,190,.5); }
.dxperf-daily { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #9DABC0; padding: 4px 9px; border-radius: 8px; background: rgba(93,132,190,.14); }
/* Chart body: y-axis + plot + dots + x-axis */
.dxchart-wrap { display: flex; gap: 8px; flex: 1; min-height: 88px; }
.dxchart-yaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 30px; flex: 0 0 30px; padding: 2px 0 6px; font-size: 10.5px; color: #7E90A9; }
.dxchart-plot { position: relative; flex: 1; min-width: 0; }
.dxchart-svg { width: 100%; height: 88px; display: block; }
.dxchart-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #0B1B32; border: 2px solid var(--dot, #22D3EE); transform: translate(-50%, -50%); }
.dxchart-xaxis { display: flex; justify-content: space-between; margin: 6px 0 0 38px; font-size: 11px; color: #7E90A9; }
.dxtc-viewall { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: #65A6FF; text-decoration: none; }
/* Hero icon buttons */
.dxhero-btn--icon { gap: 7px; }
.dxhero-btn--dots { padding: 0 12px; }

/* Minimized platform selector — compact grouped rows, muted inline status, no pills. */
.plat-group-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); margin: 8px 2px 2px; }
.plat-group-title--muted { color: var(--text-muted); margin-top: 12px; }
.schedule-platform-checks .plat-chip { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px; border-radius: 10px; flex: 0 0 auto; white-space: nowrap; }
.schedule-platform-checks .plat-chip .plat-name { font-size: 13.5px; font-weight: 600; }
.schedule-platform-checks .plat-chip:has(input:checked) { background: rgba(0,86,214,0.14); border-color: rgba(96,165,250,0.55); }
.schedule-platform-checks .plat-chip--soon { min-height: 38px; padding: 4px 12px; background: transparent; border-color: transparent; }
.schedule-platform-checks .plat-chip--soon .plat-name { color: var(--text-muted); font-weight: 500; }
.schedule-platform-checks .plat-chip--soon img { opacity: 0.55; }
.plat-soon-tag { font-size: 12px; font-weight: 500; color: var(--text-muted); background: none; border: none; padding: 0; }
.plat-soon-tag::before { content: "· "; color: var(--text-muted); }

/* Force the platform selector into a vertical compact list (beats the base + bulk/edit-mode rules). */
.schedule-modal .schedule-platform-checks,
.schedule-modal.edit-mode .schedule-platform-checks,
.schedule-modal.bulk-edit-mode .schedule-platform-checks { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }