/* `scrollbar-gutter: stable` used to live here, reserving space for a
   scrollbar even when none is shown (to stop centered elements from
   shifting between panels). Removed — that reserved gutter is a known
   Chromium quirk that doesn't reliably pick up the page's background
   color, showing as a persistent thin light bar down the right edge no
   matter what `background` is set on html/body. A page-specific class can
   opt back into it later if a real layout-shift problem shows up; for now
   avoiding the visible seam wins.
   The <html> root itself never had a background of its own — only body
   (and further-nested elements) did, so any sub-pixel rounding gap around
   body's box fell back to the browser's own default canvas color (white
   in light UI, grey in dark UI) instead of the app's theme. Match the
   base theme here so nothing is ever left uncovered; page-specific rules
   (e.g. Apollo's navy gradient) still layer on top with higher
   specificity below. */
html { background: #ffffff; }
html.theme-dark { background: #000000; }

/* ===== Auth (Supabase login) ===== */
#auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(135deg, #334155 0%, #94a3b8 55%, #cbd5e1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
}
.auth-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  text-align: center;
}
.auth-sub {
  margin: 0 0 24px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-field input {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
}
.auth-field input:focus {
  outline: 2px solid #94a3b8;
  outline-offset: -1px;
  border-color: #94a3b8;
}
.auth-error {
  margin: 0;
  padding: 8px 12px;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  font-size: 13px;
}
.auth-success {
  margin: 0;
  padding: 8px 12px;
  background: #e5e7eb;
  color: #3f4b5b;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
}

/* Admin / Client tabs */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
}
.auth-tab {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1.5px solid #e5e7eb;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  font-family: inherit;
  transition: all 0.2s ease;
}
.auth-tab:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.auth-tab.is-active {
  background: linear-gradient(135deg, rgba(255, 255, 255,0.10), rgba(255, 255, 255,0.06));
  border-color: #64748b;
  box-shadow: 0 0 0 3px rgba(255, 255, 255,0.12);
}
.auth-tab-icon { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.auth-tab-label {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.auth-tab.is-active .auth-tab-label { color: #64748b; }
.auth-tab-sub {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.2px;
}

.auth-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
}
.auth-toggle-q { font-weight: 500; }
.auth-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
}
.auth-toggle-btn:hover { text-decoration: underline; }

html.theme-dark .auth-tab { background: #1a1a1a; border-color: #262626; }
html.theme-dark .auth-tab:hover { background: #262626; }
html.theme-dark .auth-tab.is-active {
  background: linear-gradient(135deg, rgba(255, 255, 255,0.20), rgba(255, 255, 255,0.10));
  border-color: #cbd5e1;
}
html.theme-dark .auth-tab-label { color: #f5f5f5; }
html.theme-dark .auth-tab.is-active .auth-tab-label { color: #cbd5e1; }
html.theme-dark .auth-success {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #475569;
}
.auth-submit { margin-top: 6px; padding: 10px; font-size: 14px; font-weight: 600; }
.auth-submit:disabled { opacity: 0.6; cursor: wait; }

.auth-userbox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 12px;
}
.auth-userbox-email {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  width: 100%;
}
.auth-logout { font-size: 12px; padding: 6px 12px; }

/* ===== Profile edit modal (glossy crystal) ===== */
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.profile-modal.open { display: flex; animation: profile-modal-fade 0.18s ease-out; }
@keyframes profile-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.profile-modal-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}
.profile-modal-panel {
  position: relative;
  width: min(640px, 100%);
  min-height: min(620px, 92vh);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 22px;
  padding: 0;
  /* Liquid-glass / iOS-Crystal: frosted white tint + heavy blur so the panel
     reads as glass, not a clear window onto whatever's behind it. */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.70);
  color: #334155;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45),
    0 24px 60px rgba(15, 23, 42, 0.22),
    0 4px 12px rgba(15, 23, 42, 0.10);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65);
  display: flex;
  flex-direction: row;
  gap: 0;
  animation: profile-modal-pop 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes profile-modal-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.profile-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: var(--blue-500);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transition: transform 0.15s ease, background 0.15s ease;
}
.profile-modal-close:hover { transform: scale(1.06); background: var(--blue-600); }

/* Save (and any primary button inside the modal) — same blue */
.profile-modal-panel .btn-primary {
  background: var(--blue-500);
  border: 1px solid var(--blue-500);
  color: #fff;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.profile-modal-panel .btn-primary:hover {
  background: var(--blue-600);
  border-color: var(--blue-600);
}
.profile-modal-heading {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
}
.profile-photo-row { display: flex; justify-content: center; padding: 6px 0 14px; }
.profile-photo-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 22px;
  cursor: pointer;
  outline: none;
}
.profile-photo-wrap:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
.profile-photo-preview {
  width: 104px; height: 104px;
  border-radius: 22px;
  object-fit: cover;
  display: block;
  background: #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25), inset 0 0 0 3px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.profile-photo-camera {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.50);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.profile-photo-wrap:hover .profile-photo-camera,
.profile-photo-wrap:focus-visible .profile-photo-camera { opacity: 1; }

.profile-field { display: flex; flex-direction: column; gap: 6px; }
.profile-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #334155;
  opacity: 0.72;
}
.profile-name-input {
  padding: 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.profile-name-input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.profile-title-dropdown { position: relative; }
.profile-title-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.profile-title-trigger:hover { border-color: rgba(255, 255, 255, 0.45); }
.profile-title-trigger:focus-visible,
.profile-title-dropdown[data-open="true"] .profile-title-trigger {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.profile-title-trigger-text.is-placeholder { color: #64748b; font-weight: 500; }
.profile-title-trigger-caret { transition: transform 0.18s ease; opacity: 0.75; flex-shrink: 0; }
.profile-title-dropdown[data-open="true"] .profile-title-trigger-caret { transform: rotate(180deg); }

.profile-title-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.20);
  display: none;
  z-index: 5;
  max-height: 240px;
  overflow-y: auto;
  animation: profile-title-menu-pop 0.14s ease-out;
}
@keyframes profile-title-menu-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.profile-title-dropdown[data-open="true"] .profile-title-menu { display: block; }
.profile-title-item {
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.profile-title-item + .profile-title-item { margin-top: 2px; }
.profile-title-item:hover { background: rgba(255, 255, 255, 0.10); }
.profile-title-item.is-active {
  background: linear-gradient(160deg, #94a3b8, #3f4b5b);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.4);
}
.profile-title-item.is-active:hover {
  background: linear-gradient(160deg, #94a3b8, #3f4b5b);
}

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

/* Internal left sidebar inside the wider panel */
.profile-modal-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 140px;
  flex-shrink: 0;
  padding: 60px 12px 24px;
  background: rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.05);
}
/* Sliding indicator — the colored "box" that moves between tabs */
.profile-modal-tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: var(--blue-500);
  border: none;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition:
    top 0.26s cubic-bezier(0.4, 0.8, 0.2, 1),
    left 0.26s cubic-bezier(0.4, 0.8, 0.2, 1),
    width 0.26s cubic-bezier(0.4, 0.8, 0.2, 1),
    height 0.26s cubic-bezier(0.4, 0.8, 0.2, 1),
    opacity 0.18s ease;
}

.profile-modal-tab {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  text-shadow: none;
  box-shadow: none;
  transition: color 0.15s ease;
}
.profile-modal-tab:hover { color: #3f4b5b; }
.profile-modal-tab.is-active { color: #fff; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.40); }

/* Right content area: scrollable, holds heading + sections + actions */
.profile-modal-content {
  flex: 1;
  min-width: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.profile-tab-section { display: flex; flex-direction: column; gap: 18px; }
.profile-tab-section[hidden] { display: none; }

/* Account section */
.profile-email-input {
  padding: 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: default;
}
.profile-email-input:focus { outline: none; }

.profile-password-help {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #475569;
}
.profile-password-reset {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.profile-password-reset[disabled] { opacity: 0.65; cursor: progress; }
.profile-signout {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.profile-password-status {
  font-size: 12.5px;
  line-height: 1.45;
  margin-top: 2px;
}
.profile-password-status[data-kind="success"] { color: #475569; }
.profile-password-status[data-kind="error"]   { color: #b91c1c; }

html.theme-dark .profile-password-help { color: #cbd5e1; }
html.theme-dark .profile-password-status[data-kind="success"] { color: #94a3b8; }
html.theme-dark .profile-password-status[data-kind="error"]   { color: #fca5a5; }

@media (max-width: 600px) {
  .profile-modal-panel { flex-direction: column; }
  .profile-modal-tabs {
    flex-direction: row;
    width: auto;
    padding: 14px 14px 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.05);
    gap: 6px;
  }
  .profile-modal-tab { flex: 1; text-align: center; }
}

html.theme-dark .profile-modal-backdrop { background: transparent; }
html.theme-dark .profile-modal-panel {
  background: rgba(15, 23, 42, 0.62);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 4px 12px rgba(0, 0, 0, 0.40);
}
html.theme-dark .profile-modal-close {
  background: linear-gradient(160deg, #94a3b8, #3f4b5b);
  border-color: rgba(255, 255, 255, 0.30);
  color: #fff;
}
html.theme-dark .profile-field-label { color: #e2e8f0; opacity: 1; }
html.theme-dark .profile-name-input {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f5f5f5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.theme-dark .profile-name-input:focus { border-color: #cbd5e1; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
html.theme-dark .profile-title-trigger {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f5f5f5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.theme-dark .profile-title-trigger:hover { border-color: rgba(255, 255, 255, 0.45); }
html.theme-dark .profile-title-trigger-text.is-placeholder { color: #cbd5e1; }
html.theme-dark .profile-title-menu {
  background: linear-gradient(160deg, #334155, #1e293b);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
html.theme-dark .profile-title-item { color: #e2e8f0; }
html.theme-dark .profile-title-item:hover { background: rgba(255, 255, 255, 0.08); }

html.theme-dark .profile-modal-tab { color: #e2e8f0; }
html.theme-dark .profile-modal-tab:hover { color: #fff; }
html.theme-dark .profile-modal-tab.is-active { color: #fff; }
html.theme-dark .profile-modal-tab-indicator {
  background: rgba(30, 64, 175, 0.55);
  border-color: rgba(255, 255, 255, 0.45);
}
html.theme-dark .profile-email-input {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f5f5f5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ===== Calendar (full view) ===== */
/* Board switch — minimal glossy pill, same family as the light/dark toggle:
   a soft slate track with a glossy white thumb that slides between boards.
   Sized to match the "Andy Is Gone" pill (same width and height). */
.cal-board-switch {
  /* Floated onto the header line so it sits exactly level with the "Andy
     Is Gone" pill. top/left match the .main content padding (28px / 32px),
     which is also where the header row begins. Height/padding match the
     Andy pill (padding: 7px 14px + 1px border = ~32px tall). */
  position: absolute;
  top: 28px;
  left: 32px;
  z-index: 5;
  display: inline-flex;
  width: 232px;
  height: 34px;
  box-sizing: border-box;
  padding: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  user-select: none;
}
.cal-board-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: #ffffff;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 3px rgba(15,23,42,0.12);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.cal-board-switch.is-wins .cal-board-thumb { transform: translateX(100%); }
.cal-board-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
  letter-spacing: 0.02em;
}
.cal-board-btn:hover:not(.is-active) { color: #0f172a; }
.cal-board-btn.is-active { color: #0f172a; }

/* ===== Wins board — color picker, type icons, bigger pills ===== */
.win-color-row { display: flex; flex-wrap: wrap; gap: 9px; }
.win-color-swatch {
  width: 28px; height: 28px; padding: 0;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.15);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.win-color-swatch:hover { transform: scale(1.12); }
.win-color-swatch.is-active {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px currentColor;
}
.win-icon-row { display: flex; flex-wrap: wrap; gap: 6px; }
.win-icon-btn {
  min-width: 36px; height: 36px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e5e7eb; border-radius: 9px;
  background: #ffffff; cursor: pointer;
  font-size: 17px; font-family: inherit; color: #64748b;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.win-icon-btn:hover { background: #f1f5f9; }
.win-icon-btn.is-active { border-color: #94a3b8; background: #f1f5f9; box-shadow: inset 0 0 0 1px #94a3b8; }

/* Win card — big, bold and imposing so every win reads as a real
   milestone. Used in the month and week grids. The doubled class keeps it
   ahead of the week-view ".cal-week-events .cal-event-pill" override. */
.cal-event-pill.cal-event-pill-win {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  min-height: 0;
  padding: 11px 13px;
  margin-bottom: 6px;
  border-radius: 12px;
  font-size: 13.5px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.01em;
  /* Pure frosted glass — no color fill. The body is translucent white;
     the win color lives only in the thin border, the text and a faint
     halo. Minimal and modern. */
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.66) 0%,
      rgba(255, 255, 255, 0.34) 52%,
      rgba(255, 255, 255, 0.48) 100%);
  color: var(--win-color, #94a3b8);
  border: 1.5px solid var(--win-color, #94a3b8);
  -webkit-backdrop-filter: blur(9px) saturate(1.35);
  backdrop-filter: blur(9px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  white-space: normal;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
/* Glossy bubble highlight across the top half — the classic crystal sheen. */
.cal-event-pill.cal-event-pill-win::before {
  content: "";
  position: absolute;
  inset: 1.5px 1.5px auto 1.5px;
  height: 46%;
  border-radius: 10px 10px 14px 14px / 10px 10px 22px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.cal-event-pill.cal-event-pill-win:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.cal-event-pill.cal-event-pill-win.is-finished { opacity: 0.6; text-decoration: line-through; }
.cal-event-pill.cal-event-pill-win .cal-event-title {
  position: relative; z-index: 1;
  white-space: normal; word-break: break-word;
  overflow: visible; text-overflow: clip;
  flex: 1 1 auto; min-width: 0; font-weight: 700;
}
.cal-win-emoji {
  position: relative; z-index: 1;
  font-size: 21px; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.22));
}

/* Month grid — wins render compact (single line, truncated) so several fit a
   small day cell cleanly instead of stacking as tall multi-line cards. The big
   imposing card style is kept for the Week view. */
.cal-day-events .cal-event-pill.cal-event-pill-win {
  min-height: 0;
  padding: 4px 8px;
  margin-bottom: 0;
  gap: 6px;
  border-radius: 7px;
  border-width: 1px;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
}
.cal-day-events .cal-event-pill.cal-event-pill-win::before { display: none; }
.cal-day-events .cal-event-pill.cal-event-pill-win .cal-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}
.cal-day-events .cal-win-emoji { font-size: 13px; }

/* Day view — Win as a full frosted-glass card. */
.cal-day-event-win {
  position: relative;
  align-items: center;
  gap: 16px;
  border: 1.5px solid var(--win-color, #94a3b8);
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.66) 0%,
      rgba(255, 255, 255, 0.34) 52%,
      rgba(255, 255, 255, 0.48) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(1.35);
  backdrop-filter: blur(9px) saturate(1.35);
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.09),
    0 14px 30px -16px var(--win-color, #94a3b8),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  padding: 17px 20px;
}
/* Glossy bubble highlight across the top half. */
.cal-day-event-win::before {
  content: "";
  position: absolute;
  inset: 1.5px 1.5px auto 1.5px;
  height: 46%;
  border-radius: 12px 12px 16px 16px / 12px 12px 26px 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.cal-day-event-win > * { position: relative; z-index: 1; }
.cal-day-event-win strong { font-size: 18px; font-weight: 800; color: var(--win-color, #94a3b8); }
.cal-day-event-win .cal-day-event-desc { font-size: 13.5px; margin-top: 4px; }
.cal-day-event-icon {
  font-size: 32px; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.22));
}

html.theme-dark .win-icon-btn { background: #1a1a1a; border-color: #333333; color: #d4d4d4; }
html.theme-dark .win-icon-btn:hover { background: #262626; }
html.theme-dark .win-icon-btn.is-active { background: #1e293b; border-color: #94a3b8; }
html.theme-dark .win-color-swatch { border-color: #1a1a1a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
/* Dark mode — same crystal facets, softer sheen so it reads as polished
   glass against the dark surface instead of washing out. */
html.theme-dark .cal-event-pill.cal-event-pill-win {
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.06) 36%,
      rgba(255, 255, 255, 0) 58%),
    color-mix(in srgb, var(--win-color, #94a3b8) 13%, #1c1c22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -11px 20px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html.theme-dark .cal-event-pill.cal-event-pill-win::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
}
html.theme-dark .cal-event-pill.cal-event-pill-win:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -11px 20px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
html.theme-dark .cal-day-event-win {
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.06) 34%,
      rgba(255, 255, 255, 0) 56%),
    color-mix(in srgb, var(--win-color, #94a3b8) 13%, #1c1c22);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -14px 26px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html.theme-dark .cal-day-event-win::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
}

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cal-toolbar-nav, .cal-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-toolbar-actions #cal-add-event { height: 32px; padding: 0 14px; font-size: 13px; }
.cal-title { margin: 0; font-size: 18px; font-weight: 700; color: #0f172a; }
.cal-nav-btn {
  width: 32px; height: 32px;
  padding: 0;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.cal-nav-btn:hover { background: #f1f5f9; color: #64748b; border-color: #94a3b8; }
/* Range picker dropdown. Reuses .cal-tz-pick / .cal-tz-popup / .cal-tz-option
   so it is visually identical to the timezone picker next to it; only the panel
   width changes, since these options are one word each. */
.cal-mode-wrap { position: relative; display: inline-block; }
.cal-mode-popup { min-width: 150px; }
.cal-mode-option { padding: 8px 14px; }
.cal-body { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }

/* Month view */
.cal-month { display: flex; flex-direction: column; }
.cal-month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.cal-month-h { padding: 10px 12px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
.cal-month-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 138px;
}
.cal-day {
  min-height: 0;
  min-width: 0;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition: background 0.1s ease;
}
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day:hover { background: #f8fafc; }
.cal-day.is-other { background: #fafbfc; color: #94a3b8; }
.cal-day.is-other:hover { background: #f1f5f9; }
.cal-day.is-today { background: #f1f5f9; }
.cal-day.is-today:hover { background: #e2e8f0; }
.cal-day-num {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.cal-day.is-other .cal-day-num { color: #94a3b8; }
.cal-day.is-today .cal-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: #94a3b8;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
}
.cal-day-events { display: flex; flex-direction: column; gap: 3px; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.cal-event-pill {
  background: #e2e8f0;
  color: #3f4b5b;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.cal-event-pill:hover { filter: brightness(0.96); }
.cal-event-time { font-weight: 700; opacity: 0.8; }
.cal-event-recur { opacity: 0.7; font-size: 10px; }
.cal-event-more { font-size: 10px; color: #64748b; padding: 0 7px; font-weight: 500; }

/* Event categories — color per category for quick scanning */
.cal-cat-dashboard { background: #e5e7eb; color: #475569; border-left-color: #475569; }
.cal-cat-client    { background: #e5e7eb; color: #475569; border-left-color: #475569; }
.cal-cat-ticket    { background: #e5e7eb; color: #64748b; border-left-color: #64748b; }
.cal-cat-reports   { background: #e5e7eb; color: #64748b; border-left-color: #64748b; }
.cal-cat-meetings  { background: #e2e8f0; color: #475569; border-left-color: #475569; }
.cal-cat-holiday   { background: #fee2e2; color: #b91c1c; border-left-color: #b91c1c; }
.cal-cat-holiday.cal-event-pill,
.widget-cal-tile.is-holiday { cursor: default; }

/* Week view — taller pills with category icon */
.cal-week-events .cal-event-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.25;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.cal-week-events .cal-event-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.cal-week-events .cal-event-pill .cal-event-title {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 600;
}
.cal-week-events .cal-event-pill .cal-event-time { flex-shrink: 0; }
.cal-week-events .cal-event-pill .cal-event-recur,
.cal-week-events .cal-event-pill .cal-event-check { flex-shrink: 0; }
.cal-day-event.cal-cat-dashboard { border-left: 4px solid #475569; }
.cal-day-event.cal-cat-client    { border-left: 4px solid #475569; }
.cal-day-event.cal-cat-ticket    { border-left: 4px solid #64748b; }
.cal-day-event.cal-cat-reports   { border-left: 4px solid #64748b; }
.cal-day-event.cal-cat-meetings  { border-left: 4px solid #475569; }
.cal-day-event.cal-cat-holiday   { border-left: 4px solid #b91c1c; }
.cal-day-event-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

/* CDT timezone indicator on the toolbar (legacy — replaced by cal-tz-pick) */
.cal-tz-indicator {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #475569;
  background: #e2e8f0;
  border-radius: 999px;
  margin-right: 4px;
}

/* User's view-timezone picker on the calendar toolbar — custom dropdown */
.cal-tz-wrap { position: relative; display: inline-block; }
.cal-tz-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Link Google Calendar button (sits to the left of the timezone picker). */
.cal-gcal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2937;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.cal-gcal-btn:hover {
  border-color: #e2e8f0;
  background: #f1f5f9;
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.15);
}
.cal-gcal-btn.is-connected {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(220, 252, 231, 0.7);
  color: #475569;
}
.cal-gcal-btn.is-connected:hover {
  background: rgba(187, 247, 208, 0.85);
  border-color: rgba(255, 255, 255, 0.75);
}
.cal-gcal-btn[disabled] { opacity: 0.6; cursor: progress; }
.cal-gcal-btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Meeting reminders — bell button + popover */
.cal-reminders-wrap { position: relative; display: inline-flex; }
.cal-reminders-btn {
  width: 32px; height: 32px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid #e5e7eb; background: #fff; color: #64748b;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cal-reminders-btn:hover { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.cal-reminders-btn .cal-reminders-icon { width: 16px; height: 16px; }
.cal-reminders-btn.is-on {
  background: linear-gradient(180deg, rgba(219,234,254,0.9), rgba(191,219,254,0.8));
  border-color: rgba(255, 255, 255,0.6); color: #475569;
}
.cal-reminders-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 250px; padding: 14px; border-radius: 16px;
  border: 1px solid rgba(191, 219, 254, 0.55);
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(239,246,255,0.7) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 16px 40px rgba(255, 255, 255,0.18);
}
.cal-reminders-pop[hidden] { display: none; }
.crp-head { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 10px; }
.crp-toggle { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #334155; cursor: pointer; font-weight: 500; }
.crp-toggle input { width: 15px; height: 15px; accent-color: #94a3b8; cursor: pointer; }
.crp-leads-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; font-weight: 700; margin: 12px 0 7px; }
.crp-leads { display: flex; flex-wrap: wrap; gap: 6px; }
.crp-chip {
  border: 1px solid rgba(255, 255, 255,0.5); background: rgba(255,255,255,0.6); color: #64748b;
  font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  transition: background 0.1s ease, transform 0.08s ease, border-color 0.1s ease;
}
.crp-chip:hover { background: rgba(219,234,254,0.7); transform: translateY(-1px); }
.crp-chip.is-on {
  background: linear-gradient(180deg, rgba(255, 255, 255,0.95), rgba(255, 255, 255,0.95));
  color: #fff; border-color: rgba(255, 255, 255,0.5);
}
.crp-hint { font-size: 11px; color: #94a3b8; line-height: 1.45; margin-top: 11px; }
html.theme-dark .cal-reminders-btn { background: rgba(15,23,42,0.55); border-color: rgba(255,255,255,0.15); color: #cbd5e1; }
html.theme-dark .cal-reminders-btn:hover { background: rgba(255, 255, 255,0.6); color: #fff; border-color: rgba(255, 255, 255,0.45); }
html.theme-dark .cal-reminders-btn.is-on { background: linear-gradient(180deg, rgba(255, 255, 255,0.8), rgba(23,37,84,0.8)); color: #e2e8f0; border-color: rgba(255, 255, 255,0.5); }
html.theme-dark .cal-reminders-pop {
  border-color: rgba(255, 255, 255,0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255,0.55) 0%, rgba(23,37,84,0.72) 100%), linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 16px 40px rgba(0,0,0,0.55);
}
html.theme-dark .crp-head { color: #e2e8f0; }
html.theme-dark .crp-toggle { color: #e2e8f0; }
html.theme-dark .crp-chip { background: rgba(15,23,42,0.6); border-color: rgba(255, 255, 255,0.4); color: #e2e8f0; }
html.theme-dark .crp-chip:hover { background: rgba(255, 255, 255,0.6); }
.cal-gcal-btn-label {
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.theme-dark .cal-gcal-btn {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
}
html.theme-dark .cal-gcal-btn:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.45);
}
html.theme-dark .cal-gcal-btn.is-connected {
  background: rgba(20, 83, 45, 0.55);
  border-color: rgba(255, 255, 255, 0.55);
  color: #e2e8f0;
}

/* Reactions strip below a message + the emoji picker popup */
.widget-chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.widget-chat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font: inherit;
  font-size: 11.5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.10);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.widget-chat-reaction:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.widget-chat-reaction.is-mine {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}
.widget-chat-reaction-emoji { font-size: 13px; line-height: 1; }
.widget-chat-reaction-count { font-weight: 700; font-size: 11px; }

.widget-chat-emoji-picker {
  position: fixed;
  z-index: 1200;
  display: grid;
  grid-template-columns: repeat(10, 28px);
  gap: 4px;
  padding: 10px;
  width: max-content;
  max-width: 360px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  animation: profile-modal-pop 0.16s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.widget-chat-emoji-pick {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: background 0.12s ease, transform 0.12s ease;
}
.widget-chat-emoji-pick:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.20); }

/* Emoji trigger button in the compose form */
.widget-chat-emoji-trigger {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  padding: 0;
}
.widget-chat-emoji-trigger:hover { background: #f1f5f9; color: #64748b; }
html.theme-dark .widget-chat-emoji-trigger {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}
html.theme-dark .widget-chat-emoji-trigger:hover { background: rgba(202, 138, 4, 0.20); color: #e2e8f0; }

html.theme-dark .widget-chat-reaction {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f5f5f5;
}
html.theme-dark .widget-chat-reaction:hover { background: rgba(255, 255, 255, 0.20); }
html.theme-dark .widget-chat-reaction.is-mine {
  background: rgba(255, 255, 255, 0.30);
  border-color: rgba(255, 255, 255, 0.55);
}
html.theme-dark .widget-chat-emoji-picker {
  background: #1a1a1a;
  border-color: #262626;
}
html.theme-dark .widget-chat-emoji-pick:hover { background: rgba(255, 255, 255, 0.20); }

/* Small "G" badge on calendar events that came from Google Calendar */
.cal-day-event-gcal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #94a3b8;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-family: 'Product Sans', Arial, sans-serif;
  letter-spacing: 0;
}
/* Linked Google Calendar events render in neutral grey (overrides per-category colors) */
.cal-event-pill.is-gcal {
  background: #e2e8f0;
  color: #475569;
  border-left-color: #94a3b8;
}
.cal-day-event.is-gcal {
  background: #f1f5f9;
  color: #475569;
  border-left: 4px solid #94a3b8;
}
html.theme-dark .cal-event-pill.is-gcal {
  background: linear-gradient(135deg, #64748b 0%, #334155 100%);
  color: #e2e8f0;
  border-left-color: #94a3b8;
}
html.theme-dark .cal-day-event.is-gcal {
  background: #1f2937;
  color: #cbd5e1;
  border-left-color: #94a3b8;
}
html.theme-dark .cal-day-event-gcal {
  background: #64748b;
  color: #f1f5f9;
}
.cal-tz-pick:hover {
  border-color: #e2e8f0;
  background: #f1f5f9;
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.15);
}
.cal-tz-pick.is-open {
  border-color: #94a3b8;
  background: #f1f5f9;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.cal-tz-pick-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #94a3b8;
}
.cal-tz-pick-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.cal-tz-pick-chev {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform 0.18s ease, color 0.12s ease;
}
.cal-tz-pick.is-open .cal-tz-pick-chev { transform: rotate(180deg); color: #94a3b8; }

.cal-tz-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  min-width: 280px;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-tz-popup[hidden] { display: none; }
.cal-tz-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background 0.1s ease, color 0.1s ease;
}
.cal-tz-option:hover { background: #f1f5f9; }
.cal-tz-option-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #475569;
  text-transform: uppercase;
}
.cal-tz-option-name {
  font-size: 12px;
  color: #64748b;
}
.cal-tz-option.is-active {
  background: #64748b;
}
.cal-tz-option.is-active .cal-tz-option-tag,
.cal-tz-option.is-active .cal-tz-option-name { color: #fff; }
.cal-tz-option.is-active:hover { background: #475569; }

/* Timezone compare panel inside the event dialog */
.cal-tz-compare {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-tz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #0f172a;
}
.cal-tz-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #475569;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 2px 8px;
}

/* Week view */
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: calc(100vh - 240px);
}
.cal-week-col {
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.1s ease;
  min-height: 0;
  min-width: 0;
}
.cal-week-col:last-child { border-right: 0; }
.cal-week-col:hover { background: #f8fafc; }
.cal-week-col.is-today { background: #f1f5f9; }
.cal-week-head {
  padding: 10px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
  background: #f8fafc;
  flex-shrink: 0;
}
.cal-week-col.is-today .cal-week-head { background: #e2e8f0; }
.cal-week-day { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
.cal-week-num { font-size: 18px; font-weight: 700; color: #0f172a; margin-top: 2px; }
.cal-week-events {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-width: 0;
}
.cal-week-events .cal-event-pill { min-width: 0; max-width: 100%; }
.cal-week-empty { color: #cbd5e1; font-size: 13px; text-align: center; padding: 20px 0; }

/* Day view */
.cal-day-view { padding: 30px 24px; }
.cal-day-empty { text-align: center; color: #64748b; font-size: 14px; padding: 60px 20px; margin: 0; }
.cal-day-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; }
.cal-day-event {
  display: flex;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.cal-day-event:hover { border-color: #94a3b8; background: #f1f5f9; }
.cal-day-event-time {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  min-width: 70px;
  font-variant-numeric: tabular-nums;
}
.cal-day-event-body { flex: 1; }
.cal-day-event-body strong { font-size: 14px; color: #0f172a; display: block; }
.cal-day-event-recur {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: #475569;
  background: #e5e7eb;
  padding: 1px 6px;
  border-radius: 4px;
}
.cal-day-event-desc { font-size: 12px; color: #64748b; margin-top: 4px; }

/* Year view */
.cal-year {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 18px;
}
@media (max-width: 1100px) { .cal-year { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .cal-year { grid-template-columns: repeat(2, 1fr); } }
.cal-year-month {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.cal-year-month:hover { border-color: #94a3b8; transform: translateY(-2px); }
.cal-year-name { font-size: 13px; font-weight: 700; color: #0f172a; }
.cal-mini { display: flex; flex-direction: column; gap: 2px; }
.cal-mini-head, .cal-mini-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mini-h { font-size: 9px; color: #94a3b8; text-align: center; font-weight: 600; }
.cal-mini-d {
  font-size: 10px;
  color: #475569;
  text-align: center;
  padding: 2px 0;
  border-radius: 2px;
}
.cal-mini-d.is-other { color: #cbd5e1; }
.cal-mini-d.is-today { background: #94a3b8; color: #fff; font-weight: 700; }
.cal-mini-d.has-events { background: #e2e8f0; color: #3f4b5b; font-weight: 600; }
.cal-mini-d.is-today.has-events { background: #64748b; color: #fff; }

/* Event dialog */
.cal-dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 5000;
}
.cal-dialog {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}
.cal-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e5e7eb;
}
.cal-dialog-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; }
.cal-dialog-close {
  width: 30px; height: 30px;
  background: transparent;
  border: 0;
  color: #64748b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.cal-dialog-close:hover { background: #f1f5f9; color: #0f172a; }
.cal-dialog-form { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.cal-field { display: flex; flex-direction: column; gap: 5px; }
.cal-field span {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cal-field input, .cal-field select, .cal-field textarea {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
}
.cal-field input:focus, .cal-field select:focus, .cal-field textarea:focus {
  outline: 2px solid #94a3b8;
  outline-offset: -1px;
  border-color: #94a3b8;
}
.cal-field textarea { resize: vertical; min-height: 56px; }
.cal-field-row { display: flex; gap: 12px; }
.cal-field-row .cal-field { flex: 1; }

/* Fancy date/time picker buttons in the event dialog. Replace native
   <input type="date"/"time"> with a styled button so the popover can be
   fully designed (instead of the default browser picker). */
.cal-fancy-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  width: 100%;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background-color: #f8fafc;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.cal-fancy-input::before {
  content: '';
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.cal-fancy-date::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.cal-fancy-time::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
.cal-fancy-input:hover {
  border-color: #e2e8f0;
  background-color: #f1f5f9;
}
.cal-fancy-input:focus {
  outline: none;
  border-color: #94a3b8;
  background-color: #f1f5f9;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.cal-fancy-input.is-placeholder { color: #94a3b8; font-weight: 500; }

/* Floating date/time picker popover */
.cal-pickup {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.18);
  padding: 12px;
  font-family: inherit;
  user-select: none;
}
.cal-pickup-date { width: 280px; }
.cal-pickup-time { width: 280px; }
.cal-pickup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}
.cal-pickup-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.cal-pickup-nav {
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #64748b;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cal-pickup-nav:hover { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.cal-pickup-dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.cal-pickup-dows span {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 4px 0;
}
.cal-pickup-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-pickup-day {
  aspect-ratio: 1 / 1;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.1s ease, color 0.1s ease;
}
.cal-pickup-day:hover { background: #f1f5f9; color: #64748b; }
.cal-pickup-day.is-other { color: #cbd5e1; }
.cal-pickup-day.is-weekend { color: #64748b; }
.cal-pickup-day.is-other.is-weekend { color: #e2e8f0; }
.cal-pickup-day.is-today {
  background: #f1f5f9;
  color: #475569;
  outline: 1.5px solid #e2e8f0;
}
.cal-pickup-day.is-selected {
  background: #64748b !important;
  color: #fff !important;
  outline: 0;
}
.cal-pickup-day.is-selected:hover { background: #475569 !important; }

.cal-pickup-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}
.cal-pickup-btn {
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cal-pickup-btn:hover { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.cal-pickup-btn.is-primary {
  background: #64748b;
  color: #fff;
  border-color: #64748b;
}
.cal-pickup-btn.is-primary:hover { background: #475569; border-color: #475569; color: #fff; }

/* Time picker spinners */
.cal-pickup-time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 4px 4px;
}
.cal-pickup-spin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cal-pickup-spin-btn {
  width: 60px;
  height: 22px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 6px;
  font-size: 9px;
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.cal-pickup-spin-btn:hover { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.cal-pickup-spin-val {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  width: 60px;
  text-align: center;
  background: #f8fafc;
  border-radius: 8px;
  padding: 4px 0;
}
.cal-pickup-spin-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-top: 2px;
}
.cal-pickup-spin-sep {
  font-size: 28px;
  font-weight: 700;
  color: #94a3b8;
  align-self: flex-start;
  margin-top: 28px;
}
.cal-pickup-ampm {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 8px;
  align-self: stretch;
  justify-content: center;
}
.cal-pickup-ampm-btn {
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cal-pickup-ampm-btn:hover { background: #f1f5f9; color: #64748b; }
.cal-pickup-ampm-btn.is-active {
  background: #64748b;
  color: #fff;
  border-color: #64748b;
}

.cal-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cal-dialog-delete { color: #dc2626; margin-right: auto; }
.cal-dialog-delete:hover { background: #fee2e2; }
.cal-dialog-finish {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #a7f3d0;
}
.cal-dialog-finish:hover { background: #e5e7eb; }
.cal-dialog-finish.is-finished {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
.cal-dialog-finish.is-finished:hover { background: #e2e8f0; }
.cal-dialog.is-finished .cal-dialog-head { background: #f1f5f9; }
.cal-finished-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #475569;
  background: #e5e7eb;
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: middle;
}

/* Finished events: dimmed + strikethrough across all views */
.cal-event-pill.is-finished { opacity: 0.55; text-decoration: line-through; }
.cal-event-pill.is-finished:hover { opacity: 0.8; }
.cal-event-check { font-weight: 700; color: #475569; margin-right: 2px; }
.cal-day-event.is-finished { opacity: 0.6; }
.cal-day-event.is-finished strong { text-decoration: line-through; }
.cal-day-event-finished {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  background: #e5e7eb;
  color: #475569;
  vertical-align: middle;
}
.widget-cal-row.is-finished { opacity: 0.55; }
.widget-cal-row.is-finished strong { text-decoration: line-through; }

/* Calendar widget on Merlyn dashboard */
.widget-cal-body {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.widget-cal-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.widget-cal-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.widget-cal-row:hover { border-color: #94a3b8; background: #f1f5f9; }
.widget-cal-date {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 90px;
  font-variant-numeric: tabular-nums;
}
.widget-cal-info { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.widget-cal-info strong { font-size: 13px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-cal-recur { color: #475569; font-size: 13px; }
.widget-cal-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}
.widget-cal-open {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  padding: 6px 12px;
}

/* Calendar widget — hero (next-up) + 2 mini tiles layout */
.widget-cal-trio {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.widget-cal-tile-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-height: 0;
}
.widget-cal-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #94a3b8;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  height: 100%;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.widget-cal-tile:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.widget-cal-tile-hero {
  padding: 16px 18px;
  gap: 6px;
}
.widget-cal-tile-mini {
  padding: 10px 12px;
  gap: 2px;
}
.widget-cal-tile-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 2px;
}
.widget-cal-tile-when {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.widget-cal-tile-hero .widget-cal-tile-when { font-size: 12px; }
.widget-cal-tile-day {
  font-size: 11px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.widget-cal-tile-title {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  word-break: break-word;
  line-height: 1.3;
}
.widget-cal-tile-hero .widget-cal-tile-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.widget-cal-tile-time {
  font-size: 12px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.widget-cal-tile-hero .widget-cal-tile-time {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.widget-cal-tile .widget-cal-recur {
  display: inline-block;
  font-size: 11px;
  color: #475569;
  margin-left: 4px;
}

/* Currently-happening event tile — purple-tinted background so it visually
   reads as "now" vs the upcoming tiles. */
.widget-cal-tile.widget-cal-tile-now {
  background: #faf5ff;
  border-color: #e2e8f0;
}
.widget-cal-tile.widget-cal-tile-now:hover { background: #f1f5f9; }
.widget-cal-tile.widget-cal-tile-now .widget-cal-tile-when { color: #475569; }

/* Empty-state inside the Calendar widget when the user hasn't linked their
   Google Calendar yet. */
.widget-cal-link-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
}
.widget-cal-link-msg {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 320px;
  line-height: 1.4;
}
.widget-cal-link-btn {
  font-size: 13px;
  padding: 8px 16px;
}
.widget-cal-link-open {
  font-size: 12px;
  padding: 6px 12px;
  margin-top: 2px;
}

/* Campaigns view-mode tabs (Performance vs Marketing Team) */
.eh-camp-mode-tabs {
  position: relative;
  display: inline-flex;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
/* Sliding pill — JS sets its width + translateX to the active tab; the
   transition animates the glide between Performance and Marketing Team. */
.eh-camp-mode-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #94a3b8;
  border-radius: 7px;
  z-index: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.5, 1), width 0.32s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.eh-camp-mode-tab {
  position: relative;
  z-index: 1;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: color 0.2s ease;
}
.eh-camp-mode-tab.is-active { color: #fff; }
.eh-camp-mode-tab:hover:not(.is-active) { color: #0f172a; }

/* Results column with Meta-style "9 / Website purchases" two-line cell */
.eh-cell-results { line-height: 1.2; }
.eh-cell-results-num { font-weight: 600; color: #0f172a; }
.eh-cell-results-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  margin-top: 2px;
}

:root {
  --bg: #ffffff;
  --bg-subtle: #f6f9fd;
  --blue-50: #f1f5f9;
  --blue-100: #e2e8f0;
  --blue-200: #e2e8f0;
  --blue-300: #e2e8f0;
  --blue-400: #cbd5e1;
  --blue-500: #94a3b8;
  --blue-600: #64748b;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e5e7eb;
  --success: #94a3b8;
  --warn: #94a3b8;
  --danger: #ef4444;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }
/* min-height (not height) lets the body grow with content so its background
   — including the Apollo body gradient — extends the full page, not just
   the first 100vh of viewport. */
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Ambient rain canvas — sits over every view as a soft overlay so the effect
   reads on every page without breaking readability. Honours light/dark theme
   with tuned palettes inside rain.js. */
#rain-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.95;
}
@media (prefers-reduced-motion: reduce) {
  #rain-bg { opacity: 0.6; }
}

h1, h2, h3, h4 { color: var(--text); }

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

/* ----- BRAND ----- */
.brand { display: flex; gap: 10px; align-items: center; }
.brand-avatar-btn {
  position: relative;
  width: 40px; height: 40px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.brand-avatar-btn:hover { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); }
.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-avatar-cam {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.brand-avatar-btn:hover .brand-avatar-cam { opacity: 1; }
.brand-avatar-cam svg { width: 16px; height: 16px; }
.brand-title { font-weight: 600; }
.brand-sub { font-size: 12px; color: var(--muted); }

/* ----- BUTTONS ----- */
.btn {
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn-primary { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }
.btn-primary:hover { background: var(--blue-600); border-color: var(--blue-600); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--blue-50); border-color: var(--blue-200); }

/* ----- DASHBOARD LAYOUT ----- */
#view-dashboard.active {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
  background: var(--bg-subtle);
}

.sidebar {
  background: var(--blue-50);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
/* The categories list grows to fill available space and scrolls if it
   overflows — this keeps the brand pinned to the top and the footer
   (logout + manage tokens) pinned to the bottom of the viewport. */
#sidebar-categories {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.sidebar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.sidebar-group + .sidebar-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--blue-200);
}
.sidebar-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 4px 6px;
  background: transparent;
  border: none;
  font: inherit;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 6px;
}
.sidebar-toggle:hover { background: var(--blue-100); color: var(--text); }
.sidebar-toggle .chevron {
  font-size: 11px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.sidebar-group.collapsed .sidebar-toggle .chevron { transform: rotate(-90deg); }
.sidebar-group.collapsed .portfolio-list { display: none; }
.portfolio-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.portfolio-list li {
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  transition: background 0.12s ease;
}
.portfolio-list li:hover { background: var(--blue-100); }
.portfolio-list li.active { background: var(--blue-500); color: #fff; }
.portfolio-list li.active .dot { background: #fff; }

/* Active LI: background is provided by the sliding indicator behind it */
.portfolio-list li.active {
  background: transparent;
  color: #ffffff;
}
.portfolio-list li.active .dot { background: #ffffff; }

/* Sliding active indicator — solid color block that animates between items */
#sidebar-categories { position: relative; }
/* Sidebar scrollbar — fully invisible at rest. JS adds .is-scrolling while
   the user is actively scrolling, which fades the thumb in for ~1s. */
#sidebar-categories { scrollbar-width: thin; scrollbar-color: transparent transparent; }
#sidebar-categories::-webkit-scrollbar { width: 8px; }
#sidebar-categories::-webkit-scrollbar-track { background: transparent; }
#sidebar-categories::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.25s ease;
}
#sidebar-categories::-webkit-scrollbar-corner { background: transparent; }

#sidebar-categories.is-scrolling { scrollbar-color: #cbd5e1 transparent; }
#sidebar-categories.is-scrolling::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.theme-dark #sidebar-categories.is-scrolling { scrollbar-color: #1a1a1a transparent; }
html.theme-dark #sidebar-categories.is-scrolling::-webkit-scrollbar-thumb { background: #1a1a1a; }
.portfolio-list li { position: relative; z-index: 1; }
.sidebar-active-indicator {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  border-radius: 8px;
  background: var(--blue-500);
  opacity: 0;
  z-index: 0;
  transition:
    top 0.22s cubic-bezier(0.4, 0.8, 0.2, 1),
    left 0.22s cubic-bezier(0.4, 0.8, 0.2, 1),
    width 0.22s cubic-bezier(0.4, 0.8, 0.2, 1),
    height 0.22s cubic-bezier(0.4, 0.8, 0.2, 1),
    opacity 0.16s ease;
}
html.theme-dark .sidebar-active-indicator { background: #334155; }
.portfolio-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-400); flex-shrink: 0; display: none; }
.portfolio-list li.active .dot { display: inline-block; }
.portfolio-list .dot.no-token { background: #cbd5e1; }
.portfolio-list li.all { /* visual divider removed per request */ }
.sidebar-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--blue-200);
  background: var(--blue-50);
}

.main { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; overflow-x: auto; position: relative; }
#view-clients > * + * { margin-top: 24px; }

/* Loading overlay on the Meta Clients page: shown while portfolio data is
   being fetched (initial load or background refresh). Hides all other
   children of #view-clients so stale/empty data isn't shown alongside the
   spinner. */
#view-clients.is-loading > *:not(#clients-loading) { display: none; }
.clients-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0 !important;
  z-index: 50;
  pointer-events: none;
}
.clients-loading > * { pointer-events: auto; }
@media (max-width: 900px) {
  .clients-loading { left: 0; }
}
/* `display: flex` above overrides the default `[hidden] { display: none }`,
   so force the hidden attribute to actually hide the overlay. */
.clients-loading[hidden] { display: none !important; }
.clients-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px 40px;
}
.clients-loading-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid var(--blue-100);
  border-top-color: var(--blue-500);
  animation: clients-loading-spin 0.9s linear infinite;
}
@keyframes clients-loading-spin { to { transform: rotate(360deg); } }
.clients-loading-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.clients-loading-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 280px;
  max-width: 80vw;
}
.clients-loading-progress-track {
  width: 100%;
  height: 6px;
  background: var(--blue-50);
  border-radius: 999px;
  overflow: hidden;
}
.clients-loading-progress-fill {
  height: 100%;
  background: var(--blue-500);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.clients-loading-progress-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
html.theme-dark .clients-loading-spinner {
  border-color: #262626;
  border-top-color: var(--blue-500);
}
html.theme-dark .clients-loading-progress-track { background: #1f1f1f; }
.main-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; position: relative; }
.main-header-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.main-header h2 { margin: 0; font-size: 22px; }
.api-status { font-size: 12px; color: var(--muted); margin-top: 4px; }
.api-status.ok { color: var(--blue-600); font-weight: 500; }
.api-status.err { color: var(--danger); }
.header-actions { display: flex; gap: 10px; align-items: flex-end; }

.select-wrap { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.select-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.select-ctrl {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.select-ctrl:focus { outline: 2px solid var(--blue-200); border-color: var(--blue-400); }
.card-header-actions { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }

/* ----- Date range picker ----- */
.dr-wrap { position: relative; }
.dr-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-width: 178px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.dr-trigger:hover { border-color: var(--blue-300); }
/* Header Refresh sits next to the date-range trigger, so it copies its box:
   same height, same border, same background instead of the filled primary. */
.header-actions .dr-trigger,
.header-actions #refresh-btn {
  box-sizing: border-box;
  min-height: 37px;
}
.header-actions #refresh-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.header-actions #refresh-btn:hover { background: #fff; border-color: var(--blue-300); }
html.theme-dark .header-actions #refresh-btn { background: #0a0a0a; color: var(--text); }
html.theme-dark .header-actions #refresh-btn:hover { background: #0a0a0a; border-color: var(--blue-300); }
.dr-trigger[aria-expanded="true"] { border-color: var(--blue-400); box-shadow: 0 0 0 3px var(--blue-100); }
.dr-trigger-icon { color: var(--blue-500); flex: none; }
.dr-trigger-text { flex: 1 1 auto; text-align: left; white-space: nowrap; }
.dr-trigger-chev { color: var(--muted); flex: none; transition: transform 0.15s ease; }
.dr-trigger[aria-expanded="true"] .dr-trigger-chev { transform: rotate(180deg); }
html.theme-dark .dr-trigger { background: #0a0a0a; }

.dr-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  overflow: hidden;
  cursor: default;
}
html.theme-dark .dr-popover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5); }
.dr-popover[hidden] { display: none; }

.dr-presets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  width: 150px;
  border-right: 1px solid var(--border);
  background: var(--bg-subtle);
}
.dr-preset {
  text-align: left;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.dr-preset:hover { background: var(--blue-50); }
.dr-preset.is-active { background: var(--blue-500); color: #fff; font-weight: 600; }

.dr-calendars { padding: 14px 16px 12px; }
.dr-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dr-cal-titles { display: flex; flex: 1 1 auto; justify-content: space-around; }
.dr-cal-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.dr-nav {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.dr-nav:hover { background: var(--blue-50); border-color: var(--blue-300); }
html.theme-dark .dr-nav { background: #0a0a0a; }

.dr-cal-grids { display: flex; gap: 22px; }
.dr-cal { width: 196px; }
.dr-dow-row, .dr-day-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dr-dow {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 4px 0;
}
.dr-day-grid { gap: 1px 0; }
.dr-day {
  position: relative;
  height: 28px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  border-radius: 7px;
  transition: background 0.08s ease, color 0.08s ease;
}
.dr-day:hover:not(.dr-empty):not(:disabled) { background: var(--blue-100); }
.dr-day.dr-empty { cursor: default; }
.dr-day.dr-future { color: var(--muted); opacity: 0.4; cursor: not-allowed; }
.dr-day.dr-in-range {
  background: var(--blue-50);
  border-radius: 0;
  color: var(--blue-600);
}
.dr-day.dr-sel-start, .dr-day.dr-sel-end {
  background: var(--blue-500);
  color: #fff;
  font-weight: 600;
  border-radius: 7px;
}
.dr-day.dr-in-range.dr-sel-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dr-day.dr-in-range.dr-sel-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dr-day.dr-sel-single { border-radius: 7px; }

.dr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dr-range-fields { display: flex; align-items: center; gap: 8px; }
.dr-field {
  min-width: 96px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}
.dr-field.is-set { color: var(--text); border-color: var(--blue-300); }
.dr-field-sep { color: var(--muted); }
.dr-actions { display: flex; gap: 8px; }
.dr-actions .btn { padding: 7px 16px; }
.dr-actions .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* ----- KPI ----- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
@media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: #fff;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  position: relative;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
/* Copy feedback uses ::before so it never collides with the owner-badge
   ::after on the Meta KPIs page (that collision stretched the pill into a
   giant vertical oval reading "MERLYN"). */
.kpi.copied::before {
  content: "Copied";
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  color: var(--blue-600, #64748b);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 1px 8px;
  border-radius: 999px;
  pointer-events: none;
  animation: kpi-copied-pulse 0.9s ease forwards;
}
.kpi.kpi-highlight.copied::before {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
}
@keyframes kpi-copied-pulse {
  0%   { opacity: 0; transform: translateY(-2px); }
  15%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
.kpi-range {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.kpi-highlight { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }
.kpi-highlight .kpi-label { color: rgba(255, 255, 255, 0.9); }
.kpi-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Widget KPIs grid (used by Merlyn dashboard KPI widgets): 2-column layout.
   The 7th item spans both columns to stay centered in the bottom row. */
.kpi-grid.kpi-grid-large {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.kpi-grid.kpi-grid-large > .kpi:nth-child(7) { grid-column: 1 / -1; }
@media (max-width: 540px) {
  .kpi-grid.kpi-grid-large { grid-template-columns: 1fr; }
  .kpi-grid.kpi-grid-large > .kpi:nth-child(7) { grid-column: auto; }
}

/* Unified KPIs grid on the Meta KPIs page — all owners' KPIs in one grid,
   each card tagged with its owner via a small badge at the bottom-right. */
.kpis-unified {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
@media (max-width: 1100px) {
  .kpis-unified { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .kpis-unified { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .kpis-unified { grid-template-columns: 1fr; }
}

/* Section headings on the Meta KPIs page (Meta KPIS / Marketing KPIS). */
.kpis-section-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 2px 2px 14px;
}
.kpis-section-title + .kpi-grid { margin-top: 0; }
#view-kpis .kpis-section-title:not(:first-child) { margin-top: 30px; }
html.theme-dark .kpis-section-title { color: #f5f5f5; }

/* Owner badge on each KPI card in the Meta KPIs page. */
#view-kpis .kpi[data-owner]::after {
  content: attr(data-owner);
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
#view-kpis .kpi-highlight[data-owner]::after {
  color: rgba(255, 255, 255, 0.85);
}

/* Move the existing range hint to bottom-left so it doesn't collide with the owner badge. */
#view-kpis .kpi-range {
  right: auto;
  left: 12px;
}

/* KPI cards within the unified grid: roomier sizing. */
.kpis-unified.kpi-grid > .kpi {
  padding: 18px 16px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kpis-unified.kpi-grid > .kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}
.kpis-unified.kpi-grid .kpi-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.kpis-unified.kpi-grid .kpi-value {
  font-size: 30px;
  margin-top: 8px;
  line-height: 1.05;
}

/* KPI widgets on the Merlyn dashboard — same .kpi-grid-large layout but
   slightly more compact since the widget itself is narrower. */
.widget-kpi-body { padding: 14px 16px; }
.widget-kpi-body .kpi-grid.kpi-grid-large .kpi {
  padding: 14px 14px;
  min-height: 92px;
}
.widget-kpi-body .kpi-grid.kpi-grid-large .kpi-value { font-size: 26px; margin-top: 6px; }
.widget-kpi-body-single .kpi-grid.kpi-grid-large { grid-template-columns: 1fr; }

/* Clock widget — multiple analog clocks per widget. */
.widget-body.widget-clock-body { padding: 46px 24px 64px; }
.widget-clock-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.widget-clock-add-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.widget-clock-add-header:hover {
  background: var(--blue-50);
  color: var(--blue-600);
  border-color: var(--blue-500);
}
.widget-clock-empty {
  width: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 20px 8px;
}
.clock-item {
  position: relative;
  width: 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.clock-remove,
.clock-settings {
  position: absolute;
  top: -6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, opacity 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.clock-remove { right: -6px; opacity: 0; pointer-events: none; }
.clock-settings { left: -6px; opacity: 0; pointer-events: none; }
.clock-item:hover .clock-remove,
.clock-item:hover .clock-settings { opacity: 1; pointer-events: auto; }
.clock-remove:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.clock-settings:hover { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-500); }
.clock-settings svg { width: 12px; height: 12px; }
.clock-tz { color: var(--muted); font-weight: 400; font-size: 10px; }
.clock-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 2px;
}

/* Style picker popover for clocks */
.clock-style-picker {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 10px;
  z-index: 200;
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.clock-style-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 8px 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.clock-style-option:hover { background: var(--blue-50); }
.clock-style-option.is-active { border-color: var(--blue-500); background: var(--blue-50); }
.clock-style-preview { width: 56px; height: 56px; }
.clock-style-preview svg { width: 100%; height: 100%; display: block; }
.clock-style-name {
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
}
.clock-style-option-custom .clock-style-preview {
  border: 2px dashed var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.clock-style-option-custom:hover .clock-style-preview {
  border-color: var(--blue-500);
  background: var(--blue-50);
}
.clock-style-add-icon {
  font-size: 26px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1;
}
.clock-style-option-custom:hover .clock-style-add-icon { color: var(--blue-500); }
.clock-style-option-custom.is-active .clock-style-preview { border-style: solid; border-color: var(--blue-500); padding: 0; }
.clock-face {
  width: 162px;
  height: 162px;
  display: block;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform-origin: center;
  will-change: transform;
}
.clock-face svg { width: 100%; height: 100%; display: block; }
.clock-item:hover .clock-face { transform: scale(1.07); }
.clock-swoosh {
  pointer-events: none;
  opacity: 0;
  transform: translate(-30px, -30px);
}
.clock-item.is-swooshing .clock-swoosh {
  animation: clock-swoosh 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes clock-swoosh {
  0%   { transform: translate(-30px, -30px); opacity: 1; }
  100% { transform: translate(110px, 110px); opacity: 1; }
}
.clock-face-bg {
  fill: #f8fafc;
  stroke: #e2e8f0;
  stroke-width: 1;
}
.clock-tick { stroke: #94a3b8; stroke-width: 1.4; stroke-linecap: round; }
.clock-tick-big { stroke: #475569; stroke-width: 2.2; }
.clock-hand-hour { stroke: #0f172a;        stroke-width: 3.2; }
.clock-hand-min  { stroke: #334155;        stroke-width: 2;   }
.clock-hand-sec  { stroke: var(--blue-500);stroke-width: 1.2; }
.clock-center { fill: #0f172a; }
.clock-digital {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
  margin-top: 2px;
}
.clock-city {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  text-align: center;
  max-width: 168px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clock-add {
  width: 162px;
  height: 162px;
  border: 2px dashed var(--border);
  border-radius: 50%;
  background: #fff;
  font-size: 44px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 300;
  line-height: 1;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease, transform 0.12s ease;
  align-self: flex-start;
  margin-top: 0;
}
.clock-add:hover {
  border-color: var(--blue-500);
  color: var(--blue-500);
  background: var(--blue-50);
  transform: translateY(-2px);
}

/* Floating clock picker (popover under the + button) */
.clock-picker {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 8px;
  width: 280px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.clock-picker-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
}
.clock-picker-input:focus { outline: 2px solid var(--blue-500); outline-offset: -1px; }
.clock-picker-suggestions {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.clock-picker-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.clock-picker-suggestion strong { font-weight: 600; }
.clock-picker-suggestion .muted { font-size: 11px; color: var(--muted); }
.clock-picker-suggestion:hover { background: var(--blue-50); }
.clock-picker-suggestion-custom { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }
.clock-picker-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.clock-picker-header strong { color: var(--blue-600); font-weight: 700; }
.kpi-grid.kpi-grid-large .kpi {
  padding: 18px 16px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kpi-grid.kpi-grid-large .kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}
.kpi-grid.kpi-grid-large .kpi-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.kpi-grid.kpi-grid-large .kpi-value {
  font-size: 30px;
  margin-top: 8px;
  line-height: 1.05;
}
.kpi-grid.kpi-grid-large .kpi-range {
  font-size: 11px;
  right: 12px;
  bottom: 8px;
}

/* ----- CARD + TABLE ----- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); gap: 12px; }
.card-header h3 { margin: 0; font-size: 16px; }
.card-header input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; width: 240px; font-family: inherit; font-size: 14px; }
.card-header input:focus { outline: 2px solid var(--blue-200); border-color: var(--blue-400); }

.search-wrap { position: relative; display: inline-block; }
.search-wrap input { padding-right: 34px; }
.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: #e5e7eb;
  color: #475569;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.search-clear:hover { background: var(--blue-100); color: var(--blue-600); }
.search-wrap.has-value .search-clear { display: flex; }

.client-table { width: 100%; border-collapse: collapse; }
.client-table th, .client-table td { text-align: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.client-table th:first-child, .client-table td:first-child { text-align: left; padding-left: 20px; }
.client-table th { background: var(--bg-subtle); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.client-table tbody tr:last-child td { border-bottom: none; }
.client-table tbody tr { cursor: pointer; }
.client-table tbody tr:hover td { background: var(--blue-50); }
.client-table .score-bar { justify-content: center; }
.client-table .col-portfolio { display: none; }
.client-table.show-portfolio .col-portfolio { display: table-cell; }

.chart-breadcrumb {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  flex-wrap: wrap;
}
.chart-breadcrumb .crumb {
  color: var(--blue-600);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 6px;
}
.chart-breadcrumb .crumb:hover { background: var(--blue-50); }
.chart-breadcrumb .crumb.current {
  color: var(--text);
  background: var(--blue-100);
  font-weight: 600;
}
.chart-breadcrumb .crumb-sep { color: var(--muted); }

.chart-body {
  display: flex;
  gap: 56px;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  flex-wrap: wrap;
}
.chart-body svg { width: 460px; height: 460px; max-width: 100%; flex-shrink: 0; }
@media (max-width: 720px) {
  .chart-body svg { width: 320px; height: 320px; }
  .chart-body { padding: 24px 16px; gap: 28px; }
}
.chart-body svg path,
.chart-body svg circle {
  transition: transform 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
  transform-origin: 0 0;
}
.chart-body svg path.slice-active,
.chart-body svg circle.slice-active {
  filter: brightness(1.18) drop-shadow(0 4px 10px rgba(15, 23, 42, 0.18));
  transform: scale(1.04);
}
.legend-item {
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.12s ease;
}
.legend-item.slice-active {
  background: var(--blue-50);
}
.legend-item.slice-active .legend-label {
  color: var(--blue-600);
  font-weight: 600;
}
.legend-item.slice-active .legend-swatch {
  transform: scale(1.25);
  transition: transform 0.12s ease;
}
.legend-item.clickable { cursor: pointer; }
.chart-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 240px;
}
.legend-total {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.legend-label { flex: 1; }
.legend-value {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.legend-item.highlighted {
  background: var(--blue-50);
  border-radius: 6px;
  padding: 2px 6px;
  margin: -2px -6px;
}
.legend-item.clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 0.12s ease;
}
.legend-item.clickable:hover { background: var(--blue-50); }

.chart-client-table { width: 100%; border-collapse: collapse; }
.chart-client-table th,
.chart-client-table td {
  text-align: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.chart-client-table th:first-child,
.chart-client-table td:first-child {
  text-align: left;
  padding-left: 20px;
}
.chart-client-table th {
  background: var(--bg-subtle);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.chart-client-table tbody tr:last-child td { border-bottom: none; }
.portfolio-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--blue-100); color: var(--blue-600); font-weight: 500; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-l1 { background: #e5e7eb; color: #475569; }
.badge-l2 { background: #e5e7eb; color: #3f4b5b; }
.badge-l3 { background: #e2e8f0; color: #334155; }
.badge-live { background: #e2e8f0; color: #334155; }
.badge-paused { background: #f1f5f9; color: #475569; }
.badge-payment { background: #fee2e2; color: #991b1b; }

.score-bar { display: flex; align-items: center; gap: 10px; }
.score-bar-track { width: 96px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.score-bar-fill { height: 100%; background: var(--blue-500); border-radius: 3px; transition: width 0.25s ease, background 0.15s ease; }
.score-bar-fill.score-good { background: var(--blue-500); }
.score-bar-fill.score-mid  { background: var(--warn); }
.score-bar-fill.score-bad  { background: var(--danger); }
.score-value { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 28px; display: inline-block; text-align: right; }

/* ----- DRAWER ----- */
/* z-index 95: must sit above the Apollo panel overlays (help/underperformers/
   payments/houston use z-index 70-73, the crystal dock is 80) — "View full
   profile" from inside one of those panels was opening the drawer, it just
   rendered underneath everything so it silently did nothing. */
.drawer { position: fixed; inset: 0; display: none; z-index: 95; }
.drawer.open { display: block; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.35); }
.drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(680px, 94vw);
  background: #fff;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
  display: flex; flex-direction: column;
}
.drawer-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.drawer-header h2 { margin: 0; font-size: 20px; text-align: center; }
.drawer-titleblock {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.drawer-client-logo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  padding: 4px;
}
.drawer-website-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.drawer-website-link:hover {
  background: var(--blue-50);
  color: var(--blue-500);
  border-color: var(--blue-500);
}
.drawer-website-link[hidden] { display: none; }
.drawer-meta { color: var(--muted); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }
.drawer-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; align-items: stretch; }
.drawer-actions .btn { white-space: nowrap; }
.drawer-body { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }

.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.metric { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.metric-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.metric-value { font-weight: 600; font-size: 16px; margin-top: 2px; font-variant-numeric: tabular-nums; }

.section {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.section h4 { margin: 0 0 8px; font-size: 12px; color: var(--blue-600); text-transform: uppercase; letter-spacing: 0.08em; }
.section ul { margin: 0; padding-left: 18px; }
.section li { margin-bottom: 4px; }
.section-text { margin: 4px 0; font-size: 13px; line-height: 1.5; }
.section-text.muted-text { color: var(--muted); }

/* ----- ANALYSIS: key metrics row (denser than header) ----- */
.metric-row-analysis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ----- ANALYSIS: charts grid ----- */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) { .charts-grid { grid-template-columns: 1fr; } }

.chart-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.chart-title {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--blue-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Funnel */
.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: flex; flex-direction: column; gap: 4px; }
.funnel-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.funnel-bar-wrap { background: var(--bg-subtle); border-radius: 6px; height: 26px; position: relative; overflow: hidden; }
.funnel-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-400));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  transition: width 0.3s ease;
}
.funnel-value { color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-rate { font-size: 11px; color: var(--muted); padding-left: 2px; }

/* Gauges (bars vs benchmark) */
.gauges { display: flex; flex-direction: column; gap: 14px; }
.gauge-row { display: flex; flex-direction: column; gap: 4px; }
.gauge-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.gauge-label { color: var(--text); font-weight: 500; }
.gauge-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.gauge-value.tone-positive { color: var(--success); }
.gauge-value.tone-concern  { color: var(--danger); }
.gauge-value.tone-neutral  { color: var(--text); }
.gauge-track {
  position: relative;
  height: 10px;
  background: var(--bg-subtle);
  border-radius: 5px;
  overflow: visible;
}
.gauge-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}
.gauge-fill.tone-positive { background: var(--success); }
.gauge-fill.tone-concern  { background: var(--danger); }
.gauge-fill.tone-neutral  { background: var(--blue-400); }
.gauge-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: #0f172a;
  border-radius: 1px;
}
.gauge-marker::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -3px;
  width: 8px;
  height: 4px;
  background: #0f172a;
  border-radius: 2px 2px 0 0;
}
.gauge-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ----- ANALYSIS: callouts (wins / improvements / mistakes) ----- */
.callout {
  background: #fff;
  border: 1px solid var(--border);
  border-left-width: 4px;
}
.callout h4 { color: var(--text); margin-bottom: 10px; }
.callout-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.callout-list li {
  position: relative;
  padding: 8px 44px 8px 28px;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg-subtle);
  border-radius: 6px;
}
.callout-list li::before {
  position: absolute;
  left: 9px;
  top: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

.callout-wins { border-left-color: var(--success); background: #f1f5f9; }
.callout-wins h4 { color: #475569; }
.callout-wins .callout-list li { background: #fff; border: 1px solid #e2e8f0; }
.callout-wins .callout-list li::before { content: '✓'; color: var(--success); }

.callout-improve { border-left-color: var(--blue-500); background: var(--blue-50); }
.callout-improve h4 { color: var(--blue-600); }
.callout-improve .callout-list li { background: #fff; border: 1px solid var(--blue-100); }
.callout-improve .callout-list li::before { content: '→'; color: var(--blue-500); }

.callout-mistakes { border-left-color: var(--danger); background: #fef2f2; }
.callout-mistakes h4 { color: #991b1b; }
.callout-mistakes .callout-list li { background: #fff; border: 1px solid #fecaca; }
.callout-mistakes .callout-list li::before { content: '!'; color: var(--danger); }

.rec-stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.rec-stamp-label { font-weight: 600; color: #475569; }
.rec-stamp-date { font-weight: 700; color: #0f172a; }
.rec-stamp-note { color: var(--muted); }
html.theme-dark .rec-stamp { background: #0a0a0a; border-color: #262626; color: #a3a3a3; }
html.theme-dark .rec-stamp-label { color: #cbd5e1; }
html.theme-dark .rec-stamp-date { color: #f8fafc; }

/* ----- DRAWER: campaigns table ----- */
.campaigns-table-wrap { overflow-x: auto; margin: 0 -6px; }
.campaigns-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.campaigns-table th {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  white-space: nowrap;
}
.campaigns-table td {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}
.campaigns-table th.eh-tree-name-col,
.campaigns-table td.eh-tree-name-col { text-align: left; }
.campaigns-table tr:last-child td { border-bottom: none; }
.campaigns-table tr:hover td { background: var(--blue-50); }

/* ----- MODAL ----- */
.modal { position: fixed; inset: 0; display: none; z-index: 10; }
.modal.open { display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.35); }
.modal-panel {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(620px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-header h2 { margin: 0; font-size: 18px; }
.muted { color: var(--muted); font-size: 13px; margin: 0; }
.tokens-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tokens-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.tokens-form textarea {
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  resize: vertical;
}
.tokens-form textarea:focus { outline: 2px solid var(--blue-200); border-color: var(--blue-400); }
.tokens-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ----- MERLYN TASK LIST ----- */
.merlyn-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.merlyn-col-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 1100px) {
  .merlyn-grid { grid-template-columns: 1fr; }
}
.task-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.task-divider {
  list-style: none;
  margin-top: 8px;
  padding: 6px 2px 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-top: 1px dashed var(--border);
}
.task-input-row { display: flex; gap: 8px; }
.task-input-row input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}
.task-input-row input:focus { outline: 2px solid var(--blue-200); border-color: var(--blue-400); }

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.task-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-500);
  cursor: pointer;
  flex-shrink: 0;
}
.task-text { flex: 1; font-size: 14px; word-break: break-word; }
.task-item.done {
  background: #f1f5f9;
  border-color: #a7f3d0;
}
.task-item.done .task-text {
  color: var(--success);
  text-decoration: line-through;
}
.task-item.vault {
  background: #f8fafc;
  border-color: var(--border);
  opacity: 0.85;
}
.task-item.vault .task-text {
  color: var(--muted);
  text-decoration: line-through;
}
.task-actions { display: flex; gap: 4px; flex-shrink: 0; }
.btn-link {
  background: transparent;
  border: none;
  color: var(--blue-500);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: inherit;
}
.btn-link:hover { background: var(--blue-50); }
.btn-link-danger { color: var(--danger); }
.btn-link-danger:hover { background: #fef2f2; }
.task-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  list-style: none;
}

/* ----- CAMPAIGN SNIPPETS ----- */
.campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.campaign-snippet {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.campaign-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.campaign-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.campaign-badge-cold { background: #e2e8f0; color: #475569; }
.campaign-badge-warm { background: #e5e7eb; color: #475569; }
.campaign-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.campaign-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  word-break: break-word;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
  position: relative;
}
.campaign-line:hover {
  background: var(--blue-50);
  border-color: var(--blue-200);
}
.campaign-line:active { transform: translateY(1px); }
.campaign-line.copied {
  background: #f1f5f9;
  border-color: var(--success);
  color: var(--success);
}
/* ----- NAME MISMATCHES ----- */
.mismatch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mismatch-group-header {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
}
.mismatch-group-header:first-child { margin-top: 14px; }
.mismatch-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--blue-50);
  border-radius: 999px;
  padding: 1px 8px;
  letter-spacing: 0;
}
.mismatch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.4s ease, transform 0.4s ease;
}
.mismatch-time {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.mismatch-item.fixed .mismatch-time { color: var(--success); }

/* Glassmorphism pill buttons — used for Rename and Mark fixed in mismatches */
.mismatch-rename-btn,
.mismatch-check-btn {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  border: 1.5px solid rgba(224, 224, 224, 0.30);
  -webkit-backdrop-filter: blur(28px) saturate(80%);
  backdrop-filter: blur(28px) saturate(80%);
  box-shadow: inset 0 0 4px 2px rgba(255, 255, 255, 0.35);
  transition: background 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
}
/* Two-layer reflection (angled edge + vertical sheen) */
.mismatch-rename-btn::before,
.mismatch-check-btn::before,
.mismatch-rename-btn::after,
.mismatch-check-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.mismatch-rename-btn::before,
.mismatch-check-btn::before {
  background: linear-gradient(to left top, rgba(255,255,255,0.175) 0%, rgba(255,255,255,0) 50%);
}
.mismatch-rename-btn::after,
.mismatch-check-btn::after {
  background: linear-gradient(to bottom, rgba(255,255,255,0.105) 0%, rgba(255,255,255,0) 100%);
}
.mismatch-rename-btn > *,
.mismatch-check-btn > * { position: relative; z-index: 2; }
.mismatch-rename-btn[disabled],
.mismatch-check-btn[disabled] { opacity: 0.6; cursor: progress; }

.mismatch-rename-btn {
  background: rgba(255, 255, 255, 0.10);
  color: #475569;
}
.mismatch-rename-btn:hover {
  background: rgba(255, 255, 255, 0.20);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Mark fixed — same glass technique, just slightly more tint than Rename */
.mismatch-check-btn {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.18);
  color: #1e293b;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
}
.mismatch-check-btn:hover {
  background: rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.28);
}

/* Time field no longer needs auto margin since `info` flexes to fill */
.mismatch-time { margin-left: 0; }

html.theme-dark .mismatch-rename-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
}
html.theme-dark .mismatch-rename-btn:hover { background: rgba(255, 255, 255, 0.16); }
html.theme-dark .mismatch-check-btn {
  background: rgba(0, 0, 0, 0.40);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
html.theme-dark .mismatch-check-btn:hover { background: rgba(0, 0, 0, 0.55); }

/* ================================================================== */
/* Custom confirm modal (liquid-glass, matches profile-modal look)     */
/* ================================================================== */
.eh-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: profile-modal-fade 0.18s ease-out;
}
.eh-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}
.eh-confirm-panel {
  position: relative;
  width: min(440px, 100%);
  border-radius: 22px;
  padding: 26px 28px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.70);
  color: #334155;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45),
    0 24px 60px rgba(15, 23, 42, 0.22),
    0 4px 12px rgba(15, 23, 42, 0.10);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: profile-modal-pop 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.eh-confirm-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
}
.eh-confirm-body {
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}
.eh-confirm-body p { margin: 0 0 6px; word-break: break-word; }
.eh-confirm-body p:last-child { margin-bottom: 0; }
.eh-confirm-body p.muted { opacity: 0.70; font-size: 12.5px; margin-top: 8px; }
.eh-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.eh-confirm-actions button {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.eh-confirm-cancel {
  background: rgba(255, 255, 255, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #334155;
}
.eh-confirm-cancel:hover { background: rgba(255, 255, 255, 0.65); }
.eh-confirm-ok {
  background: var(--blue-500);
  border: 1px solid var(--blue-500);
  color: #fff;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.eh-confirm-ok:hover { background: var(--blue-600); border-color: var(--blue-600); transform: translateY(-1px); }

html.theme-dark .eh-confirm-panel {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 4px 12px rgba(0, 0, 0, 0.40);
}
html.theme-dark .eh-confirm-cancel {
  background: rgba(15, 23, 42, 0.50);
  border-color: rgba(255, 255, 255, 0.20);
  color: #f8fafc;
}
html.theme-dark .eh-confirm-cancel:hover { background: rgba(15, 23, 42, 0.75); }

/* ================================================================== */
/* Client Issues widget                                                */
/* ================================================================== */
.widget-client-issues-body { padding: 0 0 6px; }
.ci-add-btn {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(160deg, #94a3b8, #3f4b5b);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 3px 8px rgba(255, 255, 255, 0.30);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.ci-add-btn:hover { transform: scale(1.08); filter: brightness(1.06); }
.ci-show-hidden-btn {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.04);
  color: #475569;
  cursor: pointer;
  padding: 0;
  margin-right: 4px;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.ci-show-hidden-btn:hover { background: rgba(255, 255, 255, 0.10); color: #3f4b5b; transform: scale(1.06); }
.ci-show-hidden-btn.is-active {
  background: linear-gradient(160deg, #94a3b8, #3f4b5b);
  color: #fff;
  border-color: transparent;
}
html.theme-dark .ci-show-hidden-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: #cbd5e1;
}
html.theme-dark .ci-show-hidden-btn:hover { background: rgba(255, 255, 255, 0.18); color: #e2e8f0; }
.ci-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 14px;
  max-height: 480px;
  overflow-y: auto;
}
.ci-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.ci-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  transition: background 0.12s ease, opacity 0.18s ease;
}
.ci-item.is-done { opacity: 0.55; background: #f8fafc; }
.ci-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(160deg, #94a3b8, #475569) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}
.ci-avatar::before { content: attr(data-initial); }
.ci-avatar-has-img::before { content: ''; }
.ci-content { min-width: 0; }
.ci-row1 {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 2px;
}
.ci-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.ci-status {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ci-status-open { background: rgba(255, 255, 255, 0.15); color: #475569; }
.ci-status-done { background: rgba(255, 255, 255, 0.15); color: #475569; }
.ci-notes {
  font-size: 12.5px;
  color: var(--text, #0f172a);
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ci-notes-empty { color: #94a3b8; font-style: italic; }
.ci-meta {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted, #64748b);
}
.ci-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-self: center;
}
.ci-btn {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 50%;
  cursor: pointer;
  color: #475569;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.ci-btn:hover { background: rgba(255, 255, 255, 0.10); color: #3f4b5b; transform: scale(1.06); }
.ci-btn-toggle:hover { color: #475569; }
.ci-btn-delete:hover { color: #b91c1c; background: rgba(239, 68, 68, 0.10); }
.ci-edit-input {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  resize: vertical;
}
.ci-edit-bar { display: flex; gap: 6px; margin-top: 6px; }
.ci-edit-save, .ci-edit-cancel {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(15, 23, 42, 0.10);
  font-family: inherit;
}
.ci-edit-save {
  background: linear-gradient(160deg, #94a3b8, #3f4b5b);
  color: #fff;
  border-color: transparent;
}
.ci-edit-cancel { background: #fff; color: #334155; }

/* Add issue modal — picker + notes */
.ci-add-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(480px, 100%);
}
.ci-add-body { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.ci-add-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.ci-add-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #334155;
  opacity: 0.75;
}
.ci-client-input,
.ci-notes-input {
  padding: 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
}
.ci-client-input:focus, .ci-notes-input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.20);
}
.ci-notes-input { resize: vertical; min-height: 80px; }

/* Custom issue-type dropdown — replaces native <select> for a clean look */
.ci-typedd { position: relative; }
.ci-typedd-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ci-typedd-trigger:hover { border-color: rgba(15, 23, 42, 0.30); }
.ci-typedd-trigger:focus,
.ci-typedd-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--blue-500, #94a3b8);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.20);
}
.ci-typedd-trigger.is-empty .ci-typedd-label { color: #94a3b8; }
.ci-typedd-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-typedd-caret { color: #64748b; flex-shrink: 0; transition: transform 0.18s ease; }
.ci-typedd-trigger[aria-expanded="true"] .ci-typedd-caret { transform: rotate(180deg); }
.ci-typedd-dot {
  width: 10px; height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #cbd5e1;
}
.ci-typedd-dot-empty       { background: transparent; box-shadow: inset 0 0 0 1.5px #cbd5e1; }
.ci-typedd-dot-critical    { background: #ef4444; }
.ci-typedd-dot-performance { background: #94a3b8; }
.ci-typedd-dot-strategy    { background: #94a3b8; }
.ci-typedd-dot-optimization{ background: #94a3b8; }
.ci-typedd-dot-operational { background: #94a3b8; }

.ci-typedd-panel {
  position: fixed;
  z-index: 99999;
  padding: 6px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.20);
  max-height: 320px;
  overflow-y: auto;
  animation: ci-typedd-pop 0.12s ease-out;
}
@keyframes ci-typedd-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ci-typedd-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.10s ease;
}
.ci-typedd-option:hover { background: rgba(255, 255, 255, 0.10); }
.ci-typedd-option.is-selected {
  background: rgba(255, 255, 255, 0.14);
  color: #3f4b5b;
  font-weight: 600;
}
.ci-typedd-option-clear { color: #64748b; }
.ci-typedd-option-clear + .ci-typedd-option {
  margin-top: 4px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: 12px;
  border-radius: 0 0 8px 8px;
}
.ci-typedd-optlabel {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact variant when used inline inside an issue card during edit */
.ci-edit-type { margin-bottom: 8px; }
.ci-edit-type .ci-typedd-trigger {
  padding: 6px 10px 6px 12px;
  font-size: 12.5px;
  border-radius: 8px;
}
.ci-edit-type .ci-typedd-panel { font-size: 12.5px; }

/* Issue-type chip on each card — color-coded by severity/category */
.ci-type-chip {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-type-chip-critical     { background: rgba(239, 68, 68, 0.15);  color: #b91c1c; }
.ci-type-chip-performance  { background: rgba(255, 255, 255, 0.15); color: #475569; }
.ci-type-chip-strategy     { background: rgba(255, 255, 255, 0.15); color: #7e22ce; }
.ci-type-chip-optimization { background: rgba(255, 255, 255, 0.15); color: #475569; }
.ci-type-chip-operational  { background: rgba(100, 116, 139, 0.15); color: #475569; }
.ci-client-suggest {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
}
.ci-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.ci-suggest-item:hover { background: rgba(255, 255, 255, 0.10); }
.ci-suggest-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(160deg, #94a3b8, #475569);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}
.ci-suggest-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

html.theme-dark .ci-item {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
}
html.theme-dark .ci-item.is-done { background: rgba(15, 23, 42, 0.30); }
html.theme-dark .ci-name { color: #f5f5f5; }
html.theme-dark .ci-notes { color: #e2e8f0; }
html.theme-dark .ci-meta { color: #94a3b8; }
html.theme-dark .ci-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: #cbd5e1;
}
html.theme-dark .ci-btn:hover { background: rgba(255, 255, 255, 0.18); color: #e2e8f0; }
html.theme-dark .ci-client-input,
html.theme-dark .ci-notes-input {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f5f5f5;
}
html.theme-dark .ci-typedd-trigger {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f5f5f5;
}
html.theme-dark .ci-typedd-trigger:hover { border-color: rgba(255, 255, 255, 0.25); }
html.theme-dark .ci-typedd-trigger.is-empty .ci-typedd-label { color: #64748b; }
html.theme-dark .ci-typedd-caret { color: #94a3b8; }
html.theme-dark .ci-typedd-panel {
  background: #0a1424;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.50);
}
html.theme-dark .ci-typedd-option { color: #e2e8f0; }
html.theme-dark .ci-typedd-option:hover { background: rgba(255, 255, 255, 0.16); }
html.theme-dark .ci-typedd-option.is-selected { background: rgba(255, 255, 255, 0.22); color: #e2e8f0; }
html.theme-dark .ci-typedd-option-clear { color: #94a3b8; }
html.theme-dark .ci-typedd-option-clear + .ci-typedd-option { border-top-color: rgba(255, 255, 255, 0.08); }
html.theme-dark .ci-typedd-dot-empty { box-shadow: inset 0 0 0 1.5px #475569; }
html.theme-dark .ci-type-chip-critical     { background: rgba(239, 68, 68, 0.22);  color: #fca5a5; }
html.theme-dark .ci-type-chip-performance  { background: rgba(255, 255, 255, 0.22); color: #fdba74; }
html.theme-dark .ci-type-chip-strategy     { background: rgba(255, 255, 255, 0.22); color: #e2e8f0; }
html.theme-dark .ci-type-chip-optimization { background: rgba(255, 255, 255, 0.22); color: #e2e8f0; }
html.theme-dark .ci-type-chip-operational  { background: rgba(148, 163, 184, 0.22); color: #cbd5e1; }
html.theme-dark .ci-client-suggest {
  background: #0a0a0a;
  border-color: #262626;
}
html.theme-dark .ci-suggest-item:hover { background: rgba(255, 255, 255, 0.18); }

/* Wider variant — used by the LN/LU rename dialog with campaign tree */
.eh-confirm-panel-wide {
  width: min(1180px, 100%);
  max-height: 90vh;
  overflow: hidden;
  padding: 22px 28px;
  position: relative;
}

/* Floating alert in the top-right corner of the rename modal */
.eh-rename-alert {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  z-index: 5;
  pointer-events: none;
}
.eh-rename-alert-payment {
  background: linear-gradient(160deg, #fca5a5, #ef4444);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.40);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}
.eh-rename-alert-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
  animation: eh-pulse-dot 1.4s ease-in-out infinite;
}
@keyframes eh-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

/* LP option uses a red-tinted hover so it ties visually to the alert */
.eh-rename-option-paused:hover {
  background: linear-gradient(160deg, #fca5a5, #ef4444) !important;
  border-color: #ef4444 !important;
}
.eh-rename-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
  min-height: 0;
  flex: 1 1 auto;
}
.eh-rename-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.eh-rename-current {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
  line-height: 1.4;
}
.eh-rename-arrow {
  margin: 0;
  font-size: 18px;
  opacity: 0.5;
}
.eh-rename-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.eh-rename-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  font-family: inherit;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
  transition: background 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
}
.eh-rename-option:hover {
  background: var(--blue-500);
  color: #fff;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
  border-color: var(--blue-500);
  transform: translateY(-1px);
}
.eh-rename-option-prefix {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.eh-rename-option-preview {
  font-size: 11.5px;
  font-weight: 600;
  word-break: break-word;
  opacity: 0.85;
}
.eh-rename-option-help {
  font-size: 10.5px;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.eh-rename-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 70vh;
}
.eh-rename-right-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}
.eh-rename-tree {
  flex: 1 1 auto;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.50);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.35);
  padding: 8px;
}
.eh-rename-tree-status,
.eh-rt-status {
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  opacity: 0.7;
}
.eh-rt-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 10px 18px;
  padding: 8px 12px;
  border-radius: 8px;
}
.eh-rt-row + .eh-rt-row { margin-top: 4px; }
.eh-rt-row-campaign { background: rgba(255, 255, 255, 0.55); }
.eh-rt-row-adset    { background: rgba(255, 255, 255, 0.40); margin-left: 18px; }
.eh-rt-row-ad       { background: rgba(255, 255, 255, 0.30); margin-left: 36px; }
.eh-rt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  color: inherit;
  text-align: left;
  min-width: 0;
  width: 100%;
}
.eh-rt-toggle.eh-rt-leaf { cursor: default; }
.eh-rt-chev {
  display: inline-flex;
  width: 12px;
  flex-shrink: 0;
  font-size: 10px;
  opacity: 0.65;
}
.eh-rt-chev-blank { visibility: hidden; }
.eh-rt-thumb {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  background: #e2e8f0 center/cover no-repeat;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.eh-rt-thumb-empty { background: rgba(148, 163, 184, 0.35); cursor: default; }
.eh-rt-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.eh-rt-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.eh-rt-badge-on { background: rgba(255, 255, 255, 0.20); color: #475569; }
.eh-rt-badge-paused { background: rgba(255, 255, 255, 0.20); color: #475569; }
.eh-rt-badge-off { background: rgba(148, 163, 184, 0.30); color: #475569; }
.eh-rt-kpis {
  display: flex;
  gap: 14px;
  font-size: 11px;
  white-space: nowrap;
}
.eh-rt-kpis b { font-weight: 800; }
.eh-rt-dates {
  display: flex;
  flex-direction: column;
  font-size: 10.5px;
  opacity: 0.65;
  white-space: nowrap;
  text-align: right;
  line-height: 1.4;
}
.eh-rt-dates b { font-weight: 700; opacity: 0.85; }

/* Creative lightbox (HD ad preview) */
.eh-creative-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: zoom-out;
  padding: 24px;
}
.eh-creative-lightbox img,
.eh-creative-lightbox video {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.eh-creative-lightbox .eh-creative-loading {
  color: #fff;
  font-size: 14px;
  opacity: 0.85;
}
.eh-rt-children {
  /* container for nested rows */
}

/* Dark mode — invert backgrounds for readability */
html.theme-dark .eh-rename-option {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
html.theme-dark .eh-rename-option:hover { background: var(--blue-500); border-color: var(--blue-500); }
html.theme-dark .eh-rename-tree {
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}
html.theme-dark .eh-rt-row-campaign { background: rgba(255, 255, 255, 0.06); }
html.theme-dark .eh-rt-row-adset    { background: rgba(255, 255, 255, 0.04); }
html.theme-dark .eh-rt-row-ad       { background: rgba(255, 255, 255, 0.02); }
html.theme-dark .eh-rt-badge-on { background: rgba(255, 255, 255, 0.30); color: #e2e8f0; }
html.theme-dark .eh-rt-badge-paused { background: rgba(255, 255, 255, 0.30); color: #e2e8f0; }
html.theme-dark .eh-rt-badge-off { background: rgba(148, 163, 184, 0.30); color: #cbd5e1; }

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.news-item {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.news-item:hover {
  border-color: var(--blue-300);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.news-source {
  font-weight: 700;
  color: var(--blue-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.news-dot { color: var(--border); }
.news-date { font-variant-numeric: tabular-nums; }
.news-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
}
.news-title:hover { text-decoration: underline; color: var(--blue-600); }
.news-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.5;
}
.news-empty {
  list-style: none;
  color: var(--muted);
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-subtle);
}
.mismatch-item.copied::after {
  content: "Copied";
  position: absolute;
  top: 6px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #e5e7eb;
  border: 1px solid #cbd5e1;
  padding: 1px 8px;
  border-radius: 999px;
  pointer-events: none;
  animation: mismatch-copied-pulse 0.9s ease forwards;
}
@keyframes mismatch-copied-pulse {
  0%   { opacity: 0; transform: translateY(-2px); }
  15%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
.mismatch-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-500);
  cursor: pointer;
  flex-shrink: 0;
}
.mismatch-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.mismatch-name { font-size: 14px; font-weight: 600; word-break: break-word; }
.mismatch-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.mismatch-arrow { color: var(--muted); font-weight: 700; }
.mismatch-dot { color: var(--border); }
.badge-prefix {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 6px;
  background: #fee2e2;
  color: #b91c1c;
}
.badge-prefix-suggested {
  background: #e5e7eb;
  color: #475569;
}
.mismatch-item.fixed {
  background: #f1f5f9;
  border-color: var(--success);
  opacity: 0.55;
}
.mismatch-item.fixed .mismatch-name { text-decoration: line-through; color: var(--success); }
.mismatch-item.fixed .mismatch-meta { color: var(--success); }

.campaign-line.copied::after {
  content: "Copied";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--success);
  background: #f1f5f9;
  padding: 0 4px;
}

/* ----- EVENT HAWK VIEW ----- */
#view-eventhawk { padding: 12px 0 24px; }
/* Even 28px rhythm between the view's blocks. The ROAS/CTR advisor grid and the
   Campaigns card live inside #eh-classic, so they need the same rule (the
   #view-eventhawk > … selector doesn't reach them). */
#view-eventhawk > section,
#view-eventhawk > .eh-grid,
#view-eventhawk > .eh-advisor-grid,
#eh-classic > section,
#eh-classic > .eh-grid,
#eh-classic > .eh-advisor-grid { margin-bottom: 28px !important; }
#view-eventhawk > section:last-child,
#view-eventhawk > .eh-grid:last-child,
#view-eventhawk > .eh-advisor-grid:last-child,
#eh-classic > section:last-child,
#eh-classic > .eh-grid:last-child,
#eh-classic > .eh-advisor-grid:last-child { margin-bottom: 0 !important; }
.eh-hero { padding: 22px 24px; }
.eh-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.eh-hero-title { display: flex; gap: 12px; align-items: center; }
.eh-hero-title h3 { margin: 0; font-size: 18px; }
.eh-hero-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.eh-hero-actions { display: flex; gap: 8px; align-items: center; }
.eh-hero-actions .btn { white-space: nowrap; }
#eh-download-btn { font-weight: 600; }
#eh-download-btn:hover { color: #64748b; border-color: #e2e8f0; background: #f1f5f9; }
html.theme-dark #eh-download-btn:hover { color: #e2e8f0; border-color: #64748b; background: #1e293b; }
.eh-hero .drawer-meta { justify-content: flex-start; margin-top: 4px; }
.eh-logo {
  width: 44px; height: 44px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}
.eh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 1100px) {
  .eh-grid { grid-template-columns: 1fr; }
}
.eh-grid > .callout { padding: 32px 20px 20px !important; }
.eh-grid > .callout h4 { margin: 0 0 14px !important; padding-top: 4px; }
.eh-campaigns-wrap { padding: 20px 24px 24px; }

.year-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.year-toggle-btn {
  background: #fff;
  border: 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.year-toggle-btn + .year-toggle-btn { border-left: 1px solid var(--border); }
.year-toggle-btn:hover { background: var(--blue-50); color: var(--blue-500); }
.year-toggle-btn.is-active { background: var(--blue-500); color: #fff; }
.year-toggle-btn.is-active:hover { background: var(--blue-500); color: #fff; }

.eh-trend-body { padding: 20px 28px 24px; }
.eh-trend-chart { width: 100%; height: auto; display: block; }
/* Minimalist grey / transparent chart — no brand color, no green/amber tones. */
.trend-grid { stroke: rgba(148,163,184,0.18); stroke-width: 1; stroke-dasharray: 4 4; }
.trend-grid-base { stroke: rgba(148,163,184,0.38); stroke-dasharray: none; }
.trend-axis-label {
  font-size: 12px;
  fill: var(--muted);
  font-family: inherit;
  font-weight: 500;
}
.trend-area { fill: url(#trend-area-gradient); }
.trend-line {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* All points read the same neutral grey — glossy dot over a soft ring. */
.trend-dot-outer { fill: #fff; stroke: #94a3b8; stroke-width: 2.25; transition: r 0.12s ease; }
.trend-dot-inner { fill: #64748b; transition: r 0.12s ease; }
.trend-point-positive .trend-dot-outer,
.trend-point-concern .trend-dot-outer { stroke: #94a3b8; }
.trend-point-positive .trend-dot-inner,
.trend-point-concern .trend-dot-inner { fill: #64748b; }
.trend-point:hover .trend-dot-outer { r: 8; }
.trend-point:hover .trend-dot-inner { r: 5; }
.trend-value-label {
  font-size: 12px;
  font-weight: 700;
  fill: #475569;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.trend-point-positive .trend-value-label,
.trend-point-concern .trend-value-label { fill: #475569; }
.trend-empty-label {
  font-size: 15px;
  font-weight: 600;
  fill: var(--muted);
  font-family: inherit;
}

/* Header row for the trend inside the 360 ROAS lens. */
.eh360-trend-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.eh360-trend-body { padding: 6px 0 0; }
/* Ghost year toggle — transparent + grey, no blue fill. */
.year-toggle-ghost { border-color: rgba(148,163,184,0.30); background: transparent; }
.year-toggle-ghost .year-toggle-btn {
  padding: 3px 10px; font-size: 11.5px; background: transparent; color: var(--muted);
}
.year-toggle-ghost .year-toggle-btn + .year-toggle-btn { border-left-color: rgba(148,163,184,0.30); }
.year-toggle-ghost .year-toggle-btn:hover { background: rgba(148,163,184,0.12); color: var(--text); }
.year-toggle-ghost .year-toggle-btn.is-active,
.year-toggle-ghost .year-toggle-btn.is-active:hover {
  background: rgba(148,163,184,0.20); color: var(--text);
}

.eh-trend-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(148,163,184,0.18);
}
/* Glassy transparent stat tiles to sit inside the crystal 360 card. */
.eh-trend-stat {
  background: rgba(148,163,184,0.08);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;
  padding: 10px 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.eh-trend-stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.eh-trend-stat-value {
  font-weight: 700;
  font-size: 17px;
  margin-top: 4px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ===== Account 360 — booking funnel + live-ad fixes (grey / glassy) ===== */
.eh360-funnel { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 6px; }
.eh360-funnel-step { display: flex; flex-direction: column; gap: 4px; }
.eh360-funnel-bar {
  height: 8px; border-radius: 999px;
  background: rgba(148,163,184,0.14);
  overflow: hidden;
}
.eh360-funnel-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(148,163,184,0.55), rgba(148,163,184,0.30));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.eh360-funnel-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.eh360-funnel-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.eh360-funnel-val { font-size: 13px; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.eh360-funnel-val em { font-style: normal; font-weight: 600; color: var(--muted); font-size: 11.5px; margin-left: 4px; }
.eh360-funnel-leak {
  margin-top: 4px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--text);
  background: rgba(148,163,184,0.08);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 10px;
}

.eh360-ads { display: flex; flex-direction: column; gap: 10px; }
.eh360-ads-loading, .eh360-ads-empty { font-size: 12.5px; color: var(--muted); padding: 8px 2px; }
.eh360-ad {
  display: flex; gap: 12px; padding: 10px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(148,163,184,0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
}
.eh360-ad:hover { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.32); transform: translateY(-1px); }
.eh360-ad-thumb {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 9px; overflow: hidden;
  background: rgba(148,163,184,0.16);
  display: flex; align-items: center; justify-content: center;
}
.eh360-ad-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eh360-ad-noimg { color: var(--muted); font-size: 22px; opacity: 0.5; }
.eh360-ad-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.eh360-ad-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eh360-ad-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.eh360-ad-stats span {
  font-size: 11px; font-weight: 600; color: var(--muted);
  padding: 2px 8px; border-radius: 999px;
  background: rgba(148,163,184,0.12);
  font-variant-numeric: tabular-nums;
}
.eh360-ad-stats .eh360-ad-cta { text-transform: capitalize; }
.eh360-ad-tip { font-size: 12px; line-height: 1.45; color: var(--text); }
.eh360-ad-tip b { color: var(--muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; margin-right: 5px; }

/* ===== Daily Pulse — glossy crystal tiles ===== */
.eh-pulse-head {
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.eh-pulse-sub { font-size: 12px; margin-top: 2px; }
.eh-pulse-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.eh-pulse-conv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eh-pulse-conv-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Custom glossy-crystal dropdown (native <select> popups can't be styled). */
.eh-pulse-dd { position: relative; }
.eh-pulse-dd-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 186px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 7px 12px 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--blue-200);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.42) 100%),
    var(--blue-50);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.eh-pulse-dd-trigger:hover { border-color: var(--blue-400); }
.eh-pulse-dd-trigger[aria-expanded="true"] {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(255, 255, 255,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
}
.eh-pulse-dd-caret { font-size: 11px; color: var(--blue-600); transition: transform 0.16s ease; }
.eh-pulse-dd-trigger[aria-expanded="true"] .eh-pulse-dd-caret { transform: rotate(180deg); }

.eh-pulse-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 100%;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--blue-200);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.62) 100%),
    var(--blue-50);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  box-shadow:
    0 18px 40px -14px rgba(15,23,42,0.35),
    inset 0 1px 0 rgba(255,255,255,0.9);
  animation: ehPulseDdIn 0.14s ease;
}
@keyframes ehPulseDdIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.eh-pulse-dd-opt {
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease;
}
.eh-pulse-dd-opt:hover { background: rgba(255, 255, 255,0.12); }
.eh-pulse-dd-opt.is-selected {
  color: #fff;
  background: linear-gradient(160deg, var(--blue-400) 0%, var(--blue-600) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.eh-pulse-cmp {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  gap: 2px;
}
.eh-pulse-cmp-btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  border: none;
  background: transparent;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.eh-pulse-cmp-btn:hover { color: var(--text); }
.eh-pulse-cmp-btn.is-active {
  color: #fff;
  background: linear-gradient(160deg, var(--blue-400) 0%, var(--blue-600) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 8px -2px rgba(255, 255, 255,0.55);
}

/* Auto-summary strip — no box, just text */
.eh-pulse-summary {
  margin: 16px 0 2px;
  padding: 2px 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  text-align: center;
}
.eh-pulse-summary b { font-weight: 800; }
.eh-pulse-summary .pos { color: var(--blue-600); font-weight: 800; }
.eh-pulse-summary .neg { color: var(--danger); font-weight: 800; }

/* Tile grid — centered, responsive. min-height holds the area steady so it
   never collapses to the loading message while a new window fetches. */
.eh-pulse-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  justify-content: center;
  align-content: center;
  min-height: 128px;
}
.eh-pulse-grid.is-pulse-loading {
  opacity: 0.45;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.eh-pulse-loading-msg {
  grid-column: 1 / -1;
  align-self: center;
  text-align: center;
}
.eh-pulse-tile {
  position: relative;
  text-align: center;
  padding: 6px 14px;
}
.eh-pulse-tile > * { position: relative; z-index: 1; }
.eh-pulse-tile-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.eh-pulse-tile-value {
  margin-top: 7px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.eh-pulse-tile-prev {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.eh-pulse-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 11px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.eh-pulse-delta.is-good {
  color: var(--blue-600);
  background: var(--blue-50);
  border-color: var(--blue-200);
}
.eh-pulse-delta.is-bad {
  color: var(--danger);
  background: #fef2f2;
  border-color: #fecaca;
}
.eh-pulse-delta.is-flat {
  color: var(--muted);
  background: var(--bg-subtle);
  border-color: var(--border);
}
.eh-pulse-delta-arrow { font-size: 11px; line-height: 1; }

/* Dark mode — polished glass against the dark surface (no wash-out). */
html.theme-dark .eh-pulse-cmp { background: #141414; border-color: #2a2a2a; }
html.theme-dark .eh-pulse-cmp-btn { color: #9ca3af; }
html.theme-dark .eh-pulse-cmp-btn:hover { color: #e5e7eb; }
html.theme-dark .eh-pulse-dd-trigger {
  color: #f5f5f5;
  border-color: #2f4060;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%),
    #16243d;
}
html.theme-dark .eh-pulse-dd-caret { color: #e2e8f0; }
html.theme-dark .eh-pulse-dd-menu {
  border-color: #24344f;
  background:
    linear-gradient(155deg, rgba(30,41,59,0.97) 0%, rgba(15,23,42,0.94) 100%);
  box-shadow:
    0 18px 40px -14px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
html.theme-dark .eh-pulse-dd-opt { color: #e5e7eb; }
html.theme-dark .eh-pulse-dd-opt:hover { background: rgba(255, 255, 255,0.2); }
html.theme-dark .eh-pulse-summary { color: #f5f5f5; }
html.theme-dark .eh-pulse-tile-value { color: #f5f5f5; }
html.theme-dark .eh-pulse-tile-label,
html.theme-dark .eh-pulse-tile-prev { color: #9ca3af; }
html.theme-dark .eh-pulse-delta.is-good { color: #e2e8f0; background: rgba(255, 255, 255,0.14); border-color: rgba(255, 255, 255,0.3); }
html.theme-dark .eh-pulse-delta.is-bad { color: #fca5a5; background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.32); }
html.theme-dark .eh-pulse-delta.is-flat { color: #9ca3af; background: #1c1c1c; border-color: #2a2a2a; }

/* ===== Meeting-reminder toast — glossy crystal in-app notification ===== */
.mr-toast-host {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 4000;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  width: 350px;
  max-width: calc(100vw - 36px);
  pointer-events: none;
}
.mr-toast {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 16px;
  cursor: pointer;
  border: 1px solid var(--blue-200);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.62) 100%),
    var(--blue-50);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  box-shadow:
    0 18px 44px -16px rgba(15,23,42,0.4),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.mr-toast.is-in { transform: none; opacity: 1; }
.mr-toast.is-leaving { transform: translateX(120%); opacity: 0; }
/* Glossy crystal sheen across the top. */
.mr-toast::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 46%;
  border-radius: 15px 15px 20px 20px / 15px 15px 30px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  pointer-events: none;
}
.mr-toast.is-live { border-color: var(--blue-400); }
.mr-toast > * { position: relative; z-index: 1; }
.mr-toast-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  padding: 5px;
  box-shadow: 0 2px 9px -2px rgba(15,23,42,0.32);
}
.mr-toast-main { flex: 1 1 auto; min-width: 0; padding-right: 14px; }
.mr-toast-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.mr-toast-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 0 0 rgba(255, 255, 255,0.5);
  animation: mrToastPulse 1.6s ease-out infinite;
}
@keyframes mrToastPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(255, 255, 255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255,0); }
}
.mr-toast-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin-top: 3px;
  line-height: 1.25;
  word-break: break-word;
}
.mr-toast-body { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.mr-toast-close {
  position: absolute;
  top: 8px; right: 9px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 7px;
  z-index: 2;
}
.mr-toast-close:hover { background: rgba(15,23,42,0.07); color: var(--text); }

html.theme-dark .mr-toast {
  border-color: #24344f;
  background: linear-gradient(150deg, rgba(30,41,59,0.97) 0%, rgba(15,23,42,0.94) 100%);
  box-shadow: 0 18px 44px -16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
}
html.theme-dark .mr-toast::before { background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0)); }
html.theme-dark .mr-toast.is-live { border-color: #94a3b8; }
html.theme-dark .mr-toast-title { color: #f5f5f5; }
html.theme-dark .mr-toast-eyebrow { color: #e2e8f0; }
html.theme-dark .mr-toast-body { color: #9ca3af; }
html.theme-dark .mr-toast-close:hover { background: rgba(255,255,255,0.1); color: #f5f5f5; }

/* ROAS / CTR advisor cards */
.eh-advisor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) { .eh-advisor-grid { grid-template-columns: 1fr; } }
.eh-advisor .card-header { align-items: baseline; }
.eh-advisor-roas .card-header h3 { color: #94a3b8; }
.eh-advisor-ctr  .card-header h3 { color: var(--blue-600); }
.eh-advisor-body { padding: 22px 24px 24px; }

.eh-advisor-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.eh-advisor-value {
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.eh-advisor-value.tone-positive { color: var(--success); }
.eh-advisor-value.tone-concern  { color: var(--danger); }
.eh-advisor-value.tone-neutral  { color: var(--text); }
.eh-advisor-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.eh-advisor-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eh-advisor-bullets li {
  position: relative;
  padding: 0 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.eh-advisor-bullets li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-400);
}
.eh-advisor-roas .eh-advisor-bullets li::before { background: #94a3b8; }
.eh-advisor-ctr  .eh-advisor-bullets li::before { background: var(--blue-500); }
/* The KPI value always reads in the same blue as its card header — overrides
   the tone-based coloring (positive/concern/neutral) for visual cohesion. */
.eh-advisor-roas .eh-advisor-value.tone-positive,
.eh-advisor-roas .eh-advisor-value.tone-concern,
.eh-advisor-roas .eh-advisor-value.tone-neutral  { color: #94a3b8; }
.eh-advisor-ctr  .eh-advisor-value.tone-positive,
.eh-advisor-ctr  .eh-advisor-value.tone-concern,
.eh-advisor-ctr  .eh-advisor-value.tone-neutral  { color: var(--blue-600); }

/* Campaigns → ad sets → ads tree */
.eh-tree-table tr.eh-tree-row { cursor: pointer; }
.eh-tree-table tr.eh-tree-row > td { vertical-align: top; }
.eh-tree-toggle {
  display: inline-block;
  width: 14px;
  color: var(--muted);
  transition: transform 0.15s ease;
  font-size: 11px;
  margin-right: 4px;
}
.eh-tree-row.open > td .eh-tree-toggle { transform: rotate(90deg); color: var(--blue-500); }
.eh-tree-name-col { min-width: 280px; }

/* Per-row recommendation icon — sits to the left of the toggle. */
.eh-rec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  flex-shrink: 0;
}
.eh-rec-icon:hover { transform: scale(1.18); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25); }
.eh-rec-icon-pause   { background: #dc2626; }
.eh-rec-icon-restart { background: #64748b; }
.eh-rec-icon-good    { background: #94a3b8; }

.eh-rec-inline {
  margin-top: 8px;
  margin-left: 28px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  border-left: 3px solid;
}
.eh-rec-inline-pause {
  background: #fef2f2;
  border-color: #dc2626;
  color: #7f1d1d;
}
.eh-rec-inline-restart {
  background: #f1f5f9;
  border-color: #64748b;
  color: #334155;
}
.eh-rec-inline-good {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #3f4b5b;
}
.eh-rec-inline strong { font-weight: 700; }

/* Event Hawk internal account: per-campaign rule violations
   (CPP > $30 or weekly spend > $500). Red, distinct from generic recs. */
.eh-rule-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #b91c1c;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.18);
}
.eh-rule-icon:hover { transform: scale(1.18); box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.3); }
.eh-rule-inline {
  margin-top: 8px;
  margin-left: 28px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  border-left: 3px solid #b91c1c;
  background: #fef2f2;
  color: #7f1d1d;
}
.eh-rule-title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.eh-rule-title + .eh-rule-list { margin-top: 0; margin-bottom: 10px; }
.eh-rule-list:last-child { margin-bottom: 0; }
.eh-rule-list { padding-left: 18px; margin: 0 0 10px 0; }
.eh-rule-list li { margin: 2px 0; }
.eh-tree-rule-violation > td:first-child {
  box-shadow: inset 3px 0 0 #b91c1c;
}
html.theme-dark .eh-rule-inline {
  background: #1a0808;
  border-color: #dc2626;
  color: #fca5a5;
}

.eh-ad-thumb { cursor: zoom-in; transition: transform 0.12s ease; }
.eh-ad-thumb:hover { transform: scale(1.04); }
.eh-ad-thumb-video {
  cursor: pointer;
  outline: 2px solid #64748b;
  outline-offset: -2px;
}

/* Ad lightbox */
.ad-lightbox { position: fixed; inset: 0; z-index: 200; }
.ad-lightbox[hidden] { display: none; }
.ad-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  cursor: zoom-out;
}
.ad-lightbox-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  pointer-events: none;
}
.ad-lightbox-img,
.ad-lightbox-video {
  max-width: 95vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: #000;
  pointer-events: auto;
}
.ad-lightbox-img { background: #fff; }
.ad-lightbox-video { width: min(95vw, 1280px); }
.ad-lightbox-loading {
  color: #fff;
  font-size: 15px;
  padding: 30px 60px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  pointer-events: auto;
}
.ad-lightbox-caption {
  color: #fff;
  font-size: 14px;
  text-align: center;
  max-width: 80vw;
  pointer-events: auto;
}
.ad-lightbox-caption strong { font-size: 16px; display: block; margin-bottom: 4px; }
.ad-lightbox-caption a { color: #cbd5e1; }
.ad-lightbox-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  pointer-events: auto;
}
.ad-lightbox-actions .btn { padding: 9px 18px; font-size: 14px; }
.ad-lightbox-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.ad-lightbox-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}
.ad-lightbox-actions .btn:disabled { opacity: 0.6; cursor: progress; }
.ad-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.12s ease;
}
.ad-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

.eh-tree-children-cell {
  background: var(--bg-subtle);
  padding: 12px 14px 14px 36px !important;
  border-bottom: 1px solid var(--border) !important;
}
.eh-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.eh-subtable th {
  background: var(--blue-50);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.eh-subtable td {
  text-align: center;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}
.eh-subtable th.eh-tree-name-col,
.eh-subtable td.eh-tree-name-col { text-align: left; }
.eh-subtable tr:last-child td { border-bottom: none; }
.eh-subtable tr.eh-tree-row { cursor: pointer; }
.eh-subtable tr.eh-tree-row:hover td { background: var(--blue-50); }

.eh-tree-loading, .eh-tree-empty, .eh-tree-error {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted);
}
.eh-tree-error { color: var(--danger); }

/* Dim paused rows so active campaigns/ad sets/ads pop visually. */
.eh-tree-paused > td { opacity: 0.62; background: #fafafa; }
.eh-tree-paused > td strong { font-weight: 500; }
.eh-tree-paused:hover > td { opacity: 0.85; }

.eh-ad-leaf { display: flex; gap: 10px; align-items: flex-start; }
.eh-ad-thumb {
  width: 44px; height: 44px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  flex-shrink: 0;
}
.eh-ad-thumb-empty { background: var(--bg-subtle); }
.eh-ad-leaf a { color: var(--blue-600); text-decoration: none; }
.eh-ad-leaf a:hover { text-decoration: underline; }

/* Optimization suggestions */
.eh-rec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 20px 24px 24px;
}
@media (max-width: 900px) { .eh-rec-grid { grid-template-columns: 1fr; } }
.eh-rec-col { display: flex; flex-direction: column; gap: 12px; }
/* Liquid-glass head: translucent tinted plate with a top sheen + soft halo. */
.eh-rec-head {
  position: relative;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  backdrop-filter: blur(10px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(255, 255, 255, 0.30),
    0 6px 18px rgba(15, 23, 42, 0.06);
}
.eh-rec-head-on,
.eh-rec-head-wins {
  background: linear-gradient(160deg, rgba(186, 230, 253, 0.55), rgba(224, 242, 254, 0.20));
  color: #475569;
  border-color: rgba(186, 230, 253, 0.50);
}
.eh-rec-head-off,
.eh-rec-head-mistakes {
  background: linear-gradient(160deg, rgba(254, 226, 226, 0.55), rgba(254, 242, 242, 0.20));
  color: #991b1b;
  border-color: rgba(254, 202, 202, 0.50);
}
.eh-rec-head-improve {
  background: linear-gradient(160deg, rgba(219, 234, 254, 0.55), rgba(239, 246, 255, 0.20));
  color: var(--blue-600);
  border-color: rgba(191, 219, 254, 0.50);
}

/* Account-analysis variant: 3 columns (wins / improve / mistakes). */
.eh-rec-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) { .eh-rec-grid-3 { grid-template-columns: 1fr; } }

.eh-rec-callout-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Crystal-glass tile: soft translucent surface, rim-light + drop, category
   tint living inside (not as a hard left bar). */
.eh-rec-callout-list li {
  position: relative;
  padding: 12px 16px 12px 44px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 8px 22px rgba(15, 23, 42, 0.07);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.eh-rec-callout-list li:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 14px 30px rgba(15, 23, 42, 0.10);
}
/* Floating round chip carrying the icon — the only saturated splash of
   color, so the tile reads "glass with a jewel inset". */
.eh-rec-callout-list li::before {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 6px rgba(15, 23, 42, 0.10);
}
.eh-rec-callout-list-wins li {
  background: linear-gradient(160deg, rgba(240, 249, 255, 0.75), rgba(255, 255, 255, 0.55));
  border-color: rgba(186, 230, 253, 0.40);
}
.eh-rec-callout-list-wins li::before {
  content: '✓';
  color: #475569;
  background: linear-gradient(160deg, rgba(186, 230, 253, 0.90), rgba(125, 211, 252, 0.55));
}
.eh-rec-callout-list-improve li {
  background: linear-gradient(160deg, rgba(239, 246, 255, 0.75), rgba(255, 255, 255, 0.55));
  border-color: rgba(191, 219, 254, 0.40);
}
.eh-rec-callout-list-improve li::before {
  content: '→';
  color: var(--blue-600);
  background: linear-gradient(160deg, rgba(219, 234, 254, 0.90), rgba(191, 219, 254, 0.55));
}
.eh-rec-callout-list-mistakes li {
  background: linear-gradient(160deg, rgba(254, 242, 242, 0.75), rgba(255, 255, 255, 0.55));
  border-color: rgba(252, 165, 165, 0.40);
}
.eh-rec-callout-list-mistakes li::before {
  content: '!';
  color: #991b1b;
  background: linear-gradient(160deg, rgba(254, 226, 226, 0.90), rgba(252, 165, 165, 0.55));
}
.eh-rec-callout-list li.muted {
  background: transparent;
  border-color: rgba(15, 23, 42, 0.06);
  color: var(--muted);
  padding-left: 14px;
  box-shadow: none;
}
.eh-rec-callout-list li.muted::before { content: ''; box-shadow: none; background: transparent; }
.eh-rec-callout-list li.muted:hover { transform: none; box-shadow: none; }

/* Inline ticket button on a callout item — sits at the top-right corner */
.eh-rec-callout-list li {
  padding-right: 44px;
}
.hs-ticket-btn-inline {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #475569;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.hs-ticket-btn-inline:hover {
  background: linear-gradient(160deg, #cbd5e1, #94a3b8);
  color: #fff;
  border-color: transparent;
  transform: scale(1.06);
}
.hs-ticket-btn-inline.hs-ticket-btn-done {
  background: rgba(255, 255, 255, 0.15);
  color: #475569;
  border-color: rgba(255, 255, 255, 0.30);
}
html.theme-dark .hs-ticket-btn-inline {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
  color: #cbd5e1;
}
.eh-rec-list { display: flex; flex-direction: column; gap: 10px; }
.eh-rec-item {
  position: relative;
  border-radius: 12px;
  padding: 14px 16px 14px 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 8px 22px rgba(15, 23, 42, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.eh-rec-item:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 14px 30px rgba(15, 23, 42, 0.10);
}
.eh-rec-item-on {
  background: linear-gradient(160deg, rgba(240, 249, 255, 0.70), rgba(255, 255, 255, 0.50));
  border-color: rgba(186, 230, 253, 0.40);
}
.eh-rec-item-off {
  background: linear-gradient(160deg, rgba(254, 242, 242, 0.70), rgba(255, 255, 255, 0.50));
  border-color: rgba(252, 165, 165, 0.40);
}
.eh-rec-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.eh-rec-item-head strong { font-size: 14px; line-height: 1.3; }
.eh-rec-item-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.eh-rec-metric-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}
.eh-rec-item-reason {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* Quick-filter multi-select dropdowns on the Clients view */
.quick-filters { padding: 22px 24px 26px; }
.quick-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
}
.quick-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.quick-filter-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}
.quick-multi { position: relative; }
.quick-multi-trigger {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.quick-multi-trigger:hover {
  border-color: var(--blue-300);
  background: var(--blue-50);
}
.quick-multi.open .quick-multi-trigger {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.quick-multi-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 6px 0;
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
}
.quick-multi-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  color: var(--text);
  transition: background 0.1s ease, color 0.1s ease;
}
.quick-multi-option:hover { background: var(--blue-50); }
.quick-multi-option input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quick-multi-option:has(input:checked) {
  background: var(--blue-500);
  color: #fff;
  font-weight: 500;
}
.quick-multi-option:has(input:checked):hover {
  background: var(--blue-600);
}
.quick-filter-clear {
  align-self: flex-end;
  padding: 10px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.quick-filter-clear:hover {
  background: var(--bg-subtle);
  border-color: var(--blue-300);
  color: var(--text);
}
@media (max-width: 720px) {
  .quick-filter-field { min-width: 0; width: 100%; }
}

/* ROAS-by-level breakdown on the Regions & Units chart */
.chart-roas-card #chart-roas-body { padding: 16px 20px 20px; }
.chart-roas-rows { display: flex; flex-direction: column; gap: 14px; }
.chart-roas-row {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.chart-roas-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.chart-roas-swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.chart-roas-label { font-weight: 600; flex: 1; }
.chart-roas-count {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chart-roas-bar {
  height: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.chart-roas-fill { height: 100%; transition: width 0.25s ease; }
.chart-roas-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.chart-roas-stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

/* ===== US distribution map ===== */
#view-map > section { margin-bottom: 24px; }
.map-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  padding: 16px 24px 24px;
  align-items: start;
}
.custom-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 620;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--border);
}
.map-state-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  background: rgba(241, 245, 249, 0.7);
  pointer-events: none;
}
.map-loading[hidden] { display: none; }

/* ----- Campaign-radius map (General Map view) ----- */
.radius-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 620;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--border);
}
.radius-map-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.radius-map-state {
  fill: #ffffff;
  stroke: #cbd5e1;
  stroke-width: 0.8;
}
.radius-spot { cursor: help; }
.radius-spot-ring {
  fill: #64748b;
  fill-opacity: 0.14;
  stroke: #64748b;
  stroke-width: 1.4;
  stroke-opacity: 0.7;
  transition: fill-opacity .12s;
}
.radius-spot-dot { fill: #475569; stroke: #ffffff; stroke-width: 1; }
.radius-spot:hover .radius-spot-ring { fill-opacity: 0.3; }
.radius-spot-custom .radius-spot-ring { fill: #64748b; stroke: #64748b; }
.radius-spot-custom .radius-spot-dot { fill: #475569; }
.radius-map-empty { fill: #64748b; font-size: 18px; font-weight: 600; }

html.theme-dark .radius-map-frame { background: #000; border-color: #262626; box-shadow: none; }
html.theme-dark .radius-map-state { fill: #1e293b; stroke: #334155; }
html.theme-dark .radius-spot-ring { fill: #cbd5e1; stroke: #cbd5e1; }
html.theme-dark .radius-spot-dot { fill: #e2e8f0; stroke: #0f172a; }
html.theme-dark .radius-spot-custom .radius-spot-ring { fill: #cbd5e1; stroke: #cbd5e1; }
html.theme-dark .radius-spot-custom .radius-spot-dot { fill: #cbd5e1; }

/* Each state lives in a <g class="map-state-group"> that bundles its path,
   label and client dots — so the spotlight effect (blur others, lift active)
   applies to all the state's elements consistently. */
.map-state-group {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    filter 0.22s ease,
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.34, 1.46, 0.64, 1);
}
.map-shapes.is-hovering .map-state-group:not(.is-active) {
  filter: blur(0.8px);
  opacity: 0.72;
}
.map-state-group.is-active {
  transform: scale(1.07);
  filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.30));
}
.map-state-group.is-active.has-clients {
  filter: drop-shadow(0 10px 24px rgba(255, 255, 255, 0.55));
}

.map-state-shape {
  fill: #ffffff;
  stroke: #cbd5e1;
  stroke-width: 0.6;
  stroke-linejoin: round;
  transition:
    fill 0.16s ease,
    stroke 0.16s ease,
    stroke-width 0.16s ease;
}
.map-state-shape.has-clients {
  fill: var(--blue-500);
  stroke: var(--blue-600);
  stroke-width: 0.9;
}
.map-state-group.is-active .map-state-shape {
  fill: var(--blue-50);
  stroke: var(--blue-500);
  stroke-width: 1.6;
}
.map-state-group.is-active.has-clients .map-state-shape {
  fill: var(--blue-600);
  stroke: #334155;
  stroke-width: 1.6;
}

.map-svg-label {
  font-size: 9px;
  font-weight: 700;
  fill: #475569;
  font-family: inherit;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.04em;
}
.map-svg-label.has-clients {
  fill: #ffffff;
  font-weight: 800;
}

.map-client-dot-svg {
  stroke: #ffffff;
  stroke-width: 1.4;
  pointer-events: auto;
  cursor: pointer;
  transition: r 0.15s ease;
}
.map-client-dot-svg:hover { r: 5.5; }
.map-client-dot-svg-good    { fill: #334155; }
.map-client-dot-svg-ok      { fill: #e5e7eb; stroke: #475569; }
.map-client-dot-svg-bad     { fill: #fecaca; stroke: #b91c1c; }
.map-client-dot-svg-neutral { fill: #cbd5e1; }

.map-tooltip {
  position: fixed;
  z-index: 250;
  background: rgba(15, 23, 42, 0.94);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  min-width: 140px;
  max-width: 260px;
  font-variant-numeric: tabular-nums;
}
.map-tip-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}
.map-tip-count {
  margin: 6px 0;
  color: #e2e8f0;
}
.map-tip-count strong {
  color: #94a3b8;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.map-tip-row { color: #cbd5e1; font-size: 12px; }
.map-tip-muted { color: #94a3b8; font-style: italic; }
.map-state-halo {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 1;
}
.map-state-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1f2937;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 4px rgba(255, 255, 255, 0.85);
  pointer-events: none; /* let mouse fall through to the underlying state shape */
  cursor: default;
  user-select: none;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.map-state-label.has-clients {
  color: #0f172a;
  font-weight: 800;
}
.map-client-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.4);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  z-index: 2;
}
.map-client-dot:hover {
  transform: translate(-50%, -50%) scale(1.45);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.55);
  z-index: 3;
}
.map-client-dot:focus { outline: 2px solid #94a3b8; outline-offset: 2px; }
.map-client-dot-good { background: #64748b; }
.map-client-dot-ok { background: #94a3b8; }
.map-client-dot-bad { background: #dc2626; }
.map-client-dot-neutral { background: #94a3b8; }

.map-legend {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
}
.legend-block { padding: 6px 8px; }
.legend-title {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.legend-rows { display: flex; flex-direction: column; gap: 6px; }
.legend-row { display: flex; align-items: center; gap: 8px; color: var(--text); }
.legend-swatch {
  width: 16px; height: 16px; border-radius: 4px; display: inline-block;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.legend-dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
}
.legend-dot.us-dot-good { background: #64748b; }
.legend-dot.us-dot-ok { background: #94a3b8; }
.legend-dot.us-dot-bad { background: #dc2626; }
.legend-dot.us-dot-neutral { background: #94a3b8; }
.legend-gradient { display: flex; flex-direction: column; gap: 6px; }
.legend-gradient-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(to right, rgb(219, 234, 254), rgb(255, 255, 255));
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.legend-gradient-labels {
  display: flex; justify-content: space-between;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 600;
}

.map-state-summary { padding: 0 0 4px; }
.map-leaderboard-wrap { overflow-x: auto; }
.map-leaderboard {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.map-leaderboard th {
  text-align: left;
  background: var(--blue-50);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.map-leaderboard td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.map-leaderboard tr:last-child td { border-bottom: none; }
.map-leaderboard tr:hover td { background: #f8fafc; }
.map-warn {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
}
.map-warn-red {
  background: #fee2e2;
  color: #991b1b;
}

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

/* Per-state client list shown when a state is clicked. */
.map-state-clients { padding: 0 0 4px; }
.map-clients-table-wrap { overflow-x: auto; }
.map-clients-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.map-clients-table th {
  text-align: left;
  background: var(--blue-50);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.map-clients-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.map-clients-table tr:last-child td { border-bottom: none; }
.map-clients-table tr.map-client-row { cursor: pointer; transition: background 0.12s ease; }
.map-clients-table tr.map-client-row:hover td { background: #f8fafc; }
.map-client-tone {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.map-client-tone-good { background: #64748b; }
.map-client-tone-ok { background: #94a3b8; }
.map-client-tone-bad { background: #dc2626; }
.map-client-tone-neutral { background: #94a3b8; }

/* ===== Merlyn dashboard widgets ===== */
/* Masonry-style layout: widgets pack into 2 columns with no dead space.
   The user drags to reorder; CSS column-fill: balance keeps both columns
   roughly the same height. Each widget keeps its natural size. */
.widget-grid {
  column-count: 2;
  column-gap: 16px;
  column-fill: balance;
  margin-top: 18px;
}
@media (max-width: 900px) {
  .widget-grid { column-count: 1; }
}
.widget-grid.widget-grid-empty {
  column-count: 1;
  min-height: 100px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: rgba(241, 245, 249, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-grid.widget-grid-empty::after {
  content: 'Add your first widget';
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
html.theme-dark .widget-grid.widget-grid-empty {
  background: transparent;
  border-color: #404040;
}
.widget {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  width: 100%;
  margin: 0 0 16px 0;
  min-width: 0;
  transition: box-shadow 0.16s ease;
}
.widget-header {
  position: relative;
  padding: 22px 56px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
  border-radius: 12px 12px 0 0;
}
.widget-grip {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
  color: #cbd5e1;
  font-size: 16px;
  letter-spacing: -3px;
  user-select: none;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.12s ease, background 0.12s ease;
}
.widget-grip:hover { color: #64748b; background: #f1f5f9; }
.widget-grip:active { cursor: grabbing; }
.widget-titleblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  width: 100%;
  min-width: 0;
}
.widget-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-actions {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.widget-actions .btn { padding: 4px 10px; font-size: 12px; }
.widget-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.widget-icon-btn:hover {
  background: var(--blue-50);
  color: var(--blue-500);
  border-color: var(--blue-500);
}
.widget-remove-btn { font-size: 18px !important; }
.widget-remove-btn:hover { color: #dc2626; background: #fee2e2; border-color: #fca5a5; }
.widget-refresh-btn { font-size: 14px !important; }
.widget-body { padding: 0; }
.widget.widget-ghost { opacity: 0.4; }
.widget.sortable-chosen { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); }
.widget.sortable-drag { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25); cursor: grabbing; }


.widget-add-row { margin-top: 16px; display: flex; justify-content: center; }
.widget-add-btn-sm {
  width: auto !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  align-self: center;
}
.widget-add-btn {
  width: 100%;
  padding: 14px;
  background: #fff;
  border: 2px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.widget-add-btn:hover {
  border-color: var(--blue-500);
  color: var(--blue-500);
  background: var(--blue-50);
}

.widget-picker {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 12px;
  width: min(640px, calc(100vw - 24px));
  max-height: 80vh;
  overflow-y: auto;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.widget-picker-section { display: flex; flex-direction: column; gap: 8px; }
.widget-picker-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 4px;
}
.widget-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
@media (max-width: 580px) {
  .widget-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.widget-picker button {
  background: #fff;
  border: 1px solid transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  font-family: inherit;
  transform-origin: center;
  min-width: 0;
}
.widget-picker button:hover:not(:disabled) {
  background: var(--blue-50);
  border-color: var(--blue-200);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.widget-picker button:hover:not(:disabled) .widget-picker-icon {
  background: var(--blue-100);
}
.widget-picker button:disabled { opacity: 0.5; cursor: not-allowed; }
.widget-picker-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.widget-picker-icon svg { width: 18px; height: 18px; display: block; }
.widget-picker-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.widget-picker button strong {
  font-size: 13px; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.widget-picker button .muted {
  font-size: 11.5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}

/* Client info widget */
.widget-client-config {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
}
.widget-client-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.widget-client-input:focus { outline: 2px solid var(--blue-500); outline-offset: -1px; }
.widget-client-search { flex: 1; position: relative; min-width: 0; }
.widget-client-search .widget-client-input { width: 100%; padding-right: 32px; }
.widget-client-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.widget-client-clear:hover { background: #fee2e2; color: #dc2626; }
.widget-client-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 4px;
}
.widget-client-suggestions[hidden] { display: none; }
.widget-client-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.widget-client-suggestion strong { font-weight: 600; }
.widget-client-suggestion .muted { font-size: 11px; color: var(--muted); }
.widget-client-suggestion:hover { background: var(--blue-50); }
.widget-client-content { padding: 16px 20px; }
.widget-client-meta { margin-bottom: 12px; }
.widget-client-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.widget-kpi {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.widget-kpi-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.widget-kpi-value {
  font-weight: 700;
  font-size: 18px;
  margin-top: 4px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Map widget */
.widget-map .widget-body { padding: 0; }
.widget-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 620;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: #f1f5f9;
}
.widget-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.widget-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  background: rgba(241, 245, 249, 0.7);
  pointer-events: none;
}
.widget-map-loading[hidden] { display: none; }

.widget-map-clients[hidden] { display: none; }
.widget-map-clients {
  border-top: 1px solid var(--border);
  background: #fff;
  border-radius: 0 0 12px 12px;
}
.widget-map-clients-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.widget-map-clients-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.widget-map-clients-clear {
  padding: 4px 12px !important;
  font-size: 12px !important;
}
.widget-map-clients-body { padding: 4px 0 8px; }
.widget-map-clients-body .map-clients-table { width: 100%; }

/* =====================================================================
   Theme toggle (sidebar footer) — sliding switch with drag-to-toggle
   ===================================================================== */
.theme-toggle {
  position: relative;
  display: flex;
  width: 100%;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 8px;
  box-sizing: border-box;
  user-select: none;
  touch-action: none;
}
.theme-toggle-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.theme-toggle.is-dark .theme-toggle-thumb { transform: translateX(100%); }
.theme-toggle.is-dragging .theme-toggle-thumb { transition: none; }
.theme-toggle-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.18s ease;
}
.theme-toggle-btn:hover { color: #0f172a; }
.theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s ease, transform 0.18s ease;
}
.theme-toggle-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}
.theme-toggle-text { transition: opacity 0.15s ease; }

/* Active side: hide the text label, scale up + tint the icon. */
.theme-toggle.is-light [data-theme="light"] .theme-toggle-text,
.theme-toggle.is-dark  [data-theme="dark"]  .theme-toggle-text {
  display: none;
}
.theme-toggle.is-light [data-theme="light"] .theme-toggle-icon,
.theme-toggle.is-dark  [data-theme="dark"]  .theme-toggle-icon {
  transform: scale(1.18);
}
.theme-toggle.is-light [data-theme="light"] .theme-toggle-icon-sun  { color: #94a3b8; }
.theme-toggle.is-dark  [data-theme="dark"]  .theme-toggle-icon-moon { color: #cbd5e1; }

/* =====================================================================
   DARK THEME — applied via <html class="theme-dark">.
   True-black palette:
     #000   page background
     #0a0a0a   cards / panels / dialogs
     #111111   subtle (toolbar bgs, headers, inputs)
     #1a1a1a   hover states
     #050505   muted / "is-other" cells
     #262626   default borders
     #404040   stronger borders
     #f5f5f5   strong text
     #e5e5e5   body text
     #a3a3a3   muted text
     #737373   tertiary text
   ===================================================================== */
html.theme-dark {
  --bg: #000000;
  --bg-subtle: #0a0a0a;
  --text: #e5e5e5;
  --muted: #a3a3a3;
  --border: #262626;
  --blue-50:  #111827;
  --blue-100: #1e293b;
  --blue-200: #334155;
  --blue-300: #64748b;
  --blue-400: #94a3b8;
  --blue-500: #cbd5e1;
  --blue-600: #e2e8f0;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.6);
}

html.theme-dark body { background: #000; color: #e5e5e5; }
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4 { color: #f5f5f5; }
html.theme-dark .muted,
html.theme-dark .brand-sub,
html.theme-dark .api-status,
html.theme-dark p.muted,
html.theme-dark span.muted,
html.theme-dark div.muted { color: #a3a3a3; }
html.theme-dark a { color: #cbd5e1; }

/* Sidebar */
html.theme-dark .sidebar { background: #000; border-right-color: #262626; }
html.theme-dark .sidebar-label { color: #a3a3a3; }
html.theme-dark .sidebar-toggle { color: #d4d4d4; }
html.theme-dark .sidebar-toggle:hover { background: #1a1a1a; color: #f5f5f5; }
html.theme-dark .sidebar-footer { background: #000; border-top-color: #262626; }
html.theme-dark .portfolio-list li { color: #e5e5e5; }
html.theme-dark .portfolio-list li:hover { background: #1a1a1a; }
html.theme-dark .portfolio-list li.active { background: #334155; color: #f5f5f5; }
html.theme-dark .portfolio-list .dot { background: #cbd5e1; }
html.theme-dark .portfolio-list li.active .dot { background: #f5f5f5; }
html.theme-dark .portfolio-list .dot.no-token { background: #404040; }
html.theme-dark .brand-avatar-btn { background: #0a0a0a; border-color: #262626; }
html.theme-dark .brand-title { color: #f5f5f5; }

/* Header / main area */
html.theme-dark .main-header h2 { color: #f5f5f5; }
html.theme-dark .api-status.ok { color: #cbd5e1; }
html.theme-dark .api-status.err { color: #f87171; }
html.theme-dark .select-label { color: #a3a3a3; }

/* Cards, KPIs, widgets, generic surfaces — true black surfaces */
html.theme-dark .card,
html.theme-dark .widget,
html.theme-dark .kpi,
html.theme-dark .metric,
html.theme-dark .callout-list li,
html.theme-dark .eh-modal,
html.theme-dark .modal-card,
html.theme-dark .modal,
html.theme-dark .dlg,
html.theme-dark .popover,
html.theme-dark .tooltip,
html.theme-dark .clock-card,
html.theme-dark .widget-add-menu,
html.theme-dark .widget-client-popover,
html.theme-dark .widget-picker {
  background: #0a0a0a;
  border-color: #262626;
  color: #e5e5e5;
}
html.theme-dark .kpi-label { color: #a3a3a3; }
html.theme-dark .kpi-value { color: #f5f5f5; }
html.theme-dark .kpi-range { color: #a3a3a3; }

/* Inputs, selects, textareas */
html.theme-dark input,
html.theme-dark select,
html.theme-dark textarea {
  background: #111111;
  color: #e5e5e5;
  border-color: #262626;
}
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder { color: #737373; }
html.theme-dark input:focus,
html.theme-dark select:focus,
html.theme-dark textarea:focus {
  outline-color: #cbd5e1;
  border-color: #cbd5e1;
}

/* Buttons */
html.theme-dark .btn-ghost {
  background: transparent;
  color: #e5e5e5;
  border-color: #262626;
}
html.theme-dark .btn-ghost:hover { background: #1a1a1a; border-color: #404040; }
html.theme-dark .btn-primary { background: #64748b; border-color: #64748b; color: #f8fafc; }
html.theme-dark .btn-primary:hover { background: #475569; border-color: #475569; }

/* Auth userbox */
html.theme-dark .auth-userbox { border-bottom-color: #262626; }
html.theme-dark .auth-userbox-email { color: #a3a3a3; }

/* Theme toggle (dark variant) */
html.theme-dark .theme-toggle { background: #111111; }
html.theme-dark .theme-toggle-thumb {
  background: #2a2a2a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
html.theme-dark .theme-toggle-btn { color: #a3a3a3; }
html.theme-dark .theme-toggle-btn:hover { color: #f5f5f5; }
html.theme-dark .theme-toggle.is-light [data-theme="light"],
html.theme-dark .theme-toggle.is-dark  [data-theme="dark"] { color: #f5f5f5; }

/* Calendar — toolbar, body, month, week, day, year */
html.theme-dark .cal-board-switch { background: #111111; }
html.theme-dark .cal-board-thumb {
  background: #0a0a0a;
  box-shadow: inset 0 0 0 1px #262626, 0 1px 3px rgba(0,0,0,0.4);
}
html.theme-dark .cal-board-btn { color: #a3a3a3; }
html.theme-dark .cal-board-btn:hover:not(.is-active) { color: #f5f5f5; }
html.theme-dark .cal-board-btn.is-active { color: #f5f5f5; }
html.theme-dark .cal-toolbar { background: #0a0a0a; border-color: #262626; }
html.theme-dark .cal-title { color: #f5f5f5; }
html.theme-dark .cal-nav-btn {
  background: #111111;
  border-color: #262626;
  color: #d4d4d4;
}
html.theme-dark .cal-nav-btn:hover {
  background: #334155;
  color: #f5f5f5;
  border-color: #64748b;
}
/* The range picker is a dropdown now and inherits the dark timezone-picker
   styles (.cal-tz-pick / .cal-tz-popup), so it needs no rules of its own. */
html.theme-dark .cal-body { background: #0a0a0a; border-color: #262626; }
html.theme-dark .cal-month-head,
html.theme-dark .cal-week-head { background: #111111; border-color: #262626; }
html.theme-dark .cal-month-h,
html.theme-dark .cal-week-day { color: #a3a3a3; }
html.theme-dark .cal-day { border-color: #1a1a1a; }
html.theme-dark .cal-day:hover { background: #1a1a1a; }
html.theme-dark .cal-day.is-other { background: #050505; color: #525252; }
html.theme-dark .cal-day.is-other:hover { background: #0d0d0d; }
html.theme-dark .cal-day.is-today { background: #1e293b; }
html.theme-dark .cal-day.is-today:hover { background: #334155; }
html.theme-dark .cal-day-num { color: #d4d4d4; }
html.theme-dark .cal-day.is-today .cal-day-num { color: #f5f5f5; }
html.theme-dark .cal-week-col { border-color: #262626; }
html.theme-dark .cal-week-col:hover { background: #1a1a1a; }
html.theme-dark .cal-week-col.is-today { background: #111827; }
html.theme-dark .cal-week-col.is-today .cal-week-head { background: #1e293b; }
html.theme-dark .cal-week-num { color: #f5f5f5; }
html.theme-dark .cal-week-empty { color: #525252; }
html.theme-dark .cal-day-event { background: #111111; border-color: #262626; color: #e5e5e5; }
html.theme-dark .cal-day-event:hover { background: #1a1a1a; border-color: #64748b; }
html.theme-dark .cal-day-event-time { color: #a3a3a3; }
html.theme-dark .cal-day-event-desc { color: #a3a3a3; }

/* Calendar event pills (Month/Week views) — filled with a diagonal gradient
   of the category color in dark mode, with white text. The light pastel
   backgrounds used in light mode look washed out on a black calendar. */
html.theme-dark .cal-event-pill { color: #ffffff; border-left-color: transparent; }
html.theme-dark .cal-cat-dashboard { background: linear-gradient(135deg, #94a3b8 0%, #334155 100%); color: #ffffff; }
html.theme-dark .cal-cat-client    { background: linear-gradient(135deg, #94a3b8 0%, #3f4b5b 100%); color: #ffffff; }
html.theme-dark .cal-cat-ticket    { background: linear-gradient(135deg, #cbd5e1 0%, #475569 100%); color: #ffffff; }
html.theme-dark .cal-cat-reports   { background: linear-gradient(135deg, #94a3b8 0%, #1e293b 100%); color: #ffffff; }
html.theme-dark .cal-cat-meetings  { background: linear-gradient(135deg, #94a3b8 0%, #334155 100%); color: #ffffff; }
html.theme-dark .cal-cat-holiday   { background: linear-gradient(135deg, #ef4444 0%, #7f1d1d 100%); color: #ffffff; }
html.theme-dark .cal-event-pill .cal-event-time,
html.theme-dark .cal-event-pill .cal-event-recur,
html.theme-dark .cal-event-pill .cal-event-check { color: #ffffff; }

/* Smooth crossfade between light and dark mode while the user drags the
   theme switch (or briefly after a click). Without this, the theme flips
   instantly mid-drag — with it, surfaces gradient between white and dark. */
html.is-theme-transitioning,
html.is-theme-transitioning *,
html.is-theme-transitioning *::before,
html.is-theme-transitioning *::after {
  transition:
    background-color 0.32s ease,
    background 0.32s ease,
    color 0.22s ease,
    border-color 0.32s ease,
    box-shadow 0.32s ease,
    fill 0.32s ease,
    stroke 0.32s ease !important;
}
/* The toggle's own thumb keeps its existing transform animation. */
html.is-theme-transitioning .theme-toggle-thumb {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html.is-theme-transitioning.theme-dragging .theme-toggle-thumb {
  transition: none !important;
}
html.theme-dark .cal-day-empty { color: #a3a3a3; }
html.theme-dark .cal-mini-d { color: #d4d4d4; }
html.theme-dark .cal-mini-d.is-other { color: #525252; }
html.theme-dark .cal-mini-h { color: #a3a3a3; }
html.theme-dark .cal-tz-indicator { background: #1e293b; color: #e2e8f0; }
html.theme-dark .cal-tz-pick {
  background: #0a0a0a;
  border-color: #262626;
  color: #e2e8f0;
}
html.theme-dark .cal-tz-pick:hover {
  background: #1e293b;
  border-color: #64748b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
html.theme-dark .cal-tz-pick.is-open {
  background: #1e293b;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}
html.theme-dark .cal-tz-pick-icon { color: #cbd5e1; }
html.theme-dark .cal-tz-pick-chev { color: #525252; }
html.theme-dark .cal-tz-pick.is-open .cal-tz-pick-chev { color: #cbd5e1; }

html.theme-dark .cal-tz-popup {
  background: #0a0a0a;
  border-color: #262626;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
}
html.theme-dark .cal-tz-option:hover { background: #1a1a1a; }
html.theme-dark .cal-tz-option-tag { color: #e2e8f0; }
html.theme-dark .cal-tz-option-name { color: #a3a3a3; }
html.theme-dark .cal-tz-option.is-active { background: #475569; }
html.theme-dark .cal-tz-option.is-active .cal-tz-option-tag,
html.theme-dark .cal-tz-option.is-active .cal-tz-option-name { color: #f5f5f5; }
html.theme-dark .cal-tz-option.is-active:hover { background: #64748b; }
html.theme-dark .cal-event-more { color: #a3a3a3; }

/* Calendar dialog */
html.theme-dark .cal-dialog-overlay { background: rgba(0, 0, 0, 0.85); }
html.theme-dark .cal-dialog { background: #0a0a0a; color: #e5e5e5; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8); }
html.theme-dark .cal-dialog-head { border-bottom-color: #262626; }
html.theme-dark .cal-dialog-head h3 { color: #f5f5f5; }
html.theme-dark .cal-dialog-close { color: #a3a3a3; }
html.theme-dark .cal-dialog-close:hover { background: #1a1a1a; color: #f5f5f5; }
html.theme-dark .cal-field span { color: #a3a3a3; }
html.theme-dark .cal-field input,
html.theme-dark .cal-field select,
html.theme-dark .cal-field textarea {
  background: #111111;
  color: #e5e5e5;
  border-color: #262626;
}
/* Fancy date/time buttons (dark) */
html.theme-dark .cal-fancy-input {
  background-color: #111111;
  border-color: #262626;
  color: #f5f5f5;
}
html.theme-dark .cal-fancy-date::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
html.theme-dark .cal-fancy-time::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
html.theme-dark .cal-fancy-input:hover {
  border-color: #cbd5e1;
  background-color: #1e293b;
}
html.theme-dark .cal-fancy-input:focus {
  border-color: #cbd5e1;
  background-color: #1e293b;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}
html.theme-dark .cal-fancy-input.is-placeholder { color: #737373; }

/* Date/time picker popover (dark) */
html.theme-dark .cal-pickup {
  background: #0a0a0a;
  border-color: #262626;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.7);
}
html.theme-dark .cal-pickup-title { color: #f5f5f5; }
html.theme-dark .cal-pickup-nav {
  background: #111111;
  border-color: #262626;
  color: #d4d4d4;
}
html.theme-dark .cal-pickup-nav:hover {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #64748b;
}
html.theme-dark .cal-pickup-dows span { color: #737373; }
html.theme-dark .cal-pickup-day { color: #e5e5e5; }
html.theme-dark .cal-pickup-day:hover { background: #1a1a1a; color: #e2e8f0; }
html.theme-dark .cal-pickup-day.is-other { color: #404040; }
html.theme-dark .cal-pickup-day.is-weekend { color: #cbd5e1; }
html.theme-dark .cal-pickup-day.is-other.is-weekend { color: #7c2d12; }
html.theme-dark .cal-pickup-day.is-today {
  background: #1e293b;
  color: #e2e8f0;
  outline-color: #64748b;
}
html.theme-dark .cal-pickup-day.is-selected {
  background: #64748b !important;
  color: #ffffff !important;
}
html.theme-dark .cal-pickup-day.is-selected:hover { background: #475569 !important; }
html.theme-dark .cal-pickup-foot { border-top-color: #262626; }
html.theme-dark .cal-pickup-btn {
  background: #111111;
  color: #d4d4d4;
  border-color: #262626;
}
html.theme-dark .cal-pickup-btn:hover {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #64748b;
}
html.theme-dark .cal-pickup-btn.is-primary {
  background: #64748b;
  color: #f8fafc;
  border-color: #64748b;
}
html.theme-dark .cal-pickup-btn.is-primary:hover {
  background: #475569;
  border-color: #475569;
  color: #f8fafc;
}
html.theme-dark .cal-pickup-spin-btn {
  background: #111111;
  color: #737373;
  border-color: #262626;
}
html.theme-dark .cal-pickup-spin-btn:hover {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #64748b;
}
html.theme-dark .cal-pickup-spin-val {
  background: #111111;
  color: #f5f5f5;
}
html.theme-dark .cal-pickup-spin-label { color: #737373; }
html.theme-dark .cal-pickup-spin-sep { color: #525252; }
html.theme-dark .cal-pickup-ampm-btn {
  background: #111111;
  color: #a3a3a3;
  border-color: #262626;
}
html.theme-dark .cal-pickup-ampm-btn:hover { background: #1e293b; color: #e2e8f0; }
html.theme-dark .cal-pickup-ampm-btn.is-active {
  background: #64748b;
  color: #f8fafc;
  border-color: #64748b;
}
html.theme-dark .cal-tz-compare { background: #111111; border-color: #262626; }
html.theme-dark .cal-tz-row { color: #f5f5f5; }
html.theme-dark .cal-tz-tag { background: #0a0a0a; color: #d4d4d4; border-color: #262626; }
html.theme-dark .cal-dialog.is-finished .cal-dialog-head { background: #1e293b; }
html.theme-dark .cal-dialog-finish {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #475569;
}
html.theme-dark .cal-dialog-finish:hover { background: #334155; }
html.theme-dark .cal-dialog-finish.is-finished { background: #1a1a1a; color: #d4d4d4; border-color: #404040; }
html.theme-dark .cal-dialog-finish.is-finished:hover { background: #262626; }
html.theme-dark .cal-dialog-delete { color: #fca5a5; }
html.theme-dark .cal-dialog-delete:hover { background: #450a0a; }
html.theme-dark .cal-finished-tag { background: #1e293b; color: #e2e8f0; }
html.theme-dark .cal-day-event-finished { background: #1e293b; color: #e2e8f0; }

/* Calendar widget on dashboard */
html.theme-dark .widget-cal-row { background: #111111; border-color: #262626; }
html.theme-dark .widget-cal-row:hover { background: #1a1a1a; border-color: #64748b; }
html.theme-dark .widget-cal-row strong { color: #f5f5f5; }
html.theme-dark .widget-cal-date { color: #cbd5e1; }
html.theme-dark .widget-cal-tile {
  background: #0a0a0a;
  border-color: #262626;
}
html.theme-dark .widget-cal-tile:hover {
  background: #1e293b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
html.theme-dark .widget-cal-tile-when { color: #cbd5e1; }
html.theme-dark .widget-cal-tile-day { color: #a3a3a3; }
html.theme-dark .widget-cal-tile-title { color: #f5f5f5; }
html.theme-dark .widget-cal-tile-time { color: #a3a3a3; }
html.theme-dark .widget-cal-tile-hero .widget-cal-tile-time { color: #f5f5f5; }

/* Tables (campaigns, regions, leaderboard, clients) */
html.theme-dark table { color: #e5e5e5; }
html.theme-dark th { background: #111111; color: #d4d4d4; border-color: #262626; }
html.theme-dark tbody td { border-color: #262626; color: #e5e5e5; }
html.theme-dark tbody tr:hover td { background: #1a1a1a; }
html.theme-dark .map-leaderboard tr:hover td { background: #1a1a1a; }
html.theme-dark .map-clients-table tr.map-client-row:hover td { background: #1a1a1a; }
html.theme-dark .eh-tree-paused > td { background: #0d0d0d; }
html.theme-dark .campaigns-table tr:hover td { background: #1a1a1a; }
html.theme-dark .chart-client-table th { background: #111111; color: #d4d4d4; }
html.theme-dark .chart-client-table td,
html.theme-dark .chart-client-table th { border-color: #262626; }

/* Badges */
html.theme-dark .badge-l1 { background: #1e293b; color: #e2e8f0; }
html.theme-dark .badge-l2 { background: #1e293b; color: #cbd5e1; }
html.theme-dark .badge-l3 { background: #1e293b; color: #e2e8f0; }
html.theme-dark .badge-live { background: #1e293b; color: #e2e8f0; }
html.theme-dark .badge-paused { background: #1a1a1a; color: #d4d4d4; }
html.theme-dark .badge-payment { background: #450a0a; color: #fca5a5; }
html.theme-dark .campaign-badge-cold { background: #1e293b; color: #e2e8f0; }
html.theme-dark .campaign-badge-warm { background: #1e293b; color: #e2e8f0; }
html.theme-dark .portfolio-pill { background: #1e293b; color: #e2e8f0; }

/* Callouts (wins / improve / mistakes) */
html.theme-dark .callout-wins { background: #1e293b; }
html.theme-dark .callout-wins .callout-list li { background: #0a0a0a; border-color: #475569; color: #e5e5e5; }
html.theme-dark .callout-improve .callout-list li { background: #0a0a0a; border-color: #334155; color: #e5e5e5; }
html.theme-dark .callout-mistakes { background: #450a0a; }
html.theme-dark .callout-mistakes .callout-list li { background: #0a0a0a; border-color: #7f1d1d; color: #e5e5e5; }

/* Recommendation chips */
/* Dark glass: translucent dark plates with the same rim-light pattern. */
html.theme-dark .eh-rec-head {
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 6px 18px rgba(0, 0, 0, 0.30);
}
html.theme-dark .eh-rec-head-on,
html.theme-dark .eh-rec-head-wins {
  background: linear-gradient(160deg, rgba(125, 211, 252, 0.22), rgba(125, 211, 252, 0.06));
  color: #e2e8f0;
  border-color: rgba(125, 211, 252, 0.30);
}
html.theme-dark .eh-rec-head-off,
html.theme-dark .eh-rec-head-mistakes {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.06));
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.30);
}
html.theme-dark .eh-rec-head-improve {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.30);
}

html.theme-dark .eh-rec-callout-list li {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.40));
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e5e5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 8px 22px rgba(0, 0, 0, 0.30);
}
html.theme-dark .eh-rec-callout-list-wins li {
  background: linear-gradient(160deg, rgba(125, 211, 252, 0.18), rgba(15, 23, 42, 0.55));
  border-color: rgba(125, 211, 252, 0.25);
}
html.theme-dark .eh-rec-callout-list-wins li::before {
  background: linear-gradient(160deg, rgba(125, 211, 252, 0.55), rgba(3, 105, 161, 0.45));
  color: #e5e7eb;
}
html.theme-dark .eh-rec-callout-list-improve li {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(15, 23, 42, 0.55));
  border-color: rgba(255, 255, 255, 0.25);
}
html.theme-dark .eh-rec-callout-list-improve li::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(30, 64, 175, 0.45));
  color: #e2e8f0;
}
html.theme-dark .eh-rec-callout-list-mistakes li {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.18), rgba(15, 23, 42, 0.55));
  border-color: rgba(239, 68, 68, 0.25);
}
html.theme-dark .eh-rec-callout-list-mistakes li::before {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.55), rgba(127, 29, 29, 0.45));
  color: #fecaca;
}
html.theme-dark .eh-rec-callout-list li.muted {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  box-shadow: none;
}

html.theme-dark .eh-rec-item {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.40));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 8px 22px rgba(0, 0, 0, 0.30);
}
html.theme-dark .eh-rec-item-on {
  background: linear-gradient(160deg, rgba(125, 211, 252, 0.16), rgba(15, 23, 42, 0.55));
  border-color: rgba(125, 211, 252, 0.25);
}
html.theme-dark .eh-rec-item-off {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.16), rgba(15, 23, 42, 0.55));
  border-color: rgba(239, 68, 68, 0.25);
}
html.theme-dark .eh-rec-inline-pause   { background: #1a0808; border-color: #dc2626; color: #fca5a5; }
html.theme-dark .eh-rec-inline-restart { background: #111827; border-color: #64748b; color: #e2e8f0; }
html.theme-dark .eh-rec-inline-good    { background: #1e293b; border-color: #94a3b8; color: #e2e8f0; }

/* Campaigns mode tabs */
html.theme-dark .eh-camp-mode-tabs { background: #111111; border-color: #262626; }
html.theme-dark .eh-camp-mode-thumb { background: #64748b; }
html.theme-dark .eh-camp-mode-tab { color: #d4d4d4; }
html.theme-dark .eh-camp-mode-tab.is-active { color: #f8fafc; }
html.theme-dark .eh-camp-mode-tab:hover:not(.is-active) { color: #f5f5f5; }

/* Campaigns → ad sets → ads tree (subtable) */
html.theme-dark .eh-tree-children-cell { background: #050505; border-bottom-color: #262626 !important; }
html.theme-dark .eh-subtable { background: #0a0a0a; border-color: #262626; color: #e5e5e5; }
html.theme-dark .eh-subtable th { background: #111111; color: #d4d4d4; border-color: #262626; }
html.theme-dark .eh-subtable td { border-color: #262626; color: #e5e5e5; }
html.theme-dark .eh-subtable tr.eh-tree-row:hover td { background: #1a1a1a; }
html.theme-dark .eh-subtable tr.eh-tree-paused > td { background: #050505; }
html.theme-dark .eh-tree-toggle { color: #a3a3a3; }
html.theme-dark .eh-tree-row.open > td .eh-tree-toggle { color: #cbd5e1; }
html.theme-dark .eh-tree-loading,
html.theme-dark .eh-tree-empty { color: #a3a3a3; }
html.theme-dark .eh-ad-thumb,
html.theme-dark .eh-ad-thumb-empty { background: #111111; border-color: #262626; }
html.theme-dark .eh-ad-leaf a { color: #e2e8f0; }

/* Quick filters (multi-select dropdowns + clear button) */
html.theme-dark .quick-multi-trigger {
  background: #111111;
  border-color: #262626;
  color: #e5e5e5;
}
html.theme-dark .quick-multi-trigger:hover { background: #1a1a1a; border-color: #404040; }
html.theme-dark .quick-multi.open .quick-multi-trigger {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
html.theme-dark .quick-multi-panel {
  background: #0a0a0a;
  border-color: #262626;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}
html.theme-dark .quick-multi-option { color: #e5e5e5; }
html.theme-dark .quick-multi-option:hover { background: #1a1a1a; }
html.theme-dark .quick-multi-option:has(input:checked) { background: #64748b; color: #f5f5f5; }
html.theme-dark .quick-multi-option:has(input:checked):hover { background: #475569; }
html.theme-dark .quick-filter-field-label { color: #a3a3a3; }
html.theme-dark .quick-filter-clear {
  border-color: #404040;
  color: #a3a3a3;
}
html.theme-dark .quick-filter-clear:hover {
  background: #1a1a1a;
  border-color: #cbd5e1;
  color: #f5f5f5;
}

/* Year toggle (buttons under "ROAS over time") */
html.theme-dark .year-toggle { border-color: #262626; }
html.theme-dark .year-toggle-btn {
  background: #0a0a0a;
  color: #a3a3a3;
}
html.theme-dark .year-toggle-btn + .year-toggle-btn { border-left-color: #262626; }
html.theme-dark .year-toggle-btn:hover { background: #1a1a1a; color: #e2e8f0; }
html.theme-dark .year-toggle-btn.is-active { background: #64748b; color: #f5f5f5; }
html.theme-dark .year-toggle-btn.is-active:hover { background: #475569; color: #f5f5f5; }

/* ROAS-over-time (eh-trend) chart — grey/transparent in dark theme too. */
html.theme-dark .trend-grid { stroke: rgba(148,163,184,0.14); }
html.theme-dark .trend-grid-base { stroke: rgba(148,163,184,0.30); }
html.theme-dark .trend-axis-label { fill: #a3a3a3; }
html.theme-dark .trend-value-label,
html.theme-dark .trend-point-positive .trend-value-label,
html.theme-dark .trend-point-concern  .trend-value-label { fill: #cbd5e1; }
html.theme-dark .trend-empty-label { fill: #a3a3a3; }
html.theme-dark .trend-line { stroke: #94a3b8; }
html.theme-dark .trend-dot-outer,
html.theme-dark .trend-point-positive .trend-dot-outer,
html.theme-dark .trend-point-concern .trend-dot-outer { fill: #0a0a0a; stroke: #94a3b8; }
html.theme-dark .trend-dot-inner,
html.theme-dark .trend-point-positive .trend-dot-inner,
html.theme-dark .trend-point-concern .trend-dot-inner { fill: #cbd5e1; }
html.theme-dark .eh-trend-summary { border-top-color: rgba(148,163,184,0.16); }
html.theme-dark .eh-trend-stat { background: rgba(148,163,184,0.07); border-color: rgba(148,163,184,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
html.theme-dark .eh-trend-stat-label { color: #a3a3a3; }
html.theme-dark .eh-trend-stat-value { color: #f5f5f5; }

/* Advisor cards (ROAS / CTR) */
html.theme-dark .eh-advisor-headline { border-bottom-color: #262626; }

/* Pie chart (Regions / % units) — text labels drawn via setAttribute fill="#0f172a" */
html.theme-dark .chart-body svg text { fill: #f5f5f5; }
html.theme-dark .chart-body svg text[font-size] { fill: #f5f5f5; }
html.theme-dark .chart-body svg path,
html.theme-dark .chart-body svg circle { stroke: #0a0a0a; }
html.theme-dark .chart-breadcrumb .crumb { color: #d4d4d4; }
html.theme-dark .chart-breadcrumb .crumb:hover { background: #1a1a1a; }
html.theme-dark .chart-breadcrumb .crumb.current { color: #e2e8f0; }
html.theme-dark .chart-breadcrumb .crumb-sep { color: #525252; }
html.theme-dark .legend-total { color: #a3a3a3; }
html.theme-dark .legend-value { color: #a3a3a3; }
html.theme-dark .legend-label { color: #e5e5e5; }
html.theme-dark .legend-item.slice-active { background: #1e293b; }
html.theme-dark .legend-item.slice-active .legend-label { color: #e2e8f0; }
html.theme-dark .legend-item.clickable:hover { background: #1a1a1a; }
html.theme-dark .legend-item.highlighted { background: #1e293b; }
html.theme-dark #level-legend,
html.theme-dark .chart-legend { color: #e5e5e5; }

/* ROAS-by-level breakdown rows (under regions chart) */
html.theme-dark .chart-roas-row { background: #0a0a0a; border-color: #262626; }
html.theme-dark .chart-roas-bar { background: #1a1a1a; }
html.theme-dark .chart-roas-stat-label { color: #a3a3a3; }
html.theme-dark .chart-roas-count { color: #a3a3a3; }
html.theme-dark .chart-roas-label { color: #e5e5e5; }

/* Map area — black BACKGROUND only; states stay light so they're visible */
html.theme-dark .custom-map-frame { background: #000; border-color: #262626; box-shadow: none; }
html.theme-dark .map-loading { background: rgba(0, 0, 0, 0.7); color: #a3a3a3; }
html.theme-dark .map-state-shape { fill: #ffffff; stroke: #94a3b8; }
html.theme-dark .map-state-shape.has-clients { fill: #64748b; stroke: #475569; }
html.theme-dark .map-state-group.is-active .map-state-shape {
  fill: #e2e8f0;
  stroke: #cbd5e1;
}
html.theme-dark .map-state-group.is-active.has-clients .map-state-shape {
  fill: #475569;
  stroke: #e2e8f0;
}
html.theme-dark .map-svg-label { fill: #475569; }
html.theme-dark .map-svg-label.has-clients { fill: #ffffff; }
html.theme-dark .map-state-label {
  color: #0f172a;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 4px rgba(255, 255, 255, 0.85);
}
html.theme-dark .map-state-label.has-clients {
  color: #ffffff;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 0 4px rgba(0, 0, 0, 0.85);
}
html.theme-dark .map-legend { background: #0a0a0a; border-color: #262626; color: #e5e5e5; }
html.theme-dark .map-tooltip { background: #000; border-color: #262626; color: #e5e5e5; }
html.theme-dark .map-warn { color: #e2e8f0; }
html.theme-dark .map-warn-red { color: #f87171; }
/* Widget map (small map inside dashboard widgets) */
html.theme-dark .widget-map-frame { background: #000; }
html.theme-dark .widget-map-loading { background: rgba(0, 0, 0, 0.7); color: #a3a3a3; }
html.theme-dark .widget-map-clients { background: #0a0a0a; border-top-color: #262626; }
html.theme-dark .widget-map-clients-header { border-bottom-color: #262626; }
html.theme-dark .widget-map-clients-title { color: #f5f5f5; }

/* Widget dashboards (Merlyn / Andres / Elijah) */
html.theme-dark .widget-grip:hover { background: #1a1a1a; color: #d4d4d4; }
html.theme-dark .widget-remove-btn { background: #111111; color: #d4d4d4; border-color: #262626; }
html.theme-dark .widget-remove-btn:hover { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
html.theme-dark .widget-add-btn,
html.theme-dark .widget-add-btn-sm {
  background: #0a0a0a;
  border-color: #404040;
  color: #a3a3a3;
}
html.theme-dark .widget-add-btn:hover,
html.theme-dark .widget-add-btn-sm:hover {
  background: #111827;
  border-color: #cbd5e1;
  color: #e2e8f0;
}
html.theme-dark .widget-picker { background: #0a0a0a; border-color: #262626; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7); }
html.theme-dark .widget-picker button { background: #0a0a0a; color: #e5e5e5; border-color: transparent; }
html.theme-dark .widget-picker button:hover:not(:disabled) { background: #1a1a1a; border-color: #334155; }
html.theme-dark .widget-picker-section-title { color: #a3a3a3; }
html.theme-dark .widget-client-clear:hover { background: #450a0a; color: #fca5a5; }

/* Clocks widget */
html.theme-dark .clock-remove:hover { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
html.theme-dark .clock-settings:hover { background: #1e293b; color: #e2e8f0; border-color: #64748b; }
html.theme-dark .widget-clock-add-header {
  background: #0a0a0a;
  border-color: #262626;
  color: #a3a3a3;
}
html.theme-dark .widget-clock-add-header:hover {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #64748b;
}
html.theme-dark .widget-clock-empty { color: #a3a3a3; }
html.theme-dark .clock-tz { color: #a3a3a3; }
html.theme-dark .clock-digital { color: #f5f5f5; }
html.theme-dark .clock-city { color: #e5e5e5; }

/* Clock picker (search "Search a city or time zone…" popover) */
html.theme-dark .clock-picker {
  background: #0a0a0a;
  border-color: #262626;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}
html.theme-dark .clock-picker-input {
  background: #111111;
  color: #e5e5e5;
  border-color: #262626;
}
html.theme-dark .clock-picker-suggestion { color: #e5e5e5; }
html.theme-dark .clock-picker-suggestion:hover { background: #1a1a1a; }
html.theme-dark .clock-picker-suggestion .muted { color: #a3a3a3; }
html.theme-dark .clock-picker-suggestion-custom { border-top-color: #262626; }
html.theme-dark .clock-picker-header { color: #a3a3a3; border-bottom-color: #262626; }

/* Clock style picker (Default / Blue / Red / Dark / Vintage / Mint / etc. grid) */
html.theme-dark .clock-style-picker {
  background: #0a0a0a;
  border-color: #262626;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}
html.theme-dark .clock-style-option:hover { background: #1e293b; }
html.theme-dark .clock-style-option.is-active { border-color: #cbd5e1; background: #1e293b; }
html.theme-dark .clock-style-name { color: #e5e5e5; }
html.theme-dark .clock-style-option-custom .clock-style-preview {
  background: #111111;
  border-color: #262626;
}
html.theme-dark .clock-style-option-custom:hover .clock-style-preview {
  background: #1e293b;
  border-color: #cbd5e1;
}
html.theme-dark .clock-style-add-icon { color: #a3a3a3; }
html.theme-dark .clock-style-option-custom:hover .clock-style-add-icon { color: #e2e8f0; }

/* Auth login overlay (used after sign-out) */
html.theme-dark #auth-overlay { background: linear-gradient(135deg, #000 0%, #0a0a0a 55%, #111111 100%); }
html.theme-dark .auth-card { background: #0a0a0a; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); }
html.theme-dark .auth-title { color: #f5f5f5; }
html.theme-dark .auth-sub,
html.theme-dark .auth-label { color: #a3a3a3; }
html.theme-dark .auth-field input { background: #111111; color: #e5e5e5; border-color: #262626; }
html.theme-dark .auth-error { background: #450a0a; color: #fecaca; border-color: #7f1d1d; }

/* Misc text/border surfaces */
html.theme-dark hr { border-color: #262626; }
html.theme-dark .btn-link-danger:hover { background: #450a0a; }
html.theme-dark .ad-lightbox-img { background: #0a0a0a; }

/* Client detail drawer (Full View / Close panel) */
html.theme-dark .drawer-backdrop { background: rgba(0, 0, 0, 0.7); }
html.theme-dark .drawer-panel { background: #000; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.8); }
html.theme-dark .drawer-header { border-bottom-color: #262626; }
html.theme-dark .drawer-header h2 { color: #f5f5f5; }
html.theme-dark .drawer-meta { color: #a3a3a3; }
html.theme-dark .drawer-client-logo { background: #0a0a0a; border-color: #262626; }
html.theme-dark .drawer-website-link {
  background: #0a0a0a;
  border-color: #262626;
  color: #a3a3a3;
}
html.theme-dark .drawer-website-link:hover {
  background: #1e293b;
  color: #cbd5e1;
  border-color: #cbd5e1;
}
html.theme-dark .drawer-body { background: #000; }
/* Metric KPI cards inside the drawer body */
html.theme-dark .metric { background: #0a0a0a; border-color: #262626; color: #e5e5e5; }
/* Event Hawk / Bounce top KPI strip: tint the (otherwise near-black) metric
   cards the same blue as the Account 360 KPI cards (rgba(255, 255, 255,0.08)). */
html.theme-dark #view-eventhawk .metric { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
html.theme-dark .metric-row .metric strong,
html.theme-dark .metric strong { color: #f5f5f5; }

/* Tokens / settings modal */
html.theme-dark .modal-backdrop { background: rgba(0, 0, 0, 0.7); }
html.theme-dark .modal-panel {
  background: #0a0a0a;
  color: #e5e5e5;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
}
html.theme-dark .modal-header h2 { color: #f5f5f5; }
html.theme-dark .tokens-form label { color: #a3a3a3; }
html.theme-dark .tokens-form textarea { background: #111111; color: #e5e5e5; border-color: #262626; }

/* Client info widget — search bar, suggestions, KPIs inside */
html.theme-dark .widget-client-config { background: #0a0a0a; border-bottom-color: #262626; }
html.theme-dark .widget-client-input { background: #111111; color: #e5e5e5; border-color: #262626; }
html.theme-dark .widget-client-suggestions {
  background: #0a0a0a;
  border-color: #262626;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}
html.theme-dark .widget-client-suggestion { color: #e5e5e5; }
html.theme-dark .widget-client-suggestion:hover { background: #1a1a1a; }
html.theme-dark .widget-client-suggestion .muted { color: #a3a3a3; }
html.theme-dark .widget-kpi { background: #111111; border-color: #262626; }
html.theme-dark .widget-kpi-label { color: #a3a3a3; }
html.theme-dark .widget-kpi-value { color: #f5f5f5; }

/* Task list (Merlyn dashboard) */
html.theme-dark .task-divider { color: #a3a3a3; border-top-color: #262626; }
html.theme-dark .task-input-row input { background: #111111; color: #e5e5e5; border-color: #262626; }

/* Generic fallback: any white-ish surface inside a widget body becomes dark */
html.theme-dark .widget-body { background: #0a0a0a; }
html.theme-dark .widget-body input,
html.theme-dark .widget-body select,
html.theme-dark .widget-body textarea { background: #111111; color: #e5e5e5; border-color: #262626; }
html.theme-dark .widget-picker-text strong { color: #f5f5f5; }
html.theme-dark .widget-picker-text .muted { color: #a3a3a3; }

/* Widget HEADER — kill the white gradient and lighten title text */
html.theme-dark .widget-header {
  background: #0a0a0a;
  border-bottom-color: #262626;
}
html.theme-dark .widget-title { color: #f5f5f5; }
html.theme-dark .widget-subtitle { color: #a3a3a3; }
html.theme-dark .widget-grip { color: #404040; }
html.theme-dark .widget-grip:hover { background: #1a1a1a; color: #a3a3a3; }
html.theme-dark .widget-icon-btn {
  background: #0a0a0a;
  color: #a3a3a3;
  border-color: #262626;
}
html.theme-dark .widget-icon-btn:hover {
  background: #1a1a1a;
  color: #f5f5f5;
  border-color: #404040;
}

/* Name mismatches widget — list rows */
html.theme-dark .mismatch-item {
  background: #0a0a0a;
  border-color: #262626;
  color: #e5e5e5;
}
html.theme-dark .mismatch-item:hover { background: #1a1a1a; border-color: #404040; }
html.theme-dark .mismatch-name { color: #f5f5f5; }
html.theme-dark .mismatch-meta { color: #a3a3a3; }
html.theme-dark .mismatch-time { color: #a3a3a3; }
html.theme-dark .mismatch-arrow { color: #a3a3a3; }
html.theme-dark .mismatch-dot { color: #404040; }
html.theme-dark .mismatch-group-header { color: #a3a3a3; }
html.theme-dark .mismatch-group-count { background: #1e293b; color: #e2e8f0; }
html.theme-dark .mismatch-item.fixed {
  background: #1e293b;
  border-color: #475569;
}
html.theme-dark .mismatch-item.fixed .mismatch-name,
html.theme-dark .mismatch-item.fixed .mismatch-meta,
html.theme-dark .mismatch-item.fixed .mismatch-time { color: #e2e8f0; }
html.theme-dark .badge-prefix { background: #450a0a; color: #fca5a5; }
html.theme-dark .badge-prefix-suggested { background: #1e293b; color: #e2e8f0; }

/* Task list widget */
html.theme-dark .task-item {
  background: #0a0a0a;
  border-color: #262626;
  color: #e5e5e5;
}
html.theme-dark .task-item:hover { background: #1a1a1a; border-color: #404040; }
html.theme-dark .task-text { color: #e5e5e5; }
html.theme-dark .task-empty { color: #a3a3a3; }
html.theme-dark .task-item.done {
  background: #1e293b;
  border-color: #475569;
}
html.theme-dark .task-item.done .task-text { color: #e2e8f0; }
html.theme-dark .task-item.vault {
  background: #0d0d0d;
  border-color: #262626;
}
html.theme-dark .task-item.vault .task-text { color: #a3a3a3; }
html.theme-dark .btn-link { color: #cbd5e1; }
html.theme-dark .btn-link:hover { background: #1e293b; }
html.theme-dark .btn-link-danger { color: #f87171; }
html.theme-dark .btn-link-danger:hover { background: #450a0a; }

/* Campaign snippets widget */
html.theme-dark .campaign-snippet {
  background: #0a0a0a;
  border-color: #262626;
  color: #e5e5e5;
}
html.theme-dark .campaign-line { color: #e5e5e5; }
html.theme-dark .campaign-line:hover { background: #1e293b; border-color: #334155; }
html.theme-dark .campaign-line.copied {
  background: #1e293b;
  border-color: #94a3b8;
  color: #e2e8f0;
}

/* News items widget */
html.theme-dark .news-item {
  background: #0a0a0a;
  border-color: #262626;
  color: #e5e5e5;
}
html.theme-dark .news-item:hover { border-color: #64748b; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
html.theme-dark .news-meta { color: #a3a3a3; }
html.theme-dark .news-source { color: #e2e8f0; }
html.theme-dark .news-dot { color: #404040; }
html.theme-dark .news-title { color: #f5f5f5; }
html.theme-dark .news-title:hover { color: #e2e8f0; }
html.theme-dark .news-desc { color: #a3a3a3; }
html.theme-dark .news-empty {
  background: #0a0a0a;
  border-color: #404040;
  color: #a3a3a3;
}

/* ===== HubSpot ticket button + modal ===== */

.hs-ticket-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid #94a3b8;
  background: #fff7ed;
  color: #475569;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  margin-right: 6px;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  flex-shrink: 0;
}
.hs-ticket-btn:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(255, 255, 255, 0.35); background: #ffedd5; }
.hs-ticket-btn:disabled,
.hs-ticket-btn-done {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #6b7280;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ===== HubSpot ticket modal — Liquid Glass ===== */
/* Same backdrop tone as the client drawer (rgba(15,23,42,0.35)) so when the
   modal opens on top of the dashboard, the rest of the page dims like a
   normal modal would. !important forces this through any cached rule. */
#hubspot-ticket-modal.hs-ticket-modal .modal-backdrop,
.hs-ticket-modal .modal-backdrop {
  background: rgba(15, 23, 42, 0.35) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* When a client drawer is open on the right, keep .modal full-viewport so
   the backdrop dims everything (including the drawer) and shift only the
   centered panel to the left with a small margin-right. The 50px keeps the
   panel in the same place it had before, just under a full-page dim. */
body:has(#client-drawer.drawer.open) .modal.hs-ticket-modal.open .modal-panel {
  margin-right: 50px;
}
/* Bump the ticket modal above the drawer's stacking context so its dimming
   backdrop can paint on top of the drawer-panel and dim that area too. */
.modal.hs-ticket-modal { z-index: 50; }
/* Glass panel — exact match to .profile-modal-panel (line 106 of this file). */
.hs-ticket-modal .modal-panel {
  position: relative;
  width: min(560px, 100%);
  padding: 32px 36px 28px;
  border-radius: 22px;
  background: transparent;
  -webkit-backdrop-filter: blur(4px) saturate(1.3);
  backdrop-filter: blur(4px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.70);
  color: #334155;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45),
    0 24px 60px rgba(15, 23, 42, 0.22),
    0 4px 12px rgba(15, 23, 42, 0.10);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65);
  animation: profile-modal-pop 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.hs-ticket-modal .modal-header {
  margin: 0 0 4px;
  padding: 0 40px 0 0;
  border: none;
  display: block;
  text-align: center;
}
.hs-ticket-modal .modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.55);
}
.hs-ticket-modal .hs-tk-label {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.50);
}
/* Round blue close button at top-right — like profile-modal-close. */
.hs-tk-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: var(--blue-500);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.35);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.hs-tk-close:hover { filter: brightness(1.06); transform: scale(1.06); }
.hs-tk-subtitle {
  color: #ffffff;
  font-size: 12.5px;
  margin: 4px 0 0;
  text-align: center;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.50);
}
.hs-tk-subtitle strong { color: #ffffff; }
.hs-tk-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.hs-tk-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.hs-tk-label {
  color: #334155;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.hs-tk-form input[type="text"],
.hs-tk-form textarea,
.hs-tk-form select {
  padding: 11px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.hs-tk-form input[type="text"]:focus,
.hs-tk-form textarea:focus,
.hs-tk-form select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 3px rgba(255, 255, 255, 0.18);
}
.hs-tk-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 140px;
}
.hs-tk-field-priority select { max-width: 200px; }
.hs-tk-field-priority .priority-picker { max-width: 200px; }

/* ===== Pretty priority dropdown ===== */
/* ===== Pipeline picker — same shape as priority picker, with icons ===== */
.pipeline-picker { position: relative; display: block; width: 100%; }
.pipeline-picker > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.pipeline-picker-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13.5px;
  font-family: inherit;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pipeline-picker-trigger:hover { border-color: rgba(15, 23, 42, 0.30); }
.pipeline-picker-trigger.is-open {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 3px rgba(255, 255, 255, 0.18);
}
.pipeline-picker-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.pipeline-picker-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipeline-picker-chev {
  width: 14px;
  height: 14px;
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.pipeline-picker-trigger.is-open .pipeline-picker-chev { transform: rotate(180deg); color: var(--blue-500); }

.pipeline-picker-popup {
  position: fixed;
  z-index: 99999;
  padding: 6px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
  max-height: 280px;
  overflow-y: auto;
  animation: priority-popup-in 0.16s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform-origin: top center;
}
.pipeline-picker-popup[hidden] { display: none; }
.pipeline-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}
.pipeline-picker-option:hover { background: #f1f5f9; }
.pipeline-picker-option.is-active {
  background: linear-gradient(160deg, #f1f5f9, #e2e8f0);
  color: #334155;
  font-weight: 600;
}
.pipeline-picker-option.is-active::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-500);
  margin-left: auto;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

html.theme-dark .pipeline-picker-trigger {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f5f5f5;
}
html.theme-dark .pipeline-picker-popup {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.50);
}
html.theme-dark .pipeline-picker-option { color: #e2e8f0; }
html.theme-dark .pipeline-picker-option:hover { background: rgba(255, 255, 255, 0.16); }
html.theme-dark .pipeline-picker-option.is-active {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(30, 64, 175, 0.30));
  color: #e2e8f0;
}

.priority-picker { position: relative; display: block; width: 100%; }
.priority-picker > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.priority-picker-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.priority-picker-trigger:hover { border-color: #94a3b8; }
.priority-picker-trigger.is-open {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.priority-picker-chev {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: #94a3b8;
  transition: transform 0.18s ease;
}
.priority-picker-trigger.is-open .priority-picker-chev { transform: rotate(180deg); color: var(--blue-500); }
.priority-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(15, 23, 42, 0.25);
}
.priority-dot-high   { background: linear-gradient(160deg, #f87171, #b91c1c); }
.priority-dot-medium { background: linear-gradient(160deg, #e2e8f0, #64748b); }
.priority-dot-low    { background: linear-gradient(160deg, #94a3b8, #475569); }
.priority-label { line-height: 1.2; }

.priority-picker-popup {
  position: fixed;
  z-index: 99999;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: priority-popup-in 0.16s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform-origin: top center;
}
.priority-picker-popup[hidden] { display: none; }
@keyframes priority-popup-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.priority-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.priority-picker-option:hover { background: #f1f5f9; }
.priority-picker-option.is-active {
  background: linear-gradient(160deg, #f1f5f9, #e2e8f0);
  color: #334155;
  font-weight: 600;
}
.priority-picker-option.is-active::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-500);
  margin-left: auto;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

html.theme-dark .priority-picker-trigger {
  background: #0a0a0a;
  border-color: #404040;
  color: #f5f5f5;
}
html.theme-dark .priority-picker-trigger:hover { border-color: #737373; }
html.theme-dark .priority-picker-trigger.is-open {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}
html.theme-dark .priority-picker-popup {
  background: #0f0f0f;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.4);
}
html.theme-dark .priority-picker-option { color: #e5e5e5; }
html.theme-dark .priority-picker-option:hover { background: #1f2937; }
html.theme-dark .priority-picker-option.is-active {
  background: linear-gradient(160deg, #334155, #1e293b);
  color: #e2e8f0;
}
.hs-tk-status { font-size: 13px; min-height: 18px; }
.hs-tk-status-ok { color: #475569; }
.hs-tk-status-ok a { color: #475569; text-decoration: underline; font-weight: 600; }
.hs-tk-status-error { color: #b91c1c; }
/* Inside the glass modal, the success message reads in white so it stays
   legible against the translucent panel. */
.hs-ticket-modal .hs-tk-status-ok,
.hs-ticket-modal .hs-tk-status-ok a {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55);
}
.hs-tk-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.hs-ticket-modal .hs-tk-actions .btn-primary {
  background: var(--blue-500);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #fff;
  border-radius: 10px;
  padding: 9px 22px;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.30);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.hs-ticket-modal .hs-tk-actions .btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

html.theme-dark .hs-ticket-btn { background: #2a1a0a; border-color: #475569; color: #e2e8f0; }
html.theme-dark .hs-ticket-btn:hover { background: #3a2412; }
html.theme-dark .hs-ticket-btn:disabled,
html.theme-dark .hs-ticket-btn-done {
  background: #1a1a1a; border-color: #404040; color: #737373;
}
html.theme-dark #hubspot-ticket-modal.hs-ticket-modal .modal-backdrop,
html.theme-dark .hs-ticket-modal .modal-backdrop {
  background: transparent !important;
  display: none !important;
}
/* Override the generic dark-mode .modal background so the ticket modal's
   wrapper itself is transparent — otherwise a #0a0a0a wash covers the page
   behind it. */
html.theme-dark .modal.hs-ticket-modal,
html.theme-dark #hubspot-ticket-modal.hs-ticket-modal {
  background: transparent !important;
  border: none !important;
}
html.theme-dark .hs-ticket-modal .modal-panel {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.50));
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 24px 60px rgba(0, 0, 0, 0.50),
    0 4px 12px rgba(0, 0, 0, 0.30);
}
html.theme-dark .hs-ticket-modal .modal-header h2 { color: #f5f5f5; }
html.theme-dark .hs-ticket-modal .hs-tk-subtitle { color: #94a3b8; }
html.theme-dark .hs-tk-label { color: #e2e8f0; }
html.theme-dark .hs-tk-form input[type="text"],
html.theme-dark .hs-tk-form textarea,
html.theme-dark .hs-tk-form select {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f5f5f5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.theme-dark .hs-tk-form input[type="text"]:focus,
html.theme-dark .hs-tk-form textarea:focus,
html.theme-dark .hs-tk-form select:focus {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 3px rgba(255, 255, 255, 0.22);
}
html.theme-dark .hs-tk-status-ok { color: #94a3b8; }
html.theme-dark .hs-tk-status-ok a { color: #94a3b8; }
html.theme-dark .hs-tk-status-error { color: #fca5a5; }

/* Create-ticket widget — same form styles as the modal, but tighter. */
.widget-create-ticket-body { padding: 14px 16px 16px; }
.widget-ct-form { margin-top: 0; gap: 10px; }
.widget-ct-form textarea {
  font-family: inherit;
  font-size: 13px;
  min-height: 80px;
}
.widget-ct-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; }
.widget-ct-actions { margin-top: 2px; }

/* ===== EH client switcher (search next to the Download button) ===== */

.eh-client-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.eh-client-search-input {
  width: 280px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: inherit;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.eh-client-search-input::placeholder { color: var(--muted); }
.eh-client-search-input:focus {
  outline: none;
  border-color: #64748b;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.eh-client-search-results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 280px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  z-index: 20;
  padding: 4px;
}
.eh-client-search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.eh-client-search-item:hover,
.eh-client-search-item.active {
  background: #f1f5f9;
}
.eh-client-search-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #0f172a);
}
.eh-client-search-meta {
  font-size: 11.5px;
  color: var(--muted);
}
.eh-client-search-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

html.theme-dark .eh-client-search-input { background: #1a1a1a; border-color: #404040; color: #f5f5f5; }
html.theme-dark .eh-client-search-input:focus { border-color: #cbd5e1; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
html.theme-dark .eh-client-search-results { background: #1a1a1a; border-color: #404040; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
html.theme-dark .eh-client-search-item:hover,
html.theme-dark .eh-client-search-item.active { background: #334155; }
html.theme-dark .eh-client-search-name { color: #f5f5f5; }

/* ---- Campaign tree search (find any campaign / ad set / ad) ---- */
.eh-campaign-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.eh-campaign-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
/* Scoped under .eh-campaign-search-wrap so these beat the generic
   `.card-header input` rule (which would otherwise override padding/width
   and make the icon overlap the text). Sized to match the adjacent
   Performance / Marketing Team mode tabs (height 30px, radius 8px). */
.eh-campaign-search-wrap .eh-campaign-search-input {
  width: 300px;
  height: 30px;
  padding: 0 32px 0 34px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.2;
  font-family: inherit;
  color: inherit;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.eh-campaign-search-wrap .eh-campaign-search-input::placeholder {
  color: var(--muted);
  text-overflow: ellipsis;
}
.eh-campaign-search-wrap .eh-campaign-search-input:focus {
  outline: none;
  border-color: #64748b;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.eh-campaign-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.eh-campaign-search-clear:hover { background: #f1f5f9; color: #64748b; }
.eh-campaign-search-spinner {
  position: absolute;
  right: 9px;
  top: 8px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #64748b;
  border-radius: 50%;
  display: none;
  animation: eh-camp-search-spin 0.7s linear infinite;
}
.eh-campaign-search-wrap.is-loading .eh-campaign-search-spinner { display: inline-block; }
.eh-campaign-search-wrap.is-loading .eh-campaign-search-clear { display: none; }
@keyframes eh-camp-search-spin { to { transform: rotate(360deg); } }
.eh-campaign-search-status {
  font-size: 12px;
  color: var(--muted);
  align-self: center;
  white-space: nowrap;
}

html.theme-dark .eh-campaign-search-wrap .eh-campaign-search-input { background: #111111; border-color: #262626; color: #f5f5f5; }
html.theme-dark .eh-campaign-search-wrap .eh-campaign-search-input:focus { border-color: #cbd5e1; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
html.theme-dark .eh-campaign-search-clear:hover { background: #334155; color: #e2e8f0; }
html.theme-dark .eh-campaign-search-spinner { border-color: rgba(255, 255, 255, 0.3); border-top-color: #cbd5e1; }

/* ================================================================== */
/* Weather widget — Apple "clear glass" with real weather animations    */
/* ================================================================== */

.widget-weather-body { position: relative; }
.weather-scene {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(160deg, rgba(186, 230, 253, 0.7), rgba(219, 234, 254, 0.6));
  display: flex; align-items: center; justify-content: center;
  color: #475569;
  /* Frosted-glass effect (Apple liquid-glass look) */
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -10px 20px rgba(15, 23, 42, 0.05),
    0 4px 14px rgba(15, 23, 42, 0.08);
  transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}
/* Subtle top-edge highlight — gives the "wet glass" sheen. */
.weather-scene::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.32), transparent);
  pointer-events: none;
  z-index: 1;
}
/* Anim layer sits between the glass background and the icon. */
.weather-scene-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.weather-scene .weather-scene-icon {
  position: relative;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.18));
  animation: weather-icon-bob 3.6s ease-in-out infinite;
}
.weather-scene .weather-scene-icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.8 !important; }
@keyframes weather-icon-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* SUNNY — warm gradient + radial glow + slow rotating rays */
.weather-scene.scene-sunny {
  background: linear-gradient(160deg, rgba(254, 243, 199, 0.85), rgba(252, 211, 77, 0.78));
  color: #475569;
}
.weather-scene.scene-sunny .weather-scene-anim::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 110px; height: 110px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 60%);
  animation: weather-pulse 3.5s ease-in-out infinite;
}
.weather-scene.scene-sunny .weather-scene-anim::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 130px; height: 130px;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255, 255, 255, 0.45) 8deg 14deg, transparent 14deg 30deg);
  border-radius: 50%; opacity: 0.65;
  animation: weather-spin 24s linear infinite;
}
@keyframes weather-pulse { 50% { transform: translate(-50%, -50%) scale(1.18); opacity: 0.85; } }
@keyframes weather-spin  { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* CLEAR NIGHT — deep blue + twinkling stars */
.weather-scene.scene-clear-night {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(49, 46, 129, 0.88));
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.18);
}
.weather-scene.scene-clear-night .weather-scene-anim {
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.95) 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.85) 50%, transparent 51%),
    radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,0.95) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,0.85) 50%, transparent 51%);
  animation: weather-twinkle 3s ease-in-out infinite;
}
@keyframes weather-twinkle { 50% { opacity: 0.4; } }

/* PARTLY CLOUDY — warm/cool blend + a single cloud drifting across */
.weather-scene.scene-partly       { background: linear-gradient(160deg, rgba(186,230,253,0.78), rgba(254,243,199,0.7)); color: #475569; }
.weather-scene.scene-partly-night { background: linear-gradient(160deg, rgba(30,41,59,0.88), rgba(71,85,105,0.88)); color: #cbd5e1; border-color: rgba(255,255,255,0.18); }
.weather-scene.scene-partly .weather-scene-anim::before,
.weather-scene.scene-partly-night .weather-scene-anim::before {
  content: '';
  position: absolute; top: 14%; left: -32px;
  width: 26px; height: 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 14px -4px 0 rgba(255,255,255,0.7);
  animation: weather-cloud-drift 16s linear infinite;
}
@keyframes weather-cloud-drift {
  0%   { left: -32px; }
  100% { left: 110%; }
}

/* CLOUDY — two layers of clouds drifting at different speeds */
.weather-scene.scene-cloudy { background: linear-gradient(160deg, rgba(226,232,240,0.85), rgba(203,213,225,0.85)); color: #475569; }
.weather-scene.scene-cloudy .weather-scene-anim::before {
  content: '';
  position: absolute; top: 28%; left: -100%;
  width: 38px; height: 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow:
    52px 8px 0 rgba(255,255,255,0.65),
    110px -3px 0 rgba(255,255,255,0.6);
  animation: weather-clouds-pan 20s linear infinite;
}
.weather-scene.scene-cloudy .weather-scene-anim::after {
  content: '';
  position: absolute; top: 62%; left: -100%;
  width: 28px; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 46px 4px 0 rgba(255,255,255,0.5);
  animation: weather-clouds-pan 30s linear infinite;
  animation-delay: -8s;
}
@keyframes weather-clouds-pan { to { transform: translateX(220%); } }

/* RAINY / DRIZZLE / STORM — dark gradient + falling rain streaks */
.weather-scene.scene-rainy   { background: linear-gradient(160deg, rgba(71,85,105,0.88), rgba(30,41,59,0.88)); color: #e2e8f0; border-color: rgba(255,255,255,0.18); }
.weather-scene.scene-drizzle { background: linear-gradient(160deg, rgba(100,116,139,0.85), rgba(71,85,105,0.85)); color: #e2e8f0; border-color: rgba(255,255,255,0.2); }
.weather-scene.scene-storm   { background: linear-gradient(160deg, rgba(30,41,59,0.92), rgba(15,23,42,0.92)); color: #e2e8f0; border-color: rgba(255,255,255,0.15); }
.weather-scene.scene-storm .weather-scene-anim::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(254, 240, 138, 0);
  animation: weather-flash 5s linear infinite;
}
@keyframes weather-flash {
  0%, 92%, 100% { background: rgba(254,240,138,0); }
  93%           { background: rgba(254,240,138,0.55); }
  94%, 96%      { background: rgba(254,240,138,0); }
  95%           { background: rgba(254,240,138,0.45); }
}

/* SNOWY — soft gradient + falling snowflakes */
.weather-scene.scene-snowy { background: linear-gradient(160deg, rgba(241,245,249,0.88), rgba(203,213,225,0.85)); color: #475569; }
.weather-scene.scene-snowy .weather-scene-anim {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.85) 1.5px, transparent 2px);
  background-size: 80px 80px, 60px 60px;
  background-position: 0 0, 30px 30px;
  animation: weather-snow 8s linear infinite;
}
@keyframes weather-snow {
  0%   { background-position: 0 0, 30px 30px; }
  100% { background-position: 0 80px, 30px 110px; }
}

/* FOGGY — gray + horizontal drifting mist band */
.weather-scene.scene-foggy { background: linear-gradient(160deg, rgba(226,232,240,0.85), rgba(203,213,225,0.85)); color: #475569; }
.weather-scene.scene-foggy .weather-scene-anim {
  background:
    linear-gradient(transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: weather-fog 9s linear infinite;
}
@keyframes weather-fog { to { background-position: 200% 0; } }

/* Card-based layout — vertical cards arranged horizontally (up to 3 wide) */
.widget-weather-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.widget-weather-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.weather-card {
  --c-light: #e2e8f0;
  --c-mid: #94a3b8;
  --c-dark: #334155;
  --c-shine: 0.95;
  --c-frost: 0.82;
  --c-frost-mid: 0.62;
  --c-frost-bot: 0.50;
}
/* Per-scene palette overrides so the outer card glass picks up the same
   color family as the inner scene. The CSS variables redefined here
   feed straight into the existing background + box-shadow stack on
   `.weather-card` below — nothing else needs to know. */
.weather-card.scene-sunny       { --c-light: #e2e8f0; --c-mid: #94a3b8; --c-dark: #475569; }
.weather-card.scene-clear-night { --c-light: #cbd5e1; --c-mid: #64748b; --c-dark: #1e293b; }
.weather-card.scene-partly      { --c-light: #e2e8f0; --c-mid: #cbd5e1; --c-dark: #475569; }
.weather-card.scene-partly-night{ --c-light: #94a3b8; --c-mid: #475569; --c-dark: #1e293b; }
.weather-card.scene-cloudy      { --c-light: #e5e7eb; --c-mid: #9ca3af; --c-dark: #4b5563; }
.weather-card.scene-foggy       { --c-light: #e7e5e4; --c-mid: #a8a29e; --c-dark: #57534e; }
.weather-card.scene-drizzle     { --c-light: #cbd5e1; --c-mid: #64748b; --c-dark: #334155; }
.weather-card.scene-rainy       { --c-light: #cbd5e1; --c-mid: #64748b; --c-dark: #334155; }
.weather-card.scene-snowy       { --c-light: #f1f5f9; --c-mid: #cbd5e1; --c-dark: #64748b; }
.weather-card.scene-storm       { --c-light: #e2e8f0; --c-mid: #64748b; --c-dark: #334155; }
.weather-card {

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 12px 10px 12px;
  border-radius: 12px;
  border: none;
  overflow: hidden;
  background:
    linear-gradient(170deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 14%, rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(ellipse 140% 95% at 30% -25%, rgba(255, 255, 255, var(--c-shine)) 0%, rgba(255, 255, 255, 0.30) 40%, rgba(255, 255, 255, 0) 80%),
    radial-gradient(ellipse 100% 70% at 80% 115%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg,
      rgba(255, 255, 255, var(--c-frost))     0%,
      rgba(255, 255, 255, var(--c-frost-mid)) 55%,
      rgba(255, 255, 255, var(--c-frost-bot)) 100%),
    linear-gradient(160deg, var(--c-light) 0%, var(--c-mid) 55%, var(--c-dark) 100%);
  color: var(--c-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 10px 28px rgba(255, 255, 255, 0.32),
    0 6px 20px rgba(255, 255, 255, 0.20),
    0 2px 4px rgba(15, 23, 42, 0.10);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65), 0 0 8px rgba(255, 255, 255, 0.4);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  min-width: 0;
}
.weather-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    inset 0 12px 32px rgba(255, 255, 255, 0.40),
    0 10px 26px rgba(255, 255, 255, 0.30),
    0 3px 6px rgba(15, 23, 42, 0.14);
}
.weather-card .weather-scene {
  width: 100%;
  height: 88px;
  border-radius: 10px;
}
.weather-card-info { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.weather-card-city {
  font-size: 13px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%;
}
.weather-card-temp { font-size: 26px; font-weight: 800; line-height: 1.05; }
.weather-card-cond { font-size: 12px; color: var(--c-dark); opacity: 0.78; }
.weather-card-meta {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 11px;
  color: var(--c-dark);
  opacity: 0.72;
}
.weather-card-remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 50%;
  font-size: 14px; line-height: 1; color: #475569;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.12s ease, color 0.12s ease, transform 0.12s ease;
  z-index: 3;
}
.weather-card:hover .weather-card-remove,
.weather-card-remove:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.weather-card-remove:hover { background: #fee2e2; color: #dc2626; transform: scale(1.08); }

html.theme-dark .weather-card-remove {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
html.theme-dark .weather-card-remove:hover { background: #450a0a; color: #fca5a5; }

/* °F / °C slide toggle — same shape/feel as the sidebar light/dark switch. */
.weather-unit-toggle {
  position: relative;
  display: inline-flex;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 3px;
  user-select: none;
}
.weather-unit-thumb {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.weather-unit-toggle.is-c .weather-unit-thumb { transform: translateX(100%); }
.weather-unit-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.18s ease;
}
.weather-unit-btn:hover { color: #0f172a; }
.weather-unit-toggle.is-f [data-unit="F"],
.weather-unit-toggle.is-c [data-unit="C"] { color: #0f172a; }

.weather-empty {
  padding: 22px 14px; text-align: center; font-size: 13px; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 12px;
}

.widget-weather-add-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px; font-weight: 600;
  font-family: inherit; color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.widget-weather-add-btn:hover:not(:disabled) { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-600); }
.widget-weather-add-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.widget-weather-edit {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px solid var(--border);
}
.widget-weather-edit[hidden] { display: none; }
.widget-weather-edit-row { display: flex; gap: 8px; align-items: center; }
.widget-weather-input {
  flex: 1; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; color: inherit;
  background: #fff;
}
.widget-weather-input:focus { outline: none; border-color: #64748b; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }

.widget-weather-suggestions {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  max-height: 220px;
  overflow-y: auto;
}
.weather-suggestion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; padding: 8px 10px;
  border: 0; background: transparent;
  cursor: pointer; text-align: left; font-family: inherit;
  border-bottom: 1px solid var(--border);
}
.weather-suggestion:last-child { border-bottom: 0; }
.weather-suggestion:hover { background: var(--blue-50); }
.weather-suggestion-name { font-size: 13px; font-weight: 600; color: var(--text); }
.weather-suggestion-meta { font-size: 11px; color: var(--muted); }
.weather-suggestion-loading,
.weather-suggestion-empty { padding: 12px; text-align: center; font-size: 12.5px; color: var(--muted); }

html.theme-dark .weather-card {
  --c-light: #94a3b8;
  --c-mid: #3f4b5b;
  --c-dark: #1e293b;
  --c-shine: 0.55;
  --c-frost: 0.40;
  --c-frost-mid: 0.20;
  --c-frost-bot: 0.10;
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.6), 0 0 6px rgba(15, 23, 42, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 10px 28px rgba(255, 255, 255, 0.10),
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
html.theme-dark .weather-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    inset 0 12px 32px rgba(255, 255, 255, 0.14),
    0 10px 26px rgba(0, 0, 0, 0.6),
    0 3px 6px rgba(0, 0, 0, 0.45);
}
/* Per-scene dark-mode palettes. Higher specificity than the generic
   `html.theme-dark .weather-card` rule above so the scene-specific
   colors win in dark mode too. Each variant uses a darker, more muted
   version of the light-mode hue so the glass stays readable against
   the dashboard background. */
html.theme-dark .weather-card.scene-sunny       { --c-light: #475569; --c-mid: #78350f; --c-dark: #451a03; }
html.theme-dark .weather-card.scene-clear-night { --c-light: #64748b; --c-mid: #334155; --c-dark: #1e293b; }
html.theme-dark .weather-card.scene-partly      { --c-light: #64748b; --c-mid: #475569; --c-dark: #1e293b; }
html.theme-dark .weather-card.scene-partly-night{ --c-light: #475569; --c-mid: #334155; --c-dark: #0f172a; }
html.theme-dark .weather-card.scene-cloudy      { --c-light: #6b7280; --c-mid: #4b5563; --c-dark: #1f2937; }
html.theme-dark .weather-card.scene-foggy       { --c-light: #78716c; --c-mid: #57534e; --c-dark: #1c1917; }
html.theme-dark .weather-card.scene-drizzle     { --c-light: #475569; --c-mid: #334155; --c-dark: #0f172a; }
html.theme-dark .weather-card.scene-rainy       { --c-light: #475569; --c-mid: #334155; --c-dark: #0f172a; }
html.theme-dark .weather-card.scene-snowy       { --c-light: #94a3b8; --c-mid: #64748b; --c-dark: #334155; }
html.theme-dark .weather-card.scene-storm       { --c-light: #475569; --c-mid: #3730a3; --c-dark: #1e293b; }
html.theme-dark .weather-card .weather-card-cond,
html.theme-dark .weather-card .weather-card-meta {
  color: rgba(248, 250, 252, 0.78);
  opacity: 1;
}
html.theme-dark .weather-unit-toggle { background: #1f2937; }
html.theme-dark .weather-unit-thumb { background: #0f172a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
html.theme-dark .weather-unit-btn { color: #94a3b8; }
html.theme-dark .weather-unit-btn:hover { color: #f5f5f5; }
html.theme-dark .weather-unit-toggle.is-f [data-unit="F"],
html.theme-dark .weather-unit-toggle.is-c [data-unit="C"] { color: #f5f5f5; }
html.theme-dark .widget-weather-add-btn { color: #f5f5f5; border-color: #404040; }
html.theme-dark .widget-weather-add-btn:hover:not(:disabled) { background: #334155; border-color: #64748b; color: #e2e8f0; }
html.theme-dark .widget-weather-edit { background: #0f0f0f; border-color: #262626; }
html.theme-dark .widget-weather-input { background: #1a1a1a; border-color: #404040; color: #f5f5f5; }
html.theme-dark .widget-weather-suggestions { background: #1a1a1a; border-color: #404040; }
html.theme-dark .weather-suggestion { border-bottom-color: #262626; }
html.theme-dark .weather-suggestion:hover { background: #334155; }
html.theme-dark .weather-suggestion-name { color: #f5f5f5; }
html.theme-dark .weather-empty { border-color: #404040; }

/* ================================================================== */
/* Holidays widget                                                     */
/* ================================================================== */

.widget-holidays-list { display: flex; flex-direction: column; gap: 12px; }
.holiday-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.holiday-card {
  --c-light: #e2e8f0;
  --c-mid: #94a3b8;
  --c-dark: #334155;
  --c-shine: 0.95;
  --c-frost: 0.82;
  --c-frost-mid: 0.62;
  --c-frost-bot: 0.50;

  position: relative;
  border-radius: 14px;
  padding: 18px 12px;
  min-height: 140px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  background:
    /* Specular streak — narrow bright shine across the upper half */
    linear-gradient(170deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 14%, rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0) 42%),
    /* Big diffuse top-left highlight (frosted glass shine) */
    radial-gradient(ellipse 140% 95% at 30% -25%, rgba(255, 255, 255, var(--c-shine)) 0%, rgba(255, 255, 255, 0.30) 40%, rgba(255, 255, 255, 0) 80%),
    /* Soft bottom-right gleam */
    radial-gradient(ellipse 100% 70% at 80% 115%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 70%),
    /* Heavy frosted white wash that mostly hides the base color */
    linear-gradient(180deg,
      rgba(255, 255, 255, var(--c-frost))     0%,
      rgba(255, 255, 255, var(--c-frost-mid)) 55%,
      rgba(255, 255, 255, var(--c-frost-bot)) 100%),
    /* Base color gradient (just a hint underneath) */
    linear-gradient(160deg, var(--c-light) 0%, var(--c-mid) 55%, var(--c-dark) 100%);
  color: var(--c-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 10px 28px rgba(255, 255, 255, 0.32),
    0 6px 20px rgba(255, 255, 255, 0.20),
    0 2px 4px rgba(15, 23, 42, 0.10);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65), 0 0 8px rgba(255, 255, 255, 0.4);
}
.holiday-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 10px 24px rgba(255, 255, 255, 0.42),
    0 3px 6px rgba(15, 23, 42, 0.22);
}
.holiday-card .holiday-emoji { font-size: 38px; }
.holiday-card .holiday-name  { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.holiday-card .holiday-date  { font-size: 12px; opacity: 0.85; }
.holiday-card .holiday-days  { font-size: 12.5px; font-weight: 600; }
.holiday-emoji {
  position: relative; z-index: 2; line-height: 1; margin-bottom: 6px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
  animation: holiday-emoji-bounce 3s ease-in-out infinite;
}
.holiday-emoji:has(.us-flag) { animation: none; }
@keyframes holiday-emoji-bounce { 50% { transform: scale(1.08) rotate(-4deg); } }

/* Animated US flag — used in patriotic/4th-of-July holiday cards
   (Windows can't render the 🇺🇸 emoji, so we draw it ourselves). */
.us-flag {
  display: inline-block;
  width: 1.45em;
  height: 0.76em;
  position: relative;
  vertical-align: -0.05em;
  border-radius: 1.5px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  background: linear-gradient(
    to bottom,
    #b22234 0%,        #b22234 7.69%,
    #ffffff 7.69%,     #ffffff 15.38%,
    #b22234 15.38%,    #b22234 23.07%,
    #ffffff 23.07%,    #ffffff 30.76%,
    #b22234 30.76%,    #b22234 38.46%,
    #ffffff 38.46%,    #ffffff 46.15%,
    #b22234 46.15%,    #b22234 53.85%,
    #ffffff 53.85%,    #ffffff 61.54%,
    #b22234 61.54%,    #b22234 69.23%,
    #ffffff 69.23%,    #ffffff 76.92%,
    #b22234 76.92%,    #b22234 84.61%,
    #ffffff 84.61%,    #ffffff 92.30%,
    #b22234 92.30%,    #b22234 100%
  );
  transform-origin: left center;
}
.us-flag::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 40%;
  height: 53.85%;
  background-color: #3c3b6e;
  background-image: radial-gradient(circle, #ffffff 22%, transparent 26%);
  background-size: 22% 28%;
  background-position: 11% 14%;
}
.holiday-card.is-playing .us-flag { animation: us-flag-wave 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) 2; }
@keyframes us-flag-wave {
  0%   { transform: skewY(0deg)    skewX(0deg)    rotate(0deg); }
  10%  { transform: skewY(-1deg)   skewX(-0.6deg) rotate(-0.5deg); }
  22%  { transform: skewY(-2.6deg) skewX(-1.6deg) rotate(-1.4deg); }
  34%  { transform: skewY(-1.6deg) skewX(-0.4deg) rotate(-0.7deg); }
  46%  { transform: skewY(0deg)    skewX(0.6deg)  rotate(0.2deg); }
  58%  { transform: skewY(1.4deg)  skewX(1.6deg)  rotate(0.9deg); }
  72%  { transform: skewY(2.6deg)  skewX(1.2deg)  rotate(1.5deg); }
  85%  { transform: skewY(1.2deg)  skewX(0.4deg)  rotate(0.6deg); }
  94%  { transform: skewY(0.3deg)  skewX(0deg)    rotate(0.15deg); }
  100% { transform: skewY(0deg)    skewX(0deg)    rotate(0deg); }
}

/* Fireworks — two rockets that rise + burst on card hover */
.holiday-fireworks {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.fw {
  position: absolute;
  bottom: 6px;
  width: 0; height: 0;
  opacity: 0;
}
.fw-1 { left: 28%; }
.fw-2 { left: 72%; }
.fw::before {
  content: "";
  position: absolute;
  left: -1.5px; top: -10px;
  width: 3px; height: 14px;
  background: linear-gradient(to top, transparent, #ffd24a 50%, #fff7c2);
  border-radius: 2px;
  filter: drop-shadow(0 0 4px rgba(255, 200, 50, 0.85));
  opacity: 0;
}
.fw-spark {
  position: absolute;
  left: -2px; top: -2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff5c2;
  box-shadow: 0 0 8px 2px rgba(255, 200, 50, 0.95);
  opacity: 0;
}
.fw-spark:nth-child(1) { --x:  28px; --y:   0px; }
.fw-spark:nth-child(2) { --x:  20px; --y: -20px; }
.fw-spark:nth-child(3) { --x:   0px; --y: -28px; }
.fw-spark:nth-child(4) { --x: -20px; --y: -20px; }
.fw-spark:nth-child(5) { --x: -28px; --y:   0px; }
.fw-spark:nth-child(6) { --x: -20px; --y:  20px; }
.fw-spark:nth-child(7) { --x:   0px; --y:  28px; }
.fw-spark:nth-child(8) { --x:  20px; --y:  20px; }

.holiday-card.is-playing .fw       { animation: fw-rise 1.4s ease-out forwards; }
.holiday-card.is-playing .fw-2     { animation-delay: 0.45s; }
.holiday-card.is-playing .fw::before { animation: fw-trail 0.65s ease-out forwards; }
.holiday-card.is-playing .fw-2::before { animation-delay: 0.45s; }
.holiday-card.is-playing .fw-spark { animation: fw-burst 0.9s ease-out 0.55s forwards; }
.holiday-card.is-playing .fw-2 .fw-spark { animation-delay: 1s; }

@keyframes fw-rise {
  0%   { transform: translateY(0); opacity: 1; }
  55%  { transform: translateY(-95px); opacity: 1; }
  100% { transform: translateY(-95px); opacity: 1; }
}
@keyframes fw-trail {
  0%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fw-burst {
  0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(0.4); opacity: 0; }
}
.holiday-name { position: relative; z-index: 2; }
.holiday-date { position: relative; z-index: 2; opacity: 0.75; margin-top: 2px; }
.holiday-days { position: relative; z-index: 2; margin-top: 6px; }
.holiday-confetti {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.holiday-confetti-piece {
  position: absolute;
  font-size: 18px;
  top: -20px;
  animation: holiday-fall 4s linear infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
.holiday-confetti-piece:nth-child(1) { left: 8%; }
.holiday-confetti-piece:nth-child(2) { left: 22%; font-size: 14px; }
.holiday-confetti-piece:nth-child(3) { left: 38%; font-size: 20px; }
.holiday-confetti-piece:nth-child(4) { left: 54%; font-size: 16px; }
.holiday-confetti-piece:nth-child(5) { left: 68%; font-size: 18px; }
.holiday-confetti-piece:nth-child(6) { left: 80%; font-size: 14px; }
.holiday-confetti-piece:nth-child(7) { left: 92%; font-size: 16px; }
.holiday-confetti-piece:nth-child(8) { left: 14%; font-size: 14px; }
@keyframes holiday-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(220px) rotate(360deg); opacity: 0; }
}

/* ================================================================== */
/* Team chat widget                                                    */
/* ================================================================== */
.widget-team-chat-body { padding: 0; display: flex; flex-direction: column; height: 360px; }
.widget-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f9fafb;
}
.widget-chat-empty {
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  padding: 32px 16px;
  align-self: center;
  margin: auto 0;
  line-height: 1.5;
}
.widget-chat-msg {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  border-top-left-radius: 4px;
  background: #f1f5f9;          /* light gray for others */
  align-self: flex-start;
  max-width: 78%;
  font-size: 13px;
  line-height: 1.4;
  color: #0f172a;
}
.widget-chat-msg.is-me {
  background: #e2e8f0;          /* light blue for own messages */
  color: #0f172a;
  align-self: flex-end;
  border-radius: 14px;
  border-top-left-radius: 4px;
}
.widget-chat-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(160deg, #94a3b8, #475569);
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 13px;
  overflow: hidden;
  user-select: none;
}
.widget-chat-msg-avatar::before {
  content: attr(data-initial);
  position: absolute;
  z-index: 0;
}
.widget-chat-msg-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
}
.widget-chat-msg.is-me .widget-chat-msg-avatar {
  background: linear-gradient(160deg, #cbd5e1, #64748b);
}
.widget-chat-msg-content {
  flex: 1 1 auto;
  min-width: 0;
}
.widget-chat-msg-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 10.5px;
  margin-bottom: 2px;
}
.widget-chat-msg-author { font-weight: 700; color: #1e293b; }
.widget-chat-msg-time   { color: #64748b; }
.widget-chat-msg-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.widget-chat-msg-image-wrap {
  position: relative;
  display: block;
  margin-top: 6px;
  max-width: 240px;
  width: 100%;
}
.widget-chat-msg-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 200px;
  border-radius: 10px;
  cursor: zoom-in;
  background: #e2e8f0;
}
.widget-chat-msg-image-download {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.65);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.12s ease;
  padding: 0;
}
.widget-chat-msg-image-wrap:hover .widget-chat-msg-image-download {
  opacity: 1;
}
.widget-chat-msg-image-download:hover {
  background: rgba(15, 23, 42, 0.85);
  transform: scale(1.08);
}

/* Download button in the lightbox */
.widget-chat-lightbox-bar {
  position: fixed;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 8px;
  z-index: 1101;
}
.widget-chat-lightbox-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #0f172a;
  transition: transform 0.12s ease, background 0.12s ease;
  padding: 0;
}
.widget-chat-lightbox-btn:hover { background: #fff; transform: scale(1.06); }
.widget-chat-msg-edited {
  font-size: 10px;
  color: #94a3b8;
  font-style: italic;
}

/* Hover actions on own messages — edit / delete (floating overlay) */
.widget-chat-msg-actions {
  position: absolute;
  top: -10px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 2;
}
.widget-chat-msg:hover .widget-chat-msg-actions {
  opacity: 1;
  pointer-events: auto;
}
.widget-chat-action {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 50%;
  cursor: pointer;
  color: #475569;
  padding: 0;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.widget-chat-action:hover { background: #fff; transform: scale(1.08); color: #3f4b5b; }
.widget-chat-action-delete:hover { color: #b91c1c; }
.widget-chat-action[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Inline edit form */
.widget-chat-edit-input {
  width: 100%;
  min-height: 56px;
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  resize: vertical;
}
.widget-chat-edit-bar {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.widget-chat-edit-save,
.widget-chat-edit-cancel {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: #334155;
  transition: filter 0.12s ease;
}
.widget-chat-edit-save {
  background: linear-gradient(160deg, #94a3b8, #3f4b5b);
  color: #fff;
  border-color: transparent;
}
.widget-chat-edit-save:hover { filter: brightness(1.08); }
.widget-chat-edit-cancel:hover { background: #f1f5f9; }

/* Attach button + pending preview bar */
.widget-chat-attach {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  padding: 0;
}
.widget-chat-attach:hover { background: #f1f5f9; color: #475569; }
.widget-chat-preview {
  position: relative;
  display: inline-block;
  margin: 0 14px 6px;
  border-radius: 10px;
  overflow: hidden;
  align-self: flex-start;
}
.widget-chat-preview-img {
  display: block;
  max-width: 140px;
  max-height: 100px;
  background: #e2e8f0;
}
.widget-chat-preview-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* Lightbox overlay for chat images */
.widget-chat-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  cursor: zoom-out;
  padding: 24px;
}
.widget-chat-lightbox img { max-width: 95vw; max-height: 95vh; border-radius: 8px; }

html.theme-dark .widget-chat-msg-edited { color: #64748b; }
html.theme-dark .widget-chat-action {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}
html.theme-dark .widget-chat-action:hover { background: rgba(15, 23, 42, 0.95); color: #e2e8f0; }
html.theme-dark .widget-chat-attach {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}
html.theme-dark .widget-chat-edit-input {
  background: rgba(15, 23, 42, 0.85);
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.45);
}
.widget-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}
.widget-chat-input {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.widget-chat-input:focus { border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); }
.widget-chat-send {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(160deg, #94a3b8, #3f4b5b);
  color: #fff;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.widget-chat-send:hover { filter: brightness(1.08); transform: scale(1.05); }
.widget-chat-send[disabled] { opacity: 0.5; cursor: progress; }

html.theme-dark .widget-chat-messages { background: rgba(15, 23, 42, 0.55); }
html.theme-dark .widget-chat-msg {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f5;
}
html.theme-dark .widget-chat-msg.is-me {
  background: rgba(255, 255, 255, 0.20);
}
html.theme-dark .widget-chat-msg-author { color: #f1f5f9; }
html.theme-dark .widget-chat-msg-time   { color: #94a3b8; }

/* ================================================================== */
/* Team chat — full-page view                                          */
/* ================================================================== */
.team-chat-page {
  width: 100%;
  padding: 16px 28px 24px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
  box-sizing: border-box;
}
.team-chat-page-head { padding-bottom: 18px; }

/* On the Team Chat view, hide analytics-only header chrome and expand the chat.
   Date range and Refresh stay visible so the top strip is not left empty. */
body.team-chat-active #api-status { display: none !important; }

/* On the Calendar view, hide only the status text. The "Calendar" title stays:
   it replaced the Calendar / Wins board switch. Date range and Refresh stay
   visible too, otherwise this whole top strip would be empty. */
body.calendar-active #api-status { display: none !important; }

/* Suppress page-level scrollbar on these two full-page views */
body.team-chat-active,
body.calendar-active { overflow: hidden; }
body.team-chat-active .main,
body.calendar-active .main { overflow: hidden; height: 100vh; }
body.team-chat-active .team-chat-page {
  height: calc(100vh - 110px);
  padding-top: 4px;
}
body.team-chat-active .team-chat-page-head { padding-bottom: 10px; }
.team-chat-page-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.team-chat-page-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted, #64748b);
}
.team-chat-page-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  min-height: 0;
}
.team-chat-page-card .widget-chat-messages { flex: 1 1 auto; }

html.theme-dark .team-chat-page-title { color: #f5f5f5; }
html.theme-dark .team-chat-page-card {
  background: #0a0a0a;
  border-color: #262626;
}

/* ================================================================== */
/* Team chat — floating button (FAB) + slide-in popup                  */
/* ================================================================== */
.team-chat-fab {
  position: fixed;
  /* Default first-appearance spot: bottom-left of the sidebar, just above the
     account email. Still fully draggable — a dragged position is saved to
     localStorage and overrides this default on the next load. */
  left: 16px;
  bottom: 168px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(160deg, #94a3b8 0%, #3f4b5b 100%);
  color: #fff;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.30);
  z-index: 900;
  transition: box-shadow 0.15s ease;
  touch-action: none;
}
.team-chat-fab:hover {
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.55);
}
.team-chat-fab.is-dragging { cursor: grabbing; transition: none; }
body.team-chat-popup-open .team-chat-fab { display: none; }

.team-chat-fab-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.12s ease;
  z-index: 901;
}
.team-chat-fab:hover .team-chat-fab-close {
  opacity: 1;
  transform: scale(1);
}
.team-chat-fab-close:hover { background: #dc2626; }

.team-chat-popup {
  position: fixed;
  inset: 0;
  z-index: 950;
}
.team-chat-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.20);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.team-chat-popup.is-open .team-chat-popup-backdrop { opacity: 1; }

.team-chat-popup-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: rgba(30, 41, 59, 0.15);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-left: 1px solid rgba(100, 116, 139, 0.25);
  box-shadow:
    -12px 0 40px rgba(2, 6, 23, 0.30),
    inset 0 0 120px rgba(79, 70, 229, 0.08),
    inset 0 0 4px 2px rgba(255, 255, 255, 0.10);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4, 0.8, 0.2, 1);
}
/* Inner panels become transparent so the glass effect shows through */
.team-chat-popup-panel .widget-chat-messages {
  background: transparent;
}
.team-chat-popup-panel .widget-chat-form {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.team-chat-popup-panel .widget-chat-input {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: #f8fafc;
}
.team-chat-popup-panel .widget-chat-input::placeholder { color: rgba(248, 250, 252, 0.50); }
.team-chat-popup-panel .widget-chat-attach {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: rgba(248, 250, 252, 0.85);
}
.team-chat-popup-panel .widget-chat-attach:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
/* Header sits on top of the glass — readable white text */
.team-chat-popup-panel .team-chat-popup-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.team-chat-popup-panel .team-chat-popup-title {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
}
.team-chat-popup-panel .team-chat-popup-subtitle {
  color: rgba(248, 250, 252, 0.70);
}

/* Message bubbles inside the popup — glass-card style, a touch darker than
   the panel so they stand out without breaking the cohesive glass look. */
.team-chat-popup-panel .widget-chat-msg {
  background: rgba(30, 41, 59, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow:
    inset 0 0 40px rgba(79, 70, 229, 0.06),
    inset 0 0 4px 1px rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}
.team-chat-popup-panel .widget-chat-msg.is-me {
  background: rgba(30, 64, 175, 0.32);
  border-color: rgba(255, 255, 255, 0.30);
}
.team-chat-popup-panel .widget-chat-msg-author { color: #f1f5f9; }
.team-chat-popup-panel .widget-chat-msg-time { color: rgba(248, 250, 252, 0.55); }
.team-chat-popup-panel .widget-chat-msg-edited { color: rgba(248, 250, 252, 0.50); }
.team-chat-popup-panel .widget-chat-empty {
  color: rgba(248, 250, 252, 0.55);
}
.team-chat-popup.is-open .team-chat-popup-panel { transform: translateX(0); }

.team-chat-popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
}
.team-chat-popup-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.team-chat-popup-subtitle {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--muted, #64748b);
}
.team-chat-popup-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #94a3b8, #3f4b5b);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.4);
  box-shadow: 0 3px 8px rgba(255, 255, 255, 0.35);
  transition: transform 0.15s ease;
}
.team-chat-popup-close:hover { transform: scale(1.08); }
.team-chat-popup-panel .widget-chat-messages { flex: 1 1 auto; }

body.team-chat-popup-open #view-dashboard {
  filter: blur(2px) saturate(0.90);
  transition: filter 0.22s ease;
  pointer-events: none;
  user-select: none;
}

html.theme-dark .team-chat-popup-panel { background: #0a0a0a; }
html.theme-dark .team-chat-popup-head {
  border-bottom-color: #262626;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
}
html.theme-dark .team-chat-popup-title { color: #f5f5f5; }
html.theme-dark .team-chat-popup-backdrop { background: rgba(0, 0, 0, 0.45); }
html.theme-dark .widget-chat-form { background: #0a0a0a; border-top-color: #262626; }
html.theme-dark .widget-chat-input {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f5f5f5;
}

/* Per-theme blue crystal variations (only the gradient palette differs) */
.holiday-theme-christmas  { --c-light: #e2e8f0; --c-mid: #94a3b8; --c-dark: #1e293b; }
.holiday-theme-halloween  { --c-light: #cbd5e1; --c-mid: #475569; --c-dark: #1e293b; }
.holiday-theme-thanks     { --c-light: #e2e8f0; --c-mid: #94a3b8; --c-dark: #334155; }
.holiday-theme-newyear    { --c-light: #cbd5e1; --c-mid: #64748b; --c-dark: #334155; }
.holiday-theme-fourth     { --c-light: #cbd5e1; --c-mid: #475569; --c-dark: #1e293b; }
.holiday-theme-valentine  { --c-light: #e2e8f0; --c-mid: #cbd5e1; --c-dark: #334155; }
.holiday-theme-patrick    { --c-light: #e2e8f0; --c-mid: #94a3b8; --c-dark: #334155; }
.holiday-theme-patriotic  { --c-light: #e2e8f0; --c-mid: #64748b; --c-dark: #3f4b5b; }
.holiday-theme-default    { --c-light: #e2e8f0; --c-mid: #94a3b8; --c-dark: #334155; }

html.theme-dark .holiday-card {
  --c-light: #94a3b8;
  --c-mid: #3f4b5b;
  --c-dark: #1e293b;
  --c-shine: 0.55;
  --c-frost: 0.40;
  --c-frost-mid: 0.20;
  --c-frost-bot: 0.10;
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.6), 0 0 6px rgba(15, 23, 42, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 10px 28px rgba(255, 255, 255, 0.10),
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
html.theme-dark .holiday-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 10px 28px rgba(0, 0, 0, 0.6),
    0 3px 6px rgba(0, 0, 0, 0.4);
}
html.theme-dark .holiday-theme-christmas  { --c-light: #cbd5e1; --c-mid: #1e293b; --c-dark: #082f49; }
html.theme-dark .holiday-theme-halloween  { --c-light: #64748b; --c-mid: #334155; --c-dark: #1e293b; }
html.theme-dark .holiday-theme-thanks     { --c-light: #94a3b8; --c-mid: #3f4b5b; --c-dark: #1e293b; }
html.theme-dark .holiday-theme-newyear    { --c-light: #cbd5e1; --c-mid: #475569; --c-dark: #1e293b; }
html.theme-dark .holiday-theme-fourth     { --c-light: #64748b; --c-mid: #334155; --c-dark: #0a1633; }
html.theme-dark .holiday-theme-valentine  { --c-light: #cbd5e1; --c-mid: #64748b; --c-dark: #1e293b; }
html.theme-dark .holiday-theme-patrick    { --c-light: #cbd5e1; --c-mid: #0e7490; --c-dark: #083344; }
html.theme-dark .holiday-theme-patriotic  { --c-light: #94a3b8; --c-mid: #475569; --c-dark: #1e293b; }
html.theme-dark .holiday-theme-default    { --c-light: #94a3b8; --c-mid: #3f4b5b; --c-dark: #1e293b; }
html.theme-dark .holiday-card .holiday-date { opacity: 0.7; }

/* ================================================================== */
/* ================================================================== */
/* Account Ads widget (BMH / Event Hawk)                              */
/* ================================================================== */
.widget-account-ads-body {
  padding: 8px 4px 14px;
  max-height: 460px;
  overflow-y: auto;
}
.widget-aa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.widget-aa-empty {
  padding: 24px 10px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  margin: 0;
}
.widget-aa-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.widget-aa-row-top {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
}
.widget-aa-row:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
html.theme-dark .widget-aa-row {
  background: #0f172a;
  border-color: #334155;
}
html.theme-dark .widget-aa-row:hover {
  border-color: #64748b;
}
.widget-aa-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  border: 0;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.widget-aa-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
html.theme-dark .widget-aa-thumb { background: #1e293b; }
.widget-aa-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.widget-aa-thumb-fallback {
  font-size: 22px;
  opacity: 0.5;
}
.widget-aa-thumb-zoom {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.widget-aa-thumb:hover .widget-aa-thumb-zoom { opacity: 1; }
/* 4-column stat grid below the thumb+name row. Each stat is a small
   stack: value on top (Inter, semibold), label below (uppercase,
   tracked-out, dim). Centered cells with subtle dividers between them
   so the eye reads them as a unit. */
.widget-aa-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 6px 0 2px;
  border-top: 1px solid var(--border);
}
html.theme-dark .widget-aa-stats { border-top-color: #334155; }
.widget-aa-stat {
  text-align: center;
  padding: 4px 2px;
  position: relative;
}
.widget-aa-stat + .widget-aa-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--border);
  opacity: 0.6;
}
html.theme-dark .widget-aa-stat + .widget-aa-stat::before { background: #334155; }
.widget-aa-stat-val {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
html.theme-dark .widget-aa-stat-val { color: #f1f5f9; }
.widget-aa-stat-lbl {
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}
.widget-aa-stat-roas.is-good { color: #475569; }
.widget-aa-stat-roas.is-mid  { color: #475569; }
.widget-aa-stat-roas.is-bad  { color: #b91c1c; }
html.theme-dark .widget-aa-stat-roas.is-good { color: #cbd5e1; }
html.theme-dark .widget-aa-stat-roas.is-mid  { color: #e2e8f0; }
html.theme-dark .widget-aa-stat-roas.is-bad  { color: #f87171; }
.widget-aa-stats-empty {
  padding: 8px;
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
  border-top: 1px solid var(--border);
}
html.theme-dark .widget-aa-stats-empty { border-top-color: #334155; }
.widget-aa-info { min-width: 0; }
.widget-aa-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
html.theme-dark .widget-aa-name { color: #f1f5f9; }
.widget-aa-age {
  margin-top: 2px;
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.01em;
}
html.theme-dark .widget-aa-age { color: #94a3b8; }
.widget-aa-refresh {
  font-size: 14px;
  line-height: 1;
}

/* ================================================================== */
/* Top performer widget                                                */
/* ================================================================== */

.widget-top-performer-body {
  position: relative;
  text-align: center;
  padding: 4px 0 8px;
  overflow: hidden;
}
.widget-tp-trophy {
  font-size: 56px;
  filter: drop-shadow(0 4px 10px rgba(255, 255, 255, 0.4));
}
.widget-top-performer.is-playing .widget-tp-trophy {
  animation: tp-trophy-bob 0.7s ease-in-out 3;
}
@keyframes tp-trophy-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.08); }
}

/* Fireworks — two rockets that rise + burst on widget hover */
.widget-tp-fireworks {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.widget-top-performer-body > .widget-tp-trophy,
.widget-top-performer-body > .widget-tp-list { position: relative; z-index: 2; }

.widget-top-performer.is-playing .widget-tp-fireworks .fw         { animation: fw-rise-tp 1.4s ease-out forwards; }
.widget-top-performer.is-playing .widget-tp-fireworks .fw-2       { animation-delay: 0.45s; }
.widget-top-performer.is-playing .widget-tp-fireworks .fw::before { animation: fw-trail 0.65s ease-out forwards; }
.widget-top-performer.is-playing .widget-tp-fireworks .fw-2::before { animation-delay: 0.45s; }
.widget-top-performer.is-playing .widget-tp-fireworks .fw-spark   { animation: fw-burst 0.9s ease-out 0.55s forwards; }
.widget-top-performer.is-playing .widget-tp-fireworks .fw-2 .fw-spark { animation-delay: 1s; }

@keyframes fw-rise-tp {
  0%   { transform: translateY(0);     opacity: 1; }
  55%  { transform: translateY(-160px); opacity: 1; }
  100% { transform: translateY(-160px); opacity: 1; }
}
/* Podium list — top 1 (gold) / top 2 (silver) / top 3 (bronze) */
.widget-tp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 0 8px;
}
.widget-tp-empty { color: var(--muted); font-size: 14px; padding: 18px 0; }
.widget-tp-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.widget-tp-row:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10); background: rgba(255, 255, 255, 0.85); }
.widget-tp-rank {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 2px 6px rgba(15, 23, 42, 0.20);
}
.widget-tp-rank-gold   { background: linear-gradient(160deg, #fde047 0%, #94a3b8 50%, #475569 100%); }
.widget-tp-rank-silver { background: linear-gradient(160deg, #f1f5f9 0%, #cbd5e1 50%, #64748b 100%); }
.widget-tp-rank-bronze { background: linear-gradient(160deg, #fcd9b6 0%, #64748b 50%, #7c2d12 100%); }
.widget-tp-row-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.widget-tp-row-roas {
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(90deg, #94a3b8, #94a3b8, #ef4444);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.widget-tp-row-gold   { border-color: rgba(255, 255, 255, 0.45); background: linear-gradient(180deg, rgba(254, 243, 199, 0.65), rgba(255, 255, 255, 0.55)); }
.widget-tp-row-silver { border-color: rgba(148, 163, 184, 0.45); }
.widget-tp-row-bronze { border-color: rgba(255, 255, 255, 0.40); }

.widget-top-performer.widget-tp-celebrate.is-playing .widget-tp-trophy {
  animation: tp-trophy-celebrate 0.7s ease-in-out 3;
}
@keyframes tp-trophy-celebrate {
  0%, 100% { transform: rotate(-8deg) scale(1.05); }
  50%      { transform: rotate(8deg) scale(1.14); }
}

html.theme-dark .widget-tp-row {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(255, 255, 255, 0.10);
}
html.theme-dark .widget-tp-row:hover { background: rgba(15, 23, 42, 0.65); }
html.theme-dark .widget-tp-row-name { color: #f5f5f5; }
html.theme-dark .widget-tp-row-gold { background: linear-gradient(180deg, rgba(120, 53, 15, 0.40), rgba(15, 23, 42, 0.45)); }

/* ================================================================== */
/* Apollo 1 — Mission Control (futuristic, theme-aware)                */
/* Light mode: pale blueprint with cyan accents.                       */
/* Dark mode: deep space with neon glows.                              */
/* ================================================================== */
#view-apollo {
  /* Light mode (default) — blueprint feel, blue palette */
  --ap-bg: #f1f5f9;
  --ap-bg-2: #ffffff;
  --ap-panel: rgba(255, 255, 255, 0.80);
  --ap-panel-strong: rgba(255, 255, 255, 0.95);
  --ap-border: rgba(255, 255, 255, 0.18);
  --ap-border-strong: rgba(255, 255, 255, 0.42);
  --ap-grid-line: rgba(255, 255, 255, 0.08);
  --ap-cyan: #64748b;
  --ap-cyan-dim: rgba(255, 255, 255, 0.65);
  --ap-cyan-glow: rgba(255, 255, 255, 0.18);
  --ap-glow-1: rgba(255, 255, 255, 0.10);
  --ap-glow-2: rgba(255, 255, 255, 0.06);
  --ap-green: #475569;
  --ap-amber: #475569;
  --ap-red: #b91c1c;
  --ap-text: #0f172a;
  --ap-text-dim: #64748b;
  --ap-scanline: rgba(255, 255, 255, 0.04);
  --ap-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}
html.theme-dark #view-apollo {
  /* One frosted-glass material for the entire Apollo shell (css.glass recipe),
     driven from these tokens so every panel, card, tag and hairline downstream
     converts at once instead of rule by rule. The electric-blue accent that
     used to run through all of it is now neutral white — --ap-cyan is kept as
     a NAME (too many call sites to rename) but no longer resolves to a colour.
     --ap-red survives on purpose: genuine error states are the one place
     colour still carries meaning. */
  --ap-bg: #050a18;
  --ap-bg-2: #111827;
  --ap-panel: rgba(182, 182, 182, 0.36);
  --ap-panel-strong: rgba(182, 182, 182, 0.36);
  --ap-border: rgba(255, 255, 255, 0.28);
  --ap-border-strong: rgba(255, 255, 255, 0.50);
  --ap-grid-line: rgba(255, 255, 255, 0.08);
  --ap-cyan: #f1f5f9;
  --ap-cyan-dim: rgba(241, 245, 249, 0.75);
  --ap-cyan-glow: rgba(255, 255, 255, 0.22);
  --ap-glow-1: rgba(255, 255, 255, 0.08);
  --ap-glow-2: rgba(255, 255, 255, 0.05);
  /* Amber and green retired per the design rule (no yellow/green anywhere);
     the states that used them now read as plain glass. */
  --ap-green: #f1f5f9;
  --ap-amber: #f1f5f9;
  --ap-red: #f87171;
  --ap-text: #f1f5f9;
  --ap-text-dim: #cbd5e1;
  --ap-scanline: rgba(255, 255, 255, 0.05);
}
/* "Andy is gone" countdown pill — sits at the left of the date-range row */
/* Header "Now / Up next" widget — two calendar cells side by side, single row
   so it matches the height of the other header pills/controls. */
.cal-nownext {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 7px 6px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(238, 242, 255, 0.9), rgba(248, 250, 252, 0.6));
  border: 1px solid rgba(199, 210, 254, 0.7);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cal-nownext:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255, 255, 255, 0.12); }
.cal-nownext:active { transform: translateY(0); }
.cal-nownext-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  min-width: 0;
}
.cal-nownext-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9.5px;
  font-weight: 800;
  color: #64748b;
  flex: none;
}
.cal-nownext-next .cal-nownext-label { color: #64748b; }
.cal-nownext-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  flex: none;
}
/* Pulse the green "live" dot only when a meeting is actually happening now. */
.cal-nownext.has-now .cal-nownext-dot {
  background: #94a3b8;
  box-shadow: 0 0 7px #94a3b8;
  animation: cnn-pulse 1.4s ease-in-out infinite;
}
@keyframes cnn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}
.cal-nownext-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.cal-nownext-sub {
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  flex: none;
}
.cal-nownext-sub:empty { display: none; }
.cal-nownext-divider {
  width: 1px;
  align-self: stretch;
  margin: 1px 0;
  background: rgba(148, 163, 184, 0.35);
}
html.theme-dark .cal-nownext {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.6));
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html.theme-dark .cal-nownext-label { color: #cbd5e1; }
html.theme-dark .cal-nownext-next .cal-nownext-label { color: #94a3b8; }
html.theme-dark .cal-nownext-title { color: #e2e8f0; }
html.theme-dark .cal-nownext-sub { color: #94a3b8; }
html.theme-dark .cal-nownext-divider { background: rgba(148, 163, 184, 0.22); }

/* Easter-egg: egg → hatch → chick flies away */
.andy-chick-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.andy-chick-stage {
  position: relative;
  width: 120px;
  height: 120px;
}
.andy-chick-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 96px;
  line-height: 1;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  filter: drop-shadow(0 8px 24px rgba(15, 23, 42, 0.25));
}
/* The hawk uses a real PNG (purple/magenta silhouette). The black backdrop
   in the image is removed via `mix-blend-mode: screen`, leaving just the
   colored silhouette floating across the page. */
img.andy-chick-hawk {
  width: 220px;
  height: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 12px 32px rgba(255, 255, 255, 0.55));
}
.andy-chick-egg   { animation: andy-egg-anim   1.5s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
.andy-chick-hatch { animation: andy-hatch-anim 1.0s ease-out 1.5s forwards; }
/* Chick appears, then EVOLVES into the hawk (chick fades while scaling up,
   hawk fades in scaling from chick size). */
.andy-chick-chick { animation: andy-chick-anim 2.0s ease-in-out 2.5s forwards; }
.andy-chick-hawk  { animation: andy-hawk-anim  2.5s cubic-bezier(0.5, 0.0, 0.6, 1.0) 4.0s forwards; }

@keyframes andy-egg-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  35%  { transform: translate(-50%, -50%) scale(1.0) rotate(-10deg); }
  50%  { transform: translate(-50%, -50%) scale(1.0) rotate(10deg); }
  65%  { transform: translate(-50%, -50%) scale(1.05) rotate(-12deg); }
  80%  { transform: translate(-50%, -50%) scale(1.05) rotate(12deg); }
  92%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes andy-hatch-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  60%  { transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.0); }
}
@keyframes andy-chick-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  /* Slight excited bob */
  35%  { transform: translate(-50%, -55%) scale(1.0); }
  50%  { transform: translate(-50%, -50%) scale(1.0); }
  /* Glow + grow as it transforms */
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.85)) brightness(1.3); }
  85%  { opacity: 0.6; transform: translate(-50%, -50%) scale(1.4); filter: drop-shadow(0 0 24px rgba(251, 191, 36, 0.95)) brightness(1.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes andy-hawk-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.4); filter: drop-shadow(0 0 28px rgba(251, 191, 36, 0.85)) brightness(1.4); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.6); filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.55)); }
  /* Hawk settles for a beat then takes off */
  30%  { transform: translate(-50%, -50%) scale(1.5); filter: drop-shadow(0 8px 24px rgba(15, 23, 42, 0.30)); }
  40%  { transform: translate(-50%, -55%) scale(1.5); }
  /* Fly away — sweeping arc to the upper-right */
  60%  { transform: translate(15vw, -25vh) scale(1.3) rotate(-12deg); }
  100% { opacity: 0; transform: translate(70vw, -85vh) scale(0.6) rotate(-30deg); }
}

/* Apollo is full-page — eliminate the .main wrapper's outer padding so the
   shell hugs the viewport edges. The background (gradient + stars) extends
   across the FULL viewport including behind the sidebar; the sidebar then
   floats over it as a glassmorphism panel. */
body.apollo-active .main-header { display: none !important; }
body.apollo-active #view-apollo {
  margin-top: 0;
  padding-top: 0;
}
body.apollo-active .main {
  padding: 0 !important;
  gap: 0 !important;
}
body.apollo-active #view-dashboard.active {
  background: transparent;
}
/* Apollo gradient lives on the body so it covers the viewport behind the
   sidebar too. */
body.apollo-active {
  background:
    radial-gradient(1200px 800px at 0% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(160deg, #111827, #050a18) !important;
}
/* Light-mode flavour of the body gradient (lighter blueprint feel). */
html:not(.theme-dark) body.apollo-active {
  background:
    radial-gradient(1200px 800px at 0% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(160deg, #ffffff, #f1f5f9) !important;
}
/* The <html> root itself has no background of its own — only body does.
   `scrollbar-gutter: stable` (see top of file) reserves a strip outside
   body's own box for the scrollbar gutter, and that strip (plus any
   sub-pixel rounding gap) falls back to the browser's default white
   canvas, showing as a thin white bar/line at the page edge. Give html
   the same navy whenever Apollo is active so there's nothing left to
   show through. */
html:has(body.apollo-active) { background: #050a18 !important; }
html:not(.theme-dark):has(body.apollo-active) { background: #f1f5f9 !important; }
/* Stars float at the body level so they appear behind the sidebar too. */
body.apollo-active .apollo-stars {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1;
}
body.apollo-active .apollo-grid-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0;
}
/* The shell becomes transparent so the body's full-viewport gradient shows
   through. The shell still contains the Apollo content (header, KPIs, etc.). */
body.apollo-active #view-apollo > .apollo-shell {
  border-radius: 0;
  min-height: 100vh;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* Sidebar → glassmorphism overlay. Keep position: sticky from the base
   .sidebar rule so the sidebar stays pinned when scrolling — overriding it
   to relative here breaks the sticky behavior in Apollo mode. */
body.apollo-active .sidebar {
  background: rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(25px) saturate(120%);
  backdrop-filter: blur(25px) saturate(120%);
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 16px 60px rgba(0, 0, 0, 0.30);
  z-index: 5;
}
/* Light-mode sidebar tint — slightly cooler/whiter glass. */
html:not(.theme-dark) body.apollo-active .sidebar {
  background: rgba(255, 255, 255, 0.45) !important;
  border-right-color: rgba(255, 255, 255, 0.15) !important;
}
/* Sidebar footer (email + theme toggle + Sign out + Manage tokens) — match
   the glass aesthetic in both modes by killing the blue-50/blue-200 fills. */
body.apollo-active .sidebar-footer {
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}
body.apollo-active .auth-userbox {
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
body.apollo-active .auth-userbox-email { color: rgba(255, 255, 255, 0.65); }
body.apollo-active .sidebar-footer .btn,
body.apollo-active .sidebar-footer .btn-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.90) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.apollo-active .sidebar-footer .btn:hover,
body.apollo-active .sidebar-footer .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
/* Theme toggle pill blends in too */
body.apollo-active .theme-toggle {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.apollo-active .theme-toggle-btn { color: rgba(255, 255, 255, 0.75) !important; }
body.apollo-active .theme-toggle-btn:hover { color: rgba(255, 255, 255, 0.95) !important; }
body.apollo-active .theme-toggle-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

/* Light-mode tweaks: darker text + subtle blue glass on footer items */
html:not(.theme-dark) body.apollo-active .auth-userbox-email { color: rgba(15, 23, 42, 0.65); }
html:not(.theme-dark) body.apollo-active .sidebar-footer .btn,
html:not(.theme-dark) body.apollo-active .sidebar-footer .btn-ghost,
html:not(.theme-dark) body.apollo-active .theme-toggle {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: rgba(15, 23, 42, 0.85) !important;
}
html:not(.theme-dark) body.apollo-active .sidebar-footer .btn:hover,
html:not(.theme-dark) body.apollo-active .sidebar-footer .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
html:not(.theme-dark) body.apollo-active .theme-toggle-btn { color: rgba(15, 23, 42, 0.65) !important; }
html:not(.theme-dark) body.apollo-active .theme-toggle-btn:hover { color: rgba(15, 23, 42, 0.95) !important; }
html:not(.theme-dark) body.apollo-active .theme-toggle-thumb {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
}
html:not(.theme-dark) body.apollo-active .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.15) !important; }
html:not(.theme-dark) body.apollo-active .auth-userbox { border-bottom-color: rgba(255, 255, 255, 0.15) !important; }

.apollo-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px 28px 24px;
  border-radius: 18px;
  background:
    radial-gradient(1200px 800px at 0% 0%, var(--ap-glow-1), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, var(--ap-glow-2), transparent 60%),
    linear-gradient(160deg, var(--ap-bg-2), var(--ap-bg));
  border: 1px solid var(--ap-border);
  box-shadow:
    inset 0 1px 0 var(--ap-cyan-glow),
    0 0 0 1px var(--ap-grid-line),
    0 24px 60px rgba(15, 23, 42, 0.10);
  color: var(--ap-text);
  min-height: calc(100vh - 60px);
  overflow: hidden;
}

/* Constellation page — pure black space (no navy/blue tint). */
html.theme-dark .apollo-shell-control {
  background: #000000 !important;
}

/* Searchable client picker */
.apollo-client-picker { position: relative; }
.apollo-client-picker > input {
  width: 100%;
  padding: 10px 38px 10px 14px;
  border: 1px solid var(--ap-border);
  border-radius: 8px;
  font-family: var(--ap-mono);
  font-size: 13px;
  background: var(--ap-bg);
  color: var(--ap-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apollo-client-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ap-text-dim);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.apollo-client-clear:hover {
  background: color-mix(in srgb, var(--ap-cyan) 14%, transparent);
  color: var(--ap-cyan);
}
.apollo-client-clear[hidden] { display: none; }
.apollo-client-picker > input::placeholder { color: var(--ap-text-dim); }
.apollo-client-picker > input:focus {
  outline: none;
  border-color: var(--ap-border-strong);
  box-shadow: 0 0 0 3px var(--ap-cyan-glow);
}
.apollo-client-suggest {
  position: fixed;
  z-index: 99999;
  background: #ffffff;
  border: 1px solid var(--ap-border-strong);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.20), 0 0 24px var(--ap-cyan-glow);
  max-height: 320px;
  overflow-y: auto;
}
html.theme-dark .apollo-client-suggest { background: #111827; }
.apollo-client-suggest[hidden] { display: none; }
.apollo-client-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--ap-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ap-text);
  background: var(--ap-bg-2);
  border-bottom: 1px solid var(--ap-grid-line);
  transition: background 0.10s ease;
}
html.theme-dark .apollo-client-suggest-item { background: #111827; color: #e2e8f0; }
.apollo-client-suggest-item:last-child { border-bottom: none; }
.apollo-client-suggest-item:hover { background: #f1f5f9; }
html.theme-dark .apollo-client-suggest-item:hover { background: #122036; }
.apollo-client-suggest-item.is-active { background: #e2e8f0; color: #3f4b5b; font-weight: 700; }
html.theme-dark .apollo-client-suggest-item.is-active { background: #334155; color: #e2e8f0; }
.apollo-client-suggest-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apollo-client-suggest-lvl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ap-cyan-dim);
  background: color-mix(in srgb, var(--ap-cyan) 8%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--ap-border);
}
.apollo-client-suggest-empty {
  padding: 14px;
  text-align: center;
  font-family: var(--ap-mono);
  font-size: 11px;
  color: var(--ap-text-dim);
}
html.theme-dark .apollo-shell {
  box-shadow:
    inset 0 1px 0 var(--ap-cyan-glow),
    0 0 0 1px var(--ap-grid-line),
    0 24px 60px rgba(0, 0, 0, 0.50);
}
.apollo-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ap-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ap-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
}
/* Twinkling starfield — small circular dots that fade in and out at random
   intervals across the apollo-shell. JS injects ~60–120 .apollo-star spans
   based on the shell size; CSS handles the twinkle animation. */
.apollo-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.apollo-star {
  position: absolute;
  border-radius: 50%;
  /* Light mode → light blue stars; dark mode override below switches to white. */
  background: #cbd5e1;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 14px rgba(255, 255, 255, 0.55),
    0 0 28px rgba(255, 255, 255, 0.30);
  opacity: 0;
  animation-name: apollo-twinkle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
html.theme-dark .apollo-star {
  background: #ffffff;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 14px rgba(255, 255, 255, 0.55),
    0 0 28px rgba(255, 255, 255, 0.30);
}
@keyframes apollo-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 1; transform: scale(1.4); }
}
.apollo-shell > *:not(.apollo-grid-bg):not(.apollo-stars) {
  position: relative;
  z-index: 1;
}
.apollo-shell > .apollo-controls:not(.apollo-grid-bg):not(.apollo-stars) {
  z-index: 30;
}
.apollo-shell-control { gap: 20px; }

/* ----- Header ----- */
.apollo-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-height: 38px;
  padding-bottom: 14px;
}
.apollo-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  /* Push the title down so it sits below the MISSION CONTROL / SYSTEM ONLINE
     pills that are absolute-positioned at the top corners. */
  margin-top: 36px;
}
.apollo-logo {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.apollo-logo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--ap-cyan);
  box-shadow:
    0 0 16px var(--ap-cyan-glow),
    inset 0 0 12px var(--ap-cyan-glow);
  animation: apollo-ring-pulse 2.4s ease-in-out infinite;
}
.apollo-logo-core {
  position: relative;
  z-index: 1;
  font-family: var(--ap-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ap-cyan);
  text-shadow: 0 0 12px var(--ap-cyan-glow);
}
@keyframes apollo-ring-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.apollo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ap-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Neutral to match the Apollo search bar at the other end of the topbar. */
  color: #f1f5f9;
  margin-bottom: 0;
  padding: 5px 11px;
  /* Same frosted-glass recipe as the Apollo search bar across the topbar, so
     the two ends of that row read as one material. */
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(182, 182, 182, 0.36);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  box-sizing: content-box;
}
html.theme-dark .apollo-eyebrow { background: rgba(182, 182, 182, 0.36); }
.apollo-eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f1f5f9;
  box-shadow: 0 0 10px rgba(241, 245, 249, 0.8);
  animation: apollo-pulse 1.6s ease-in-out infinite;
}
.apollo-eyebrow-sep { opacity: 0.5; margin: 0 1px; }
@keyframes apollo-eyebrow-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Eyebrow doubles as the "About Apollo" trigger — keep it visually
   identical to the original; only add pointer + inherit fonts so the
   <button> element doesn't override the .apollo-eyebrow styles. */
.apollo-eyebrow-btn {
  cursor: pointer;
}

/* =========================================================================
   APOLLO ABOUT MODAL — mission + version log. Opened from the eyebrow.
   Two themes (light + dark) matched to the Apollo shell aesthetic.
   The modal lives outside #view-apollo, so re-declare the --ap-* vars
   here (same values as #view-apollo) so children resolve correctly in
   both themes.
   ========================================================================= */
.modal.apollo-about-modal {
  z-index: 60;
  --ap-bg: #f1f5f9;
  --ap-bg-2: #ffffff;
  --ap-panel: rgba(255, 255, 255, 0.80);
  --ap-panel-strong: rgba(255, 255, 255, 0.95);
  --ap-border: rgba(255, 255, 255, 0.18);
  --ap-border-strong: rgba(255, 255, 255, 0.42);
  --ap-grid-line: rgba(255, 255, 255, 0.08);
  --ap-cyan: #64748b;
  --ap-cyan-dim: rgba(255, 255, 255, 0.65);
  --ap-cyan-glow: rgba(255, 255, 255, 0.18);
  --ap-glow-1: rgba(255, 255, 255, 0.10);
  --ap-glow-2: rgba(255, 255, 255, 0.06);
  --ap-text: #0f172a;
  --ap-text-dim: #64748b;
  --ap-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}
html.theme-dark .modal.apollo-about-modal {
  /* Translucent blues (not near-black) so the panel + cards read as blue crystal
     and the constellation glows through. */
  --ap-bg: rgba(12, 20, 44, 0.55);
  --ap-bg-2: rgba(22, 34, 66, 0.55);
  --ap-panel: rgba(30, 48, 92, 0.42);
  --ap-panel-strong: rgba(30, 48, 92, 0.60);
  --ap-border: rgba(255, 255, 255, 0.20);
  --ap-border-strong: rgba(255, 255, 255, 0.45);
  --ap-grid-line: rgba(255, 255, 255, 0.06);
  --ap-cyan: #cbd5e1;
  --ap-cyan-dim: rgba(255, 255, 255, 0.55);
  --ap-cyan-glow: rgba(255, 255, 255, 0.35);
  --ap-glow-1: rgba(255, 255, 255, 0.10);
  --ap-glow-2: rgba(255, 255, 255, 0.06);
  /* Neutral, not the blue-tinted white the rest of the Apollo shell uses —
     nothing in this modal carries a colour accent any more. */
  --ap-text: #f1f5f9;
  --ap-text-dim: #cbd5e1;
}
.modal.apollo-about-modal .modal-backdrop {
  /* Darker than it was: every surface in this modal is now the light 36%
     frosted glass, and that only reads as glass (and stays legible) against a
     dimmed constellation rather than a bright one. */
  background: rgba(5, 10, 24, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Keep the panel clear of the floating dock (dock sits at z-index 80, bottom ~26px). */
.modal.apollo-about-modal.open { padding: 24px 0 120px; box-sizing: border-box; }
.apollo-about-panel {
  width: min(680px, 94vw);
  max-height: calc(100vh - 168px);
  padding: 28px 28px 24px;
  /* One material for the whole modal: the css.glass recipe, same as the dock,
     the Apollo search bar and the APOLLO badge. Replaces the blue-crystal
     gradients and cyan inner glow this panel used to carry. */
  border-radius: 16px;
  background: rgba(182, 182, 182, 0.36);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  color: var(--ap-text, #0f172a);
  overflow-y: auto;
  position: relative;
}
html.theme-dark .apollo-about-panel {
  /* Beats `html.theme-dark .modal-panel { background:#0a0a0a }` (same
     specificity, defined later), which would otherwise paint it near-black. */
  background: rgba(182, 182, 182, 0.36);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.apollo-about-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(182, 182, 182, 0.36);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  color: #f1f5f9;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.apollo-about-close:hover {
  background: rgba(210, 210, 210, 0.46);
  color: #ffffff;
  transform: scale(1.05);
}

.apollo-about-header {
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ap-grid-line, rgba(15, 23, 42, 0.06));
  margin-bottom: 20px;
}
.apollo-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ap-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #f1f5f9;
  padding: 5px 12px 5px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(182, 182, 182, 0.36);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}
.apollo-about-title {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* Was a text-clipped gradient fading into cyan. Plain neutral now. */
  color: var(--ap-text, #0f172a);
}
.apollo-about-tagline {
  margin: 0;
  font-size: 14px;
  color: var(--ap-text-dim, #64748b);
}

.apollo-about-section { margin-bottom: 20px; }
.apollo-about-section:last-child { margin-bottom: 0; }
.apollo-about-section p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ap-text, #0f172a);
}
.apollo-about-section p strong {
  /* Emphasis carried by weight alone now, not a cyan accent. */
  color: var(--ap-text, #0f172a);
  font-weight: 700;
}
.apollo-about-section-title {
  margin: 0 0 8px;
  font-family: var(--ap-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-text-dim, #64748b);
}

.apollo-about-mission {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(182, 182, 182, 0.36);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Changelog — vertical timeline of versions */
.apollo-version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apollo-version {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(182, 182, 182, 0.36);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.apollo-version:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.18);
}
/* Current version reads as the same glass, just brighter — no cyan tint. */
.apollo-version.is-current {
  background: rgba(210, 210, 210, 0.46);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.14);
}
.apollo-version-tag {
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 16px;
  font-family: var(--ap-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f1f5f9;
  background: rgba(182, 182, 182, 0.36);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}
.apollo-version.is-current .apollo-version-tag {
  color: #ffffff;
  background: rgba(225, 225, 225, 0.5);
  border-color: rgba(255, 255, 255, 0.55);
}
.apollo-version-body { min-width: 0; }
.apollo-version-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ap-text, #0f172a);
}
.apollo-version-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ap-text-dim, #475569);
}
/* The version cards used to be dark navy, where a mid grey read fine. On the
   light frosted glass it sits too close to the fill, so the body copy moves up
   to near-white. */
html.theme-dark .apollo-version-body p { color: #f8fafc; }
html.theme-dark .apollo-about-tagline { color: #e2e8f0; }
html.theme-dark .apollo-version-title { color: #ffffff; }

@media (max-width: 520px) {
  .apollo-version {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .apollo-version-tag { justify-self: start; }
}

/* Modern title — subtle gradient from text → cyan, plus a thin underline
   accent that fades in. */
.apollo-title {
  position: relative;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-block;
  /* Fully invisible base — no fill, no stroke. The shine alone draws the
     letters as it sweeps through, then they vanish again. */
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Overlay: white-stroked copy masked to a thin moving band so only the
   stroke under the band is rendered — when the band crosses, the outline
   appears for a moment, then fades back to nothing. */
.apollo-title::after {
  content: 'Apollo 3';
  position: absolute;
  inset: 0;
  font: inherit;
  letter-spacing: inherit;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.4px #ffffff;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.55) 47%,
    black 50%,
    rgba(0, 0, 0, 0.55) 53%,
    transparent 60%,
    transparent 100%
  );
  mask-image: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.55) 47%,
    black 50%,
    rgba(0, 0, 0, 0.55) 53%,
    transparent 60%,
    transparent 100%
  );
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 260% 0;
  mask-position: 260% 0;
  animation: apollo-title-shine 4.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes apollo-title-shine {
  0%, 5%  { -webkit-mask-position: 260% 0; mask-position: 260% 0; }
  100%    { -webkit-mask-position: -160% 0; mask-position: -160% 0; }
}
.apollo-subtitle {
  margin: 8px auto 0;
  font-size: 12.5px;
  color: var(--ap-text-dim);
  max-width: 540px;
  letter-spacing: 0.01em;
}

.apollo-status-block {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.apollo-system-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  font-family: var(--ap-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--ap-green);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(21, 128, 61, 0.06);
  box-sizing: border-box;
  margin: 0;
  vertical-align: middle;
  white-space: nowrap;
}
html.theme-dark .apollo-system-indicator { background: rgba(0, 255, 136, 0.06); }
.apollo-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ap-green);
  box-shadow: 0 0 12px currentColor;
  animation: apollo-pulse 1.6s ease-in-out infinite;
}
@keyframes apollo-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.50; transform: scale(0.8); }
}
.apollo-status {
  font-family: var(--ap-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ap-text-dim);
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--ap-panel);
  border: 1px solid var(--ap-border);
  min-width: 240px;
  text-align: center;
}
.apollo-status:empty { display: none; }
.apollo-status-ok    { color: var(--ap-green); border-color: currentColor; background: color-mix(in srgb, var(--ap-green) 8%, transparent); }
.apollo-status-error { color: var(--ap-red);   border-color: currentColor; background: color-mix(in srgb, var(--ap-red) 8%, transparent); }

/* Row of status pills (RIP Andy + System online) sitting side-by-side. */
.apollo-system-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* The RIP Andy pill reuses the SYSTEM ONLINE pill shell but is a button. */
.apollo-rip-pill {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-transform: none;
  color: var(--ap-green);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.apollo-rip-pill:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--ap-green) 14%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--ap-green) 35%, transparent);
}
.apollo-rip-pill:active { transform: translateY(0); }
.apollo-rip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  line-height: 0;
}
.apollo-rip-ico svg { display: block; }
html.theme-dark .apollo-rip-pill { background: rgba(0, 255, 136, 0.06); }

/* RIP Andy memorial popup. */
.rip-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rip-modal.is-open { display: flex; animation: rip-fade .18s ease; }
.rip-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rip-modal-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(560px, 92vw);
  max-height: 92vh;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: rip-pop .22s cubic-bezier(.2, .8, .2, 1);
}
.rip-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.rip-modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.01em;
}
.rip-modal-x {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-subtle, #f1f5f9);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.rip-modal-x:hover { background: var(--border, #e5e7eb); }
.rip-modal-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  background: #0f172a;
}
.rip-modal-img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.rip-modal-foot {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.rip-modal-foot .btn,
.rip-modal-foot .rip-modal-dl {
  flex: 0 0 auto;
  min-width: 160px;
  height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  box-sizing: border-box;
  line-height: 1;
  cursor: pointer;
}
@keyframes rip-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rip-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----- KPI strip inside Apollo (mission-control style) ----- */
.apollo-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.apollo-kpi {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  background: var(--ap-panel);
  box-shadow: inset 0 1px 0 var(--ap-cyan-glow), 0 0 24px var(--ap-cyan-glow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.apollo-kpi:hover {
  border-color: var(--ap-border-strong);
  transform: translateY(-1px);
}
.apollo-kpi.copied::after {
  content: "Copied";
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #0a0a0a;
  background: var(--ap-cyan);
  padding: 1px 8px;
  border-radius: 999px;
  pointer-events: none;
  animation: kpi-copied-pulse 0.9s ease forwards;
}
.apollo-kpi-label {
  font-family: var(--ap-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ap-cyan-dim);
  margin-bottom: 6px;
}
.apollo-kpi-value {
  font-family: var(--ap-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ap-text);
  font-variant-numeric: tabular-nums;
}
.apollo-kpi-sub {
  margin-top: 6px;
  font-family: var(--ap-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ap-text-dim);
}
.apollo-kpi-highlight {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ap-cyan) 14%, transparent), var(--ap-panel));
  border-color: var(--ap-border-strong);
}
.apollo-kpi-highlight .apollo-kpi-value { color: var(--ap-cyan); text-shadow: 0 0 12px var(--ap-cyan-glow); }

/* ----- Controls bar ----- */
.apollo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--ap-panel);
  border: 1px solid var(--ap-border);
  position: relative;
  z-index: 30;
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.04);
}
.apollo-control-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.apollo-control-field-grow { flex: 1 1 280px; }
.apollo-control-field-wheel { min-width: 220px; }

/* Trigger button — looks like a small dropdown pill. The wheel popup opens
   below it on click. */
.apollo-wheel-wrapper { position: relative; z-index: 40; }
.apollo-wheel-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ap-cyan) 5%, transparent);
  color: var(--ap-text);
  font-family: var(--ap-mono);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.apollo-wheel-trigger:hover { border-color: var(--ap-border-strong); }
.apollo-wheel-trigger.is-open {
  border-color: var(--ap-border-strong);
  box-shadow: 0 0 0 3px var(--ap-cyan-glow);
}
.apollo-wheel-trigger-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apollo-wheel-trigger-chev { color: var(--ap-cyan-dim); flex-shrink: 0; transition: transform 0.18s ease; }
.apollo-wheel-trigger.is-open .apollo-wheel-trigger-chev { transform: rotate(180deg); color: var(--ap-cyan); }

.apollo-wheel-popup {
  position: fixed;
  z-index: 9999;
  border-radius: 12px;
  background: var(--ap-bg-2);
  border: 1px solid var(--ap-border-strong);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.20), 0 0 24px var(--ap-cyan-glow);
  padding: 6px;
  animation: apollo-wheel-pop 0.16s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform-origin: top center;
  max-height: 320px;
  overflow-y: auto;
}
.apollo-wheel-popup[hidden] { display: none; }
@keyframes apollo-wheel-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Plain dropdown list — no wheel, no scroll-snap. */
.apollo-wheel { position: relative; outline: none; }
.apollo-wheel-track { display: block; }
.apollo-wheel-highlight { display: none; }
.apollo-wheel-item {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 8px;
  font-family: var(--ap-mono);
  font-size: 13px;
  color: var(--ap-text);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.apollo-wheel-item:hover { background: color-mix(in srgb, var(--ap-cyan) 12%, transparent); }
.apollo-wheel-item.is-selected {
  background: color-mix(in srgb, var(--ap-cyan) 18%, transparent);
  color: var(--ap-cyan);
  font-weight: 700;
}
.apollo-wheel-item.is-selected::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ap-cyan);
  margin-left: auto;
  box-shadow: 0 0 8px var(--ap-cyan-glow);
}
.apollo-control-field > span {
  font-family: var(--ap-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ap-cyan-dim);
}
.apollo-control-field select,
.apollo-control-field input {
  padding: 10px 14px;
  border: 1px solid var(--ap-border);
  border-radius: 8px;
  font-family: var(--ap-mono);
  font-size: 13px;
  background: var(--ap-bg);
  color: var(--ap-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apollo-control-field select:focus,
.apollo-control-field input:focus {
  outline: none;
  border-color: var(--ap-border-strong);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.apollo-control-field select option { background: var(--ap-bg-2); color: var(--ap-text); }
.apollo-refresh-btn {
  padding: 10px 18px;
  border: 1px solid var(--ap-border-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ap-cyan) 12%, transparent);
  color: var(--ap-cyan);
  font-family: var(--ap-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 0 16px var(--ap-cyan-glow), inset 0 1px 0 var(--ap-cyan-glow);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.apollo-refresh-btn:hover {
  filter: brightness(1.10);
  transform: translateY(-1px);
  box-shadow: 0 0 24px var(--ap-cyan-glow), inset 0 1px 0 var(--ap-cyan-glow);
}

.apollo-empty {
  padding: 48px 16px;
  text-align: center;
  font-family: var(--ap-mono);
  font-size: 12px;
  color: var(--ap-text-dim);
  letter-spacing: 0.04em;
}

/* ----- Table ----- */
.apollo-table-wrap {
  border-radius: 12px;
  background: var(--ap-panel);
  border: 1px solid var(--ap-border);
  overflow: hidden;
  box-shadow: inset 0 0 32px rgba(255, 255, 255, 0.04);
}
.apollo-table-scroll { overflow-x: auto; }
.apollo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.apollo-table th {
  text-align: center;
  font-family: var(--ap-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ap-cyan-dim);
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--ap-cyan-glow), transparent);
  border-bottom: 1px solid var(--ap-border);
  white-space: nowrap;
}
.apollo-table th.apollo-th-name { text-align: left; }
.apollo-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ap-grid-line);
  vertical-align: middle;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ap-text);
  font-family: var(--ap-mono);
  font-size: 13px;
}
.apollo-table td.apollo-td-name { text-align: left; vertical-align: top; }
.apollo-table tr:last-child td { border-bottom: none; }
.apollo-table tr.apollo-row { transition: background 0.15s ease; }
.apollo-table tr.apollo-row:hover td {
  background: color-mix(in srgb, var(--ap-cyan) 6%, transparent);
}
/* Name cell layout — toggle + (thumbnail) + name/subtitle stack */
.apollo-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.apollo-name-block { display: flex; flex-direction: column; min-width: 0; }
.apollo-name-block strong {
  color: var(--ap-text);
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
}
.apollo-name-sub {
  font-family: var(--ap-mono);
  font-size: 10.5px;
  color: var(--ap-text-dim);
  letter-spacing: 0.04em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.apollo-ad-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--ap-border);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.apollo-ad-thumb:hover {
  transform: scale(1.06);
  box-shadow: 0 0 16px var(--ap-cyan-glow);
  border-color: var(--ap-border-strong);
}
.apollo-ad-thumb-video {
  position: relative;
}
.apollo-ad-thumb-video::after {
  /* Faux play icon overlay — uses an inline SVG via CSS background */
  content: '';
}

/* Tree expansion controls */
.apollo-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 4px;
  font-size: 10px;
  color: var(--ap-cyan-dim);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  vertical-align: middle;
}
.apollo-tree-toggle:hover { background: color-mix(in srgb, var(--ap-cyan) 14%, transparent); color: var(--ap-cyan); }
.apollo-tree-toggle-leaf { cursor: default; opacity: 0.30; }
.apollo-tree-toggle-leaf:hover { background: transparent; color: var(--ap-cyan-dim); }

/* Indent + visual treatment per level */
.apollo-row-adset .apollo-td-name { padding-left: 36px; }
.apollo-row-ad .apollo-td-name { padding-left: 60px; }
.apollo-row-adset .apollo-name-block strong { font-weight: 500; }
.apollo-row-ad .apollo-name-block strong { color: var(--ap-text-dim); font-weight: 500; }

.apollo-row-loading td {
  font-family: var(--ap-mono);
  font-size: 11px;
  color: var(--ap-text-dim);
  padding: 10px 16px 10px 36px;
  font-style: italic;
}
.apollo-td-name strong {
  color: var(--ap-text);
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
}
.apollo-td-name .muted { color: var(--ap-text-dim) !important; font-family: var(--ap-mono); }
.apollo-table th.apollo-th-actions, .apollo-table td.apollo-actions { text-align: right; white-space: nowrap; }

.apollo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-family: var(--ap-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.apollo-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.apollo-badge-active {
  background: color-mix(in srgb, var(--ap-green) 10%, transparent);
  color: var(--ap-green);
  border: 1px solid color-mix(in srgb, var(--ap-green) 32%, transparent);
}
.apollo-badge-active::before { background: var(--ap-green); box-shadow: 0 0 8px currentColor; }
.apollo-badge-paused {
  background: color-mix(in srgb, var(--ap-text-dim) 10%, transparent);
  color: var(--ap-text-dim);
  border: 1px solid color-mix(in srgb, var(--ap-text-dim) 30%, transparent);
}
.apollo-badge-paused::before { background: var(--ap-text-dim); }

.apollo-action {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ap-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ap-cyan) 4%, transparent);
  color: var(--ap-cyan-dim);
  cursor: pointer;
  margin-left: 6px;
  font-family: var(--ap-mono);
  font-weight: 700;
  font-size: 13px;
  transition: all 0.15s ease;
}
.apollo-action:hover {
  background: color-mix(in srgb, var(--ap-cyan) 18%, transparent);
  color: var(--ap-cyan);
  border-color: var(--ap-border-strong);
  box-shadow: 0 0 12px var(--ap-cyan-glow);
  transform: translateY(-1px);
}

/* ----- Apollo QA Center (beta) — rendered as a 3-card carousel mirroring
   the Apollo Tools widget. Most styling is inherited from .widget-apollo-tools
   / .apollo-tool / .apollo-tools-carousel. These rules only add what's QA-
   specific: the BETA badge in the widget title and the queue-count pill. ----- */
.apollo-qa-beta {
  font-family: var(--ap-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ap-cyan, #64748b);
  color: #fff;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 8px;
}
.apollo-tool-title .apollo-qa-tab-count {
  margin-left: 8px;
  vertical-align: middle;
}
/* QA cards skip the dashed divider that Apollo Tools cards have under their
   head. Apollo Tools keeps it. */
.widget-apollo-qa .apollo-tool-head {
  border-bottom: none;
  padding-bottom: 0;
}

/* Expand toggle — sits in the top-left of the QA widget header. */
.apollo-qa-expand-btn {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--ap-border, #d1d5db);
  background: transparent;
  color: var(--ap-text-dim, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 8;
}
.apollo-qa-expand-btn:hover {
  color: var(--ap-cyan, #64748b);
  border-color: var(--ap-cyan, #64748b);
  box-shadow: 0 0 12px var(--ap-cyan-glow, rgba(255, 255, 255,0.18));
}
.apollo-qa-expand-btn[aria-pressed="true"] {
  background: var(--ap-cyan, #64748b);
  border-color: var(--ap-cyan, #64748b);
  color: #fff;
}

/* Expanded layout — three cards side by side at full size, no rotation,
   no blur. Cards keep their `width: min(82%, 460px)` and `position: absolute`
   so the existing transform/opacity/filter transitions on .apollo-tool
   animate them smoothly from their carousel positions into the spread-out
   layout. We just override the transform via :nth-of-type. */
.apollo-qa-carousel {
  transition: height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.widget-apollo-qa[data-qa-layout="expanded"] .apollo-qa-carousel {
  /* Cap to the viewport so the Process / Refresh footer never runs off the
     bottom of the screen — on shorter displays the cards shrink and the
     buttons ride up into view; taller screens keep the full 840px. */
  height: min(840px, calc(100vh - 210px));
}
.widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  cursor: default;
  z-index: 5;
  background: var(--ap-bg-2, #ffffff);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--ap-border, #d1d5db);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.10);
}
/* Each card stays at its full natural size (~460px wide, 840px tall) and
   gets pushed left / centered / right so the three sit side-by-side with
   ~40px of gap. */
.widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool:nth-of-type(1) {
  transform: translate(calc(-50% - 500px), 0) scale(1);
}
.widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool:nth-of-type(2) {
  transform: translate(-50%, 0) scale(1);
}
.widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool:nth-of-type(3) {
  transform: translate(calc(-50% + 500px), 0) scale(1);
}
html.theme-dark .widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.50);
}
.widget-apollo-qa[data-qa-layout="expanded"] .apollo-qa-dots { display: none; }

/* Between ~1300px and ~1500px, three full-size cards (~1460px span) won't
   fit horizontally — scale them down a notch and tighten the spacing so
   they still sit side-by-side without clipping. */
@media (max-width: 1500px) {
  .widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool:nth-of-type(1) {
    transform: translate(calc(-50% - 410px), 0) scale(0.86);
  }
  .widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool:nth-of-type(2) {
    transform: translate(-50%, 0) scale(0.86);
  }
  .widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool:nth-of-type(3) {
    transform: translate(calc(-50% + 410px), 0) scale(0.86);
  }
}

/* Below ~1300px, drop to a vertical stack so each card still reads at a
   comfortable full-size width. */
@media (max-width: 1300px) {
  .widget-apollo-qa[data-qa-layout="expanded"] .apollo-qa-carousel {
    height: auto;
    padding-bottom: 12px;
  }
  .widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 760px;
    margin-bottom: 16px;
  }
  .widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool:nth-of-type(1),
  .widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool:nth-of-type(2),
  .widget-apollo-qa[data-qa-layout="expanded"] .apollo-tool:nth-of-type(3) {
    transform: none;
  }
}
.apollo-qa-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.apollo-qa-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--ap-border);
  border-radius: 16px;
  background: var(--ap-panel);
  color: var(--ap-text-dim);
  font-family: var(--ap-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.apollo-qa-tab:hover {
  color: var(--ap-text);
  border-color: var(--ap-border-strong);
}
.apollo-qa-tab.is-active {
  color: var(--ap-cyan);
  border-color: var(--ap-border-strong);
  background: var(--ap-cyan-glow);
  box-shadow: 0 0 14px var(--ap-cyan-glow);
}
.apollo-qa-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ap-cyan);
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.apollo-qa-tab:not(.is-active) .apollo-qa-tab-count {
  background: var(--ap-border-strong);
}
.apollo-qa-pane { display: none; flex-direction: column; gap: 14px; }
.apollo-qa-pane.is-active { display: flex; }
.apollo-qa-pane-head { display: flex; flex-direction: column; gap: 6px; }
.apollo-qa-pane-desc { margin: 0; font-size: 13px; color: var(--ap-text); }
/* Legend — minimalist note above each queue. No box, just dim italic text
   with subtle separators (·) between fields. The code/property names get
   slightly stronger color but no chip background. */
.apollo-qa-legend {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ap-text-dim);
  padding: 0 2px 4px;
  border: none;
  background: transparent;
  border-radius: 0;
  letter-spacing: 0.01em;
  text-align: center;
}
.apollo-qa-legend code {
  font-family: var(--ap-mono);
  font-size: 11px;
  padding: 0;
  background: transparent;
  color: var(--ap-text);
  font-weight: 500;
  letter-spacing: 0;
}
html.theme-dark .apollo-qa-legend code { background: transparent; }
.apollo-qa-legend b {
  color: var(--ap-cyan);
  font-weight: 600;
}

/* QA card body scrollbars: invisible at rest. The `.is-scrolling` class
   is toggled from JS on every scroll event and cleared on a short timer,
   so the bar only appears while the user is actively scrolling. Dark-
   mode override tints the thumb so it doesn't flash bright white against
   the dark panel. The actual scrolling element is `.apollo-tool-body`
   (the wrapper around `.apollo-qa-list`); the inner list never overflows
   on its own. */
.apollo-tool-body {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.4s ease;
}
.apollo-tool-body.is-scrolling {
  scrollbar-color: rgba(120, 120, 120, 0.45) transparent;
}
html.theme-dark .apollo-tool-body.is-scrolling {
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.apollo-tool-body::-webkit-scrollbar { width: 8px; height: 8px; }
.apollo-tool-body::-webkit-scrollbar-track { background: transparent; }
.apollo-tool-body::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.4s ease;
}
.apollo-tool-body.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.45);
}
html.theme-dark .apollo-tool-body.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}
.apollo-tool-body::-webkit-scrollbar-button { display: none; }

.apollo-qa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apollo-qa-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--ap-border);
  border-radius: 16px;
  background: var(--ap-panel-strong);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
}
.apollo-qa-list-dual .apollo-qa-item { grid-template-columns: auto 1fr auto; }
.apollo-qa-item:hover {
  border-color: var(--ap-border-strong);
  box-shadow: 0 0 14px var(--ap-cyan-glow);
}
.apollo-qa-item.is-checked {
  border-color: var(--ap-cyan);
  background: var(--ap-cyan-glow);
}
.apollo-qa-item.is-done {
  opacity: 0.55;
  border-style: dashed;
}
/* QA3 "recovered" state: a tagged underperformer's ROAS came back, so
   we run a gentle pulsing blue glow on the border to draw the eye. The
   Recovered checkbox is unlocked in this state; clicking it stops the
   animation, updates HubSpot to the right level, and drops the row. */
@keyframes apollo-qa-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); border-color: var(--ap-border); }
  50%      { box-shadow: 0 0 18px 2px rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.95); }
}
.apollo-qa-item.apollo-qa-glow {
  animation: apollo-qa-glow-pulse 2s ease-in-out infinite;
  opacity: 1;
  border-style: solid;
}

.apollo-qa-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  cursor: pointer;
}
.apollo-qa-check input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}
.apollo-qa-check-box {
  width: 22px;
  height: 22px;
  border: 2px solid var(--ap-border-strong);
  border-radius: 6px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  color: transparent;
  font-size: 14px;
  font-weight: 700;
}
.apollo-qa-check input:checked + .apollo-qa-check-box {
  background: var(--ap-cyan);
  border-color: var(--ap-cyan);
  color: #0f172a;
}
.apollo-qa-check input:checked + .apollo-qa-check-box::before { content: '✓'; }
.apollo-qa-check input:disabled + .apollo-qa-check-box {
  opacity: 0.4;
  cursor: not-allowed;
}

.apollo-qa-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.apollo-qa-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ap-text);
  font-family: "Inter", sans-serif;
}
.apollo-qa-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.apollo-qa-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ap-cyan-glow);
  color: var(--ap-cyan);
  font-family: var(--ap-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--ap-border);
}
.apollo-qa-tag-warn {
  background: rgba(182, 182, 182, 0.36);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.28);
}
html.theme-dark .apollo-qa-tag-warn { color: #f1f5f9; }
.apollo-qa-tag-danger {
  background: rgba(239, 68, 68, 0.28);
  color: #7f1d1d;
  border-color: rgba(239, 68, 68, 0.55);
}
html.theme-dark .apollo-qa-tag-danger { color: #fecaca; }
.apollo-qa-action-preview {
  font-family: var(--ap-mono);
  font-size: 11.5px;
  color: var(--ap-text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}
.apollo-qa-action-preview b {
  color: var(--ap-cyan);
  font-weight: 700;
}
.apollo-qa-action-preview .arrow { color: var(--ap-cyan); }

/* The "Recovered" checkbox uses the same square box as the left
   checkbox, with the word stacked underneath. We override the parent
   .apollo-qa-check's fixed 26px height (which would otherwise crop the
   label) and let the column lay out naturally. */
.apollo-qa-recovered-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  cursor: pointer;
}
.apollo-qa-recovered-label .apollo-qa-check-box {
  /* Identical to the left checkbox — no special pill/outline treatment. */
  width: 22px;
  height: 22px;
}
.apollo-qa-recovered-label span.muted {
  font-family: var(--ap-mono);
  font-size: 9.5px;
  color: var(--ap-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.apollo-qa-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 6px;
}
.apollo-qa-btn {
  padding: 9px 16px;
  border: 1px solid var(--ap-border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--ap-text);
  font-family: var(--ap-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.apollo-qa-btn:hover {
  border-color: var(--ap-cyan);
  color: var(--ap-cyan);
  box-shadow: 0 0 12px var(--ap-cyan-glow);
}
.apollo-qa-btn-primary {
  background: var(--ap-cyan);
  border-color: var(--ap-cyan);
  color: #0f172a;
}
.apollo-qa-btn-primary:hover {
  background: #fff;
  color: var(--ap-cyan);
  box-shadow: 0 0 16px var(--ap-cyan-glow);
}
.apollo-qa-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.apollo-qa-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 250;
  padding: 14px 18px;
  background: var(--ap-panel-strong);
  border: 1px solid var(--ap-cyan);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  color: var(--ap-text);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  max-width: 340px;
  animation: apollo-qa-toast-in 0.2s ease;
}
.apollo-qa-toast strong { display: block; margin-bottom: 4px; color: var(--ap-cyan); }
@keyframes apollo-qa-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ----- Underperformers Console ------------------------------------------ */
/* Sits directly below the QA Center. Left column is the active/history
   list; right column is the per-client detail panel with recommendations,
   notes log, add-note form, and ticket buttons. Visually inherits the
   same dark-panel look as the QA cards so the two sections read as one
   workflow. */
.widget-underperformer {
  /* margin-top removed: the apollo-shell already adds 16px gap between
     all sections, so an extra margin here made Underperformers look
     further from the section-nav than Help/Campaigns. */
  margin-top: 0;
  padding: 22px;
  border: 1px solid var(--ap-border);
  border-radius: 14px;
  background: var(--ap-panel);
}
.widget-underperformer .widget-head {
  padding: 0 0 14px 0;
  border: none;
  background: none;
  text-align: center;
}
.widget-underperformer .widget-head h3 {
  font-family: var(--ap-mono);
  font-size: 14px;
  color: var(--ap-text);
  letter-spacing: 0.05em;
  margin: 0;
}
.widget-underperformer .widget-subtitle {
  font-size: 12.5px;
  color: var(--ap-text-dim);
  margin: 4px 0 0 0;
}

.underperf-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 18px;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .underperf-layout { grid-template-columns: 1fr; }
}

.underperf-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  background: var(--ap-panel-strong);
  padding: 12px;
  min-height: 320px;
  /* No max-height: stretches to match the detail panel height (grid row
     align-items defaults to stretch), so the client list reaches the
     bottom when a client is selected on the right. */
  align-self: stretch;
}
.underperf-tabs {
  display: flex;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ap-border);
}
.underperf-tab {
  flex: 1 1 auto;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ap-text-dim);
  font-family: var(--ap-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.underperf-tab:hover { color: var(--ap-text); background: rgba(255,255,255,0.04); }
.underperf-tab.is-active {
  color: var(--ap-cyan);
  border-color: var(--ap-cyan);
  background: var(--ap-cyan-glow);
}
.underperf-tab-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  font-size: 10px;
}
.underperf-tab.is-active .underperf-tab-count {
  background: var(--ap-cyan);
  color: #0a0a0a;
}

.underperf-clients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1 1 auto;
  /* Hidden scrollbar — list still scrolls via wheel/keyboard but the
     bar itself is invisible in both light and dark modes. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.underperf-clients::-webkit-scrollbar { width: 0; height: 0; display: none; }
.underperf-client {
  position: relative;
  padding: 10px 12px;
  border: 1px solid var(--ap-border);
  border-radius: 8px;
  background: var(--ap-panel);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.underperf-client:hover {
  border-color: var(--ap-border-strong);
  background: rgba(255,255,255,0.03);
}
.underperf-client.is-active {
  border-color: var(--ap-cyan);
  background: var(--ap-cyan-glow);
}
.underperf-client.is-resolved {
  opacity: 0.7;
  border-style: dashed;
}
.underperf-client-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ap-text);
  line-height: 1.25;
}
.underperf-client-meta {
  font-family: var(--ap-mono);
  font-size: 10.5px;
  color: var(--ap-text-dim);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.underperf-client-meta .danger { color: #f87171; }
.underperf-client-meta .ok { color: #cbd5e1; }
.underperf-editing-flag {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-family: var(--ap-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ap-cyan);
  opacity: 0.9;
  pointer-events: none;
}
.underperf-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--ap-text-dim);
  font-size: 13px;
  list-style: none;
}

/* ----- Payment Issues panel ----- */
/* Read-only list of payment/billing-flagged accounts (LP-prefixed names
   are filtered out in JS). Reuses the underperformer card look but lays
   the cards out as a responsive grid and drops the click affordances. */
.pay-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 14px;
  max-height: 460px;
}
.pay-client { cursor: default; }
.pay-client:hover {
  border-color: var(--ap-border);
  background: var(--ap-panel);
}
.pay-badge {
  color: #f87171;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pay-count {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(248,113,113,0.16);
  color: #f87171;
  font-family: var(--ap-mono);
  font-size: 11px;
  vertical-align: middle;
}
.pay-count:empty { display: none; }

.underperf-detail {
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  background: var(--ap-panel-strong);
  padding: 18px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.underperf-detail-empty {
  text-align: center;
  margin: auto;
  font-style: italic;
}
.underperf-detail-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ap-border);
}
.underperf-detail-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ap-text);
  margin: 0;
  line-height: 1.25;
}
.underperf-detail-substats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-family: var(--ap-mono);
  font-size: 11px;
  color: var(--ap-text-dim);
}
.underperf-detail-substats .stat-danger { color: #f87171; }

.underperf-section-title {
  font-family: var(--ap-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-cyan-dim);
  margin: 6px 0 8px 0;
}

.underperf-recos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.underperf-reco {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--ap-border);
  border-radius: 6px;
  background: var(--ap-panel);
  cursor: pointer;
  transition: all 0.12s ease;
}
.underperf-reco:hover { border-color: var(--ap-border-strong); }
.underperf-reco input { margin-top: 2px; cursor: pointer; }
.underperf-reco-label {
  flex: 1 1 auto;
  font-size: 12.5px;
  color: var(--ap-text);
}
.underperf-reco.is-done .underperf-reco-label {
  text-decoration: line-through;
  color: var(--ap-text-dim);
}
.underperf-reco-time {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 1px;
  font-family: var(--ap-mono);
  font-size: 10.5px;
  color: var(--ap-text-dim);
  white-space: nowrap;
}
.underperf-reco-del {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ap-text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 0 6px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.underperf-reco-del:hover {
  color: var(--ap-text);
  background: color-mix(in srgb, var(--ap-cyan, #94a3b8) 12%, transparent);
  border-color: var(--ap-border);
}
.underperf-reco-add {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.underperf-reco-add input {
  flex: 1 1 auto;
  background: var(--ap-panel-strong);
  border: 1px solid var(--ap-border);
  border-radius: 6px;
  color: var(--ap-text);
  font-family: inherit;
  font-size: 12.5px;
  padding: 8px 10px;
}
.underperf-reco-add input:focus {
  outline: none;
  border-color: var(--ap-cyan-dim, var(--ap-border-strong));
}

.underperf-notes-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
}
.underperf-note {
  padding: 8px 10px;
  border: 1px solid var(--ap-border);
  border-radius: 6px;
  background: var(--ap-panel);
}
.underperf-note-head {
  font-family: var(--ap-mono);
  font-size: 10px;
  color: var(--ap-text-dim);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.underperf-note-tag {
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
/* Inline edit / delete buttons — only visible to the note owner (or the
   super-admin). Pushed to the right of the head row so they don't crowd
   the metadata, and kept subtle until hover. */
.underperf-note-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
}
.underperf-note-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ap-text-dim);
  font-size: 12px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.underperf-note-btn:hover {
  color: var(--ap-text);
  background: color-mix(in srgb, var(--ap-cyan, #94a3b8) 12%, transparent);
  border-color: var(--ap-border);
}
.underperf-note-text {
  font-size: 12.5px;
  color: var(--ap-text);
  white-space: pre-wrap;
  line-height: 1.45;
}
.underperf-note-edit-area {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--ap-border);
  background: var(--ap-bg-2);
  color: var(--ap-text);
  font: inherit;
}
.underperf-note-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.underperf-notes-empty {
  padding: 12px;
  text-align: center;
  color: var(--ap-text-dim);
  font-size: 12px;
  font-style: italic;
}

.underperf-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--ap-border);
  border-radius: 8px;
  padding: 10px;
  background: var(--ap-panel);
}
.underperf-add-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.underperf-add-row select,
.underperf-add textarea {
  background: var(--ap-panel-strong);
  border: 1px solid var(--ap-border);
  border-radius: 6px;
  color: var(--ap-text);
  font-family: inherit;
  font-size: 12.5px;
  padding: 8px;
}
.underperf-add textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
}
.underperf-add-row select { flex: 1 1 auto; min-width: 160px; }

.underperf-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.underperf-btn {
  padding: 8px 14px;
  border: 1px solid var(--ap-border);
  border-radius: 8px;
  background: var(--ap-panel);
  color: var(--ap-text);
  font-family: var(--ap-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.underperf-btn:hover { border-color: var(--ap-cyan); color: var(--ap-cyan); }
.underperf-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.underperf-btn-primary {
  background: var(--ap-cyan);
  border-color: var(--ap-cyan);
  color: #0a0a0a;
  font-weight: 700;
}
.underperf-btn-primary:hover { background: var(--ap-cyan); color: #0a0a0a; filter: brightness(1.1); }
.underperf-btn-meta { border-color: rgba(255, 255, 255, 0.5); }
.underperf-btn-design { border-color: rgba(255, 255, 255, 0.5); }
.underperf-btn-design:hover { border-color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 1); }
.underperf-btn-resolve { border-color: rgba(255, 255, 255, 0.5); }
.underperf-btn-resolve:hover { border-color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 1); }

.underperf-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 250;
  padding: 14px 18px;
  background: var(--ap-panel-strong);
  border: 1px solid var(--ap-cyan);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  color: var(--ap-text);
  font-size: 13px;
  max-width: 340px;
  animation: apollo-qa-toast-in 0.2s ease;
}
.underperf-toast strong { display: block; margin-bottom: 4px; color: var(--ap-cyan); }

/* ----- Apollo section nav — segmented control matching the light/dark
   theme toggle. One pill container with 4 segments; a sliding white
   "thumb" highlights the active segment (position+size updated by JS
   from the active button's geometry, since the buttons have different
   text lengths). ----- */
.apollo-section-nav {
  display: inline-flex;
  /* Sits in the header, horizontally centered, at the same vertical level as
     the APOLLO eyebrow (left) and the RIP ANDY / SYSTEM ONLINE pills (right).
     The pills are 28px tall at top:0 (centers at 14px); the nav is a bit taller,
     so we center IT on that same 14px line instead of just aligning tops. */
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
  user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 2px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.05);
}
.apollo-section-nav-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 999px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.14),
    0 0 0 0.5px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.apollo-section-nav-btn {
  position: relative;
  z-index: 1;
  padding: 7px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-family: var(--ap-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease;
}
.apollo-section-nav-btn:hover { color: #0f172a; }
.apollo-section-nav-btn.is-active { color: #0f172a; }

/* Dark mode: match the Apollo KPI cards' glossy bluish panel exactly —
   same translucent dark-blue background, same blue-tinted border, same
   inner cyan glow. The thumb is a brighter / more saturated version of
   the same recipe so it reads as a "lifted" KPI tile. */
html.theme-dark .apollo-section-nav {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.85) 100%),
    var(--ap-panel);
  border-color: var(--ap-border);
  box-shadow:
    inset 0 1px 0 var(--ap-cyan-glow),
    inset 0 -1px 2px rgba(0, 0, 0, 0.35),
    0 0 24px var(--ap-cyan-glow);
}
html.theme-dark .apollo-section-nav-thumb {
  background:
    linear-gradient(180deg, rgba(56, 75, 110, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
  border: 1px solid var(--ap-border-strong);
  box-shadow:
    inset 0 1px 0 var(--ap-cyan-glow),
    0 0 16px var(--ap-cyan-glow),
    0 1px 3px rgba(0, 0, 0, 0.45);
}
html.theme-dark .apollo-section-nav-btn { color: var(--ap-cyan-dim); }
html.theme-dark .apollo-section-nav-btn:hover { color: var(--ap-text); }
html.theme-dark .apollo-section-nav-btn.is-active { color: var(--ap-text); }

/* "Campaigns" is a multi-element block — controls row + table wrap.
   Wrap them so they move together when the Campaigns nav button
   promotes the section to the top. */
.apollo-campaigns-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Header row above the campaign table: title on the left, "Open all"
   action on the right. Shown when a client is selected. */
.apollo-campaigns-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

/* Event Hawk drill-in: "Open all" button next to the "Campaigns" h3 in
   the client detail view. Same glossy filled treatment as the Apollo
   one but using the brand blue token so it sits naturally next to the
   Performance/Marketing tabs. */
.eh-campaigns-title-block {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eh-campaigns-title-block h3 { margin: 0; }
.eh-open-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
  color: #ffffff;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 4px 10px rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(15, 23, 42, 0.18);
  transition: transform 0.12s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.eh-open-all-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 14px rgba(255, 255, 255, 0.28),
    0 2px 4px rgba(15, 23, 42, 0.22);
}
.eh-open-all-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
html.theme-dark .eh-open-all-btn {
  background: linear-gradient(180deg, #64748b 0%, #475569 100%);
}
.apollo-campaigns-title {
  margin: 0;
  font-family: var(--ap-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-text);
}
.apollo-open-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--ap-border-strong);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ap-cyan) 92%, white) 0%, var(--ap-cyan) 100%);
  color: #ffffff;
  font-family: var(--ap-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px var(--ap-cyan-glow),
    0 1px 2px rgba(15, 23, 42, 0.18);
  transition: transform 0.12s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.apollo-open-all-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 18px var(--ap-cyan-glow),
    0 2px 4px rgba(15, 23, 42, 0.22);
}
.apollo-open-all-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ----- Apollo widgets section (inside the shell) ----- */
.apollo-widgets-section { display: flex; flex-direction: column; gap: 14px; }
.apollo-widgets-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 4px;
}
.apollo-add-widget-btn {
  padding: 8px 14px;
  border: 1px solid var(--ap-border-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ap-cyan) 10%, transparent);
  color: var(--ap-cyan);
  font-family: var(--ap-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.apollo-add-widget-btn:hover {
  filter: brightness(1.10);
  transform: translateY(-1px);
  box-shadow: 0 0 16px var(--ap-cyan-glow);
}

/* Widgets inside Apollo — adopt the mission-control identity. Strip the
   shared "Add your first widget" empty state so the Apollo grid stays clean
   when no widgets are deployed. Override the global `.widget-grid`
   `margin-top: 18px`: Apollo relies on the shell's `gap: 16px` between
   sections, and an extra margin made Apollo Tools sit further below the
   section-nav than Help / Campaigns. */
.apollo-widget-grid { gap: 14px; padding: 4px; margin-top: 0; }
/* Empty Apollo Tools used to collapse to nothing, which made clicking the
   "Apollo Tools" tab look like it fell through to the constellation. Show a
   clear placeholder panel instead so the section is always visible. */
.apollo-widget-grid.widget-grid-empty,
.apollo-widget-grid:empty {
  column-count: 1 !important;
  min-height: 150px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px dashed rgba(255, 255, 255, 0.35) !important;
  border-radius: 14px !important;
  background: rgba(10, 20, 48, 0.55) !important;
}
.apollo-widget-grid.widget-grid-empty::after,
.apollo-widget-grid:empty::after {
  content: 'Apollo Tools — no widgets added in this browser yet.' !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: center !important;
  padding: 0 24px !important;
}
/* Make sure no other view's empty state leaks into the Apollo viewport. */
body.apollo-active #view-merlyn,
body.apollo-active #view-clients,
body.apollo-active #view-news,
body.apollo-active #view-eventhawk,
body.apollo-active #view-map,
body.apollo-active #view-kpis,
body.apollo-active #view-calendar,
body.apollo-active #view-team-chat { display: none !important; }
#view-apollo .widget,
#view-apollo .card.widget {
  background: var(--ap-panel);
  border: 1px solid var(--ap-border);
  color: var(--ap-text);
  box-shadow: inset 0 1px 0 var(--ap-cyan-glow), 0 0 24px var(--ap-cyan-glow);
  border-radius: 12px;
}
#view-apollo .widget-title,
#view-apollo .widget h3,
#view-apollo .widget h4 {
  color: var(--ap-text);
  font-family: var(--ap-mono);
  letter-spacing: 0.04em;
}
#view-apollo .widget .muted,
#view-apollo .widget .muted-text { color: var(--ap-text-dim); }
#view-apollo .widget .card-header {
  border-bottom: 1px solid var(--ap-border);
}
#view-apollo .widget-grip {
  color: var(--ap-cyan-dim);
  opacity: 0.55;
}
#view-apollo .widget-grip:hover { color: var(--ap-cyan); opacity: 1; }
#view-apollo .widget-remove-btn {
  background: color-mix(in srgb, var(--ap-cyan) 6%, transparent);
  border: 1px solid var(--ap-border);
  color: var(--ap-cyan-dim);
}
#view-apollo .widget-remove-btn:hover {
  background: color-mix(in srgb, var(--ap-red) 14%, transparent);
  border-color: var(--ap-red);
  color: var(--ap-red);
}
/* (Dead chat-era CSS removed — mission-control rules above are the source of truth.) */

/* ==== Apollo Help widget — Apollo-only "second pair of eyes" picker ==== */
.widget-apollo-help-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
}
.widget-apollo-help .ah-row { display: block; }
.widget-apollo-help .ah-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.widget-apollo-help .ah-label {
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-cyan-dim, #64748b);
}
.widget-apollo-help .ah-client-picker { position: relative; }
.widget-apollo-help .ah-client-input,
.widget-apollo-help .ah-question {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ap-border, #d1d5db);
  border-radius: 8px;
  background: var(--ap-bg, #fff);
  color: var(--ap-text, #0f172a);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.widget-apollo-help .ah-client-input:focus,
.widget-apollo-help .ah-question:focus {
  outline: none;
  border-color: var(--ap-cyan, #cbd5e1);
  box-shadow: 0 0 0 3px var(--ap-cyan-glow, rgba(255, 255, 255, 0.18));
}
.widget-apollo-help .ah-client-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
  background: var(--ap-bg-2, #fff);
  border: 1px solid var(--ap-border-strong, #cbd5e1);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 4px;
}
.widget-apollo-help .ah-suggest-item {
  padding: 8px 10px;
  border-radius: 6px;
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--ap-text, #0f172a);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.widget-apollo-help .ah-suggest-item:hover {
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 14%, transparent);
  color: var(--ap-cyan, #64748b);
}
.widget-apollo-help .ah-actions {
  display: flex;
  justify-content: flex-end;
}
.widget-apollo-help .ah-submit {
  padding: 9px 18px;
  border-radius: 8px;
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 18%, transparent);
  border: 1px solid var(--ap-cyan, #cbd5e1);
  color: var(--ap-cyan, #64748b);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.widget-apollo-help .ah-submit:hover {
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 28%, transparent);
  transform: translateY(-1px);
}
.widget-apollo-help .ah-response {
  border-radius: 10px;
  border: 1px solid var(--ap-border, #d1d5db);
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 4%, transparent);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.widget-apollo-help .ah-response[hidden] { display: none; }
.widget-apollo-help .ah-response-good { border-color: #94a3b8; background: rgba(255, 255, 255, 0.08); }
.widget-apollo-help .ah-response-no   { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.widget-apollo-help .ah-response-maybe{ border-color: #94a3b8; background: rgba(255, 255, 255, 0.08); }
.widget-apollo-help .ah-response-warn { border-color: #94a3b8; background: rgba(255, 255, 255, 0.10); color: #475569; font-family: var(--ap-mono); font-size: 12px; }
.widget-apollo-help .ah-response-info { border-color: var(--ap-border-strong, #cbd5e1); }
.widget-apollo-help .ah-response-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.widget-apollo-help .ah-response-head strong {
  font-size: 14px;
  color: var(--ap-text, #0f172a);
}
.widget-apollo-help .ah-response-verdict {
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ap-cyan, #64748b);
}
.widget-apollo-help .ah-response-good .ah-response-verdict { color: #475569; }
.widget-apollo-help .ah-response-no   .ah-response-verdict { color: #b91c1c; }
.widget-apollo-help .ah-response-maybe .ah-response-verdict { color: #475569; }
.widget-apollo-help .ah-response-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ap-text, #0f172a);
}
.widget-apollo-help .ah-response-body b { color: var(--ap-text, #0f172a); font-weight: 700; }
.widget-apollo-help .ah-response-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--ap-text-dim, #64748b);
  border-top: 1px dashed var(--ap-border, #d1d5db);
  padding-top: 8px;
}
.widget-apollo-help .ah-response-stats b { color: var(--ap-text, #0f172a); font-weight: 700; }

/* Suggested message for the client — sits below the operator answer with a copy button. */
.widget-apollo-help .ah-client-msg {
  margin-top: 4px;
  border-top: 1px dashed var(--ap-border, #d1d5db);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.widget-apollo-help .ah-client-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.widget-apollo-help .ah-client-msg-eyebrow {
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-cyan-dim, #64748b);
}
.widget-apollo-help .ah-client-msg-copy {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--ap-border, #d1d5db);
  background: transparent;
  color: var(--ap-cyan, #64748b);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.widget-apollo-help .ah-client-msg-copy:hover {
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 14%, transparent);
}
.widget-apollo-help .ah-client-msg-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ap-text, #0f172a);
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 4%, transparent);
  border: 1px solid var(--ap-border, #d1d5db);
  border-radius: 8px;
  padding: 10px 12px;
  white-space: pre-wrap;
}

/* ==== Apollo Tools carousel ============================================== */
/* Five tool cards laid out in a stacked carousel: the active one sits in the
   center at full opacity; the two on each side are scaled, blurred and glassy.
   Mouse wheel cycles the active position. Each card is a self-contained
   tool (Apollo Help, Pulse Check, Audience Refresh, Creative Brief, Scale
   Roadmap) and reuses the .ah-* form styles already defined above. */
.widget-apollo-tools {
  /* Span both columns of the masonry grid so the carousel has room for the
     side cards (each offset 320–560px from center). overflow:hidden clips
     anything that still spills past the widget edge. */
  column-span: all;
  -webkit-column-span: all;
  break-inside: avoid;
  overflow: hidden;
}
/* Drop the default widget-header bottom border on the Apollo Tools widget so
   the title block sits cleanly above the carousel without an extra rule. */
.widget-apollo-tools .widget-header { border-bottom: none; }
html.theme-dark .widget-apollo-tools .widget-header { border-bottom: none; }
.widget-apollo-tools .widget-header {
  position: relative;
  z-index: 6;
}
.apollo-tools-carousel {
  position: relative;
  /* Tool card height. Bump this when content overflows. */
  height: 1080px;
  margin: 4px 0 0;
  perspective: 1500px;
  outline: none;
  overscroll-behavior: contain;
}
.apollo-tool {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(82%, 460px);
  height: 100%;
  margin: 0;
  padding: 22px 22px 18px;
  background: var(--ap-bg-2, #ffffff);
  border: 1px solid var(--ap-border, #d1d5db);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.10);
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Card itself doesn't scroll — only its body does. That keeps the head
     and the bottom Clear button pinned in place when the response is long. */
  overflow: hidden;
  /* Default is hidden — JS sets data-pos on each card to position it. */
  opacity: 0;
  transform: translateX(-50%) scale(0.55);
  pointer-events: none;
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.45s ease,
    filter 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease;
  will-change: transform, opacity, filter;
}
html.theme-dark .apollo-tool {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.50);
}

/* Active (center) — full opacity, normal background like Apollo Help today. */
.apollo-tool[data-pos="0"] {
  z-index: 5;
  opacity: 1;
  filter: none;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* Adjacent — glassy, blurred, slightly scaled down, offset to the side. */
.apollo-tool[data-pos="-1"] {
  z-index: 3;
  opacity: 0.75;
  filter: blur(1.2px);
  transform: translate(calc(-50% - 320px), 16px) scale(0.86);
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  cursor: pointer;
  pointer-events: auto;
}
.apollo-tool[data-pos="1"] {
  z-index: 3;
  opacity: 0.75;
  filter: blur(1.2px);
  transform: translate(calc(-50% + 320px), 16px) scale(0.86);
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  cursor: pointer;
  pointer-events: auto;
}
html.theme-dark .apollo-tool[data-pos="-1"],
html.theme-dark .apollo-tool[data-pos="1"] {
  background: rgba(20, 30, 60, 0.50);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Far cards — even more transparent, more blur, more scaled down. */
.apollo-tool[data-pos="-2"] {
  z-index: 1;
  opacity: 0.40;
  filter: blur(2.5px);
  transform: translate(calc(-50% - 560px), 32px) scale(0.72);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(24px) saturate(110%);
  backdrop-filter: blur(24px) saturate(110%);
  border-color: rgba(255, 255, 255, 0.30);
  cursor: pointer;
  pointer-events: auto;
}
.apollo-tool[data-pos="2"] {
  z-index: 1;
  opacity: 0.40;
  filter: blur(2.5px);
  transform: translate(calc(-50% + 560px), 32px) scale(0.72);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(24px) saturate(110%);
  backdrop-filter: blur(24px) saturate(110%);
  border-color: rgba(255, 255, 255, 0.30);
  cursor: pointer;
  pointer-events: auto;
}
html.theme-dark .apollo-tool[data-pos="-2"],
html.theme-dark .apollo-tool[data-pos="2"] {
  background: rgba(20, 30, 60, 0.30);
  border-color: rgba(255, 255, 255, 0.10);
}

.apollo-tool-head {
  border-bottom: 1px dashed var(--ap-border, #d1d5db);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.apollo-tool-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ap-text, #0f172a);
  text-align: center;
  letter-spacing: 0.01em;
}
.apollo-tool-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--ap-text-dim, #64748b);
  text-align: center;
}
.apollo-tool-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Tiny breathing room so the scrollbar doesn't hug the card edge. */
  padding-right: 2px;
}
/* Card footer that holds the per-tool Clear button — stays at the bottom of
   the card regardless of body scroll position. */
.apollo-tool-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
  margin-top: 4px;
  flex-shrink: 0;
}
.apollo-tool-clear {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 22px;
  border-radius: 999px;
  border: 1px solid var(--ap-border, #d1d5db);
  background: transparent;
  color: var(--ap-text-dim, #64748b);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.10s ease;
}
.apollo-tool-clear:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border-color: #fca5a5;
}
.apollo-tool-clear:active { transform: translateY(1px); }
html.theme-dark .apollo-tool-clear {
  border-color: rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}
html.theme-dark .apollo-tool-clear:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.45);
}

/* "Clear all" button in the widget header, sitting next to the × close. */
.apollo-tools-clear-all {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 12px;
  margin-right: 8px;
  border-radius: 6px;
  border: 1px solid var(--ap-border, #d1d5db);
  background: transparent;
  color: var(--ap-text-dim, #64748b);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.10s ease;
}
.apollo-tools-clear-all:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border-color: #fca5a5;
}
.apollo-tools-clear-all:active { transform: translateY(1px); }
html.theme-dark .apollo-tools-clear-all {
  border-color: rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}
html.theme-dark .apollo-tools-clear-all:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.45);
}
/* Pull form-row spacing in line with the new card padding so the carousel
   doesn't feel cramped. */
.apollo-tool .ah-row { display: block; }
.apollo-tool .ah-field { display: flex; flex-direction: column; gap: 6px; }
.apollo-tool .ah-label {
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-cyan-dim, #64748b);
}
.apollo-tool .ah-client-picker { position: relative; }
.apollo-tool .ah-client-input,
.apollo-tool .ah-question {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ap-border, #d1d5db);
  border-radius: 8px;
  background: var(--ap-bg, #fff);
  color: var(--ap-text, #0f172a);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apollo-tool .ah-client-input:focus,
.apollo-tool .ah-question:focus {
  outline: none;
  border-color: var(--ap-cyan, #cbd5e1);
  box-shadow: 0 0 0 3px var(--ap-cyan-glow, rgba(255, 255, 255, 0.18));
}
.apollo-tool .ah-client-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 30;
  max-height: 200px;
  overflow-y: auto;
  background: var(--ap-bg-2, #fff);
  border: 1px solid var(--ap-border-strong, #cbd5e1);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 4px;
}
.apollo-tool .ah-suggest-item {
  padding: 8px 10px;
  border-radius: 6px;
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--ap-text, #0f172a);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.apollo-tool .ah-suggest-item:hover {
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 14%, transparent);
  color: var(--ap-cyan, #64748b);
}
.apollo-tool .ah-actions { display: flex; justify-content: flex-end; }
.apollo-tool .ah-submit {
  padding: 9px 18px;
  border-radius: 8px;
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 18%, transparent);
  border: 1px solid var(--ap-cyan, #cbd5e1);
  color: var(--ap-cyan, #64748b);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.apollo-tool .ah-submit:hover {
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 28%, transparent);
  transform: translateY(-1px);
}
.apollo-tool .ah-response {
  border-radius: 10px;
  border: 1px solid var(--ap-border, #d1d5db);
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 4%, transparent);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apollo-tool .ah-response[hidden] { display: none; }
.apollo-tool .ah-response-good { border-color: #94a3b8; background: rgba(255, 255, 255, 0.08); }
.apollo-tool .ah-response-no    { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.apollo-tool .ah-response-maybe { border-color: #94a3b8; background: rgba(255, 255, 255, 0.08); }
.apollo-tool .ah-response-warn  { border-color: #94a3b8; background: rgba(255, 255, 255, 0.10); color: #475569; font-family: var(--ap-mono); font-size: 12px; }
.apollo-tool .ah-response-info  { border-color: var(--ap-border-strong, #cbd5e1); }
.apollo-tool .ah-response-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.apollo-tool .ah-response-head strong { font-size: 14px; color: var(--ap-text, #0f172a); }
.apollo-tool .ah-response-verdict {
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ap-cyan, #64748b);
}
.apollo-tool .ah-response-good  .ah-response-verdict { color: #475569; }
.apollo-tool .ah-response-no    .ah-response-verdict { color: #b91c1c; }
.apollo-tool .ah-response-maybe .ah-response-verdict { color: #475569; }
.apollo-tool .ah-response-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ap-text, #0f172a);
}
.apollo-tool .ah-response-body b { color: var(--ap-text, #0f172a); font-weight: 700; }

/* Live Ads tool — grid of ad creative cards */
.live-ads-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--ap-text-dim, #64748b);
  padding: 4px 0 12px;
  border-bottom: 1px dashed var(--ap-border, #d1d5db);
  margin-bottom: 12px;
  text-align: center;
}
.live-ads-summary b { color: var(--ap-text, #0f172a); font-weight: 700; }
.live-ads-summary .muted { opacity: 0.7; }

/* Center the title and verdict only inside the Live Ads response. Other
   tools keep the title-left / verdict-right layout. */
.apollo-tool[data-tool="live-ads"] .ah-response-head {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}
.live-ads-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}
.live-ad-card {
  /* Exactly 3 per row regardless of container width (gap = 12px). When
     there are fewer ads, the remaining cards stay the same size and
     center horizontally thanks to the grid's `justify-content: center`. */
  width: calc((100% - 24px) / 3);
  flex: 0 0 auto;
  border: 1px solid var(--ap-border, #d1d5db);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ap-card-bg, #fff);
  display: flex;
  flex-direction: column;
}
.live-ad-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #f1f5f9;
}
.live-ad-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #94a3b8;
}
.live-ad-body { padding: 8px 10px 10px; }
.live-ad-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ap-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.live-ad-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 11px;
  color: var(--ap-text-dim, #64748b);
}
.live-ad-kpis b { color: var(--ap-text, #0f172a); font-weight: 700; }
.live-ads-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 10px;
}
/* Glossy paired buttons under the Live Ads tool — outline "Half" +
   filled "Download image", same height, same radius, same depth. The
   filled variant is the brand cyan; the outline echoes the section-nav
   pill so they read as a family. */
.live-ads-actions .ah-live-ads-download,
.live-ads-actions .ah-live-ads-download-half {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--ap-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}
.live-ads-actions .ah-live-ads-download-half {
  color: var(--ap-text);
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 2px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.06);
}
.live-ads-actions .ah-live-ads-download-half:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 10px rgba(15, 23, 42, 0.10);
}
.live-ads-actions .ah-live-ads-download {
  color: #ffffff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ap-cyan) 92%, white) 0%, var(--ap-cyan) 100%);
  border: 1px solid color-mix(in srgb, var(--ap-cyan) 70%, #000);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px var(--ap-cyan-glow),
    0 1px 2px rgba(15, 23, 42, 0.18);
}
.live-ads-actions .ah-live-ads-download:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 18px var(--ap-cyan-glow),
    0 2px 4px rgba(15, 23, 42, 0.22);
}
.live-ads-actions .ah-live-ads-download:disabled,
.live-ads-actions .ah-live-ads-download-half:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.2);
}
/* Dark mode — match the Apollo KPI / section-nav recipe. */
html.theme-dark .live-ads-actions .ah-live-ads-download-half {
  color: var(--ap-text);
  background:
    linear-gradient(180deg, rgba(56, 75, 110, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
  border-color: var(--ap-border-strong);
  box-shadow:
    inset 0 1px 0 var(--ap-cyan-glow),
    0 0 14px var(--ap-cyan-glow),
    0 1px 2px rgba(0, 0, 0, 0.4);
}
html.theme-dark .live-ads-actions .ah-live-ads-download-half:hover {
  box-shadow:
    inset 0 1px 0 var(--ap-cyan-glow),
    0 0 22px var(--ap-cyan-glow),
    0 4px 10px rgba(0, 0, 0, 0.5);
}
.apollo-tool .ah-response-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--ap-text-dim, #64748b);
  border-top: 1px dashed var(--ap-border, #d1d5db);
  padding-top: 8px;
}
.apollo-tool .ah-response-stats b { color: var(--ap-text, #0f172a); font-weight: 700; }
.apollo-tool .ah-client-msg {
  margin-top: 4px;
  border-top: 1px dashed var(--ap-border, #d1d5db);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apollo-tool .ah-client-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.apollo-tool .ah-client-msg-eyebrow {
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-cyan-dim, #64748b);
}
.apollo-tool .ah-client-msg-copy {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--ap-border, #d1d5db);
  background: transparent;
  color: var(--ap-cyan, #64748b);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.apollo-tool .ah-client-msg-copy:hover {
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 14%, transparent);
}
.apollo-tool .ah-client-msg-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ap-text, #0f172a);
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 4%, transparent);
  border: 1px solid var(--ap-border, #d1d5db);
  border-radius: 8px;
  padding: 10px 12px;
  white-space: pre-wrap;
}

/* Daily Triage — ranked list of items each with rank chip + body. */
.ah-triage-list { display: flex; flex-direction: column; gap: 10px; }
.ah-triage-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ap-border, #d1d5db);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}
html.theme-dark .ah-triage-item {
  background: rgba(20, 30, 60, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
}
.ah-triage-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 18%, transparent);
  color: var(--ap-cyan, #64748b);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: 12px;
}
.ah-triage-name {
  font-size: 13px; font-weight: 700;
  color: var(--ap-text, #0f172a);
  margin-bottom: 4px;
}
html.theme-dark .ah-triage-name { color: #e2e8f0; }
.ah-triage-why { font-size: 12.5px; line-height: 1.5; color: var(--ap-text, #0f172a); margin-bottom: 6px; }
html.theme-dark .ah-triage-why { color: #cbd5e1; }
.ah-triage-action {
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--ap-cyan, #64748b);
  letter-spacing: 0.02em;
}

/* Compare Mode — two-column delta table with up/down/flat colored deltas. */
.ah-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 12px;
  margin: 4px 0 10px;
}
.ah-cmp-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ap-text-dim, #64748b);
  border-bottom: 1px solid var(--ap-border, #d1d5db);
}
.ah-cmp-table td {
  padding: 8px;
  font-size: 12.5px;
  color: var(--ap-text, #0f172a);
  border-bottom: 1px dashed var(--ap-border, #d1d5db);
}
.ah-cmp-table tr:last-child td { border-bottom: none; }
.ah-cmp-table td:first-child { color: var(--ap-text-dim, #64748b); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.ah-cmp-up   { color: #475569; font-weight: 700; }
.ah-cmp-down { color: #b91c1c; font-weight: 700; }
.ah-cmp-flat { color: var(--ap-text-dim, #94a3b8); font-weight: 700; }
html.theme-dark .ah-cmp-table td { color: #e2e8f0; border-bottom-color: rgba(255, 255, 255, 0.08); }
html.theme-dark .ah-cmp-up   { color: #94a3b8; }
html.theme-dark .ah-cmp-down { color: #fca5a5; }
.ah-cmp-diag {
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 6%, transparent);
  border: 1px solid var(--ap-border, #d1d5db);
}
html.theme-dark .ah-cmp-diag {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: #e2e8f0;
}

/* Glassy custom dropdown — replaces the native <select>'s default styling
   (which can't be reached with CSS) with a frosted-glass trigger and panel.
   The original <select> is hidden via .is-replaced but stays in the DOM as
   the source of truth so the rest of the codebase keeps working. */
.apollo-tool .ah-question {
  /* Hide the native control; .apollo-dropdown overlays it. */
  display: none !important;
}
.apollo-dropdown {
  position: relative;
  width: 100%;
}
.apollo-dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--ap-border, #d1d5db);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  color: var(--ap-text, #0f172a);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    transform 0.12s ease;
}
.apollo-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 50%, var(--ap-border, #d1d5db));
}
.apollo-dropdown-trigger:active { transform: translateY(1px); }
.apollo-dropdown-trigger:focus-visible { outline: none; }
.apollo-dropdown.is-open .apollo-dropdown-trigger {
  border-color: var(--ap-cyan, #cbd5e1);
  box-shadow: 0 0 0 3px var(--ap-cyan-glow, rgba(255, 255, 255, 0.18));
  background: rgba(255, 255, 255, 0.88);
}
.apollo-dropdown-value {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apollo-dropdown-value.is-placeholder { color: var(--ap-text-dim, #94a3b8); }
.apollo-dropdown-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ap-cyan-dim, #64748b);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.18s ease;
}
.apollo-dropdown.is-open .apollo-dropdown-chevron {
  transform: rotate(180deg);
  color: var(--ap-cyan, #64748b);
}
.apollo-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 50px rgba(15, 23, 42, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform-origin: top center;
  animation: apolloDropdownIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Setting display:flex above overrides the [hidden] attribute's default
   display:none, so panels stayed visible after init. Force display:none
   when hidden so the dropdown actually closes. */
.apollo-dropdown-panel[hidden] { display: none !important; }
@keyframes apolloDropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.apollo-dropdown-option {
  width: 100%;
  display: block;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--ap-text, #0f172a);
  font-family: var(--ap-mono, ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    transform 0.10s ease;
}
.apollo-dropdown-option:hover,
.apollo-dropdown-option:focus-visible {
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 14%, transparent);
  color: var(--ap-cyan, #64748b);
  outline: none;
}
.apollo-dropdown-option:active { transform: translateX(1px); }
.apollo-dropdown-option.is-active {
  background: color-mix(in srgb, var(--ap-cyan, #cbd5e1) 22%, transparent);
  color: var(--ap-cyan, #64748b);
  font-weight: 700;
}
.apollo-dropdown-option.is-placeholder {
  color: var(--ap-text-dim, #94a3b8);
  font-style: italic;
}

/* Dark-mode glass: tint surfaces toward deep navy and brighten text. */
html.theme-dark .apollo-dropdown-trigger {
  background: rgba(20, 30, 60, 0.50);
  border-color: rgba(255, 255, 255, 0.20);
  color: #e2e8f0;
}
html.theme-dark .apollo-dropdown-trigger:hover {
  background: rgba(30, 45, 80, 0.70);
  border-color: rgba(255, 255, 255, 0.40);
}
html.theme-dark .apollo-dropdown.is-open .apollo-dropdown-trigger {
  background: rgba(30, 45, 80, 0.80);
  border-color: rgba(255, 255, 255, 0.55);
}
html.theme-dark .apollo-dropdown-panel {
  background: rgba(15, 22, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 50px rgba(0, 0, 0, 0.55);
}
html.theme-dark .apollo-dropdown-option { color: #e2e8f0; }
html.theme-dark .apollo-dropdown-option:hover,
html.theme-dark .apollo-dropdown-option:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
}
html.theme-dark .apollo-dropdown-option.is-active {
  background: rgba(255, 255, 255, 0.28);
  color: #e2e8f0;
}

/* Dot indicator strip below the carousel — minimalist pill row. The button
   defaults (border, background, padding) need an explicit reset so the dots
   read as clean shapes, not chrome. The active dot stretches into a small
   pill with a soft accent glow; inactive dots are a faint hairline circle. */
.apollo-tools-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 0 6px;
}
.apollo-tools-dot {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ap-text-dim, #94a3b8);
  opacity: 0.30;
  cursor: pointer;
  transition:
    width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.apollo-tools-dot:hover {
  opacity: 0.55;
}
.apollo-tools-dot:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ap-cyan, #cbd5e1) 50%, transparent);
  outline-offset: 3px;
}
.apollo-tools-dot.is-active {
  width: 22px;
  opacity: 1;
  background: var(--ap-cyan, #64748b);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ap-cyan, #cbd5e1) 35%, transparent);
}
html.theme-dark .apollo-tools-dot {
  background: rgba(255, 255, 255, 0.50);
  opacity: 0.25;
}
html.theme-dark .apollo-tools-dot.is-active {
  background: var(--ap-cyan, #cbd5e1);
  opacity: 1;
}

/* =========================================================================
   PORTFOLIO CONSTELLATION (Charts → Constellation)
   Full-bleed 3D scene built with Three.js. Self-contained cosmic shell —
   forced dark gradient regardless of app theme so the stars/spheres read.
   ========================================================================= */

/* Constellation now lives inside Apollo as the default section. The stage
   has two themes: LIGHT (white background, blue stars) and DARK (Apollo's
   dark blue background). Header/eyebrow/title have been removed — the
   3D scene + legend + mic are everything. */
.apollo-constellation-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Constellation forces the Apollo DARK theme in BOTH light and dark modes —
   the 3D scene reads best on a deep navy background, so we never invert
   it. Stage background and all chrome inside (search, popup, pills) use
   the same dark values regardless of html.theme-dark. */
.constellation-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(100vh - 160px);
  min-height: 650px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 0% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(160deg, #111827, #050a18);   /* original dark-blue space — the canvas is transparent, so this shows through */
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: grab;
}
.constellation-stage:active { cursor: grabbing; }

/* Apollo 5 — full-screen focus mode. Opening a client expands the
   constellation to fill the entire screen; the client popup, search bar
   and mic ride along since they live inside the stage. */
body.cnst-fullscreen { overflow: hidden; }
.constellation-stage.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* Override the base rule's `height: calc(100vh - 360px)` — otherwise the
     explicit height wins over `inset:0` and the stage only covers the top. */
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  border: none;
  min-height: 0;
  animation: cnst-fullscreen-in 0.3s ease;
}
@keyframes cnst-fullscreen-in {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

/* Apollo 5 — constellation as a fixed background behind the KPIs / Dashboard
   views (mirrors how the scene sits behind QA / Underperformers). Only the 3D
   canvas shows; the Apollo chrome (search bar, popups, mic) is hidden. The
   layer is non-interactive and dimmed so the foreground cards stay readable. */
.constellation-stage.is-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  border-radius: 0;
  border: none;
  pointer-events: none;
  opacity: 0.5;
}
.constellation-stage.is-backdrop > *:not(canvas) { display: none !important; }
/* About-Apollo modal: the stage is moved INSIDE the modal as its first child.
   z-index:-1 (!important to beat any lingering is-fullscreen/is-backdrop) keeps
   it BEHIND the modal's translucent/blurred .modal-backdrop and the panel, in
   the modal's own stacking context — the only reliable way for the backdrop's
   blur to actually sample the planets. Only the 3D canvas shows. */
.constellation-stage.is-about-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
.constellation-stage.is-about-backdrop > *:not(canvas) { display: none !important; }
/* Lift the page content above the backdrop (the stage is appended to <body>,
   so without this it would paint over the views). */
body.cnst-backdrop .main { z-index: 1; }

/* Generic panels over the backdrop → blue crystal. Covers Management sections,
   Regions and Map (.card) and any card surface. Scoped to .main so body-level
   modals / popovers keep their solid backgrounds. */
body.cnst-backdrop .main .card,
body.cnst-backdrop .main .creatives-section,
body.cnst-backdrop .main .accounts-section,
body.cnst-backdrop .main .accounts-hero-stat,
body.cnst-backdrop .main .reports-card,
body.cnst-backdrop .main .reports-section {
  background: rgba(16, 24, 44, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
/* Card headers / table-ish header rows inside those panels → no solid fill. */
body.cnst-backdrop .main .card-header,
body.cnst-backdrop .main .creatives-section-head {
  background: transparent !important;
}
/* Tab / segment bars + their sliding thumbs. */
body.cnst-backdrop .main .mgmt-tabs,
body.cnst-backdrop .main .accounts-filter-pills {
  background: rgba(30, 48, 92, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
}
body.cnst-backdrop .main .mgmt-tabs .slide-thumb,
body.cnst-backdrop .main .accounts-filter-pills .slide-thumb {
  background: rgba(60, 90, 160, 0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30) !important;
}
/* Tables inside crystal panels. */
body.cnst-backdrop .main th,
body.cnst-backdrop .main .creatives-table thead th {
  background: rgba(30, 48, 92, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
body.cnst-backdrop .main td { border-color: rgba(255, 255, 255, 0.12) !important; }
body.cnst-backdrop .main tbody tr:hover td,
body.cnst-backdrop .main .creatives-table tbody tr:hover { background: rgba(47, 109, 255, 0.12) !important; }

/* Graphic Design / Design Studio (dz-*) — sub-nav cards, search field, client
   tiles and library/photo tiles → blue crystal. */
body.cnst-backdrop #view-management .dz-subtab,
body.cnst-backdrop #view-management .dz-client-card,
body.cnst-backdrop #view-management .dz-search-input,
body.cnst-backdrop #view-management .dz-bg-thumb,
body.cnst-backdrop #view-management .dz-photo-tile,
body.cnst-backdrop #view-management .dz-saved-card {
  background: rgba(16, 24, 44, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
body.cnst-backdrop #view-management .dz-search-input { color: #e5e7eb !important; }

/* Bounce My House / Event Hawk header — KPI tiles + the Switch-client search
   → blue crystal (the hero panel is a .card, already handled above). */
body.cnst-backdrop #view-eventhawk .metric {
  background: rgba(30, 48, 92, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
body.cnst-backdrop #view-eventhawk .eh-client-search-input {
  background: rgba(16, 24, 44, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #e5e7eb !important;
}
/* Campaigns table — Paused rows + expanded child tables get a black fill in the
   dark theme. Over the backdrop, swap them for a faint blue veil so paused rows
   read as dimmed (not black) while the active rows stay clear. */
body.cnst-backdrop #view-eventhawk .eh-tree-paused > td {
  background: rgba(30, 48, 92, 0.30) !important;
}
body.cnst-backdrop #view-eventhawk .eh-tree-children-cell,
body.cnst-backdrop #view-eventhawk .eh-subtable,
body.cnst-backdrop #view-eventhawk .eh-subtable tr.eh-tree-paused > td {
  background: rgba(16, 24, 44, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
body.cnst-backdrop #view-management .dz-subtab:hover,
body.cnst-backdrop #view-management .dz-client-card:hover {
  background: rgba(28, 40, 72, 0.6) !important;
  border-color: rgba(120, 180, 255, 0.45) !important;
}
body.cnst-backdrop #view-management .dz-subtab.is-active {
  background: rgba(47, 109, 255, 0.28) !important;
  border-color: rgba(120, 180, 255, 0.6) !important;
}

/* Over the constellation backdrop, the KPI / Dashboard cards become glossy
   crystal — translucent + blurred (same language as the dock) so the planets
   glow through while the numbers stay crisp and readable. */
body.cnst-backdrop #view-kpis .kpi,
body.cnst-backdrop #view-merlyn .kpi,
body.cnst-backdrop #view-merlyn .widget {
  background: rgba(16, 24, 44, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}
/* The widget's inner header/body carry their own opaque dark fills in the dark
   theme — clear them so the crystal container (and the planets behind) show. */
body.cnst-backdrop #view-merlyn .widget-header,
body.cnst-backdrop #view-merlyn .widget-body {
  background: transparent !important;
}
body.cnst-backdrop #view-merlyn .widget-header {
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}
/* Inner widget panels (list rows, snippets, tiles) carry their own opaque dark
   fills — soften them to a faint translucent so the blurred constellation shows
   through while the rows stay distinct and readable. */
body.cnst-backdrop #view-merlyn .mismatch-item,
body.cnst-backdrop #view-merlyn .task-item,
body.cnst-backdrop #view-merlyn .campaign-snippet,
body.cnst-backdrop #view-merlyn .widget-kpi,
body.cnst-backdrop #view-merlyn .widget-cal-row,
body.cnst-backdrop #view-merlyn .widget-cal-tile {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Calendar view — the grid surface becomes glossy crystal so the empty cells
   show the blurred constellation; event pills keep their colors. */
body.cnst-backdrop #view-calendar .cal-toolbar {
  background: rgba(16, 24, 44, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
/* Every remaining dark chip in the calendar chrome → blue crystal (no black). */
body.cnst-backdrop #view-calendar .cal-nav-btn,
body.cnst-backdrop #view-calendar .cal-tz-pick,
body.cnst-backdrop #view-calendar #cal-reminders,
body.cnst-backdrop .cal-nownext {
  background: rgba(30, 48, 92, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
body.cnst-backdrop #view-calendar .cal-board-thumb {
  background: rgba(60, 90, 160, 0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30) !important;
}
body.cnst-backdrop #view-calendar .cal-nav-btn:hover,
body.cnst-backdrop #view-calendar .cal-tz-pick:hover {
  background: rgba(47, 109, 255, 0.45) !important;
}
body.cnst-backdrop #view-calendar .cal-body {
  background: rgba(16, 24, 44, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
body.cnst-backdrop #view-calendar .cal-week-head,
body.cnst-backdrop #view-calendar .cal-month-head {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
body.cnst-backdrop #view-calendar .cal-day,
body.cnst-backdrop #view-calendar .cal-week-col {
  border-color: rgba(255, 255, 255, 0.14) !important;
}
body.cnst-backdrop #view-calendar .cal-day.is-other {
  background: rgba(0, 0, 0, 0.12) !important;
}
body.cnst-backdrop #view-calendar .cal-day.is-today,
body.cnst-backdrop #view-calendar .cal-week-col.is-today {
  background: rgba(47, 109, 255, 0.16) !important;
}
/* Hover over a day / column → soft blue wash, never black. */
body.cnst-backdrop #view-calendar .cal-day:hover,
body.cnst-backdrop #view-calendar .cal-week-col:hover,
body.cnst-backdrop #view-calendar .cal-day.is-other:hover {
  background: rgba(47, 109, 255, 0.14) !important;
}
body.cnst-backdrop #view-calendar .cal-day.is-today:hover,
body.cnst-backdrop #view-calendar .cal-week-col.is-today:hover {
  background: rgba(47, 109, 255, 0.24) !important;
}
body.cnst-backdrop #view-kpis .kpi:hover,
body.cnst-backdrop #view-merlyn .kpi:hover {
  background: rgba(28, 40, 72, 0.62) !important;
}
/* Keep the highlighted card tinted blue, just translucent + blurred. */
body.cnst-backdrop #view-kpis .kpi-highlight,
body.cnst-backdrop #view-merlyn .kpi-highlight {
  background: linear-gradient(135deg, rgba(47, 109, 255, 0.55), rgba(255, 255, 255, 0.40)) !important;
  border-color: rgba(120, 180, 255, 0.5) !important;
}

.constellation-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 13px;
  font-style: italic;
}

/* =========================================================================
   CONSTELLATION LOADER  v2 — orbital system
   A tilted orbital plane (three rings, each with a planet revolving around a
   glowing central sun) over a soft twinkling starfield, with a clean
   mission-control readout. All compositor-only (transform/opacity) so it stays
   smooth even while the WebGL scene builds on the main thread.
   ========================================================================= */
.constellation-loading {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Matches .constellation-stage's background exactly — this fades out
     once the scene builds, so any mismatch shows as a seam/bar during
     the transition. */
  background:
    radial-gradient(1200px 800px at 0% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(160deg, #111827, #050a18);
  display: block;
  pointer-events: none;
  transition: opacity 600ms cubic-bezier(0.45, 0, 0.55, 1);
}
.constellation-loading.is-leaving { opacity: 0; }

/* ----- Twinkling starfield ----- */
.cl2-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 1px at 12% 23%, rgba(255,255,255,0.9) 100%, transparent),
    radial-gradient(circle 1.3px at 30% 78%, rgba(255,255,255,0.8) 100%, transparent),
    radial-gradient(circle 1px at 60% 18%, rgba(224,231,255,0.9) 100%, transparent),
    radial-gradient(circle 1.4px at 80% 52%, rgba(255,255,255,0.7) 100%, transparent),
    radial-gradient(circle 1px at 22% 88%, rgba(203,213,225,0.8) 100%, transparent),
    radial-gradient(circle 1.1px at 92% 30%, rgba(255,255,255,0.7) 100%, transparent),
    radial-gradient(circle 1.2px at 8% 60%, rgba(255,255,255,0.6) 100%, transparent),
    radial-gradient(circle 1px at 48% 8%, rgba(196,181,253,0.8) 100%, transparent),
    radial-gradient(circle 1.3px at 70% 90%, rgba(255,255,255,0.7) 100%, transparent),
    radial-gradient(circle 1px at 38% 42%, rgba(255,255,255,0.5) 100%, transparent),
    radial-gradient(circle 1.2px at 88% 74%, rgba(196,181,253,0.7) 100%, transparent),
    radial-gradient(circle 1px at 18% 12%, rgba(255,255,255,0.7) 100%, transparent),
    radial-gradient(circle 1px at 54% 64%, rgba(255,255,255,0.5) 100%, transparent),
    radial-gradient(circle 1px at 4% 34%, rgba(255,255,255,0.6) 100%, transparent);
  background-repeat: no-repeat;
  animation: cl2-twinkle 4.5s ease-in-out infinite;
}
@keyframes cl2-twinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}

/* ----- Tilted orbital plane ----- */
.cl2-plane {
  position: absolute;
  left: 50%; top: 44%;
  width: 0; height: 0;
  transform: translate(-50%, -50%) perspective(720px) rotateX(64deg);
  transform-style: preserve-3d;
}
.cl2-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.16);
  transform: translate(-50%, -50%);
}
.cl2-ring-1 {
  width: 150px; height: 150px;
  border-color: rgba(255, 255, 255, 0.30);
  animation: cl2-orbit 5.5s linear infinite;
}
.cl2-ring-2 {
  width: 240px; height: 240px;
  border-color: rgba(255, 255, 255, 0.26);
  animation: cl2-orbit 9s linear infinite reverse;
}
.cl2-ring-3 {
  width: 340px; height: 340px;
  border-color: rgba(255, 255, 255, 0.20);
  animation: cl2-orbit 15s linear infinite;
}
/* The planet rides the top of its ring; rotating the ring revolves it. */
.cl2-dot {
  position: absolute;
  top: -6px; left: 50%;
  width: 12px; height: 12px;
  margin-left: -6px;
  border-radius: 50%;
}
.cl2-ring-1 .cl2-dot {
  background: radial-gradient(circle at 35% 30%, #f1f5f9, #94a3b8 70%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 22px rgba(255, 255, 255, 0.5);
}
.cl2-ring-2 .cl2-dot {
  width: 14px; height: 14px; margin-left: -7px; top: -7px;
  background: radial-gradient(circle at 35% 30%, #f1f5f9, #64748b 70%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 22px rgba(255, 255, 255, 0.5);
}
.cl2-ring-3 .cl2-dot {
  width: 10px; height: 10px; margin-left: -5px; top: -5px;
  background: radial-gradient(circle at 35% 30%, #e5e7eb, #94a3b8 70%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 22px rgba(255, 255, 255, 0.45);
}
@keyframes cl2-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ----- Central sun (upright, not on the tilted plane) ----- */
.cl2-sun {
  position: absolute;
  left: 50%; top: 44%;
  width: 0; height: 0;
}
.cl2-aura, .cl2-core {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cl2-aura {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255,0.30) 0%, rgba(255, 255, 255,0.12) 42%, transparent 70%);
  filter: blur(2px);
  animation: cl2-breathe 6s ease-in-out infinite;
}
.cl2-core {
  width: 64px; height: 64px;
  background: radial-gradient(circle at 38% 34%, #ffffff 0%, #e5e7eb 26%, #cbd5e1 60%, #64748b 100%);
  box-shadow:
    0 0 26px rgba(255, 255, 255, 0.70),
    0 0 60px rgba(255, 255, 255, 0.45);
  animation: cl2-pulse 3.4s ease-in-out infinite;
}
@keyframes cl2-breathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
  50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes cl2-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  50%      { transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.12); }
}

/* ----- Mission-control readout ----- */
.cl2-readout {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  z-index: 4;
  text-align: center;
}
/* Modern spinning ring loader (conic gradient arc with a hollow center). */
.cl2-orb {
  position: relative;
  width: 66px; height: 66px; border-radius: 50%;
  background: conic-gradient(from 90deg, transparent 0%, rgba(255, 255, 255,0.05) 25%, #cbd5e1 70%, #cbd5e1 92%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  filter: drop-shadow(0 0 10px rgba(255, 255, 255,0.55));
  animation: cl2-spin 1s linear infinite;
  margin-bottom: 4px;
}
.cl2-orb::after {
  content: ''; position: absolute;
  left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #e5e7eb;
  box-shadow: 0 0 12px 2px rgba(255, 255, 255,0.8);
}
@keyframes cl2-spin { to { transform: rotate(360deg); } }
.cl2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #94a3b8;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}
.cl2-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 8px #94a3b8;
  animation: cl2-blip 1.2s ease-in-out infinite;
}
@keyframes cl2-blip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
.cl2-welcome {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 55%, #9db8e8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.45));
  animation: cl2-text-fade 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.cl2-text {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.3);
  min-height: 16px;
  animation: cl2-text-fade 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cl2-text::after {
  content: '';
  display: inline-block;
  margin-left: 4px;
  width: 7px;
  height: 1em;
  background: #94a3b8;
  vertical-align: -2px;
  animation: cl2-blink 0.9s steps(2, end) infinite;
}
@keyframes cl2-blink { to { opacity: 0; } }
@keyframes cl2-text-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cl2-bar {
  width: 220px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.cl2-bar-fill {
  display: block;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, #64748b, #94a3b8, #94a3b8);
  border-radius: 999px;
  box-shadow: 0 0 12px #64748b;
  animation: cl2-bar-slide 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes cl2-bar-slide {
  0%   { width: 12%; transform: translateX(-40%); }
  50%  { width: 32%; transform: translateX(240%); }
  100% { width: 12%; transform: translateX(800%); }
}

@media (prefers-reduced-motion: reduce) {
  .cl2-stars, .cl2-ring, .cl2-aura, .cl2-core,
  .cl2-eyebrow-dot, .cl2-bar-fill { animation: none; }
}

.constellation-legend {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 28px;
}
.cnst-legend-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.10);
  font-size: 12px;
  color: #475569;
}
.cnst-legend-meta { gap: 18px; }
.cnst-legend-meta span strong { color: #0f172a; font-weight: 700; }
html.theme-dark .cnst-legend-group {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
html.theme-dark .cnst-legend-meta span strong { color: #f1f5f9; }
.cnst-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}
.cnst-swatch[style*="06b6d4"] { box-shadow: 0 0 10px rgba(255, 255, 255,0.7); }
.cnst-swatch[style*="6366f1"] { box-shadow: 0 0 10px rgba(255, 255, 255,0.7); }
.cnst-swatch[style*="f59e0b"] { box-shadow: 0 0 10px rgba(255, 255, 255,0.7); }
.cnst-swatch[style*="a855f7"] { box-shadow: 0 0 10px rgba(255, 255, 255,0.7); }

/* Hover tooltip — fixed position, follows the cursor */
.constellation-tooltip {
  position: fixed;
  z-index: 9999;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(8, 13, 35, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  color: #f1f5f9;
  pointer-events: none;
  max-width: 260px;
}
.cnst-tooltip-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f1f5f9;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cnst-tooltip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: #cbd5e1;
}
.cnst-tooltip-meta span {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-variant-numeric: tabular-nums;
}
.cnst-tooltip-level { font-weight: 700; }
.cnst-tooltip-l3 { color: #e2e8f0; border-color: rgba(255, 255, 255,0.4); background: rgba(255, 255, 255,0.12); }
.cnst-tooltip-l2 { color: #cbd5e1; border-color: rgba(255, 255, 255,0.4); background: rgba(255, 255, 255,0.12); }
.cnst-tooltip-l1 { color: #e2e8f0; border-color: rgba(255, 255, 255,0.4); background: rgba(255, 255, 255,0.12); }
.cnst-tooltip-l0 { color: #e2e8f0; border-color: rgba(255, 255, 255,0.4); background: rgba(255, 255, 255,0.12); }
.cnst-live { color: #e2e8f0 !important; background: rgba(255, 255, 255,0.15) !important; border-color: rgba(255, 255, 255,0.4) !important; font-weight: 700; }
.cnst-paused { color: #94a3b8 !important; font-style: italic; }
.cnst-tooltip-sub {
  margin-top: 6px;
  font-size: 11px;
  color: #94a3b8;
}

/* Ivy is parked. Hidden, not removed: the button, its ring, the VU meter and
   everything wired to it in setupConstellationVoice() stay exactly as they are,
   so bringing her back is deleting this one rule. Nothing else was touched.
   Uses the id so it wins over apollo-assistant.css, which also styles it. */
#constellation-mic { display: none; }
/* Same reason: the banner Ivy talks through ("Downloading voice model…",
   "Microphone blocked") must not appear either. The engine is unloaded in
   index.html, so this is only the last stop. */
#constellation-voice-banner { display: none !important; }

/* Floating mic button — bottom-right of the stage */
.constellation-mic {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 5;
  /* 44px is the floor, not a taste call: below it the button stops being a
     reliable touch target. Shrinking further would trade a real usability
     guarantee for a few pixels of chrome. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(135deg, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0.3));
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(255, 255, 255,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  padding: 0;
  font-family: inherit;
}
.constellation-mic svg {
  width: 19px;
  height: 19px;
  position: relative;
  z-index: 2;
}
.constellation-mic:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 40px rgba(255, 255, 255,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
.constellation-mic.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.constellation-mic-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid rgba(239,68,68,0);
  transition: border-color 0.2s ease;
}
.constellation-mic.is-listening {
  background: linear-gradient(135deg, #ef4444, #94a3b8);
  box-shadow: 0 12px 40px rgba(239,68,68,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.constellation-mic.is-listening .constellation-mic-ring {
  border-color: rgba(239,68,68,0.6);
  animation: mic-pulse 1.4s ease-out infinite;
}
@keyframes mic-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* VU meter — second ring scaled by --mic-level (0..1) set every frame from
   JS. Gives a real-time visual confirmation that the mic is actually
   hearing the user (vs. the recognition silently dying). */
.constellation-mic::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.55);
  opacity: calc(var(--mic-level, 0) * 0.95 + 0.05);
  transform: scale(calc(1 + var(--mic-level, 0) * 0.35));
  transition: transform 0.08s linear, opacity 0.12s linear, border-color 0.12s linear;
}
.constellation-mic.is-listening::before {
  border-color: rgba(239, 68, 68, 0.85);
}

/* Last-heard subline — sits just below the voice banner, dim white text on
   the dark stage. Interim transcripts are even dimmer so the user can tell
   when Google has actually finalized what was heard. */
.constellation-last-heard {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: rgba(224, 234, 255, 0.65);
  background: rgba(8, 13, 35, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 4px 12px;
  max-width: 78%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.constellation-last-heard.is-interim {
  color: rgba(224, 234, 255, 0.40);
  font-style: italic;
}
.constellation-last-heard[hidden] { display: none; }

/* Floating book button — bottom-right of the stage (replaced the voice mic).
   Opens the Client Notebook. Same glass-circle treatment as the old mic. */
.constellation-book {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 5;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(135deg, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0.3));
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(255, 255, 255,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  padding: 0;
  font-family: inherit;
}
.constellation-book svg { width: 24px; height: 24px; }
.constellation-book:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 40px rgba(255, 255, 255,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ===== Client Notebook modal — Notion-style: flat, neutral, borderless
   blocks. No gradients, no glow, no glass blur on content — only the
   backdrop keeps a blur since this still opens as a modal over Apollo. ==== */
.cnst-notebook[hidden] { display: none; }
.cnst-notebook { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cnst-notebook-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.cnst-notebook-panel {
  position: relative;
  width: min(1040px, 100%);
  height: min(680px, 100%);
  display: flex;
  flex-direction: column;
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.cnst-notebook-header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.cnst-notebook-icon { font-size: 15px; flex-shrink: 0; opacity: 0.85; }
.cnst-notebook-title { margin: 0; flex: 1; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.75); }
.cnst-notebook-close {
  width: 26px; height: 26px; border-radius: 5px; border: none; background: transparent;
  color: rgba(255,255,255,0.5); font-size: 15px; line-height: 1; cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
}
.cnst-notebook-close:hover { background: rgba(255,255,255,0.09); color: #fff; }

.cnst-notebook-body { flex: 1; display: grid; grid-template-columns: 232px 1fr; min-height: 0; }

.cnst-notebook-sidebar {
  display: flex; flex-direction: column; min-height: 0;
  background: rgba(0,0,0,0.16);
  border-right: 1px solid rgba(255,255,255,0.06);
}
.cnst-notebook-searchwrap { position: relative; padding: 10px 10px 6px; flex-shrink: 0; }
.cnst-notebook-search {
  width: 100%;
  border: none; border-radius: 5px; padding: 6px 10px 6px 28px;
  font-size: 13px; background: rgba(255,255,255,0.06) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat 8px center / 13px 13px;
  color: rgba(255,255,255,0.85);
  transition: background-color 0.12s ease;
}
.cnst-notebook-search::placeholder { color: rgba(255,255,255,0.35); }
.cnst-notebook-search:focus { outline: none; background-color: rgba(255,255,255,0.1); }

.cnst-notebook-tree { flex: 1; overflow-y: auto; padding: 2px 6px 14px; }
.cnst-notebook-group { margin-bottom: 1px; }
.cnst-notebook-group-header {
  display: flex; align-items: center; gap: 4px; padding: 7px 8px 4px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.4);
  cursor: pointer; user-select: none; border-radius: 4px;
  transition: color 0.12s ease;
}
.cnst-notebook-group-header:hover { color: rgba(255,255,255,0.65); }
.cnst-notebook-group-chevron {
  display: inline-flex; width: 10px; height: 10px; flex-shrink: 0; opacity: 0.7;
  transition: transform 0.12s ease;
}
.cnst-notebook-group.is-collapsed .cnst-notebook-group-chevron { transform: rotate(-90deg); }
.cnst-notebook-group.is-collapsed .cnst-notebook-group-items { display: none; }
.cnst-notebook-group-items { display: flex; flex-direction: column; gap: 0; }

.cnst-notebook-item {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 5px;
  cursor: pointer; color: rgba(255,255,255,0.6); text-align: left; border: none; background: transparent; font-family: inherit;
  transition: background 0.1s ease, color 0.1s ease;
}
.cnst-notebook-item:hover { background: rgba(255,255,255,0.055); color: rgba(255,255,255,0.85); }
.cnst-notebook-item.is-active { background: rgba(255,255,255,0.09); color: #fff; }
.cnst-notebook-item-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.25); }
.cnst-notebook-item-dot.is-live { background: #94a3b8; }
.cnst-notebook-item-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnst-notebook-empty-list { padding: 14px 8px; text-align: center; color: rgba(255,255,255,0.35); font-size: 12.5px; }

.cnst-notebook-page {
  position: relative;
  padding: 28px 48px 32px;
  overflow-y: auto; min-height: 0;
}
.cnst-notebook-empty { color: rgba(255,255,255,0.35); font-size: 13.5px; text-align: center; padding: 60px 20px; }

.cnst-notebook-breadcrumb {
  display: flex; align-items: center; gap: 5px; margin-bottom: 14px;
  font-size: 12px; color: rgba(255,255,255,0.4);
}
.cnst-notebook-breadcrumb .cnst-crumb-sep { opacity: 0.5; }
.cnst-notebook-breadcrumb .cnst-crumb-current { color: rgba(255,255,255,0.6); }

.cnst-notebook-page-head { margin-bottom: 20px; }
.cnst-notebook-page-emoji { display: block; font-size: 42px; line-height: 1; margin-bottom: 6px; }
.cnst-notebook-page-name { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: rgba(255,255,255,0.92); }
.cnst-notebook-page-props { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.cnst-notebook-prop {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: rgba(255,255,255,0.85);
}
.cnst-notebook-prop-label {
  display: flex; align-items: center; gap: 5px;
  width: 84px; flex-shrink: 0; color: rgba(255,255,255,0.4); font-weight: 500;
}
.cnst-notebook-prop.is-live .cnst-notebook-prop-value { color: #94a3b8; }

.cnst-notebook-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 18px 0 20px; }

.cnst-notebook-range { display: flex; gap: 4px; margin-bottom: 18px; }
.cnst-notebook-range .cnst-range-pill { flex: 0 0 auto; padding: 5px 14px; border-radius: 5px; box-shadow: none; }

.cnst-notebook-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 24px; min-height: 56px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; overflow: hidden; transition: opacity 0.15s ease; }
.cnst-notebook-kpis.is-loading { opacity: 0.5; }
.cnst-notebook-kpi { background: #1f1f1f; padding: 9px 8px; text-align: center; }
.cnst-notebook-kpi-icon { display: none; }
.cnst-notebook-kpi-label { font-size: 10.5px; color: rgba(255,255,255,0.4); font-weight: 500; }
.cnst-notebook-kpi-val { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.9); margin-top: 3px; }
.cnst-notebook-kpi-dash { color: rgba(255,255,255,0.25); }

.cnst-notebook-composer { display: flex; flex-direction: column; margin-bottom: 28px; }
/* Collapsed state — a single ghost affordance. Clicking it swaps in the
   full form below (see .cnst-notebook-composer-form). The [hidden]
   overrides are required: without them the unconditional `display: flex`
   below beats the browser's default `[hidden]{display:none}` (normal
   author rules always win over normal user-agent rules), so both the
   button and the form would render at once regardless of the attribute. */
.cnst-notebook-composer-cta[hidden],
.cnst-notebook-composer-form[hidden] { display: none; }
.cnst-notebook-composer-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; border: none; border-radius: 8px;
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.55);
  font-size: 13px; font-weight: 600; font-family: inherit; padding: 10px;
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
}
.cnst-notebook-composer-cta:hover {
  background: rgba(255, 255, 255, 0.14); color: #fff;
}
.cnst-notebook-composer-cta-plus { font-size: 15px; font-weight: 400; line-height: 1; }
/* Expanded form — a proper bordered card so it reads as a distinct
   "compose" surface rather than loose fields floating in the page. */
.cnst-notebook-composer-form {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
}
.cnst-notebook-composer-top { display: flex; align-items: center; gap: 8px; }

/* Emoji picker — button + popover grid of preset emoji. A raw text input
   depended on the user knowing the OS emoji-picker shortcut; this doesn't. */
/* [hidden] guards: both popovers below get an unconditional `display`,
   which (per the composer-cta/form fix above) beats the browser's default
   [hidden]{display:none} unless we re-assert it explicitly here. */
.cnst-notebook-emoji-menu[hidden],
.cnst-notebook-category-menu[hidden] { display: none; }
.cnst-notebook-emoji-wrap { position: relative; flex-shrink: 0; }
.cnst-notebook-emoji-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cnst-notebook-emoji-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(255, 255, 255, 0.4); }
.cnst-notebook-emoji-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  width: 152px; padding: 6px; border-radius: 9px;
  background: #1c2333; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.cnst-notebook-emoji-opt {
  width: 32px; height: 32px; border: none; border-radius: 6px; background: transparent;
  font-size: 16px; cursor: pointer; transition: background 0.1s ease;
}
.cnst-notebook-emoji-opt:hover { background: rgba(255, 255, 255, 0.18); }

/* Category picker — custom popover instead of a native <select>, whose
   option list ignores our dark styling and renders unreadable white text
   on a white system background. */
.cnst-notebook-category-wrap { position: relative; flex: 1; min-width: 0; }
.cnst-notebook-category-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.55); font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cnst-notebook-category-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(255, 255, 255, 0.4); }
.cnst-notebook-category-btn.has-value { color: var(--cat-color, #fff); border-color: var(--cat-color, rgba(255, 255, 255,0.5)); }
.cnst-notebook-category-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnst-notebook-category-chevron { flex-shrink: 0; opacity: 0.6; }
.cnst-notebook-category-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 1px; padding: 5px; border-radius: 9px;
  background: #1c2333; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.cnst-notebook-category-opt {
  display: flex; align-items: center; gap: 8px;
  border: none; border-radius: 6px; background: transparent; text-align: left;
  color: rgba(255,255,255,0.75); font-size: 12.5px; font-family: inherit; font-weight: 500;
  padding: 7px 8px; cursor: pointer; transition: background 0.1s ease;
}
.cnst-notebook-category-opt:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cnst-notebook-category-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cnst-notebook-entry-emoji { margin-right: 1px; }
.cnst-notebook-entry-meta { margin-top: 5px; }
.cnst-notebook-entry-category {
  display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; letter-spacing: 0.01em;
}
.cnst-notebook-entry-category[data-cat="meeting"]  { color: #cbd5e1; background: rgba(255, 255, 255, 0.16); }
.cnst-notebook-entry-category[data-cat="ad_tweak"] { color: #94a3b8; background: rgba(255, 255, 255, 0.16); }
.cnst-notebook-entry-category[data-cat="io_tweak"] { color: #64748b; background: rgba(255, 255, 255, 0.16); }
.cnst-notebook-entry-category[data-cat="personal"] { color: #cbd5e1; background: rgba(255, 255, 255, 0.16); }
.cnst-notebook-entry-category[data-cat="other"]    { color: #94a3b8; background: rgba(148, 163, 184, 0.16); }
.cnst-notebook-composer-form textarea {
  resize: vertical; min-height: 56px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(0,0,0,0.18) !important; color: rgba(255,255,255,0.9) !important;
  padding: 8px 10px; font-size: 13.5px; font-family: inherit; line-height: 1.45;
}
.cnst-notebook-composer-form textarea:focus { outline: none; border-color: #94a3b8 !important; }
.cnst-notebook-composer-actions { display: flex; justify-content: space-between; align-items: center; }
.cnst-notebook-composer-actions-right { display: flex; align-items: center; gap: 4px; }
.cnst-notebook-important-toggle {
  border: none; background: transparent; color: rgba(255,255,255,0.4);
  border-radius: 4px; padding: 4px 8px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
.cnst-notebook-important-toggle:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); }
.cnst-notebook-important-toggle.is-active { color: #94a3b8; }
.cnst-notebook-composer-cancel {
  border: none; background: transparent; color: rgba(255,255,255,0.4);
  border-radius: 4px; padding: 6px 10px; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
.cnst-notebook-composer-cancel:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.cnst-notebook-add-btn {
  border: none; background: #64748b;
  color: #fff; border-radius: 4px; padding: 6px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background 0.12s ease;
}
.cnst-notebook-add-btn:hover { background: #1c72c4; }
.cnst-notebook-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cnst-notebook-entries-wrap { display: flex; flex-direction: column; gap: 20px; }
.cnst-notebook-empty-entries { font-size: 12.5px; color: rgba(255,255,255,0.3); font-style: italic; padding: 4px 0; }
.cnst-notebook-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; cursor: grab; user-select: none; }
.cnst-notebook-section-head:active { cursor: grabbing; }
.cnst-notebook-section-title { margin: 0; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.4); }
.cnst-notebook-section-title--important { color: #94a3b8; }
/* Notebook "page" — grab-and-drag (or touch-swipe) horizontally to flip
   between pages, same threshold/direction as the ‹ › arrows above it. */
.cnst-notebook-entries-list {
  display: flex; flex-direction: column;
  touch-action: pan-y; cursor: grab; user-select: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.cnst-notebook-entries-list.is-dragging { transition: none; cursor: grabbing; }
.cnst-notebook-entry {
  position: relative;
  padding: 5px 0 5px 4px; margin: 0 -4px;
  border-radius: 4px;
  transition: background 0.1s ease;
}
.cnst-notebook-entry:hover { background: rgba(255,255,255,0.03); }
.cnst-notebook-entry:hover .cnst-notebook-entry-actions { opacity: 1; }
.cnst-notebook-entry.is-important .cnst-notebook-entry-text { border-left: 2px solid #94a3b8; padding-left: 9px; }
.cnst-notebook-entry-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.cnst-notebook-entry-date { font-size: 11px; color: rgba(255,255,255,0.35); }
.cnst-notebook-entry-author { font-size: 11px; color: rgba(255,255,255,0.3); }
.cnst-notebook-entry-text { font-size: 14.5px; color: rgba(255,255,255,0.85); white-space: pre-wrap; line-height: 1.5; }
/* While editing, this element holds injected markup (textarea + Save/Cancel),
   not note text — pre-wrap would otherwise render the template literal's own
   indentation/newlines as visible blank space, making the row look way
   taller than it should. */
.cnst-notebook-entry.is-editing .cnst-notebook-entry-text { white-space: normal; }
.cnst-notebook-entry.is-task .cnst-notebook-entry-text { display: flex; align-items: flex-start; gap: 9px; border-left: none !important; padding-left: 0 !important; }
.cnst-notebook-entry.is-task.is-important .cnst-notebook-entry-text-content { border-left: 2px solid #94a3b8; padding-left: 9px; }
.cnst-notebook-task-check {
  flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; border-radius: 3px;
  border: 1.5px solid rgba(255,255,255,0.3); background: transparent; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cnst-notebook-task-check svg { width: 10px; height: 10px; opacity: 0; stroke: #fff; transition: opacity 0.1s ease; }
.cnst-notebook-entry.is-done .cnst-notebook-task-check { background: #64748b; border-color: #64748b; }
.cnst-notebook-entry.is-done .cnst-notebook-task-check svg { opacity: 1; }
.cnst-notebook-entry.is-done .cnst-notebook-entry-text-content { color: rgba(255,255,255,0.4); text-decoration: line-through; }
/* One solid opaque toolbar panel holding all 3 buttons — not 3 separate
   pills with gaps between them, which let the note's own text underneath
   show through the gaps and read as crowded/cluttered. */
.cnst-notebook-entry-actions {
  position: absolute; top: 4px; right: 2px;
  display: flex; gap: 2px;
  padding: 3px; border-radius: 8px;
  background: #23242b; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  opacity: 0; transition: opacity 0.14s ease;
}
/* Editing hides the hover-only row above — it's absolutely positioned at
   the same spot as the Save/Cancel row (.cnst-notebook-entry-edit-actions,
   in normal flow below the textarea), so left alone the two would overlap
   and swallow clicks meant for Save/Cancel. */
.cnst-notebook-entry.is-editing > .cnst-notebook-entry-actions { display: none; }
.cnst-notebook-entry-action {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none;
  padding: 4px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,0.5); cursor: pointer; font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
.cnst-notebook-entry-action svg { flex-shrink: 0; opacity: 0.85; }
.cnst-notebook-entry-action:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.cnst-notebook-entry-action.is-active { color: #94a3b8; background: rgba(255, 255, 255, 0.16); }
.cnst-notebook-entry-action--danger:hover { background: rgba(239, 68, 68, 0.18); color: #f87171; }
/* Edit mode — same bordered "compose" card as the add-note form, so
   editing (emoji + category + text) reads as the same surface instead of
   bare fields floating inside the entry row. */
.cnst-notebook-entry-edit-form {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 9px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
}
.cnst-notebook-entry-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }
/* !important: the global `html.theme-dark textarea` rule otherwise paints
   this flat black with a glowing blue outline on focus — jarring against
   the rest of this always-dark panel (same fix as the composer textarea). */
.cnst-notebook-entry-edit-area {
  /* display:block — textarea defaults to inline-block, which leaves a
     ~4-5px phantom gap below it (baseline space reserved for the trailing
     whitespace text node after the closing tag). Block avoids that. */
  display: block; width: 100%; min-height: 50px; resize: vertical; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(0,0,0,0.18) !important; color: rgba(255,255,255,0.9) !important;
  padding: 8px 10px; font-size: 13.5px; font-family: inherit; line-height: 1.45; margin-bottom: 0;
}
.cnst-notebook-entry-edit-area:focus { outline: none; border-color: #94a3b8 !important; }

/* "Did you mean?" pills — shown under the last-heard line when voice didn't
   match a client but had near misses. Click flies + opens the popup. */
.constellation-suggestions {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8, 13, 35, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  max-width: 86%;
}
.constellation-suggestions[hidden] { display: none; }
.cnst-sugg-label {
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(224, 234, 255, 0.55);
  padding: 0 4px;
}
.cnst-sugg-pill {
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  cursor: pointer;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cnst-sugg-pill:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}
.cnst-sugg-pill.lvl-3 { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.16); }
.cnst-sugg-pill.lvl-2 { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.16); }
.cnst-sugg-pill.lvl-1 { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.16); }

/* Voice feedback banner — top-center of stage */
.constellation-voice-banner {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(8, 13, 35, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.14);
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  max-width: 80%;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  animation: banner-in 0.25s ease-out;
}
.constellation-voice-banner.is-listening {
  border-color: rgba(239, 68, 68, 0.5);
  color: #fecaca;
}
.constellation-voice-banner.is-success {
  border-color: rgba(255, 255, 255, 0.5);
  color: #e2e8f0;
}
.constellation-voice-banner.is-error {
  border-color: rgba(255, 255, 255, 0.5);
  color: #e2e8f0;
}
@keyframes banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Top bar — search bar (left) + APOLLO V6.0 badge (right), as flex
   children of the same row so they always share the same vertical center
   regardless of their own heights. */
.constellation-topbar {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  /* Above the Ask Apollo popup (z-index 5) so the live suggestions dropdown,
     which drops down into the popup's area, paints on top instead of behind. */
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* This row now spans the full stage width, but most of that width is
     empty space between the search bar and the badge — without this, the
     empty area still captures clicks (it's a real box, just with no
     visible content there) and blocks whatever sits underneath it, like
     the client popup's close button. Only the two actual children should
     be clickable. */
  pointer-events: none;
}
.constellation-topbar > * { pointer-events: auto; }
/* The client popup (#constellation-popup) opens at the same corner
   (top:22px; right:22px) as the badge, so the two collide when a client
   is open. Hide the badge whenever the popup is showing — reacts to its
   [hidden] toggle directly, no JS state to keep in sync. */
.constellation-stage:has(#constellation-popup:not([hidden])) #apollo-about-trigger {
  display: none;
}

/* Glossy search bar. The "Apollo" prefix is a fixed visual label so the
   user always sees the command form "Apollo <client>". Suggestions drop
   down beneath the input. Always uses the dark theme inside the
   constellation (we never invert it). `position: relative` (not absolute
   — the .constellation-topbar row above handles positioning now) so the
   suggestions dropdown still anchors to this bar specifically. */
.constellation-search {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 14px;
  /* Frosted glass (css.glass recipe), matching the APOLLO badge opposite it
     and the dock below: a neutral light tint that picks up whatever planets
     drift behind it, rather than the flat navy panel this used to be. */
  border-radius: 16px;
  background: rgba(182, 182, 182, 0.36);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  /* Match the Ask Apollo popup width below so they line up. */
  width: min(380px, 38vw);
  box-sizing: border-box;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.constellation-search:focus-within {
  background: rgba(200, 200, 200, 0.42);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.18);
}
.constellation-search-prefix {
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  /* Neutral on the frosted glass — the tinted blue read as a leftover accent
     against the new material. */
  color: #f1f5f9;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.constellation-search-input,
html.theme-dark .constellation-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #f1f5f9;
  padding: 2px 0;
}
.constellation-search-input::placeholder,
html.theme-dark .constellation-search-input::placeholder {
  color: rgba(241, 245, 249, 0.45);
  font-style: italic;
}
.constellation-search-input:focus,
html.theme-dark .constellation-search-input:focus {
  background: transparent;
  background-color: transparent;
  border-color: transparent;
  outline: none;
  box-shadow: none;
}
/* Clear (×) — only appears when there's text in the input. The [hidden]
   override is critical: `display: inline-flex` on the base rule otherwise
   beats the `hidden` HTML attribute and leaves the × visible at rest.
   Background stays transparent so the glyph blends into the search bar. */
.constellation-search-clear[hidden] { display: none; }
.constellation-search-clear {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: rgba(224, 234, 255, 0.55);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
  transition: color 0.15s ease;
}
.constellation-search-clear:hover { color: #f1f5f9; }
.constellation-search-clear:focus,
.constellation-search-clear:focus-visible { outline: none; box-shadow: none; }

.constellation-search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  /* Same glass family as the search bar above (radius, white rim), but the
     fill stays dark and near-opaque: this one carries a list of client names
     over drifting planets, and the light 36% tint that suits the bar would
     leave that text competing with whatever passes behind it. */
  border-radius: 16px;
  background: rgba(10, 20, 48, 0.92);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  padding: 6px;
}
.cnst-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #f1f5f9;
  transition: background 0.10s ease;
}
.cnst-suggest-item:hover,
.cnst-suggest-item.is-active {
  background: rgba(255, 255, 255, 0.15);
}
.cnst-suggest-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnst-suggest-pill {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}
.cnst-suggest-pill.lvl-3 { background: rgba(255, 255, 255, 0.18); color: #e2e8f0; }
.cnst-suggest-pill.lvl-2 { background: rgba(255, 255, 255, 0.20); color: #cbd5e1; }
.cnst-suggest-pill.lvl-1 { background: rgba(255, 255, 255, 0.20); color: #e2e8f0; }
.cnst-suggest-empty {
  padding: 14px;
  text-align: center;
  color: rgba(224, 234, 255, 0.45);
  font-size: 12.5px;
  font-style: italic;
}

/* Ask Apollo popup — left side, only visible when a client is selected.
   Same dimensions and glassmorphism as the right client popup so the
   "ask a question" feature is hard to miss whenever you have a client open.
   The [hidden] override is required because `display: flex` on the base
   rule would otherwise win against the HTML `hidden` attribute. */
.constellation-popup-left[hidden] { display: none; }
.constellation-popup-left {
  position: absolute;
  top: 74px;  /* snug gap below the "Apollo say a client name…" search bar */
  left: 22px;
  z-index: 5;
  width: min(380px, 38vw);
  max-height: calc(100% - 96px);
  /* Safety net: without this, a max-height clamp on a flex container
     doesn't actually stop children from visually spilling past it (default
     overflow:visible just lets content paint outside the rounded box) —
     the entries preview cap below is the real fix, this just guarantees
     nothing can ever spill past the card's own rounded corners. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 16px 18px;
  border-radius: 18px;
  background: rgba(10, 20, 48, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
/* Inline Client Notebook — reuses the modal's .cnst-notebook-page styling
   (shared class), just compacted to fit the narrower left panel. */
.cnst-leftnb-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 2px 4px;
}
.cnst-notebook-inline-head { display: flex; align-items: center; gap: 8px; }
.cnst-notebook-inline-icon { font-size: 18px; line-height: 1; }
.cnst-notebook-inline-label { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.75); letter-spacing: 0.01em; }
.cnst-leftnb-page .cnst-notebook-divider { margin: 12px 0 14px; }
.cnst-leftnb-page .cnst-notebook-composer { margin-bottom: 18px; }
.cnst-leftnb-page .cnst-notebook-entries-wrap { gap: 14px; }
/* Review Queue's embedded Notebook (Weekly Review Queue card, apollo-shell.css
   .review-drop / .review-drop-col-notebook) — same compaction as the
   constellation's inline panel, just sized by its column (half the card's
   width, see .review-drop-split) instead of a fixed side-panel width. */
.cnst-reviewnb-page {
  padding: 2px 2px 4px;
}
.cnst-reviewnb-page .cnst-notebook-divider { margin: 12px 0 14px; }
.cnst-reviewnb-page .cnst-notebook-composer { margin-bottom: 18px; }
.cnst-reviewnb-page .cnst-notebook-entries-wrap { gap: 14px; }
/* Page turner — sits beside the section title (see .cnst-notebook-section-head).
   Important caps at 3 / page, Notes at 4 / page (NOTEBOOK_IMPORTANT_PER_PAGE /
   NOTEBOOK_NOTES_PER_PAGE in app.js) — a long history flips through short
   "sheets" (drag the list below, or use these arrows) instead of growing
   the panel into one long unreadable scroll. */
.cnst-notebook-pager { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cnst-notebook-pager-btn {
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 4px; background: transparent;
  color: #cbd5e1; font-size: 12px; line-height: 1; cursor: pointer; transition: background 0.12s ease;
}
.cnst-notebook-pager-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.cnst-notebook-pager-btn:disabled { color: rgba(255,255,255,0.18); cursor: default; }
.cnst-notebook-pager-label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.35); min-width: 22px; text-align: center; }

/* "Account read" — its OWN popup, anchored bottom-left of the stage, separate
   from the Client Notebook panel above it. Plain-language what's-good / what-to-look-at. */
.constellation-brief[hidden] { display: none; }
.constellation-brief {
  position: absolute;
  left: 22px;
  /* JS sets the exact `top` just under the Client Notebook panel; this is
     the fallback if measuring isn't possible. */
  top: 424px;
  z-index: 5;
  width: min(380px, 38vw);
  max-height: 44vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(10, 20, 48, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.cnst-brief-head { display: flex; flex-direction: column; gap: 2px; }
.cnst-brief-title-main {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #e2e8f0;
}
.cnst-brief-sub {
  font-size: 10.5px; color: #64748b;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}
.cnst-brief-group { display: flex; flex-direction: column; gap: 5px; }
.cnst-brief-grouptitle {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.cnst-brief-good .cnst-brief-grouptitle { color: #cbd5e1; }
.cnst-brief-bad .cnst-brief-grouptitle { color: #cbd5e1; }
.cnst-brief-alert .cnst-brief-grouptitle { color: #f87171; }
.cnst-brief-idea .cnst-brief-grouptitle { color: #cbd5e1; }
.cnst-brief-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cnst-brief-list li {
  position: relative; padding-left: 16px;
  font-size: 12px; line-height: 1.45; color: #cbd5e1;
}
.cnst-brief-list li::before {
  content: ''; position: absolute; left: 4px; top: 7px;
  width: 5px; height: 5px; border-radius: 50%;
}
/* Blue palette throughout — red is reserved for true alerts (paused / no pixel). */
.cnst-brief-good .cnst-brief-list li::before { background: #cbd5e1; box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); }
.cnst-brief-bad .cnst-brief-list li::before { background: #cbd5e1; box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); }
.cnst-brief-alert .cnst-brief-list li::before { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.7); }
.cnst-brief-idea .cnst-brief-list li::before { background: #cbd5e1; box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); }
.cnst-brief-alert { padding: 6px 8px; border-radius: 8px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); }
.cnst-brief-none { font-size: 11.5px; color: #64748b; font-style: italic; }

/* Client popup — floats on the right side of the stage. Shows header + KPIs
   immediately, then async-fills the active ads grid. Always dark themed.
   The [hidden] override is critical: `display: flex` on the base rule would
   otherwise override the `hidden` HTML attribute and leave the popup visible
   even with no client selected. */
.constellation-popup[hidden] { display: none; }
.constellation-popup {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 6;
  width: min(380px, 38vw);
  max-height: calc(100% - 44px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: rgba(10, 20, 48, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow-x: hidden;
  overflow-y: auto;
  animation: cnst-popup-in 0.22s ease-out;
}
@keyframes cnst-popup-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cnst-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(15, 23, 42, 0.65);
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.cnst-popup-close:hover { background: rgba(255, 255, 255, 0.20); color: #f1f5f9; }

.cnst-popup-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 44px 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cnst-popup-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.06);
}
.cnst-popup-headblock { min-width: 0; flex: 1 1 auto; }
.cnst-popup-name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cnst-popup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: #cbd5e1;
}
.cnst-popup-meta .pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
}
.cnst-popup-meta .pill.lvl-3 { background: rgba(255, 255, 255, 0.18); color: #e2e8f0; font-weight: 700; }
.cnst-popup-meta .pill.lvl-2 { background: rgba(255, 255, 255, 0.20); color: #cbd5e1; font-weight: 700; }
.cnst-popup-meta .pill.lvl-1 { background: rgba(255, 255, 255, 0.20); color: #e2e8f0; font-weight: 700; }
.cnst-popup-meta .pill.live  { background: rgba(255, 255, 255, 0.16); color: #e2e8f0; font-weight: 700; }
.cnst-popup-meta .pill.paused { background: rgba(255, 255, 255, 0.06); color: #94a3b8; font-style: italic; }

/* Date range pill row — sits between the header and the KPIs. Clicking a
   pill re-fetches insights + ads for that range. */
.cnst-popup-range {
  display: flex;
  gap: 4px;
  padding: 12px 18px 4px;
}
.cnst-range-pill {
  flex: 1 1 auto;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cnst-range-pill:hover { color: #f1f5f9; border-color: rgba(255, 255, 255, 0.30); }
.cnst-range-pill.is-active {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  color: #f1f5f9;
}

.cnst-popup-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px 18px 6px;
}
.cnst-kpi {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cnst-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 4px;
}
.cnst-kpi-value {
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
}

.cnst-popup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 18px 14px;
}
.cnst-popup-actions .btn {
  width: 100%;
  font-size: 12px;
  padding: 7px 12px;
}
/* The constellation popup is forced dark in both themes — so the global
   light-mode .btn-ghost (dark text on transparent) is invisible on the
   dark popup background. Force the ghost variant to light-on-dark here. */
.cnst-popup-actions .btn-ghost,
html.theme-dark .cnst-popup-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.30);
}
.cnst-popup-actions .btn-ghost:hover,
html.theme-dark .cnst-popup-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  color: #f1f5f9;
}
.cnst-popup-actions .btn-ghost:disabled,
html.theme-dark .cnst-popup-actions .btn-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Voice commands palette — clickable rows under the action buttons. Each
   row shows the friendly label, the exact "Apollo, ..." phrase to say, and
   a mic icon hinting that voice triggers it too. Glossy styling matches
   the popup. */
.cnst-popup-commands {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 18px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}
.cnst-cmds-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0 6px;
}
.cnst-cmds-eyebrow {
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cbd5e1;
}
.cnst-cmds-hint {
  font-size: 10px;
  color: #94a3b8;
  font-style: italic;
}
.cnst-cmd-row {
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.06));
  cursor: pointer;
  text-align: left;
  color: #f1f5f9;
  font: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}
/* Glossy highlight line at the top of each card */
.cnst-cmd-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  pointer-events: none;
}
.cnst-cmd-row:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.12));
  box-shadow:
    0 8px 24px rgba(255, 255, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cnst-cmd-row:active { transform: translateY(0); }
.cnst-cmd-row:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 1px;
}
.cnst-cmd-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}
.cnst-cmd-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cnst-cmd-label {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cnst-cmd-phrase {
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  color: rgba(224, 234, 255, 0.55);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cnst-cmd-mic { color: rgba(255, 255, 255, 0.70); flex: 0 0 auto; }
.cnst-cmd-row:hover .cnst-cmd-mic { color: #e2e8f0; }

/* Action popup — center-stage overlay shown when a voice/click command
   fires. Sits above both the constellation canvas and the client popup.
   Glossy panel; closes on X, ESC, or backdrop click. */
.cnst-action-popup {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cnst-action-popup[hidden] { display: none; }
.cnst-action-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 24, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
  animation: cnst-action-fade 0.18s ease-out;
}
.cnst-action-panel {
  position: relative;
  width: min(520px, 78%);
  max-height: 78%;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background:
    radial-gradient(800px 500px at 0% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(600px 400px at 100% 100%, rgba(255, 255, 255, 0.10), transparent 60%),
    linear-gradient(160deg, rgba(15, 25, 55, 0.96), rgba(8, 13, 35, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 32px 80px rgba(0, 0, 0, 0.65),
    0 0 48px rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
  pointer-events: auto;
  animation: cnst-action-in 0.22s ease-out;
}
@keyframes cnst-action-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cnst-action-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cnst-action-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}
.cnst-action-icon { font-size: 20px; }
.cnst-action-title {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f1f5f9;
}
.cnst-action-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.cnst-action-close:hover { background: rgba(255, 255, 255, 0.16); color: #f1f5f9; }
.cnst-action-subtitle {
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #e2e8f0;
  margin-bottom: 12px;
}
.cnst-action-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.55;
  color: #f1f5f9;
}

/* Legacy in-popup result styles (kept in case someone embeds it). The
   action popup above is the canonical UI now. */
.cnst-popup-result {
  margin: 0 18px 14px;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.25);
  color: #f1f5f9;
}
.cnst-popup-result[hidden] { display: none; }
.cnst-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 10px;
}
.cnst-result-icon { font-size: 16px; }
.cnst-result-title {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cnst-result-close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.cnst-result-close:hover { background: rgba(255, 255, 255, 0.14); color: #f1f5f9; }
.cnst-result-body { font-size: 12.5px; line-height: 1.5; color: #cbd5e1; }
.cnst-result-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-style: italic;
}
.cnst-result-empty { color: #94a3b8; font-style: italic; padding: 4px 0; }
.cnst-result-error { color: #fca5a5; padding: 4px 0; }
.cnst-result-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cnst-result-list li { color: #f1f5f9; }
.cnst-result-mistakes li::marker { color: #fca5a5; }
.cnst-result-improve li::marker { color: #e2e8f0; }

/* Best-campaign card */
.cnst-result-camp {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 8px;
}
.cnst-result-camp-runner {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}
.cnst-result-camp-rank {
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #e2e8f0;
  margin-bottom: 4px;
}
.cnst-result-camp-name {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cnst-result-camp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11.5px;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
.cnst-result-camp-stats strong { color: #94a3b8; font-weight: 600; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.cnst-result-note {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
  margin-top: 6px;
}

/* Compare table */
.cnst-result-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.cnst-result-compare th {
  text-align: left;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cnst-result-compare td {
  padding: 6px;
  font-variant-numeric: tabular-nums;
  color: #f1f5f9;
}
.cnst-result-compare tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.cnst-result-compare td:first-child { color: #94a3b8; font-weight: 600; }
.cnst-delta.up   { color: #e2e8f0; font-weight: 700; }
.cnst-delta.down { color: #fca5a5; font-weight: 700; }
.cnst-delta.flat { color: #94a3b8; }

/* Q&A bank answer formatting — used inside #cnst-action-body when a voice
   question hits an entry from voice-qa-bank.js (or the computed fallback). */
.cnst-action-body p { margin: 0 0 10px; }
.cnst-action-body p:last-child { margin-bottom: 0; }
.qa-list {
  margin: 0 0 10px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qa-list li { color: #f1f5f9; line-height: 1.5; }
.qa-mistakes li::marker { color: #fca5a5; }
.qa-improve  li::marker { color: #e2e8f0; }
.qa-wins     li::marker { color: #e2e8f0; }
/* Scripts to read to the client — quoted block, italic, treated like dialog. */
.qa-script {
  margin: 6px 0 10px;
  padding: 10px 12px 10px 14px;
  border-left: 3px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #f1f5f9;
  font-style: italic;
  white-space: pre-wrap;
  line-height: 1.55;
}
.qa-script::before { content: '“'; margin-right: 2px; opacity: 0.5; }
.qa-script::after  { content: '”'; margin-left:  2px; opacity: 0.5; }
.qa-verdict {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 4px 0 10px;
}
.qa-verdict.qa-good { background: rgba(255, 255, 255, 0.14); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.30); }
.qa-verdict.qa-ok   { background: rgba(255, 255, 255, 0.12); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.30); }
.qa-verdict.qa-warn { background: rgba(255, 255, 255, 0.14); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.32); }
.qa-verdict.qa-bad  { background: rgba(239, 68, 68, 0.14);  color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.32); }
.qa-meta-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
}
.qa-meta-line:last-of-type { border-bottom: none; }
.qa-meta-line span { color: #94a3b8; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.qa-meta-line strong { color: #f1f5f9; font-size: 13.5px; }
.qa-note {
  margin-top: 8px;
  font-size: 11.5px;
  color: #94a3b8;
  font-style: italic;
}

/* "Ask a question" UI inside the action popup — typed input + live
   suggestions from the Q&A bank. Glossy, single-color theme matching
   the popup. The Apollo prefix is a fixed label so the user always
   sees the command form "Apollo, <question>". */
.cnst-ask { display: flex; flex-direction: column; gap: 10px; }
.cnst-ask-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.30);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cnst-ask-bar:focus-within {
  border-color: rgba(255, 255, 255, 0.70);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.cnst-ask-prefix {
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e2e8f0;
  white-space: nowrap;
  user-select: none;
}
.cnst-ask-input,
html.theme-dark .cnst-ask-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #f1f5f9;
  padding: 0;
}
.cnst-ask-input::placeholder,
html.theme-dark .cnst-ask-input::placeholder { color: rgba(224, 234, 255, 0.45); font-style: italic; }
.cnst-ask-input:focus,
html.theme-dark .cnst-ask-input:focus {
  background: transparent;
  background-color: transparent;
  border-color: transparent;
  outline: none;
  box-shadow: none;
}
.cnst-ask-hint {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
  padding: 0 2px;
}
/* What a skill answers with, when a command was typed into the ask box instead
   of a question. One sentence, no chrome: the thing asked for has already
   happened by the time this paints. */
.cnst-ask-done {
  margin: 4px 2px;
  font-size: 14px;
  line-height: 1.5;
  color: #e2e8f0;
}
.cnst-ask-suggestions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 280px;
  overflow-y: auto;
}
.cnst-ask-suggestions[hidden] { display: none; }
.cnst-ask-suggest {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #f1f5f9;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cnst-ask-suggest:hover,
.cnst-ask-suggest.is-active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.42);
}
.cnst-ask-suggest-icon { font-size: 14px; line-height: 1; text-align: center; }
.cnst-ask-suggest-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: #f1f5f9;
}
.cnst-ask-suggest-score {
  font-family: var(--ap-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e2e8f0;
}
.cnst-ask-no-match {
  padding: 10px 12px;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  text-align: center;
}

.cnst-popup-ads {
  flex: 0 0 auto;
  padding: 4px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cnst-popup-ads-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0 10px;
}
.cnst-popup-ads-head h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cbd5e1;
}
.cnst-popup-ads-status {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}
.cnst-popup-ads-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cnst-ad-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cnst-ad-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
}
.cnst-ad-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cnst-ad-card-stats {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 5px 8px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   PATTERN MINING VIEW — Charts → Pattern Mining
   Glossy crystal aesthetic with frosted glass cards, gradient accents and
   soft glow. Two themes: LIGHT (white background, light glass) and DARK
   (cosmic aurora background, dark glass). All colors come from CSS vars
   defined on .patterns-shell and overridden by html.theme-dark .patterns-shell.
   ========================================================================= */

#view-patterns {
  margin: -16px -20px;
  padding: 0;
  min-height: calc(100vh - 70px);
}

/* CSS vars driving the client-ads studio cards. Scoped to :root so they
   cascade everywhere (Apollo embeds these cards). Dark overrides target
   html.theme-dark globally. */
:root {
  --pat-text:        #0f172a;
  --pat-text-soft:   #475569;
  --pat-muted:       #94a3b8;
  --pat-card-bg:     linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 100%);
  --pat-card-border: rgba(15, 23, 42, 0.08);
  --pat-card-shadow: 0 16px 48px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --pat-card-hilite: 0 24px 64px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --pat-divider:     rgba(15, 23, 42, 0.08);
  --pat-row-bg:      rgba(255, 255, 255, 0.6);
  --pat-row-border:  rgba(15, 23, 42, 0.06);
  --pat-row-hover:   rgba(255, 255, 255, 0.08);
  --pat-row-hover-border: rgba(255, 255, 255, 0.3);
  --pat-track:       rgba(15, 23, 42, 0.07);
  --pat-pill-bg:     rgba(15, 23, 42, 0.05);
  --pat-pill-border: rgba(15, 23, 42, 0.1);
  --pat-tag-bg:      rgba(255, 255, 255, 0.10);
  --pat-tag-border:  rgba(255, 255, 255, 0.30);
  --pat-tag-text:    #64748b;
  --pat-eyebrow-text:#64748b;
  --pat-rank-text:   #64748b;
  --pat-meta-bg:     rgba(15, 23, 42, 0.05);
}

html.theme-dark {
  --pat-text:        #f1f5f9;
  --pat-text-soft:   #cbd5e1;
  --pat-muted:       #94a3b8;
  --pat-card-bg:     linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.025) 100%);
  --pat-card-border: rgba(255, 255, 255, 0.1);
  --pat-card-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --pat-card-hilite: 0 24px 64px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --pat-divider:     rgba(255, 255, 255, 0.08);
  --pat-row-bg:      rgba(255, 255, 255, 0.03);
  --pat-row-border:  rgba(255, 255, 255, 0.06);
  --pat-row-hover:   rgba(255, 255, 255, 0.1);
  --pat-row-hover-border: rgba(255, 255, 255, 0.3);
  --pat-track:       rgba(255, 255, 255, 0.06);
  --pat-pill-bg:     rgba(255, 255, 255, 0.06);
  --pat-pill-border: rgba(255, 255, 255, 0.12);
  --pat-tag-bg:      rgba(255, 255, 255, 0.12);
  --pat-tag-border:  rgba(255, 255, 255, 0.28);
  --pat-tag-text:    #e2e8f0;
  --pat-eyebrow-text:#cbd5e1;
  --pat-rank-text:   #e2e8f0;
  --pat-meta-bg:     rgba(255, 255, 255, 0.04);
}

.patterns-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: var(--pat-aurora-opacity);
  mix-blend-mode: var(--pat-aurora-blend);
  animation: aurora-float 22s ease-in-out infinite;
}
.aurora-blob-1 {
  width: 520px; height: 520px;
  top: -120px; left: -80px;
  background: radial-gradient(circle, #64748b 0%, #475569 60%, transparent 100%);
}
.aurora-blob-2 {
  width: 440px; height: 440px;
  top: 30%; right: -120px;
  background: radial-gradient(circle, #94a3b8 0%, #64748b 60%, transparent 100%);
  animation-delay: -8s;
}
.aurora-blob-3 {
  width: 600px; height: 600px;
  bottom: -200px; left: 30%;
  background: radial-gradient(circle, #94a3b8 0%, #64748b 60%, transparent 100%);
  animation-delay: -14s;
}

@keyframes aurora-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 20px) scale(0.94); }
}

.aurora-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--pat-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pat-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 0%, transparent 100%);
}

.patterns-content {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
}

.patterns-header { margin-bottom: 36px; }

.patterns-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--pat-pill-bg);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--pat-pill-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--pat-eyebrow-text);
  margin-bottom: 18px;
}

.patterns-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 12px #94a3b8, 0 0 24px rgba(255, 255, 255, 0.5);
  animation: pattern-pulse 2.2s ease-in-out infinite;
}
@keyframes pattern-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.4); }
}

.patterns-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pat-text);
  margin: 0 0 14px;
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.18);
}
.patterns-title-accent {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #e2e8f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.patterns-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pat-text-soft);
  max-width: 720px;
  margin: 0;
}

/* ----- Summary stat strip ----- */

.patterns-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.patterns-stat {
  position: relative;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--pat-card-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--pat-card-border);
  box-shadow: var(--pat-card-shadow);
  overflow: hidden;
}
.patterns-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}
.patterns-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--pat-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.patterns-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--pat-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.patterns-stat-sub {
  font-size: 12px;
  color: var(--pat-muted);
  margin-top: 6px;
}
.patterns-stat-top {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 24px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.patterns-stat-top .patterns-stat-value {
  background: linear-gradient(135deg, #64748b, #64748b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.theme-dark .patterns-stat-top .patterns-stat-value {
  background: linear-gradient(135deg, #e2e8f0, #e2e8f0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.patterns-stat-bottom {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 24px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.patterns-stat-bottom .patterns-stat-value {
  background: linear-gradient(135deg, #475569, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.theme-dark .patterns-stat-bottom .patterns-stat-value {
  background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----- Cards grid ----- */

.patterns-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.patterns-card {
  position: relative;
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--pat-card-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--pat-card-border);
  box-shadow: var(--pat-card-shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.patterns-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
}
.patterns-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pat-card-hilite);
}

.patterns-card-distinguish { grid-column: span 7; }
.patterns-card-recipe      { grid-column: span 5; }
.patterns-card-numeric     { grid-column: span 7; }
.patterns-card-top         { grid-column: span 5; }

@media (max-width: 1080px) {
  .patterns-card-distinguish,
  .patterns-card-recipe,
  .patterns-card-numeric,
  .patterns-card-top { grid-column: span 12; }
}

.patterns-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pat-divider);
}
.patterns-card-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--pat-text);
  letter-spacing: -0.01em;
}
.patterns-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pat-tag-text);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pat-tag-bg);
  border: 1px solid var(--pat-tag-border);
}

/* ----- Distinguishing factor rows ----- */

.pattern-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--pat-divider);
}
.pattern-row:last-child { border-bottom: none; }
.pattern-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pattern-row-arrow {
  font-size: 11px;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.pattern-row-winner .pattern-row-arrow {
  background: rgba(255, 255, 255, 0.18);
  color: #64748b;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}
html.theme-dark .pattern-row-winner .pattern-row-arrow { color: #e2e8f0; }
.pattern-row-loser .pattern-row-arrow {
  background: rgba(255, 255, 255, 0.18);
  color: #475569;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}
html.theme-dark .pattern-row-loser .pattern-row-arrow { color: #cbd5e1; }
.pattern-row-feature {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pat-muted);
}
.pattern-row-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--pat-text);
  margin-left: auto;
}

.pattern-row-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.pattern-bar {
  display: grid;
  grid-template-columns: 80px 1fr 44px;
  align-items: center;
  gap: 10px;
}
.pattern-bar-label {
  font-size: 11px;
  color: var(--pat-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.pattern-bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--pat-track);
  overflow: hidden;
  position: relative;
}
.pattern-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pattern-bar-fill-top {
  background: linear-gradient(90deg, #94a3b8, #94a3b8);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.pattern-bar-fill-bot {
  background: linear-gradient(90deg, #94a3b8, #94a3b8);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.pattern-bar-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--pat-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 720px) {
  .pattern-row-bars { grid-template-columns: 1fr; }
}

/* ----- Numeric strip ----- */

.metric-strip {
  padding: 14px 0;
  border-bottom: 1px solid var(--pat-divider);
}
.metric-strip:last-child { border-bottom: none; }
.metric-strip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pat-muted);
  margin-bottom: 10px;
}
.metric-strip-values {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.metric-strip-col {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--pat-row-bg);
  border: 1px solid var(--pat-row-border);
  text-align: center;
  transition: all 0.2s ease;
}
.metric-strip-mid {
  opacity: 0.75;
}
.metric-strip-winner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255,255,255,0.4);
}
.metric-strip-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--pat-muted);
  margin-bottom: 4px;
}
.metric-strip-winner .metric-strip-tag { color: #64748b; }
html.theme-dark .metric-strip-winner .metric-strip-tag { color: #e2e8f0; }
.metric-strip-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--pat-text);
  font-variant-numeric: tabular-nums;
}
.metric-strip-winner .metric-strip-num {
  background: linear-gradient(135deg, #64748b, #64748b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.theme-dark .metric-strip-winner .metric-strip-num {
  background: linear-gradient(135deg, #e2e8f0, #e2e8f0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----- Recipe card ----- */

.recipe-body {
  display: grid;
  gap: 22px;
}
.recipe-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.recipe-title::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.recipe-title-do { color: #64748b; }
html.theme-dark .recipe-title-do { color: #e2e8f0; }
.recipe-title-do::before { background: #94a3b8; box-shadow: 0 0 8px #94a3b8; }
.recipe-title-avoid { color: #475569; }
html.theme-dark .recipe-title-avoid { color: #cbd5e1; }
.recipe-title-avoid::before { background: #94a3b8; box-shadow: 0 0 8px #94a3b8; }
.recipe-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.recipe-list li {
  font-size: 13px;
  color: var(--pat-text-soft);
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--pat-row-bg);
  border-left: 2px solid var(--pat-card-border);
}
.recipe-list strong { color: var(--pat-text); font-weight: 600; }
.recipe-pct { color: var(--pat-muted); font-size: 12px; }

/* ----- Top performers list ----- */

.performer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: performer;
  display: grid;
  gap: 8px;
}
.performer-row {
  counter-increment: performer;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--pat-row-bg);
  border: 1px solid var(--pat-row-border);
  cursor: pointer;
  transition: all 0.2s ease;
}
.performer-row:hover {
  background: var(--pat-row-hover);
  border-color: var(--pat-row-hover-border);
  transform: translateX(2px);
}
.performer-rank::before {
  content: counter(performer, decimal-leading-zero);
  font-size: 10px;
  font-weight: 700;
  color: var(--pat-rank-text);
  letter-spacing: 0.5px;
}
.performer-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pat-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.performer-meta {
  display: flex;
  gap: 6px;
  grid-column: 2;
  grid-row: 2;
  margin-top: -2px;
}
.performer-meta span {
  font-size: 10px;
  font-weight: 600;
  color: var(--pat-muted);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--pat-meta-bg);
}
.performer-roas {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #64748b, #64748b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.theme-dark .performer-roas {
  background: linear-gradient(135deg, #e2e8f0, #e2e8f0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----- Empty state ----- */

.patterns-empty {
  grid-column: span 12;
  text-align: center;
  padding: 56px 32px;
}
.patterns-empty-icon {
  font-size: 56px;
  background: linear-gradient(135deg, #94a3b8, #64748b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.3));
}
.patterns-empty h3 {
  color: var(--pat-text);
  margin: 0 0 8px;
  font-size: 20px;
}
.patterns-empty p {
  color: var(--pat-muted);
  margin: 0 auto;
  max-width: 480px;
  line-height: 1.6;
}

.patterns-muted {
  color: var(--pat-muted);
  font-size: 13px;
  font-style: italic;
  margin: 0;
}

/* =========================================================================
   AD-LEVEL DEEP DIVE — appears below the cards grid when a top performer
   is clicked. Shows each live ad's thumbnail, copy, performance numbers
   and a rule-based "why it works" breakdown.
   ========================================================================= */

/* Apollo → Client Ads tab — 2×2 grid of client studios. Each
   .patterns-deepdive (one client studio) takes one cell. Falls back to a
   single column on narrow viewports. */
#apollo-client-ads-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1180px) {
  #apollo-client-ads-body { grid-template-columns: 1fr; }
}
#apollo-client-ads-body .patterns-empty { grid-column: 1 / -1; }

.apollo-client-ads-block {
  padding: 0;
}

/* ----- Client search bar ----- */
.client-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  margin-bottom: 24px;
  border-radius: 14px;
  background: var(--pat-card-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--pat-card-border);
  box-shadow: var(--pat-card-shadow);
  z-index: 5;
}
.client-search-icon {
  font-size: 15px;
  opacity: 0.55;
  flex-shrink: 0;
}
#client-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--pat-text);
  padding: 12px 0;
  letter-spacing: -0.01em;
}
#client-search-input::placeholder {
  color: var(--pat-muted);
  font-weight: 400;
}
.client-search-clear {
  flex-shrink: 0;
  background: var(--pat-pill-bg);
  border: 1px solid var(--pat-pill-border);
  color: var(--pat-text-soft);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
  font-family: inherit;
}
.client-search-clear:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: #475569;
  transform: rotate(90deg);
}
html.theme-dark .client-search-clear:hover { color: #cbd5e1; }

.client-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  background: var(--pat-card-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--pat-card-border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255,255,255,0.6);
  z-index: 20;
  padding: 4px;
}
html.theme-dark .client-search-suggestions {
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}

.search-suggestion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
  font-family: inherit;
}
.search-suggestion:hover {
  background: var(--pat-row-hover);
}
.search-suggestion-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pat-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggestion-meta {
  font-size: 11px;
  color: var(--pat-muted);
  font-variant-numeric: tabular-nums;
}
.search-suggestion-empty {
  padding: 14px;
  font-size: 12px;
  color: var(--pat-muted);
  font-style: italic;
  text-align: center;
}

/* Searched studio (single, above the top-4 grid) — full width, slightly
   accented border to distinguish from the regular grid below. */
.searched-studio-wrap {
  margin-bottom: 24px;
}
.searched-studio-wrap:empty { display: none; }

/* =========================================================================
   CLIENT PORTAL (mockup) — when a non-admin email signs in, body gets
   .client-portal-mode and we hide the full admin app, revealing this view.
   ========================================================================= */

/* Hide the entire admin app shell (and any side panels/drawers) when the
   client portal is active. The dashboard view sits inside #view-dashboard
   which wraps both the sidebar and the main content. */
body.client-portal-mode #view-dashboard,
body.client-portal-mode #client-drawer,
body.client-portal-mode .modal-root,
body.client-portal-mode .overlay-root,
body.client-portal-mode .nav-popover { display: none !important; }

.client-portal-root { display: none; }
body.client-portal-mode .client-portal-root.is-active {
  display: block;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(255, 255, 255,0.10), transparent 70%),
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(255, 255, 255,0.08), transparent 70%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 60%);
  color: #0f172a;
}
html.theme-dark body.client-portal-mode .client-portal-root.is-active {
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(255, 255, 255,0.22), transparent 70%),
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(255, 255, 255,0.18), transparent 70%),
    linear-gradient(180deg, #060b1f 0%, #0a0f24 100%);
  color: #f1f5f9;
}

.cp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--pat-card-border);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px) saturate(160%);
}
html.theme-dark .cp-topbar { background: rgba(10,15,36,0.4); }
.cp-brand { display: flex; align-items: center; gap: 12px; }
.cp-brand-mark {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #64748b, #94a3b8);
  color: white;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(255, 255, 255,0.35);
}
.cp-brand-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pat-text);
}
.cp-signout {
  background: var(--pat-pill-bg);
  border: 1px solid var(--pat-pill-border);
  color: var(--pat-text-soft);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cp-signout:hover { background: var(--pat-row-hover); color: var(--pat-text); }

.cp-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cp-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.cp-hero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--pat-eyebrow-text);
  margin-bottom: 6px;
}
.cp-hero-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pat-text);
  margin: 0 0 10px;
}
.cp-hero-sub {
  font-size: 15px;
  color: var(--pat-text-soft);
  margin: 0;
  max-width: 640px;
  line-height: 1.5;
}
.cp-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--pat-pill-bg);
  border: 1px solid var(--pat-pill-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--pat-text);
  backdrop-filter: blur(8px);
}
.cp-hero-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 12px rgba(148,163,184,0.5);
  animation: cp-pulse 2s ease-in-out infinite;
}
.cp-status-good .cp-hero-status-dot { background: #94a3b8; box-shadow: 0 0 14px rgba(255, 255, 255,0.6); }
.cp-status-mid  .cp-hero-status-dot { background: #94a3b8; box-shadow: 0 0 14px rgba(255, 255, 255,0.5); }
.cp-status-warn .cp-hero-status-dot { background: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,0.5); }
@keyframes cp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.25); }
}

.cp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.cp-kpi {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--pat-card-bg);
  border: 1px solid var(--pat-card-border);
  box-shadow: var(--pat-card-shadow);
  backdrop-filter: blur(16px) saturate(160%);
}
.cp-kpi-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--pat-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cp-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--pat-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.cp-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cp-section-head { display: flex; flex-direction: column; gap: 4px; }
.cp-section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pat-text);
  margin: 0;
}
.cp-section-sub {
  font-size: 13px;
  color: var(--pat-muted);
  margin: 0;
}

.cp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: var(--pat-muted);
  font-size: 14px;
}
.cp-spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--pat-divider);
  border-top-color: #64748b;
  animation: deepdive-spin 0.8s linear infinite;
}
.cp-empty {
  padding: 40px 28px;
  border-radius: 16px;
  background: var(--pat-card-bg);
  border: 1px solid var(--pat-card-border);
  text-align: center;
}
.cp-empty h3 { color: var(--pat-text); margin: 0 0 6px; font-size: 18px; }
.cp-empty p  { color: var(--pat-muted); margin: 0 auto; max-width: 460px; font-size: 13px; line-height: 1.55; }

.cp-studio {
  padding: 18px !important;
}

.cp-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.cp-team-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--pat-card-bg);
  border: 1px solid var(--pat-card-border);
  box-shadow: var(--pat-card-shadow);
}
.cp-team-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-size: 16px;
  box-shadow: 0 4px 16px rgba(255, 255, 255,0.35);
  flex-shrink: 0;
}
.cp-team-name { font-size: 14px; font-weight: 700; color: var(--pat-text); }
.cp-team-role { font-size: 11px; color: var(--pat-muted); margin: 2px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.cp-team-link { font-size: 12px; color: var(--pat-eyebrow-text); text-decoration: none; }
.cp-team-link:hover { text-decoration: underline; }
.client-studio-search {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 16px 48px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html.theme-dark .client-studio-search {
  box-shadow: 0 16px 48px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.client-studio-search .deepdive-eyebrow::before {
  content: '🔍 ';
}

.patterns-deepdive {
  margin-top: 0;
  padding: 22px;
  border-radius: 22px;
  background: var(--pat-card-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--pat-card-border);
  box-shadow: var(--pat-card-shadow);
  scroll-margin-top: 20px;
  container-type: inline-size;
}

.deepdive-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--pat-divider);
}
.deepdive-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--pat-eyebrow-text);
  margin-bottom: 6px;
}
.deepdive-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pat-text);
  margin: 0 0 8px;
}
.deepdive-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.deepdive-meta span {
  font-size: 11px;
  font-weight: 600;
  color: var(--pat-muted);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pat-pill-bg);
  border: 1px solid var(--pat-pill-border);
}
.deepdive-roas {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #64748b !important;
  font-weight: 700 !important;
}
html.theme-dark .deepdive-roas { color: #e2e8f0 !important; }

.deepdive-close {
  background: var(--pat-pill-bg);
  border: 1px solid var(--pat-pill-border);
  color: var(--pat-text-soft);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.deepdive-close:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: #475569;
  transform: rotate(90deg);
}
html.theme-dark .deepdive-close:hover { color: #cbd5e1; }

.deepdive-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px;
  color: var(--pat-muted);
  font-size: 14px;
  justify-content: center;
}
.deepdive-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--pat-divider);
  border-top-color: #64748b;
  animation: deepdive-spin 0.8s linear infinite;
}
@keyframes deepdive-spin {
  to { transform: rotate(360deg); }
}

/* ----- Designer's briefing (client-level synthesis) ----- */

.studio-briefing {
  margin-bottom: 32px;
  padding: 26px 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.5);
}
html.theme-dark .studio-briefing {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}
.studio-briefing-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--pat-eyebrow-text);
  margin-bottom: 6px;
}
.studio-briefing-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--pat-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.studio-briefing-sub {
  font-size: 13px;
  color: var(--pat-text-soft);
  margin: 0 0 18px;
  max-width: 680px;
  line-height: 1.5;
}
.studio-briefing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.briefing-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--pat-card-bg);
  border: 1px solid var(--pat-card-border);
  box-shadow: 0 4px 12px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}
html.theme-dark .briefing-card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.briefing-icon { font-size: 22px; margin-bottom: 6px; }
.briefing-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pat-text);
  margin-bottom: 4px;
}
.briefing-body {
  font-size: 12px;
  color: var(--pat-text-soft);
  line-height: 1.5;
}

/* ----- Ad switcher (pill bar matching light/dark toggle) ----- */

.ad-switcher-wrap {
  margin: 0 0 20px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pat-pill-border) transparent;
}
.ad-switcher-wrap::-webkit-scrollbar { height: 6px; }
.ad-switcher-wrap::-webkit-scrollbar-thumb {
  background: var(--pat-pill-border);
  border-radius: 3px;
}
.ad-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--pat-pill-bg);
  border: 1px solid var(--pat-pill-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
html.theme-dark .ad-switcher {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.ad-switcher-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pat-text-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  font-family: inherit;
}
.ad-switcher-tab:hover:not(.is-active) {
  color: var(--pat-text);
  background: var(--pat-row-hover);
}
.ad-switcher-tab.is-active {
  background: linear-gradient(135deg, #64748b, #94a3b8);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.ad-switcher-rank {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  opacity: 0.85;
}
.ad-switcher-roas {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ----- Ad spreads (editorial magazine layout) ----- */

.adspreads {
  display: grid;
  gap: 28px;
}

.adspread {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--pat-card-bg);
  border: 1px solid var(--pat-card-border);
  box-shadow: var(--pat-card-shadow);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.spread-rank {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  padding: 10px 24px;
  background: linear-gradient(90deg, rgba(255, 255, 255,0.15), transparent);
  border-bottom: 1px solid var(--pat-divider);
  color: var(--pat-eyebrow-text);
  width: 100%;
  box-sizing: border-box;
}
.spread-rank-best {
  background: linear-gradient(90deg, rgba(255, 255, 255,0.18), rgba(255, 255, 255,0.06));
  color: #64748b;
}
html.theme-dark .spread-rank-best { color: #e2e8f0; }

/* Single-column spread — image full-width on top, content flows below.
   Eliminates the height-mismatch dead-space problem that two columns
   created. The image cell uses a wide aspect ratio so square/vertical
   ads still fit without dominating the spread. */
.spread-grid {
  display: block;
}

.spread-media-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--pat-pill-bg);
}
.spread-media {
  position: relative;
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255,0.08), rgba(255, 255, 255,0.05));
}
.spread-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 16px;
  box-sizing: border-box;
}
.spread-img-placeholder {
  font-size: 72px;
  color: var(--pat-muted);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spread-badge-video, .spread-badge-image {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  padding: 5px 12px;
  border-radius: 6px;
  color: white;
  backdrop-filter: blur(8px);
}
.spread-badge-video { background: linear-gradient(135deg, #ef4444, #94a3b8); }
.spread-badge-image { background: rgba(15, 23, 42, 0.7); }

.spread-product {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-top: 1px solid var(--pat-divider);
  background: var(--pat-card-bg);
}
.spread-product-icon {
  font-size: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255,0.2));
}
.spread-product-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--pat-muted);
  margin-bottom: 2px;
}
.spread-product-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--pat-text);
  letter-spacing: -0.01em;
}
.spread-product-vibe {
  font-size: 12px;
  color: var(--pat-text-soft);
  margin-top: 3px;
  font-style: italic;
}
.spread-product-empty { opacity: 0.7; }

.spread-content-col {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spread-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spread-block-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--pat-muted);
  text-transform: uppercase;
}
.spread-block-text {
  color: var(--pat-text);
  line-height: 1.5;
}
.spread-headline {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.spread-body { font-size: 14px; }
.spread-desc { font-size: 13px; color: var(--pat-text-soft); }

.spread-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  background: linear-gradient(135deg, #64748b, #94a3b8);
  color: white;
  align-self: flex-start;
  box-shadow: 0 4px 16px rgba(255, 255, 255,0.3);
}

/* Chip rows under headline / body — signal annotations */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid;
  transition: all 0.2s ease;
  cursor: help;
}
.chip-label { font-weight: 700; }
.chip-note { color: var(--pat-text-soft); display: none; }
.chip:hover .chip-note { display: inline; }
.chip-good {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.35);
  color: #64748b;
}
html.theme-dark .chip-good { color: #e2e8f0; }
.chip-mid {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.3);
  color: #64748b;
}
html.theme-dark .chip-mid { color: #e2e8f0; }
.chip-bad {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.3);
  color: #475569;
}
html.theme-dark .chip-bad { color: #cbd5e1; }

/* ----- Vision analysis cards (palette / faces / OCR) ----- */

.spread-vision {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.vision-card {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--pat-pill-bg);
  border: 1px solid var(--pat-pill-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 88px;
}

.vision-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--pat-muted);
  text-transform: uppercase;
}
.vision-card-icon { font-size: 13px; line-height: 1; filter: grayscale(0.1); }

.vision-card-headline {
  font-size: 15px;
  font-weight: 700;
  color: var(--pat-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ocr-preview {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  cursor: help;
}

.vision-card-sub {
  font-size: 11px;
  color: var(--pat-muted);
  letter-spacing: 0.2px;
  margin-top: auto;
}
.vision-card-sub-good { color: #64748b; font-weight: 600; }
html.theme-dark .vision-card-sub-good { color: #e2e8f0; }
.vision-card-sub-warn { color: #64748b; font-weight: 600; }
html.theme-dark .vision-card-sub-warn { color: #e2e8f0; }

.vision-loading-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--pat-muted);
  font-style: italic;
}
.vision-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--pat-divider);
  border-top-color: #64748b;
  animation: deepdive-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.vision-empty {
  font-size: 11px;
  color: var(--pat-muted);
  font-style: italic;
}

/* Palette swatch row */
.palette-row {
  display: flex;
  gap: 0;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--pat-pill-border);
}
.palette-chip {
  flex: 1;
  transition: flex-grow 0.2s ease;
  cursor: help;
}
.palette-chip:hover { flex-grow: 1.8; }

/* Performance strip */
.spread-perf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 8px;
  border-radius: 14px;
  background: var(--pat-pill-bg);
  border: 1px solid var(--pat-pill-border);
  overflow: hidden;
}
.spread-perf-cell {
  padding: 12px 10px;
  text-align: center;
  border-right: 1px solid var(--pat-divider);
  border-bottom: 1px solid var(--pat-divider);
}
.spread-perf-cell:nth-child(4n) { border-right: none; }
.spread-perf-cell:nth-last-child(-n+4) { border-bottom: none; }
@media (max-width: 880px) {
  .spread-perf { grid-template-columns: repeat(2, 1fr); }
  .spread-perf-cell { border-right: 1px solid var(--pat-divider) !important; }
  .spread-perf-cell:nth-child(2n) { border-right: none !important; }
}
.spread-perf-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--pat-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.spread-perf-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--pat-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Designer notes block at bottom of each spread */
.spread-notes {
  padding: 20px 24px 24px;
  border-top: 1px dashed var(--pat-divider);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255,0.04));
}
.spread-notes-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--pat-eyebrow-text);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.spread-notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.spread-notes-list li {
  padding-left: 18px;
  position: relative;
  font-size: 14px;
  color: var(--pat-text-soft);
  line-height: 1.55;
}
.spread-notes-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--pat-eyebrow-text);
  font-size: 12px;
}

/* =========================================================================
   GLOBAL SCROLLBAR — invisible at rest, revealed only while scrolling.
   JS adds `.is-scrolling` to any element that fires a scroll event and
   removes it ~800ms after the user stops. The track is always transparent;
   only the thumb appears. Light mode uses a dark thumb, dark mode uses a
   light thumb — both subtle so they never compete with content.

   Specific element rules (e.g. #sidebar-categories, .apollo-tool-body) keep
   their custom colors thanks to higher specificity.
   ========================================================================= */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.25s ease;
}
*::-webkit-scrollbar-corner { background: transparent; }

.is-scrolling { scrollbar-color: rgba(15, 23, 42, 0.35) transparent; }
.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.35);
  background-clip: padding-box;
}
html.theme-dark .is-scrolling { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
html.theme-dark .is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  background-clip: padding-box;
}
/* When the html element itself scrolls (the page), we toggle .is-scrolling on
   the <html> tag — so the same rules above apply to the main page scrollbar.
   In dark mode, target it explicitly too so the colors don't fall back. */
html.is-scrolling::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.35); }
html.theme-dark.is-scrolling::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); }

/* ============================================================
   Management view — tabs + sub-panels (Accounts / Library / Creatives)
   ============================================================ */
.mgmt-tabs {
  position: relative;
  display: flex;
  gap: 0;
  padding: 4px;
  background: #e2e8f0;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  margin: 0 auto 16px;
  width: 100%;
  max-width: 760px;
}
.mgmt-tabs .slide-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  transition: left 0.24s cubic-bezier(0.4, 0, 0.2, 1), width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.mgmt-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
  transition: color 0.18s ease;
  color: #64748b;
  font-family: inherit;
}
.mgmt-tab:hover { color: #0f172a; }
.mgmt-tab.is-active {
  color: #1e293b;
}
.mgmt-tab-icon { font-size: 15px; flex-shrink: 0; }
.mgmt-tab-text { display: flex; flex-direction: column; min-width: 0; align-items: center; }
.mgmt-tab-text strong { font-size: 12.5px; font-weight: 600; }
/* Minimalist single line — icon + title only, like the light/dark toggle. */
.mgmt-tab-text small { display: none; }

.mgmt-panel { display: none; }
.mgmt-panel.is-active { display: block; }

html.theme-dark .mgmt-tabs { background: #111111; border-color: #1f1f1f; }
html.theme-dark .mgmt-tabs .slide-thumb { background: #0a0a0a; box-shadow: 0 0 0 1px #262626 inset; }
html.theme-dark .mgmt-tab { color: #a3a3a3; }
html.theme-dark .mgmt-tab:hover { color: #f5f5f5; }
html.theme-dark .mgmt-tab.is-active { color: #f1f5f9; }
html.theme-dark .mgmt-tab-text small { color: #64748b; }
html.theme-dark .mgmt-tab.is-active .mgmt-tab-text small { color: #cbd5e1; }

/* ============================================================
   Library tab — knowledge base
   ============================================================ */
.library-page { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }

/* Hero — blue glass plate with a top sheen, only blue tones. */
.library-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 62%),
    linear-gradient(135deg, #e2e8f0 0%, #e2e8f0 48%, #f1f5f9 100%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.4),
    0 10px 28px rgba(255, 255, 255,0.12);
}
.library-hero-title { margin: 0 0 4px 0; font-size: 24px; color: #334155; }
.library-hero-sub { margin: 0; font-size: 13px; color: #3b5b8c; max-width: 540px; line-height: 1.5; }
.library-hero-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.library-search {
  width: 260px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  color: #1e293b;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255,0.06);
}
.library-search:focus { outline: none; border-color: #94a3b8; background: #ffffff; }

.library-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: start;
}

/* Categories rail — same family as the light/dark switch: a soft inset
   track holding pill items, the active one lifted as a glossy white thumb. */
.library-toc {
  background: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  padding: 8px;
  position: sticky;
  top: 16px;
  box-shadow: inset 0 1px 3px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.5);
}
.library-toc-title { font-size: 11px; text-transform: uppercase; color: #64748b; letter-spacing: 0.06em; margin: 4px 0 8px 8px; }
.library-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.library-toc-btn {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.library-toc-btn:hover { color: #1e293b; }
.library-toc-btn.is-active {
  background: linear-gradient(160deg, #ffffff, #f8fafc);
  color: #475569;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 2px rgba(15,23,42,0.10),
    0 4px 12px rgba(255, 255, 255,0.12);
}

/* Content — crystal-glass plate. */
.library-content {
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,255,255,0.66));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.35),
    0 10px 28px rgba(15,23,42,0.07);
}
.library-article-head { padding-bottom: 16px; border-bottom: 1px solid rgba(191,219,254,0.65); margin-bottom: 18px; }
.library-article-title { margin: 0; font-size: 22px; color: #334155; }
.library-article-sub { margin: 4px 0 0 0; font-size: 12px; color: #94a3b8; }
.library-article-section { padding: 14px 0; border-bottom: 1px dashed #e5e7eb; }
.library-article-section:last-of-type { border-bottom: 0; }
.library-article-h { margin: 0 0 6px 0; font-size: 15px; color: #1e293b; }
.library-article-body { margin: 0; font-size: 13px; color: #475569; line-height: 1.6; }
.library-article-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e5e7eb; display: flex; align-items: center; gap: 12px; }

@media (max-width: 900px) {
  .library-grid { grid-template-columns: 1fr; }
  .library-toc { position: static; }
}

html.theme-dark .library-hero {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #334155 0%, #1e293b 60%, #0f172a 100%);
  border-color: #334155;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 28px rgba(0,0,0,0.40);
}
html.theme-dark .library-hero-title { color: #e2e8f0; }
html.theme-dark .library-hero-sub { color: #e2e8f0; }
html.theme-dark .library-search { background: rgba(15,23,42,0.7); border-color: #334155; color: #f1f5f9; }
html.theme-dark .library-search:focus { border-color: #94a3b8; background: #0f172a; }
html.theme-dark .library-toc {
  background: #1e293b;
  border-color: #334155;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.04);
}
html.theme-dark .library-toc-title { color: #64748b; }
html.theme-dark .library-toc-btn { color: #94a3b8; }
html.theme-dark .library-toc-btn:hover { color: #f1f5f9; }
html.theme-dark .library-toc-btn.is-active {
  background: linear-gradient(160deg, #0f172a, #1e293b);
  color: #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 8px rgba(0,0,0,0.45);
}
html.theme-dark .library-content {
  background: linear-gradient(160deg, rgba(15,23,42,0.92), rgba(15,23,42,0.70));
  border-color: #1e293b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.40);
}
html.theme-dark .library-article-title { color: #e2e8f0; }
html.theme-dark .library-article-h { color: #f1f5f9; }
html.theme-dark .library-article-body { color: #cbd5e1; }
html.theme-dark .library-article-section { border-bottom-color: #1e293b; }
html.theme-dark .library-article-head { border-bottom-color: #1e293b; }
html.theme-dark .library-article-foot { border-top-color: #1e293b; }

/* ---- Library: editable categories + rich-text editor (blue glass) ---- */
.library-edit-toggle {
  padding: 10px 16px; border: 1px solid #e2e8f0; border-radius: 10px;
  background: rgba(255,255,255,0.9); color: #475569; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(255, 255, 255,0.08);
  transition: background .15s, color .15s, border-color .15s;
}
.library-edit-toggle:hover { background: #ffffff; border-color: #e2e8f0; }
.library-edit-toggle.is-active {
  background: linear-gradient(160deg, #94a3b8, #64748b);
  border-color: #64748b; color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 8px rgba(255, 255, 255,0.35);
}

.library-toc-row { display: flex; align-items: center; gap: 4px; }
.library-toc-row .library-toc-btn { flex: 1; }
.library-cat-del {
  flex-shrink: 0; width: 24px; height: 24px; border: 0; border-radius: 8px;
  background: transparent; color: #94a3b8; cursor: pointer; font-size: 11px;
  line-height: 1; transition: background .15s, color .15s;
}
.library-cat-del:hover { background: #fee2e2; color: #dc2626; }
.library-cat-add {
  width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px dashed #e2e8f0;
  border-radius: 10px; background: rgba(255,255,255,0.5); color: #475569; font-size: 13px;
  font-weight: 500; cursor: pointer; font-family: inherit; transition: background .15s;
}
.library-cat-add:hover { background: #ffffff; }
.library-toc-empty { padding: 8px 10px; font-size: 12px; }

.library-title-input {
  width: 100%; font-family: inherit; font-size: 22px; font-weight: 700;
  color: #334155; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 6px 10px; background: rgba(239,246,255,0.7); box-sizing: border-box;
}
.library-title-input:focus { outline: none; border-color: #94a3b8; background: #ffffff; }

/* Editing toolbar — glossy blue glass strip. */
.library-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 8px; margin: 14px 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(219,234,254,0.6));
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(255, 255, 255,0.08);
  position: sticky; top: 8px; z-index: 2;
}
.library-tb-btn {
  min-width: 32px; height: 30px; padding: 0 9px; border: 1px solid #e2e8f0;
  border-radius: 8px; background: rgba(255,255,255,0.9); color: #1e293b; cursor: pointer;
  font-size: 13px; font-family: inherit; transition: background .15s, border-color .15s;
}
.library-tb-btn:hover { background: #e2e8f0; border-color: #e2e8f0; }
.library-tb-select {
  height: 30px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: rgba(255,255,255,0.9); color: #1e293b; font-size: 12px; font-family: inherit;
  padding: 0 6px; cursor: pointer;
}
.library-tb-sep { width: 1px; height: 20px; background: rgba(255, 255, 255,0.15); margin: 0 4px; }
.library-tb-color {
  display: inline-flex; align-items: center; gap: 3px; height: 30px;
  padding: 0 7px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: rgba(255,255,255,0.9); color: #1e293b; font-size: 13px; cursor: pointer;
}
.library-tb-color input { width: 22px; height: 20px; border: 0; background: none; padding: 0; cursor: pointer; }

.library-doc { font-size: 13px; color: #475569; line-height: 1.6; }
.library-doc h2 { font-size: 18px; color: #334155; margin: 16px 0 6px; }
.library-doc h3 { font-size: 15px; color: #1e293b; margin: 16px 0 6px; }
.library-doc h3:first-child { margin-top: 0; }
.library-doc p { margin: 0 0 10px; }
.library-doc ul { margin: 0 0 10px; padding-left: 22px; }
.library-doc li { margin: 2px 0; }
.library-doc.is-editing {
  min-height: 340px; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 16px 18px; background: rgba(255,255,255,0.7);
}
.library-doc.is-editing:focus { outline: none; border-color: #94a3b8; background: #ffffff; }

html.theme-dark .library-edit-toggle { background: rgba(15,23,42,0.8); border-color: #334155; color: #e2e8f0; }
html.theme-dark .library-edit-toggle:hover { background: #1e293b; border-color: #64748b; }
html.theme-dark .library-edit-toggle.is-active {
  background: linear-gradient(160deg, #94a3b8, #64748b); border-color: #64748b; color: #ffffff;
}
html.theme-dark .library-cat-del:hover { background: #7f1d1d; color: #fecaca; }
html.theme-dark .library-cat-add { border-color: #334155; color: #e2e8f0; background: rgba(15,23,42,0.5); }
html.theme-dark .library-cat-add:hover { background: #1e293b; }
html.theme-dark .library-title-input { background: rgba(15,23,42,0.8); border-color: #334155; color: #e2e8f0; }
html.theme-dark .library-title-input:focus { border-color: #94a3b8; background: #0f172a; }
html.theme-dark .library-toolbar {
  background: linear-gradient(160deg, rgba(30,41,59,0.9), rgba(15,23,42,0.7));
  border-color: #334155;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.35);
}
html.theme-dark .library-tb-btn { background: rgba(15,23,42,0.9); border-color: #334155; color: #cbd5e1; }
html.theme-dark .library-tb-btn:hover { background: #334155; border-color: #64748b; }
html.theme-dark .library-tb-select { background: rgba(15,23,42,0.9); border-color: #334155; color: #cbd5e1; }
html.theme-dark .library-tb-sep { background: rgba(255,255,255,0.12); }
html.theme-dark .library-tb-color { background: rgba(15,23,42,0.9); border-color: #334155; color: #cbd5e1; }
html.theme-dark .library-doc { color: #cbd5e1; }
html.theme-dark .library-doc h2 { color: #e2e8f0; }
html.theme-dark .library-doc h3 { color: #f1f5f9; }
html.theme-dark .library-doc.is-editing { background: rgba(15,23,42,0.7); border-color: #334155; }

/* ============================================================
   Creatives tab — per-client approval tracking
   ============================================================ */
.creatives-page { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.creatives-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #e5e7eb 0%, #e5e7eb 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}
.creatives-hero-title { margin: 0 0 4px 0; font-size: 24px; color: #1e293b; }
.creatives-hero-sub { margin: 0; font-size: 13px; color: #475569; max-width: 540px; line-height: 1.5; }
.creatives-hero-stats { display: flex; gap: 12px; flex-shrink: 0; }
.creatives-hero-stat {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 90px;
  text-align: center;
}
.creatives-hero-stat-num { font-size: 24px; font-weight: 700; color: #1e293b; line-height: 1; }
.creatives-stat-warn { color: #64748b; }
.creatives-stat-bad { color: #b91c1c; }
.creatives-stat-ok { color: #475569; }
.creatives-hero-stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

.creatives-section { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 22px 24px; }
.creatives-section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.creatives-section-title { margin: 0; font-size: 17px; color: #1e293b; }
.creatives-section-sub { margin: 4px 0 0 0; font-size: 13px; color: #64748b; }
.creatives-section-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* All three controls share one height + pill shape so they read as a set. */
.creatives-section-actions .accounts-filter-pills,
.creatives-section-actions .accounts-search,
.creatives-section-actions .btn {
  height: 38px;
  box-sizing: border-box;
  border-radius: 999px;
}
.creatives-section-actions .accounts-filter-pills { align-items: center; }
.creatives-section-actions .accounts-search {
  width: 220px; padding: 0 16px; font-size: 13px;
}
.creatives-section-actions .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 20px; font-size: 13px; white-space: nowrap;
}

.creatives-table-wrap { overflow-x: auto; }
.creatives-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.creatives-table thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.creatives-table tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #1e293b;
}
.creatives-table tbody tr:hover { background: #f8fafc; }
.cre-date {
  width: 130px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  background: #ffffff;
  color: #1e293b;
}
.cre-date:focus { outline: none; border-color: #e2e8f0; }
.cre-due { color: #64748b; }
.cre-overdue { color: #b91c1c; }
.creatives-empty { text-align: center; color: #94a3b8; padding: 24px; }

/* Glossy crystal dropdowns (season + status) — blue family only */
.cre-season, .cre-status {
  appearance: none; -webkit-appearance: none;
  padding: 7px 30px 7px 11px; border-radius: 10px;
  font-size: 12px; font-weight: 600; cursor: pointer; max-width: 190px;
  color: #64748b;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(239,246,255,0.55) 0%, rgba(219,234,254,0.55) 100%);
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 1px 4px rgba(255, 255, 255, 0.1);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(239,246,255,0.55) 0%, rgba(219,234,254,0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cbd5e1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: 0 0, 0 0, right 11px center;
  background-size: auto, auto, 10px 6px;
  transition: box-shadow 0.14s ease, transform 0.14s ease, border-color 0.14s ease;
}
.cre-season:hover, .cre-status:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 3px 9px rgba(255, 255, 255, 0.16);
}
.cre-season:focus, .cre-status:focus {
  outline: none; border-color: #e2e8f0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255,0.35), 0 3px 9px rgba(255, 255, 255,0.16);
}
/* Drive link cell: preview + edit + copy */
.cre-drive-cell { display: inline-flex; align-items: center; gap: 6px; }
.cre-drive-preview {
  color: #64748b; font-weight: 600; text-decoration: none; font-size: 12px;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 8px; background: #f1f5f9; border-radius: 7px;
}
.cre-drive-preview:hover { text-decoration: underline; }
.cre-drive-icon {
  flex-shrink: 0; background: none; border: 1px solid #e2e8f0; border-radius: 7px;
  color: #64748b; font-size: 12px; line-height: 1; padding: 5px 7px; cursor: pointer;
}
.cre-drive-icon:hover { border-color: #e2e8f0; color: #64748b; }
.cre-drive-icon.is-copied { color: #64748b; border-color: #e2e8f0; }
.cre-drive-add {
  background: none; border: 1px dashed #cbd5e1; border-radius: 8px;
  color: #64748b; font-size: 12px; padding: 5px 10px; cursor: pointer;
}
.cre-drive-add:hover { border-color: #e2e8f0; color: #64748b; }
/* Status states — three shades of the same blue crystal, light → deep */
.cre-status-waiting .cre-status {
  color: #64748b;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(239,246,255,0.55) 0%, rgba(219,234,254,0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cbd5e1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cre-status-tweaks .cre-status {
  color: #3f4b5b; border-color: rgba(255, 255, 255, 0.6);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(224,231,255,0.6) 0%, rgba(199,210,254,0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cre-status-approved .cre-status {
  color: #475569; border-color: rgba(255, 255, 255, 0.65);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(191,219,254,0.6) 0%, rgba(255, 255, 255,0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cre-status-live .cre-status {
  color: #ffffff; border-color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, rgba(255, 255, 255,0.95) 0%, rgba(255, 255, 255,0.95) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cre-status-live { opacity: 0.85; }

/* New cycle modal */
.cre-add-panel { width: min(640px, 94vw); }
.cre-add-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px;
  margin: 18px 0 6px; text-align: left;
}
.cre-add-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.cre-add-field.cre-add-wide, .cre-add-field.cre-add-client { grid-column: 1 / -1; }
.cre-add-label { font-size: 12px; font-weight: 600; color: #64748b; }
.cre-add-input, .cre-add-select, .cre-client-input {
  width: 100%; padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 9px;
  font-size: 13px; background: #ffffff; color: #1e293b; box-sizing: border-box;
}
.cre-add-input:focus, .cre-add-select:focus, .cre-client-input:focus {
  outline: none; border-color: #e2e8f0; box-shadow: 0 0 0 3px rgba(255, 255, 255,0.3);
}
.cre-client-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  margin-top: 4px; background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 10px; box-shadow: 0 12px 30px rgba(15,23,42,0.14);
  max-height: 240px; overflow-y: auto; padding: 4px;
}
.cre-suggest-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; font-size: 13px; color: #1e293b;
}
.cre-suggest-item:hover { background: #f1f5f9; }
.cre-suggest-avatar {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: #64748b; color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cre-suggest-name { font-weight: 500; }

/* Dark theme */
html.theme-dark .cre-season, html.theme-dark .cre-status {
  color: #e2e8f0; border-color: rgba(255, 255, 255, 0.5);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #334155 0%, #1e293b 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e2e8f0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 2px 6px rgba(0, 0, 0, 0.35);
}
html.theme-dark .cre-status-tweaks .cre-status {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #3730a3 0%, #334155 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c7d2fe' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.theme-dark .cre-status-approved .cre-status {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #64748b 0%, #3f4b5b 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23dbeafe' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.theme-dark .cre-status-live .cre-status {
  color: #ffffff;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #94a3b8 0%, #475569 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.theme-dark .cre-drive-preview { background: #0c1e3a; color: #e2e8f0; }
html.theme-dark .cre-drive-icon { border-color: #334155; color: #94a3b8; }
html.theme-dark .cre-drive-add { border-color: #334155; color: #94a3b8; }
html.theme-dark .cre-add-input, html.theme-dark .cre-add-select, html.theme-dark .cre-client-input {
  background: #1e293b; border-color: #334155; color: #f1f5f9;
}
html.theme-dark .cre-client-suggest { background: #0f172a; border-color: #1e293b; }
html.theme-dark .cre-suggest-item { color: #e2e8f0; }
html.theme-dark .cre-suggest-item:hover { background: #1e293b; }

/* ── Custom crystal dropdown menu (replaces native option list for .cre-season / .cre-status) ── */
.xdrop {
  position: fixed; z-index: 4000; min-width: 184px; max-width: 280px;
  padding: 6px; border-radius: 16px;
  border: 1px solid rgba(191, 219, 254, 0.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(239,246,255,0.5) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 16px 40px rgba(255, 255, 255, 0.15),
    0 3px 10px rgba(255, 255, 255, 0.08);
  max-height: 320px; overflow-y: auto;
  opacity: 0; transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}
.xdrop.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.xdrop-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: #334155;
  line-height: 1.2; white-space: nowrap;
  transition: background 0.1s ease, color 0.1s ease;
}
.xdrop-opt .xdrop-emoji { font-size: 14px; flex-shrink: 0; }
.xdrop-opt .xdrop-label { overflow: hidden; text-overflow: ellipsis; }
.xdrop-opt .xdrop-check {
  margin-left: auto; opacity: 0; color: #cbd5e1; font-size: 13px; flex-shrink: 0;
}
.xdrop-opt:hover {
  background: rgba(191, 219, 254, 0.4);
  color: #64748b;
}
.xdrop-opt.is-selected {
  background: linear-gradient(180deg, rgba(255, 255, 255,0.95) 0%, rgba(255, 255, 255,0.95) 100%);
  color: #ffffff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.xdrop-opt.is-selected .xdrop-check { opacity: 1; color: #ffffff; }
.xdrop-opt.is-placeholder { color: #94a3b8; font-weight: 500; }

/* Dark theme */
html.theme-dark .xdrop {
  border-color: rgba(255, 255, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255,0.55) 0%, rgba(23,37,84,0.7) 100%),
    linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 18px 44px rgba(0,0,0,0.55);
}
html.theme-dark .xdrop-opt { color: #e2e8f0; }
html.theme-dark .xdrop-opt:hover {
  background: linear-gradient(180deg, #334155 0%, #3f4b5b 100%); color: #ffffff;
}
html.theme-dark .xdrop-opt.is-selected {
  background: linear-gradient(180deg, #64748b 0%, #475569 100%); color: #ffffff;
}
html.theme-dark .xdrop-opt.is-placeholder { color: #64748b; }

/* Season manager: per-row edit/delete, the add-footer, and the inline editor */
.xdrop-list { display: flex; flex-direction: column; }
.xdrop-manage { margin-left: auto; display: none; align-items: center; gap: 2px; }
.xdrop-opt:hover .xdrop-manage { display: flex; }
.xdrop-opt:hover .xdrop-check { display: none; }
.xdrop-edit, .xdrop-del {
  border: none; background: rgba(255,255,255,0.6); border-radius: 6px;
  width: 22px; height: 22px; line-height: 1; cursor: pointer;
  font-size: 11px; color: #3f4b5b; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.1s ease, color 0.1s ease;
}
.xdrop-edit:hover { background: #ffffff; color: #475569; }
.xdrop-del:hover { background: #fee2e2; color: #dc2626; }
.xdrop-opt.is-selected .xdrop-edit, .xdrop-opt.is-selected .xdrop-del {
  background: rgba(255,255,255,0.22); color: #ffffff;
}
.xdrop-opt.is-selected .xdrop-del:hover { background: #fee2e2; color: #dc2626; }
.xdrop-add {
  width: 100%; margin-top: 4px; padding: 9px 11px;
  border: 1px dashed rgba(255, 255, 255, 0.45); border-radius: 9px;
  background: rgba(239, 246, 255, 0.6); color: #64748b;
  font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.xdrop-add:hover { background: #e2e8f0; border-color: #94a3b8; }

.xdrop.xdrop-editing { width: 264px; }
.xdrop-editor { display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.xdrop-ed-title { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.xdrop-ed-row { display: flex; align-items: center; gap: 8px; }
.xdrop-ed-preview {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid rgba(255, 255, 255,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.xdrop-ed-name {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255,0.4); background: #ffffff; color: #1e293b;
  font-size: 13px; font-weight: 600; box-sizing: border-box;
}
.xdrop-ed-name:focus { outline: none; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(255, 255, 255,0.4); }
.xdrop-emojis {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px;
  max-height: 132px; overflow-y: auto; padding: 2px;
}
.xdrop-emoji-pick {
  border: 1px solid transparent; background: transparent; border-radius: 8px;
  height: 28px; font-size: 16px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.1s ease, transform 0.1s ease;
}
.xdrop-emoji-pick:hover { background: #e2e8f0; transform: translateY(-1px); }
.xdrop-emoji-pick.is-on {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
  border-color: #475569; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.xdrop-ed-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xdrop-ed-right { display: flex; gap: 8px; margin-left: auto; }
.xdrop-ed-cancel, .xdrop-ed-save, .xdrop-ed-del {
  border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; transition: background 0.12s ease, border-color 0.12s ease;
}
.xdrop-ed-cancel { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.xdrop-ed-cancel:hover { background: #e2e8f0; }
.xdrop-ed-save {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 6px rgba(255, 255, 255,0.3);
}
.xdrop-ed-save:hover { background: linear-gradient(180deg, #64748b 0%, #475569 100%); }
.xdrop-ed-del { background: #fff; color: #dc2626; border-color: #fecaca; }
.xdrop-ed-del:hover { background: #fee2e2; }

/* Dark theme — manager */
html.theme-dark .xdrop-edit, html.theme-dark .xdrop-del { background: rgba(255,255,255,0.1); color: #e2e8f0; }
html.theme-dark .xdrop-edit:hover { background: rgba(255,255,255,0.18); color: #ffffff; }
html.theme-dark .xdrop-del:hover { background: rgba(220,38,38,0.3); color: #fecaca; }
html.theme-dark .xdrop-add { background: rgba(255, 255, 255,0.4); border-color: rgba(255, 255, 255,0.5); color: #e2e8f0; }
html.theme-dark .xdrop-add:hover { background: rgba(30,64,175,0.6); }
html.theme-dark .xdrop-ed-preview { background: linear-gradient(180deg, #334155 0%, #1e293b 100%); border-color: rgba(255, 255, 255,0.4); }
html.theme-dark .xdrop-ed-name { background: #0f172a; border-color: #334155; color: #f1f5f9; }
html.theme-dark .xdrop-emoji-pick:hover { background: #334155; }
html.theme-dark .xdrop-ed-cancel { background: #1e293b; color: #cbd5e1; border-color: #334155; }
html.theme-dark .xdrop-ed-cancel:hover { background: #334155; }
html.theme-dark .xdrop-ed-del { background: #0f172a; color: #f87171; border-color: #7f1d1d; }

/* ── Custom crystal calendar (replaces native date picker for .cre-date) ── */
.cre-date::-webkit-calendar-picker-indicator { opacity: 0; display: none; }
.cre-date {
  cursor: pointer; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.cre-date:hover { border-color: #e2e8f0; }

.xcal {
  position: fixed; z-index: 4000; width: 264px; padding: 12px;
  border-radius: 18px; border: 1px solid rgba(191, 219, 254, 0.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(239,246,255,0.5) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 16px 40px rgba(255, 255, 255, 0.15),
    0 3px 10px rgba(255, 255, 255, 0.08);
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top center;
  transition: opacity 0.14s ease, transform 0.14s ease; pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
.xcal.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.xcal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.xcal-title {
  flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: #94a3b8;
  background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 8px;
  text-transform: capitalize;
}
.xcal-title:hover { background: rgba(219, 234, 254, 0.6); }
.xcal-nav {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.45); color: #cbd5e1; font-size: 15px; line-height: 1;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.1s ease;
}
.xcal-nav:hover { background: rgba(219, 234, 254, 0.7); border-color: #e2e8f0; color: #94a3b8; transform: translateY(-1px); }
.xcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.xcal-dow span {
  text-align: center; font-size: 10.5px; font-weight: 600; color: #a8b5c7;
  text-transform: lowercase; padding: 2px 0 6px;
}
.xcal-day {
  height: 32px; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  background: transparent; color: #334155; font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.1s ease, color 0.1s ease, transform 0.08s ease;
}
.xcal-day:hover { background: rgba(191, 219, 254, 0.4); color: #64748b; transform: translateY(-1px); }
.xcal-day.is-out { color: #cbd5e1; font-weight: 400; }
.xcal-day.is-today { border-color: rgba(255, 255, 255, 0.7); color: #94a3b8; }
.xcal-day.is-selected {
  background: linear-gradient(180deg, rgba(255, 255, 255,0.95) 0%, rgba(255, 255, 255,0.95) 100%); color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 2px 7px rgba(255, 255, 255,0.3);
}
.xcal-day.is-selected:hover { color: #ffffff; }
.xcal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255,0.3); }
.xcal-clear, .xcal-today {
  background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 8px; color: #cbd5e1;
}
.xcal-clear { color: #94a3b8; }
.xcal-clear:hover { background: rgba(241, 245, 249, 0.7); color: #64748b; }
.xcal-today:hover { background: rgba(219, 234, 254, 0.6); }

/* Month / year quick-pick panels */
.xcal-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 4px; }
.xcal-pick {
  height: 38px; border: 1px solid rgba(191, 219, 254, 0.4); border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.45); color: #94a3b8;
  font-size: 12px; font-weight: 600; text-transform: capitalize;
  transition: background 0.1s ease, transform 0.08s ease;
}
.xcal-pick:hover { background: rgba(219, 234, 254, 0.7); transform: translateY(-1px); }
.xcal-pick.is-on { background: linear-gradient(180deg, rgba(255, 255, 255,0.95) 0%, rgba(255, 255, 255,0.95) 100%); color: #fff; border-color: rgba(255, 255, 255,0.5); }

/* Dark theme */
html.theme-dark .xcal {
  border-color: rgba(255, 255, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255,0.55) 0%, rgba(23,37,84,0.72) 100%),
    linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 18px 44px rgba(0,0,0,0.55);
}
html.theme-dark .xcal-title { color: #e2e8f0; }
html.theme-dark .xcal-title:hover { background: #334155; }
html.theme-dark .xcal-nav { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border-color: #334155; color: #e2e8f0; }
html.theme-dark .xcal-nav:hover { background: #334155; }
html.theme-dark .xcal-day { color: #e2e8f0; }
html.theme-dark .xcal-day:hover { background: #334155; color: #fff; }
html.theme-dark .xcal-day.is-out { color: #475569; }
html.theme-dark .xcal-clear:hover { background: #1e293b; color: #cbd5e1; }
html.theme-dark .xcal-today:hover { background: #334155; }
html.theme-dark .xcal-pick { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); color: #e2e8f0; }
html.theme-dark .xcal-pick:hover { background: #334155; }

.creatives-rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.creatives-rule-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f8fafc; }
.creatives-rule-step strong { display: block; font-size: 13px; color: #1e293b; }
.creatives-rule-step small { display: block; font-size: 12px; color: #64748b; margin-top: 4px; line-height: 1.5; }
.creatives-rule-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #64748b;
  color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

html.theme-dark .creatives-hero { background: linear-gradient(135deg, #2e1065 0%, #500724 100%); border-color: #4c1d95; }
html.theme-dark .creatives-hero-title { color: #f1f5f9; }
html.theme-dark .creatives-hero-sub { color: #e2e8f0; }
html.theme-dark .creatives-hero-stat { background: #0f172a; border-color: #1e293b; }
html.theme-dark .creatives-hero-stat-num { color: #f1f5f9; }
html.theme-dark .creatives-section { background: #0f172a; border-color: #1e293b; }
html.theme-dark .creatives-section-title { color: #f1f5f9; }
html.theme-dark .creatives-table thead th { color: #94a3b8; border-bottom-color: #1e293b; }
html.theme-dark .creatives-table tbody td { color: #e2e8f0; border-bottom-color: #1e293b; }
html.theme-dark .creatives-table tbody tr:hover { background: #1e293b; }
html.theme-dark .cre-date { background: #1e293b; border-color: #334155; color: #f1f5f9; }
html.theme-dark .creatives-rule-step { background: #1e293b; border-color: #334155; }
html.theme-dark .creatives-rule-step strong { color: #f1f5f9; }
html.theme-dark .creatives-rule-step small { color: #cbd5e1; }

/* ============================================================
   Geo Audit tab — chip input + Meta autocomplete (modern look)
   ============================================================ */
.geo-page { display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }

.geo-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, #f1f5f9 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.geo-hero-icon {
  font-size: 44px;
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.25));
}
.geo-hero-text { flex: 1; min-width: 0; }
.geo-hero-title {
  margin: 0 0 4px 0;
  font-size: 26px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.01em;
}
.geo-hero-sub { margin: 0; font-size: 14px; color: #475569; line-height: 1.55; max-width: 640px; }

/* Step cards (Pick cities / Choose scope) */
.geo-builder {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.geo-builder-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.geo-builder-step {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #94a3b8, #94a3b8);
  color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.geo-builder-title { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; }
.geo-builder-sub { margin: 2px 0 0 0; font-size: 12px; color: #64748b; }

/* Input row — chip-input on the left, Run button on the right */
.geo-input-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.geo-input-row .geo-chip-input-wrap { flex: 1; min-width: 0; }
.geo-input-row .geo-run-btn {
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, #94a3b8 0%, #94a3b8 100%);
  border: 0;
  color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s, box-shadow 0.15s;
}
.geo-input-row .geo-run-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 255, 255, 0.5); }
.geo-input-row .geo-run-btn:disabled { background: #cbd5e1; box-shadow: none; cursor: not-allowed; color: #ffffff; }
.geo-input-summary {
  margin-top: 6px;
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}
html.theme-dark .geo-input-row .geo-run-btn:disabled { background: #262626; color: #525252; }
html.theme-dark .geo-input-summary { color: #737373; }

/* Chip input area */
.geo-chip-input-wrap {
  position: relative;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.geo-chip-input-wrap:focus-within {
  border-color: #94a3b8;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}
/* `display: contents` lets each chip become a direct child of the parent
   flex container, so chips + the typeahead input share the same wrap line. */
.geo-chip-list { display: contents; }
.geo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 6px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.geo-chip-icon { font-size: 13px; }
.geo-chip-name { color: #1e293b; }
.geo-chip-region {
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 999px;
}
.geo-chip-x {
  width: 20px; height: 20px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.geo-chip-x:hover { background: #fee2e2; color: #b91c1c; }

.geo-typeahead-wrap { position: relative; flex: 1; min-width: 160px; }
.geo-typeahead-input {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 14px;
  padding: 6px 4px;
  color: #0f172a;
  outline: none;
  font-family: inherit;
}
.geo-typeahead-input::placeholder { color: #94a3b8; }
.geo-typeahead-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: -12px;
  right: -12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}
.geo-typeahead-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.geo-typeahead-opt:hover, .geo-typeahead-opt.is-highlight { background: #f1f5f9; }
.geo-typeahead-opt-icon { font-size: 16px; }
.geo-typeahead-opt-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.geo-typeahead-opt-name { font-size: 13px; font-weight: 600; color: #0f172a; }
.geo-typeahead-opt-sub { font-size: 11px; color: #64748b; margin-top: 1px; }

/* Preset row */
.geo-presets-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.geo-presets-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.geo-preset-chip {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.geo-preset-chip:hover { background: #e5e7eb; border-color: #94a3b8; }
.geo-preset-chip:active { transform: scale(0.97); }
.geo-preset-chip-clear {
  background: transparent;
  border-color: #fecaca;
  color: #b91c1c;
}
.geo-preset-chip-clear:hover { background: #fee2e2; border-color: #ef4444; }

/* Scope cards (radio cards) */
.geo-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.geo-scope-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.geo-scope-card:hover { border-color: #e2e8f0; background: #f1f5f9; }
.geo-scope-card input[type="radio"] {
  margin-top: 2px;
  accent-color: #94a3b8;
  flex-shrink: 0;
}
.geo-scope-card:has(input:checked) {
  border-color: #94a3b8;
  background: #f1f5f9;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.geo-scope-card-body { display: flex; flex-direction: column; gap: 2px; }
.geo-scope-card-title { font-size: 13px; font-weight: 600; color: #0f172a; }
.geo-scope-card-desc { font-size: 11px; color: #64748b; line-height: 1.4; }

/* Run row */
.geo-runrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 16px;
  flex-wrap: wrap;
}
.geo-runrow-summary { color: #cbd5e1; font-size: 14px; }
.geo-runrow .geo-run-btn {
  font-size: 14px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #94a3b8 0%, #94a3b8 100%);
  border: 0;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.1s, box-shadow 0.15s;
}
.geo-runrow .geo-run-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 255, 255, 0.5); }
.geo-runrow .geo-run-btn:disabled { background: #475569; box-shadow: none; cursor: not-allowed; opacity: 0.7; }

/* Results */
.geo-results { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; min-height: 120px; }
.geo-results-empty { text-align: center; padding: 30px 16px; }
.geo-results-empty-icon { font-size: 36px; margin-bottom: 8px; }
.geo-results-empty-title { font-size: 14px; font-weight: 600; color: #475569; }
.geo-results-empty-sub { font-size: 12px; color: #94a3b8; margin-top: 4px; }

.geo-results-loading { padding: 28px 16px; text-align: center; }
.geo-results-loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid #e5e7eb;
  border-top-color: #94a3b8;
  border-radius: 50%;
  animation: geo-spin 0.8s linear infinite;
  margin: 0 auto 12px auto;
}
@keyframes geo-spin { to { transform: rotate(360deg); } }
.geo-results-loading-text strong { display: block; font-size: 14px; color: #0f172a; }
.geo-results-loading-text span { display: block; font-size: 12px; color: #64748b; margin-top: 2px; }
.geo-results-loading-bar {
  margin: 14px auto 0 auto;
  max-width: 300px;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.geo-results-loading-fill {
  height: 100%;
  background: linear-gradient(90deg, #94a3b8, #94a3b8);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.geo-result-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 14px;
  margin-bottom: 18px;
}
.geo-result-summary-ok { background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%); border: 1px solid #e2e8f0; }
.geo-result-summary-empty { background: linear-gradient(135deg, #fffbeb 0%, #e5e7eb 100%); border: 1px solid #e2e8f0; }
.geo-result-summary-icon { font-size: 32px; flex-shrink: 0; }
.geo-result-summary-body { flex: 1; min-width: 0; }
.geo-result-summary-headline { font-size: 16px; color: #1e293b; }
.geo-result-summary-headline strong { font-size: 22px; font-weight: 700; }
.geo-result-summary-cities { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.geo-result-city-pill { font-size: 11px; padding: 3px 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 999px; color: #475569; }
.geo-result-summary-meta { font-size: 11px; color: #64748b; margin-top: 6px; }
.geo-result-summary-meta code { background: #f1f5f9; padding: 1px 5px; border-radius: 3px; font-size: 10px; }

.geo-result-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.geo-result-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.geo-result-card:hover { border-color: #94a3b8; box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); }
.geo-result-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.geo-result-card-name { margin: 0; font-size: 14px; font-weight: 600; color: #0f172a; }
.geo-result-card-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.geo-result-card-count {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0e7490;
}
.geo-result-adsets { display: flex; flex-direction: column; gap: 8px; }
.geo-result-adset { padding: 10px 12px; background: #f8fafc; border-radius: 8px; }
.geo-result-adset-name { font-size: 12px; font-weight: 600; color: #0f172a; }
.geo-result-adset-status { font-size: 10px; color: #94a3b8; font-weight: 500; margin-left: 4px; }
.geo-result-adset-matches { margin: 6px 0 0 0; padding-left: 18px; font-size: 11px; color: #475569; line-height: 1.5; }
.geo-result-errors { margin-top: 14px; padding: 10px 14px; background: #e5e7eb; border-radius: 8px; font-size: 12px; color: #475569; }

/* Dark mode */
html.theme-dark .geo-hero {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #1e293b 0%, #1e293b 100%);
  border-color: #334155;
}
html.theme-dark .geo-hero-title { color: #f1f5f9; }
html.theme-dark .geo-hero-sub { color: #cbd5e1; }
html.theme-dark .geo-builder { background: #0a0a0a; border-color: #1f1f1f; box-shadow: none; }
html.theme-dark .geo-builder-title { color: #f5f5f5; }
html.theme-dark .geo-builder-sub { color: #a3a3a3; }
html.theme-dark .geo-chip-input-wrap { background: #111111; border-color: #262626; }
html.theme-dark .geo-chip-input-wrap:focus-within { background: #0a0a0a; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18); }
html.theme-dark .geo-chip { background: #1e293b; border-color: #334155; color: #e5e7eb; }
html.theme-dark .geo-chip-name { color: #e5e7eb; }
html.theme-dark .geo-chip-region { background: #1f1f1f; color: #a3a3a3; }
html.theme-dark .geo-typeahead-input { color: #f5f5f5; }
html.theme-dark .geo-typeahead-input::placeholder { color: #525252; }
html.theme-dark .geo-typeahead-dropdown { background: #111111; border-color: #262626; }
html.theme-dark .geo-typeahead-opt:hover, html.theme-dark .geo-typeahead-opt.is-highlight { background: #1f1f1f; }
html.theme-dark .geo-typeahead-opt-name { color: #f5f5f5; }
html.theme-dark .geo-typeahead-opt-sub { color: #a3a3a3; }
html.theme-dark .geo-presets-row { border-top-color: #262626; }
html.theme-dark .geo-preset-chip { background: #1e293b; border-color: #334155; color: #e5e7eb; }
html.theme-dark .geo-preset-chip:hover { background: #1e293b; border-color: #94a3b8; }
html.theme-dark .geo-preset-chip-clear { background: transparent; border-color: #7f1d1d; color: #fca5a5; }
html.theme-dark .geo-preset-chip-clear:hover { background: #450a0a; }
html.theme-dark .geo-scope-card { background: #111111; border-color: #262626; }
html.theme-dark .geo-scope-card:hover { background: #1f1f1f; border-color: #94a3b8; }
html.theme-dark .geo-scope-card:has(input:checked) { background: #1e293b; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }
html.theme-dark .geo-scope-card-title { color: #f5f5f5; }
html.theme-dark .geo-scope-card-desc { color: #a3a3a3; }
html.theme-dark .geo-runrow { background: linear-gradient(135deg, #000 0%, #0a0a0a 100%); }
html.theme-dark .geo-runrow-summary { color: #a3a3a3; }
html.theme-dark .geo-results { background: #0a0a0a; border-color: #1f1f1f; }
html.theme-dark .geo-results-empty-title { color: #cbd5e1; }
html.theme-dark .geo-results-empty-sub { color: #64748b; }
html.theme-dark .geo-result-summary-ok { background: linear-gradient(135deg, #334155 0%, #1e293b 100%); border-color: #475569; }
html.theme-dark .geo-result-summary-empty { background: linear-gradient(135deg, #1e293b 0%, #292524 100%); border-color: #78350f; }
html.theme-dark .geo-result-summary-headline { color: #f1f5f9; }
html.theme-dark .geo-result-summary-meta { color: #94a3b8; }
html.theme-dark .geo-result-city-pill { background: #111111; border-color: #262626; color: #cbd5e1; }
html.theme-dark .geo-result-card { background: #111111; border-color: #262626; }
html.theme-dark .geo-result-card:hover { border-color: #94a3b8; }
html.theme-dark .geo-result-card-name { color: #f5f5f5; }
html.theme-dark .geo-result-card-meta { color: #737373; }
html.theme-dark .geo-result-card-count { background: #1e293b; color: #e2e8f0; }
html.theme-dark .geo-result-adset { background: #1a1a1a; }
html.theme-dark .geo-result-adset-name { color: #f5f5f5; }
html.theme-dark .geo-result-adset-matches { color: #cbd5e1; }

/* shared with old Accounts-tab audit styles */
.geo-audit-result { padding-top: 8px; }
.geo-audit-summary {
  padding: 14px 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #3f4b5b;
}
.geo-audit-summary strong { font-size: 18px; }
.geo-audit-summary small { display: block; font-size: 12px; color: #475569; margin-top: 4px; }
.geo-audit-empty { background: #e5e7eb; border-color: #e2e8f0; color: #475569; }
.geo-audit-empty small { color: #475569; }
.geo-audit-list { list-style: none; margin: 12px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.geo-audit-item { padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #ffffff; }
.geo-audit-item-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.geo-audit-item-head strong { font-size: 14px; color: #1e293b; }
.geo-audit-adsets { list-style: disc; padding-left: 24px; margin: 0; font-size: 12px; color: #475569; }
.geo-audit-adsets ul { list-style: '— '; padding-left: 16px; margin-top: 4px; }
.geo-audit-adsets strong { color: #1e293b; }

html.theme-dark .accounts-geoaudit { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border-color: #115e59; }
html.theme-dark .geo-audit-summary { background: #334155; border-color: #94a3b8; color: #e5e7eb; }
html.theme-dark .geo-audit-summary small { color: #e2e8f0; }
html.theme-dark .geo-audit-empty { background: #1e293b; border-color: #475569; color: #e2e8f0; }
html.theme-dark .geo-audit-item { background: #0f172a; border-color: #1e293b; }
html.theme-dark .geo-audit-item-head strong { color: #f1f5f9; }
html.theme-dark .geo-audit-adsets { color: #cbd5e1; }
html.theme-dark .geo-audit-adsets strong { color: #f1f5f9; }

/* ============================================================
   Accounts view (Leadsie replacement — onboard clients via link)
   ============================================================ */
.accounts-page { display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }

.accounts-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f1f5f9 0%, #f1f5f9 100%);
  border: 1px solid #f1f5f9;
}
.accounts-hero-title { margin: 0 0 6px 0; font-size: 26px; line-height: 1.15; color: #1e293b; }
.accounts-hero-sub { margin: 0; font-size: 14px; color: #475569; max-width: 640px; line-height: 1.5; }
.accounts-hero-stats { display: flex; gap: 14px; flex-shrink: 0; }
.accounts-hero-stat {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 92px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.accounts-hero-stat-num { font-size: 26px; font-weight: 700; color: #1e293b; line-height: 1; }
.accounts-hero-stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

.accounts-section { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 22px 24px; }
.accounts-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.accounts-section-title { margin: 0; font-size: 17px; color: #1e293b; }
.accounts-section-sub { margin: 4px 0 0 0; font-size: 13px; color: #64748b; }
.accounts-section-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Generator */
.accounts-generator { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
.accounts-gen-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; }
@media (max-width: 1080px) { .accounts-gen-grid { grid-template-columns: 1fr; } }
.accounts-gen-perms-label, .accounts-gen-label { font-size: 12px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.accounts-perm {
  display: block;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.15s, background 0.15s;
}
.accounts-perm:hover { border-color: #e2e8f0; background: #f8fafc; }
.accounts-perm input { margin-right: 10px; accent-color: #64748b; }
.accounts-perm-body { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.accounts-perm-icon { font-size: 18px; }
.accounts-perm-text strong { display: block; font-size: 13px; color: #1e293b; }
.accounts-perm-text small { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }

.accounts-gen-linkbox {
  display: flex;
  align-items: stretch;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.accounts-gen-linkbox input { flex: 1; border: 0; padding: 10px 14px; font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #1e293b; background: #f8fafc; }
.accounts-gen-linkbox input:focus { outline: none; background: #ffffff; }
.accounts-gen-linkbox button { border-radius: 0; border: 0; border-left: 1px solid #cbd5e1; padding: 0 16px; }

.accounts-gen-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.accounts-gen-flow { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: #f1f5f9; border-radius: 10px; }
.accounts-gen-flow-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #334155; }
.accounts-gen-flow-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #64748b;
  color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* Filter pills — sliding white thumb like the Light/Dark theme switch */
.accounts-filter-pills {
  position: relative;
  display: inline-flex;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px;
  background: #e2e8f0;
}
.accounts-filter-pills .slide-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.accounts-filter-pill {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  padding: 6px 14px;
  font-size: 12px;
  color: #64748b;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s ease;
  font-family: inherit;
  font-weight: 600;
}
.accounts-filter-pill:hover { color: #1e293b; }
.accounts-filter-pill.is-active { color: #1e293b; }
.accounts-search { border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 12px; font-size: 13px; width: 220px; }
.accounts-search:focus { outline: none; border-color: #e2e8f0; }

/* Connected cards */
.accounts-connected-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.accounts-empty { padding: 30px; text-align: center; color: #94a3b8; font-size: 14px; }
.accounts-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; background: #ffffff; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.15s, box-shadow 0.15s; }
.accounts-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05); }
.accounts-card-full { border-left: 3px solid #94a3b8; }
.accounts-card-partial { border-left: 3px solid #94a3b8; }
.accounts-card-expired { border-left: 3px solid #ef4444; opacity: 0.85; }
.accounts-card-head { display: flex; align-items: center; gap: 12px; }
.accounts-card-logo { width: 40px; height: 40px; border-radius: 10px; background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.accounts-card-headtext { flex: 1; min-width: 0; }
.accounts-card-name { margin: 0; font-size: 14px; color: #1e293b; line-height: 1.3; }
.accounts-card-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.accounts-card-pill { flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px; }
.accounts-card-pill-ok { background: #e5e7eb; color: #3f4b5b; }
.accounts-card-pill-warn { background: #e5e7eb; color: #475569; }
.accounts-card-pill-bad { background: #fee2e2; color: #991b1b; }

.accounts-asset-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.accounts-asset { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f8fafc; border-radius: 8px; }
.accounts-asset-icon { font-size: 16px; }
.accounts-asset-body { flex: 1; min-width: 0; }
.accounts-asset-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.accounts-asset-value { font-size: 13px; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accounts-asset-check { color: #94a3b8; font-weight: 700; }

.accounts-card-missing { font-size: 12px; color: #475569; background: #e5e7eb; border-radius: 8px; padding: 8px 12px; }
.accounts-card-missing span { font-weight: 600; }

/* Numbers strip on real-client cards (Daily budget / Spend / ROAS) */
.accounts-card-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  background: #f8fafc;
  border-radius: 10px;
}
.accounts-card-stat { text-align: center; }
.accounts-card-stat-label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
.accounts-card-stat-val { font-size: 14px; font-weight: 600; color: #1e293b; margin-top: 2px; }

/* Asset rows: known (✓), unknown (Detect button), missing (✗) */
.accounts-asset-known { background: #f8fafc; }
.accounts-asset-unknown { background: #f8fafc; opacity: 0.88; }
.accounts-asset-missing { background: #f3f4f6; opacity: 0.7; }
.accounts-asset .accounts-asset-value.muted { color: #94a3b8; font-style: italic; }
.accounts-detect-btn { font-size: 11px !important; padding: 4px 10px !important; }

/* Dark theme for the new pieces */
html.theme-dark .accounts-card-numbers { background: #1e293b; }
html.theme-dark .accounts-card-stat-label { color: #94a3b8; }
html.theme-dark .accounts-card-stat-val { color: #f1f5f9; }
html.theme-dark .accounts-asset-known { background: #1e293b; }
html.theme-dark .accounts-asset-unknown { background: #111827; }
html.theme-dark .accounts-asset-missing { background: #0f172a; }

.accounts-card-foot { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px dashed #e5e7eb; padding-top: 10px; }
.accounts-card-foot .btn { font-size: 12px; padding: 6px 10px; }
.accounts-revoke { color: #b91c1c !important; }
.accounts-revoke:hover { background: #fee2e2 !important; }

/* Pending invites */
.accounts-pending-list { display: flex; flex-direction: column; gap: 8px; }
.accounts-pending-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  transition: border-color 0.15s;
}
.accounts-pending-row:hover { border-color: #cbd5e1; }
.accounts-pending-icon { font-size: 22px; }
.accounts-pending-body { flex: 1; min-width: 0; }
.accounts-pending-to { font-size: 13px; color: #1e293b; }
.accounts-pending-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.accounts-pending-note { font-size: 12px; color: #475569; margin-top: 4px; font-style: italic; }
.accounts-pending-actions { display: flex; gap: 6px; }
.accounts-pending-actions .btn { font-size: 12px; padding: 6px 10px; }

/* Meta App Review status grid */
.accounts-review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.accounts-review-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
}
.accounts-review-item strong { display: block; font-size: 13px; color: #1e293b; }
.accounts-review-item small { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; }
.accounts-review-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.accounts-review-pending .accounts-review-dot { background: #94a3b8; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }
.accounts-review-done .accounts-review-dot { background: #94a3b8; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }

/* Dark theme tweaks */
html.theme-dark .accounts-hero { background: linear-gradient(135deg, #1e293b 0%, #1e293b 100%); border-color: #334155; }
html.theme-dark .accounts-hero-title { color: #f1f5f9; }
html.theme-dark .accounts-hero-sub { color: #cbd5e1; }
html.theme-dark .accounts-hero-stat { background: #0f172a; border-color: #1e293b; }
html.theme-dark .accounts-hero-stat-num { color: #f1f5f9; }
html.theme-dark .accounts-hero-stat-label { color: #94a3b8; }
html.theme-dark .accounts-section { background: #0f172a; border-color: #1e293b; }
html.theme-dark .accounts-section-title { color: #f1f5f9; }
html.theme-dark .accounts-section-sub { color: #94a3b8; }
html.theme-dark .accounts-generator { background: linear-gradient(180deg, #0f172a 0%, #111827 100%); }
html.theme-dark .accounts-perm { border-color: #1e293b; }
html.theme-dark .accounts-perm:hover { background: #1e293b; border-color: #94a3b8; }
html.theme-dark .accounts-perm-text strong { color: #f1f5f9; }
html.theme-dark .accounts-perm-text small { color: #94a3b8; }
html.theme-dark .accounts-gen-linkbox { border-color: #334155; }
html.theme-dark .accounts-gen-linkbox input { background: #1e293b; color: #f1f5f9; }
html.theme-dark .accounts-gen-linkbox input:focus { background: #0f172a; }
html.theme-dark .accounts-gen-linkbox button { border-left-color: #334155; }
html.theme-dark .accounts-gen-flow { background: #1e293b; }
html.theme-dark .accounts-gen-flow-step { color: #cbd5e1; }
html.theme-dark .accounts-filter-pills { background: #111111; border-color: #1f1f1f; }
html.theme-dark .accounts-filter-pills .slide-thumb { background: #0a0a0a; box-shadow: 0 0 0 1px #262626 inset; }
html.theme-dark .accounts-filter-pill { color: #a3a3a3; }
html.theme-dark .accounts-filter-pill:hover { color: #f5f5f5; }
html.theme-dark .accounts-filter-pill.is-active { color: #f1f5f9; }
html.theme-dark .accounts-search { background: #1e293b; border-color: #334155; color: #f1f5f9; }
html.theme-dark .accounts-card { background: #0f172a; border-color: #1e293b; }
html.theme-dark .accounts-card-name { color: #f1f5f9; }
html.theme-dark .accounts-card-logo { background: #1e293b; }
html.theme-dark .accounts-asset { background: #1e293b; }
html.theme-dark .accounts-asset-value { color: #f1f5f9; }
html.theme-dark .accounts-asset-label { color: #94a3b8; }
html.theme-dark .accounts-pending-row { background: #0f172a; border-color: #1e293b; }
html.theme-dark .accounts-pending-to { color: #f1f5f9; }
html.theme-dark .accounts-review-item { background: #1e293b; border-color: #334155; }
html.theme-dark .accounts-review-item strong { color: #f1f5f9; }

/* ===== Lookup console (search every account for an ad by name) ======= */
.lookup-search-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.lookup-search-wrap { position: relative; width: 100%; max-width: 420px; }
.lookup-search-input { width: 100%; max-width: none; padding-right: 30px; }
.lookup-search-input:disabled { opacity: 0.55; cursor: not-allowed; }
.lookup-search-clear {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 20px; height: 20px; border: none; border-radius: 50%; background: transparent;
  color: #94a3b8; font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lookup-search-clear:hover { background: #e2e8f0; color: #1e293b; }
html.theme-dark .lookup-search-clear { color: #64748b; }
html.theme-dark .lookup-search-clear:hover { background: #1e293b; color: #f1f5f9; }
.lookup-pauseall-btn { color: #475569; border-color: #e2e8f0; margin-left: auto; }
.lookup-pauseall-btn:hover { background: #f1f5f9; border-color: #94a3b8; }

.lookup-results { display: flex; flex-direction: column; gap: 14px; }
.lookup-hint { padding: 30px; text-align: center; color: #94a3b8; font-size: 14px; }

.lookup-client-group { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.lookup-client-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
}
.lookup-client-name { font-size: 13.5px; font-weight: 600; color: #1e293b; }
.lookup-client-count { font-size: 11px; color: #64748b; }

.lookup-ad-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.lookup-ad-row:last-child { border-bottom: none; }
.lookup-ad-info { flex: 1; min-width: 0; }
.lookup-ad-name { font-size: 13.5px; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lookup-ad-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lookup-badge-active {
  flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 10px; border-radius: 999px; background: #e2e8f0; color: #475569;
}
.lookup-pause-btn { flex-shrink: 0; font-size: 12px !important; padding: 6px 12px !important; color: #475569; border-color: #e2e8f0; }
.lookup-pause-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.lookup-pause-btn:disabled { opacity: 0.55; cursor: not-allowed; }

html.theme-dark .lookup-client-group { border-color: #1e293b; }
html.theme-dark .lookup-client-head { background: #111827; border-color: #1e293b; }
html.theme-dark .lookup-client-name { color: #f1f5f9; }
html.theme-dark .lookup-client-count { color: #94a3b8; }
html.theme-dark .lookup-ad-row { border-color: #1e293b; }
html.theme-dark .lookup-ad-name { color: #f1f5f9; }
html.theme-dark .lookup-badge-active { background: rgba(255, 255, 255, 0.18); color: #e2e8f0; }
html.theme-dark .lookup-pause-btn { color: #e2e8f0; border-color: #334155; }
html.theme-dark .lookup-pause-btn:hover { background: #1e293b; border-color: #94a3b8; }
html.theme-dark .lookup-pauseall-btn { color: #e2e8f0; border-color: #334155; }
html.theme-dark .lookup-pauseall-btn:hover { background: #1e293b; border-color: #94a3b8; }

/* ===== Full-screen map explorer ====================================== */
body.map-expand-open { overflow: hidden; }
#view-map .radius-map-frame { cursor: zoom-in; }

.map-expand { position: fixed; inset: 0; z-index: 4000; display: flex;
  align-items: center; justify-content: center; padding: 28px; }
.map-expand[hidden] { display: none; }

.map-expand-backdrop { position: absolute; inset: 0;
  background: rgba(226, 232, 240, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%); }

.map-expand-panel { position: relative; display: flex; flex-direction: column;
  width: min(1520px, 96vw); height: min(920px, 94vh);
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,0.97) 0%, rgba(241,245,249,0.94) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 36px 90px -24px rgba(15, 23, 42, 0.5),
              0 0 0 1px rgba(148, 163, 184, 0.18);
  animation: mapExpandIn 0.22s ease; }
.map-expand-panel::before { content: ""; position: absolute; inset: 0;
  pointer-events: none; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 36%); }
@keyframes mapExpandIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); } }

.map-expand-bar { position: relative; z-index: 1; display: flex; align-items: center;
  gap: 14px; padding: 13px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28); }
.map-expand-title { font-weight: 700; font-size: 15px; color: #0f172a; }

.map-expand-modes { margin-left: auto; display: flex; gap: 2px; padding: 3px;
  background: rgba(148, 163, 184, 0.16); border-radius: 10px; }
.map-mode-btn { border: 0; background: transparent; cursor: pointer;
  padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: #64748b; transition: background 0.15s, color 0.15s; }
.map-mode-btn:hover { color: #0f172a; }
.map-mode-btn.is-active { background: #fff; color: #475569;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16); }

.map-expand-zoom { display: flex; gap: 4px; }
.map-expand-zoom button { cursor: pointer; border: 1px solid rgba(148,163,184,0.4);
  background: #fff; color: #334155; height: 30px; min-width: 30px;
  padding: 0 9px; border-radius: 8px; font-size: 14px; font-weight: 700;
  line-height: 1; transition: background 0.15s; }
.map-expand-zoom button:hover { background: #f1f5f9; }

.map-expand-close { cursor: pointer; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid rgba(148,163,184,0.4); background: #fff; color: #334155;
  font-size: 19px; line-height: 1; transition: background 0.15s, color 0.15s; }
.map-expand-close:hover { background: #fee2e2; color: #b91c1c; }

.map-expand-stage { position: relative; z-index: 1; flex: 1; overflow: hidden; }
#map-expand-svg { width: 100%; height: 100%; display: block; cursor: grab; }
#map-expand-svg:active { cursor: grabbing; }
/* Zoom-aware sizing: dots and ring strokes thin out as you zoom in. */
#map-expand-svg .radius-spot-dot {
  r: var(--map-dot-r, 3.4px);
  stroke-width: var(--map-dot-sw, 1px);
}
#map-expand-svg .radius-spot-ring { stroke-width: var(--map-ring-sw, 1.4px); }

/* Glossy crystal name labels that surface when zoomed in close */
#map-expand-svg .map-spot-label {
  cursor: pointer;
  filter: drop-shadow(0 1.5px 3px rgba(15, 23, 42, 0.32));
}
#map-expand-svg .map-spot-label-box {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
#map-expand-svg .map-spot-label-text {
  fill: #1e293b;
  font-weight: 650;
  letter-spacing: -0.01em;
}
#map-expand-svg .map-spot-label-line {
  stroke: #64748b;
  stroke-width: 1;
  stroke-opacity: 0.6;
  vector-effect: non-scaling-stroke;
}
#map-expand-svg .map-spot-label:hover .map-spot-label-box { stroke: #94a3b8; }
#map-expand-svg .map-spot-label:hover .map-spot-label-line { stroke: #94a3b8; stroke-opacity: 1; }
html.theme-dark #map-expand-svg .map-spot-label {
  filter: drop-shadow(0 1.5px 4px rgba(0, 0, 0, 0.6));
}
html.theme-dark #map-expand-svg .map-spot-label-box { stroke: rgba(255, 255, 255, 0.18); }
html.theme-dark #map-expand-svg .map-spot-label-text { fill: #f1f5f9; }
html.theme-dark #map-expand-svg .map-spot-label:hover .map-spot-label-box { stroke: #cbd5e1; }
html.theme-dark #map-expand-svg .map-spot-label-line { stroke: #94a3b8; }
#map-expand-svg .radius-spot,
#map-expand-svg .map-state-group { cursor: pointer; }

.map-expand-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.82); color: #e2e8f0; font-size: 11.5px;
  padding: 6px 14px; border-radius: 999px; pointer-events: none; white-space: nowrap; }

/* Client info popup */
.map-expand-popup { position: absolute; z-index: 2; width: 332px;
  max-height: calc(100% - 28px); display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 22px 50px -14px rgba(15, 23, 42, 0.45);
  animation: mapExpandIn 0.14s ease; }
.map-expand-popup[hidden] { display: none; }

.map-pop-bar { display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, #f8fafc, #fff); }
.map-pop-title { font-weight: 700; font-size: 13.5px; color: #0f172a;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-pop-close { cursor: pointer; border: 0; background: transparent;
  font-size: 18px; line-height: 1; color: #94a3b8; padding: 2px 4px; }
.map-pop-close:hover { color: #b91c1c; }

.map-pop-body { padding: 6px; overflow-y: auto; }
.map-pop-client { padding: 10px; border-radius: 10px; }
.map-pop-client + .map-pop-client { border-top: 1px solid #f1f5f9; }
.map-pop-client-head { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 8px; }
.map-pop-client-head strong { font-size: 13.5px; color: #0f172a; }

.map-pop-metrics { display: flex; gap: 6px; margin-bottom: 10px; }
.map-pop-metrics span { flex: 1; display: flex; flex-direction: column; gap: 2px;
  background: #f8fafc; border-radius: 8px; padding: 6px 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.map-pop-metrics b { font-size: 13px; color: #0f172a; letter-spacing: 0; text-transform: none; }

.map-pop-section { margin-top: 8px; }
.map-pop-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #64748b; margin-bottom: 5px; }
.map-pop-ads { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; }
.map-pop-ads li { display: flex; flex-direction: column; gap: 1px;
  background: #f8fafc; border-radius: 7px; padding: 6px 8px; }
.map-pop-ad-name { font-size: 12px; font-weight: 600; color: #1e293b; }
.map-pop-ad-loc { font-size: 11px; color: #64748b; }
.map-pop-muted { font-size: 12px; color: #94a3b8; margin: 0; }

.map-pop-open { margin-top: 11px; width: 100%; cursor: pointer;
  border: 1px solid #e2e8f0; background: #f1f5f9; color: #475569;
  font-size: 12.5px; font-weight: 600; padding: 8px; border-radius: 9px;
  transition: background 0.15s; }
.map-pop-open:hover { background: #e2e8f0; }

/* Dark theme */
html.theme-dark .map-expand-backdrop { background: rgba(8, 8, 8, 0.6); }
html.theme-dark .map-expand-panel {
  background: linear-gradient(155deg, #161616 0%, #0d0d0d 100%);
  border-color: #2a2a2a;
  box-shadow: 0 36px 90px -24px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04); }
html.theme-dark .map-expand-panel::before {
  background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 36%); }
html.theme-dark .map-expand-bar { border-bottom-color: #262626; }
html.theme-dark .map-expand-title { color: #f5f5f5; }
html.theme-dark .map-expand-modes { background: rgba(255,255,255,0.06); }
html.theme-dark .map-mode-btn { color: #a3a3a3; }
html.theme-dark .map-mode-btn:hover { color: #f5f5f5; }
html.theme-dark .map-mode-btn.is-active { background: #64748b; color: #fff; box-shadow: none; }
html.theme-dark .map-expand-zoom button,
html.theme-dark .map-expand-close { background: #1c1c1c; border-color: #333; color: #d4d4d4; }
html.theme-dark .map-expand-zoom button:hover { background: #262626; }
html.theme-dark .map-expand-close:hover { background: #3b1717; color: #fca5a5; }
html.theme-dark .map-expand-popup { background: #141414; border-color: #2a2a2a; }
html.theme-dark .map-pop-bar { background: #1a1a1a; border-bottom-color: #262626; }
html.theme-dark .map-pop-title,
html.theme-dark .map-pop-client-head strong,
html.theme-dark .map-pop-metrics b { color: #f5f5f5; }
html.theme-dark .map-pop-client + .map-pop-client { border-top-color: #262626; }
html.theme-dark .map-pop-metrics span,
html.theme-dark .map-pop-ads li { background: #1c1c1c; }
html.theme-dark .map-pop-ad-name { color: #e5e5e5; }
html.theme-dark .map-pop-ad-loc { color: #a3a3a3; }
html.theme-dark .map-pop-section-title { color: #a3a3a3; }
html.theme-dark .map-pop-open { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html.theme-dark .map-pop-open:hover { background: #334155; }

/* ===== Management → Reports tab ===== */
.reports-page { padding: 8px 4px 24px; max-width: 980px; margin-left: auto; margin-right: auto; }
.reports-hero { margin-bottom: 20px; text-align: center; }
.reports-hero-title { font-size: 22px; margin: 0 0 6px; color: #0f172a; }
.reports-hero-sub { color: #64748b; margin: 0; font-size: 13px; line-height: 1.5; }
.reports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.reports-card {
  border: 1px solid rgba(191, 219, 254, 0.5);
  border-radius: 14px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 8px rgba(255, 255, 255, 0.06);
}
.reports-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.reports-card-icon { font-size: 20px; }
.reports-card-title { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }
.reports-card-desc { font-size: 12.5px; color: #64748b; margin: 0 0 14px; line-height: 1.5; }
.reports-card-count { font-size: 36px; font-weight: 800; color: #0f172a; line-height: 1; }
.reports-card-count-label { font-size: 11.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.reports-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(239, 246, 255, 0.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px dashed rgba(255, 255, 255, 0.55);
}
.reports-actions .reports-actions-hint {
  grid-column: 1 / -1;
}
.reports-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 11px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .14s ease, filter .14s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px -6px rgba(15, 23, 42, 0.25);
}
.reports-download-btn span:first-child { font-size: 17px; line-height: 1; }
.reports-download-btn.btn-primary {
  background: linear-gradient(180deg, rgba(255, 255, 255,0.95), rgba(255, 255, 255,0.95));
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.reports-download-btn.btn-primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 22px -10px rgba(255, 255, 255, 0.5);
}
.reports-download-btn.btn-ghost {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(191, 219, 254, 0.6);
  color: #334155;
}
.reports-download-btn.btn-ghost:hover {
  transform: translateY(-1px);
  border-color: #94a3b8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 22px -10px rgba(15, 23, 42, 0.25);
}
.reports-actions-hint {
  font-size: 12px;
  color: #64748b;
  margin: 4px 0 0;
  text-align: center;
}
@media (max-width: 540px) {
  .reports-actions { grid-template-columns: 1fr; }
}
html.theme-dark .reports-download-btn.btn-ghost {
  background: linear-gradient(180deg, #1f2937, #111827);
  border-color: #374151;
  color: #f5f5f5;
}
html.theme-dark .reports-download-btn.btn-ghost:hover { border-color: #4b5563; }
html.theme-dark .reports-hero-title { color: #f5f5f5; }
html.theme-dark .reports-hero-sub { color: #a3a3a3; }
html.theme-dark .reports-card { background: #1c1c1c; border-color: #262626; box-shadow: none; }
html.theme-dark .reports-card-title { color: #f5f5f5; }
html.theme-dark .reports-card-desc { color: #a3a3a3; }
html.theme-dark .reports-card-count { color: #f5f5f5; }
html.theme-dark .reports-card-count-label { color: #737373; }
html.theme-dark .reports-actions { background: #1c1c1c; border-color: #303030; }
html.theme-dark .reports-actions-hint { color: #a3a3a3; }

/* "RIP Andy" memorial lightbox — opened by clicking the grey planet. */
.rip-andy-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.rip-andy-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.rip-andy-img {
  max-width: min(90vw, 560px);
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
.rip-andy-overlay.is-open .rip-andy-img { transform: scale(1); }
.rip-andy-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.rip-andy-close:hover { background: rgba(255, 255, 255, 0.18); }

/* ===== Apollo 6 — "Make campaign" builder ============================= */
/* The action button in the constellation popup. Glossy blue crystal so it
   reads as the primary creative action without using green. */
.btn-make-campaign {
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff; font-weight: 600; cursor: pointer;
  border-radius: 10px; padding: 8px 14px; font-size: 13px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, rgba(255, 255, 255,0.95) 0%, rgba(255, 255, 255,0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(255, 255, 255,0.3);
}
.btn-make-campaign:hover { filter: brightness(1.06); }
.btn-make-campaign:disabled { opacity: 0.5; cursor: default; filter: none; }

.camp-panel {
  width: min(840px, 95vw); max-height: 90vh; overflow-y: auto;
  text-align: left; position: relative; padding: 24px 26px;
  /* Override the light-glass .eh-confirm-panel base: a solid panel with no
     white text-shadow / backdrop blur, so text renders crisp (not ghosted). */
  background: #ffffff;
  color: #1e293b;
  text-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
/* When mounted inside the constellation stage, the overlay fills the stage
   (not the whole viewport) so the builder is contained within the
   constellation and floats above its own client popups. */
.constellation-stage .camp-overlay { position: absolute; z-index: 60; align-items: center; padding-bottom: 110px; }
.constellation-stage .camp-overlay .eh-confirm-backdrop {
  background: rgba(8, 15, 35, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.constellation-stage .camp-panel { max-height: calc(100% - 138px); }
.camp-close {
  position: absolute; top: 14px; right: 16px; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; color: #64748b;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.camp-close:hover { background: #f1f5f9; }
.camp-head { margin-bottom: 14px; }
.camp-title { font-size: 18px; font-weight: 700; color: #334155; }
.camp-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
.camp-steps { display: flex; gap: 8px; margin-bottom: 18px; }
.camp-stepdot {
  font-size: 11px; font-weight: 600; color: #94a3b8; padding: 4px 10px;
  border-radius: 20px; background: #f1f5f9; border: 1px solid #e2e8f0;
}
.camp-stepdot.is-on { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
.camp-section { margin-bottom: 14px; }
.camp-row { display: flex; gap: 14px; }
.camp-row-tight { gap: 8px; margin-top: 8px; }
.camp-col { flex: 1; min-width: 0; }
.camp-label { font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 6px; }
.camp-hint { font-size: 12px; color: #64748b; margin: 0 0 8px; line-height: 1.5; }
.camp-hint-inline { font-weight: 400; color: #94a3b8; font-size: 11px; }
.camp-input {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #e2e8f0;
  border-radius: 9px; font-size: 13px; background: #fff; color: #1e293b; font-family: inherit;
}
.camp-input:focus { outline: none; border-color: #e2e8f0; box-shadow: 0 0 0 3px rgba(255, 255, 255,0.3); }
textarea.camp-input { resize: vertical; }
.camp-mini { width: auto; flex: 1; }
.camp-objs { display: flex; gap: 10px; }
.camp-obj {
  flex: 1; text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
}
.camp-obj:hover { border-color: #e2e8f0; }
.camp-obj.is-on { border-color: #cbd5e1; background: #f1f5f9; box-shadow: 0 0 0 3px rgba(255, 255, 255,0.25); }
.camp-obj-name { font-size: 13px; font-weight: 600; color: #1e293b; }
.camp-obj-hint { font-size: 11px; color: #64748b; }
.camp-profile-card { padding: 12px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.camp-profile-summary { font-size: 13px; font-weight: 600; color: #1e293b; }
.camp-profile-meta { font-size: 12px; color: #64748b; margin-top: 4px; }
.camp-flash {
  font-size: 12px; font-weight: 600; color: #475569;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 6px 10px; margin-bottom: 10px; display: inline-block;
  animation: profile-modal-fade 0.2s ease-out;
}
html.theme-dark .camp-flash { color: #e2e8f0; background: #1e293b; border-color: #334155; }
.camp-link-btn { background: none; border: none; color: #64748b; font-size: 12px; cursor: pointer; padding: 6px 0 0; }
.camp-link-btn:hover { text-decoration: underline; }
.camp-profile-empty .camp-save-profile { margin-top: 10px; }
.camp-photo-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 22px 16px; border-radius: 12px; cursor: pointer; text-align: center;
  border: 1.5px dashed #cbd5e1; background: #f8fafc; transition: border-color 0.15s, background 0.15s;
}
.camp-photo-drop:hover, .camp-photo-drop.is-dragover { border-color: #cbd5e1; background: #f1f5f9; }
.camp-photo-drop-icon { width: 24px; height: 24px; color: #cbd5e1; margin-bottom: 2px; }
.camp-photo-drop-text { font-size: 13px; font-weight: 600; color: #334155; }
.camp-photo-drop-hint { font-size: 11.5px; color: #94a3b8; }
.camp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.camp-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
.camp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camp-thumb-x {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  border: none; background: rgba(15,23,42,0.7); color: #fff; font-size: 12px; line-height: 1; cursor: pointer;
}
.camp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.camp-foot-note { font-size: 12px; color: #94a3b8; }
.camp-rationale { font-size: 12px; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px 12px; margin-bottom: 14px; line-height: 1.5; }
.camp-photonote { font-size: 12px; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px 12px; }
.camp-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0; color: #64748b; font-size: 13px; }
.camp-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #e2e8f0; border-top-color: #64748b; animation: camp-spin 0.8s linear infinite; }
.camp-spinner.sm { width: 18px; height: 18px; border-width: 2px; }
@keyframes camp-spin { to { transform: rotate(360deg); } }
.camp-loglines { max-height: 320px; overflow-y: auto; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #334155; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; padding: 12px; }
.camp-logline { padding: 2px 0; }
.camp-foot-creating { color: #64748b; font-size: 13px; justify-content: flex-start; }
.camp-error, .camp-error-inline { color: #dc2626; font-size: 13px; }
.camp-error { padding: 16px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; }
.camp-success { text-align: center; padding: 24px 0 8px; }
.camp-success-icon {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  background-image: linear-gradient(180deg, rgba(255, 255, 255,0.95), rgba(255, 255, 255,0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 16px rgba(255, 255, 255,0.3);
}
.camp-success-title { font-size: 16px; font-weight: 700; color: #334155; }
.camp-success-sub { font-size: 13px; color: #475569; margin-top: 4px; }
.camp-success-meta { font-size: 12px; color: #64748b; margin-top: 8px; }
.camp-ids { font-size: 11px; color: #94a3b8; margin-top: 6px; font-family: ui-monospace, Menlo, monospace; }

/* Dark theme */
html.theme-dark .camp-panel { background: #0f172a; border-color: #1e293b; color: #e2e8f0; }
html.theme-dark .camp-close { background: #1e293b; border-color: #334155; color: #94a3b8; }
html.theme-dark .camp-title, html.theme-dark .camp-success-title { color: #e2e8f0; }
html.theme-dark .camp-sub, html.theme-dark .camp-hint, html.theme-dark .camp-profile-meta, html.theme-dark .camp-foot-note, html.theme-dark .camp-success-meta { color: #94a3b8; }
html.theme-dark .camp-label { color: #cbd5e1; }
html.theme-dark .camp-input { background: #1e293b; border-color: #334155; color: #f1f5f9; }
html.theme-dark .camp-photo-drop { background: #1e293b; border-color: #334155; }
html.theme-dark .camp-photo-drop:hover, html.theme-dark .camp-photo-drop.is-dragover { border-color: #94a3b8; background: #1e293b; }
html.theme-dark .camp-photo-drop-text { color: #e2e8f0; }
html.theme-dark .camp-photo-drop-hint { color: #64748b; }
html.theme-dark .camp-obj, html.theme-dark .camp-profile-card, html.theme-dark .camp-photonote, html.theme-dark .camp-loglines { background: #1e293b; border-color: #334155; }
html.theme-dark .camp-obj-name { color: #f1f5f9; }
html.theme-dark .camp-obj.is-on { background: #1e293b; border-color: #94a3b8; }
html.theme-dark .camp-stepdot { background: #1e293b; border-color: #334155; color: #64748b; }
html.theme-dark .camp-stepdot.is-on { background: #1e293b; border-color: #94a3b8; color: #e2e8f0; }
html.theme-dark .camp-rationale { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html.theme-dark .camp-foot { border-top-color: #1e293b; }
html.theme-dark .camp-logline { color: #cbd5e1; }

/* ================================================================== */
/* Análisis 360 — deep-dive view for the two internal accounts.        */
/* Crystal-glass panels, cyan glow, mono labels (Apollo design lang).  */
/* Tones: good = blue/cyan, mid = slate, bad = red. No green/amber.     */
/* ================================================================== */
.eh-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(239, 246, 255, 0.70);
  backdrop-filter: blur(8px);
  margin-bottom: 8px;
}
html.theme-dark .eh-view-toggle {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(15, 23, 42, 0.55);
}
.eh-view-toggle-btn {
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.eh-view-toggle-btn:hover { color: #1e293b; }
html.theme-dark .eh-view-toggle-btn:hover { color: #f1f5f9; }
.eh-view-toggle-btn.is-active {
  background: linear-gradient(135deg, #64748b, #94a3b8);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.35);
}
html.theme-dark .eh-view-toggle-btn.is-active {
  background: linear-gradient(135deg, #94a3b8, #cbd5e1);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
}


/* ----- Account 360 carousel: reuses the QA Center card/carousel classes
   (.apollo-tool / .apollo-tools-carousel). Those classes read --ap-* vars,
   so we redeclare the Apollo palette here, scoped to #eh-360. ----- */
#eh-360 {
  --ap-bg: #f1f5f9;
  --ap-bg-2: #ffffff;
  --ap-border: rgba(255, 255, 255, 0.18);
  --ap-border-strong: rgba(255, 255, 255, 0.42);
  --ap-cyan: #64748b;
  --ap-cyan-dim: rgba(255, 255, 255, 0.65);
  --ap-cyan-glow: rgba(255, 255, 255, 0.16);
  --ap-text: #0f172a;
  --ap-text-dim: #64748b;
  --ap-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}
/* Must NOT set `display` on #eh-360 itself — that would override the [hidden]
   attribute and leak the carousel into Overview mode. Style the inner shell. */
.eh360-shell { display: block; }
html.theme-dark #eh-360 {
  --ap-bg: #050a18;
  --ap-bg-2: #111827;
  --ap-border: rgba(255, 255, 255, 0.20);
  --ap-border-strong: rgba(255, 255, 255, 0.45);
  --ap-cyan: #cbd5e1;
  --ap-cyan-dim: rgba(255, 255, 255, 0.55);
  --ap-cyan-glow: rgba(255, 255, 255, 0.30);
  --ap-text: #f1f5f9;
  --ap-text-dim: #94a3b8;
}

.eh360-loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--ap-text-dim);
  font-family: var(--ap-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* Wide, page-covering stage — center card matches the content width (like the
   old Daily Pulse). The siblings spill past the viewport, so we fade the stage
   edges with a mask: the back cards dissolve softly instead of looking cut. */
.eh360-carousel.apollo-tools-carousel {
  /* Height is set by JS to hug the active card (no empty space below).
     This is just a first-paint fallback before JS measures. */
  height: 640px;
  margin-top: 6px;
  transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* No mask: the carousel is measured to the card's exact height, so a
     horizontal mask was clipping the active card's bottom drop-shadow. The
     peeking side cards already soften via opacity + blur. */
}
/* Cards size to their own content. Narrower + no height cap so the whole card
   grows to fit every section (funnel, ads, action plan) — nothing is hidden
   behind an internal scroll; the page scrolls instead. */
.eh360-card.apollo-tool {
  width: min(80%, 960px);
  height: auto;
  max-height: none;
  padding: 36px 38px 40px;
  /* Card grows to its content, so nothing needs clipping — and the clip was
     cutting the bottom recommendation cards' shadows at the rounded corner. */
  overflow: visible;
}
/* Let the body grow to its full content height instead of scrolling inside. */
.eh360-card .apollo-tool-body { gap: 22px; overflow: visible; flex: 0 0 auto; }
.eh360-card .apollo-tool-head { padding-bottom: 16px; margin-bottom: 6px; }

/* Bounce My House / Event Hawk full-page report reads too large — scale the 360
   card and its metrics down on these views (the trend SVG scales with the card
   width automatically). The Apollo popup keeps full size. */
#view-eventhawk .eh360-card.apollo-tool { width: min(63%, 700px); padding: 20px 22px 24px; }
#view-eventhawk .apollo-tool-title { font-size: 14px; }
#view-eventhawk .apollo-tool-subtitle { font-size: 11.5px; }
#view-eventhawk .eh360-kpis { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 9px; }
#view-eventhawk .eh360-kpi { padding: 11px 12px; min-height: 66px; gap: 4px; border-radius: 11px; }
#view-eventhawk .eh360-kpi-val { font-size: 18px; }
#view-eventhawk .eh360-kpi-label { font-size: 8.5px; }
#view-eventhawk .eh360-card .apollo-tool-body { gap: 14px; }
/* Push the peeking siblings out (own-width-relative so it scales with the card)
   and scale them down so they read as cards tucked behind, not flat slabs. */
.eh360-carousel .apollo-tool[data-pos="-1"] { transform: translate(calc(-50% - 62%), 22px) scale(0.86); }
.eh360-carousel .apollo-tool[data-pos="1"]  { transform: translate(calc(-50% + 62%), 22px) scale(0.86); }
.eh360-carousel .apollo-tool[data-pos="-2"] { transform: translate(calc(-50% - 74%), 40px) scale(0.78); }
.eh360-carousel .apollo-tool[data-pos="2"]  { transform: translate(calc(-50% + 74%), 40px) scale(0.78); }
/* The cards are ~80% wide, so the peeking siblings overlap the (opaque) center
   card heavily and, at 0.75 opacity, their text reads through as clutter and
   spills over the Campaigns table below. Drop them to a faint, heavily-blurred
   hint so only the focused card reads. */
.eh360-carousel .apollo-tool[data-pos="-1"],
.eh360-carousel .apollo-tool[data-pos="1"]  { opacity: 0.26 !important; filter: blur(5px) !important; }
.eh360-carousel .apollo-tool[data-pos="-2"],
.eh360-carousel .apollo-tool[data-pos="2"]  { opacity: 0.14 !important; filter: blur(8px) !important; }

/* Headline badge (primary KPI) — tone-aware version of .apollo-qa-tab-count. */
.eh360-badge {
  margin-left: 8px;
  vertical-align: middle;
  padding: 0 9px;
  min-width: 26px;
  font-family: var(--ap-mono);
}
.eh360-badge.tone-good { background: var(--ap-cyan); color: #0f172a; }
.eh360-badge.tone-mid  { background: #64748b; color: #0f172a; }
.eh360-badge.tone-bad  { background: #dc2626; color: #fff; }
html.theme-dark .eh360-badge.tone-bad { background: #f87171; color: #111827; }

/* Small mono section label inside a card ("Metrics", "Action plan"). */
.eh360-section-label {
  font-family: var(--ap-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-text-dim);
  margin: 2px 2px 0;
}
.eh360-section-label + .eh360-kpis { margin-top: 2px; }

/* KPI strip — glass tiles that fan out across the wide card. */
.eh360-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.eh360-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 22px 18px;
  min-height: 104px;
  border-radius: 14px;
  border: 1px solid var(--ap-border);
  background: var(--ap-cyan-glow);
}
html.theme-dark .eh360-kpi { background: rgba(255, 255, 255, 0.08); }
.eh360-kpi-label {
  font-family: var(--ap-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ap-text-dim);
  line-height: 1.2;
}
.eh360-kpi-val {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ap-text);
  font-variant-numeric: tabular-nums;
}
.eh360-kpi.tone-good .eh360-kpi-val { color: var(--ap-cyan); }
.eh360-kpi.tone-bad  .eh360-kpi-val { color: #dc2626; }
html.theme-dark .eh360-kpi.tone-bad .eh360-kpi-val { color: #f87171; }
.eh360-kpi.tone-good { border-color: var(--ap-border-strong); }
.eh360-kpi.tone-bad {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.30);
}

/* Recommendation rows — styled like QA Center client rows. Two columns on the
   wide card so the action plan fills the width instead of one long stack. */
.eh360-recs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-content: start;
}
.eh360-rec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 20px 20px;
  min-height: 104px;
  border-radius: 13px;
  border: 1px solid var(--ap-border);
  background: var(--ap-bg-2);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.eh360-rec:hover {
  border-color: var(--ap-border-strong);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
html.theme-dark .eh360-rec { background: rgba(20, 30, 60, 0.40); }
.eh360-rec-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.eh360-rec-title {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ap-text);
}
/* Bucket pills: Improve = cyan outline, Do = solid blue, Remove = red. */
.eh360-tag-improve {
  background: var(--ap-cyan-glow);
  color: var(--ap-cyan);
  border-color: var(--ap-border-strong);
}
.eh360-tag-do {
  background: var(--ap-cyan);
  color: #0f172a;
  border-color: var(--ap-cyan);
}
html.theme-dark .eh360-tag-do { color: #111827; }
.eh360-tag-remove {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.35);
}
html.theme-dark .eh360-tag-remove { color: #f87171; }
.eh360-rec .apollo-qa-action-preview { font-size: 12px; line-height: 1.5; }

@media (max-width: 860px) {
  .eh360-carousel.apollo-tools-carousel { height: 86vh; min-height: 600px; }
  .eh360-card.apollo-tool { width: 94%; padding: 22px 18px 16px; }
  .eh360-kpis { grid-template-columns: repeat(2, 1fr); }
  .eh360-recs { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Ninety Scorecard sync — toolbar button + confirm modal on the KPIs view.
   Glossy crystal on a blue palette, same as the rest of the app. Red is
   reserved for genuine failures.
   ========================================================================== */
.kpis-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
}
.nsync-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.16) 0%, rgba(37, 99, 235, 0.28) 100%);
  color: #1d4ed8;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.nsync-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.nsync-trigger:active { transform: translateY(0); }
.nsync-trigger svg { width: 15px; height: 15px; }
html.theme-dark .nsync-trigger {
  border-color: rgba(96, 165, 250, 0.34);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22) 0%, rgba(30, 64, 175, 0.34) 100%);
  color: #dbeafe;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.nsync-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}
.nsync-modal {
  width: min(620px, 100%);
  max-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.94) 100%);
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--text);
  overflow: hidden;
}
html.theme-dark .nsync-modal {
  border-color: rgba(148, 163, 184, 0.16);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(2, 6, 23, 0.96) 100%);
  color: #e2e8f0;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.nsync-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 12px;
}
.nsync-title { font-size: 16px; font-weight: 700; }
.nsync-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
html.theme-dark .nsync-sub { color: #94a3b8; }
.nsync-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.nsync-close:hover { color: var(--text); }
html.theme-dark .nsync-close:hover { color: #f1f5f9; }

.nsync-week {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 14px;
  font-size: 12px;
  color: var(--muted);
}
.nsync-week select {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
html.theme-dark .nsync-week select {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
}

.nsync-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}
html.theme-dark .nsync-body { border-top-color: rgba(148, 163, 184, 0.12); }

.nsync-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  cursor: pointer;
  font-size: 13px;
}
html.theme-dark .nsync-row { border-bottom-color: rgba(148, 163, 184, 0.09); }
.nsync-row:last-child { border-bottom: 0; }
.nsync-row input { accent-color: #2563eb; cursor: pointer; }
.nsync-row-title { flex: 1; }
.nsync-row-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #1d4ed8;
}
html.theme-dark .nsync-row-value { color: #93c5fd; }
.nsync-row.is-missing { opacity: 0.5; cursor: default; }
.nsync-row.is-missing .nsync-row-value { color: var(--muted); font-weight: 500; }

.nsync-loading, .nsync-empty, .nsync-warn {
  padding: 18px 0;
  font-size: 13px;
  color: var(--muted);
}
.nsync-empty strong { display: block; color: var(--text); margin-bottom: 6px; font-size: 13px; }
html.theme-dark .nsync-empty strong { color: #e2e8f0; }
.nsync-empty p { margin: 0; line-height: 1.55; }
.nsync-warn {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.07);
  color: #b91c1c;
}
html.theme-dark .nsync-warn { color: #fca5a5; }

.nsync-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}
html.theme-dark .nsync-foot { border-top-color: rgba(148, 163, 184, 0.12); }
.nsync-status { font-size: 12px; color: var(--muted); flex: 1; }
.nsync-status.is-ok { color: #1d4ed8; font-weight: 600; }
html.theme-dark .nsync-status.is-ok { color: #93c5fd; }
.nsync-status.is-error { color: #dc2626; font-weight: 600; }
html.theme-dark .nsync-status.is-error { color: #fca5a5; }
.nsync-push {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.5);
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.nsync-push:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

/* Grouped sections inside the Ninety sync modal. Each date window gets its
   own header so a 7-day number can never be mistaken for a 14-day one. */
.nsync-group { padding: 4px 0 2px; }
.nsync-group + .nsync-group { margin-top: 6px; }
.nsync-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 8px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 70%, rgba(248, 250, 252, 0) 100%);
}
html.theme-dark .nsync-group-head {
  background: linear-gradient(180deg, rgba(7, 13, 28, 0.98) 70%, rgba(7, 13, 28, 0) 100%);
}
.nsync-group-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
html.theme-dark .nsync-group-label { color: #e2e8f0; }
.nsync-group-range {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.32);
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  white-space: nowrap;
}
html.theme-dark .nsync-group-range {
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(59, 130, 246, 0.16);
  color: #93c5fd;
}
.nsync-group-note {
  flex: 1;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nsync-group-toggle {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  cursor: pointer;
}
.nsync-group-toggle:hover { color: #1d4ed8; border-color: rgba(59, 130, 246, 0.4); }
html.theme-dark .nsync-group-toggle { border-color: rgba(148, 163, 184, 0.2); }
html.theme-dark .nsync-group-toggle:hover { color: #93c5fd; border-color: rgba(96, 165, 250, 0.36); }

/* The rows scroll and the scrollbar is hidden at rest, so without this fade
   the last group reads as "there is nothing below". */
.nsync-body {
  position: relative;
  scroll-padding-top: 40px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.nsync-body.is-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}
.nsync-modal { max-height: min(88vh, 860px); }

/* ============================================================================
   GOLD ACCENTS — pass 1: Calendar view + date-range popover
   Small highlights only: a label, an icon, the active day, the primary action.
   No gold fills on large surfaces, so the blue crystal look stays in charge.
   Tokens sit here so the same accents can spread to other views later.
   ========================================================================== */
:root {
  --gold: #c8a54a;
  --gold-bright: #e6c977;
  --gold-pale: #f3e2ad;
  --gold-deep: #7a5c17;
  --gold-ink: #1a1205;
  --gold-line: rgba(200, 165, 74, 0.40);
  --gold-wash: rgba(200, 165, 74, 0.13);
  --gold-glow: rgba(200, 165, 74, 0.18);
}

/* "Calendar" page title: brushed-gold lettering. */
body.calendar-active #portfolio-title {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 34%, var(--gold-pale) 52%, var(--gold-bright) 68%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Weekday label rows (week + month views). */
#view-calendar .cal-week-day,
#view-calendar .cal-month-h { color: var(--gold-deep); }
html.theme-dark #view-calendar .cal-week-day,
html.theme-dark #view-calendar .cal-month-h { color: var(--gold); }

/* Today: gold number, hairline over the column, gold pill in the month grid. */
#view-calendar .cal-week-col.is-today .cal-week-head { box-shadow: inset 0 2px 0 var(--gold); }
#view-calendar .cal-week-col.is-today .cal-week-num {
  color: var(--gold-deep);
  text-shadow: 0 0 14px var(--gold-glow);
}
#view-calendar .cal-week-col.is-today .cal-week-day { color: var(--gold-deep); }
html.theme-dark #view-calendar .cal-week-col.is-today .cal-week-num,
html.theme-dark #view-calendar .cal-week-col.is-today .cal-week-day { color: var(--gold-bright); }
#view-calendar .cal-day.is-today .cal-day-num,
#view-calendar .cal-mini-d.is-today,
#view-calendar .cal-mini-d.is-today.has-events {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
}

/* Toolbar chrome: gold icons and gold hairlines instead of the grey ones. */
#view-calendar .cal-tz-pick-icon { color: var(--gold); }
#view-calendar .cal-tz-pick:hover,
#view-calendar .cal-tz-pick.is-open { border-color: var(--gold-line); }
#view-calendar .cal-tz-pick.is-open .cal-tz-pick-chev { color: var(--gold); }
#view-calendar .cal-reminders-icon { color: var(--gold); }
#view-calendar #cal-today:hover,
#view-calendar .cal-nav-btn:hover { border-color: var(--gold-line); }

/* "Link Google Calendar" wears the same kit as the event chips: black body,
   gold hairline, gold lettering, and the range picker's calendar glyph, which
   follows the button's text colour. */
#view-calendar .cal-gcal-btn-icon { width: 14px; height: 14px; color: var(--gold); }
#view-calendar .cal-gcal-btn {
  background: linear-gradient(158deg, #16130c 0%, #0b0a07 54%, #191408 100%);
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
#view-calendar .cal-gcal-btn:hover {
  background: linear-gradient(158deg, #1d1810 0%, #100e09 54%, #201909 100%);
  border-color: var(--gold);
  color: var(--gold-pale);
  box-shadow: 0 2px 10px rgba(200, 165, 74, 0.16);
}
/* Connected state used to be green, which the palette does not allow: it is a
   deeper gold wash now, still clearly distinct from the unlinked state. */
#view-calendar .cal-gcal-btn.is-connected {
  background: linear-gradient(158deg, rgba(200, 165, 74, 0.26) 0%, rgba(200, 165, 74, 0.12) 100%);
  border-color: var(--gold);
  color: var(--gold-pale);
}
#view-calendar .cal-gcal-btn.is-connected:hover {
  background: linear-gradient(158deg, rgba(200, 165, 74, 0.34) 0%, rgba(200, 165, 74, 0.18) 100%);
  border-color: var(--gold-bright);
}

/* Selected option in both toolbar dropdowns. */
#view-calendar .cal-tz-option.is-active,
#view-calendar .cal-tz-option.is-active:hover {
  background: var(--gold-wash);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
#view-calendar .cal-tz-option.is-active .cal-tz-option-tag { color: var(--gold-deep); }
#view-calendar .cal-tz-option.is-active .cal-tz-option-name { color: var(--gold); }
html.theme-dark #view-calendar .cal-tz-option.is-active .cal-tz-option-tag { color: var(--gold-pale); }
html.theme-dark #view-calendar .cal-tz-option.is-active .cal-tz-option-name { color: var(--gold-bright); }

/* "+ New event" is the one action that earns a gold treatment. */
#cal-add-event.btn-primary,
.dr-actions .btn-primary {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.20), rgba(200, 165, 74, 0.10));
  border-color: var(--gold-line);
  color: var(--gold-deep);
  font-weight: 600;
}
#cal-add-event.btn-primary:hover,
.dr-actions .btn-primary:hover:not(:disabled) {
  background: rgba(200, 165, 74, 0.28);
  border-color: var(--gold);
  color: var(--gold-deep);
}
html.theme-dark #cal-add-event.btn-primary,
html.theme-dark .dr-actions .btn-primary { color: var(--gold-bright); }
html.theme-dark #cal-add-event.btn-primary:hover,
html.theme-dark .dr-actions .btn-primary:hover:not(:disabled) { color: var(--gold-pale); }

/* Date-range popover: month titles, weekday letters, selection, chosen preset. */
.dr-trigger-icon { color: var(--gold); }
.dr-cal-title { color: var(--gold-deep); }
html.theme-dark .dr-cal-title { color: var(--gold-pale); }
.dr-dow { color: var(--gold-deep); }
html.theme-dark .dr-dow { color: var(--gold); }
.dr-nav:hover { border-color: var(--gold-line); background: var(--gold-wash); }
.dr-preset.is-active {
  background: var(--gold-wash);
  box-shadow: inset 0 0 0 1px var(--gold-line);
  color: var(--gold-deep);
}
html.theme-dark .dr-preset.is-active { color: var(--gold-pale); }
.dr-day.dr-in-range { background: var(--gold-wash); color: var(--gold-deep); }
html.theme-dark .dr-day.dr-in-range { color: var(--gold-bright); }
.dr-day.dr-sel-start,
.dr-day.dr-sel-end {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
}
.dr-day:hover:not(.dr-empty):not(:disabled) { background: var(--gold-wash); }
.dr-field.is-set { border-color: var(--gold-line); }

/* ── Gold accents, pass 2: event chips ───────────────────────────────────────
   Styled after a black jersey with metallic gold lettering: matte black body,
   thin gold trim, a gold edge down the left like a kit stripe, and a faint
   satin sheen across the face. Dark chips in both themes, since the look is
   the point. Holidays keep a red trim so they still read as different. */
#view-calendar .cal-event-pill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, #16130c 0%, #0b0a07 54%, #191408 100%);
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  color: var(--gold-bright);
  box-shadow: inset 0 1px 0 rgba(230, 201, 119, 0.16);
}
/* Satin stripe, like the sheen on the fabric. */
#view-calendar .cal-event-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 40%, rgba(230, 201, 119, 0.09) 50%, transparent 60%);
  pointer-events: none;
}
#view-calendar .cal-event-pill > * { position: relative; z-index: 1; }
#view-calendar .cal-event-pill:hover {
  filter: none;
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(230, 201, 119, 0.26), 0 2px 10px rgba(200, 165, 74, 0.16);
}
#view-calendar .cal-event-pill .cal-event-title {
  color: var(--gold-bright);
  font-weight: 700;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
#view-calendar .cal-event-pill .cal-event-time {
  color: var(--gold);
  font-weight: 700;
  opacity: 1;
}
#view-calendar .cal-event-pill .cal-event-icon,
#view-calendar .cal-event-pill .cal-event-recur,
#view-calendar .cal-event-pill .cal-event-check { color: var(--gold); opacity: 0.9; }

/* Holidays: same black kit, red trim and lettering. */
#view-calendar .cal-event-pill.cal-cat-holiday {
  border-color: rgba(185, 28, 28, 0.55);
  border-left-color: #b91c1c;
  color: #f0b4b4;
}
#view-calendar .cal-event-pill.cal-cat-holiday .cal-event-title { color: #f0b4b4; }
#view-calendar .cal-event-pill.cal-cat-holiday .cal-event-time,
#view-calendar .cal-event-pill.cal-cat-holiday .cal-event-icon { color: #e08a8a; }
#view-calendar .cal-event-pill.cal-cat-holiday::after { background: none; }

/* Day view cards get the same kit, with proper metallic lettering: the title is
   big enough for the highlight/shadow bands to read as brushed gold. */
#view-calendar .cal-day-event {
  background: linear-gradient(158deg, #16130c 0%, #0b0a07 54%, #191408 100%);
  border-color: var(--gold-line);
  border-left: 3px solid var(--gold);
  color: var(--gold-pale);
}
#view-calendar .cal-day-event:hover {
  background: linear-gradient(158deg, #1d1810 0%, #100e09 54%, #201909 100%);
  border-color: var(--gold);
}
#view-calendar .cal-day-event-body strong {
  background: linear-gradient(180deg, #f7e9bd 0%, var(--gold-bright) 38%, var(--gold) 56%, #f2dfa6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: 0.01em;
}
#view-calendar .cal-day-event-time { color: var(--gold); font-weight: 700; }
#view-calendar .cal-day-event-desc { color: rgba(230, 201, 119, 0.62); }
#view-calendar .cal-day-event-cat {
  background: var(--gold-wash);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
#view-calendar .cal-day-event-gcal,
#view-calendar .cal-day-event.is-gcal .cal-day-event-gcal {
  background: var(--gold-wash);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
#view-calendar .cal-day-event.is-gcal { border-left-color: var(--gold-bright); }
#view-calendar .cal-day-event-recur,
#view-calendar .cal-day-event-finished {
  background: rgba(200, 165, 74, 0.10);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(200, 165, 74, 0.28);
}

/* ── Gold accents, pass 3: the event dialog ──────────────────────────────────
   Restrained on purpose: the panel and every field stay greyed black with the
   existing neutral borders, and gold shows up only as touches — the heading,
   the field labels, the two icons, the focus ring, the timezone tags and the
   Save button. The dialog is appended to <body>, so these are scoped by class.
   The `html` prefix is there to outrank the html.theme-dark rules above. */
html .cal-dialog { border: 1px solid #262626; }
html .cal-dialog .cal-dialog-head { border-bottom-color: #262626; }
html .cal-dialog .cal-dialog-head h3 {
  background: linear-gradient(180deg, #f7e9bd 0%, var(--gold-bright) 38%, var(--gold) 56%, #f2dfa6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: 0.01em;
}
html .cal-dialog .cal-dialog-close:hover { background: #1a1a1a; color: var(--gold-bright); }

/* Labels are the gold lettering. Fields themselves stay neutral. */
html .cal-dialog .cal-field span { color: var(--gold); }
html .cal-dialog .cal-field input:focus,
html .cal-dialog .cal-field select:focus,
html .cal-dialog .cal-field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: -1px;
  border-color: var(--gold);
}

/* Date and time buttons: neutral box, gold glyph. */
html .cal-dialog .cal-fancy-date::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a54a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
html .cal-dialog .cal-fancy-time::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a54a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
/* The dark theme turned these slate blue on hover and focus; keep them black
   and let the gold ring do the work. */
html .cal-dialog .cal-fancy-input:hover {
  border-color: #3a3a3a;
  background-color: #1a1a1a;
}
html .cal-dialog .cal-fancy-input:focus {
  border-color: var(--gold);
  background-color: #16130c;
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.18);
}

/* Timezone comparison: neutral box, gold tags. */
html .cal-dialog .cal-tz-tag {
  background: rgba(200, 165, 74, 0.10);
  border-color: rgba(200, 165, 74, 0.30);
  color: var(--gold-bright);
}

/* Save is the one gold action. Mark as finished and Delete stay as they were. */
html .cal-dialog-actions .btn-primary {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.20), rgba(200, 165, 74, 0.10));
  border-color: var(--gold-line);
  color: var(--gold-bright);
  font-weight: 600;
}
html .cal-dialog-actions .btn-primary:hover:not(:disabled) {
  background: rgba(200, 165, 74, 0.28);
  border-color: var(--gold);
  color: var(--gold-pale);
}
html .cal-dialog .cal-finished-tag {
  background: rgba(200, 165, 74, 0.10);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(200, 165, 74, 0.28);
}

/* ── Gold accents, pass 4: dialog sub-controls ───────────────────────────────
   The date picker, the time picker, the native dropdown lists and the footer's
   secondary button. Same rule as pass 3: greyed-black base, gold only on the
   selected value, the labels and the glyphs. */

/* Date picker popover. */
html .cal-pickup { border-color: #262626; }
html .cal-pickup .cal-pickup-title { color: var(--gold-bright); }
html .cal-pickup .cal-pickup-dows span { color: var(--gold); opacity: 0.75; }
html .cal-pickup .cal-pickup-nav:hover { border-color: var(--gold-line); color: var(--gold-bright); }
html .cal-pickup .cal-pickup-day:hover { background: var(--gold-wash); color: var(--gold-pale); }
html .cal-pickup .cal-pickup-day.is-today {
  background: transparent;
  outline: 1.5px solid var(--gold-line);
  color: var(--gold-bright);
}
html .cal-pickup .cal-pickup-day.is-selected {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)) !important;
  color: var(--gold-ink) !important;
  outline: 0;
}
html .cal-pickup .cal-pickup-day.is-selected:hover {
  background: linear-gradient(160deg, var(--gold-pale), var(--gold-bright)) !important;
}
/* Out-of-month weekends were a rusty brown that reads as an error state. */
html .cal-pickup .cal-pickup-day.is-other.is-weekend { color: #4a4a4a; }
html .cal-pickup .cal-pickup-foot { border-top-color: #262626; }
html .cal-pickup .cal-pickup-btn:hover { border-color: var(--gold-line); color: var(--gold-bright); }
html .cal-pickup .cal-pickup-btn.is-primary {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.20), rgba(200, 165, 74, 0.10));
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html .cal-pickup .cal-pickup-btn.is-primary:hover {
  background: rgba(200, 165, 74, 0.28);
  border-color: var(--gold);
  color: var(--gold-pale);
}

/* Time picker: gold arrows, gold labels, gold AM/PM selection. */
html .cal-pickup .cal-pickup-spin-btn { color: var(--gold); }
html .cal-pickup .cal-pickup-spin-btn:hover { border-color: var(--gold-line); color: var(--gold-bright); }
html .cal-pickup .cal-pickup-spin-label { color: var(--gold); opacity: 0.8; }
html .cal-pickup .cal-pickup-spin-sep { color: var(--gold); }
html .cal-pickup .cal-pickup-ampm-btn:hover { border-color: var(--gold-line); color: var(--gold-bright); }
html .cal-pickup .cal-pickup-ampm-btn.is-active {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.22), rgba(200, 165, 74, 0.10));
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* Native dropdown lists. Chrome draws the option highlight in the OS accent
   colour unless the select opts into `base-select`, which hands the picker
   panel over to CSS. Older engines simply keep their native list. */
@supports (appearance: base-select) {
  html .cal-dialog .cal-field select,
  html .cal-dialog .cal-field select::picker(select) { appearance: base-select; }
  html .cal-dialog .cal-field select::picker-icon { color: var(--gold); }
  /* base-select renders the closed value as flex content, which wraps long
     timezone names onto a second line. Keep it on one line, clipped. */
  html .cal-dialog .cal-field select { white-space: nowrap; }
  html .cal-dialog .cal-field select::selectedcontent {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html .cal-dialog .cal-field select:open::picker-icon { color: var(--gold-bright); }
  html .cal-dialog .cal-field select::picker(select) {
    background: #111111;
    border: 1px solid #262626;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.66);
  }
  html .cal-dialog .cal-field select option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    background: transparent;
    color: #e5e5e5;
    font-size: 13.5px;
  }
  html .cal-dialog .cal-field select option:hover {
    background: var(--gold-wash);
    color: var(--gold-pale);
  }
  html .cal-dialog .cal-field select option:checked {
    background: rgba(200, 165, 74, 0.18);
    color: var(--gold-bright);
  }
  html .cal-dialog .cal-field select option::checkmark { color: var(--gold); }
}

/* Footer: the secondary action goes neutral, with only its glyph in gold. */
html .cal-dialog .cal-dialog-finish,
html .cal-dialog .cal-dialog-finish.is-finished {
  background: #111111;
  border-color: #262626;
  color: #e5e5e5;
}
html .cal-dialog .cal-dialog-finish:hover,
html .cal-dialog .cal-dialog-finish.is-finished:hover {
  background: #1a1a1a;
  border-color: #3a3a3a;
  color: #f5f5f5;
}
html .cal-dialog .cal-dialog-finish .cdf-glyph { color: var(--gold); font-weight: 700; }

/* ── Gold accents, pass 5: the client page (#view-eventhawk) ─────────────────
   Same discipline as the dialog: greyed-black surfaces keep their neutral
   borders, and gold lands on the labels, the column headers, the live/level
   badges, the active tab and the row glyphs. Scoped by the view id, which also
   outranks the html.theme-dark rules further up the file. */

/* The page title is gold on every view now, not just the calendar. */
#portfolio-title {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 34%, var(--gold-pale) 52%, var(--gold-bright) 68%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero: metric labels and the level / live badges. */
#view-eventhawk .metric-label { color: var(--gold-deep); }
html.theme-dark #view-eventhawk .metric-label { color: var(--gold); }
#view-eventhawk .badge-l1,
#view-eventhawk .badge-l2,
#view-eventhawk .badge-l3,
#view-eventhawk .badge-live {
  background: var(--gold-wash);
  color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
html.theme-dark #view-eventhawk .badge-l1,
html.theme-dark #view-eventhawk .badge-l2,
html.theme-dark #view-eventhawk .badge-l3,
html.theme-dark #view-eventhawk .badge-live { color: var(--gold-bright); }
/* Paused stays quiet, so the gold ones read as the live rows. */
#view-eventhawk .badge-paused { background: #f1f5f9; color: #64748b; box-shadow: none; }
html.theme-dark #view-eventhawk .badge-paused { background: #1a1a1a; color: #a3a3a3; }
/* The account-type pill was slate blue; neutral keeps the gold hierarchy. */
#view-eventhawk .eh-hero-head .portfolio-pill { background: #f1f5f9; color: #475569; }
html.theme-dark #view-eventhawk .eh-hero-head .portfolio-pill { background: #1a1a1a; color: #d4d4d4; }
#view-eventhawk .eh-client-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.18);
}

/* Campaigns card header. */
#view-eventhawk .card-header h3 { color: var(--gold-deep); }
html.theme-dark #view-eventhawk .card-header h3 { color: var(--gold-bright); }
#view-eventhawk .eh-open-all-btn {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.22), rgba(200, 165, 74, 0.10));
  border-color: var(--gold-line);
  color: var(--gold-deep);
  box-shadow: inset 0 1px 0 rgba(230, 201, 119, 0.22), 0 2px 8px rgba(200, 165, 74, 0.14);
}
html.theme-dark #view-eventhawk .eh-open-all-btn { color: var(--gold-bright); }
#view-eventhawk .eh-open-all-btn:hover { filter: brightness(1.12); }
#view-eventhawk .eh-campaign-search-wrap .eh-campaign-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.18);
}

/* Performance / Marketing Team switch: the sliding pill is the gold one. */
#view-eventhawk .eh-camp-mode-tabs { border-color: #262626; }
#view-eventhawk .eh-camp-mode-thumb {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}
#view-eventhawk .eh-camp-mode-tab.is-active { color: var(--gold-ink); }
#view-eventhawk .eh-camp-mode-tab:hover:not(.is-active) { color: var(--gold-bright); }

/* Campaigns table: gold column headers, gold row wash, gold glyphs. */
#view-eventhawk .campaigns-table th { color: var(--gold-deep); }
html.theme-dark #view-eventhawk .campaigns-table th { color: var(--gold); }
#view-eventhawk .campaigns-table tr:hover td { background: rgba(200, 165, 74, 0.07); }
#view-eventhawk .eh-tree-row.open > td .eh-tree-toggle { color: var(--gold-bright); }
#view-eventhawk .eh-rec-icon-good {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
}
#view-eventhawk .hs-ticket-btn {
  background: rgba(200, 165, 74, 0.12);
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
#view-eventhawk .hs-ticket-btn:hover { background: rgba(200, 165, 74, 0.24); }

/* ── Gold accents, pass 6: the client 360 carousel (#eh-360) ─────────────────
   Card titles, section labels and the small stat labels go gold; the numbers
   stay light so they keep reading as data. "Remove" and the bad tone keep red,
   which is still the only warning colour. */
#eh-360 .apollo-tool-title { color: var(--gold-bright); }
#eh-360 .apollo-tool-subtitle { color: rgba(230, 201, 119, 0.60); }
#eh-360 .eh360-section-label,
#eh-360 .eh360-kpi-label,
#eh-360 .eh-trend-stat-label,
#eh-360 .eh360-funnel-label { color: var(--gold); opacity: 0.9; }
#eh-360 .eh360-kpi-val,
#eh-360 .eh-trend-stat-value,
#eh-360 .eh360-funnel-val { color: #e5e5e5; }

/* Headline badge on each card. */
#eh-360 .eh360-badge.tone-good {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
  border-color: var(--gold);
}
#eh-360 .eh360-badge.tone-mid {
  background: var(--gold-wash);
  color: var(--gold-bright);
  border-color: var(--gold-line);
}

/* Action-plan tags: gold for what to do, red kept for what to remove. */
#eh-360 .eh360-tag-improve {
  background: var(--gold-wash);
  color: var(--gold-bright);
  border-color: var(--gold-line);
}
#eh-360 .eh360-tag-do {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
  border-color: var(--gold);
}
#eh-360 .apollo-qa-action-preview .arrow { color: var(--gold); }

/* Funnel bars and the year switch. */
#eh-360 .eh360-funnel-bar {
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
#eh-360 .year-toggle-btn.is-active {
  color: var(--gold-ink);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
}

/* The ROAS trend chart inside the 360 cards: gold line and gold markers on the
   black card; the grid and axis labels stay grey so the line reads first. */
#eh-360 .trend-line { stroke: var(--gold); }
#eh-360 .trend-dot-outer,
#eh-360 .trend-point-positive .trend-dot-outer,
#eh-360 .trend-point-concern .trend-dot-outer { fill: #0b0a07; stroke: var(--gold-bright); }
#eh-360 .trend-dot-inner,
#eh-360 .trend-point-positive .trend-dot-inner,
#eh-360 .trend-point-concern .trend-dot-inner { fill: var(--gold-bright); }
#eh-360 .trend-value-label,
#eh-360 .trend-point-positive .trend-value-label,
#eh-360 .trend-point-concern .trend-value-label { fill: var(--gold-bright); }

/* On a white background the pale end of the gold gradient disappears, so the
   light theme gets a deeper version of the same brushed lettering. */
html:not(.theme-dark) #portfolio-title {
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 38%, #a5822c 58%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Gold accents, pass 7: the KPIs page (#view-kpis) ────────────────────────
   Cards keep their black body and neutral border; the big numbers stay white
   because they are the data. Gold goes on the two section titles, the card
   labels, the owner badge and the Sync to Ninety button. */
#view-kpis .kpis-section-title { color: var(--gold-deep); }
html.theme-dark #view-kpis .kpis-section-title { color: var(--gold-bright); }
#view-kpis .kpi-label { color: var(--gold-deep); }
html.theme-dark #view-kpis .kpi-label { color: var(--gold); }
/* Owner badge and the range hint sit at the card's feet: dimmer gold so they
   stay secondary to the label above them. */
#view-kpis .kpi[data-owner]::after { color: rgba(200, 165, 74, 0.72); }
#view-kpis .kpi-range { color: rgba(230, 201, 119, 0.50); }
#view-kpis .kpi-grid.kpi-grid-large .kpi:hover {
  border-color: var(--gold-line);
  box-shadow: 0 6px 16px rgba(200, 165, 74, 0.12);
}

/* Sync to Ninety was the last blue-filled button on the page. */
#view-kpis .nsync-trigger {
  border-color: var(--gold-line);
  background: linear-gradient(135deg, rgba(200, 165, 74, 0.14) 0%, rgba(200, 165, 74, 0.26) 100%);
  color: var(--gold-deep);
  box-shadow: 0 6px 18px rgba(200, 165, 74, 0.14), inset 0 1px 0 rgba(230, 201, 119, 0.28);
}
html.theme-dark #view-kpis .nsync-trigger { color: var(--gold-bright); }
#view-kpis .nsync-trigger:hover {
  box-shadow: 0 10px 26px rgba(200, 165, 74, 0.22), inset 0 1px 0 rgba(230, 201, 119, 0.36);
}

/* ── Gold accents, pass 8: the Dashboard (#view-dashboard) ───────────────────
   The KPI strip, the widget chrome and the widget actions. Cards keep their
   black bodies; red stays where it means "wrong" (a mismatched level). */
#view-dashboard .kpi-label { color: var(--gold-deep); }
html.theme-dark #view-dashboard .kpi-label { color: var(--gold); }
#view-dashboard .kpi-range { color: rgba(230, 201, 119, 0.50); }

/* Widget headers. */
#view-dashboard .widget-title { color: var(--gold-deep); }
html.theme-dark #view-dashboard .widget-title { color: var(--gold-bright); }
#view-dashboard .widget-grip:hover { color: var(--gold); }
#view-dashboard .widget-icon-btn:hover {
  border-color: var(--gold-line);
  color: var(--gold-bright);
}

/* Widget actions: the filled button in a widget becomes the gold one, the
   ghost one gets a gold hairline. */
#view-dashboard .widget .btn-primary {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.20), rgba(200, 165, 74, 0.10));
  border-color: var(--gold-line);
  color: var(--gold-deep);
  font-weight: 600;
}
html.theme-dark #view-dashboard .widget .btn-primary { color: var(--gold-bright); }
#view-dashboard .widget .btn-primary:hover {
  background: rgba(200, 165, 74, 0.28);
  border-color: var(--gold);
}
#view-dashboard .widget .btn-ghost:hover {
  border-color: var(--gold-line);
  color: var(--gold-bright);
  background: rgba(200, 165, 74, 0.08);
}

/* Name mismatches: the current level keeps its red (that is the wrong value),
   the suggested level and the rename action go gold. */
#view-dashboard .badge-prefix-suggested {
  background: var(--gold-wash);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
#view-dashboard .mismatch-rename-btn {
  background: rgba(200, 165, 74, 0.12);
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
#view-dashboard .mismatch-rename-btn:hover {
  background: rgba(200, 165, 74, 0.24);
  border-color: var(--gold);
  color: var(--gold-pale);
}

/* Campaign snippet tags in the Campaigns widget. */
#view-dashboard .campaign-badge {
  background: var(--gold-wash);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}

/* "Add" actions on the dashboard read like the calendar's "+ New event": a gold
   hairline instead of a grey one. */
#view-dashboard .widget-clock-add-header,
#view-dashboard .widget-add-btn {
  border-color: var(--gold-line) !important;
  color: var(--gold-bright);
}
#view-dashboard .widget-clock-add-header:hover,
#view-dashboard .widget-add-btn:hover {
  border-color: var(--gold) !important;
  color: var(--gold-pale);
  background: rgba(200, 165, 74, 0.10);
}

/* The rename chips inherited a glass treatment: an inset white glow plus two
   white sheen layers. Flat gold reads cleaner, so both come off. */
#view-dashboard .mismatch-rename-btn {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#view-dashboard .mismatch-rename-btn::before,
#view-dashboard .mismatch-rename-btn::after { display: none; }

/* ── Gold accents, pass 9: full-screen panels and the confirm dialog ──────────
   QA Center, Underperformers, Payment Issues, the clock chips and the "Rename
   in Meta?" confirm. These panels used washed white/grey glass for their cards
   and buttons; they move to black bodies with gold hairlines. Red stays where
   it means a problem: payment issues, no-ROAS tags, mismatched levels. */

/* Shared card body for the three panels. */
.apollo-qa-item,
.underperf-client,
.pay-client,
.underperf-side {
  background: #0b0a07 !important;
  border-color: var(--gold-line) !important;
}
.apollo-qa-item:hover,
.underperf-client:hover,
.pay-client:hover {
  background: #16130c !important;
  border-color: var(--gold) !important;
}
.underperf-client.is-active,
.apollo-qa-item.is-checked {
  background: rgba(200, 165, 74, 0.12) !important;
  border-color: var(--gold) !important;
}

/* Panel headings. */
.widget-payments .widget-head h3,
.widget-underperformer .widget-head h3 { color: var(--gold-bright); }
.widget-apollo-qa .apollo-tool-head .apollo-tool-title,
.widget-apollo-qa .apollo-tool-title { color: var(--gold-bright); }

/* Queue and tab counters: gold instead of the white chip. */
.apollo-qa-tab-count,
.underperf-tab-count {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
}

/* Tabs (Active / History). */
.underperf-tab.is-active {
  background: rgba(200, 165, 74, 0.16);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}

/* Row chips: neutral info goes gold, warnings keep their red. */
.apollo-qa-tag {
  background: rgba(200, 165, 74, 0.14);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(200, 165, 74, 0.28);
}
.apollo-qa-tag-warn {
  background: rgba(200, 165, 74, 0.06);
  color: rgba(230, 201, 119, 0.75);
  box-shadow: inset 0 0 0 1px rgba(200, 165, 74, 0.20);
}
.apollo-qa-action-preview { color: rgba(230, 201, 119, 0.62); }

/* Checkboxes. */
.apollo-qa-check-box { border-color: var(--gold-line); }
.apollo-qa-check input:checked + .apollo-qa-check-box,
.apollo-qa-check-box.is-checked {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  border-color: var(--gold);
}

/* Panel buttons: the primary is gold, the secondary keeps a gold hairline. */
.apollo-qa-btn-primary {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.24), rgba(200, 165, 74, 0.12));
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
.apollo-qa-btn-primary:hover {
  background: rgba(200, 165, 74, 0.32);
  border-color: var(--gold);
  color: var(--gold-pale);
}
.apollo-qa-btn:not(.apollo-qa-btn-primary) {
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
.apollo-qa-btn:not(.apollo-qa-btn-primary):hover {
  border-color: var(--gold);
  background: rgba(200, 165, 74, 0.10);
}
.apollo-qa-expand-btn { border-color: var(--gold-line); color: var(--gold); }
.apollo-qa-expand-btn:hover { border-color: var(--gold); color: var(--gold-bright); }

/* Clock chips inside the Clocks widget were white circles. */
.clock-settings,
.clock-remove {
  background: #0b0a07 !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold-line) !important;
}
.clock-settings:hover,
.clock-remove:hover { color: var(--gold-bright) !important; border-color: var(--gold) !important; }

/* "Rename in Meta?" confirm: gold title, gold confirm, neutral cancel. */
.eh-confirm-panel { border: 1px solid var(--gold-line); }
.eh-confirm-title { color: var(--gold-bright); }
.eh-confirm-actions button.eh-confirm-ok,
.eh-confirm-actions button:not(.eh-confirm-cancel) {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.24), rgba(200, 165, 74, 0.12));
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
}
.eh-confirm-actions button.eh-confirm-ok:hover,
.eh-confirm-actions button:not(.eh-confirm-cancel):hover {
  background: rgba(200, 165, 74, 0.32);
  border-color: var(--gold);
  color: var(--gold-pale);
}
.eh-confirm-cancel {
  background: #111111 !important;
  border: 1px solid #262626 !important;
  color: #e5e5e5 !important;
}
.eh-confirm-cancel:hover { background: #1a1a1a !important; border-color: #3a3a3a !important; }

/* Panel titles and the remaining washed-grey surfaces in the Apollo panels:
   the Underperformers / Payment Issues heading, the detail pane and the close
   button all still used the light glass fill. */
.widget-underperformer .reports-card-title,
.widget-payments .reports-card-title { color: var(--gold-bright); }
.underperf-detail,
#underperf-detail {
  background: #0b0a07 !important;
  border-color: var(--gold-line) !important;
}
#apollo-panel-close {
  background: #0b0a07 !important;
  border: 1px solid var(--gold-line) !important;
  color: var(--gold) !important;
}
#apollo-panel-close:hover {
  background: #16130c !important;
  border-color: var(--gold) !important;
  color: var(--gold-bright) !important;
}

/* Same headings again, by id: the html.theme-dark rule for .reports-card-title
   outranked the class-only selector above. */
#underperformer-console .reports-card-title,
#payment-issues-title { color: var(--gold-bright); }

/* ── Gold accents, pass 10: Weekly Review Queue (#houston-console) ───────────
   The queue cards and the expanded review panel used the same washed glass as
   the other Apollo panels. Cards go black with gold hairlines, the small stat
   labels and the eyebrow go gold, and READY becomes the gold action. Paused
   stays neutral; payment issue and dormant keep their red. */
#houston-console #houston-title { color: var(--gold-bright); }
#houston-console .houston-eyebrow { color: var(--gold); }
#houston-console .houston-eyebrow-dot { background: var(--gold-bright); }
#houston-console .review-queue-stat-num { color: var(--gold-bright); }
#houston-console .review-search-count { color: rgba(230, 201, 119, 0.55); }
/* Name search, in the console's gold instead of the shell's white glass. */
#houston-console .review-search {
  background: #0b0a07;
  border: 1px solid rgba(200, 165, 74, 0.28);
}
#houston-console .review-search:focus-within {
  background: #16130c;
  border-color: var(--gold);
}
#houston-console .review-search-icon { color: rgba(230, 201, 119, 0.6); }
#houston-console .review-search .review-search-input {
  background: transparent;
  border: none;
  color: var(--gold-pale);
}
#houston-console .review-search .review-search-input::placeholder { color: rgba(230, 201, 119, 0.45); }
#houston-console .review-search-clear {
  background: rgba(200, 165, 74, 0.16);
  color: var(--gold-bright);
}
#houston-console .review-search-clear:hover { background: rgba(200, 165, 74, 0.32); color: var(--gold-pale); }

/* Queue cards. */
#houston-console .review-row-main {
  background: #0b0a07;
  border-color: var(--gold-line);
}
#houston-console .review-row-main:hover {
  background: #16130c;
  border-color: var(--gold);
}
#houston-console .review-card-stat-label { color: var(--gold); }
#houston-console .review-card-stat-val { color: #ffffff; }
#houston-console .review-chevron { color: var(--gold); }

/* ---- one card at a time ----
   While a card is open, every OTHER card drops its gold and goes grey. With
   113 of them all lit the same, the one you are actually working on was
   impossible to find after a scroll; taking the colour away from the rest
   makes the open one the only warm thing on screen.
   Only the chrome greys. The logo keeps its colours, since that is how the
   team recognises a client at a glance and washing it out would cost more
   than the focus gains. */
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-row-main {
  border-color: rgba(148, 163, 184, 0.20);
  background: #0a0a0b;
}
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-card-stat-label,
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-chevron {
  color: rgba(148, 163, 184, 0.55);
}
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-row-name,
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-card-stat-val {
  color: rgba(226, 232, 240, 0.62);
}
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-row-sub {
  color: rgba(148, 163, 184, 0.45);
}
/* Hovering a greyed card brings its gold back, so picking the next one still
   feels alive rather than disabled. */
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-row-main:hover {
  border-color: var(--gold);
  background: #16130c;
}
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-row-main:hover .review-card-stat-label,
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-row-main:hover .review-chevron {
  color: var(--gold);
}
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-row-main:hover .review-row-name,
#houston-console .review-queue-list:has(.review-row.is-open) .review-row:not(.is-open) .review-row-main:hover .review-card-stat-val {
  color: #ffffff;
}
#houston-console .review-queue-list .review-row-main,
#houston-console .review-queue-list .review-card-stat-label,
#houston-console .review-queue-list .review-chevron,
#houston-console .review-queue-list .review-row-name,
#houston-console .review-queue-list .review-card-stat-val,
#houston-console .review-queue-list .review-row-sub {
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
/* The open card keeps its gold and gains a rim, so it reads as the live one
   rather than merely the one that did not grey. */
#houston-console .review-row.is-open .review-row-main {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(200, 165, 74, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  #houston-console .review-queue-list * { transition: none; }
}
#houston-console .review-badge-neutral {
  background: #1a1a1a;
  color: #d4d4d4;
}

/* Expanded review panel. */
#houston-console .review-drop-row { background: #0b0a07; }
#houston-console .review-drop-kpi span { color: var(--gold); }
#houston-console .review-drop-acctid { color: var(--gold-bright); }
#houston-console .cnst-notebook-inline-label { color: var(--gold-bright); }
#houston-console .cnst-notebook-composer-cta {
  background: rgba(200, 165, 74, 0.12);
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
}
#houston-console .cnst-notebook-composer-cta:hover {
  background: rgba(200, 165, 74, 0.24);
  border-color: var(--gold);
  color: var(--gold-pale);
}
#houston-console .cnst-notebook-add-btn {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.24), rgba(200, 165, 74, 0.12));
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
}
#houston-console .cnst-notebook-add-btn:hover {
  background: rgba(200, 165, 74, 0.32);
  border-color: var(--gold);
}
#houston-console .review-view-profile-btn,
#houston-console .review-park-btn,
#houston-console .review-hide-btn {
  background: #111111;
  border: 1px solid #262626;
  color: #e5e5e5;
}
#houston-console .review-view-profile-btn:hover,
#houston-console .review-park-btn:hover,
#houston-console .review-hide-btn:hover {
  background: #1a1a1a;
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
/* READY is the one action that closes a review, so it wears the gold. */
#houston-console .review-ready-btn {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.26), rgba(200, 165, 74, 0.12));
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
}
#houston-console .review-ready-btn:hover {
  background: rgba(200, 165, 74, 0.34);
  border-color: var(--gold);
  color: var(--gold-pale);
}

/* The notebook glyph was the 📘 emoji, which renders as a blue block and cannot
   be recoloured. It is an inline SVG now, so it follows the gold label. */
#houston-console .cnst-notebook-inline-icon {
  display: inline-flex;
  align-items: center;
  color: var(--gold);
}

/* Expanded review panel, corrected. The dark fill was on <li class="review-drop-row">,
   which is square, while the rounded card is its child .review-drop with
   overflow:hidden — so the li's corners poked out past the rounded rim (visible
   as black squares at each corner). The fill now lives on the rounded card, and
   its navy tint is replaced by a near-black warm grey. */
#houston-console .review-drop-row { background: transparent; }
#houston-console .review-drop {
  background: rgba(10, 9, 8, 0.96);
  border-color: var(--gold-line);
}
/* The dividers inside the panel were white at 20%, which read as light streaks
   against the darker fill. */
#houston-console .review-drop-col-notebook { border-right-color: rgba(200, 165, 74, 0.22); }
#houston-console .review-drop-actions { border-top-color: rgba(200, 165, 74, 0.22); }
#houston-console .cnst-notebook-divider { background: rgba(200, 165, 74, 0.20); }

/* ── Hold shelf (Weekly Review Queue) ────────────────────────────────────────
   A parking strip in the header: drag a card up here and the client leaves the
   grid until you drag it back. Only the logo shows, because the shelf is a
   holding spot rather than a second list; hovering scales the logo up so it
   stays identifiable at that size. Same black + gold hairline as everything
   else in the panel. */
/* Sits in the header, not on the bottom-right rail.
   It spent a while floating over the grid down by the dock, where it landed on
   top of a card, competed with the Brain button for the same corner, and was
   simply not where anyone looks when they are working down the queue. The
   header has a wide empty band to the right of the "66/113 reviewed" line, the
   shelf fits it exactly, and parked clients are now visible the moment the
   queue opens instead of being found by accident.
   Anchored to the header's bottom-right rather than its top so it clears the
   round close button in the opposite corner. */
/* The shelf's z-index is resolved INSIDE this header, not against the console.
   `.widget-head` is position:relative with z-index 1, which makes it a stacking
   context, and `#review-queue-list` is another z-index 1 sibling that comes
   later in the DOM. Same index, later element wins, so the queue grid painted
   straight over the shelf: elementFromPoint on the middle of the shelf returned
   a review card, which is why a drag could never be dropped there. Lifting the
   header above the list is what puts the drop target back within reach. The
   header itself sits above the grid in normal flow, so nothing else of it
   overlaps a card. */
#houston-console .houston-head { z-index: 3; }

/* The X is gone from this panel; it is switched off where it is switched on,
   in apollo-shell.css, since that file loads later and would otherwise win.
   The queue closes with Escape, and that is now the only way out: the backdrop
   sits behind a console covering the whole viewport, so clicking away never
   reaches it. */

#houston-console .review-hold {
  /* Absolute inside the header, which is position:relative. It scrolls away
     with the header rather than following the grid: the drop target only has
     to be reachable at the moment you pick a card up, and the queue is read
     from the top down. */
  position: absolute;
  z-index: 4;
  /* Flush with the header's right edge, which is also where the last column of
     cards ends: the header and #review-queue-list are siblings of the same
     width, so right:0 lands the shelf exactly on the grid's right rule instead
     of stopping a few pixels short of it. */
  top: 30px;
  bottom: auto;
  right: 0;
  /* Left edge on the 4th of the five card columns, so the shelf spans the last
     two of them.
     The grid is `repeat(5, minmax(0,1fr))` with a 14px gap, and the header is
     the same width as the list. For N equal columns of width (W - 4G)/5, the
     4th starts at 3(W - 4G)/5 + 3G, which reduces to 60% of W plus 0.6G. Left
     in that form rather than as a pixel value so it keeps landing on the column
     at any window width; the only number to touch is the gap if apollo-shell
     ever changes it. */
  left: calc(60% + 8.4px);
  width: auto;
  min-width: 0;
  max-width: none;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 1px dashed rgba(200, 165, 74, 0.38);
  border-radius: 14px;
  background: rgba(10, 9, 8, 0.72);
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
/* Below this the grid drops to auto-fill and the five-column arithmetic above
   stops describing anything, so the shelf simply spans the header. */
@media (max-width: 900px) {
  #houston-console .review-hold { left: 0; }
}
#houston-console .review-hold-label {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}
#houston-console .review-hold-slots {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
#houston-console .review-hold-hint {
  font-size: 11.5px;
  font-style: italic;
  color: rgba(230, 201, 119, 0.45);
}
/* Armed while a card is being dragged, lit while it hovers the shelf. */
#houston-console .review-hold.is-armed { border-color: var(--gold-line); background: rgba(16, 14, 10, 0.85); }
#houston-console .review-hold.is-drop {
  border-color: var(--gold);
  border-style: solid;
  background: rgba(200, 165, 74, 0.12);
  box-shadow: inset 0 0 0 1px rgba(230, 201, 119, 0.30), 0 0 22px rgba(200, 165, 74, 0.18);
}

/* Parked chip: logo only. */
#houston-console .review-hold-chip {
  /* --hz is the hover zoom. Each density step sets it so the enlarged logo
     lands at roughly the same 58px, instead of a fixed multiplier that made a
     small chip explode to twice the shelf height. The label counter-scales by
     1/--hz so it stays the same size no matter which step is active. */
  --hz: 1.95;
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: visible;
  cursor: grab;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
#houston-console .review-hold-chip .review-hold-avatar {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(200, 165, 74, 0.45);
}
#houston-console .review-hold-chip .review-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
#houston-console .review-hold-chip:hover {
  transform: scale(var(--hz));
  z-index: 40;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.65);
}
#houston-console .review-hold-chip:hover .review-hold-avatar {
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 18px rgba(200, 165, 74, 0.35);
}
/* Name only while enlarged, so the shelf itself stays purely visual. */
#houston-console .review-hold-chip::after {
  content: attr(data-name);
  position: absolute;
  top: calc(100% + calc(5px / var(--hz)));
  left: 50%;
  transform: translateX(-50%) scale(calc(1 / var(--hz)));
  transform-origin: top center;
  max-width: 210px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(10, 9, 8, 0.96);
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
#houston-console .review-hold-chip:hover::after { opacity: 1; }
#houston-console .review-hold-chip.is-dragging { opacity: 0.4; cursor: grabbing; }
/* The chip whose panel is currently open, so the shelf says which one you are
   reading without needing the panel in view. */
#houston-console .review-hold-chip.is-open .review-hold-avatar {
  box-shadow: inset 0 0 0 1px var(--gold-bright), 0 0 0 2px rgba(200, 165, 74, 0.55), 0 0 16px rgba(200, 165, 74, 0.40);
}

/* Panel opened from the shelf. It lands at the top of the grid with no card
   above it, so it carries its own header: logo, name and the On hold flag. */
#houston-console .review-drop-row-held { order: -1; }
#houston-console .review-drop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(200, 165, 74, 0.22);
}
#houston-console .review-drop-head-avatar {
  width: 38px;
  height: 38px;
}
#houston-console .review-drop-head-avatar .review-avatar-fallback { font-size: 14px; }
#houston-console .review-drop-head-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#houston-console .review-drop-head-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gold-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#houston-console .review-drop-head-sub {
  font-size: 11.5px;
  color: rgba(230, 201, 119, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#houston-console .review-drop-head-flag {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px dashed rgba(200, 165, 74, 0.45);
  border-radius: 999px;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
#houston-console .review-drop-head-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(200, 165, 74, 0.28);
  border-radius: 8px;
  background: transparent;
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
#houston-console .review-drop-head-close:hover {
  background: rgba(200, 165, 74, 0.16);
  border-color: var(--gold);
  color: var(--gold-pale);
}

/* The grid lights up while a parked chip is being dragged back into it. */
#houston-console .review-queue-list.is-return-target {
  outline: 1px dashed rgba(200, 165, 74, 0.34);
  outline-offset: 10px;
  border-radius: 18px;
}
#houston-console .review-queue-list.is-drop { outline-color: var(--gold); }
#houston-console .review-row.is-dragging .review-row-main { opacity: 0.45; }
#houston-console .review-row-main { cursor: grab; }

/* Under 760px the dock loses its labels and shrinks to 48px tall, so the rail
   above it starts lower. The shelf also stops hugging and spans the full width
   it is allowed, because at that size the hint text is what runs out of room. */
@media (max-width: 760px) {
  #houston-console .review-hold {
    bottom: 112px;
    left: 22px;
    width: auto;
    min-width: 0;
  }
}

/* Parked count sits on the shelf label so the subtitle underneath stays short
   (a longer subtitle runs behind the shelf). */
#houston-console .review-hold-count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
  font-size: 9.5px;
  letter-spacing: 0.06em;
}

/* Landing animation for a client coming back off the hold shelf: the card
   springs in slightly oversized, a gold rim flashes once, and a soft sheen
   sweeps across it. Runs only on the returned card, not on the whole re-render. */
#houston-console .review-row.is-returned {
  position: relative;
  z-index: 6;
  animation: review-return-land 0.60s cubic-bezier(0.22, 1.35, 0.34, 1) both;
}
@keyframes review-return-land {
  0%   { opacity: 0; transform: scale(0.74) translateY(-24px); }
  58%  { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
#houston-console .review-row.is-returned .review-row-main {
  overflow: hidden;
  animation: review-return-glow 0.92s ease-out both;
}
@keyframes review-return-glow {
  0%   { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(200, 165, 74, 0.55), 0 0 36px rgba(200, 165, 74, 0.45); }
  55%  { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(200, 165, 74, 0.35), 0 0 20px rgba(200, 165, 74, 0.20); }
  100% { border-color: var(--gold-line); box-shadow: none; }
}
#houston-console .review-row.is-returned .review-row-main::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 32%, rgba(240, 220, 160, 0.20) 48%, transparent 64%);
  animation: review-return-sweep 0.72s 0.05s ease-out both;
}
@keyframes review-return-sweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
/* The chip leaving the shelf shrinks away instead of blinking out. */
#houston-console .review-hold-chip.is-dragging {
  animation: review-hold-lift 0.18s ease-out both;
}
@keyframes review-hold-lift {
  to { transform: scale(0.86); opacity: 0.35; }
}

/* Chips shrink as the shelf fills so it stays one row inside the 460px rail
   instead of wrapping. No overflow scrolling here on purpose: a scroll
   container would clip the hover pop-out. */
#houston-console .review-hold.is-dense .review-hold-chip { width: 24px; height: 24px; border-radius: 8px; }
#houston-console .review-hold.is-dense .review-hold-chip .review-hold-avatar,
#houston-console .review-hold.is-dense .review-hold-chip .review-avatar-img { border-radius: 8px; }
#houston-console .review-hold.is-dense .review-hold-slots { gap: 7px; }
#houston-console .review-hold.is-dense .review-hold-chip { --hz: 2.4; }
#houston-console .review-hold.is-denser .review-hold-chip { width: 19px; height: 19px; border-radius: 7px; }
#houston-console .review-hold.is-denser .review-hold-chip .review-hold-avatar,
#houston-console .review-hold.is-denser .review-hold-chip .review-avatar-img { border-radius: 7px; }
#houston-console .review-hold.is-denser .review-hold-slots { gap: 5px; }
#houston-console .review-hold.is-denser .review-hold-chip { --hz: 3.05; }
#houston-console .review-hold.is-denser .review-hold-chip .review-avatar-fallback { font-size: 11px; }

/* ── Gold accents, pass 11: the crystal dock ─────────────────────────────────
   The glass recipe stays exactly as it was — translucent white fill, blur,
   glossy inset highlight. Only the accents turn gold: the rim, the icons, the
   active pill and the tooltip. Scoped under #apollo-dock so these outrank the
   class-only rules in apollo-shell.css, which loads after this file. */
#apollo-dock {
  border-color: rgba(200, 165, 74, 0.30);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(240, 220, 160, 0.30),
              inset 0 -1px 0 rgba(200, 165, 74, 0.10);
}
#apollo-dock .dock-sep { background: rgba(200, 165, 74, 0.22); }

/* Icons gold, labels a warm off-white so the row stays readable at 8.5px. */
#apollo-dock .dock-item {
  color: var(--gold-bright);
  border-color: rgba(200, 165, 74, 0.16);
  box-shadow: inset 0 1px 0 rgba(240, 220, 160, 0.16);
}
#apollo-dock .dock-item .dock-lbl { color: #d9d2c2; }
#apollo-dock .dock-item[data-sec] { background: rgba(255, 255, 255, 0.05); }

#apollo-dock .dock-item:hover {
  background: rgba(200, 165, 74, 0.14);
  border-color: rgba(200, 165, 74, 0.40);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(240, 220, 160, 0.28);
}
#apollo-dock .dock-item:hover .dock-lbl { color: var(--gold-pale); }

/* Active pill: gold-tinted glass instead of brighter white glass. */
#apollo-dock .dock-item.active,
#apollo-dock .dock-item[data-sec].active {
  background: rgba(200, 165, 74, 0.22);
  border-color: rgba(230, 201, 119, 0.55);
  color: var(--gold-pale);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(247, 233, 189, 0.55),
              inset 0 -2px 7px rgba(200, 165, 74, 0.16);
}
#apollo-dock .dock-item.active .dock-lbl { color: var(--gold-pale); }

/* Tooltip picks up the same rim and lettering. */
#apollo-dock .dock-item::after {
  border-color: rgba(200, 165, 74, 0.34);
  color: var(--gold-bright);
}
/* The account avatar keeps its photo, gains a gold rim. */
#apollo-dock .dock-item.dock-account { border-color: rgba(200, 165, 74, 0.42); }
#apollo-dock .dock-item.dock-account:hover { border-color: var(--gold); }

/* ── Gold accents, pass 12: Apollo topbar (search bar + version badge) ───────
   Both keep the css.glass recipe they share with the dock — same translucent
   tint, same blur, same soft shadow. Only the rim and the lettering go gold. */
#constellation-topbar .constellation-search,
#constellation-topbar .apollo-eyebrow {
  border-color: rgba(200, 165, 74, 0.34);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(240, 220, 160, 0.20);
}
#constellation-topbar .constellation-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(240, 220, 160, 0.28), 0 0 0 3px rgba(200, 165, 74, 0.16);
}
/* "Apollo" prefix and the typed client name. */
#constellation-topbar .constellation-search-prefix { color: var(--gold-bright); }
#constellation-topbar .constellation-search-input,
html.theme-dark #constellation-topbar .constellation-search-input { color: var(--gold-pale); }
#constellation-topbar .constellation-search-input::placeholder,
html.theme-dark #constellation-topbar .constellation-search-input::placeholder { color: rgba(230, 201, 119, 0.55); }
#constellation-topbar .constellation-search-clear { color: var(--gold); }
#constellation-topbar .constellation-search-clear:hover { color: var(--gold-pale); }

/* APOLLO v6.0 badge, with its live dot pulsing in gold. */
#constellation-topbar .apollo-eyebrow { color: var(--gold-bright); }
#constellation-topbar .apollo-eyebrow:hover { border-color: var(--gold); color: var(--gold-pale); }
#constellation-topbar .apollo-eyebrow-dot {
  background: var(--gold-bright);
  box-shadow: 0 0 10px rgba(230, 201, 119, 0.85);
}

/* ── Gold accents, pass 13: the loading screen ───────────────────────────────
   Beats: the welcome types itself out, holds a moment, then breaks into gold
   motes while the constellation eases in behind it.

   Performance is the constraint here, not richness: this runs while THREE.js
   builds 200+ planet textures on the main thread, so every property animated
   below is compositor-only (transform / opacity). No blur, no box-shadow and
   no filter animations — those repaint on the CPU and were what made the intro
   stutter. The motes use a radial-gradient background instead of a glow shadow
   for the same reason.
   ========================================================================== */
#constellation-loading .cl2-welcome.cl2-hand {
  /* Modern grotesk, tight tracking — the app's own type voice, in gold. */
  font-family: 'Inter', 'Segoe UI Variable Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.12;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--gold-bright);
  text-shadow: 0 2px 20px rgba(200, 165, 74, 0.35);
  filter: none;
  animation: none;
}
/* Each character lands on its own delay. Transform + opacity only. */
#constellation-loading .cl2-ch {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity;
  opacity: 0;
  animation: cl2-write 0.22s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
#constellation-loading .cl2-ch.is-space { animation: none; opacity: 1; }
@keyframes cl2-write {
  0%   { opacity: 0; transform: translate3d(0, 0.14em, 0) scale(0.92); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* The break: letters lift and vanish. */
#constellation-loading .cl2-welcome.is-shattering .cl2-ch {
  animation: cl2-break 0.34s cubic-bezier(0.4, 0, 0.8, 1) both;
}
@keyframes cl2-break {
  0%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, -0.1em, 0) scale(1.06); }
}

/* Gold motes — positioned by JS, one small batch per letter. */
#constellation-loading .cl2-shatter { position: absolute; inset: 0; pointer-events: none; }
#constellation-loading .cl2-shatter i {
  position: absolute;
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  /* Gradient instead of box-shadow: same glow, no per-frame blur cost. */
  background: radial-gradient(circle, #fff6dd 0%, rgba(230, 201, 119, 0.85) 45%, rgba(200, 165, 74, 0) 72%);
  will-change: transform, opacity;
  opacity: 0;
  animation: cl2-mote 0.62s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes cl2-mote {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(0.4); }
}

/* Warm halo behind the writing — opacity only, no scaling. */
#constellation-loading .cl2-readout::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 250px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(200, 165, 74, 0.14), transparent 70%);
  animation: cl2-gold-halo 3.2s ease-in-out infinite;
}
@keyframes cl2-gold-halo {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}

/* Dissolve + the constellation easing in. No blur on the canvas: a full-screen
   blur is the single most expensive thing that could run at this moment. */
#constellation-loading.is-leaving { transition: opacity 520ms cubic-bezier(0.4, 0, 0.3, 1); opacity: 0; }
#constellation-stage.is-scene-in canvas {
  animation: cl2-scene-in 780ms cubic-bezier(0.22, 1, 0.3, 1) both;
}
@keyframes cl2-scene-in {
  0%   { opacity: 0; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Gold accents, pass 14: the two Apollo modals ────────────────────────────
   Edit profile and About Apollo. Both keep their glass panels; the blue and
   indigo bits (active tab pill, Save, close button, version tags) go gold, and
   the small uppercase labels pick up the same lettering as everywhere else. */

/* ----- Edit profile ----- */
html .profile-modal-panel { border-color: rgba(200, 165, 74, 0.34); }
html .profile-modal-heading { color: var(--gold-bright); text-shadow: none; }
html .profile-field-label { color: var(--gold); opacity: 1; }
/* Sliding tab pill + the active tab's label. */
html .profile-modal-tab-indicator {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.30), rgba(200, 165, 74, 0.16));
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
html .profile-modal-tab.is-active { color: var(--gold-pale); text-shadow: none; }
html .profile-modal-tab:hover { color: var(--gold-bright); }
/* Close button and Save. */
html .profile-modal-close {
  background: rgba(200, 165, 74, 0.18);
  border-color: var(--gold-line);
  color: var(--gold-bright);
  text-shadow: none;
}
html .profile-modal-close:hover { background: rgba(200, 165, 74, 0.30); border-color: var(--gold); }
html .profile-modal-panel .btn-primary {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.26), rgba(200, 165, 74, 0.13));
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
  text-shadow: none;
}
html .profile-modal-panel .btn-primary:hover {
  background: rgba(200, 165, 74, 0.34);
  border-color: var(--gold);
  color: var(--gold-pale);
}
/* Fields: neutral boxes, gold focus ring. */
html .profile-modal-panel .profile-name-input:focus,
html .profile-modal-panel select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.18);
  outline: none;
}
/* The avatar frame gets a gold rim on hover, matching the dock's account chip. */
html .profile-photo-wrap:hover { box-shadow: 0 0 0 2px var(--gold-line); }

/* ----- About Apollo ----- */
html .apollo-about-panel { border-color: rgba(200, 165, 74, 0.30); }
html .apollo-about-title { color: var(--gold-bright); }
html .apollo-about-eyebrow { border-color: rgba(200, 165, 74, 0.38); color: var(--gold-bright); }
html .apollo-about-section-title { color: var(--gold); }
html .apollo-about-close {
  background: rgba(200, 165, 74, 0.18);
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html .apollo-about-close:hover { background: rgba(200, 165, 74, 0.30); border-color: var(--gold); }
/* Mission callout and each version card keep their glass, gain a gold rim. */
html .apollo-about-mission { border-color: rgba(200, 165, 74, 0.26); }
html .apollo-version-tag {
  background: rgba(200, 165, 74, 0.14);
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
}
/* The shipped version reads as the gold one. */
html .apollo-version.is-current .apollo-version-tag {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  border-color: var(--gold);
  color: var(--gold-ink);
}
html .apollo-version-title { color: var(--gold-pale); }

/* Same two modals, re-declared by id: several html.theme-dark rules for these
   elements outrank an `html .class` selector, so the titles kept their white. */
#apollo-about-modal .apollo-about-title { color: var(--gold-bright); }
#apollo-about-modal .apollo-version-title { color: var(--gold-pale); }
#apollo-about-modal .apollo-about-section-title { color: var(--gold); }
#apollo-about-modal .apollo-about-eyebrow { color: var(--gold-bright); border-color: rgba(200, 165, 74, 0.38); }
#profile-modal .profile-modal-heading { color: var(--gold-bright); text-shadow: none; }
#profile-modal .profile-field-label { color: var(--gold); opacity: 1; }
#profile-modal .profile-modal-tab.is-active { color: var(--gold-pale); text-shadow: none; }
#profile-modal .profile-modal-close { color: var(--gold-bright); }

/* The dark theme paints the tab pill navy and the close button with a slate
   gradient; both need the id to win, and the gradient needs replacing rather
   than just a background-color. */
#profile-modal .profile-modal-tab-indicator {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(200, 165, 74, 0.34), rgba(200, 165, 74, 0.18));
  box-shadow: inset 0 0 0 1px var(--gold-line);
  border-color: var(--gold-line);
}
#profile-modal .profile-modal-close {
  background-color: transparent;
  background-image: linear-gradient(160deg, rgba(200, 165, 74, 0.30), rgba(200, 165, 74, 0.14));
  border-color: var(--gold-line);
}
#profile-modal .profile-modal-close:hover {
  background-image: linear-gradient(160deg, rgba(200, 165, 74, 0.44), rgba(200, 165, 74, 0.22));
  border-color: var(--gold);
}

/* The About panel's glass was letting too much of the lit scene through, so the
   text sat on a bright grey wash. Same recipe, darker tint: the panel and its
   inner cards keep the blur and the gold rim, just with a near-black fill. */
#apollo-about-modal .apollo-about-panel,
html.theme-dark #apollo-about-modal .apollo-about-panel {
  background: rgba(14, 13, 11, 0.86);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(240, 220, 160, 0.10);
}
#apollo-about-modal .apollo-about-mission {
  background: rgba(26, 23, 17, 0.72);
  border-color: rgba(200, 165, 74, 0.24);
}
#apollo-about-modal .apollo-version {
  background: rgba(24, 22, 17, 0.66);
  border-color: rgba(200, 165, 74, 0.20);
}
#apollo-about-modal .apollo-version.is-current {
  background: rgba(34, 29, 18, 0.78);
  border-color: rgba(200, 165, 74, 0.34);
}
#apollo-about-modal .apollo-version:hover { border-color: rgba(200, 165, 74, 0.42); }

/* Overflow counter when more clients are parked than fit on the rail.
   The label badge still shows the real total. */
#houston-console .review-hold-more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(200, 165, 74, 0.16);
  box-shadow: inset 0 0 0 1px var(--gold-line);
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Chips never wrap: the shelf is one row tall, matched to the Brain button. */
#houston-console .review-hold-slots { flex-wrap: nowrap; }

/* Pull the "On hold" label down to release every parked client at once. The
   shelf follows the cursor and turns solid gold once the gesture will fire. */
#houston-console .review-hold-label {
  cursor: grab;
  user-select: none;
  touch-action: none;
}
#houston-console .review-hold.is-dumping {
  cursor: grabbing;
  transition: none;
  border-style: solid;
}
#houston-console .review-hold.is-dumping .review-hold-label { cursor: grabbing; }
#houston-console .review-hold.is-armed {
  border-color: var(--gold);
  background: rgba(200, 165, 74, 0.14);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(230, 201, 119, 0.28);
}
/* Tells you the pull has gone far enough before you let go. */
#houston-console .review-hold.is-armed .review-hold-label::after {
  content: ' · release';
  color: var(--gold-pale);
}
/* Chips drop out of the shelf before the queue re-renders. */
#houston-console .review-hold-slots.is-dumping-out .review-hold-chip,
#houston-console .review-hold-slots.is-dumping-out .review-hold-more {
  animation: review-hold-dump 0.22s cubic-bezier(0.4, 0, 0.9, 1) both;
}
@keyframes review-hold-dump {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(14px) scale(0.82); }
}

/* -- Gold accents, pass 15: Management (#view-management) --------------------
   The last view still wearing the old slate/navy dark palette: the tab bar,
   Lookup, Library, Creatives, Graphic Design and Reports all used #0f172a
   bodies with #1e293b borders and white-glass controls. Everything moves to
   the same near-black body + gold hairline the rest of Apollo uses, gold goes
   on titles, small labels and the primary action, and the data (names, values,
   table cells) stays white. Red keeps its meaning: overdue.
   Scoped to #view-management so the Apollo panels are untouched. */

/* ----- Tab bar ----- */
html.theme-dark #view-management .mgmt-tabs {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark #view-management .mgmt-tabs .slide-thumb {
  background: rgba(200, 165, 74, 0.14);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
html.theme-dark #view-management .mgmt-tab { color: rgba(230, 201, 119, 0.55); }
html.theme-dark #view-management .mgmt-tab:hover { color: var(--gold-bright); }
html.theme-dark #view-management .mgmt-tab.is-active { color: var(--gold-pale); }
html.theme-dark #view-management .mgmt-tab-text small { color: rgba(200, 165, 74, 0.45); }
html.theme-dark #view-management .mgmt-tab.is-active .mgmt-tab-text small { color: rgba(230, 201, 119, 0.72); }

/* ----- Shared panel shells across all five tabs ----- */
html.theme-dark #view-management .accounts-section,
html.theme-dark #view-management .creatives-section,
html.theme-dark #view-management .library-toc,
html.theme-dark #view-management .library-content,
html.theme-dark #view-management .reports-card,
html.theme-dark #view-management .reports-actions,
html.theme-dark #view-management .lookup-client-group {
  background: #0b0a07;
  border-color: var(--gold-line);
  box-shadow: none;
}

/* Panel titles. */
html.theme-dark #view-management .accounts-section-title,
html.theme-dark #view-management .creatives-section-title,
html.theme-dark #view-management .library-hero-title,
html.theme-dark #view-management .library-article-title,
html.theme-dark #view-management .reports-hero-title,
html.theme-dark #view-management .reports-card-title { color: var(--gold-bright); }

/* Sub-lines under a title: dimmer gold, they are secondary. */
html.theme-dark #view-management .accounts-section-sub,
html.theme-dark #view-management .creatives-section-sub,
html.theme-dark #view-management .library-hero-sub,
html.theme-dark #view-management .library-article-sub,
html.theme-dark #view-management .reports-hero-sub,
html.theme-dark #view-management .reports-card-desc,
html.theme-dark #view-management .reports-actions-hint { color: rgba(230, 201, 119, 0.58); }

/* Small uppercase labels get the same lettering as the KPI cards. */
html.theme-dark #view-management .library-toc-title,
html.theme-dark #view-management .reports-card-count-label,
html.theme-dark #view-management .cre-add-label { color: var(--gold); }

/* ----- Text inputs and search fields ----- */
html.theme-dark #view-management .accounts-search,
html.theme-dark #view-management .library-search,
html.theme-dark #view-management .library-title-input,
html.theme-dark #view-management .cre-add-input,
html.theme-dark #view-management .cre-add-select,
html.theme-dark #view-management .cre-client-input,
html.theme-dark #view-management .cre-date {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: #f5f5f5;
}
html.theme-dark #view-management .accounts-search:focus,
html.theme-dark #view-management .library-search:focus,
html.theme-dark #view-management .library-title-input:focus,
html.theme-dark #view-management .cre-add-input:focus,
html.theme-dark #view-management .cre-add-select:focus,
html.theme-dark #view-management .cre-client-input:focus,
html.theme-dark #view-management .cre-date:focus {
  border-color: var(--gold);
  background: #16130c;
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.12);
}
html.theme-dark #view-management .accounts-search::placeholder,
html.theme-dark #view-management .library-search::placeholder { color: rgba(200, 165, 74, 0.42); }

/* ----- Buttons: one gold primary, gold hairline on everything else ----- */
html.theme-dark #view-management .btn-primary,
html.theme-dark #view-management .reports-download-btn.btn-primary {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.24), rgba(200, 165, 74, 0.12));
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
  box-shadow: none;
}
html.theme-dark #view-management .btn-primary:hover,
html.theme-dark #view-management .reports-download-btn.btn-primary:hover {
  background: rgba(200, 165, 74, 0.32);
  border-color: var(--gold);
  color: var(--gold-pale);
}
html.theme-dark #view-management .btn-ghost,
html.theme-dark #view-management .reports-download-btn.btn-ghost,
html.theme-dark #view-management .lookup-pause-btn,
html.theme-dark #view-management .lookup-pauseall-btn,
html.theme-dark #view-management .library-edit-toggle,
html.theme-dark #view-management .library-cat-add,
html.theme-dark #view-management .cre-drive-icon,
html.theme-dark #view-management .cre-drive-add {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html.theme-dark #view-management .btn-ghost:hover,
html.theme-dark #view-management .reports-download-btn.btn-ghost:hover,
html.theme-dark #view-management .lookup-pause-btn:hover,
html.theme-dark #view-management .lookup-pauseall-btn:hover,
html.theme-dark #view-management .library-edit-toggle:hover,
html.theme-dark #view-management .library-cat-add:hover,
html.theme-dark #view-management .cre-drive-icon:hover,
html.theme-dark #view-management .cre-drive-add:hover {
  background: rgba(200, 165, 74, 0.10);
  border-color: var(--gold);
  color: var(--gold-pale);
}
html.theme-dark #view-management .library-edit-toggle.is-active {
  background: rgba(200, 165, 74, 0.20);
  border-color: var(--gold);
  color: var(--gold-pale);
}

/* ----- Filter pills (Creatives: All / Awaiting / Approved / Overdue / Live) ----- */
html.theme-dark #view-management .accounts-filter-pills {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark #view-management .accounts-filter-pills .slide-thumb {
  background: rgba(200, 165, 74, 0.14);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
html.theme-dark #view-management .accounts-filter-pill { color: rgba(230, 201, 119, 0.55); }
html.theme-dark #view-management .accounts-filter-pill:hover { color: var(--gold-bright); }
html.theme-dark #view-management .accounts-filter-pill.is-active { color: var(--gold-pale); }

/* ----- Lookup ----- */
html.theme-dark #view-management .lookup-client-head {
  background: rgba(200, 165, 74, 0.07);
  border-color: var(--gold-line);
}
html.theme-dark #view-management .lookup-client-name { color: var(--gold-bright); }
html.theme-dark #view-management .lookup-client-count { color: rgba(230, 201, 119, 0.55); }
html.theme-dark #view-management .lookup-ad-row { border-color: rgba(200, 165, 74, 0.18); }
html.theme-dark #view-management .lookup-ad-row:hover { background: rgba(200, 165, 74, 0.06); }
html.theme-dark #view-management .lookup-ad-name { color: #f5f5f5; }
html.theme-dark #view-management .lookup-ad-meta { color: rgba(230, 201, 119, 0.48); }
html.theme-dark #view-management .lookup-badge-active {
  background: rgba(200, 165, 74, 0.14);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(200, 165, 74, 0.28);
}
html.theme-dark #view-management .lookup-search-clear { color: var(--gold); }
html.theme-dark #view-management .lookup-search-clear:hover {
  background: rgba(200, 165, 74, 0.14);
  color: var(--gold-pale);
}
html.theme-dark #view-management .lookup-hint { color: rgba(230, 201, 119, 0.45); }

/* ----- Library ----- */
/* The hero was a blue-violet gradient panel. Flat black with a gold hairline
   matches the KPI page, and lets the gold title carry the whole header. */
html.theme-dark #view-management .library-hero {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark #view-management .library-toc-btn { color: rgba(230, 201, 119, 0.62); }
html.theme-dark #view-management .library-toc-btn:hover { color: var(--gold-bright); }
html.theme-dark #view-management .library-toc-btn.is-active {
  background: rgba(200, 165, 74, 0.14);
  color: var(--gold-pale);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
html.theme-dark #view-management .library-article-head,
html.theme-dark #view-management .library-article-section { border-bottom-color: rgba(200, 165, 74, 0.20); }
html.theme-dark #view-management .library-article-foot { border-top-color: rgba(200, 165, 74, 0.20); }
/* Article headings go gold, the body copy stays readable white. */
html.theme-dark #view-management .library-article-h,
html.theme-dark #view-management .library-doc h2,
html.theme-dark #view-management .library-doc h3 { color: var(--gold-bright); }
html.theme-dark #view-management .library-article-body,
html.theme-dark #view-management .library-doc { color: #d4d4d4; }
html.theme-dark #view-management .library-doc.is-editing {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark #view-management .library-doc.is-editing:focus { border-color: var(--gold); }
/* Editor toolbar. */
html.theme-dark #view-management .library-toolbar {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark #view-management .library-tb-btn,
html.theme-dark #view-management .library-tb-select,
html.theme-dark #view-management .library-tb-color {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html.theme-dark #view-management .library-tb-btn:hover {
  background: rgba(200, 165, 74, 0.14);
  border-color: var(--gold);
}
html.theme-dark #view-management .library-tb-sep { background: rgba(200, 165, 74, 0.28); }

/* ----- Creatives ----- */
html.theme-dark #view-management .creatives-table thead th {
  color: var(--gold);
  border-bottom-color: var(--gold-line);
}
html.theme-dark #view-management .creatives-table tbody td {
  color: #f5f5f5;
  border-bottom-color: rgba(200, 165, 74, 0.16);
}
html.theme-dark #view-management .creatives-table tbody tr:hover { background: rgba(200, 165, 74, 0.07); }
html.theme-dark #view-management .creatives-empty { color: rgba(230, 201, 119, 0.45); }
html.theme-dark #view-management .cre-due { color: rgba(230, 201, 119, 0.60); }
/* Overdue keeps red. That is the one thing on this table that means "wrong". */
html.theme-dark #view-management .cre-overdue { color: #f87171; }
/* Season and status selects were white glass chips. Black body, gold hairline,
   gold chevron, and the completed "Live" state gets the filled gold. */
html.theme-dark #view-management .cre-season,
html.theme-dark #view-management .cre-status,
html.theme-dark #view-management .cre-status-waiting .cre-status,
html.theme-dark #view-management .cre-status-tweaks .cre-status,
html.theme-dark #view-management .cre-status-approved .cre-status,
html.theme-dark #view-management .cre-status-live .cre-status {
  background-color: #0b0a07;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c8a54a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* One layer now, so the base rule's 3-value position/size lists no longer
     line up. Restate them or the chevron tiles across the whole chip. */
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px 6px;
  border-color: var(--gold-line);
  color: var(--gold-bright);
  text-shadow: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.theme-dark #view-management .cre-season:hover,
html.theme-dark #view-management .cre-status:hover {
  border-color: var(--gold);
  background-color: #16130c;
}
html.theme-dark #view-management .cre-status-live .cre-status {
  background-color: rgba(200, 165, 74, 0.20);
  border-color: var(--gold);
  color: var(--gold-pale);
}
html.theme-dark #view-management .cre-status-live { opacity: 1; }
html.theme-dark #view-management .cre-drive-preview {
  background: rgba(200, 165, 74, 0.12);
  color: var(--gold-bright);
}
html.theme-dark #view-management .cre-client-suggest {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark #view-management .cre-suggest-item { color: #f5f5f5; }
html.theme-dark #view-management .cre-suggest-item:hover { background: rgba(200, 165, 74, 0.14); }

/* ----- Reports ----- */
/* The two counts are the data on this tab, so they stay white; the icon,
   the title and the label around them carry the gold. */
html.theme-dark #view-management .reports-card-count { color: #ffffff; }
html.theme-dark #view-management .reports-card:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 16px rgba(200, 165, 74, 0.12);
}

/* ----- Graphic Design: chrome only ----- */
/* The canvas and the ad preview keep their own colours on purpose, gold there
   would contaminate the creative. Only the surrounding panels move. */
html.theme-dark #view-management .dz-hero,
html.theme-dark #view-management .dz-controls,
html.theme-dark #view-management .dz-group,
html.theme-dark #view-management .dz-subtab {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark #view-management .dz-hero-title,
html.theme-dark #view-management .dz-group-head strong { color: var(--gold-bright); }
html.theme-dark #view-management .dz-hero-badge {
  background: rgba(200, 165, 74, 0.14);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
html.theme-dark #view-management .dz-subtab:hover,
html.theme-dark #view-management .dz-subtab.is-active {
  border-color: var(--gold);
  background: rgba(200, 165, 74, 0.10);
}
html.theme-dark #view-management .dz-color-lbl { color: var(--gold); }
html.theme-dark #view-management .dz-input {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: #f5f5f5;
}
html.theme-dark #view-management .dz-input:focus { border-color: var(--gold); }
html.theme-dark #view-management .dz-chip,
html.theme-dark #view-management .dz-season {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html.theme-dark #view-management .dz-chip.is-active,
html.theme-dark #view-management .dz-season.is-active {
  background: rgba(200, 165, 74, 0.18);
  border-color: var(--gold);
  color: var(--gold-pale);
}

/* Graphic Design, continued: the client picker and the collapsible panels.
   The client cards and the sub-tabs were still on the blue/slate palette. */
html.theme-dark #view-management .dz-subtab-text strong { color: var(--gold-bright); }
html.theme-dark #view-management .dz-subtab-text small { color: rgba(230, 201, 119, 0.55); }
html.theme-dark #view-management .dz-search-head h3 { color: var(--gold-bright); }
html.theme-dark #view-management .dz-search-head p { color: rgba(230, 201, 119, 0.58); }
html.theme-dark #view-management .dz-search-input {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: #f5f5f5;
}
html.theme-dark #view-management .dz-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.12);
}
html.theme-dark #view-management .dz-search-input::placeholder { color: rgba(200, 165, 74, 0.42); }
html.theme-dark #view-management .dz-client-card,
html.theme-dark #view-management .dz-saved-card {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark #view-management .dz-client-card:hover,
html.theme-dark #view-management .dz-saved-card:hover {
  border-color: var(--gold);
  background: #16130c;
  box-shadow: 0 6px 16px rgba(200, 165, 74, 0.12);
}
/* Client name stays white, it is the data. The region under it goes dim gold. */
html.theme-dark #view-management .dz-client-meta strong { color: #f5f5f5; }
html.theme-dark #view-management .dz-client-meta small { color: rgba(230, 201, 119, 0.55); }
html.theme-dark #view-management .dz-empty,
html.theme-dark #view-management .dz-empty-tight { color: rgba(230, 201, 119, 0.45); }
html.theme-dark #view-management .dz-panel {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark #view-management .dz-panel > summary:hover { background: rgba(200, 165, 74, 0.08); }
html.theme-dark #view-management .dz-panel-title { color: var(--gold-bright); }
html.theme-dark #view-management .dz-panel-caret { color: var(--gold); }
html.theme-dark #view-management .dz-panel-note { color: rgba(230, 201, 119, 0.55); }

/* Design Studio left rail (Layouts / Background / Text / Elements / Uploads /
   Brand). The active item was a pale grey tile, the last light surface left
   inside Management. */
html.theme-dark #view-management .dz-leftbar {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark #view-management .dz-side-btn {
  background: transparent;
  border-color: transparent;
  color: rgba(230, 201, 119, 0.60);
}
html.theme-dark #view-management .dz-side-btn:hover {
  background: rgba(200, 165, 74, 0.08);
  color: var(--gold-bright);
}
html.theme-dark #view-management .dz-side-btn.is-active {
  background: rgba(200, 165, 74, 0.16);
  border-color: var(--gold-line);
  color: var(--gold-pale);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
html.theme-dark #view-management .dz-side-btn.is-active .dz-side-lbl { color: var(--gold-pale); }
html.theme-dark #view-management .dz-rail-head strong { color: var(--gold-bright); }
html.theme-dark #view-management .dz-rail-head small { color: rgba(230, 201, 119, 0.55); }
html.theme-dark #view-management .dz-rail-back {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html.theme-dark #view-management .dz-rail-back:hover { border-color: var(--gold); }

/* -- Gold accents, pass 16: what pass 15 could not reach -------------------
   Four kinds of surface stayed on the old palette after the Management pass:
   dialogs that mount on <body> (so the #view-management scope missed them),
   the browser-drawn popups behind <select> and <input type=date>, the native
   window.prompt (now replaced by showPromptModal in app.js), and the delete
   button, which had inherited the gold ghost-button treatment even though it
   is destructive. */

/* ----- The new prompt dialog (Drive link, copy link) ----- */
.eh-prompt-panel { width: min(460px, 92vw); }
.eh-prompt-field { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 18px; }
.eh-prompt-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.eh-prompt-input {
  width: 100%;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 13.5px;
  background: #0b0a07;
  border: 1px solid var(--gold-line);
  color: #f5f5f5;
}
.eh-prompt-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.12);
}
.eh-prompt-input:read-only { color: var(--gold-bright); cursor: text; }
.eh-prompt-input::placeholder { color: rgba(200, 165, 74, 0.42); }

/* ----- "New creative cycle" dialog -----
   Mounted on <body>, so it never saw the #view-management rules. Same
   treatment, addressed through its own panel class. */
/* The existing dark rules are `html.theme-dark .cre-add-input`, so every
   override here needs the same html.theme-dark prefix to outrank them. */
html.theme-dark .cre-add-panel .cre-add-label { color: var(--gold); }
html.theme-dark .cre-add-panel .cre-add-input,
html.theme-dark .cre-add-panel .cre-add-select,
html.theme-dark .cre-add-panel .cre-client-input {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: #f5f5f5;
}
html.theme-dark .cre-add-panel .cre-add-input:focus,
html.theme-dark .cre-add-panel .cre-add-select:focus,
html.theme-dark .cre-add-panel .cre-client-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.12);
}
html.theme-dark .cre-add-panel .cre-add-input::placeholder,
html.theme-dark .cre-add-panel .cre-client-input::placeholder { color: rgba(200, 165, 74, 0.42); }
html.theme-dark .cre-add-panel .cre-client-suggest {
  background: #0b0a07;
  border-color: var(--gold-line);
}
html.theme-dark .cre-add-panel .cre-suggest-item { color: #f5f5f5; }
html.theme-dark .cre-add-panel .cre-suggest-item:hover { background: rgba(200, 165, 74, 0.14); }
html.theme-dark .cre-add-panel .cre-suggest-avatar {
  background: rgba(200, 165, 74, 0.16);
  color: var(--gold-bright);
}

/* ----- Browser-drawn popups behind <select> and <input type=date> -----
   Chrome paints these itself. It will not read our panel CSS, but it does
   honour color-scheme (which picks the dark popup) and accent-color (which
   colours the selected day / the checked option). Setting the option colours
   explicitly stops the popup list from falling back to the old slate blue. */
html.theme-dark #view-management select,
html.theme-dark #view-management input[type="date"],
.cre-add-panel select,
.cre-add-panel input[type="date"] {
  color-scheme: dark;
  accent-color: #c8a54a;
}
html.theme-dark #view-management select option,
.cre-add-panel select option {
  background-color: #12100b;
  color: #f5f5f5;
}
html.theme-dark #view-management select option:checked,
.cre-add-panel select option:checked {
  background-color: #2a2312;
  color: #f3e2ad;
}

/* ----- Delete row button -----
   It is a .btn-ghost, so pass 15 gave it the gold hairline every other ghost
   button got. A destructive control should not read as the house accent:
   neutral at rest, red on hover. */
html.theme-dark #view-management .cre-row-del {
  border-color: #2a2a2a;
  /* .accounts-revoke sets a #b91c1c that is nearly unreadable on black. */
  color: #d9645f;
  background: transparent;
}
html.theme-dark #view-management .cre-row-del:hover {
  border-color: rgba(220, 90, 90, 0.55);
  color: #f87171;
  background: rgba(220, 90, 90, 0.10);
}

/* ----- "N days ago" -----
   Every row in a busy week is overdue, and a saturated red on all of them
   read as an error state rather than a queue. Deeper red, still unmistakably
   the warning colour, but it sits inside the dark palette instead of on top
   of it. The 5-to-7 day "due" step keeps its dim gold. */
html.theme-dark #view-management .cre-overdue { color: #d9645f; }

/* ----- The Season / Status dropdown (.xdrop) -----
   Not a native option list: it is the app's own menu, mounted on <body> at
   fixed position, which is why the #view-management scope never reached it.
   It was the last blue-glass panel in Management. Same black body + gold
   hairline as the chip that opens it, so the closed and open states match. */
html.theme-dark .xdrop {
  border-color: var(--gold-line);
  background: #0b0a07;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(230, 201, 119, 0.10),
    0 18px 44px rgba(0, 0, 0, 0.65);
}
html.theme-dark .xdrop-opt { color: #e5e5e5; }
html.theme-dark .xdrop-opt:hover {
  background: rgba(200, 165, 74, 0.12);
  color: var(--gold-bright);
}
html.theme-dark .xdrop-opt.is-selected {
  background: rgba(200, 165, 74, 0.18);
  color: var(--gold-pale);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
html.theme-dark .xdrop-opt.is-selected .xdrop-check { opacity: 1; color: var(--gold-bright); }
html.theme-dark .xdrop-opt.is-placeholder { color: rgba(200, 165, 74, 0.45); }
/* Per-row edit / delete buttons in the season manager. */
html.theme-dark .xdrop-edit,
html.theme-dark .xdrop-del {
  background: rgba(200, 165, 74, 0.14);
  color: var(--gold-bright);
}
html.theme-dark .xdrop-del:hover { background: rgba(220, 90, 90, 0.22); color: #f87171; }
html.theme-dark .xdrop-edit:hover { background: rgba(200, 165, 74, 0.26); }

/* -- Gold accents, pass 17: the two remaining body-mounted widgets ----------
   The season editor that lives inside the .xdrop menu, and .xcal, the app's
   own replacement for the native date popup. Both mount on <body>, both were
   still on the blue-crystal palette. Note the date field is NOT the browser
   picker: it is this calendar, so page CSS does reach it after all. */

/* ----- "+ Add season" and the inline season editor ----- */
html.theme-dark .xdrop-add {
  background: rgba(200, 165, 74, 0.10);
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html.theme-dark .xdrop-add:hover {
  background: rgba(200, 165, 74, 0.22);
  border-color: var(--gold);
  color: var(--gold-pale);
}
html.theme-dark .xdrop-ed-title { color: var(--gold); }
html.theme-dark .xdrop-ed-preview {
  background: rgba(200, 165, 74, 0.14);
  border-color: var(--gold-line);
}
html.theme-dark .xdrop-ed-name {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: #f5f5f5;
}
html.theme-dark .xdrop-ed-name:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.12);
}
html.theme-dark .xdrop-ed-name::placeholder { color: rgba(200, 165, 74, 0.42); }
/* Save is the gold action, Cancel stays neutral, Delete stays red. */
html.theme-dark .xdrop-ed-save {
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.26), rgba(200, 165, 74, 0.13));
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html.theme-dark .xdrop-ed-save:hover {
  background: rgba(200, 165, 74, 0.34);
  border-color: var(--gold);
  color: var(--gold-pale);
}
html.theme-dark .xdrop-ed-cancel {
  background: #111111;
  border-color: #2a2a2a;
  color: #d4d4d4;
}
html.theme-dark .xdrop-ed-cancel:hover { background: #1a1a1a; border-color: #3a3a3a; }
html.theme-dark .xdrop-ed-del {
  background: transparent;
  color: #d9645f;
  border-color: rgba(220, 90, 90, 0.45);
}
html.theme-dark .xdrop-ed-del:hover { background: rgba(220, 90, 90, 0.14); }

/* ----- The date calendar (.xcal) ----- */
html.theme-dark .xcal {
  border-color: var(--gold-line);
  background: #0b0a07;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(230, 201, 119, 0.10),
    0 18px 44px rgba(0, 0, 0, 0.65);
}
html.theme-dark .xcal-title { color: var(--gold-bright); }
html.theme-dark .xcal-title:hover { background: rgba(200, 165, 74, 0.12); }
html.theme-dark .xcal-nav {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html.theme-dark .xcal-nav:hover {
  background: rgba(200, 165, 74, 0.16);
  border-color: var(--gold);
  color: var(--gold-pale);
}
/* Weekday header row: the same small gold lettering as every other label. */
html.theme-dark .xcal-dow span { color: var(--gold); }
/* The days themselves are data, so they stay white. */
html.theme-dark .xcal-day { color: #e5e5e5; }
html.theme-dark .xcal-day:hover { background: rgba(200, 165, 74, 0.12); color: var(--gold-bright); }
html.theme-dark .xcal-day.is-out { color: #4a4a4a; }
/* Today: a gold ring. Selected: filled gold. The old rule filled it white,
   which is why the picked day read as a hole punched in the calendar. */
html.theme-dark .xcal-day.is-today {
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html.theme-dark .xcal-day.is-selected {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold);
  color: var(--gold-ink);
  box-shadow: 0 2px 8px rgba(200, 165, 74, 0.35);
}
html.theme-dark .xcal-day.is-selected:hover { color: var(--gold-ink); }
html.theme-dark .xcal-foot { border-top-color: rgba(200, 165, 74, 0.22); }
html.theme-dark .xcal-clear { color: rgba(230, 201, 119, 0.60); }
html.theme-dark .xcal-clear:hover { background: rgba(200, 165, 74, 0.10); color: var(--gold-bright); }
html.theme-dark .xcal-today { color: var(--gold-bright); }
html.theme-dark .xcal-today:hover { background: rgba(200, 165, 74, 0.14); color: var(--gold-pale); }
/* Month / year quick-pick grids. */
html.theme-dark .xcal-pick {
  background: #0b0a07;
  border-color: var(--gold-line);
  color: #e5e5e5;
}
html.theme-dark .xcal-pick:hover { background: rgba(200, 165, 74, 0.12); color: var(--gold-bright); }
html.theme-dark .xcal-pick.is-on {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold);
  color: var(--gold-ink);
}

/* -- Gold accents, pass 18: pulling the Management gold back ----------------
   Pass 15 tinted every secondary string gold, so a section header ended up
   with the title, the sub-line, five filter labels, the search placeholder
   and the button all in the same colour, and nothing read as primary.
   The house rule everywhere else is narrower: gold on the title, on small
   uppercase labels, on the active state, and on the one primary action.
   Body copy, sub-lines, inactive tabs and placeholders go back to neutral. */

/* Sub-lines under a heading are prose, not labels. */
html.theme-dark #view-management .accounts-section-sub,
html.theme-dark #view-management .creatives-section-sub,
html.theme-dark #view-management .library-hero-sub,
html.theme-dark #view-management .library-article-sub,
html.theme-dark #view-management .reports-hero-sub,
html.theme-dark #view-management .reports-card-desc,
html.theme-dark #view-management .reports-actions-hint,
html.theme-dark #view-management .dz-search-head p,
html.theme-dark #view-management .dz-panel-note,
html.theme-dark #view-management .dz-subtab-text small { color: #9a9a9a; }

/* Filter pills: only the selected one is gold. The rest are plain. */
html.theme-dark #view-management .accounts-filter-pill { color: #8f8f8f; }
html.theme-dark #view-management .accounts-filter-pill:hover { color: #e5e5e5; }
html.theme-dark #view-management .accounts-filter-pill.is-active { color: var(--gold-pale); }
/* Same for the five Management tabs. */
html.theme-dark #view-management .mgmt-tab { color: #8f8f8f; }
html.theme-dark #view-management .mgmt-tab:hover { color: #e5e5e5; }
html.theme-dark #view-management .mgmt-tab.is-active { color: var(--gold-pale); }
html.theme-dark #view-management .mgmt-tab-text small { color: #6e6e6e; }
html.theme-dark #view-management .mgmt-tab.is-active .mgmt-tab-text small { color: #b0b0b0; }

/* Placeholders are hint text, never an accent. */
html.theme-dark #view-management .accounts-search::placeholder,
html.theme-dark #view-management .library-search::placeholder,
html.theme-dark #view-management .dz-search-input::placeholder,
html.theme-dark .cre-add-panel .cre-add-input::placeholder,
html.theme-dark .cre-add-panel .cre-client-input::placeholder,
html.theme-dark .xdrop-ed-name::placeholder,
.eh-prompt-input::placeholder { color: #6e6e6e; }

/* Search fields sit at rest most of the time: neutral hairline until focus,
   then the gold ring confirms where the cursor is. */
html.theme-dark #view-management .accounts-search,
html.theme-dark #view-management .library-search,
html.theme-dark #view-management .dz-search-input { border-color: #2a2620; }

/* Secondary metadata in lists: neutral, so the client name stays the thing
   your eye lands on. */
html.theme-dark #view-management .lookup-client-count,
html.theme-dark #view-management .lookup-ad-meta,
html.theme-dark #view-management .lookup-hint,
html.theme-dark #view-management .creatives-empty,
html.theme-dark #view-management .dz-client-meta small,
html.theme-dark #view-management .dz-empty,
html.theme-dark #view-management .dz-empty-tight { color: #8f8f8f; }
/* The 5-to-7 day step is a soft warning, not a label. */
html.theme-dark #view-management .cre-due { color: #c9a25f; }

/* Library index: only the open category is gold. */
html.theme-dark #view-management .library-toc-btn { color: #9a9a9a; }
html.theme-dark #view-management .library-toc-btn:hover { color: #e5e5e5; }

/* Ghost buttons were all gold-lettered, which put six equal accents in one
   toolbar. Neutral at rest, gold on hover, so the accent marks intent. */
html.theme-dark #view-management .btn-ghost,
html.theme-dark #view-management .lookup-pause-btn,
html.theme-dark #view-management .lookup-pauseall-btn,
html.theme-dark #view-management .library-edit-toggle,
html.theme-dark #view-management .library-cat-add,
html.theme-dark #view-management .cre-drive-icon,
html.theme-dark #view-management .cre-drive-add {
  border-color: #2a2620;
  color: #b8b8b8;
}
html.theme-dark #view-management .btn-ghost:hover,
html.theme-dark #view-management .lookup-pause-btn:hover,
html.theme-dark #view-management .lookup-pauseall-btn:hover,
html.theme-dark #view-management .library-edit-toggle:hover,
html.theme-dark #view-management .library-cat-add:hover,
html.theme-dark #view-management .cre-drive-icon:hover,
html.theme-dark #view-management .cre-drive-add:hover {
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
/* Download Excel sits next to Download Word: one gold action per row. */
html.theme-dark #view-management .reports-download-btn.btn-ghost {
  border-color: #2a2620;
  color: #b8b8b8;
}
html.theme-dark #view-management .reports-download-btn.btn-ghost:hover {
  border-color: var(--gold-line);
  color: var(--gold-bright);
}

/* Season / Status chips are set once and then read many times: the value
   matters, the chrome does not. White text, hairline border, gold kept for
   the chevron and the hover. "Live" still fills gold, it closes the cycle. */
html.theme-dark #view-management .cre-season,
html.theme-dark #view-management .cre-status,
html.theme-dark #view-management .cre-status-waiting .cre-status,
html.theme-dark #view-management .cre-status-tweaks .cre-status,
html.theme-dark #view-management .cre-status-approved .cre-status {
  border-color: #2a2620;
  color: #e5e5e5;
}
html.theme-dark #view-management .cre-season:hover,
html.theme-dark #view-management .cre-status:hover {
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html.theme-dark #view-management .cre-status-live .cre-status {
  border-color: var(--gold-line);
  color: var(--gold-pale);
}

/* Drive link chip: a link, so it reads as one rather than as an accent. */
html.theme-dark #view-management .cre-drive-preview {
  background: rgba(255, 255, 255, 0.05);
  color: #d4d4d4;
}
html.theme-dark #view-management .cre-drive-preview:hover { color: var(--gold-bright); }

/* -- Gold accents, pass 20: the profile dropdowns --------------------------
   Pass 14 restyled the Edit profile modal but stopped at its chrome, so the
   Position dropdown kept the old blue-slate fill and its open menu was the
   last light-on-blue surface in the app. Position and Department share these
   rules: they are the same widget rendered twice. */

/* Closed state. Neutral hairline at rest so two stacked fields do not read as
   two competing accents; gold arrives on hover, focus and when open. */
html .profile-title-trigger {
  background: #0b0a07;
  border: 1px solid rgba(200, 165, 74, 0.26);
  color: #f5f5f5;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html .profile-title-trigger:hover { border-color: var(--gold-line); }
html .profile-title-trigger:focus-visible,
html .profile-title-dropdown[data-open="true"] .profile-title-trigger {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.12);
}
html .profile-title-trigger-text.is-placeholder { color: #6e6e6e; font-weight: 500; }
html .profile-title-trigger-caret { color: var(--gold); opacity: 1; }

/* Open menu. */
html .profile-title-menu {
  background: #0b0a07;
  border: 1px solid var(--gold-line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(230, 201, 119, 0.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html .profile-title-item { color: #e5e5e5; }
html .profile-title-item:hover { background: rgba(200, 165, 74, 0.12); color: var(--gold-bright); }
html .profile-title-item.is-active,
html .profile-title-item.is-active:hover {
  background: rgba(200, 165, 74, 0.18);
  color: var(--gold-pale);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}

/* Department has twelve entries, so its menu scrolls instead of running off
   the bottom of the modal. */
.profile-title-menu-scroll { max-height: 244px; overflow-y: auto; }

/* The two fields sit directly under one another now; give them room. */
html .profile-modal-panel .profile-field + .profile-field { margin-top: 14px; }

/* Pass 20, corrected. The rules above used `html .profile-title-*`, which is
   less specific than the existing `html.theme-dark .profile-title-*` block and
   therefore lost. Same declarations, matching specificity. */
html.theme-dark .profile-title-trigger {
  background: #0b0a07;
  border: 1px solid rgba(200, 165, 74, 0.26);
  color: #f5f5f5;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.theme-dark .profile-title-trigger:hover { border-color: var(--gold-line); }
html.theme-dark .profile-title-trigger:focus-visible,
html.theme-dark .profile-title-dropdown[data-open="true"] .profile-title-trigger {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.12);
}
html.theme-dark .profile-title-trigger-text.is-placeholder { color: #6e6e6e; font-weight: 500; }
html.theme-dark .profile-title-trigger-caret { color: var(--gold); opacity: 1; }

html.theme-dark .profile-title-menu {
  background: #0b0a07;
  border: 1px solid var(--gold-line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(230, 201, 119, 0.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.theme-dark .profile-title-item { color: #e5e5e5; }
html.theme-dark .profile-title-item:hover { background: rgba(200, 165, 74, 0.12); color: var(--gold-bright); }
html.theme-dark .profile-title-item.is-active,
html.theme-dark .profile-title-item.is-active:hover {
  background: rgba(200, 165, 74, 0.18);
  color: var(--gold-pale);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}

/* Department is the last field in the panel, so a menu that drops downward runs
   off the bottom and gets clipped. It opens upward instead. */
html .profile-title-dropdown[data-field="department"] .profile-title-menu {
  top: auto;
  bottom: calc(100% + 6px);
  max-height: 260px;
}
html .profile-title-dropdown[data-field="department"] .profile-title-menu {
  animation: profile-title-menu-pop-up 0.14s ease-out;
}
@keyframes profile-title-menu-pop-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 260px of menu opening upward swallowed the whole form. Six rows is enough to
   read as a scrollable list while leaving the fields above it visible. */
html .profile-title-dropdown[data-field="department"] .profile-title-menu {
  max-height: 196px;
}
/* Thin gold scrollbar inside the menu, consistent with the app's rule that
   scrollbars stay invisible until you actually scroll. */
html.theme-dark .profile-title-menu::-webkit-scrollbar { width: 8px; }
html.theme-dark .profile-title-menu::-webkit-scrollbar-track { background: transparent; }
html.theme-dark .profile-title-menu::-webkit-scrollbar-thumb {
  background: rgba(200, 165, 74, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html.theme-dark .profile-title-menu:hover::-webkit-scrollbar-thumb {
  background: rgba(200, 165, 74, 0.5);
  background-clip: content-box;
}

/* -- Gold accents, pass 21: the profile modal body -------------------------
   The panel was rgba(15, 23, 42, 0.62), which is slate navy at 62% opacity
   over a blur. Two things made it read blue: the hue itself, and the
   transparency letting whatever sits behind bleed through. Both go. The panel
   moves to the same near-black the rest of Apollo uses, at high opacity so it
   stops sampling the page underneath. */
html.theme-dark .profile-modal-panel {
  background: #0b0a07;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--gold-line);
  color: #f5f5f5;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(230, 201, 119, 0.10),
    0 28px 70px rgba(0, 0, 0, 0.75);
}

/* The tab rail was a white wash over the navy, which is what made the left
   column look like a separate blue block. */
html.theme-dark .profile-modal-tabs {
  background: rgba(255, 255, 255, 0.025);
  border-right: 1px solid rgba(200, 165, 74, 0.20);
  box-shadow: none;
}

/* Name field: same treatment as the Department trigger so the two rows match. */
html.theme-dark .profile-name-input,
html.theme-dark .profile-email-input {
  background: #050403;
  border-color: rgba(200, 165, 74, 0.26);
  color: #f5f5f5;
  box-shadow: none;
}
html.theme-dark .profile-name-input:focus,
html.theme-dark .profile-email-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.12);
}

/* Field labels sat at #e2e8f0, a cool near-white. Gold matches every other
   small uppercase label in the app. */
html.theme-dark .profile-field-label { color: var(--gold); opacity: 1; }

/* Close button was a slate-grey pill. */
html.theme-dark .profile-modal-close {
  background: rgba(200, 165, 74, 0.16);
  border-color: var(--gold-line);
  color: var(--gold-bright);
}
html.theme-dark .profile-modal-close:hover {
  background: rgba(200, 165, 74, 0.28);
  border-color: var(--gold);
}

/* The dropdown sits directly on the new panel colour, so it needs to be a step
   darker than the panel rather than the same value, or the field edge vanishes. */
html.theme-dark .profile-title-trigger { background: #050403; }
html.theme-dark .profile-title-menu { background: #050403; }

/* -- Gold accents, pass 22: the sign-in screen -----------------------------
   This is the first thing anyone sees, and it was the last surface still on
   the default slate palette: grey labels, a blue-grey Sign in button, and a
   flat black backdrop with nothing on it. Same near-black + gold hairline as
   the rest of Apollo. */

/* Backdrop: a faint gold pool behind the card so it sits in a space rather
   than floating on flat black, plus the same engraved grid the Brain uses. */
html.theme-dark #auth-overlay {
  background:
    radial-gradient(ellipse 620px 420px at 50% 46%, rgba(200, 165, 74, 0.10), transparent 70%),
    linear-gradient(135deg, #000 0%, #070603 55%, #0b0a07 100%);
}
html.theme-dark #auth-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(200, 165, 74, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 165, 74, 0.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 5%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 5%, transparent 68%);
}

html.theme-dark .auth-card {
  position: relative;
  background: #0b0a07;
  border: 1px solid var(--gold-line);
  box-shadow:
    inset 0 1px 0 rgba(230, 201, 119, 0.10),
    0 28px 70px rgba(0, 0, 0, 0.8),
    0 0 60px rgba(200, 165, 74, 0.06);
}

/* Brushed gold on the product name, the same treatment the Calendar title
   already uses. */
html.theme-dark .auth-title {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 34%, var(--gold-pale) 52%, var(--gold-bright) 68%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.theme-dark .auth-sub { color: #8f8f8f; }
html.theme-dark .auth-label { color: var(--gold); }

html.theme-dark .auth-field input {
  background: #050403;
  border-color: rgba(200, 165, 74, 0.26);
  color: #f5f5f5;
}
html.theme-dark .auth-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 74, 0.12);
}

/* The Sign in button was the last blue fill on the screen. */
html.theme-dark #auth-overlay .auth-submit,
html.theme-dark #auth-overlay .btn-primary {
  margin-top: 6px;
  background: linear-gradient(180deg, rgba(200, 165, 74, 0.28), rgba(200, 165, 74, 0.14));
  border: 1px solid var(--gold-line);
  color: var(--gold-bright);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: none;
}
html.theme-dark #auth-overlay .auth-submit:hover:not(:disabled),
html.theme-dark #auth-overlay .btn-primary:hover:not(:disabled) {
  background: rgba(200, 165, 74, 0.36);
  border-color: var(--gold);
  color: var(--gold-pale);
}
html.theme-dark #auth-overlay .auth-submit:disabled { opacity: 0.55; cursor: default; }

/* Errors keep red: that is the one thing on this screen that means "wrong". */
html.theme-dark .auth-error {
  background: rgba(217, 100, 95, 0.10);
  color: #d9645f;
  border-color: rgba(217, 100, 95, 0.38);
}
html.theme-dark .auth-success {
  background: rgba(200, 165, 74, 0.10);
  color: var(--gold-bright);
  border-color: var(--gold-line);
}

/* -- Gold accents, pass 23: a planet on the sign-in screen -----------------
   A gold world rising out of the bottom-right corner, so the login belongs to
   the same sky as the constellation.

   Built in CSS rather than Three.js on purpose: this screen renders before
   authentication and before app.js, so it must not depend on the 3D scene or
   pay its download cost. The sphere uses the same shading recipe as the
   Houston mini-planets (houstonPlanetGradient): a fixed highlight at 32%/28%,
   the base colour at the midpoint, and a hard dark limb at the edge. Keeping
   the highlight fixed is what makes it read as a lit sphere instead of a
   circle with a gradient in it. */
html.theme-dark #auth-overlay::after {
  content: '';
  position: absolute;
  right: -15%;
  bottom: -20%;
  width: 58vmax;
  height: 58vmax;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background:
    /* Surface mottling. Four soft blotches at low alpha, enough to break up
       the gradient so it does not look like flat plastic. */
    radial-gradient(circle at 58% 38%, rgba(122, 92, 23, 0.55) 0%, transparent 24%),
    radial-gradient(circle at 36% 60%, rgba(243, 226, 173, 0.14) 0%, transparent 19%),
    radial-gradient(circle at 71% 66%, rgba(26, 18, 5, 0.45) 0%, transparent 28%),
    radial-gradient(circle at 24% 44%, rgba(230, 201, 119, 0.16) 0%, transparent 17%),
    /* The sphere. */
    radial-gradient(circle at 32% 28%,
      #f3e2ad 0%,
      #e6c977 20%,
      #c8a54a 46%,
      #6a5527 76%,
      #140e04 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-position: 30% 50%, 55% 50%, 20% 50%, 70% 50%, 0 0;
  /* Atmosphere: an outward gold bloom, and an inner rim light on the dark limb
     so the edge does not just fade into the page. */
  box-shadow:
    0 0 160px 40px rgba(200, 165, 74, 0.16),
    inset -14px -14px 60px rgba(0, 0, 0, 0.55),
    inset 8px 8px 40px rgba(243, 226, 173, 0.10);
  animation: auth-planet-spin 240s linear infinite;
}

/* Only the mottling drifts; the highlight layer is pinned at 0 0 so the light
   source never moves. That is the whole trick: the surface turns, the sun
   does not. */
@keyframes auth-planet-spin {
  from { background-position: 30% 50%, 55% 50%, 20% 50%, 70% 50%, 0 0; }
  to   { background-position: 230% 50%, 255% 50%, 220% 50%, 270% 50%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-dark #auth-overlay::after { animation: none; }
}

/* Stacking, stated explicitly so the order never depends on source position:
   planet behind, grid over it, card on top. */
html.theme-dark #auth-overlay::before { z-index: 1; }
html.theme-dark .auth-card { z-index: 2; }

/* On a narrow phone the planet would swallow the form, so it shrinks and
   retreats further into the corner. */
@media (max-width: 620px) {
  html.theme-dark #auth-overlay::after {
    width: 86vw;
    height: 86vw;
    right: -30%;
    bottom: -14%;
    opacity: 0.42;
  }
}

/* Pass 23, corrected.
   Two problems with the first attempt. It covered roughly half the screen
   instead of a third, and it read as a flat yellow disc rather than a sphere.
   The second was caused by the first: at 58vmax the sphere's dark limb sat
   entirely off-screen, so only the lit half was ever visible and there was no
   tonal range left to suggest curvature.
   Fixed by shrinking it and by compressing the gradient stops so the whole
   range from highlight to dark limb lands inside the visible arc. */
html.theme-dark #auth-overlay::after {
  width: 50vmax;
  height: 50vmax;
  right: -12%;
  bottom: -16%;
  opacity: 0.5;
  background:
    radial-gradient(circle at 54% 40%, rgba(94, 71, 18, 0.5) 0%, transparent 22%),
    radial-gradient(circle at 34% 56%, rgba(243, 226, 173, 0.12) 0%, transparent 16%),
    radial-gradient(circle at 62% 60%, rgba(20, 14, 4, 0.45) 0%, transparent 24%),
    radial-gradient(circle at 24% 40%, rgba(230, 201, 119, 0.14) 0%, transparent 14%),
    radial-gradient(circle at 30% 26%,
      #f7ebc4 0%,
      #e6c977 14%,
      #c8a54a 32%,
      #8a6d2e 52%,
      #3f3212 72%,
      #140e04 90%);
  box-shadow:
    0 0 130px 26px rgba(200, 165, 74, 0.14),
    inset -20px -20px 70px rgba(0, 0, 0, 0.6),
    inset 10px 10px 46px rgba(243, 226, 173, 0.12);
}

@media (max-width: 620px) {
  html.theme-dark #auth-overlay::after {
    width: 78vw;
    height: 78vw;
    right: -26%;
    bottom: -12%;
    opacity: 0.4;
  }
}

/* -- Gold accents, pass 24: the planet becomes a canvas --------------------
   The CSS sphere from pass 23 could not do occluding rings, so it is retired
   in favour of login-planet.js. Its ::after is switched off rather than
   deleted, so the two never draw on top of each other. */
html.theme-dark #auth-overlay::after { display: none; }

.login-planet {
  position: absolute;
  right: -8%;
  bottom: -14%;
  width: 74vmax;
  height: 74vmax;
  z-index: 0;
  pointer-events: none;
  /* Canvas edges are hard. A soft mask lets the scene fade into the page
     instead of ending on a visible square boundary. */
  mask-image: radial-gradient(ellipse at 58% 56%, #000 46%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 58% 56%, #000 46%, transparent 78%);
}

@media (max-width: 620px) {
  .login-planet {
    width: 116vw;
    height: 116vw;
    right: -30%;
    bottom: -10%;
    opacity: 0.72;
  }
}

/* -- Gold accents, pass 25: killing Chrome's autofill wash -----------------
   When Chrome fills a field from the password manager it paints its own
   background, and it does it in a way `background-color` cannot beat. The only
   reliable override is a huge inset box-shadow, because Chrome's wash sits
   under the shadow layer. Text colour needs -webkit-text-fill-color for the
   same reason; plain `color` is ignored on an autofilled field.

   The absurd transition delay is the second half of the trick: Chrome re-applies
   the wash a moment after paint, and a background-color transition measured in
   days means it never visibly arrives. */
html.theme-dark input:-webkit-autofill,
html.theme-dark input:-webkit-autofill:hover,
html.theme-dark input:-webkit-autofill:focus,
html.theme-dark input:-webkit-autofill:active,
html.theme-dark textarea:-webkit-autofill,
html.theme-dark select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #050403 inset !important;
  box-shadow: 0 0 0 1000px #050403 inset !important;
  -webkit-text-fill-color: #f5f5f5 !important;
  caret-color: #f5f5f5;
  transition: background-color 100000s ease-in-out 0s;
}

/* The focus ring has to be restated, because the inset shadow above replaces
   whatever box-shadow the field had. */
html.theme-dark .auth-field input:-webkit-autofill:focus,
html.theme-dark .profile-name-input:-webkit-autofill:focus,
html.theme-dark .profile-email-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #050403 inset, 0 0 0 3px rgba(200, 165, 74, 0.12) !important;
  box-shadow: 0 0 0 1000px #050403 inset, 0 0 0 3px rgba(200, 165, 74, 0.12) !important;
  border-color: var(--gold) !important;
}

/* Chrome also drops a key icon into password fields in its own colour. */
html.theme-dark input::-webkit-credentials-auto-fill-button,
html.theme-dark input::-webkit-strong-password-auto-fill-button {
  filter: invert(1) sepia(1) saturate(2.2) hue-rotate(2deg) brightness(0.95);
}

/* -- Gold accents, pass 26: no hard canvas edge ----------------------------
   The ring was being chopped off against the left edge of the canvas bitmap,
   and the mask was still ~19% opaque where that edge fell, so the cut showed
   as a straight line. Two changes: a bigger bitmap so the whole system fits,
   and an explicitly sized mask that reaches full transparency well before the
   rect ends. The mask size is stated rather than left to farthest-corner, so
   the fade is predictable instead of depending on the element's aspect. */
.login-planet {
  right: -14%;
  bottom: -18%;
  width: 92vmax;
  height: 92vmax;
  mask-image: radial-gradient(ellipse 54% 54% at 62% 58%, #000 55%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 54% 54% at 62% 58%, #000 55%, transparent 95%);
}

@media (max-width: 620px) {
  .login-planet {
    width: 150vw;
    height: 150vw;
    right: -34%;
    bottom: -14%;
    opacity: 0.72;
  }
}

/* -- Gold accents, pass 27: search bar and badge onto the dock's glass --------
   Both of these were built on --ap-panel, which is rgba(182,182,182,.36): a
   light grey at just over a third opacity. Over a pale surface that reads as
   frosted glass, which is what it was designed for. Over the constellation it
   turns into a bluish-grey plate, and next to the near-black dock at the bottom
   of the same screen the two looked like they came from different apps.

   Copied here from #apollo-dock (apollo-shell.css) rather than pointed at a
   shared token, because --ap-panel is used in a dozen other places that are
   not on this dark scene and have no reason to change with it.

   The gold border stays. It is what marks these as Apollo's own controls, and
   the dock uses gold the same way on its active tab. */
html.theme-dark #constellation-search,
html.theme-dark .apollo-eyebrow,
html.theme-dark .apollo-eyebrow-btn {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.30),
              inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
/* Hover on the badge, which is a button. Same step up the dock's items take. */
html.theme-dark .apollo-eyebrow-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(200, 165, 74, 0.62);
}
/* The input sits inside the bar and was carrying its own pale fill, which put a
   second lighter plate on top of the one just darkened. */
html.theme-dark .constellation-search-input {
  background: transparent;
}

/* -- Gold accents, pass 29: Sync to Ninety beside the date range ------------
   The button moved out of the KPIs view into the shared header, so it now sits
   in the same row as the date range and Refresh instead of on its own line
   below them. Two things follow from that move.

   1. Equal height. The row switches to align-items:stretch so all three
      controls take the height of the tallest, then the date-range wrapper is
      made a flex box and its trigger filled to 100% so it stretches too (it is
      nested one level deeper than the other two).

   2. The gold skin. It used to be keyed on `#view-kpis .nsync-trigger`, which
      no longer matches now the button is in the header, so those rules are dead
      and the gold is re-applied here, scoped to the header. The button only
      appears on the KPIs view, gated by body.kpis-active, since syncing KPI
      measurables makes no sense anywhere else. */
.header-actions { align-items: stretch; }
.header-actions .dr-wrap { display: flex; }
.header-actions .dr-trigger { height: 100%; }
.header-actions #refresh-btn,
.header-actions .nsync-trigger { align-items: center; }

/* Only on the KPIs view. */
.header-actions .nsync-trigger { display: none; }
body.kpis-active .header-actions .nsync-trigger { display: inline-flex; }

/* Gold, re-applied in the header (light + dark), matching the KPIs theme it
   had before the move. */
.header-actions .nsync-trigger {
  border-color: var(--gold-line);
  background: linear-gradient(135deg, rgba(200, 165, 74, 0.14) 0%, rgba(200, 165, 74, 0.26) 100%);
  color: var(--gold-deep);
  box-shadow: 0 6px 18px rgba(200, 165, 74, 0.14), inset 0 1px 0 rgba(230, 201, 119, 0.28);
}
html.theme-dark .header-actions .nsync-trigger {
  border-color: rgba(200, 165, 74, 0.40);
  background: linear-gradient(135deg, rgba(200, 165, 74, 0.16) 0%, rgba(200, 165, 74, 0.30) 100%);
  color: var(--gold-bright);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(230, 201, 119, 0.22);
}
.header-actions .nsync-trigger:hover {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(200, 165, 74, 0.22) 0%, rgba(200, 165, 74, 0.36) 100%);
}

/* -- Gold accents, pass 30: winning-angle card in the Houston review drop ----
   Only rendered for low-ROAS accounts. It surfaces the actual ad that is
   working for the closest strong account we run, so the fix is "copy this
   proven hook" instead of "go test something". Gold, since it is the one
   affirmative, do-this-next block among the diagnostic bullets. */
.review-drop-angle:empty { display: none; }
.review-angle {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(200, 165, 74, 0.34);
  background:
    linear-gradient(180deg, rgba(200, 165, 74, 0.10), rgba(200, 165, 74, 0.03)),
    rgba(8, 7, 5, 0.6);
  font-size: 13px;
  line-height: 1.5;
  color: #cdc7b8;
}
.review-angle-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-bright, #e6c977);
  margin-bottom: 7px;
}
.review-angle-body b { color: #efe9db; font-weight: 600; }
.review-angle-hook {
  margin: 9px 0;
  padding: 9px 13px;
  border-left: 2px solid var(--gold, #c8a54a);
  border-radius: 4px;
  background: rgba(200, 165, 74, 0.08);
  color: #f3e9cf;
  font-style: italic;
  font-size: 13.5px;
}
.review-angle-line { margin: 6px 0; color: #a9a294; }
.review-angle-line span { color: #d9d2c2; }
.review-angle-cta { margin-top: 8px; color: #9a9384; font-size: 12px; }

/* The loading state keeps the same solid gold border as every other state, just
   dimmer text. No dashed border anywhere: it read as a broken or placeholder
   box rather than a real card. */
.review-angle-loading {
  color: #8f897b;
  font-style: italic;
}

/* Competitor fallback: a real next step, so it gets the full card treatment. */
.review-angle-link {
  display: inline-block;
  margin: 9px 0 4px;
  color: var(--gold-bright, #e6c977);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 165, 74, 0.4);
}
.review-angle-link:hover { border-bottom-color: var(--gold, #c8a54a); }
.review-angle-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #b4ae9f;
}
.review-angle-list li { margin: 5px 0; }

/* ── Voice calibration overlay ─────────────────────────────────────────────
   Full-screen, deliberately: reading names aloud for a few minutes is a task
   of its own, and anything else on screen is a distraction. Blue crystal to
   match the rest of Apollo; red only ever means an error, so nothing here
   uses it. */
.voice-cal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(27, 47, 110, 0.92) 0%, rgba(7, 11, 26, 0.96) 70%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.voice-cal-card {
  width: min(560px, 100%);
  border-radius: 22px;
  padding: 32px 34px 26px;
  text-align: center;
  border: 1px solid rgba(120, 160, 255, 0.22);
  background: linear-gradient(180deg, rgba(20, 38, 86, 0.55), rgba(30, 52, 110, 0.4));
  box-shadow: 0 24px 70px rgba(0, 10, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.voice-cal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: #60a5fa;
}
.voice-cal-progress {
  margin-top: 6px;
  font-size: 12.5px;
  color: #9fb4dd;
  font-variant-numeric: tabular-nums;
}
.voice-cal-prompt {
  margin-top: 18px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #eaf1ff;
  overflow-wrap: break-word;
}
.voice-cal-hint {
  margin-top: 12px;
  font-size: 14.5px;
  color: #bfdbfe;
  min-height: 20px;
}
.voice-cal-heard {
  margin-top: 10px;
  font-size: 13px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  color: #9fb4dd;
  min-height: 18px;
  overflow-wrap: break-word;
}
.voice-cal-bar {
  margin-top: 20px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(120, 160, 255, 0.16);
}
.voice-cal-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #38bdf8);
}
.voice-cal-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.voice-cal-btn {
  min-width: 108px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #eaf1ff;
  border: 1px solid rgba(120, 160, 255, 0.28);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.5), rgba(29, 78, 216, 0.42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.voice-cal-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(37, 99, 235, 0.4); }
.voice-cal-btn-quiet { background: rgba(20, 38, 86, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .voice-cal-bar-fill { transition: none !important; }
  .voice-cal-btn:hover { transform: none; }
}