:root {
  color-scheme: dark;
  --bg: #030406;
  --surface: #090d12;
  --surface-2: #10161e;
  --surface-3: #151d27;
  --line: #25303d;
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #eef5ff;
  --muted: #93a4b8;
  --soft: #c4d1de;
  --accent: #f7c814;
  --accent-2: #fff1a8;
  --accent-deep: #b48300;
  --warning: #ffcf5a;
  --orange: #ff8d4d;
  --danger: #ff5f73;
  --green: #58df8f;
  --sky: #54c7ff;
  --violet: #a98bff;
  --pink: #ff7ab6;
  --gold-soft: #ffe79b;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  --radius: 8px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* Structured navigation and compact identity legend */
.app-shell .nav-stack {
  align-content: start;
  gap: 14px;
}

.app-shell .nav-group {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.app-shell .nav-group-label {
  padding: 0 12px 3px;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.app-shell .nav-group-settings {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.app-shell .user-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.app-shell .user-card > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.app-shell .user-card strong,
.app-shell .user-card span {
  display: block;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.app-shell .logout-button {
  margin: 0;
  white-space: nowrap;
}

.app-shell.sidebar-collapsed .nav-group-label {
  display: none;
}

.app-shell.sidebar-collapsed .nav-stack {
  gap: 8px;
}

.app-shell.sidebar-collapsed .nav-group {
  gap: 4px;
}

.app-shell.sidebar-collapsed .user-card {
  grid-template-columns: 42px;
}

.campaign-angle-assist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.campaign-angle-assist .quiet-button {
  flex: 0 0 auto;
  min-height: 34px;
}

@media (max-width: 760px) {
  .app-shell .nav-group-label {
    padding-inline: 8px;
  }

  .campaign-angle-assist {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Refined signed-in identity */
.app-shell .user-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.app-shell .user-card::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}

.app-shell .user-card .avatar-img {
  width: 44px;
  height: 44px;
  border: 2px solid color-mix(in srgb, var(--accent) 60%, var(--surface));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent);
}

.app-shell .user-card-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.app-shell .user-card-identity strong,
.app-shell .user-card-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-shell .user-card-identity strong {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.1;
  white-space: nowrap;
}

.app-shell .user-card-identity span {
  display: -webkit-box;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-shell .logout-button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: var(--surface-2);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.app-shell .logout-button:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-2));
  transform: translateY(-1px);
}

.app-shell .logout-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Creative studio */
.creative-studio-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.creative-studio-badge {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--success) 42%, var(--line));
  border-radius: 999px;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.creative-studio-flow {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 18px 0;
}

.creative-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.creative-mode-card {
  appearance: none;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.creative-mode-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
}

.creative-mode-card.active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.creative-mode-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  font-size: 1.08rem;
  font-weight: 900;
}

.creative-mode-card > div {
  display: grid;
  gap: 4px;
}

.creative-mode-card strong {
  font-size: 0.88rem;
}

.creative-mode-card small {
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.35;
}

.creative-mode-card i {
  color: var(--accent);
  font-size: 0.63rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.creative-plan-disclosure {
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.creative-plan-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 850;
}

.creative-plan-disclosure > summary::-webkit-details-marker {
  display: none;
}

.creative-plan-disclosure > summary strong {
  color: var(--accent);
  font-size: 0.65rem;
}

.creative-plan-disclosure > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.creative-plan-disclosure[open] > summary::after {
  content: "\2212";
}

.creative-plan-disclosure .creative-intelligence-card {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.ai-original-note {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.ai-original-note strong {
  font-size: 0.76rem;
}

.ai-original-note span {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.creative-empty-state {
  display: grid;
  gap: 5px;
}

.creative-empty-state span {
  color: var(--muted);
  font-size: 0.7rem;
}

.creative-studio-flow span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.68rem;
}

.creative-studio-flow span.active,
.creative-studio-flow span.complete {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.creative-studio-flow span.complete { color: var(--success); }
.creative-studio-flow i { height: 1px; background: var(--line); }

.creative-intelligence-card,
.creative-studio-column,
.creative-template-stage,
.creative-action-dock {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.creative-intelligence-card {
  padding: 16px;
  margin-bottom: 14px;
}

.creative-intelligence-card.ready {
  border-color: color-mix(in srgb, var(--success) 34%, var(--line));
}

.creative-intelligence-card > header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.creative-intelligence-card header > div,
.creative-studio-section-heading > div,
.creative-brand-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.creative-intelligence-card header span,
.creative-research-direction span,
.creative-brand-copy > span,
.creative-copy-context > span {
  color: var(--accent);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.creative-intelligence-card header strong { font-size: 0.9rem; }
.creative-intelligence-card header small { color: var(--muted); font-size: 0.7rem; line-height: 1.4; }

.creative-feature-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-2));
}

.creative-feature-icon svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.creative-research-results {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.creative-research-direction p,
.creative-pattern-grid p { margin: 0; line-height: 1.45; }

.creative-pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.creative-pattern-grid article {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
}

.creative-pattern-grid article > span,
.creative-studio-section-heading > span {
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 900;
}

.creative-source-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.creative-source-row > span { color: var(--muted); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; }
.creative-source-row a { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.67rem; }
.creative-research-empty { margin-top: 13px; padding: 11px; border-radius: 12px; color: var(--muted); background: var(--surface-2); font-size: 0.72rem; line-height: 1.45; }
.wizard-inline-error { margin-top: 12px; color: var(--danger); font-size: 0.72rem; }

.creative-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.creative-studio-column,
.creative-template-stage { padding: 15px; }

.creative-studio-section-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.creative-studio-section-heading strong { font-size: 0.82rem; }
.creative-studio-section-heading small { color: var(--muted); font-size: 0.64rem; }

/* The global model route is a wide settings row. Inside the narrower creative
   control rail it becomes a compact vertical control so labels never collapse. */
.creative-studio-column .model-route-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 12px;
}

.creative-studio-column .model-route-card > label,
.creative-studio-column .model-route-card select {
  width: 100%;
  min-width: 0;
}

.creative-studio-column .model-route-card > span {
  justify-self: start;
}

.creative-studio-column .ai-route-heading {
  min-width: 0;
}

.creative-studio-column .ai-route-heading > div {
  min-width: 0;
}

.creative-studio-column .ai-route-heading h3,
.creative-studio-column .ai-route-heading p {
  overflow-wrap: anywhere;
}

.creative-brand-system {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-2);
}

.creative-brand-logo {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-weight: 900;
}

.creative-brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.creative-brand-copy strong { font-size: 0.9rem; }
.creative-brand-copy small { color: var(--muted); font-size: 0.68rem; }
.creative-brand-system .brand-swatch-row { grid-column: 1 / -1; }

.creative-copy-context {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.creative-copy-context p { margin: 0; color: var(--muted); font-size: 0.7rem; line-height: 1.4; }
.creative-compact-fields { display: grid; grid-template-columns: minmax(120px, 0.45fr) 1fr; gap: 10px; }
.creative-template-stage { margin-top: 14px; }

.creative-action-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 13px 15px;
}

.creative-action-dock > div:first-child { display: grid; gap: 3px; }
.creative-action-dock > div:first-child span { color: var(--muted); font-size: 0.68rem; }

@media (max-width: 900px) {
  .creative-studio-grid { grid-template-columns: 1fr; }
  .creative-studio-flow { grid-template-columns: repeat(4, 1fr); }
  .creative-studio-flow i { display: none; }
  .creative-studio-flow span { justify-content: center; }
  .creative-action-dock { align-items: stretch; flex-direction: column; }
}

@media (max-width: 620px) {
  .creative-mode-switch {
    grid-template-columns: 1fr;
  }

  .creative-mode-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .creative-mode-card i {
    grid-column: 2;
  }
  .creative-studio-heading,
  .creative-intelligence-card > header { grid-template-columns: 1fr; flex-direction: column; }
  .creative-studio-badge { align-self: flex-start; }
  .creative-intelligence-card > header .primary-button,
  .creative-intelligence-card > header .secondary-button { width: 100%; }
  .creative-studio-flow { grid-template-columns: repeat(2, 1fr); }
  .creative-compact-fields { grid-template-columns: 1fr; }
  .creative-action-dock .workflow-actions > * { width: 100%; }
}

/* Keep grouped navigation spacing authoritative over legacy navigation rules. */
.app-shell .nav-stack { gap: 14px; }
.app-shell.sidebar-collapsed .nav-stack { gap: 8px; }

/* July workspace refinement: navigation, creative library, Meta setup, and sticky reporting controls */
.app-shell .sidebar {
  background: #0d0c12;
  border-right: 1px solid rgba(255,255,255,.08);
  color: #f8f7fb;
}

.app-shell .brand-logo-plate {
  width: 100%;
  min-height: 82px;
  padding: 12px 14px;
  background: #000;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.app-shell .brand-logo-plate img {
  width: 100%;
  height: 58px;
  object-fit: contain;
}

.app-shell .nav-stack { gap: 6px; }
.app-shell .nav-item {
  position: relative;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  color: rgba(255,255,255,.68);
  background: transparent;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.app-shell .nav-item:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(2px); }
.app-shell .nav-item.active { color: #fff; background: rgba(122,88,220,.13); box-shadow: none; }
.app-shell .nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 3px;
  background: #9d7cff;
  box-shadow: 0 0 14px rgba(157,124,255,.75);
}
.app-shell .nav-icon {
  width: 24px;
  height: 24px;
  padding: 3px;
  border: 0;
  border-radius: 0;
  color: currentColor;
  background: transparent;
}
.app-shell .nav-icon svg { width: 18px; height: 18px; }
.app-shell .nav-item.active .nav-icon { color: #bca9ff; filter: drop-shadow(0 0 8px rgba(157,124,255,.45)); }

.sidebar-theme { margin: 14px 0 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-theme-label { display:block; margin:0 0 8px 10px; color:rgba(255,255,255,.42); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.sidebar-theme-track { position:relative; display:grid; grid-template-columns:1fr 1fr; padding:3px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(255,255,255,.035); }
.sidebar-theme-glider { position:absolute; z-index:0; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:10px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25); transition:transform 260ms cubic-bezier(.2,.8,.2,1), background 260ms ease; }
:root[data-theme="dark"] .sidebar-theme-glider { transform:translateX(100%); background:#292334; }
.sidebar-theme button { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:0 8px; border:0; background:transparent; color:rgba(255,255,255,.55); font-size:11px; font-weight:750; cursor:pointer; transition:color 220ms ease; }
.sidebar-theme button.active { color:#17131e; }
:root[data-theme="dark"] .sidebar-theme button.active { color:#fff; }
.sidebar-theme button em { font-style:normal; }
.app-shell.sidebar-collapsed .sidebar-theme-label,
.app-shell.sidebar-collapsed .sidebar-theme button em { display:none; }
.app-shell.sidebar-collapsed .sidebar-theme-track { grid-template-columns:1fr; gap:2px; padding:4px; }
.app-shell.sidebar-collapsed .sidebar-theme-glider { display:none; }
.app-shell.sidebar-collapsed .sidebar-theme button { min-height:30px; border-radius:9px; }
.app-shell.sidebar-collapsed .sidebar-theme button.active { color:#fff; background:rgba(157,124,255,.22); }

.app-shell.sidebar-collapsed .brand-logo-plate { width:58px; min-height:58px; padding:0; border-radius:18px; background:#000; border:1px solid rgba(255,255,255,.1); }
.app-shell.sidebar-collapsed .brand-logo-plate img { content:url('./assets/spotlight-mark.png'); width:58px; height:58px; object-fit:cover; clip-path:circle(39%); transform:scale(1.28); }

.home-hero {
  position:relative;
  min-height:230px;
  padding:32px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,var(--accent)),var(--surface));
  box-shadow:0 24px 60px rgba(10,8,18,.08);
}
.home-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 18% 35%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 30%); }
.home-profile { position:relative; z-index:1; }
.home-profile img { width:84px; height:84px; border-radius:24px; border:3px solid color-mix(in srgb,var(--accent) 28%,var(--surface)); box-shadow:0 16px 32px rgba(0,0,0,.16); }
.home-profile h2 { letter-spacing:-.055em; }
.home-weather-card { position:relative; z-index:1; backdrop-filter:blur(12px); background:color-mix(in srgb,var(--surface) 84%,transparent); }

.template-library-shell { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(340px,1.2fr); gap:24px; align-items:stretch; }
.template-library-intro { padding:8px 4px; }
.template-library-intro h3 { font-size:clamp(22px,2.2vw,32px); margin:3px 0 8px; }
.template-ratio-guide { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.template-ratio-guide span { padding:8px 10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:11px; }
.template-ratio-guide strong { color:var(--text); margin-right:5px; }
.template-upload-panel { display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,.6fr); gap:12px; padding:14px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--surface-strong) 70%,transparent); }
.template-dropzone { grid-row:span 2; display:flex!important; flex-direction:column; align-items:center; justify-content:center; min-height:150px; padding:20px!important; text-align:center; border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--accent) 6%,var(--surface)); cursor:pointer; transition:transform 180ms ease,border-color 180ms ease,background 180ms ease; }
.template-dropzone:hover { transform:translateY(-2px); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.template-dropzone input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.template-upload-icon { display:grid; place-items:center; width:36px; height:36px; margin-bottom:9px; border-radius:12px; color:#fff; background:var(--accent); font-size:22px; }
.template-dropzone small { margin-top:5px; color:var(--muted); }
.template-upload-status { margin:0; align-self:start; color:var(--muted); font-size:11px; line-height:1.45; }
.template-filter-bar { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:22px 0 14px; padding-top:18px; border-top:1px solid var(--line); }
.template-filter-bar > div:first-child { display:flex; flex-direction:column; gap:3px; }
.template-filter-bar small { color:var(--muted); }
.template-filter-bar .template-controls { display:grid; grid-template-columns:repeat(2,minmax(150px,220px)); gap:10px; }
.template-grid.compact { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.template-card { overflow:hidden; border-radius:16px; transition:transform 180ms ease,box-shadow 180ms ease; }
.template-card:hover { transform:translateY(-3px); box-shadow:0 18px 35px rgba(0,0,0,.13); }
.template-preview.uploaded { background:repeating-conic-gradient(color-mix(in srgb,var(--line) 55%,transparent) 0 25%,transparent 0 50%) 0/18px 18px; }
.template-actions { display:grid; grid-template-columns:1fr auto; gap:8px; }

.meta-connection-overview { display:grid; grid-template-columns:minmax(300px,1.2fr) minmax(260px,.7fr); gap:14px; padding:14px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--surface-strong) 76%,transparent); }
.meta-connection-state { display:flex; align-items:center; gap:12px; min-width:0; }
.meta-connection-state > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.meta-connection-state small { color:var(--muted); }
.meta-connection-state .connection-status { margin-left:auto; }
.meta-app-mark { display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:12px; color:#fff; background:#1877f2; font-size:23px; font-weight:900; }
.meta-account-counts { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.meta-account-counts div { display:flex; flex-direction:column; justify-content:center; min-height:62px; padding:10px; border-left:1px solid var(--line); }
.meta-account-counts div:first-child { border-left:0; }
.meta-account-counts strong { font-size:20px; }
.meta-account-counts span { color:var(--muted); font-size:10px; }
.meta-primary-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; }
.meta-primary-actions button { flex:0 0 auto!important; min-width:130px; }
.meta-primary-actions button:nth-child(3) { margin-left:auto; }
.meta-sync-note { margin:10px 2px; color:var(--muted); font-size:11px; }
.meta-account-directory { margin-top:12px; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.meta-account-directory > summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 16px; cursor:pointer; list-style:none; background:color-mix(in srgb,var(--surface-strong) 74%,transparent); }
.meta-account-directory > summary::-webkit-details-marker { display:none; }
.meta-account-directory > summary span { display:flex; flex-direction:column; gap:3px; }
.meta-account-directory > summary small { color:var(--muted); }
.meta-account-directory > summary em { padding:5px 9px; border-radius:999px; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); font-style:normal; font-size:10px; font-weight:800; }
.meta-account-directory .meta-preview { margin:0; border-width:1px 0 0; border-radius:0; max-height:440px; overflow:auto; }

.meta-performance-toolbar { position:sticky; z-index:20; top:12px; padding:18px 20px; backdrop-filter:blur(18px); background:color-mix(in srgb,var(--surface) 91%,transparent); box-shadow:0 14px 38px rgba(0,0,0,.12); }
.meta-performance-controls { align-items:end; }

@media (max-width: 900px) {
  .template-library-shell,
  .meta-connection-overview { grid-template-columns:1fr; }
  .template-upload-panel { grid-template-columns:1fr; }
  .template-dropzone { grid-row:auto; }
  .meta-primary-actions { grid-column:auto; }
  .meta-primary-actions button,
  .meta-primary-actions button:nth-child(3) { width:100%; margin-left:0; }
  .template-filter-bar { align-items:stretch; flex-direction:column; }
  .template-filter-bar .template-controls { grid-template-columns:1fr 1fr; }
  .meta-performance-toolbar { top:8px; }
}

@media (max-width: 620px) {
  .sidebar-theme { margin:8px 0; padding:8px 12px; border-top:0; }
  .sidebar-theme-label { display:none; }
  .home-hero { padding:22px 18px; }
  .home-profile img { width:66px; height:66px; border-radius:19px; }
  .template-filter-bar .template-controls,
  .meta-account-counts { grid-template-columns:1fr; }
  .meta-account-counts div { border-left:0; border-top:1px solid var(--line); min-height:48px; }
  .meta-account-counts div:first-child { border-top:0; }
  .template-grid.compact { grid-template-columns:1fr; }
  .meta-performance-toolbar { position:relative; top:auto; }
}

/* July workspace polish: compact controls, responsive navigation, and cleaner settings. */
.app-shell { transition: grid-template-columns 220ms cubic-bezier(.2,.75,.25,1); }
.brand-lockup { position: relative; }
.sidebar-collapse-toggle {
  position: absolute;
  right: -31px;
  bottom: 12px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  color: var(--muted);
  box-shadow: 8px 6px 20px rgba(0,0,0,.12);
  cursor: pointer;
}
.sidebar-collapse-toggle svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.sidebar-collapse-toggle:hover { color: var(--accent); }
.app-shell.sidebar-collapsed { grid-template-columns: 84px minmax(0,1fr); }
.app-shell.sidebar-collapsed .sidebar { padding-inline: 13px; }
.app-shell.sidebar-collapsed .brand-logo-plate {
  width: 56px;
  min-height: 56px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.app-shell.sidebar-collapsed .brand-logo-plate img { content: url('./assets/spotlight-mark.png'); height: 56px; border-radius: 50%; clip-path: circle(40%); transform: scale(1.22); }
.app-shell.sidebar-collapsed .nav-item { justify-content: center; padding: 0; font-size: 0; }
.app-shell.sidebar-collapsed .nav-icon { width: 38px; height: 38px; }
.app-shell.sidebar-collapsed .nav-badge { position: absolute; top: 3px; right: 2px; font-size: .62rem; }
.app-shell.sidebar-collapsed .user-card { justify-content: center; padding: 7px 0; }
.app-shell.sidebar-collapsed .user-card > div,
.app-shell.sidebar-collapsed .logout-button { display: none; }
.app-shell.sidebar-collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); }

.brand-logo-plate { overflow: hidden; border-radius: 18px; }
:root[data-theme="dark"] .brand-logo-plate {
  border-color: color-mix(in srgb,var(--accent) 24%,var(--line));
  background: color-mix(in srgb,#fff 94%,var(--accent));
  box-shadow: inset 0 -8px 24px rgba(118,88,215,.08), 0 10px 28px rgba(0,0,0,.16);
}

.auth-loading { gap: 10px; }
.workspace-loader {
  position: relative;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin-bottom: 6px;
}
.workspace-loader img { width: 100px; height: 100px; object-fit: cover; clip-path: circle(40%); transform: scale(1.2); }
.loader-orbit {
  position: absolute;
  inset: 3px;
  border: 2px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-top-color: var(--accent);
  border-right-color: var(--accent-2);
  border-radius: 50%;
  animation: loader-orbit 1.15s linear infinite;
}
.workspace-loader::after {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  box-shadow: 0 0 42px color-mix(in srgb,var(--accent) 24%,transparent);
  animation: loader-pulse 1.6s ease-in-out infinite;
}
.loading-caption { max-width: 360px; color: var(--muted); font-size: .76rem; text-align: center; }
@keyframes loader-orbit { to { transform: rotate(360deg); } }
@keyframes loader-pulse { 50% { transform: scale(1.12); opacity: .45; } }

.topbar {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow: 0 12px 35px color-mix(in srgb,var(--accent) 6%,transparent);
  backdrop-filter: blur(18px);
}
.topbar-title { display: flex; align-items: center; gap: 12px; min-width: max-content; }
.topbar-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb,var(--accent) 10%,var(--surface-2)); overflow: hidden; }
.topbar-mark img { width: 54px; height: 54px; object-fit: cover; clip-path: circle(39%); transform: scale(1.2); }
.topbar-title h2 { font-size: clamp(1.25rem,2vw,1.85rem); }
.topbar .control-row { margin-left: auto; }

button,
.primary-button,.secondary-button,.quiet-button,.file-upload-button { font-size: .78rem; line-height: 1.15; }
.primary-button,.secondary-button,.quiet-button,.file-upload-button { min-height: 34px; padding: 8px 12px; }
.compact-button { min-height: 30px; padding: 6px 10px; font-size: .72rem; }

.bonusly-logo { display: grid; place-items: center; width: 54px; height: 54px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.bonusly-logo img { width: 100%; height: 100%; object-fit: contain; }

.client-account-assets-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
.client-account-assets-summary { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; }
.client-account-assets-summary > .data-health,
.client-account-assets-summary > .asset-status,
.client-account-assets-summary > .asset-inventory,
.client-account-assets-summary > .client-asset-preview,
.client-account-assets-summary > .client-asset-links { grid-column: 1 / -1; }
.client-account-assets .connection-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.client-account-assets .connection-actions .client-color-editor { flex-basis: 100%; }
.client-asset-preview { max-width: none; }

.settings-disclosure { padding: 0 !important; overflow: hidden; }
.settings-disclosure > summary { cursor: pointer; list-style: none; padding: 18px 20px; margin: 0; }
.settings-disclosure > summary::-webkit-details-marker { display:none; }
.settings-disclosure > summary:hover { background: color-mix(in srgb,var(--accent) 5%,transparent); }
.settings-disclosure-body { padding: 0 20px 20px; border-top: 1px solid var(--line); }
.disclosure-action { align-self: center; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.settings-disclosure[open] .disclosure-action { font-size: 0; }
.settings-disclosure[open] .disclosure-action::after { content:'Collapse'; font-size:.7rem; }
.provider-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding-top: 14px; }
.provider-option { min-height: 68px; padding: 10px 12px; border-radius: 14px; }
.provider-option > span:nth-child(2) { min-width:0; }
.provider-option strong { font-size: .78rem; }
.provider-option small { font-size: .68rem; }
.openai-model-settings { grid-column: 1 / -1; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.openai-model-settings > summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; list-style:none; }
.openai-model-settings > summary::-webkit-details-marker { display:none; }
.openai-model-settings > summary span:first-child { display:grid; gap:2px; }
.openai-model-settings > summary small { color:var(--muted); font-size:.68rem; font-weight:600; }
.openai-model-settings > summary span:last-child { color:var(--accent-2); font-size:.7rem; font-weight:800; }
.model-routing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px; border-top:1px solid var(--line); }
.copy-template-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; padding-top:14px; }
.copy-template-group { display:grid; gap:10px; align-content:start; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.copy-template-group > div:first-child { display:grid; gap:2px; }
.copy-template-group small { color:var(--muted); font-size:.68rem; }
.copy-template-group label { display:grid; gap:5px; }
.copy-template-group label > span { color:var(--soft); font-size:.68rem; font-weight:750; }
.copy-template-input { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
.copy-template-input input { min-width:0; }
.copy-template-input a { display:grid; place-items:center; padding:0 10px; border:1px solid var(--line); border-radius:10px; color:var(--accent-2); font-size:.68rem; font-weight:800; text-decoration:none; }

@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; }
  .topbar .control-row { order: 3; width:100%; margin-left:0; }
  .client-account-assets-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .sidebar-collapse-toggle { display:none; }
  .app-shell.sidebar-collapsed { grid-template-columns:1fr; }
  .app-shell.sidebar-collapsed .sidebar { padding-inline:12px; }
  .app-shell.sidebar-collapsed .brand-logo-plate { width:auto; min-height:54px; }
  .app-shell.sidebar-collapsed .brand-logo-plate img { content:initial; width:128px; height:52px; clip-path:none; transform:none; }
  .app-shell.sidebar-collapsed .nav-item { justify-content:flex-start; padding:0 12px; font-size:.9rem; }
  .app-shell.sidebar-collapsed .user-card > div,.app-shell.sidebar-collapsed .logout-button { display:initial; }
  .topbar { border-radius:14px; padding:11px; }
  .topbar-mark { width:36px; height:36px; }
  .topbar .quick-theme-toggle { margin-left:auto; }
  .client-account-assets-summary,.provider-list,.copy-template-list,.model-routing-grid { grid-template-columns:1fr; }
  .client-account-assets .connection-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-disclosure > summary { align-items:flex-start; padding:14px; }
  .settings-disclosure-body { padding:0 14px 14px; }
}

/* 2026 visual refresh: a quieter, flatter workspace inspired by Javier's app. */
:root {
  --bg: #f5f5f3;
  --surface: #ffffff;
  --surface-2: #f0f0ed;
  --surface-3: #e8e8e4;
  --line: #deded9;
  --line-soft: rgba(20, 20, 18, 0.08);
  --text: #171715;
  --muted: #74746d;
  --soft: #383834;
  --accent: #e9b51d;
  --accent-2: #584511;
  --accent-deep: #b38400;
  --shadow: 0 8px 30px rgba(30, 30, 26, 0.06);
  --radius: 18px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #111210;
  --surface: #1b1c19;
  --surface-2: #242521;
  --surface-3: #2e2f2a;
  --line: #353630;
  --line-soft: rgba(255, 255, 245, 0.09);
  --text: #f4f4ee;
  --muted: #aaa99f;
  --soft: #deddd3;
  --accent: #f0bc28;
  --accent-2: #ffe7a0;
  --accent-deep: #c6970e;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
  color-scheme: dark;
}

body,
:root[data-theme="light"] body {
  background: var(--bg);
  letter-spacing: -0.01em;
}

.sidebar {
  gap: 18px;
  padding: 20px 16px;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  backdrop-filter: none;
}

.brand-logo-plate,
.login-logo-plate {
  border-color: var(--line);
  background: #050505;
  box-shadow: none;
}

.brand-logo-plate {
  width: 100%;
  min-height: 92px;
}

.nav-stack {
  gap: 4px;
}

.nav-item {
  min-height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  font-weight: 650;
}

.nav-item:hover {
  border-color: transparent;
  background: var(--surface-3);
}

.nav-item.active {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 3px 12px rgba(20, 20, 18, 0.05);
}

.nav-icon {
  background: transparent;
  color: var(--muted);
}

.nav-item.active .nav-icon {
  color: var(--accent-deep);
}

.workspace {
  padding: 28px 34px 48px;
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  gap: 18px;
  padding: 14px 0 22px;
  background: var(--bg);
}

.topbar h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  font-weight: 720;
  letter-spacing: -0.045em;
}

.section-kicker,
.panel-label,
.brand-eyebrow {
  color: var(--muted);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
}

.quick-theme-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.quick-theme-toggle button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
}

.quick-theme-toggle button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(20, 20, 18, 0.09);
}

.control-row {
  flex: 1 1 100%;
  justify-content: flex-end;
}

.sidebar-panel,
.user-card,
.login-card,
.metric-card,
.client-context-panel,
.chart-card,
.table-section,
.alert-card,
.alert-detail,
.client-workflow,
.campaign-node,
.settings-card,
.wizard-panel,
.board-column,
.connection-row,
.threshold-row,
.provider-option,
.model-route-card,
.template-library-modal,
.generator-panel,
.alert-copy-concepts article,
.alert-active-creative,
.current-ad-card {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sidebar-panel,
.user-card {
  background: transparent;
  box-shadow: none;
}

.metric-card,
.chart-card,
.table-section,
.settings-card,
.alert-detail,
.wizard-panel,
.generator-panel {
  border-radius: 22px;
}

.metric-card:hover,
.alert-card:hover,
.campaign-node:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(30, 30, 26, 0.09);
}

.primary-button,
.secondary-button,
.quiet-button,
.file-upload-button {
  min-height: 40px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: none;
}

.primary-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #211b0c;
}

.primary-button:hover {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: #fff;
  transform: none;
}

.secondary-button,
.quiet-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

.secondary-button:hover,
.quiet-button:hover {
  background: var(--surface-2);
}

input,
select,
textarea {
  border-color: var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-deep);
  outline: 3px solid rgba(233, 181, 29, 0.16);
}

.theme-toggle {
  padding: 4px;
  border-color: var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.theme-toggle button {
  border-radius: 999px;
}

.theme-toggle button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(20, 20, 18, 0.08);
}

.creative-actions {
  align-items: center;
}

.creative-image-upload {
  min-height: 40px;
  padding: 0 16px;
}

.creative-source-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.rendered-creative,
.template-reference-preview,
.approved-creative-grid img,
.current-ad-upload img {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.generator-step-pills,
.segmented {
  border-color: var(--line);
  background: var(--surface-2);
}

.generator-step-pills span.active,
.segmented button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(20, 20, 18, 0.08);
}

.bar-track,
.progress-track {
  background: var(--surface-3);
}

.bar-fill,
.progress-fill {
  background: var(--accent);
}

@media (max-width: 1180px) {
  .workspace {
    padding: 22px;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .quick-theme-toggle {
    order: 1;
  }

  .control-row {
    order: 2;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --surface-3: #e7edf5;
  --line: #cdd7e4;
  --line-soft: rgba(16, 24, 39, 0.12);
  --text: #101820;
  --muted: #5c6b7d;
  --soft: #273548;
  --accent: #e2aa00;
  --accent-2: #8d6b00;
  --accent-deep: #9c7400;
  --shadow: 0 18px 44px rgba(16, 24, 39, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 52% 0%, rgba(247, 200, 20, 0.16), transparent 34rem),
    linear-gradient(135deg, #030406 0%, #07080a 48%, #030406 100%);
  color: var(--text);
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 52% 0%, rgba(226, 170, 0, 0.14), transparent 34rem),
    linear-gradient(135deg, #f7f9fc 0%, #eef2f7 52%, #f8fafc 100%);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.app-shell.login-mode {
  grid-template-columns: 1fr;
}

.app-shell.login-mode .sidebar {
  display: none;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 18px;
  background: rgba(4, 7, 11, 0.9);
  border-right: 1px solid var(--line-soft);
  backdrop-filter: blur(18px);
}

.brand-lockup,
.user-card,
.card-heading,
.control-row,
.alert-top,
.campaign-node-header {
  display: flex;
  align-items: center;
}

.brand-lockup {
  gap: 12px;
  min-height: 54px;
}

.brand-logo-plate,
.login-logo-plate {
  display: grid;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(247, 200, 20, 0.22);
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 0 40px rgba(247, 200, 20, 0.14);
}

.brand-logo-plate {
  width: 220px;
  min-height: 112px;
  padding: 0;
}

.login-logo-plate {
  width: min(100%, 300px);
  min-height: 154px;
  margin-bottom: 22px;
  padding: 0;
}

.brand-logo-plate img,
.login-logo-plate img {
  display: block;
  width: 100%;
  height: auto;
}

.brand-eyebrow,
.section-kicker,
.panel-label {
  margin: 0;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 1.05rem;
  line-height: 1.1;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.6rem, 3vw, 2.65rem);
  line-height: 1.02;
}

h3 {
  margin-bottom: 0;
  font-size: 1rem;
}

.muted {
  color: var(--muted);
}

.nav-stack {
  display: grid;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--soft);
  text-align: left;
}

.nav-item:hover,
.nav-item.active {
  border-color: rgba(247, 200, 20, 0.36);
  background: rgba(247, 200, 20, 0.1);
  color: var(--text);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.nav-badge {
  margin-left: auto;
  min-width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 95, 115, 0.18);
  color: #ffd4da;
  font-size: 0.75rem;
  font-weight: 800;
}

.sidebar-panel,
.user-card,
.login-card,
.metric-card,
.client-context-panel,
.chart-card,
.table-section,
.alert-card,
.alert-detail,
.client-workflow,
.campaign-node {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(13, 18, 25, 0.78);
  box-shadow: var(--shadow);
}

.sidebar-panel {
  display: grid;
  gap: 8px;
  padding: 14px;
  margin-top: auto;
}

.sidebar-panel strong {
  font-size: 0.92rem;
}

.sidebar-panel span,
.user-card span {
  color: var(--muted);
  font-size: 0.8rem;
}

.quiet-button,
.secondary-button,
.primary-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
}

.quiet-button {
  background: rgba(255, 255, 255, 0.05);
}

.file-upload-button {
  align-items: center;
  cursor: pointer;
  display: inline-grid;
  padding: 0 14px;
}

.user-card {
  gap: 10px;
  padding: 10px;
}

.avatar-img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 2px solid rgba(247, 200, 20, 0.62);
  border-radius: 999px;
  object-fit: cover;
}

.logout-button {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-decoration: none;
}

.logout-button:hover {
  color: var(--accent);
}

.avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, #20313f, #111821);
  color: var(--accent-2);
  font-size: 0.78rem;
  font-weight: 900;
}

.workspace {
  min-width: 0;
  padding: 22px;
}

.login-preview {
  min-height: calc(100vh - 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 28px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.login-copy {
  max-width: 660px;
}

.login-copy h2 {
  margin-top: 18px;
  max-width: 680px;
}

.login-copy p:last-child {
  max-width: 560px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.login-card-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

.login-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

input,
select,
textarea {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #080c11;
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(247, 200, 20, 0.72);
  box-shadow: 0 0 0 3px rgba(247, 200, 20, 0.13);
}

textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.45;
}

.primary-button {
  border-color: rgba(247, 200, 20, 0.65);
  background: linear-gradient(135deg, #fff1a8, #f7c814 55%, #b48300);
  color: #031015;
  font-weight: 900;
}

.secondary-button {
  background: transparent;
}

.hidden {
  display: none !important;
}

.app-view {
  display: grid;
  gap: 18px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
}

.control-row {
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.control-row label {
  min-width: 190px;
}

.custom-date-fields {
  display: flex;
  align-items: end;
  gap: 10px;
}

.custom-date-fields label {
  min-width: 150px;
}

.control-row.alerts-context > label:nth-of-type(2),
.control-row.alerts-context .dashboard-campaign-control,
.control-row.alerts-context .custom-date-fields {
  display: none;
}

.view-panel {
  display: grid;
  gap: 16px;
}

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

.metric-card {
  position: relative;
  min-height: 126px;
  padding: 14px;
  overflow: hidden;
}

.metric-card::after {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.75;
}

.metric-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.metric-card strong {
  display: block;
  margin: 10px 0 6px;
  font-size: 1.65rem;
  line-height: 1;
}

.metric-card small {
  color: var(--soft);
}

.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
  gap: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid rgba(247, 200, 20, 0.24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 85% 12%, rgba(84, 199, 255, 0.24), transparent 15rem),
    radial-gradient(circle at 12% 20%, rgba(247, 200, 20, 0.22), transparent 16rem),
    linear-gradient(135deg, rgba(18, 26, 35, 0.92), rgba(8, 12, 18, 0.88));
  box-shadow: var(--shadow);
}

.home-sun {
  position: absolute;
  top: -42px;
  right: 22%;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff2a8 0%, #f7c814 48%, rgba(247, 200, 20, 0) 70%);
  opacity: 0.86;
}

.home-profile {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 18px;
  align-items: center;
}

.home-profile img {
  width: 96px;
  height: 96px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.home-profile h2 {
  margin: 4px 0 6px;
  font-size: clamp(2rem, 4vw, 4.4rem);
  line-height: 0.94;
}

.home-profile p {
  margin: 0;
  color: var(--soft);
}

.home-weather-card,
.home-card {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(13, 18, 25, 0.78);
  box-shadow: var(--shadow);
}

.home-weather-card {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.weather-main {
  display: flex;
  gap: 10px;
  align-items: center;
}

.weather-main > span {
  display: grid;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  place-items: center;
  background: rgba(247, 200, 20, 0.16);
  color: var(--gold);
  font-size: 1.35rem;
  line-height: 1;
}

.home-weather-card strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.15;
}

.home-weather-card small,
.home-card small {
  color: var(--muted);
}

.home-time-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 4px;
}

.home-time-strip div {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.home-time-strip span,
.home-quote-mini span {
  display: block;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-time-strip strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 0.92rem;
}

.home-quote-mini {
  padding: 9px 10px;
  border: 1px solid rgba(247, 200, 20, 0.12);
  border-radius: 8px;
  background: rgba(247, 200, 20, 0.07);
}

.home-quote-mini p {
  margin: 4px 0 0;
  color: var(--soft);
  font-size: 0.82rem;
  line-height: 1.35;
}

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

.home-card {
  min-width: 0;
  padding: 16px;
}

.home-card > span,
.home-card-heading span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-card > strong,
.home-card-heading strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 1.55rem;
  line-height: 1.1;
}

.client-breakdown {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.client-breakdown small {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.client-breakdown strong {
  color: var(--gold);
}

.integration-card.sky { background: linear-gradient(145deg, rgba(84, 199, 255, 0.16), rgba(13, 18, 25, 0.78)); }
.integration-card.violet { background: linear-gradient(145deg, rgba(169, 139, 255, 0.18), rgba(13, 18, 25, 0.78)); }
.integration-card.green { background: linear-gradient(145deg, rgba(88, 223, 143, 0.14), rgba(13, 18, 25, 0.78)); }
.integration-card.pink { background: linear-gradient(145deg, rgba(255, 122, 182, 0.16), rgba(13, 18, 25, 0.78)); }
.integration-card.gold { background: linear-gradient(145deg, rgba(247, 200, 20, 0.16), rgba(13, 18, 25, 0.78)); }

.alerts-home-card,
.holiday-card,
.sticky-card {
  grid-column: span 1;
}

.home-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.home-alert-list,
.holiday-list,
.home-preview-list,
.api-connection-grid {
  display: grid;
  gap: 8px;
}

.home-alert-list button,
.holiday-list div,
.home-preview-list > a,
.home-preview-list > div,
.api-connection-grid article {
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.home-alert-list button {
  width: 100%;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-alert-list button:hover,
.home-preview-list a:hover {
  border-color: rgba(247, 200, 20, 0.36);
  background: rgba(247, 200, 20, 0.08);
}

.home-alert-list strong,
.holiday-list strong,
.home-preview-list strong,
.api-connection-grid strong {
  display: block;
}

.home-preview-list {
  margin-top: 10px;
}

.home-preview-list.scrollable,
.home-alert-list {
  max-height: 230px;
  overflow-y: auto;
  padding-right: 4px;
}

.home-preview-list a {
  color: inherit;
  text-decoration: none;
}

.home-preview-item {
  display: grid;
  gap: 6px;
}

.home-preview-item > a,
.home-preview-item > div {
  display: grid;
  gap: 3px;
}

.slack-card .home-preview-list { gap: 10px; }
.slack-card .home-preview-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}
.slack-card .home-preview-item > a,
.slack-card .home-preview-item > div {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.slack-card .home-preview-item strong {
  color: var(--text);
  font-size: .88rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.slack-card .home-preview-item small {
  color: var(--soft);
  font-size: .78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.slack-card .home-preview-item .quiet-button {
  width: auto;
  min-height: 30px;
  padding: 5px 10px;
  font-size: .68rem;
}

.home-card-link {
  justify-self: start;
  margin-top: 8px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.api-connection-grid article {
  display: grid;
  gap: 7px;
}

.api-connection-grid article.connected {
  border-color: rgba(88, 223, 143, 0.22);
}

.api-connection-grid span {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 900;
}

.api-connection-grid small {
  color: var(--muted);
  line-height: 1.35;
}

.api-connection-grid input {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.34);
  color: var(--text);
  padding: 9px 10px;
}

.connection-toolbar {
  display: flex;
  grid-column: 1 / -1;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.connection-toolbar small {
  color: var(--muted);
}

.error-text {
  color: #ffbdc7 !important;
}

.sticky-card {
  background:
    linear-gradient(145deg, rgba(247, 200, 20, 0.18), rgba(13, 18, 25, 0.76)),
    rgba(13, 18, 25, 0.78);
}

.sticky-card textarea {
  width: 100%;
  margin-top: 10px;
  min-height: 230px;
  border: 1px solid rgba(247, 200, 20, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  padding: 10px;
  resize: vertical;
}

.home-checklist {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.checklist-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(247, 200, 20, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--soft);
  text-align: left;
}

.checklist-item span {
  display: grid;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(247, 200, 20, 0.5);
  border-radius: 5px;
  place-items: center;
  color: #080b0f;
  font-size: 0.7rem;
  font-weight: 900;
}

.checklist-item small {
  min-width: 0;
  color: var(--soft);
}

.checklist-item.done {
  background: rgba(88, 223, 143, 0.08);
  border-color: rgba(88, 223, 143, 0.24);
}

.checklist-item.done span {
  background: #58df8f;
  border-color: #58df8f;
}

.checklist-item.done small {
  color: var(--muted);
  text-decoration: line-through;
}

.sticky-preview small {
  display: block;
  color: var(--gold-soft);
}

.client-context-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.client-context-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.client-context-body {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(300px, 1fr) minmax(300px, 1.1fr);
  gap: 12px;
  align-items: center;
}

.status-select-wrap {
  min-width: 140px;
}

.client-status-select {
  font-weight: 900;
}

.client-status-select.green {
  border-color: rgba(88, 223, 143, 0.42);
  background: rgba(88, 223, 143, 0.12);
  color: #d8ffe3;
}

.client-status-select.red {
  border-color: rgba(255, 95, 115, 0.42);
  background: rgba(255, 95, 115, 0.12);
  color: #ffd4da;
}

.client-status-select.grey {
  border-color: rgba(147, 164, 184, 0.34);
  background: rgba(147, 164, 184, 0.1);
  color: #d7e0ec;
}

.client-quick-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-content: center;
}

.quick-link-button {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(247, 200, 20, 0.2);
  border-radius: var(--radius);
  background: rgba(247, 200, 20, 0.06);
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.quick-link-button:hover {
  border-color: rgba(247, 200, 20, 0.48);
  color: var(--text);
}

.resource-link-button {
  display: inline-grid;
  place-items: center;
  width: fit-content;
  min-height: 30px;
  margin-top: 4px;
  padding: 7px 12px;
  border: 1px solid rgba(247, 200, 20, 0.26);
  border-radius: var(--radius);
  background: rgba(247, 200, 20, 0.09);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
}

.resource-link-button:hover {
  border-color: rgba(247, 200, 20, 0.55);
  background: rgba(247, 200, 20, 0.15);
  color: var(--text);
}

.reference-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reference-file-list span {
  padding: 7px 10px;
  border: 1px solid rgba(247, 200, 20, 0.22);
  border-radius: var(--radius);
  background: rgba(247, 200, 20, 0.07);
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 800;
}

.canva-import-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(247, 200, 20, 0.22);
  border-radius: var(--radius);
  background: rgba(247, 200, 20, 0.045);
}

.canva-import-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.canva-import-summary article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.24);
}

.canva-import-summary span,
.canva-import-summary small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.canva-import-summary strong {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin: 5px 0;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.25;
}

.canva-import-summary i {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.canva-layer-list {
  display: grid;
  gap: 8px;
}

.canva-layer-list span {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.76rem;
}

.canva-layer-list strong {
  color: var(--accent);
  text-transform: capitalize;
}

.team-owner-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.team-owner-row {
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.team-owner-row span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.team-owner-row strong {
  display: block;
  margin-top: 3px;
  color: var(--soft);
  font-size: 0.84rem;
}

.trend-up {
  color: var(--green);
}

.trend-down {
  color: var(--danger);
}

.chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.7fr);
  gap: 12px;
}

.chart-card,
.table-section,
.client-workflow {
  padding: 16px;
}

.card-heading {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.card-heading.compact {
  margin-bottom: 10px;
}

.card-heading > span {
  color: var(--muted);
  font-size: 0.82rem;
}

.card-heading a {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.inline-ai-action,
.compact-model-select {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}

.inline-ai-action label,
.compact-model-select {
  min-width: 170px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.inline-ai-action select,
.compact-model-select select {
  margin-top: 5px;
}

.dashboard-prompt-box {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-prompt-box textarea {
  min-height: 92px;
  resize: vertical;
  text-transform: none;
}

.compact-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.76rem;
}

canvas {
  width: 100%;
  min-height: 240px;
}

.bar-list {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  gap: 7px;
}

.bar-row-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--soft);
  font-size: 0.82rem;
}

.bar-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-width: 250px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
}

.segmented button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
}

.segmented button.active {
  background: var(--surface-3);
  color: var(--text);
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 10px;
  border-top: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
  font-size: 0.86rem;
}

th {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

td {
  color: var(--soft);
}

td:first-child {
  color: var(--text);
  font-weight: 700;
}

.table-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.select-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.row-select {
  width: 16px;
  height: 16px;
  min-height: 16px;
  accent-color: var(--accent);
}

tr.selected-row td {
  background: rgba(247, 200, 20, 0.08);
  border-top-color: rgba(247, 200, 20, 0.3);
}

.status-pill,
.severity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.status-pill.active {
  background: rgba(88, 223, 143, 0.13);
  color: #bff5d1;
}

.status-pill.learning {
  background: rgba(255, 207, 90, 0.13);
  color: #ffe6a3;
}

.status-pill.review {
  background: rgba(255, 95, 115, 0.14);
  color: #ffc4cc;
}

.alert-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.summary-card {
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(13, 18, 25, 0.78);
}

.summary-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.8rem;
}

.alerts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
}

.alerts-list {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 420px);
  min-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.alert-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  text-align: left;
}

.alert-card.selected {
  border-color: rgba(247, 200, 20, 0.52);
  background: rgba(247, 200, 20, 0.08);
}

.alert-card button {
  justify-self: start;
}

.alert-top {
  justify-content: space-between;
  gap: 12px;
}

.alert-title {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.alert-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.severity-pill.yellow {
  background: rgba(255, 207, 90, 0.15);
  color: #ffe08d;
}

.severity-pill.orange {
  background: rgba(255, 141, 77, 0.16);
  color: #ffc7a8;
}

.severity-pill.red {
  background: rgba(255, 95, 115, 0.16);
  color: #ffbdc7;
}

.severity-pill.green {
  background: rgba(88, 223, 143, 0.14);
  color: #bff5d1;
}

.alert-detail {
  position: sticky;
  top: 22px;
  align-self: start;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.detail-stat {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.detail-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.detail-stat strong {
  display: block;
  margin-top: 4px;
}

.affected-ad {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(247, 200, 20, 0.18);
  border-radius: var(--radius);
  background: rgba(247, 200, 20, 0.05);
}

.ad-preview-card {
  display: grid;
  gap: 10px;
}

.ad-preview-thumb {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.ad-creative {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 150px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 100%),
    radial-gradient(circle at 24% 22%, rgba(255, 241, 168, 0.82), transparent 16rem),
    linear-gradient(135deg, #17120a, #4f3700 55%, #111);
}

.ad-creative::before,
.ad-creative::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 241, 168, 0.28);
}

.ad-creative::before {
  inset: 18px 18px auto auto;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 0 60px rgba(247, 200, 20, 0.24);
}

.ad-creative::after {
  left: -26px;
  top: 34px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.24);
}

.ad-creative.testimonial {
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(135deg, #241c08, #111 54%, #564018);
}

.ad-creative.urgent {
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 100%),
    repeating-linear-gradient(135deg, rgba(247, 200, 20, 0.32) 0 12px, rgba(0, 0, 0, 0.08) 12px 24px),
    #17120a;
}

.ad-creative span,
.ad-creative strong {
  position: relative;
  z-index: 1;
  max-width: 80%;
}

.ad-creative span {
  color: #fff8d9;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.05;
}

.ad-creative strong {
  justify-self: start;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--accent);
  color: #090703;
  font-size: 0.78rem;
}

.ad-copy {
  display: grid;
  gap: 6px;
}

.ad-copy span {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ad-copy p,
.ad-copy strong {
  margin: 0 0 6px;
  color: var(--soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

.dashboard-insights {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(247, 200, 20, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(247, 200, 20, 0.08), transparent 36%),
    rgba(13, 18, 25, 0.78);
  box-shadow: var(--shadow);
}

.insight-output {
  display: grid;
  gap: 10px;
}

.insight-placeholder,
.insight-card {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.insight-placeholder {
  color: var(--muted);
  font-size: 0.88rem;
}

.loading-state {
  border-color: rgba(247, 200, 20, 0.34);
  color: var(--accent-2);
}

.loading-time-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(247, 200, 20, 0.18);
  color: var(--muted);
  font-size: 0.76rem;
}

.error-state {
  border-color: rgba(255, 95, 115, 0.34);
  background: rgba(255, 95, 115, 0.08);
  color: #ffd4da;
}

.drive-doc-card {
  border: 1px solid var(--line-soft);
}

.drive-doc-card.created {
  border-color: rgba(88, 223, 143, 0.25);
  background: rgba(88, 223, 143, 0.045);
}

.drive-doc-card.created strong {
  color: #bff5d1;
}

.drive-doc-card.ready {
  border-color: rgba(88, 223, 143, 0.34);
  background: rgba(88, 223, 143, 0.08);
}

.drive-doc-card.ready strong {
  color: #bff5d1;
}

.copy-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.copy-workflow-grid > .drive-doc-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
}

.copy-workflow-grid > .drive-doc-card span,
.copy-workflow-grid > .drive-doc-card strong,
.copy-workflow-grid > .drive-doc-card small {
  grid-column: 1;
}

.copy-workflow-grid > .drive-doc-card .resource-link-button {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.copy-workflow-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.copy-workflow-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line-soft));
}

.copy-workflow-card.complete {
  border-color: rgba(88, 223, 143, 0.45);
  background: rgba(88, 223, 143, 0.07);
}

.copy-workflow-card.loading {
  border-color: color-mix(in srgb, var(--accent) 64%, transparent);
}

.copy-workflow-card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.copy-card-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.copy-workflow-card > header span,
.copy-workflow-card > header small {
  color: var(--muted);
  font-size: 0.76rem;
}

.copy-workflow-card > header strong {
  color: var(--text);
}

.copy-card-status-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  font-weight: 900;
}

.copy-workflow-card.complete .copy-card-status-icon {
  background: rgba(88, 223, 143, 0.16);
  color: #70e9a2;
}

.copy-workflow-card.loading .copy-card-status-icon {
  animation: copy-card-spin 900ms linear infinite;
}

.copy-complete-pill {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(88, 223, 143, 0.14);
  color: #8cf0b5 !important;
  font-size: 0.66rem !important;
  font-weight: 900;
  text-transform: uppercase;
}

.copy-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.copy-feedback-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.copy-feedback-panel label,
.copy-feedback-panel fieldset {
  display: grid;
  gap: 7px;
}

.copy-feedback-panel fieldset {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
}

.copy-feedback-panel legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.copy-feedback-panel fieldset label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.78rem;
}

.copy-feedback-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.copy-pipeline .copy-milestone.complete {
  border-color: rgba(88, 223, 143, 0.42);
  background: rgba(88, 223, 143, 0.08);
}

.copy-pipeline .copy-milestone.complete span {
  background: rgba(88, 223, 143, 0.18);
  color: #70e9a2;
}

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

@media (max-width: 760px) {
  .copy-workflow-grid {
    grid-template-columns: 1fr;
  }

  .copy-workflow-card > header {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .copy-card-actions {
    grid-column: 2;
    justify-self: start;
    justify-content: flex-start;
    margin: 8px 0 0;
  }

  .copy-feedback-panel fieldset {
    grid-template-columns: 1fr;
  }

  .copy-workflow-grid > .drive-doc-card {
    grid-template-columns: 1fr;
  }

  .copy-workflow-grid > .drive-doc-card .resource-link-button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

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

.insight-card {
  min-width: 0;
}

.insight-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

.insight-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.insight-recommendations {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(247, 200, 20, 0.18);
  border-radius: var(--radius);
  background: rgba(247, 200, 20, 0.05);
}

.insight-recommendations p {
  margin: 0;
  color: var(--soft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.ai-output {
  display: grid;
  gap: 12px;
}

.ai-output-section {
  display: grid;
  gap: 8px;
}

.ai-output-section h3,
.ai-output-item h4 {
  margin: 0;
  color: var(--accent-2);
  font-size: 0.88rem;
}

.ai-output-section ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--soft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.ai-output-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.12);
}

.ai-output-item p {
  margin: 0;
}

.ai-output-item p strong,
.ai-output-section p strong {
  color: var(--text);
}

.template-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(13, 18, 25, 0.78);
  box-shadow: var(--shadow);
}

.template-toolbar.compact {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.settings-card-wide {
  grid-column: 1 / -1;
}

.template-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  justify-content: flex-end;
}

.template-controls label {
  min-width: 160px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 4px;
}

.template-grid.compact {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.template-card {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(13, 18, 25, 0.78);
  box-shadow: var(--shadow);
}

.template-preview {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 104px;
  padding: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 100%),
    radial-gradient(circle at 18% 18%, rgba(247, 200, 20, 0.55), transparent 12rem),
    #111820;
}

.template-preview.uploaded {
  aspect-ratio: 1;
  padding: 0;
  background: #050505;
}

.template-preview.uploaded img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
}

.template-preview.vertical {
  min-height: 140px;
  aspect-ratio: 9 / 16;
}

.template-preview.urgent {
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 100%),
    repeating-linear-gradient(135deg, rgba(247, 200, 20, 0.28) 0 14px, rgba(0, 0, 0, 0.08) 14px 28px),
    #151107;
}

.template-preview.testimonial {
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 100%),
    linear-gradient(135deg, #241c08, #111 54%, #564018);
}

.template-preview span,
.template-preview strong {
  position: relative;
  z-index: 1;
}

.template-preview span {
  max-width: 80%;
  color: #fff8d9;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.08;
}

.template-preview strong {
  justify-self: start;
  margin-top: 10px;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--accent);
  color: #090703;
  font-size: 0.66rem;
}

.template-card-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.template-status {
  align-self: start;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--soft);
  font-size: 0.7rem;
  font-weight: 900;
}

.template-status.ready {
  background: rgba(88, 223, 143, 0.14);
  color: #bff5d1;
}

.template-status.draft,
.template-status.needs-qa {
  background: rgba(255, 207, 90, 0.16);
  color: #ffe08d;
}

.template-meta-row,
.template-fields,
.template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.template-meta-row span,
.template-fields span {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.template-picker {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(247, 200, 20, 0.18);
  border-radius: var(--radius);
  background: rgba(247, 200, 20, 0.05);
}

.template-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.selected-template-strip {
  display: flex;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.selected-template-strip article {
  display: grid;
  gap: 6px;
  min-width: 132px;
  max-width: 132px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
}

.selected-template-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 6px;
  background: #050505;
}

.selected-template-strip strong {
  color: var(--text);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-template-strip small {
  color: var(--muted);
  font-size: 0.7rem;
}

.template-library-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.template-library-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(1040px, 96vw);
  max-height: calc(100vh - 44px);
  min-height: 0;
  padding: 16px;
  border: 1px solid rgba(247, 200, 20, 0.24);
  border-radius: var(--radius);
  background: #090b0f;
  box-shadow: var(--shadow);
}

.template-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 4px 4px 0;
}

.template-choice {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 62px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--soft);
  text-align: left;
}

.template-choice.png-template-choice {
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  min-height: 94px;
}

.template-choice.png-template-choice img {
  grid-row: span 2;
  width: 76px;
  height: 76px;
  border-radius: 6px;
  object-fit: contain;
  background: #050505;
}

.template-choice.selected {
  border-color: rgba(247, 200, 20, 0.58);
  background: rgba(247, 200, 20, 0.1);
}

.template-choice-preview {
  grid-row: span 2;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.76) 100%),
    radial-gradient(circle at 25% 20%, rgba(247, 200, 20, 0.55), transparent 3rem),
    #111820;
}

.template-choice-preview.vertical {
  height: 58px;
}

.template-choice-preview.urgent {
  background:
    repeating-linear-gradient(135deg, rgba(247, 200, 20, 0.28) 0 7px, rgba(0, 0, 0, 0.08) 7px 14px),
    #151107;
}

.template-choice-preview.testimonial {
  background: linear-gradient(135deg, #241c08, #111 54%, #564018);
}

.template-choice strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.template-choice small {
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.campaign-tree {
  display: grid;
  gap: 10px;
}

.campaign-node {
  padding: 14px;
}

.campaign-node-header {
  justify-content: space-between;
  gap: 12px;
}

.campaign-node h4 {
  margin: 0;
}

.child-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(78px, auto));
  gap: 12px;
  padding: 10px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.new-client-wizard {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
}

.wizard-rail,
.wizard-stage,
.wizard-panel {
  min-width: 0;
}

.wizard-rail {
  display: grid;
  align-content: start;
  gap: 8px;
}

.wizard-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(13, 18, 25, 0.78);
  color: var(--muted);
  text-align: left;
}

.wizard-step span {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
  font-weight: 900;
}

.wizard-step strong {
  color: var(--soft);
  font-size: 0.86rem;
}

.wizard-step small {
  font-size: 0.74rem;
}

.wizard-step.active {
  border-color: rgba(247, 200, 20, 0.58);
  background: rgba(247, 200, 20, 0.1);
}

.wizard-step.complete span {
  background: rgba(88, 223, 143, 0.14);
  color: #bff5d1;
}

.wizard-stage {
  display: grid;
  gap: 12px;
}

.wizard-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(13, 18, 25, 0.78);
  box-shadow: var(--shadow);
}

.wizard-heading {
  display: grid;
  gap: 4px;
}

.wizard-heading-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 14px;
}

.wizard-heading-action > .muted {
  grid-column: 1 / -1;
}

.wizard-heading p:last-child {
  margin: 0;
}

.insight-placeholder.warning-state {
  border-color: rgba(247, 200, 20, 0.3);
  background: rgba(247, 200, 20, 0.07);
  color: #f5dfa0;
}

.wizard-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.model-route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.38fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(247, 200, 20, 0.18);
  border-radius: var(--radius);
  background: rgba(247, 200, 20, 0.05);
}

.model-route-card h3 {
  margin-bottom: 4px;
}

.model-route-card p {
  margin-bottom: 0;
  font-size: 0.84rem;
  line-height: 1.45;
}

.model-route-card > span {
  justify-self: end;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
}

.asset-checklist,
.pipeline-board,
.handoff-summary,
.doc-template-stack {
  display: grid;
  gap: 10px;
}

.asset-checklist {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.asset-checklist span,
.pipeline-board article,
.handoff-summary article,
.doc-template-stack article {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.asset-checklist span {
  color: var(--soft);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

.pipeline-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pipeline-board article {
  display: grid;
  gap: 6px;
}

.pipeline-board span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(247, 200, 20, 0.14);
  color: var(--accent);
  font-weight: 900;
}

.pipeline-board strong,
.handoff-summary strong {
  color: var(--text);
}

.pipeline-board small,
.handoff-summary span,
.doc-template-stack span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.handoff-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.handoff-summary article,
.doc-template-stack article {
  display: grid;
  gap: 4px;
}

.doc-template-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.doc-template-stack strong {
  color: var(--soft);
  font-size: 0.84rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.doc-template-stack small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.wizard-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  gap: 14px;
}

.settings-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(13, 18, 25, 0.78);
  box-shadow: var(--shadow);
}

.personal-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.personal-settings label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.personal-settings input {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.34);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  text-transform: none;
}

.personal-settings label small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}

.personal-save-row {
  margin-top: 4px;
}

.api-connection-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.connection-list,
.threshold-list,
.provider-list,
.copy-template-list {
  display: grid;
  gap: 10px;
}

.connection-list {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}

.client-master-import {
  display: grid;
  gap: 12px;
}

.client-master-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(150px, 0.6fr) auto auto auto;
  gap: 10px;
  align-items: end;
}

.client-master-controls.compact-sync-controls {
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
  margin-top: 10px;
}

.advanced-sync-tools {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}

.advanced-sync-tools summary {
  cursor: pointer;
  color: var(--soft);
  font-size: 0.82rem;
  font-weight: 900;
}

.client-master-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.client-master-controls input {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.34);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  text-transform: none;
}

.client-master-map {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.client-master-map span,
.client-master-preview em {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 201, 51, 0.12);
  color: var(--gold-soft);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.inline-status {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 800;
}

.inline-status.success {
  background: rgba(88, 223, 143, 0.1);
  color: #bff5d1;
}

.inline-status.error {
  background: rgba(255, 95, 115, 0.12);
  color: #ffbdc7;
}

.inline-status.warning {
  background: rgba(255, 206, 86, 0.12);
  color: #ffe3a3;
}

.client-master-preview {
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.preview-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.preview-heading span,
.client-master-preview small {
  color: var(--muted);
  font-size: 0.78rem;
}

.client-master-preview table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.client-master-preview th,
.client-master-preview td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  font-size: 0.84rem;
}

.client-master-preview th {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.client-master-preview td span,
.client-master-preview td small {
  display: block;
}

.client-master-preview td em {
  display: inline-block;
  margin: 0 4px 4px 0;
}

.meta-preview table {
  table-layout: fixed;
}

.meta-preview select {
  width: 100%;
  min-width: 0;
}

.theme-settings {
  display: grid;
  gap: 10px;
}

.theme-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.theme-toggle button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.theme-toggle button.active {
  background: var(--surface-3);
  color: var(--text);
}

.ad-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.ad-preview-modal.hidden {
  display: none;
}

.ad-preview-dialog {
  width: min(920px, 96vw);
  max-height: min(760px, 92vh);
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(247, 200, 20, 0.24);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.ad-preview-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
}

.ad-visual-preview {
  display: grid;
  place-items: center;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(247, 200, 20, 0.18), transparent),
    #05070a;
}

.ad-visual-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ad-visual-preview div {
  display: grid;
  gap: 10px;
  max-width: 78%;
  text-align: center;
}

.ad-visual-preview strong {
  color: #fff;
  font-size: 1.55rem;
}

.ad-visual-preview span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.ad-copy-preview {
  display: grid;
  align-content: start;
  gap: 8px;
}

.ad-copy-preview span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ad-copy-preview p {
  margin: 0 0 8px;
  color: var(--soft);
  line-height: 1.5;
  white-space: normal;
}

:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .metric-card,
:root[data-theme="light"] .chart-card,
:root[data-theme="light"] .table-section,
:root[data-theme="light"] .client-context-panel,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .alert-board-toolbar,
:root[data-theme="light"] .board-column,
:root[data-theme="light"] .alert-detail,
:root[data-theme="light"] .wizard-panel,
:root[data-theme="light"] .campaign-node,
:root[data-theme="light"] .connection-row,
:root[data-theme="light"] .threshold-row,
:root[data-theme="light"] .provider-option,
:root[data-theme="light"] .client-master-preview,
:root[data-theme="light"] .template-library-modal {
  background: rgba(255, 255, 255, 0.86);
}

:root[data-theme="light"] .bar-track,
:root[data-theme="light"] .segmented,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: rgba(16, 24, 39, 0.04);
}

:root[data-theme="light"] .brand-eyebrow,
:root[data-theme="light"] .section-kicker,
:root[data-theme="light"] .panel-label {
  color: #7a5a00;
}

:root[data-theme="light"] .nav-icon {
  background: rgba(226, 170, 0, 0.14);
  color: #5f4700;
}

:root[data-theme="light"] .status-pill.active {
  background: rgba(22, 101, 52, 0.12);
  color: #14532d;
}

:root[data-theme="light"] .status-pill.learning {
  background: rgba(180, 111, 0, 0.12);
  color: #8a5200;
}

:root[data-theme="light"] .status-pill.review {
  background: rgba(153, 27, 27, 0.12);
  color: #991b1b;
}

:root[data-theme="light"] .wizard-step {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

:root[data-theme="light"] .wizard-step span {
  background: rgba(226, 170, 0, 0.14);
  color: #7a5a00;
}

:root[data-theme="light"] .wizard-step strong {
  color: var(--text);
}

:root[data-theme="light"] .wizard-step small {
  color: var(--muted);
}

:root[data-theme="light"] .wizard-step.active {
  border-color: rgba(226, 170, 0, 0.55);
  background: rgba(226, 170, 0, 0.12);
}

:root[data-theme="light"] .wizard-step.complete span {
  background: rgba(22, 101, 52, 0.14);
  color: #14532d;
}

.connection-row,
.threshold-row,
.provider-option {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.connection-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
}

.connection-actions {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.asset-status {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 207, 90, 0.12);
  color: var(--warning);
  font-weight: 900;
}

.data-health {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  font-weight: 900;
}

.data-health.connected {
  background: rgba(88, 223, 143, 0.14);
  color: #bff5d1;
}

.data-health.warning {
  background: rgba(255, 207, 90, 0.12);
  color: var(--warning);
}

.data-health.error {
  background: rgba(255, 95, 115, 0.14);
  color: #ffbdc7;
}

.asset-status.ready {
  background: rgba(88, 223, 143, 0.14);
  color: #bff5d1;
}

.asset-status.loading {
  background: rgba(247, 200, 20, 0.14);
  color: var(--accent-2);
}

.asset-status.error {
  background: rgba(255, 95, 115, 0.14);
  color: #ffbdc7;
}

.asset-status.needs-colors,
.asset-status.needs-logo,
.asset-status.missing-website,
.asset-status.not-ready {
  background: rgba(255, 207, 90, 0.12);
  color: var(--warning);
}

.asset-inventory {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  max-width: 760px;
}

.asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 145px;
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-chip.ready {
  border-color: rgba(88, 223, 143, 0.25);
  background: rgba(88, 223, 143, 0.1);
  color: #bff5d1;
}

.asset-chip.missing {
  border-color: rgba(255, 207, 90, 0.22);
  background: rgba(255, 207, 90, 0.08);
  color: var(--warning);
}

.client-asset-preview {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  max-width: 760px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.asset-preview-media {
  display: grid;
  place-items: center;
  width: 64px;
  height: 44px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.asset-preview-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.asset-preview-media span,
.asset-preview-detail small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.asset-preview-detail {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.asset-swatch-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.asset-swatch-strip span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.asset-swatch-strip i {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: var(--swatch);
}

.asset-preview-detail a {
  width: fit-content;
  color: var(--accent-2);
  font-size: 0.7rem;
  font-weight: 850;
  text-decoration: none;
}

.asset-preview-detail a:hover {
  text-decoration: underline;
}

.asset-diagnostics {
  max-width: 100%;
  color: var(--muted);
  font-size: 0.68rem;
}

.asset-diagnostics summary {
  cursor: pointer;
  width: fit-content;
  color: var(--accent-2);
  font-weight: 850;
}

.asset-diagnostics pre {
  max-height: 180px;
  overflow: auto;
  margin: 6px 0 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  white-space: pre-wrap;
}

.asset-progress {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.client-asset-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}

.client-asset-links a {
  color: var(--accent-2);
  font-size: 0.72rem;
  font-weight: 850;
  text-decoration: none;
}

.client-asset-links a:hover {
  text-decoration: underline;
}

.client-asset-links button {
  appearance: none;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 850;
  padding: 3px 7px;
}

.client-asset-links button:hover {
  border-color: rgba(255, 207, 90, 0.45);
  color: var(--text);
}

.client-color-editor {
  display: grid;
  gap: 7px;
  width: min(100%, 320px);
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.client-color-editor label {
  display: grid;
  gap: 5px;
}

.client-color-editor span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.client-color-editor input {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
}

.connection-row strong,
.threshold-row strong {
  display: block;
  margin-bottom: 2px;
}

.connection-row span,
.threshold-row span {
  color: var(--muted);
  font-size: 0.74rem;
}

.png-template-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(10px);
}

.png-template-preview-dialog {
  display: grid;
  gap: 12px;
  width: min(620px, 94vw);
  max-height: 90vh;
  padding: 16px;
  border: 1px solid rgba(247, 200, 20, 0.24);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.png-template-preview-dialog img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: #050505;
}

.connection-status {
  min-width: 94px;
  padding: 6px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
}

.connection-status.connected {
  background: rgba(88, 223, 143, 0.14);
  color: #bff5d1;
}

.connection-status.warning {
  background: rgba(255, 207, 90, 0.16);
  color: #ffe08d;
}

.connection-status.error {
  background: rgba(255, 95, 115, 0.16);
  color: #ffbdc7;
}

.threshold-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.threshold-row input[type="range"] {
  padding: 0;
  accent-color: var(--accent);
}

.threshold-value {
  color: var(--accent);
  font-weight: 900;
  text-align: left;
}

.provider-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: var(--soft);
  cursor: pointer;
}

.provider-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.provider-option strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}

.provider-option span {
  color: var(--muted);
  font-size: 0.8rem;
}

.provider-option.selected {
  border-color: rgba(247, 200, 20, 0.58);
  background: rgba(247, 200, 20, 0.08);
}

.provider-badge {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(247, 200, 20, 0.12);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
}

.openai-model-settings {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(247, 200, 20, 0.24);
  border-radius: var(--radius);
  background: rgba(247, 200, 20, 0.05);
}

.openai-model-settings h3 {
  margin: 2px 0 4px;
}

.openai-model-settings p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.alert-board-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(13, 18, 25, 0.78);
}

.alert-board-toolbar label {
  min-width: 220px;
}

.alert-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 4px;
}

.board-column {
  min-width: 240px;
  min-height: 360px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(13, 18, 25, 0.72);
}

.board-column.red {
  border-color: rgba(255, 95, 115, 0.28);
  background: linear-gradient(180deg, rgba(255, 95, 115, 0.1), rgba(13, 18, 25, 0.72));
}

.board-column.yellow {
  border-color: rgba(255, 207, 90, 0.28);
  background: linear-gradient(180deg, rgba(255, 207, 90, 0.1), rgba(13, 18, 25, 0.72));
}

.board-column.green {
  border-color: rgba(88, 223, 143, 0.24);
  background: linear-gradient(180deg, rgba(88, 223, 143, 0.08), rgba(13, 18, 25, 0.72));
}

.board-column.testing {
  border-color: rgba(247, 200, 20, 0.3);
  background: linear-gradient(180deg, rgba(247, 200, 20, 0.09), rgba(13, 18, 25, 0.72));
}

.board-column-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.board-column-header h3 {
  font-size: 0.96rem;
}

.board-count {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--soft);
  font-size: 0.75rem;
  font-weight: 900;
}

.board-stack {
  display: grid;
  gap: 10px;
}

.board-card {
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(5, 7, 10, 0.72);
  color: var(--soft);
  text-align: left;
  cursor: pointer;
}

.board-card.selected {
  border-color: rgba(247, 200, 20, 0.58);
  background: rgba(247, 200, 20, 0.09);
}

.board-card strong {
  color: var(--text);
  line-height: 1.25;
}

.board-card small {
  color: var(--muted);
}

.board-card .testing-age {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(247, 200, 20, 0.12);
  color: #ffe39a;
  font-weight: 900;
}

.board-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.mini-action {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--soft);
  padding: 5px 8px;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
}

.mini-action.yellow {
  border-color: rgba(255, 207, 90, 0.35);
  color: #ffe7a0;
}

.mini-action.green {
  border-color: rgba(88, 223, 143, 0.35);
  color: #bff5d1;
}

.mini-action.testing {
  border-color: rgba(247, 200, 20, 0.35);
  color: var(--gold);
}

.mini-action.clear {
  color: var(--muted);
}

/* Alert board contrast in light mode. */
:root[data-theme="light"] .board-card {
  border-color: #d8d6cf;
  background: #ffffff;
  color: #272722;
  box-shadow: 0 4px 14px rgba(20, 20, 18, 0.06);
}

:root[data-theme="light"] .board-card:hover {
  border-color: #aaa69b;
  background: #fbfaf6;
}

:root[data-theme="light"] .board-card.selected {
  border-color: #b78300;
  background: #fff8df;
}

:root[data-theme="light"] .board-card strong,
:root[data-theme="light"] .board-card small {
  color: #171713;
}

:root[data-theme="light"] .board-metric {
  background: #f0efeb;
  color: #272722;
}

:root[data-theme="light"] .mini-action {
  border-color: #b8b5ac;
  background: #ffffff;
  color: #31312c;
}

:root[data-theme="light"] .mini-action.yellow {
  border-color: #9a6a00;
  color: #735000;
}

:root[data-theme="light"] .mini-action.green {
  border-color: #18794e;
  color: #11643f;
}

:root[data-theme="light"] .mini-action.testing {
  border-color: #8a6500;
  color: #6f5100;
}

:root[data-theme="light"] .mini-action.understood {
  border-color: #1d4ed8;
  background: #eff6ff;
  color: #1e40af;
}

.mini-action.understood {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
}

/* Compact campaign monitoring workspace. */
#alertsPanel {
  gap: 12px;
}

.alert-board-toolbar {
  align-items: center;
  padding: 16px 18px;
  background: var(--surface);
}

.alert-board-heading {
  min-width: 230px;
}

.alert-board-heading h2,
.alert-board-heading p {
  margin: 0;
}

.alert-board-heading h2 {
  margin: 2px 0 4px;
  color: var(--text);
  font-size: 1.35rem;
}

.alert-board-heading > p:last-child {
  color: var(--muted);
  font-size: 0.78rem;
}

.alert-filter-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(150px, 1fr) minmax(160px, 1fr);
  gap: 10px;
  width: min(720px, 100%);
}

.alert-filter-grid label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.alert-filter-grid input,
.alert-filter-grid select {
  width: 100%;
  min-width: 0;
}

.alert-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
}

.alert-overview-item {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.alert-overview-item:last-child {
  border-right: 0;
}

.alert-overview-item strong {
  color: var(--text);
  font-size: 1.35rem;
}

.alert-overview-item span {
  font-size: 0.76rem;
  font-weight: 850;
}

.alert-overview-item:hover,
.alert-overview-item.active {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 0 -3px 0 var(--accent);
  color: var(--text);
}

.alert-overview-item.red.active { box-shadow: inset 0 -3px 0 #ff5f73; }
.alert-overview-item.yellow.active { box-shadow: inset 0 -3px 0 #ffcf5a; }
.alert-overview-item.green.active { box-shadow: inset 0 -3px 0 #58df8f; }

.alert-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.42fr);
  gap: 12px;
  align-items: start;
}

.alert-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
  padding: 0;
}

.alert-board.is-filtered {
  grid-template-columns: 1fr;
}

.board-column {
  min-width: 0;
  min-height: 150px;
  padding: 10px;
}

.board-column-header {
  align-items: center;
  margin-bottom: 9px;
  padding: 0 2px;
}

.board-column-header h3 {
  margin: 0;
  font-size: 0.86rem;
}

.board-stack {
  gap: 8px;
}

.board-card {
  gap: 7px;
  padding: 11px;
  border-radius: 10px;
}

.board-card-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.board-card-eyebrow small,
.board-card-title,
.board-card-reason {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-card-title {
  display: block;
  font-size: 0.88rem;
}

.board-card-reason {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.board-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.board-metric {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 7px 5px;
  text-align: center;
}

.board-metric small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.board-metric strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
}

.board-card-actions {
  flex-wrap: nowrap;
  overflow-x: auto;
}

.mini-action {
  flex: 0 0 auto;
  padding: 4px 7px;
  font-size: 0.62rem;
}

.board-empty,
.alert-detail-empty {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 80px;
  color: var(--muted);
  text-align: center;
}

.board-empty strong,
.alert-detail-empty h3 {
  margin: 0;
  color: var(--text);
}

.alert-detail-empty span {
  color: #58df8f;
  font-size: 1.5rem;
}

.alert-detail-empty p {
  margin: 0;
  font-size: 0.78rem;
}

.board-detail-layout {
  display: block;
}

.alert-detail.board-detail {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  gap: 10px;
  padding: 15px;
  border-radius: var(--radius);
}

.alert-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.alert-detail-heading p,
.alert-detail-heading h2 {
  margin: 0;
}

.alert-detail-heading p {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.alert-detail-heading h2 {
  font-size: 1.05rem;
  line-height: 1.25;
}

.alert-reason-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.alert-reason-list span,
.alert-override-note {
  width: fit-content;
  margin: 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.65rem;
}

.detail-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.detail-stat {
  min-width: 0;
  padding: 9px 7px;
  text-align: center;
}

.detail-stat strong {
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
}

.alert-breakdown {
  padding: 0;
  overflow: hidden;
}

.alert-breakdown summary,
.alert-more-actions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.alert-breakdown summary span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 0.68rem;
}

.alert-breakdown .mini-table {
  padding: 0 12px 10px;
  overflow-x: auto;
}

.mini-row {
  grid-template-columns: minmax(130px, 1fr) repeat(4, minmax(58px, 0.55fr));
  align-items: center;
  text-align: right;
}

.mini-row > :first-child {
  text-align: left;
}

.mini-row-header {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
  text-transform: uppercase;
}

.alert-detail-actions {
  padding: 10px;
}

.alert-primary-actions {
  align-items: end;
}

.alert-primary-actions .compact-model-select {
  flex: 1 1 150px;
}

.alert-more-actions {
  border-top: 1px solid var(--line-soft);
}

.alert-more-actions summary {
  padding: 8px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.alert-more-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
}

@media (max-width: 1280px) {
  .alert-workspace { grid-template-columns: 1fr; }
  .alert-detail.board-detail { position: static; max-height: none; }
}

@media (max-width: 860px) {
  .alert-board-toolbar { align-items: stretch; flex-direction: column; }
  .alert-filter-grid { grid-template-columns: 1fr; width: 100%; }
  .alert-overview { grid-template-columns: repeat(5, minmax(90px, 1fr)); overflow-x: auto; }
  .alert-board { grid-template-columns: 1fr; }
}

.board-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.board-metric {
  padding: 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
}

.board-detail-layout {
  grid-template-columns: 1fr;
}

.board-detail {
  position: static;
}

.detail-section {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.mini-table {
  display: grid;
  gap: 6px;
}

.mini-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(4, minmax(70px, auto));
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.8rem;
}

.workflow-actions,
.generator-controls,
.creative-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-angle-field {
  display: grid;
  gap: 8px;
}

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

.campaign-type-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-height: 116px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.campaign-type-option.selected {
  border-color: rgba(247, 200, 20, 0.5);
  background: rgba(247, 200, 20, 0.09);
}

.campaign-type-option input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.campaign-type-option span {
  display: grid;
  gap: 6px;
}

.campaign-type-option strong {
  color: var(--text);
  font-size: 0.9rem;
}

.campaign-type-option small {
  color: var(--muted);
  line-height: 1.45;
}

.campaign-type-option em {
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--soft);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.creative-brand-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.creative-brand-palette > div:first-child {
  display: grid;
  gap: 4px;
}

.creative-brand-palette span {
  color: var(--muted);
  font-size: 0.74rem;
}

.creative-brand-palette strong {
  color: var(--text);
  font-size: 0.84rem;
}

.brand-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-swatch-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}

.brand-swatch-row i {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  background: var(--swatch);
}

.angle-suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.angle-suggestion-list button {
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.72rem;
  text-align: left;
}

.angle-suggestion-list button.selected {
  border-color: rgba(247, 200, 20, 0.5);
  background: rgba(247, 200, 20, 0.1);
  color: var(--accent-2);
}

.campaign-angle-field {
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-raised);
}

.campaign-angle-assist > div {
  display: grid;
  gap: 3px;
}

.campaign-angle-assist strong {
  color: var(--text);
  font-size: 0.86rem;
}

.campaign-angle-assist small {
  color: var(--muted);
  font-size: 0.7rem;
}

.angle-suggestion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.campaign-angle-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.campaign-angle-option:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  transform: translateY(-1px);
}

.campaign-angle-option.selected {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
}

.campaign-angle-option input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.campaign-angle-option span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
}

.campaign-angle-option em {
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 900;
}

.campaign-angle-option strong {
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
}

.campaign-angle-option small {
  color: var(--muted);
  font-size: 0.66rem;
}

.campaign-angle-manual {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-raised));
}

.campaign-angle-manual > div:first-child {
  display: grid;
  gap: 3px;
}

.campaign-angle-manual strong {
  color: var(--text);
  font-size: 0.86rem;
}

.campaign-angle-manual small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.campaign-angle-manual textarea {
  min-height: 88px;
  resize: vertical;
  color: var(--text);
  background: var(--surface-2);
}

.campaign-angle-manual-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.campaign-brief-ai-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-raised));
}

.campaign-brief-ai-status i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dashboard-source-spin 0.8s linear infinite;
}

.campaign-brief-ai-status div {
  display: grid;
  gap: 2px;
}

.campaign-brief-ai-status strong {
  color: var(--text);
  font-size: 0.78rem;
}

.campaign-brief-ai-status small {
  color: var(--muted);
  font-size: 0.68rem;
}

.campaign-brief-ai-status + .inline-error {
  margin-top: 0;
}

.campaign-brief-topline {
  display: grid;
  grid-template-columns: minmax(220px, 360px);
}

.campaign-brief-recommendations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px) {
  .campaign-angle-manual-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .campaign-angle-manual-actions .primary-button {
    width: 100%;
  }
}

.suggested-brief-field {
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-raised);
}

.suggested-brief-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.suggested-brief-field > span button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.suggested-brief-field > span button:hover,
.suggested-brief-field.editing > span button {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
}

.suggested-brief-field input[readonly],
.suggested-brief-field textarea[readonly] {
  border-color: transparent;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  cursor: default;
}

.suggested-brief-field.editing {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.campaign-brief-optional {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-raised);
}

.campaign-brief-optional summary {
  color: var(--text);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
}

@media (max-width: 760px) {
  .angle-suggestion-list,
  .campaign-brief-recommendations {
    grid-template-columns: 1fr;
  }
}

.generator-panel {
  display: grid;
  gap: 10px;
}

.generator-controls label {
  min-width: 160px;
  flex: 1;
}

.generator-step-pills,
.copy-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.generator-step-pills span,
.copy-chip-row span {
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.generator-step-pills span.active,
.generator-step-pills span.complete {
  border-color: rgba(247, 200, 20, 0.38);
  background: rgba(247, 200, 20, 0.1);
  color: var(--accent-2);
}

.current-ad-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.current-ad-selector {
  display: grid;
  gap: 10px;
}

.current-ad-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.current-ad-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  min-height: auto;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.current-ad-card.selected {
  border-color: rgba(247, 200, 20, 0.55);
  background: rgba(247, 200, 20, 0.09);
}

.current-ad-card input {
  grid-row: 1 / span 4;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.current-ad-card span,
.current-ad-card strong,
.current-ad-card small,
.current-ad-card p {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.current-ad-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.current-ad-card strong {
  color: var(--text);
  font-size: 0.86rem;
  white-space: normal;
  line-height: 1.25;
}

.current-ad-card small,
.current-ad-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.current-ad-upload img {
  width: 76px;
  height: 76px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  object-fit: contain;
  background: #050505;
}

.alert-copy-concepts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.alert-copy-concepts article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.alert-copy-concepts label,
.inline-edit-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.alert-copy-concepts input,
.alert-copy-concepts textarea,
.graphic-copy-input,
.inline-edit-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 8px;
}

.alert-copy-concepts textarea,
.inline-edit-field textarea {
  resize: vertical;
}

.alert-copy-concepts article > span,
.alert-copy-concepts small {
  color: var(--muted);
  font-size: 0.72rem;
}

.alert-copy-concepts p {
  margin: 0;
  color: var(--soft);
  line-height: 1.55;
}

.alert-template-grid {
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
  align-items: start;
}

.alert-creative-workbench {
  display: grid;
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
}

.alert-creative-queue {
  display: grid;
  align-content: start;
  gap: 7px;
}

.alert-creative-queue button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  text-align: left;
}

.alert-creative-queue button.active {
  border-color: rgba(247, 200, 20, 0.48);
  background: rgba(247, 200, 20, 0.09);
  color: var(--text);
}

.alert-creative-queue button.complete span {
  color: #8de2ae;
}

.alert-active-creative {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.alert-active-creative .rendered-creative {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #050505;
}

.graphic-copy-text {
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--soft);
}

.template-reference-preview {
  opacity: 0.7;
}

.prompt-box textarea {
  min-height: 82px;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #080c11;
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

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

.generated-ad {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(247, 200, 20, 0.2);
  border-radius: var(--radius);
  background: rgba(247, 200, 20, 0.05);
}

.generated-ad.variation {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.ai-png-workbench {
  display: grid;
  gap: 14px;
}

.queue-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.queue-strip button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 118px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
}

.queue-strip button.active {
  border-color: rgba(247, 200, 20, 0.42);
  background: rgba(247, 200, 20, 0.1);
  color: var(--text);
}

.queue-strip button.approved {
  border-color: rgba(88, 223, 143, 0.28);
}

.queue-strip span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(247, 200, 20, 0.14);
  color: var(--accent);
  font-weight: 900;
}

.queue-strip strong {
  font-size: 0.75rem;
}

.ai-png-card {
  gap: 14px;
}

.ai-png-preview-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ai-png-preview-pair > div {
  display: grid;
  gap: 8px;
}

.ai-png-preview-pair span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-png-empty {
  display: grid;
  place-items: center;
  min-height: 148px;
  border: 1px dashed rgba(247, 200, 20, 0.3);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
  color: var(--muted);
  text-align: center;
  padding: 18px;
}

.single-campaign-plan,
.campaign-folder-preview,
.creative-set-summary,
.creative-feedback-panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
}

.single-campaign-plan,
.campaign-folder-preview,
.creative-feedback-panel {
  display: grid;
  gap: 7px;
  padding: 14px;
}

.single-campaign-plan > span,
.campaign-folder-preview > span,
.creative-set-summary span,
.creative-concept-copy > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

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

.campaign-package-summary article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 108px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.creative-set-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
}

.creative-set-summary > div {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  background: var(--panel);
}

.creative-concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: start;
  align-items: start;
  gap: 12px;
}

.creative-concept-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.creative-concept-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.creative-concept-header > strong {
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-2));
  font-size: 0.61rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.creative-concept-card.batch-generating button,
.creative-concept-card.batch-generating textarea {
  pointer-events: none;
  opacity: 0.66;
}

.creative-concept-card:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line-soft));
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.creative-concept-card.approved {
  border-color: rgba(88, 223, 143, 0.4);
}

.creative-concept-preview {
  display: grid;
  place-items: center;
  min-height: 148px;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
  background: rgba(0, 0, 0, 0.2);
}

.creative-concept-preview img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

img.creative-concept-preview {
  width: 100%;
  max-height: 360px;
  border-radius: calc(var(--radius) - 4px);
  object-fit: contain;
  background: rgba(0, 0, 0, 0.2);
}

.creative-concept-copy {
  display: grid;
  gap: 5px;
}

.creative-concept-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.creative-prompt-details summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
}

.creative-prompt-details p {
  max-height: 132px;
  overflow: auto;
  margin: 8px 0 0;
  white-space: pre-wrap;
}

.creative-feedback-panel textarea {
  min-height: 92px;
  resize: vertical;
}

@media (max-width: 900px) {
  .campaign-package-summary,
  .creative-set-summary {
    grid-template-columns: 1fr;
  }

  .creative-concept-grid {
    grid-template-columns: 1fr;
  }
}

.approved-creative-review {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(88, 223, 143, 0.2);
  border-radius: var(--radius);
  background: rgba(88, 223, 143, 0.045);
}

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

.approved-creative-grid article {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
}

.approved-creative-grid img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: contain;
  background: #050505;
}

.approved-creative-grid img.vertical-creative-preview {
  aspect-ratio: 9 / 16;
  max-height: 360px;
  justify-self: center;
  object-fit: contain;
}

.approved-creative-grid strong {
  color: var(--text);
  font-size: 0.8rem;
}

.generated-ad .ad-creative {
  min-height: 120px;
}

.rendered-creative {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #000;
}

.approved-badge {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(88, 223, 143, 0.14);
  color: #bff5d1;
  font-size: 0.72rem;
  font-weight: 900;
}

@media (max-width: 1120px) {
  .metric-grid,
  .home-grid,
  .alert-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-grid,
  .home-hero,
  .new-client-wizard,
  .client-context-body,
  .template-grid,
  .settings-grid,
  .wizard-form-grid,
  .model-route-card,
  .asset-checklist,
  .pipeline-board,
  .handoff-summary,
  .doc-template-stack {
    grid-template-columns: 1fr;
  }

  .alert-detail {
    position: static;
  }
}

@media (max-width: 980px) {
  .template-modal-grid,
  .template-grid,
  .campaign-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .template-modal-grid,
  .template-grid,
  .campaign-type-grid,
  .personal-settings,
  .api-connection-grid,
  .approved-creative-grid {
    grid-template-columns: 1fr;
  }

  .template-library-overlay {
    padding: 10px;
  }

  .template-library-modal {
    max-height: calc(100vh - 20px);
  }
}

@media (max-width: 980px) {
  .alerts-layout {
    grid-template-columns: 1fr;
  }

  .alerts-list {
    max-height: 520px;
  }
}

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .workspace {
    padding: 14px;
  }

  .login-preview,
  .topbar {
    grid-template-columns: 1fr;
    display: grid;
  }

  .control-row {
    justify-content: stretch;
    display: grid;
  }

  .custom-date-fields {
    display: grid;
  }

  .alert-board-toolbar,
  .template-toolbar,
  .threshold-row,
  .client-context-header {
    display: grid;
  }

  .generated-grid,
  .alert-copy-concepts,
  .alert-creative-workbench,
  .mini-row,
  .client-quick-links,
  .team-owner-table,
  .template-choice-grid,
  .insight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .metric-grid,
  .home-grid,
  .alert-summary {
    grid-template-columns: 1fr;
  }

  .alerts-home-card,
  .holiday-card,
  .sticky-card {
    grid-column: span 1;
  }

  .home-profile {
    align-items: flex-start;
    flex-direction: column;
  }

  .segmented {
    width: 100%;
    min-width: 0;
  }

  .card-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Responsive application shell and account connections */
.auth-loading {
  min-height: calc(100vh - 44px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--muted);
}

.auth-loading strong {
  color: var(--text);
  font-size: 0.92rem;
}

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

.workspace,
.app-view,
.view-panel,
.settings-grid,
.settings-card,
.home-grid,
.home-card,
.alert-board,
.board-column {
  min-width: 0;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.connection-status-bar {
  margin-bottom: 14px;
  padding: 10px;
  border-color: var(--line);
  background: var(--surface-2);
}

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

.api-connection-grid article {
  min-height: 210px;
  align-content: start;
  padding: 18px;
  border-color: var(--line);
  border-radius: 18px;
  background: var(--surface-2);
}

.api-connection-grid article > button {
  align-self: end;
  margin-top: auto;
  width: 100%;
}

.connection-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.connection-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
}

.api-connection-grid article.connected .connection-dot {
  background: #36a269;
  box-shadow: 0 0 0 4px rgba(54, 162, 105, 0.14);
}

@media (max-width: 1500px) {
  .alert-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }

  .api-connection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .alert-board {
    grid-template-columns: 1fr;
  }

  .board-column {
    min-width: 0;
    min-height: 180px;
  }

  .alert-board-toolbar,
  .connection-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .alert-board-toolbar label,
  .alert-board-toolbar select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 820px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: sticky;
    z-index: 80;
    top: 0;
    height: auto;
    padding: 10px 14px;
    display: block;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .brand-lockup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .brand-logo-plate {
    width: 132px;
    min-height: 58px;
  }

  .mobile-nav-toggle {
    display: inline-grid;
    place-items: center;
    min-width: 72px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-weight: 800;
  }

  .sidebar > .nav-stack,
  .sidebar > .sidebar-panel,
  .sidebar > .user-card {
    display: none;
  }

  .sidebar.mobile-open {
    position: fixed;
    inset: 0;
    height: 100dvh;
    padding: 14px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .sidebar.mobile-open > .nav-stack {
    display: grid;
    margin-top: 18px;
  }

  .sidebar.mobile-open > .sidebar-panel,
  .sidebar.mobile-open > .user-card {
    display: flex;
  }

  .sidebar.mobile-open > .sidebar-panel {
    display: grid;
    margin-top: auto;
  }

  .workspace {
    width: 100%;
    padding: 14px;
  }

  .topbar {
    position: static;
  }

  .quick-theme-toggle {
    justify-self: end;
  }

  .home-hero,
  .home-grid,
  .settings-grid,
  .new-client-wizard,
  .client-context-body,
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .workspace {
    padding: 10px;
  }

  .topbar h2 {
    font-size: 1.55rem;
  }

  .home-profile {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-time-strip,
  .meta-kpi-grid,
  .meta-account-strip,
  .api-connection-grid,
  .detail-stat-grid,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .api-connection-grid article {
    min-height: 0;
  }

  .settings-card,
  .home-card,
  .board-column,
  .meta-performance-toolbar {
    padding: 14px;
    border-radius: 16px;
  }

  .wizard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .wizard-actions button,
  .control-row button,
  .control-row label {
    width: 100%;
  }
}

/* Keep the refresh last in the cascade. */
:root,
:root[data-theme="light"] {
  --bg: #f5f5f3;
  --surface: #ffffff;
  --surface-2: #f0f0ed;
  --surface-3: #e8e8e4;
  --line: #deded9;
  --line-soft: rgba(20, 20, 18, 0.08);
  --text: #171715;
  --muted: #74746d;
  --soft: #383834;
  --accent: #e9b51d;
  --accent-2: #584511;
  --accent-deep: #b38400;
  --shadow: 0 8px 30px rgba(30, 30, 26, 0.06);
  --radius: 18px;
}

:root[data-theme="dark"] {
  --bg: #111210;
  --surface: #1b1c19;
  --surface-2: #242521;
  --surface-3: #2e2f2a;
  --line: #353630;
  --line-soft: rgba(255, 255, 245, 0.09);
  --text: #f4f4ee;
  --muted: #aaa99f;
  --soft: #deddd3;
  --accent: #f0bc28;
  --accent-2: #ffe7a0;
  --accent-deep: #c6970e;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}

body,
:root[data-theme="light"] body {
  background: var(--bg);
}

.sidebar {
  background: var(--surface-2);
  border-right-color: var(--line);
  backdrop-filter: none;
}

.topbar {
  background: var(--bg);
}

.nav-item:hover {
  border-color: transparent;
  background: var(--surface-3);
}

.nav-item.active {
  border-color: var(--line);
  background: var(--surface);
}

.sidebar-panel,
.user-card,
.login-card,
.metric-card,
.client-context-panel,
.chart-card,
.table-section,
.alert-card,
.alert-detail,
.client-workflow,
.campaign-node,
.settings-card,
.wizard-panel,
.board-column,
.connection-row,
.threshold-row,
.provider-option,
.model-route-card,
.template-library-modal,
.generator-panel,
.alert-copy-concepts article,
.alert-active-creative,
.current-ad-card,
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .metric-card,
:root[data-theme="light"] .chart-card,
:root[data-theme="light"] .table-section,
:root[data-theme="light"] .client-context-panel,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .alert-board-toolbar,
:root[data-theme="light"] .board-column,
:root[data-theme="light"] .alert-detail,
:root[data-theme="light"] .wizard-panel,
:root[data-theme="light"] .campaign-node,
:root[data-theme="light"] .connection-row,
:root[data-theme="light"] .threshold-row,
:root[data-theme="light"] .provider-option,
:root[data-theme="light"] .template-library-modal {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sidebar-panel,
.user-card {
  background: transparent;
  box-shadow: none;
}

.primary-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #211b0c;
  box-shadow: none;
}

.primary-button:hover {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: #fff;
  box-shadow: none;
}

.secondary-button,
.quiet-button,
:root[data-theme="light"] .secondary-button,
:root[data-theme="light"] .quiet-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

.secondary-button:hover,
.quiet-button:hover {
  background: var(--surface-2);
}

input,
select,
textarea,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

.theme-toggle,
.segmented,
.generator-step-pills,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .segmented {
  border-color: var(--line);
  background: var(--surface-2);
}

.theme-toggle button.active,
.segmented button.active,
.generator-step-pills span.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(20, 20, 18, 0.08);
}

.brand-logo-plate,
.login-logo-plate {
  background: #050505;
  border-color: var(--line);
  box-shadow: none;
}

.rendered-creative,
.template-reference-preview,
.approved-creative-grid img,
.current-ad-upload img {
  border-color: var(--line);
  background: var(--surface-2);
}

.avatar,
.summary-card,
.integration-card,
.integration-card.sky,
.integration-card.violet,
.integration-card.green,
.integration-card.pink,
.integration-card.gold,
.sticky-card,
.client-master-preview,
.current-ad-upload,
.board-column.red,
.board-column.yellow,
.board-column.green,
.board-column.testing {
  background: var(--surface);
}

.summary-card::after {
  display: none;
}

.metric-bar span,
.bar-fill,
.progress-fill {
  background: var(--accent);
}

.metric-card::after,
.home-sun {
  display: none;
}

.home-hero {
  border-color: var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.home-weather-card,
.home-card,
.home-time-strip div,
.home-quote-mini {
  border-color: var(--line);
  background: var(--surface-2);
  box-shadow: none;
}

.home-profile img {
  border-color: var(--line);
  box-shadow: none;
}

.meta-performance-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#metaPerformancePanel,
#metaPerformanceContent {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.meta-campaign-table .table-scroll {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.meta-performance-toolbar h3 {
  margin-top: 5px;
  font-size: clamp(1.45rem, 2.5vw, 2.25rem);
  letter-spacing: -0.04em;
}

.meta-performance-controls {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.meta-performance-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.meta-performance-controls select {
  min-width: 240px;
}

.meta-custom-date-range {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.meta-custom-date-range input {
  min-width: 148px;
}

@media (max-width: 1500px) {
  .meta-performance-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .meta-performance-controls select {
    min-width: 200px;
  }
}

.meta-account-strip {
  display: grid;
  grid-template-columns: 1.25fr 0.6fr 1fr 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line);
}

.meta-account-strip > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 16px;
  background: var(--surface);
}

.meta-account-strip span,
.meta-kpi-grid span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meta-account-strip strong {
  overflow: hidden;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.meta-kpi-grid article {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.meta-kpi-grid strong {
  font-size: 1.45rem;
  letter-spacing: -0.035em;
}

.meta-campaign-table td:first-child {
  min-width: 260px;
}

.meta-campaign-table td:first-child strong,
.meta-campaign-table td:first-child small {
  display: block;
}

.meta-campaign-table td:first-child small {
  margin-top: 5px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
}

.meta-performance-empty {
  max-width: 620px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

@media (max-width: 1100px) {
  .meta-performance-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .meta-account-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .meta-account-strip,
  .meta-kpi-grid {
    grid-template-columns: 1fr;
  }

  .meta-performance-controls,
  .meta-performance-controls > * {
    width: 100%;
  }

  .meta-custom-date-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Authentication entry */
.app-shell.login-mode .workspace {
  min-height: 100vh;
  padding: 0;
}

.login-preview {
  width: min(100%, 1440px);
  min-height: 100vh;
  max-width: none;
  margin: 0 auto;
  padding: 28px clamp(24px, 5vw, 72px) 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  align-items: stretch;
  background: var(--bg);
}

.login-header,
.login-footer,
.login-brand,
.login-card-heading,
.login-security-note,
.login-feature-list > div {
  display: flex;
  align-items: center;
}

.login-header,
.login-footer {
  justify-content: space-between;
}

.login-brand {
  gap: 12px;
}

.login-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #11110f;
  color: #f0bc28;
  font-size: 1.05rem;
  font-weight: 900;
}

.login-brand div:last-child {
  display: grid;
  gap: 2px;
}

.login-brand strong {
  color: var(--text);
  font-size: 0.96rem;
  letter-spacing: -0.02em;
}

.login-brand span,
.login-footer {
  color: var(--muted);
  font-size: 0.74rem;
}

.login-layout {
  width: min(100%, 1180px);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
}

.login-copy {
  max-width: 660px;
}

.login-copy h1 {
  margin: 18px 0 22px;
  color: var(--text);
  font-size: clamp(4rem, 8vw, 7.4rem);
  font-weight: 760;
  letter-spacing: -0.075em;
  line-height: 0.88;
}

.login-copy .login-lede {
  max-width: 590px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}

.login-feature-list {
  display: grid;
  gap: 0;
  margin-top: 44px;
  border-top: 1px solid var(--line);
}

.login-feature-list > div {
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.login-feature-list > div > span {
  color: var(--accent-deep);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.login-feature-list p,
.login-security-note p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.login-feature-list strong,
.login-security-note strong {
  color: var(--text);
  font-size: 0.83rem;
}

.login-feature-list small,
.login-security-note small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.login-card {
  gap: 24px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.login-card-heading {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

.login-card-heading h2 {
  color: var(--text);
  font-size: clamp(1.85rem, 3vw, 2.65rem);
  letter-spacing: -0.055em;
  line-height: 1;
}

.login-card-heading > p:last-child {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.google-signin-button {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--text);
  color: var(--surface);
  font-weight: 760;
  transition: transform 160ms ease, opacity 160ms ease;
}

.google-signin-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.google-signin-button:focus-visible {
  outline: 3px solid rgba(240, 188, 40, 0.36);
  outline-offset: 3px;
}

.google-signin-button svg {
  width: 21px;
  height: 21px;
  padding: 2px;
  border-radius: 50%;
  background: #ffffff;
}

.login-security-note {
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.login-security-note > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #dff3e7;
  color: #11643f;
  font-size: 0.75rem;
  font-weight: 900;
}

.login-legal {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.55;
  text-align: center;
}

.login-footer {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

:root[data-theme="dark"] .google-signin-button {
  background: #f4f4ee;
  color: #171715;
}

:root[data-theme="dark"] .login-security-note > span {
  background: #183c2a;
  color: #9be6ba;
}

@media (max-width: 900px) {
  .login-layout {
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 28px 0;
  }

  .login-copy {
    max-width: 720px;
  }

  .login-copy h1 {
    font-size: clamp(3.8rem, 14vw, 6rem);
  }

  .login-feature-list {
    margin-top: 30px;
  }
}

@media (max-width: 560px) {
  .login-preview {
    padding: 20px 16px;
    gap: 18px;
  }

  .login-brand span,
  .login-footer span:last-child {
    display: none;
  }

  .login-copy h1 {
    margin-top: 14px;
    font-size: 3.55rem;
  }

  .login-card {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .login-footer {
    justify-content: center;
  }
}

.meta-campaign-table tbody:not(.meta-hierarchy-body) {
  display: none;
}

.meta-campaign-table th:last-child,
.meta-campaign-table td:last-child {
  position: sticky;
  right: 0;
  width: 58px;
  min-width: 58px;
  padding-left: 8px;
  padding-right: 8px;
  background: var(--surface);
  text-align: center;
}

.meta-branch-row td:first-child {
  position: relative;
}

.meta-campaign-row td {
  background: var(--surface);
}

.meta-adset-row td {
  background: var(--surface-2);
}

.meta-adset-row td:first-child {
  padding-left: 38px;
}

.meta-ad-row td {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  vertical-align: top;
}

.meta-ad-row td:first-child {
  min-width: 420px;
  padding-left: 54px;
}

.meta-entity-type {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.meta-branch-row td:first-child strong,
.meta-branch-row td:first-child small {
  display: block;
}

.meta-branch-row td:first-child small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.72rem;
}

.meta-fold-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 700;
}

.meta-fold-button:hover,
.meta-fold-button[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #211b0c;
}

.meta-ad-creative-cell {
  display: grid;
  grid-template-columns: 84px minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}

.meta-ad-creative-cell img,
.meta-ad-image-empty {
  width: 84px;
  height: 84px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  object-fit: cover;
}

.meta-ad-image-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.68rem;
}

.meta-ad-creative-cell p {
  display: -webkit-box;
  overflow: hidden;
  margin: 8px 0 0;
  color: var(--soft);
  font-size: 0.78rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.meta-ad-creative-cell em {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 750;
}

.meta-inherited-budget {
  color: var(--muted);
  font-size: 0.72rem;
}

.meta-leaf-mark {
  color: var(--muted);
}

/* Compact navigation, settings submenus, and on-demand Meta analysis */
.nav-icon {
  display: grid;
  place-items: center;
}

.nav-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-brand-mark.logo-mark {
  width: 112px;
  height: 58px;
  padding: 7px 10px;
  border-radius: 14px;
  background: #050505;
}

.login-brand-mark.logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-loading .login-brand-mark.logo-mark {
  width: 148px;
  height: 78px;
}

.settings-subnav {
  position: sticky;
  z-index: 20;
  top: 12px;
  display: flex;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.settings-subnav button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.settings-subnav button:hover,
.settings-subnav button.active {
  background: var(--surface-2);
  color: var(--text);
}

.threshold-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.threshold-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.threshold-group h4 {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--soft);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.threshold-row {
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 8px 12px;
  min-height: 64px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.threshold-row:last-child {
  border-bottom: 0;
}

.threshold-row strong {
  font-size: 0.82rem;
}

.threshold-row span {
  font-size: 0.68rem;
}

.threshold-row input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: 4px;
}

.threshold-value {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  min-width: 64px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.75rem;
  text-align: center;
}

.meta-ai-analysis {
  margin-top: 14px;
  padding: 0;
}

.meta-ai-analysis > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.meta-ai-analysis > summary::-webkit-details-marker {
  display: none;
}

.meta-ai-analysis > summary > span:first-child {
  display: grid;
  gap: 3px;
}

.meta-ai-analysis > summary strong {
  color: var(--text);
  font-size: 1rem;
}

.meta-ai-analysis > summary small {
  color: var(--muted);
}

.details-action {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 850;
}

.meta-ai-analysis[open] .details-action {
  font-size: 0;
}

.meta-ai-analysis[open] .details-action::after {
  content: "Collapse";
  font-size: 0.74rem;
}

.meta-ai-analysis-body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--line);
}

.client-account-assets {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.client-account-assets-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.client-account-assets-heading h4,
.client-account-assets-heading p {
  margin: 0;
}

.client-account-assets-heading h4 {
  color: var(--text);
  font-size: 0.95rem;
}

.client-account-assets-heading p:last-child,
.client-account-assets-summary > span {
  color: var(--muted);
  font-size: 0.74rem;
}

.client-account-assets-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-account-assets-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.client-account-assets-summary {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.client-account-assets .connection-actions {
  min-width: 148px;
}

@media (max-width: 760px) {
  .client-account-assets-heading,
  .client-account-assets-status {
    align-items: stretch;
    flex-direction: column;
  }

  .client-account-assets-grid {
    grid-template-columns: 1fr;
  }

  .client-account-assets .connection-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }
}

/* Brand marks, actionable to-dos, and Spesos wallet. */
.brand-logo-plate,
.login-brand-mark.logo-mark {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brand-logo-plate {
  min-height: 82px;
  padding: 5px 2px;
}

.brand-logo-plate img {
  width: 100%;
  height: 74px;
  object-fit: contain;
}

:root[data-theme="dark"] .brand-logo-plate {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: #ffffff;
}

.auth-loading .login-brand-mark.logo-mark {
  width: 104px;
  height: 104px;
  padding: 0;
}

.auth-loading .login-brand-mark.logo-mark img,
.login-card-mark {
  border-radius: 50%;
  object-fit: cover;
}

.login-header {
  justify-content: flex-end;
}

.login-card-mark {
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(39, 29, 66, 0.12);
}

.login-footer {
  justify-content: flex-start;
}

.todo-card {
  align-content: start;
  gap: 12px;
}

.todo-heading {
  align-items: center;
}

.todo-add-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
}

.todo-add-button:hover {
  background: var(--accent-deep);
  color: #fff;
  transform: rotate(90deg);
}

.todo-progress {
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
}

.todo-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 220ms ease;
}

.todo-list {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow-y: auto;
}

.todo-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.todo-check {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 50%;
  background: var(--surface);
  color: #fff;
  font-weight: 900;
}

.todo-item.completed .todo-check {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
}

.todo-open {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.todo-open strong,
.todo-open small {
  display: block;
}

.todo-open small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
}

.todo-item.completed .todo-open strong {
  color: var(--muted);
  text-decoration: line-through;
}

.todo-empty {
  display: grid;
  gap: 3px;
  padding: 22px 12px;
  color: var(--muted);
  text-align: center;
}

.todo-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 14px;
  background: var(--surface-2);
  animation: view-enter 180ms ease;
}

.todo-editor-heading,
.todo-editor-actions,
.todo-editor-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.todo-editor-heading,
.todo-editor-actions {
  justify-content: space-between;
}

.todo-editor-heading button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
}

.todo-editor label {
  display: grid;
  flex: 1;
  gap: 5px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.todo-editor input,
.todo-editor select,
.todo-editor textarea {
  width: 100%;
  text-transform: none;
}

.bonusly-card {
  align-content: start;
  gap: 14px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.bonusly-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bonusly-heading > div > span,
.bonusly-heading > div > strong {
  display: block;
}

.bonusly-heading strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 1.5rem;
}

.bonusly-orbit {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 900;
}

.bonusly-card > p {
  margin: 0;
  color: var(--muted);
}

.bonusly-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bonusly-stats div {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.bonusly-stats strong,
.bonusly-stats small,
.bonusly-activity strong,
.bonusly-activity small {
  display: block;
}

.bonusly-stats strong {
  color: var(--text);
  font-size: 1.05rem;
}

.bonusly-stats small,
.bonusly-tip,
.bonusly-activity small {
  color: var(--muted);
  font-size: 0.68rem;
}

.bonusly-activity {
  display: grid;
  gap: 7px;
}

.bonusly-activity div {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 560px) {
  .todo-editor-row,
  .todo-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .todo-editor-actions button {
    width: 100%;
  }
}

/* Reference-inspired visual system: quiet glass-like structure without gradients. */
:root,
:root[data-theme="light"] {
  --bg: #f5f3f8;
  --surface: #ffffff;
  --surface-2: #f8f7fb;
  --surface-3: #eeebf5;
  --line: #ddd8e8;
  --line-soft: rgba(35, 28, 48, 0.08);
  --text: #18141f;
  --muted: #716a7d;
  --soft: #3b3545;
  --accent: #7658d7;
  --accent-2: #513b9b;
  --accent-deep: #5e42bd;
  --violet: #7658d7;
  --shadow: 0 16px 44px rgba(39, 29, 66, 0.07);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #090a0b;
  --surface: #111315;
  --surface-2: #181b1e;
  --surface-3: #22262a;
  --line: #34393e;
  --line-soft: rgba(245, 247, 248, 0.09);
  --text: #f5f6f7;
  --muted: #aeb4ba;
  --soft: #dfe3e6;
  --accent: #f4c84a;
  --accent-2: #ffe8a0;
  --accent-deep: #c79813;
  --violet: #f4c84a;
  --shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
  color-scheme: dark;
}

body {
  background: var(--bg);
}

.sidebar {
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
}

.user-card {
  margin-top: auto;
}

.nav-item,
.nav-icon,
.quick-theme-toggle button,
.primary-button,
.secondary-button,
.quiet-button,
.metric-card,
.home-card,
.board-card,
.settings-card,
.client-context-panel,
.chart-card,
.table-section {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.nav-item {
  border: 1px solid transparent;
}

.nav-item:hover {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transform: translateX(2px);
}

.nav-item.active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 10%, transparent);
}

.nav-item.active .nav-icon {
  color: var(--accent);
}

.section-kicker,
.brand-eyebrow,
.panel-label {
  color: var(--accent-2);
}

.primary-button {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: #ffffff;
}

.primary-button:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 22%, transparent);
}

.secondary-button:hover,
.quiet-button:hover,
.file-upload-button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text);
}

.metric-card,
.chart-card,
.table-section,
.settings-card,
.client-context-panel,
.alert-detail,
.board-column,
.home-card,
.home-hero,
.meta-performance-toolbar,
.meta-ai-analysis {
  border-color: var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric-card:hover,
.home-card:hover,
.board-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 10%, transparent);
}

.board-column.red,
.board-column.yellow,
.board-column.green,
.board-column.testing {
  background: var(--surface);
}

.board-card,
:root[data-theme="light"] .board-card {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--soft);
}

.board-card.selected,
:root[data-theme="light"] .board-card.selected {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 10%, transparent);
}

.quick-theme-toggle,
.segmented,
.settings-subnav {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
}

.quick-theme-toggle button.active,
.segmented button.active,
.settings-subnav button.active {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 78%, white);
  outline-offset: 2px;
}

.view-panel:not(.hidden) {
  animation: view-enter 220ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

.board-card-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.live-campaign-badge {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: color-mix(in srgb, var(--green) 74%, var(--text));
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes view-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1100px) {
  .threshold-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .threshold-list {
    grid-template-columns: 1fr;
  }

  .meta-ai-analysis > summary,
  .meta-ai-analysis-body .card-heading,
  .inline-ai-action {
    align-items: stretch;
    flex-direction: column;
  }

  .details-action {
    align-self: flex-start;
  }
}

/* Final cascade for the July workspace polish. */
.app-shell .topbar {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow: 0 12px 35px color-mix(in srgb,var(--accent) 6%,transparent);
  backdrop-filter: blur(18px);
}
.app-shell .topbar-title { display:flex; align-items:center; gap:12px; min-width:max-content; }
.app-shell .topbar-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:color-mix(in srgb,var(--accent) 10%,var(--surface-2)); overflow:hidden; }
.app-shell .topbar-mark img { width:54px; height:54px; object-fit:cover; clip-path:circle(39%); transform:scale(1.2); }
.app-shell .topbar-title h2 { font-size:clamp(1.25rem,2vw,1.85rem); }
.app-shell .topbar .control-row { margin-left:auto; }
.app-shell .topbar.view-header-hidden { display:none; }
.app-shell.view-header-hidden .workspace { padding-top:14px; }
.app-shell .brand-logo-plate { overflow:hidden; border-radius:18px; }
:root[data-theme="dark"] .app-shell .brand-logo-plate { border-color:color-mix(in srgb,var(--accent) 24%,var(--line)); background:color-mix(in srgb,#fff 94%,var(--accent)); box-shadow:inset 0 -8px 24px rgba(118,88,215,.08),0 10px 28px rgba(0,0,0,.16); }
.app-shell.sidebar-collapsed { grid-template-columns:84px minmax(0,1fr); }
.app-shell.sidebar-collapsed .brand-logo-plate { width:56px; min-height:56px; margin-inline:auto; padding:0; border:0; border-radius:50%; background:transparent; box-shadow:none; }
.app-shell.sidebar-collapsed .brand-logo-plate img { content:url('./assets/spotlight-mark.png'); width:56px; height:56px; clip-path:circle(40%); transform:scale(1.22); }
.app-shell button,.app-shell .primary-button,.app-shell .secondary-button,.app-shell .quiet-button,.app-shell .file-upload-button { font-size:.78rem; line-height:1.15; }
.app-shell .primary-button,.app-shell .secondary-button,.app-shell .quiet-button,.app-shell .file-upload-button { min-height:34px; padding:8px 12px; }
.app-shell .compact-button { min-height:30px; padding:6px 10px; font-size:.72rem; }
.app-shell .client-account-assets-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
.app-shell .client-account-assets-summary { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
.app-shell .client-account-assets-summary > .data-health,.app-shell .client-account-assets-summary > .asset-status,.app-shell .client-account-assets-summary > .asset-inventory,.app-shell .client-account-assets-summary > .client-asset-preview,.app-shell .client-account-assets-summary > .client-asset-links { grid-column:1/-1; }
.app-shell .client-account-assets .connection-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; min-width:0; padding-top:10px; border-top:1px solid var(--line); }
.app-shell .client-asset-preview { max-width:none; }
.app-shell .settings-disclosure { padding:0 !important; overflow:hidden; }
.app-shell .settings-disclosure > summary { cursor:pointer; list-style:none; padding:18px 20px; margin:0; }
.app-shell .settings-disclosure > summary::-webkit-details-marker { display:none; }
.app-shell .settings-disclosure-body { padding:0 20px 20px; border-top:1px solid var(--line); }
.app-shell .provider-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-top:14px; }
.app-shell .provider-option { min-height:68px; padding:10px 12px; border-radius:14px; }
.app-shell .openai-model-settings { grid-column:1/-1; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); overflow:hidden; }
.app-shell .model-routing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px; border-top:1px solid var(--line); }
.app-shell .copy-template-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-top:14px; }
.app-shell .copy-template-group { display:grid; gap:10px; align-content:start; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.app-shell .copy-template-input { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
@media (max-width:1100px) { .app-shell .topbar { flex-wrap:wrap; } .app-shell .topbar .control-row { order:3; width:100%; margin-left:0; } .app-shell .client-account-assets-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  .app-shell.sidebar-collapsed { grid-template-columns:1fr; }
  .app-shell .topbar { border-radius:14px; padding:11px; }
  .app-shell .client-account-assets-summary,.app-shell .provider-list,.app-shell .copy-template-list,.app-shell .model-routing-grid { grid-template-columns:1fr; }
  .app-shell .client-account-assets .connection-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-shell .settings-disclosure > summary { padding:14px; }
  .app-shell .settings-disclosure-body { padding:0 14px 14px; }
}

/* Final cascade: July navigation and workspace controls */
.app-shell .sidebar { background:#0d0c12; border-right-color:rgba(255,255,255,.08); color:#f8f7fb; }
.app-shell .brand-logo-plate,
:root[data-theme="dark"] .app-shell .brand-logo-plate { width:100%; min-height:82px; padding:12px 14px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:#000; box-shadow:0 18px 40px rgba(0,0,0,.28); }
.app-shell .brand-logo-plate img { width:100%; height:58px; object-fit:contain; }
.app-shell .nav-stack { gap:6px; }
.app-shell .nav-item { position:relative; min-height:44px; padding:0 12px; border:0; border-radius:12px; color:rgba(255,255,255,.68); background:transparent; box-shadow:none; transition:color 180ms ease,background 180ms ease,transform 180ms ease; }
.app-shell .nav-item:hover { color:#fff; background:rgba(255,255,255,.055); transform:translateX(2px); }
.app-shell .nav-item.active { color:#fff; background:rgba(122,88,220,.13); box-shadow:none; }
.app-shell .nav-item.active::before { content:""; position:absolute; left:0; top:11px; bottom:11px; width:3px; border-radius:3px; background:#9d7cff; box-shadow:0 0 14px rgba(157,124,255,.75); }
.app-shell .nav-icon { width:24px; height:24px; padding:3px; border:0; border-radius:0; color:currentColor; background:transparent; }
.app-shell .nav-icon svg { width:18px; height:18px; }
.app-shell .nav-item.active .nav-icon { color:#bca9ff; filter:drop-shadow(0 0 8px rgba(157,124,255,.45)); }
.app-shell.sidebar-collapsed .brand-logo-plate,
:root[data-theme="dark"] .app-shell.sidebar-collapsed .brand-logo-plate { width:58px; min-height:58px; padding:0; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:#000; }
.app-shell.sidebar-collapsed .brand-logo-plate img { content:url('./assets/spotlight-mark.png'); width:58px; height:58px; object-fit:cover; clip-path:circle(39%); transform:scale(1.28); }
.app-shell .home-hero { position:relative; min-height:230px; padding:32px; overflow:hidden; border-color:color-mix(in srgb,var(--accent) 20%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,var(--accent)),var(--surface)); box-shadow:0 24px 60px rgba(10,8,18,.08); }
.app-shell .home-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 18% 35%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 30%); }
.app-shell .home-profile,.app-shell .home-weather-card { position:relative; z-index:1; }
.app-shell .home-profile img { width:84px; height:84px; border-radius:24px; border:3px solid color-mix(in srgb,var(--accent) 28%,var(--surface)); box-shadow:0 16px 32px rgba(0,0,0,.16); }
.app-shell .home-weather-card { backdrop-filter:blur(12px); background:color-mix(in srgb,var(--surface) 84%,transparent); }
.app-shell .meta-performance-toolbar { position:sticky; z-index:20; top:12px; padding:18px 20px; backdrop-filter:blur(18px); background:color-mix(in srgb,var(--surface) 91%,transparent); box-shadow:0 14px 38px rgba(0,0,0,.12); }
@media (max-width:760px) {
  .app-shell .brand-logo-plate,:root[data-theme="dark"] .app-shell .brand-logo-plate { width:auto; min-height:56px; padding:6px 12px; }
  .app-shell .brand-logo-plate img { width:142px; height:44px; }
  .app-shell .home-hero { padding:22px 18px; }
  .app-shell .home-profile img { width:66px; height:66px; border-radius:19px; }
  .app-shell .meta-performance-toolbar { position:relative; top:auto; }
  .app-shell .template-grid.compact { display:grid; grid-template-columns:1fr; gap:12px; }
}

/* Theme contrast correction and simplified workspace header */
.app-shell .topbar-title { gap:0; }
.app-shell .topbar-mark { display:none; }

:root[data-theme="light"] .app-shell .sidebar {
  background:#fbfafc;
  border-right-color:#e5e0eb;
  color:#201b29;
}
:root[data-theme="light"] .app-shell .nav-item {
  color:#5d5668;
}
:root[data-theme="light"] .app-shell .nav-item:hover {
  color:#211b2b;
  background:#f0edf5;
}
:root[data-theme="light"] .app-shell .nav-item.active {
  color:#20172d;
  background:#eee8fa;
}
:root[data-theme="light"] .app-shell .nav-item.active .nav-icon {
  color:#6246bf;
  filter:none;
}
:root[data-theme="light"] .app-shell .nav-badge {
  color:#8d2448;
  background:#f8dce7;
}
:root[data-theme="light"] .app-shell .sidebar-collapse-toggle,
:root[data-theme="light"] .app-shell .mobile-nav-toggle {
  color:#30283d;
  background:#fff;
  border-color:#ded8e7;
}
:root[data-theme="light"] .app-shell .sidebar-theme {
  border-top-color:#e7e2ed;
}
:root[data-theme="light"] .app-shell .sidebar-theme-label {
  color:#81798c;
}
:root[data-theme="light"] .app-shell .sidebar-theme-track {
  border-color:#ded8e7;
  background:#efecf4;
}
:root[data-theme="light"] .app-shell .sidebar-theme button {
  color:#6b6377;
}
:root[data-theme="light"] .app-shell .sidebar-theme button.active {
  color:#211b2b;
}
:root[data-theme="light"] .app-shell .user-card {
  border-color:#ded8e7;
  color:#211b2b;
}
:root[data-theme="light"] .app-shell .user-card strong,
:root[data-theme="light"] .app-shell .user-card span,
:root[data-theme="light"] .app-shell .logout-button {
  color:#3b3446;
}
:root[data-theme="light"] .app-shell .home-card,
:root[data-theme="light"] .app-shell .connection-card,
:root[data-theme="light"] .app-shell .settings-card {
  color:var(--text);
}

/* Theme-aware Spotlight logo assets */
.app-shell .brand-logo-plate .brand-logo-theme { width:100%; height:58px; object-fit:contain; transform:none; clip-path:none; }
.app-shell .brand-logo-on-light { display:none; }
.app-shell .brand-logo-on-dark { display:block; }
:root[data-theme="light"] .app-shell .brand-logo-plate { background:#fff; border-color:#e3dde9; box-shadow:0 16px 34px rgba(31,24,42,.1); }
:root[data-theme="light"] .app-shell .brand-logo-on-light { display:block; }
:root[data-theme="light"] .app-shell .brand-logo-on-dark { display:none; }
:root[data-theme="dark"] .app-shell .brand-logo-plate { background:#000; }
.app-shell.sidebar-collapsed .brand-logo-plate .brand-logo-theme { display:none; }
.app-shell.sidebar-collapsed .brand-logo-plate::after { content:""; display:block; width:58px; height:58px; background:url('./assets/spotlight-mark.png') center/74px 74px no-repeat; }

/* Completed-task housekeeping */
.todo-heading-actions { display:flex; align-items:center; gap:8px; }
.todo-clear-button { min-height:30px!important; padding:6px 9px!important; border:0; background:transparent; color:var(--muted); font-size:.68rem!important; font-weight:750; }
.todo-clear-button:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); }

/* Bonusly activity dashboard */
.bonusly-card { min-height:360px; }
.bonusly-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.bonusly-month { display:grid; gap:7px; }
.bonusly-month > span { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:.68rem; }
.bonusly-month em { font-style:normal; }
.bonusly-month > div { height:7px; overflow:hidden; border-radius:999px; background:var(--surface-3); }
.bonusly-month i { display:block; height:100%; border-radius:inherit; background:#20b765; }
.bonusly-activity { align-content:start; }
.bonusly-activity > span { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.bonusly-activity a { display:grid; gap:2px; padding:8px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
.bonusly-activity a:hover strong { color:var(--accent); }
.bonusly-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:4px; }
.bonusly-actions small { color:var(--muted); font-size:.65rem; }

@media (max-width:560px) {
  .todo-heading { align-items:flex-start; }
  .todo-heading-actions { align-items:flex-end; flex-direction:column-reverse; }
  .bonusly-stats { grid-template-columns:1fr; }
  .bonusly-actions { align-items:flex-start; flex-direction:column; }
}

/* Brand wordmarks replace the cropped crescent treatment */
.brand-loader { position:relative; width:250px; height:96px; padding:16px 24px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:0 20px 55px rgba(0,0,0,.18); overflow:hidden; animation:brand-loader-float 2.4s ease-in-out infinite; }
.brand-loader .loader-logo { width:100%; height:100%; object-fit:contain; clip-path:none; transform:none; }
.brand-loader .loader-logo-on-light { display:none; }
.brand-loader .loader-logo-on-dark { display:block; }
:root[data-theme="light"] .brand-loader .loader-logo-on-light { display:block; }
:root[data-theme="light"] .brand-loader .loader-logo-on-dark { display:none; }
.loader-sheen { position:absolute; inset:-40% auto -40% -45%; width:12%; transform:rotate(14deg); background:rgba(255,255,255,.24); filter:blur(9px); animation:brand-loader-sheen 2.2s ease-in-out infinite; }
@keyframes brand-loader-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes brand-loader-sheen { 0%,20%{left:-45%} 70%,100%{left:125%} }

.app-shell.sidebar-collapsed .brand-logo-plate,
:root[data-theme="dark"] .app-shell.sidebar-collapsed .brand-logo-plate,
:root[data-theme="light"] .app-shell.sidebar-collapsed .brand-logo-plate { display:grid; place-items:center; width:68px; min-height:54px; padding:5px; border-radius:13px; }
.app-shell.sidebar-collapsed .brand-logo-plate .brand-logo-theme { display:none!important; }
.app-shell.sidebar-collapsed .brand-logo-plate::after { content:""; display:block; width:54px; height:44px; background:url('./assets/spotlight-logo-neutral.png') left 3px center/330px auto no-repeat; }
:root[data-theme="dark"] .app-shell.sidebar-collapsed .brand-logo-plate::after { background-image:url('./assets/spotlight-logo-dark.png'); }

/* Home integration identities */
.integration-card-title { display:flex; align-items:center; gap:9px; }
.integration-card-title img { width:28px; height:28px; padding:4px; border:1px solid var(--line); border-radius:9px; background:#fff; object-fit:contain; }
.integration-card-title span { color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }

/* Task rows keep destructive actions predictable and local */
.todo-item { grid-template-columns:28px minmax(0,1fr) 30px; }
.todo-delete-row { display:grid; place-items:center; width:30px; height:30px; min-height:30px!important; padding:6px!important; border:0; border-radius:9px; background:transparent; color:var(--muted); opacity:.55; transition:opacity 160ms ease,color 160ms ease,background 160ms ease; }
.todo-delete-row svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.todo-item:hover .todo-delete-row,.todo-delete-row:focus-visible { opacity:1; }
.todo-delete-row:hover { color:#d45467; background:rgba(212,84,103,.1); }

/* Breathing room for recognition activity */
.bonusly-card { gap:16px; }
.bonusly-activity { gap:9px; }
.bonusly-activity a { padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.bonusly-activity a:last-child { border-bottom:1px solid var(--line); }
.bonusly-activity strong { margin-bottom:4px; line-height:1.3; }
.bonusly-activity small { line-height:1.5; overflow-wrap:anywhere; }

/* Compact client context hierarchy */
.client-context-panel { padding:0; overflow:hidden; }
.client-context-header { padding:18px 20px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface-2) 78%,transparent); }
.client-context-header > div:first-child { display:flex; align-items:center; flex-wrap:wrap; column-gap:10px; }
.client-context-header .section-kicker { flex-basis:100%; }
.client-source-badge { padding:5px 8px; border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line)); border-radius:999px; color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); font-size:.63rem; font-weight:800; }
.client-context-body { display:grid; grid-template-columns:1fr; gap:0; padding:0; }
.client-context-summary { display:grid; grid-template-columns:minmax(180px,.55fr) minmax(360px,1fr); gap:14px; align-items:center; padding:14px 20px; }
.client-context-summary .status-select-wrap { align-self:center; }
.client-quick-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.client-quick-links .quick-link-button { min-height:38px; }
.team-owner-table { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.team-owner-row { min-height:44px; }
.client-account-assets { margin:0; padding:18px 20px; border-width:1px 0 0; border-radius:0; background:color-mix(in srgb,var(--surface-2) 45%,transparent); }

@media (max-width:1100px) {
  .client-context-summary { grid-template-columns:1fr 1.4fr; }
}
@media (max-width:720px) {
  .brand-loader { width:min(250px,82vw); }
  .client-context-summary { grid-template-columns:1fr; padding:14px; }
  .client-account-assets { padding:14px; }
}
@media (max-width:560px) {
  .client-quick-links,.team-owner-table { grid-template-columns:1fr; }
}

/* Final logo alignment: full wordmarks, no translucent logo chip */
.app-shell .client-account-assets-grid { grid-template-columns:minmax(0,1.45fr) minmax(220px,.55fr); gap:18px; }
.app-shell .client-account-assets-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; }
.app-shell .client-account-assets-summary > span:nth-child(2), .app-shell .client-account-assets-summary > span:nth-child(3) { min-height:34px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--surface) 45%,transparent); }
.app-shell .client-account-assets .connection-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-content:start; padding:0; border:0; }
.app-shell .client-account-assets .connection-actions .client-color-editor { grid-column:1/-1; }
.meta-account-control { min-width:260px; }

@media (max-width:760px) {
  .app-shell .client-account-assets-grid { grid-template-columns:1fr; }
  .app-shell .client-account-assets-summary { grid-template-columns:1fr; }
  .app-shell .client-account-assets-summary > span:nth-child(2), .app-shell .client-account-assets-summary > span:nth-child(3) { min-height:0; }
}

.brand-loader { display:flex; align-items:center; justify-content:center; width:270px; height:82px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.brand-loader .loader-logo { width:250px; height:76px; object-fit:contain; }
.loader-sheen { display:none; }
.auth-loading { justify-items:center; text-align:center; }

.app-shell.sidebar-collapsed .brand-logo-plate,
:root[data-theme="dark"] .app-shell.sidebar-collapsed .brand-logo-plate,
:root[data-theme="light"] .app-shell.sidebar-collapsed .brand-logo-plate { width:70px; min-height:52px; padding:5px 3px; overflow:hidden; }
.app-shell.sidebar-collapsed .brand-logo-plate::after { display:none; }
.app-shell.sidebar-collapsed .brand-logo-plate .brand-logo-theme { width:64px; height:38px; object-fit:contain; clip-path:none; transform:none; }
:root[data-theme="light"] .app-shell.sidebar-collapsed .brand-logo-plate .brand-logo-on-light { display:block!important; }
:root[data-theme="light"] .app-shell.sidebar-collapsed .brand-logo-plate .brand-logo-on-dark { display:none!important; }
:root[data-theme="dark"] .app-shell.sidebar-collapsed .brand-logo-plate .brand-logo-on-dark { display:block!important; }
:root[data-theme="dark"] .app-shell.sidebar-collapsed .brand-logo-plate .brand-logo-on-light { display:none!important; }

/* Zoho-first Clients Dashboard */
.zoho-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:18px; margin-bottom:18px; }
.zoho-ads-card { min-height:260px; }
.zoho-account-card:not(.is-collapsed) { min-height:0; }
.zoho-account-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:4px 0 16px; border-bottom:1px solid var(--line); }
.zoho-account-hero h3 { margin:8px 0 4px; font-size:clamp(1.45rem,2.5vw,2.2rem); }
.zoho-account-hero p { margin:0; color:var(--muted); }
.zoho-account-hero a:not(.secondary-button) { color:var(--accent); overflow-wrap:anywhere; }
.zoho-role-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.zoho-role-grid article,
.zoho-ads-list div { min-height:70px; padding:13px 14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.zoho-role-grid span,
.zoho-ads-list span { display:block; margin-bottom:6px; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.zoho-role-grid strong,
.zoho-ads-list strong { display:block; color:var(--text); line-height:1.25; overflow-wrap:anywhere; }
.zoho-role-grid small { display:block; margin-top:4px; color:var(--muted); overflow-wrap:anywhere; }
.zoho-ads-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.zoho-ads-list div:first-child { grid-column:1/-1; min-height:60px; border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); background:color-mix(in srgb,var(--accent) 8%,var(--surface-2)); }
.zoho-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.zoho-service-grid article { min-height:64px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.zoho-service-grid span { display:block; margin-bottom:5px; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.zoho-service-grid strong { display:block; overflow-wrap:anywhere; }
.zoho-service-wide { grid-column:1/-1; }
.zoho-account-table td:first-child { min-width:240px; }
.zoho-account-table td strong { display:block; }
.zoho-account-table td small { display:block; margin-top:4px; color:var(--muted); overflow-wrap:anywhere; }
.zoho-account-table tr[data-zoho-client-row] { cursor:pointer; transition:background 160ms ease, transform 160ms ease; }
.zoho-account-table tr[data-zoho-client-row]:hover { background:color-mix(in srgb,var(--accent) 7%,transparent); }
.zoho-account-table .status-pill { display:inline-flex; align-items:center; min-height:24px; padding:4px 9px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:999px; background:color-mix(in srgb,var(--accent) 8%,transparent); color:var(--text); font-size:.72rem; font-weight:800; }
.empty-zoho-state { display:grid; align-content:center; min-height:160px; padding:18px; border:1px dashed var(--line); border-radius:18px; background:var(--surface-2); }
.empty-zoho-state.needs-reconnect { gap:12px; border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--surface-2)); }
.empty-zoho-state .primary-button { width:max-content; }
.api-connection-grid article.needs-reconnect { border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.api-connection-grid article.needs-reconnect .connection-dot { background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent); }
.connection-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.connection-card-actions .secondary-button { flex:1 1 120px; min-height:34px; text-align:center; }

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

@media (max-width:680px) {
  .zoho-role-grid,
  .zoho-ads-list,
  .zoho-service-grid { grid-template-columns:1fr; }
  .zoho-service-wide { grid-column:auto; }
  .zoho-account-hero { flex-direction:column; }
  .zoho-account-hero .secondary-button { width:100%; }
}

/* Client dashboard platform cards */
.zoho-dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.zoho-combined-card { grid-column:1 / -1; }
.zoho-combined-divider { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 10px; padding-top:16px; border-top:1px solid var(--line); }
.zoho-combined-divider span { color:var(--text); font-size:.78rem; font-weight:850; }
.zoho-combined-divider small { color:var(--muted); font-size:.66rem; }
.zoho-advertising-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.zoho-advertising-grid article { min-width:0; padding:12px 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); transition:transform 160ms ease,border-color 160ms ease,background 160ms ease; }
.zoho-advertising-grid article:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 36%,var(--line)); background:color-mix(in srgb,var(--accent) 5%,var(--surface-2)); }
.zoho-advertising-grid span { display:block; margin-bottom:5px; color:var(--muted); font-size:.61rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.zoho-advertising-grid strong { display:block; overflow-wrap:anywhere; color:var(--text); font-size:.8rem; line-height:1.35; }
.zoho-advertising-grid article:nth-last-child(2) { grid-column:span 2; }
.meta-client-card,
.mailchimp-client-card,.brevo-client-card,.mailerlite-client-card { min-height:0; }
.dashboard-section-card { overflow:hidden; transition:min-height 220ms ease,height 220ms ease,border-color 180ms ease,background 180ms ease,transform 180ms ease; }
.dashboard-section-card:hover { border-color:color-mix(in srgb,var(--accent) 24%,var(--line)); }
.dashboard-section-card > .card-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.dashboard-section-heading-content { display:flex; align-items:center; gap:11px; min-width:0; }
.dashboard-section-heading-content > div { min-width:0; }
.dashboard-card-toggle { display:inline-flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--text); cursor:pointer; transition:background 160ms ease,border-color 160ms ease,transform 160ms ease; }
.dashboard-card-toggle:hover { border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); background:color-mix(in srgb,var(--accent) 8%,var(--surface-2)); transform:translateY(-1px); }
.dashboard-card-toggle svg { width:17px; height:17px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform 180ms ease; }
.dashboard-card-toggle.is-expanded svg { transform:rotate(180deg); }
.collapsed-card-summary { display:none; margin:4px 0 0; color:var(--muted); font-size:.76rem; font-weight:700; }
.dashboard-connection-indicator { display:none; align-items:center; gap:7px; margin-left:auto; padding:5px 9px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface-2) 88%,transparent); color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.025em; white-space:nowrap; }
.dashboard-connection-dot { width:7px; height:7px; border-radius:999px; background:var(--muted); box-shadow:0 0 0 3px color-mix(in srgb,var(--muted) 12%,transparent); }
.dashboard-connection-indicator.is-connected { border-color:color-mix(in srgb,#20b765 24%,var(--line)); color:color-mix(in srgb,#20b765 76%,var(--text)); }
.dashboard-connection-indicator.is-connected .dashboard-connection-dot { background:#20b765; box-shadow:0 0 0 3px color-mix(in srgb,#20b765 14%,transparent); }
.dashboard-health-center { position:relative; }
.dashboard-health-center > summary { display:flex; align-items:center; gap:7px; min-height:40px; padding:8px 11px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); cursor:pointer; list-style:none; font-size:.73rem; font-weight:800; }
.dashboard-health-center > summary::-webkit-details-marker { display:none; }
.dashboard-health-center > summary small { color:var(--muted); font-size:.62rem; font-weight:750; }
.dashboard-health-dot { width:8px; height:8px; flex:0 0 8px; border-radius:999px; background:var(--muted); }
.dashboard-health-dot.is-healthy,.dashboard-health-center > summary .is-healthy { background:#20b765; box-shadow:0 0 0 3px color-mix(in srgb,#20b765 14%,transparent); }
.dashboard-health-dot.has-attention,.dashboard-health-center > summary .has-attention { background:#e8a52b; box-shadow:0 0 0 3px color-mix(in srgb,#e8a52b 14%,transparent); }
.dashboard-health-popover { position:absolute; z-index:50; top:calc(100% + 8px); right:0; width:min(380px,calc(100vw - 32px)); padding:10px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 18px 42px rgba(0,0,0,.22); }
.dashboard-health-popover header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 4px 9px; }
.dashboard-health-popover header div { display:grid; gap:2px; }
.dashboard-health-popover header small { color:var(--muted); font-size:.66rem; }
.dashboard-health-popover header button { padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); font-size:.67rem; font-weight:800; cursor:pointer; }
.dashboard-health-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto auto; align-items:center; gap:9px; min-height:42px; padding:7px 5px; border-top:1px solid var(--line); }
.dashboard-health-row > div { display:grid; min-width:0; }
.dashboard-health-row strong { color:var(--text); font-size:.72rem; }
.dashboard-health-row small { overflow:hidden; color:var(--danger,#e5505f); font-size:.6rem; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-health-row time { color:var(--muted); font-size:.63rem; white-space:nowrap; }
.dashboard-health-row > button { padding:6px 8px; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--accent) 8%,var(--surface-2)); color:var(--text); font-size:.61rem; font-weight:850; cursor:pointer; }
.dashboard-health-row.is-fresh > .dashboard-health-dot,.dashboard-health-row.is-healthy > .dashboard-health-dot { background:#20b765; }
.dashboard-health-row.is-aging > .dashboard-health-dot,.dashboard-health-row.is-retrying > .dashboard-health-dot,.dashboard-health-row.is-shared > .dashboard-health-dot,.dashboard-health-row.is-syncing > .dashboard-health-dot { background:#e8a52b; }
.dashboard-health-row.is-stale > .dashboard-health-dot,.dashboard-health-row.is-error > .dashboard-health-dot { background:#e5505f; }
.dashboard-readiness { position:relative; z-index:34; }
.dashboard-readiness > summary { display:flex; align-items:center; gap:7px; min-height:40px; padding:8px 11px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); cursor:pointer; list-style:none; font-size:.73rem; font-weight:800; }
.dashboard-readiness > summary::-webkit-details-marker { display:none; }
.dashboard-readiness > summary small { color:var(--muted); font-size:.62rem; font-weight:750; white-space:nowrap; }
.dashboard-readiness-ring { display:grid; place-items:center; width:19px; height:19px; flex:0 0 19px; border:2px solid #20b765; border-radius:999px; color:#20b765; font-size:.57rem; line-height:1; }
.dashboard-readiness-ring.has-attention { border-color:#e8a52b; color:#e8a52b; }
.dashboard-readiness-popover { position:absolute; z-index:52; top:calc(100% + 8px); right:0; width:min(410px,calc(100vw - 32px)); padding:11px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 18px 42px rgba(0,0,0,.22); }
.dashboard-readiness-popover header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 4px 10px; }
.dashboard-readiness-popover header > div { display:grid; gap:2px; min-width:0; }
.dashboard-readiness-popover header small { overflow:hidden; color:var(--muted); font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-readiness-popover header > span { padding:5px 8px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:.62rem; font-weight:800; white-space:nowrap; }
.dashboard-readiness-progress { height:4px; margin:0 4px 5px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--muted) 18%,transparent); }
.dashboard-readiness-progress i { display:block; height:100%; border-radius:inherit; background:#20b765; transition:width 180ms ease; }
.dashboard-readiness-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:48px; padding:7px 4px; border-top:1px solid var(--line); }
.dashboard-readiness-status { display:grid; place-items:center; width:18px; height:18px; border-radius:999px; background:color-mix(in srgb,#20b765 15%,transparent); color:#20b765; font-size:.62rem; font-weight:900; }
.dashboard-readiness-row.is-attention .dashboard-readiness-status { background:color-mix(in srgb,#e8a52b 15%,transparent); color:#e8a52b; }
.dashboard-readiness-row.is-not-required .dashboard-readiness-status { background:color-mix(in srgb,var(--muted) 12%,transparent); color:var(--muted); }
.dashboard-readiness-row > div { display:grid; gap:2px; min-width:0; }
.dashboard-readiness-row strong { color:var(--text); font-size:.72rem; }
.dashboard-readiness-row small { overflow:hidden; color:var(--muted); font-size:.63rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-readiness-row button { padding:6px 9px; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--accent) 8%,var(--surface-2)); color:var(--text); font-size:.63rem; font-weight:850; cursor:pointer; }
.dashboard-section-card.is-collapsed { height:92px; min-height:92px; padding-top:14px; padding-bottom:14px; }
.dashboard-section-card.is-collapsed > .card-heading { height:100%; margin:0; }
.dashboard-section-card.is-collapsed .dashboard-section-body { display:none; }
.dashboard-section-card.is-collapsed .collapsed-card-summary { display:block; }
.dashboard-section-card.is-collapsed .dashboard-connection-indicator { display:inline-flex; }
.dashboard-section-card.is-collapsed .integration-brand-icon { width:34px; height:34px; flex-basis:34px; }
.integration-metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.integration-metric-grid article { min-height:68px; padding:12px 13px; border:1px solid var(--line); border-radius:15px; background:var(--surface-2); }
.integration-metric-grid span { display:block; margin-bottom:6px; color:var(--muted); font-size:.66rem; font-weight:850; letter-spacing:.045em; text-transform:uppercase; }
.integration-metric-grid strong { display:block; color:var(--text); line-height:1.25; overflow-wrap:anywhere; }
.integration-metric-grid article > small { display:block; margin-top:5px; color:var(--muted); font-size:9px; font-weight:700; line-height:1.35; }
.integration-metric-grid .verified-lead-metric { border-color:color-mix(in srgb,#20b765 32%,var(--line)); background:color-mix(in srgb,#20b765 6%,var(--surface-2)); }
.integration-card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.integration-card-actions small { flex:1 1 220px; color:var(--muted); line-height:1.45; }
.integration-card-actions .subtle-control { align-self:flex-end; margin:0; }
.integration-card-actions .subtle-control select { height:38px; }
.integration-card-actions > button { height:38px; white-space:nowrap; }
.dashboard-connection-empty { display:grid; gap:4px; min-height:92px; align-content:center; padding:14px; border:1px dashed var(--line); border-radius:16px; background:var(--surface-2); }
.dashboard-connection-empty strong { color:var(--text); }
.mailchimp-client-tool { display:grid; gap:12px; }
.mailchimp-client-tool label { display:grid; gap:7px; color:var(--muted); font-size:.68rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.mailchimp-status-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.mailchimp-status-row > div { display:grid; gap:3px; }
.mailchimp-status-row > .integration-connection-actions { display:flex; }
.mailchimp-status-row strong { color:var(--text); }
.mailchimp-status-row span { color:var(--muted); font-size:.72rem; }
.mailchimp-status-row > span:last-child { padding:5px 9px; border-radius:999px; background:color-mix(in srgb,var(--muted) 12%,transparent); color:var(--muted); font-size:.62rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.mailchimp-status-row.connected { border-color:color-mix(in srgb,#20b765 35%,var(--line)); background:color-mix(in srgb,#20b765 7%,var(--surface-2)); }
.mailchimp-status-row.connected > span:last-child { background:rgba(32,183,101,.18); color:#39c87c; }
.mailchimp-audience-list { display:grid; gap:8px; max-height:176px; overflow:auto; padding-right:3px; }
.mailchimp-audience-list button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2); color:var(--text); text-align:left; cursor:pointer; }
.mailchimp-audience-list button:hover { border-color:color-mix(in srgb,var(--accent) 36%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--surface-2)); }
.mailchimp-audience-list button.selected { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); background:color-mix(in srgb,var(--accent) 12%,var(--surface-2)); }
.mailchimp-audience-list span { color:var(--muted); white-space:nowrap; }
.mailchimp-campaign-list { display:grid; gap:8px; margin-top:12px; }
.mailchimp-campaign-list div { display:grid; gap:4px; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2); }
.mailchimp-campaign-list span { color:var(--muted); font-size:.72rem; line-height:1.4; }
.client-connection-details { margin-top:4px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--surface-2) 70%,transparent); overflow:hidden; }
.client-connection-details summary { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:12px 14px; color:var(--text); font-weight:850; cursor:pointer; list-style:none; }
.client-connection-details summary::-webkit-details-marker { display:none; }
.client-connection-details summary::after { content:"+"; display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--line); border-radius:999px; color:var(--muted); }
.client-connection-details[open] summary::after { content:"–"; }
.client-connection-body { display:grid; gap:12px; padding:0 14px 14px; border-top:1px solid var(--line); }

/* Final loader treatment: use the clean mark, no cropped transparent wordmark chip. */
.brand-loader { width:112px; height:112px; padding:0; border:0; border-radius:999px; background:transparent; box-shadow:none; overflow:visible; animation:brand-loader-float 2.4s ease-in-out infinite; }
.brand-loader::before { content:""; position:absolute; inset:14px; border-radius:999px; background:color-mix(in srgb,var(--accent) 10%,transparent); filter:blur(18px); opacity:.75; }
.brand-loader::after { content:""; position:absolute; inset:8px; border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); border-radius:999px; animation:loader-orbit 1.8s linear infinite; clip-path:polygon(0 0,62% 0,62% 100%,0 100%); }
.brand-loader .loader-logo,
.brand-loader .loader-mark { position:relative; z-index:1; width:88px; height:88px; object-fit:contain; filter:drop-shadow(0 16px 30px rgba(0,0,0,.24)); }
.brand-loader .loader-logo-on-light,
.brand-loader .loader-logo-on-dark,
:root[data-theme="light"] .brand-loader .loader-logo-on-light,
:root[data-theme="light"] .brand-loader .loader-logo-on-dark { display:none; }
.loader-sheen { display:none; }
@keyframes loader-orbit { to { transform:rotate(360deg); } }

/* Keep the loading logo clean: the source wordmark already has transparent edges. */
.brand-loader { width:min(280px, 82vw); height:84px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.brand-loader::before, .brand-loader::after { display:none !important; }
.brand-loader .loader-logo, .brand-loader .loader-mark { width:270px; height:78px; object-fit:contain; filter:drop-shadow(0 12px 22px rgba(0,0,0,.22)); animation:brand-loader-float 2.4s ease-in-out infinite; }

.integration-toolbar { display:flex; align-items:end; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin:0 0 12px; }
.integration-snapshot-header { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:2px 0 14px; }
.integration-snapshot-header .integration-period-label,
.integration-snapshot-header .integration-toolbar { margin:0; }
.integration-brand-heading { justify-content:flex-start; gap:11px; }
.integration-brand-icon { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:12px; overflow:hidden; }
.linkedin-brand-icon { background:#0a66c2; color:#fff; font:900 20px/1 Arial,sans-serif; letter-spacing:-.08em; text-transform:none; }
.meta-brand-icon { background:#0866ff; }
.meta-brand-icon img { width:28px; height:28px; object-fit:contain; filter:brightness(0) invert(1); }
.zoho-brand-icon { background:#fff; border:1px solid color-mix(in srgb,var(--line) 76%,#fff); }
.zoho-brand-icon img { width:32px; height:32px; object-fit:contain; }
.mailchimp-brand-icon { background:#ffe01b; }
.mailchimp-brand-icon img { width:30px; height:30px; object-fit:contain; }
.brevo-brand-icon,.brevo-source-glyph {
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#0b996e url("./assets/brevo-logo.webp") center/190% auto no-repeat;
  color:transparent;
  font-size:0;
  text-indent:-9999px;
}
.brevo-source-glyph { width:19px; height:19px; border-radius:5px; }
.brevo-status-row.connected { border-color:color-mix(in srgb,#0b996e 42%,var(--line)); }
.mailerlite-brand-icon { background:#08c779; overflow:hidden; }
.mailerlite-brand-icon img { width:100%; height:100%; object-fit:cover; }
.mailerlite-status-row.connected { border-color:color-mix(in srgb,#54b689 42%,var(--line)); }
.subtle-control { display:grid; gap:5px; min-width:150px; color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.subtle-control select { min-width:150px; padding:8px 28px 8px 10px; font-size:12px; font-weight:600; }
.integration-period-label { margin:0 0 10px; color:var(--muted); font-size:12px; font-weight:700; }
.meta-campaign-summary-list { display:block; margin:10px 0 12px; border:1px solid var(--line); border-radius:12px; overflow-x:auto; }
.meta-campaign-summary-heading, .meta-campaign-summary-row { display:grid; grid-template-columns:minmax(0,2fr) repeat(5,minmax(72px,.7fr)); gap:10px; align-items:center; min-width:700px; padding:9px 11px; }
.meta-campaign-summary-heading { color:var(--muted); background:var(--surface-2); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.meta-campaign-summary-heading small { grid-column:6; text-align:right; font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; }
.meta-campaign-summary-row { border-top:1px solid var(--line); font-size:11px; }
.meta-campaign-summary-row strong { min-width:0; }
.meta-campaign-summary-row span { color:var(--muted); text-align:right; }
.meta-campaign-summary-row strong > span { display:block; overflow:hidden; color:var(--text); text-align:left; text-overflow:ellipsis; }
.meta-campaign-summary-row strong > small { display:block; margin-top:3px; overflow:hidden; color:var(--muted); font-size:9px; font-weight:700; text-overflow:ellipsis; }
.meta-campaign-summary-row.is-excluded { background:color-mix(in srgb,var(--muted) 5%,transparent); }
.meta-campaign-summary-row.is-excluded > span { opacity:.5; }
.meta-campaign-summary-row.is-excluded strong > span { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
.meta-reporting-campaign-toggle { display:inline-flex; align-items:center; gap:6px; margin-top:6px; color:var(--muted); cursor:pointer; font-size:9px; font-weight:800; }
.meta-reporting-campaign-toggle input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.meta-reporting-campaign-toggle i { position:relative; flex:0 0 28px; width:28px; height:16px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--muted) 24%,var(--surface)); transition:background 160ms ease,border-color 160ms ease; }
.meta-reporting-campaign-toggle i::after { content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:var(--muted); transition:transform 160ms ease,background 160ms ease; }
.meta-reporting-campaign-toggle input:checked + i { border-color:#20b765; background:#20b765; }
.meta-reporting-campaign-toggle input:checked + i::after { background:#fff; transform:translateX(12px); }
.meta-reporting-campaign-toggle input:focus-visible + i { outline:2px solid var(--accent); outline-offset:2px; }
.meta-reporting-campaign-toggle em { color:inherit; font-style:normal; }
.verified-lead-panel { display:none!important; }
.verified-lead-panel.is-synced { border-color:color-mix(in srgb,#20b765 35%,var(--line)); background:color-mix(in srgb,#20b765 6%,var(--surface-2)); }
.verified-lead-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.verified-lead-heading > div { display:grid; gap:3px; }
.verified-lead-heading span { color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.verified-lead-heading strong { color:var(--text); font-size:1.05rem; }
.verified-lead-heading small,.verified-lead-panel > p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; }
.verified-lead-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.verified-lead-metrics > div { min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.verified-lead-metrics span { display:block; overflow:hidden; color:var(--muted); font-size:9px; font-weight:800; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.verified-lead-metrics strong { display:block; margin-top:4px; color:var(--text); font-size:1rem; }
.subtle-control select:disabled { opacity:.65; cursor:not-allowed; }
.connection-actions-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.danger-button { color:var(--danger, #ef8d9a); border-color:color-mix(in srgb, var(--danger, #ef8d9a) 42%, var(--line)); }
.meta-account-select-row { display:flex; align-items:center; gap:6px; }
.meta-account-select-row select { flex:1 1 auto; min-width:0; }
.meta-account-select-row .compact-button { flex:0 0 auto; white-space:nowrap; }

.client-visual-overview { position:relative; isolation:isolate; margin:0 0 18px; padding:16px; overflow:visible; background:var(--surface); }
.visual-overview-heading { position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; padding:17px 18px; overflow:visible; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:22px; background:color-mix(in srgb,var(--accent) 7%,var(--surface-2)); box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 7%,transparent); }
.visual-overview-heading::after { content:""; position:absolute; right:14px; bottom:-1px; width:90px; height:4px; border-radius:999px 999px 0 0; background:var(--accent); opacity:.78; pointer-events:none; }
.presentation-title-lockup { display:flex; align-items:center; gap:13px; min-width:0; }
.presentation-title-lockup > div { min-width:0; }
.presentation-title-mark { display:flex; align-items:end; justify-content:center; gap:4px; flex:0 0 42px; width:42px; height:42px; padding:9px; box-sizing:border-box; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:14px; background:var(--surface); box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 10%,transparent); }
.presentation-title-mark i { display:block; width:5px; border-radius:999px; background:var(--accent); }
.presentation-title-mark i:nth-child(1) { height:40%; opacity:.55; }
.presentation-title-mark i:nth-child(2) { height:78%; }
.presentation-title-mark i:nth-child(3) { height:58%; opacity:.78; }
.visual-overview-heading h3 { margin:2px 0 4px; font-size:clamp(1.25rem,2vw,1.75rem); }
.visual-overview-heading p:last-child { margin:0; color:var(--muted); font-size:.78rem; }
.visual-period-pill { flex:0 0 auto; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:.7rem; font-weight:800; }
.presentation-range-control { display:grid; gap:5px; flex:0 0 160px; color:var(--muted); font-size:.61rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.presentation-range-control select { width:100%; min-height:38px; padding:8px 30px 8px 11px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); font-size:.72rem; font-weight:750; text-transform:none; letter-spacing:0; }
.visual-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.visual-metric-card,.presentation-pie-card,.simple-metric-card,.simple-kpi-strip article { --card-accent:var(--accent); }
.source-meta { --card-accent:#1877f2; }
.source-paid-media { --card-accent:#7259c8; }
.source-mailchimp { --card-accent:#f2b529; }
.source-brevo { --card-accent:#0b996e; }
.source-mailerlite { --card-accent:#54b689; }
.source-google-analytics { --card-accent:#f08a34; }
.source-linkedin-ads { --card-accent:#0a66c2; }
.source-campaign-sheet { --card-accent:#20b765; }
.source-social-media { --card-accent:#8b5cf6; }
.source-overview { --card-accent:var(--accent); }
.visual-metric-card { position:relative; min-width:0; min-height:250px; display:flex; flex-direction:column; padding:17px 18px; overflow:hidden; border:1px solid color-mix(in srgb,var(--card-accent) 25%,var(--line)); border-radius:17px; background:var(--surface-2); box-shadow:0 8px 24px rgba(0,0,0,.06); transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease; }
.visual-metric-card::before,.presentation-pie-card::before,.simple-metric-card::before,.simple-kpi-strip article::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; border-radius:14px 0 0 14px; background:var(--card-accent); opacity:.82; }
.visual-metric-card:hover { border-color:color-mix(in srgb,var(--card-accent) 42%,var(--line)); transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.1); }
.visual-metric-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.visual-metric-meta span { color:var(--muted); font-size:.72rem; font-weight:850; letter-spacing:.045em; text-transform:uppercase; }
.visual-source-badge { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:4px 8px 4px 5px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); }
.visual-source-badge img { width:19px; height:19px; border-radius:5px; object-fit:contain; }
.linkedin-source-glyph { display:grid; place-items:center; width:19px; height:19px; border-radius:5px; background:#0a66c2; color:#fff; font:900 11px/1 Arial,sans-serif; letter-spacing:-.08em; }
.visual-source-badge b { font-size:.59rem; font-weight:800; white-space:nowrap; }
.visual-source-badge.source-meta { background:var(--surface); border-color:color-mix(in srgb,#0866ff 42%,var(--line)); color:var(--text); }
.visual-source-badge.source-meta img { background:transparent; }
.visual-source-badge.source-mailchimp img { padding:2px; background:#ffe01b; }
.visual-source-badge.source-campaign-sheet img { padding:2px; background:#fff; }
.visual-metric-header { display:grid; gap:5px; }
.visual-metric-value,.simple-metric-value { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-width:0; }
.visual-metric-value > strong { color:var(--text); font-size:clamp(1.75rem,2.5vw,2.4rem); line-height:1; letter-spacing:-.05em; }
.visual-metric-value .social-trend,.simple-metric-value .social-trend { flex:0 0 auto; padding:.16rem .38rem; font-size:.58rem; }
.visual-metric-chart,.visual-trend { width:100%; min-width:0; }
.visual-metric-chart { flex:1 1 auto; display:grid; align-items:end; min-height:0; }
.visual-metric-card footer { margin-top:auto; padding-top:9px; border-top:1px solid color-mix(in srgb,var(--card-accent) 15%,var(--line)); color:var(--muted); font-size:.66rem; line-height:1.35; }
.visual-metric-card.is-trend-card,.visual-metric-card.is-bar-card { min-height:300px; padding:18px; }
.visual-metric-card.is-breakdown-card,
.visual-metric-card.is-rate-card,
.visual-metric-card.is-delivery-card,
.visual-metric-card.is-activity-card { min-height:250px; }
.visual-metric-card.is-trend-card .visual-metric-value > strong,
.visual-metric-card.is-bar-card .visual-metric-value > strong { font-size:clamp(1.5rem,2.2vw,1.95rem); }
.visual-trend { margin-top:5px; }
.visual-sparkline { display:block; width:100%; height:164px; max-height:164px; overflow:visible; color:var(--accent); }
.visual-sparkline .trend-line { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.visual-sparkline .trend-area { fill:currentColor; opacity:.075; }
.visual-sparkline .trend-grid-line { stroke:var(--line); stroke-width:.7; stroke-dasharray:2 3; vector-effect:non-scaling-stroke; }
.visual-sparkline .trend-axis-label,.visual-sparkline .trend-date-label { fill:var(--muted); font-size:6px; font-weight:750; }
.visual-sparkline .trend-date-label-end { text-anchor:end; }
.visual-sparkline .trend-peak { fill:#35c978; stroke:var(--surface-2); stroke-width:2; }
.visual-sparkline .trend-dip { fill:#ef8d9a; stroke:var(--surface-2); stroke-width:2; }
.visual-sparkline .trend-hover-point { cursor:crosshair; outline:0; }
.visual-sparkline .trend-hover-point > circle { fill:transparent; stroke:transparent; transition:fill 140ms ease,stroke 140ms ease; }
.visual-sparkline .trend-hover-point:hover > circle,.visual-sparkline .trend-hover-point:focus > circle { fill:currentColor; stroke:var(--surface-2); stroke-width:2; }
.visual-sparkline .trend-point-tooltip { opacity:0; pointer-events:none; transition:opacity 120ms ease; }
.visual-sparkline .trend-point-tooltip rect { fill:var(--text); stroke:var(--line); stroke-width:.6; }
.visual-sparkline .trend-point-tooltip text { fill:var(--surface); font-size:14px; font-weight:850; text-anchor:middle; }
.visual-sparkline .trend-hover-point:hover .trend-point-tooltip,.visual-sparkline .trend-hover-point:focus .trend-point-tooltip { opacity:1; }
.visual-trend-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:-2px; color:var(--muted); font-size:.56rem; font-weight:650; }
.visual-trend-summary .peak b { color:#35c978; }.visual-trend-summary .dip b { color:#ef8d9a; }
.visual-sparkline.tone-blue { color:#3f8cff; }
.visual-sparkline.tone-gold { color:#d89f38; }
.visual-sparkline.tone-green { color:#20b765; }
.visual-sparkline.tone-teal { color:#16a6a0; }
.visual-sparkline.tone-orange { color:#f08a34; }
.visual-sparkline-empty { display:grid; place-items:center; min-height:66px; margin-top:8px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:.66rem; }
.visual-mini-bars { display:flex; align-items:end; gap:7px; width:100%; height:102px; margin-top:7px; padding:3px 3px 0; border-bottom:1px solid var(--line); }
.visual-mini-bars > span { position:relative; flex:1 1 0; display:grid; grid-template-rows:18px minmax(0,1fr); align-items:end; min-width:12px; height:100%; outline:0; cursor:crosshair; }
.visual-mini-bars > span em { display:block; align-self:start; overflow:hidden; color:var(--text); font-size:clamp(.55rem,.8vw,.68rem); font-style:normal; font-weight:850; line-height:1; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.visual-mini-bars > span i { display:block; grid-row:2; align-self:end; width:100%; height:var(--bar-height); min-height:7px; max-height:100%; border-radius:6px 6px 2px 2px; background:var(--accent); opacity:.84; transition:opacity 150ms ease,transform 150ms ease,filter 150ms ease; transform-origin:bottom; }
.visual-mini-bars.tone-orange > span i { background:#f08a34; }.visual-mini-bars.tone-gold > span i { background:#d89f38; }.visual-mini-bars.tone-green > span i { background:#20b765; }
.visual-mini-bars > span:hover i,.visual-mini-bars > span:focus i { opacity:1; transform:scaleY(1.05); filter:brightness(1.12); }
.visual-mini-bars small,.visual-mini-bars b { position:absolute; left:50%; z-index:2; width:max-content; max-width:120px; padding:3px 6px; border-radius:6px; background:var(--text); color:var(--surface); font-size:.52rem; line-height:1; opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity 130ms ease,transform 130ms ease; }
.visual-mini-bars small { bottom:calc(var(--bar-height) + 25px); }.visual-mini-bars b { bottom:calc(var(--bar-height) + 11px); }
.visual-mini-bars > span:hover small,.visual-mini-bars > span:hover b,.visual-mini-bars > span:focus small,.visual-mini-bars > span:focus b { opacity:1; transform:translate(-50%,0); }
.presentation-rate-visual { display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:center; margin-top:7px; }
.presentation-rate-ring { position:relative; width:62px; height:62px; color:var(--card-accent); }
.presentation-rate-ring svg { display:block; width:62px; height:62px; transform:rotate(-90deg); }
.presentation-rate-ring circle { fill:none; stroke-width:8; }
.presentation-rate-ring .rate-track { stroke:color-mix(in srgb,var(--card-accent) 12%,var(--line)); }
.presentation-rate-ring .rate-value { stroke:var(--card-accent); stroke-linecap:round; }
.presentation-rate-ring > span { position:absolute; inset:0; display:grid; place-content:center; gap:0; text-align:center; }
.presentation-rate-ring > span strong { color:var(--card-accent); font-size:.95rem; line-height:1; }
.presentation-rate-ring > span small { color:var(--muted); font-size:.54rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.presentation-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); gap:7px; min-width:0; }
.presentation-detail-grid > span { display:grid; gap:2px; min-width:0; padding:7px 8px; border:1px solid color-mix(in srgb,var(--card-accent) 16%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--card-accent) 4%,var(--surface)); }
.presentation-detail-grid small { overflow:hidden; color:var(--muted); font-size:.55rem; font-weight:850; letter-spacing:.045em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.presentation-detail-grid strong { overflow:hidden; color:var(--text); font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.presentation-delivery-visual { display:grid; gap:8px; margin-top:8px; }
.presentation-delivery-summary { display:grid; grid-template-columns:36px minmax(0,1fr); gap:9px; align-items:center; }
.presentation-delivery-summary > span { display:grid; place-items:center; width:36px; height:36px; border:1px solid color-mix(in srgb,var(--card-accent) 24%,var(--line)); border-radius:10px; background:color-mix(in srgb,var(--card-accent) 11%,var(--surface)); color:var(--card-accent); font-size:.95rem; }
.presentation-delivery-summary > div { display:grid; gap:3px; min-width:0; }
.presentation-delivery-summary strong { color:var(--text); font-size:.86rem; }
.presentation-delivery-summary small { color:var(--muted); font-size:.64rem; line-height:1.35; }
.presentation-activity-visual { display:grid; grid-template-columns:48px minmax(0,1fr); align-content:center; align-items:center; gap:12px; min-height:150px; padding:14px 0 8px; }
.presentation-activity-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid color-mix(in srgb,var(--card-accent) 28%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--card-accent) 11%,var(--surface)); color:var(--card-accent); font-size:1.2rem; font-weight:900; }
.presentation-activity-visual > div:nth-child(2) { display:grid; gap:4px; min-width:0; }.presentation-activity-visual > div:nth-child(2) strong { color:var(--text); font-size:.9rem; }.presentation-activity-visual > div:nth-child(2) small { color:var(--muted); font-size:.67rem; line-height:1.4; }
.presentation-activity-visual .presentation-detail-grid { grid-column:1/-1; width:100%; }

.analytics-status-row > div { min-width:0; }
.analytics-status-row > div small { display:block; margin-top:3px; color:var(--muted); font-size:.64rem; }
.analytics-assignment-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border:1px solid color-mix(in srgb,#f08a34 24%,var(--line)); border-radius:15px; background:color-mix(in srgb,#f08a34 5%,var(--surface-2)); }
.analytics-assignment-summary > div:first-child { display:grid; gap:3px; min-width:0; }
.analytics-assignment-summary span { color:var(--muted); font-size:.6rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.analytics-assignment-summary strong,.analytics-assignment-summary small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.analytics-assignment-summary small { color:var(--muted); font-size:.66rem; }
.analytics-primary-actions { align-items:end; }
.analytics-top-pages { display:grid; gap:9px; margin-top:12px; padding:13px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--surface-2) 74%,transparent); }
.analytics-top-pages-heading { display:flex; align-items:end; justify-content:space-between; gap:14px; }
.analytics-top-pages-heading > div { display:grid; gap:2px; }
.analytics-top-pages-heading span { color:var(--muted); font-size:.6rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.analytics-top-pages-heading strong { color:var(--text); font-size:.84rem; }
.analytics-top-pages-heading small { color:var(--muted); font-size:.63rem; }
.analytics-top-pages-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.analytics-top-pages-list article { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:9px; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); transition:transform 160ms ease,border-color 160ms ease; }
.analytics-top-pages-list article:hover { transform:translateY(-1px); border-color:color-mix(in srgb,#f08a34 42%,var(--line)); }
.analytics-page-rank { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:color-mix(in srgb,#f08a34 14%,var(--surface-2)); color:#f08a34; font-size:.68rem; font-weight:900; }
.analytics-top-pages-list article > div:nth-child(2),.analytics-page-stats { display:grid; gap:2px; min-width:0; }
.analytics-top-pages-list article > div:nth-child(2) strong,.analytics-top-pages-list article > div:nth-child(2) small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.analytics-top-pages-list article > div:nth-child(2) strong { font-size:.72rem; }
.analytics-top-pages-list article small { color:var(--muted); font-size:.58rem; }
.analytics-page-stats { text-align:right; white-space:nowrap; }
.analytics-page-stats strong { font-size:.72rem; }
.analytics-top-pages-list article > a { color:#f08a34; font-size:.9rem; text-decoration:none; }

@media (max-width: 700px) {
  .integration-snapshot-header { align-items:stretch; flex-direction:column; gap:10px; }
  .integration-toolbar { justify-content:stretch; }
  .subtle-control { flex:1 1 145px; }
  .subtle-control select { width:100%; }
  .connection-actions-row { align-items:stretch; flex-direction:column; }
  .connection-actions-row button { width:100%; }
  .meta-campaign-summary-heading, .meta-campaign-summary-row { min-width:700px; }
  .meta-campaign-summary-heading small { display:none; }
  .verified-lead-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .visual-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-card-toggle { flex-basis:36px; width:36px; }
  .visual-source-badge b { display:none; }
  .visual-source-badge { padding:4px; }
  .analytics-top-pages-list { grid-template-columns:1fr; }
  .analytics-assignment-summary { align-items:stretch; flex-direction:column; }
  .zoho-advertising-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zoho-advertising-grid article:nth-last-child(2) { grid-column:span 2; }
}

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

@media (max-width:560px) {
  .integration-metric-grid { grid-template-columns:1fr; }
  .integration-card-actions .compact-button { width:100%; }
  .mailchimp-status-row { align-items:flex-start; flex-direction:column; }
  .mailchimp-audience-list button { align-items:flex-start; flex-direction:column; }
  .verified-lead-heading { align-items:flex-start; flex-direction:column; }
  .visual-overview-heading { align-items:flex-start; flex-direction:column; }
  .presentation-range-control { width:100%; flex-basis:auto; }
  .visual-metric-grid { grid-template-columns:1fr; }
  .client-visual-overview { padding:14px; }
  .analytics-top-pages-heading { align-items:flex-start; flex-direction:column; }
  .analytics-top-pages-list article { grid-template-columns:auto minmax(0,1fr) auto; }
  .analytics-page-stats { grid-column:2; text-align:left; }
  .analytics-top-pages-list article > a { grid-column:3; grid-row:1; }
  .zoho-combined-divider { align-items:flex-start; flex-direction:column; }
  .zoho-advertising-grid { grid-template-columns:1fr; }
  .zoho-advertising-grid article:nth-last-child(2) { grid-column:auto; }
  .connection-setup-head { grid-template-columns:auto minmax(0,1fr); }
  .connection-setup-head .connection-pill { grid-column:2; justify-self:start; }
  .connection-setup-card .connection-actions-row { align-items:stretch; }
}

/* Client dashboard workspace refresh */
.meta-campaign-summary-columns { display:grid; grid-template-columns:minmax(0,2fr) repeat(5,minmax(72px,.7fr)); gap:10px; min-width:700px; padding:7px 11px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--surface-2) 72%,transparent); color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.meta-campaign-summary-columns span:not(:first-child) { text-align:right; }
.mailchimp-period-empty,.mailchimp-latest-campaign { display:grid; gap:4px; margin-top:10px; padding:11px 13px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--surface-2) 70%,transparent); }
.mailchimp-period-empty span,.mailchimp-latest-campaign span,.mailchimp-latest-campaign small { color:var(--muted); font-size:.72rem; line-height:1.4; }
.mailchimp-latest-campaign > span { font-size:.64rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }

.client-context-summary { grid-template-columns:minmax(260px,.65fr) minmax(420px,1.35fr); gap:12px; align-items:stretch; padding:14px 20px; }
.client-status-card { display:flex; align-items:center; gap:11px; min-height:64px; padding:10px 12px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.client-status-card .status-select-wrap { flex:1; min-width:0; }
.client-status-card select { width:100%; }
.client-quick-links { display:flex; flex-wrap:wrap; gap:8px; }
.client-quick-links .platform-link-card { flex:1 1 190px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; min-height:64px; padding:10px 12px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); color:var(--text); text-decoration:none; transition:transform 160ms ease,border-color 160ms ease,background 160ms ease; }
.client-quick-links .platform-link-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--surface-2)); }
.platform-link-card > span:nth-child(2) { display:grid; gap:2px; min-width:0; }
.platform-link-card strong,.platform-link-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.platform-link-card small { color:var(--muted); font-size:.68rem; }
.platform-link-card > b { color:var(--muted); font-size:.8rem; }
.client-platform-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--surface); color:var(--text); font-weight:900; overflow:hidden; }
.client-platform-icon img { width:26px; height:26px; object-fit:contain; }
.status-icon { border:1px solid rgba(47,191,113,.35); background:rgba(47,191,113,.13); color:#45cf84; }
.meta-icon { background:#0866ff; color:#fff; font-family:Arial,sans-serif; font-size:1.8rem; font-weight:700; line-height:1; }
.zoho-icon { background:#fff; }
.drive-icon { background:#f4b400; color:#15233a; }.sheet-icon { background:#188038; color:#fff; }.link-icon { background:color-mix(in srgb,var(--accent) 15%,var(--surface)); color:var(--accent); }

.client-account-assets { padding:18px 20px 20px; }
.asset-workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.asset-workspace-heading h4,.asset-workspace-heading p { margin:0; }
.asset-workspace-heading h4 { font-size:1.05rem; }
.asset-workspace-heading p:last-child { margin-top:3px; color:var(--muted); font-size:.74rem; }
.asset-readiness-ring { display:grid; place-items:center; flex:0 0 58px; width:58px; height:58px; border:3px solid color-mix(in srgb,var(--accent) 70%,var(--line)); border-radius:50%; background:var(--surface); }
.asset-readiness-ring strong { font-size:.76rem; }.asset-readiness-ring span { margin-top:-12px; color:var(--muted); font-size:.52rem; text-transform:uppercase; }
.asset-workspace-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr); gap:12px; }
.asset-workspace-card { display:grid; align-content:start; gap:12px; min-width:0; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--surface-2); }
.asset-workspace-card header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; }
.asset-workspace-card header > div { display:grid; gap:1px; }.asset-workspace-card header small { color:var(--muted); font-size:.58rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }.asset-workspace-card h5 { margin:0; font-size:.9rem; }
.asset-card-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:color-mix(in srgb,var(--accent) 14%,var(--surface)); color:var(--accent); font-weight:900; overflow:hidden; }.asset-card-icon img{width:25px;height:25px;object-fit:contain}.brand-icon{color:#f2c94c}.files-icon{background:#fff;color:#45cf84}
.asset-workspace-card .data-health,.asset-workspace-card .asset-status,.asset-workspace-card .connection-status { white-space:nowrap; }
.asset-workspace-card > p,.asset-source-line { margin:0; color:var(--muted); font-size:.7rem; line-height:1.45; }
.asset-website-link { display:grid; gap:3px; padding:10px 11px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); text-decoration:none; }.asset-website-link span { color:var(--muted); font-size:.62rem; text-transform:uppercase; }.asset-website-link strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.74rem; }.asset-website-link.missing { pointer-events:none; }
.asset-workspace-card .client-asset-preview { max-width:none; margin:0; }
.asset-action-row { display:flex; flex-wrap:wrap; gap:6px; }.asset-action-row > * { flex:1 1 105px; }
.brand-card .client-asset-preview { grid-template-columns:150px minmax(0,1fr) minmax(250px,.55fr); align-items:stretch; gap:18px; padding:16px; border-radius:16px; background:var(--surface); }
.brand-card .asset-preview-media { width:150px; height:132px; border-radius:13px; background:var(--surface-2); }
.asset-analysis-heading { display:grid; gap:3px; }.asset-analysis-heading span { color:var(--muted); font-size:.65rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }.asset-analysis-heading strong { font-size:1.15rem; line-height:1.15; }
.asset-analysis-summary { max-width:760px; margin:2px 0 4px; color:var(--text); font-size:.82rem; line-height:1.55; }
.asset-analysis-facts { display:flex; flex-wrap:wrap; gap:9px 24px; margin:2px 0; }.asset-analysis-facts div { display:grid; gap:2px; }.asset-analysis-facts dt { color:var(--muted); font-size:.6rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }.asset-analysis-facts dd { margin:0; color:var(--text); font-size:.75rem; font-weight:750; }
.asset-analysis-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.asset-palette-panel { display:grid; align-content:start; gap:10px; min-width:0; padding-left:18px; border-left:1px solid var(--line); }.asset-palette-panel > span { color:var(--muted); font-size:.62rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.asset-palette-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.asset-palette-grid > small { grid-column:1/-1; color:var(--muted); font-size:.68rem; }.asset-palette-swatch { display:grid; gap:5px; min-width:0; }.asset-palette-swatch i { display:block; width:100%; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--swatch) 62%,var(--line)); border-radius:11px; background:var(--swatch); }.asset-palette-swatch b { overflow:hidden; color:var(--muted); font-size:.56rem; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.client-logo-editor { border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden; }.client-logo-editor > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; cursor:pointer; list-style:none; }.client-logo-editor > summary::-webkit-details-marker { display:none; }.client-logo-editor > summary span { font-size:.72rem; font-weight:850; }.client-logo-editor > summary small { color:var(--muted); font-size:.62rem; }.client-logo-editor[open] > summary { border-bottom:1px solid var(--line); }
.client-logo-editor-body { display:grid; gap:10px; padding:11px; }.client-logo-editor-body > label { display:grid; gap:5px; }.client-logo-editor-body > label > span { color:var(--muted); font-size:.62rem; font-weight:800; }.client-logo-url-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }.client-logo-url-row input { width:100%; min-width:0; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text); padding:8px 10px; font:inherit; font-size:.72rem; }
.client-logo-divider { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.58rem; text-transform:uppercase; }.client-logo-divider::before,.client-logo-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.client-logo-upload { display:flex!important; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px; border:1px dashed var(--line); border-radius:10px; cursor:pointer; }.client-logo-upload strong { font-size:.7rem; }.client-logo-upload span { margin-left:auto; }.client-logo-feedback { min-height:0; margin:0; font-size:.65rem; }.client-logo-feedback:empty { display:none; }
.asset-secondary-actions { display:flex; gap:12px; }.asset-secondary-actions button { padding:0; border:0; background:transparent; color:var(--muted); font-size:.65rem; cursor:pointer; }.asset-secondary-actions button:disabled { opacity:.35; cursor:not-allowed; }
.asset-workspace-card .asset-inventory { gap:5px; }.asset-workspace-card .asset-chip { font-size:.62rem; }
.asset-workspace-card .client-asset-links { display:grid; grid-template-columns:1fr auto; gap:6px 8px; align-items:center; }.asset-workspace-card .client-asset-links a { color:var(--text); font-size:.72rem; }.asset-workspace-card .client-asset-links button { border:0; background:transparent; color:var(--accent); font-size:.65rem; cursor:pointer; }
.create-files-button { width:100%; margin-top:auto; }.asset-workspace-notice { margin-top:10px; padding:9px 11px; border-left:2px solid var(--accent); border-radius:0 10px 10px 0; background:color-mix(in srgb,var(--accent) 7%,transparent); color:var(--muted); font-size:.7rem; }

@media (max-width:1200px) { .brand-card .client-asset-preview { grid-template-columns:130px minmax(0,1fr); }.asset-palette-panel { grid-column:1/-1; padding:14px 0 0; border-top:1px solid var(--line); border-left:0; }.asset-palette-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:1000px) { .asset-workspace-grid { grid-template-columns:1fr; }.client-context-summary { grid-template-columns:1fr; } }
@media (max-width:720px) { .asset-workspace-heading { align-items:flex-start; }.client-quick-links { display:grid; grid-template-columns:1fr; }.client-quick-links .platform-link-card { flex:auto; }.meta-campaign-summary-columns { min-width:700px; }.brand-card .client-asset-preview { grid-template-columns:1fr; }.brand-card .asset-preview-media { width:100%; height:110px; }.asset-palette-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.client-logo-url-row { grid-template-columns:1fr; } }

/* Client presentation polish */
.app-shell .topbar .control-row { align-items:flex-end; }
.app-shell .topbar .control-row > label { display:grid; gap:6px; margin:0; }
.app-shell .topbar .control-row > label select,
.app-shell .topbar .control-row > label input,
#dashboardZohoRefresh { min-height:42px; }
#dashboardZohoRefresh { align-self:flex-end; margin:0; white-space:nowrap; }
.dashboard-tools-menu { position:relative; align-self:flex-end; z-index:35; }
.dashboard-tools-menu > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:128px; min-height:42px; padding:9px 12px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2); color:var(--text); font-size:.76rem; font-weight:850; cursor:pointer; list-style:none; }
.dashboard-tools-menu > summary::-webkit-details-marker { display:none; }
.dashboard-tools-menu > summary::after { content:"⌄"; color:var(--accent); font-size:.82rem; transition:transform 160ms ease; }
.dashboard-tools-menu[open] > summary::after { transform:rotate(180deg); }
.dashboard-tools-menu > summary small { color:var(--muted); font-size:.6rem; font-weight:750; white-space:nowrap; }
.dashboard-tools-popover { position:absolute; top:calc(100% + 8px); right:0; width:min(310px,calc(100vw - 28px)); display:grid; gap:7px; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 18px 48px rgba(0,0,0,.24); }
.dashboard-tools-popover > div { display:grid; gap:2px; padding:2px 4px 8px; }
.dashboard-tools-popover > div small { color:var(--muted); font-size:.68rem; line-height:1.35; }
.dashboard-tools-popover > label { position:relative; display:flex !important; grid-template-columns:none !important; align-items:center; justify-content:space-between; gap:14px !important; min-height:44px; padding:9px 10px 9px 12px; border:1px solid var(--line-soft); border-radius:12px; background:var(--surface-2); color:var(--text) !important; font-size:.74rem !important; font-weight:800; cursor:pointer; }
.tool-name-lockup { display:flex; min-width:0; align-items:center; gap:9px; }
.tool-platform-icon { display:grid; place-items:center; flex:0 0 26px; width:26px; height:26px; border-radius:8px; overflow:hidden; }
.tool-platform-icon img,.tool-platform-icon svg { width:100% !important; height:100% !important; object-fit:contain; }
.tool-platform-icon.linkedin-brand-icon { font-size:14px; }
.tool-platform-icon.meta-brand-icon img { width:19px !important; height:19px !important; }
.tool-platform-icon.mailchimp-brand-icon img { width:22px !important; height:22px !important; }
.tool-platform-icon.brevo-brand-icon img { opacity:0; }
.tool-platform-icon.highlevel-brand-icon { background:#0b2942; }
.tool-platform-icon.highlevel-brand-icon img { width:100% !important; height:100% !important; object-fit:cover; }
.tool-platform-icon.presentation-brand-icon { padding:3px; border:1px solid var(--line-soft); background:#fff; box-sizing:border-box; }
.dashboard-tools-popover input { position:absolute; width:1px !important; height:1px !important; min-height:0 !important; margin:0; opacity:0; pointer-events:none; }
.dashboard-tools-popover label > i { position:relative; flex:0 0 38px; width:38px; height:22px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--muted) 24%,var(--surface)); transition:background 160ms ease,border-color 160ms ease; }
.dashboard-tools-popover label > i::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:transform 160ms ease,background 160ms ease; }
.dashboard-tools-popover input:checked + i { border-color:var(--accent); background:var(--accent); }
.dashboard-tools-popover input:checked + i::after { background:var(--surface); transform:translateX(16px); }
.dashboard-tools-popover input:focus-visible + i { outline:2px solid var(--accent); outline-offset:2px; }
.dashboard-tools-popover input:disabled + i { opacity:.55; }
.dashboard-tools-popover label:hover { border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--surface-2)); }
.analytics-property-browser { display:grid; gap:12px; padding:14px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:16px; background:color-mix(in srgb,var(--accent) 4%,var(--surface-2)); }
.analytics-property-browser-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.analytics-property-browser-heading > div { display:grid; gap:3px; }
.analytics-property-browser-heading strong { font-size:.84rem; }
.analytics-property-browser-heading span,.analytics-property-browser-heading small { color:var(--muted); font-size:.68rem; line-height:1.35; }
.analytics-property-browser-heading small { white-space:nowrap; padding:5px 8px; border:1px solid var(--line-soft); border-radius:999px; }
.analytics-property-filters { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(190px,.75fr); gap:10px; }
.analytics-property-assign-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; }
.analytics-property-browser label { display:grid; gap:5px; color:var(--muted); font-size:.64rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.analytics-property-browser input,.analytics-property-browser select { width:100%; min-height:42px; }
.analytics-property-help { margin:0; font-size:.68rem; }
.integration-card-actions { align-items:flex-end; }
.integration-card-actions > button { align-self:flex-end; margin:0; }
.zoho-account-hero h3 { margin:0 0 4px; }

.client-status-select option { background:var(--surface); color:var(--text); font-weight:750; }
:root[data-theme="light"] .client-status-select.green { border-color:#2f9f66; background:#e8f7ef; color:#135b39; }
:root[data-theme="light"] .client-status-select.red { border-color:#cf6676; background:#fff0f2; color:#8a2635; }
:root[data-theme="light"] .client-status-select.grey { border-color:#8a96a6; background:#eef2f6; color:#374151; }
:root[data-theme="dark"] .client-status-select.green { color:#bdf8d3; }
:root[data-theme="dark"] .client-status-select.red { color:#ffd0d7; }
:root[data-theme="dark"] .client-status-select.grey { color:#e3e9f1; }

.workspace-link-editor { border:1px solid var(--line); border-radius:13px; background:var(--surface); overflow:hidden; }
.workspace-link-editor > summary { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding:9px 11px; color:var(--text); font-size:.7rem; font-weight:800; cursor:pointer; list-style:none; }
.workspace-link-editor > summary::-webkit-details-marker { display:none; }
.workspace-link-editor > summary::after { content:"+"; color:var(--accent); font-size:.9rem; }
.workspace-link-editor[open] > summary::after { content:"–"; }
.workspace-link-editor-body { display:grid; gap:9px; padding:11px; border-top:1px solid var(--line); }
.workspace-link-editor-body label { display:grid; gap:5px; color:var(--muted); font-size:.62rem; font-weight:800; }
.workspace-link-editor-body input { width:100%; min-width:0; padding:8px 10px; font-size:.7rem; }
.workspace-link-feedback { min-height:0; margin:0; color:var(--muted); font-size:.64rem; }
.workspace-link-feedback:empty { display:none; }

/* Durable collapsed brand mark. A real image avoids theme/pseudo-element cascade conflicts. */
.brand-mark-collapsed { display:none; }
.app-shell:not(.sidebar-collapsed) .brand-logo-plate .brand-mark-collapsed,
:root[data-theme] .app-shell:not(.sidebar-collapsed) .brand-logo-plate .brand-mark-collapsed {
  display:none !important;
  width:0 !important;
  height:0 !important;
}
.app-shell.sidebar-collapsed .brand-logo-plate {
  display:grid !important;
  place-items:center;
  width:54px !important;
  min-height:54px !important;
  padding:4px !important;
  border:1px solid var(--line) !important;
  border-radius:15px !important;
  background:var(--surface-2) !important;
  overflow:visible !important;
}
.app-shell.sidebar-collapsed .brand-logo-plate::after { display:none !important; }
.app-shell.sidebar-collapsed .brand-logo-plate .brand-logo-theme { display:none !important; }
.app-shell.sidebar-collapsed .brand-logo-plate .brand-mark-collapsed {
  display:block !important;
  width:44px !important;
  height:44px !important;
  object-fit:contain;
  filter:none !important;
}
:root[data-theme] .app-shell.sidebar-collapsed .brand-logo-plate .brand-logo-theme { display:none !important; }
:root[data-theme] .app-shell.sidebar-collapsed .brand-logo-plate .brand-mark-collapsed {
  display:block !important;
  width:44px !important;
  height:44px !important;
  clip-path:none !important;
  transform:none !important;
  object-fit:contain !important;
}

/* Faster source transitions without leaving the previous client's values visible. */
.dashboard-card-loading {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:116px;
  color:var(--muted);
  font-size:.75rem;
}
.dashboard-card-loading span {
  width:14px;
  height:14px;
  border:2px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-top-color:var(--accent);
  border-radius:50%;
  animation:dashboard-source-spin 700ms linear infinite;
}
@keyframes dashboard-source-spin { to { transform:rotate(360deg); } }

.dashboard-data-loading {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  padding:9px 11px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface-2));
  color:var(--text);
}
.dashboard-initial-shell {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:68px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
}
.dashboard-initial-shell > div { display:grid; gap:2px; }
.dashboard-initial-shell strong { color:var(--text); font-size:.78rem; }
.dashboard-initial-shell small { color:var(--muted); font-size:.68rem; }
.dashboard-data-loading-spinner {
  flex:0 0 auto;
  width:14px;
  height:14px;
  border:2px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-top-color:var(--accent);
  border-radius:50%;
  animation:dashboard-source-spin 700ms linear infinite;
}
.dashboard-data-loading div {
  display:grid;
  gap:1px;
  min-width:0;
}
.dashboard-data-loading strong {
  font-size:.72rem;
  line-height:1.2;
}
.dashboard-data-loading small {
  color:var(--muted);
  font-size:.66rem;
  line-height:1.3;
}
.dashboard-recovery-banner {
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  margin:0 0 12px;
  padding:10px 11px;
  border:1px solid color-mix(in srgb,#e8a52b 45%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,#e8a52b 8%,var(--surface-2));
}
.dashboard-recovery-banner > span { display:grid; place-items:center; width:25px; height:25px; border-radius:999px; background:color-mix(in srgb,#e8a52b 20%,transparent); color:#e8a52b; font-size:.72rem; font-weight:950; }
.dashboard-recovery-banner > div { display:grid; gap:2px; min-width:0; }
.dashboard-recovery-banner strong { color:var(--text); font-size:.74rem; }
.dashboard-recovery-banner small { overflow:hidden; color:var(--muted); font-size:.66rem; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-recovery-banner em { color:color-mix(in srgb,#e8a52b 68%,var(--text)); font-size:.62rem; font-style:normal; font-weight:720; }
.dashboard-recovery-banner button { padding:7px 10px; border:1px solid color-mix(in srgb,#e8a52b 48%,var(--line)); border-radius:9px; background:color-mix(in srgb,#e8a52b 12%,var(--surface)); color:var(--text); font-size:.65rem; font-weight:880; cursor:pointer; }
.presentation-deferred-details {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:112px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-2);
  color:var(--text);
}
.presentation-deferred-details > div { display:grid; gap:3px; }
.presentation-deferred-details strong { font-size:.82rem; }
.presentation-deferred-details small { color:var(--muted); font-size:.72rem; line-height:1.35; }
[data-dashboard-card][data-dashboard-deferred="true"] .dashboard-initial-shell { content-visibility:auto; contain-intrinsic-size:116px; }

/* Zoho information architecture */
.zoho-info-section {
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:17px;
  background:color-mix(in srgb,var(--surface-2) 88%,var(--accent) 2%);
}
.zoho-info-section:first-child { margin-top:0; }
.zoho-section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.zoho-section-heading > div { display:grid; gap:2px; }
.zoho-section-heading > div > span {
  color:var(--accent);
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.zoho-section-heading > div > strong { color:var(--text); font-size:.9rem; }
.zoho-section-heading > small { color:var(--muted); font-size:.66rem; text-align:right; }
.zoho-info-section .zoho-account-hero { padding-top:0; }
.zoho-info-section .zoho-role-grid,
.zoho-info-section .zoho-service-grid { margin-top:12px; }
.zoho-contract-section { background:color-mix(in srgb,var(--accent) 4%,var(--surface-2)); }
.zoho-advertising-section { padding:0; overflow:hidden; }
.zoho-advertising-section > summary {
  min-height:58px;
  margin:0;
  padding:13px 15px;
  cursor:pointer;
  list-style:none;
}
.zoho-advertising-section > summary::-webkit-details-marker { display:none; }
.zoho-advertising-section > summary::after {
  content:"+";
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--accent);
  font-size:1rem;
}
.zoho-advertising-section[open] > summary::after { content:"−"; }
.zoho-advertising-section .zoho-advertising-grid { padding:0 14px 14px; }

/* Compact connection inventory leaves room for additional services. */
.api-connection-grid {
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px;
}
.api-connection-grid article {
  min-height:132px;
  padding:14px;
  border-radius:15px;
  gap:6px;
}
.api-connection-grid article > button { min-height:34px; margin-top:8px; }
.api-connection-grid article > small { line-height:1.35; }

@media (max-width:720px) {
  .zoho-info-section { padding:11px; }
  .zoho-section-heading { align-items:flex-start; }
  .zoho-section-heading > small { text-align:left; }
  .zoho-advertising-section > summary { align-items:center; }
  .api-connection-grid { grid-template-columns:1fr; }
}

.zoho-role-grid article,
.zoho-service-grid article,
.zoho-ads-list > div,
.integration-metric-grid article,
.meta-campaign-summary-row,
.mailchimp-campaign-list > div,
.asset-workspace-card,
.client-status-card,
.platform-link-card {
  transform:translateZ(0);
  transition:transform 170ms cubic-bezier(.2,.72,.24,1), border-color 170ms ease, background-color 170ms ease, box-shadow 170ms ease;
}
.zoho-role-grid article:hover,
.zoho-service-grid article:hover,
.zoho-ads-list > div:hover,
.integration-metric-grid article:hover,
.meta-campaign-summary-row:hover,
.mailchimp-campaign-list > div:hover,
.asset-workspace-card:hover,
.client-status-card:hover,
.platform-link-card:hover {
  z-index:1;
  transform:translateY(-2px) scale(1.006);
  border-color:color-mix(in srgb,var(--accent) 52%,var(--line));
  background-color:color-mix(in srgb,var(--accent) 7%,var(--surface-2));
  box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 12%,transparent);
}
.meta-campaign-summary-row:hover strong,
.meta-campaign-summary-row:hover span { color:var(--text); }
.meta-campaign-summary-row:hover { transform:translateY(-1px); }

@media (max-width:700px) {
  .app-shell .topbar .control-row { display:grid; grid-template-columns:1fr; align-items:stretch; }
  #dashboardZohoRefresh { width:100%; }
  .dashboard-tools-menu { align-self:stretch; }
  .dashboard-tools-menu > summary { width:100%; box-sizing:border-box; }
  .dashboard-tools-popover { position:relative; top:auto; right:auto; width:100%; margin-top:8px; box-sizing:border-box; box-shadow:none; }
  .analytics-property-filters,.analytics-property-assign-row { grid-template-columns:1fr; }
  .analytics-property-assign-row button { width:100%; }
  .analytics-property-browser-heading { align-items:flex-start; }
  .integration-card-actions { align-items:stretch; }
}

/* Newsletter Studio keeps the production controls quiet and the review surface prominent. */
.newsletter-workspace { display:grid; gap:16px; max-width:1480px; margin:0 auto; }
.newsletter-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:24px 26px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface)); }
.newsletter-header h3 { margin:2px 0 5px; font-size:1.75rem; }
.newsletter-header p { margin:0; color:var(--muted); }
.newsletter-status { display:inline-flex; align-items:center; padding:8px 11px; border-radius:999px; font-size:.72rem; font-weight:800; white-space:nowrap; }
.newsletter-status.ready { color:#dff8e8; background:#176a42; }
.newsletter-status.waiting { color:#352300; background:#f2c75f; }
.newsletter-status.neutral { color:var(--text); background:var(--surface-3); border:1px solid var(--line); }
.newsletter-controls { display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)) auto auto; gap:10px; align-items:end; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.newsletter-controls label,.newsletter-editor label { display:grid; gap:6px; color:var(--soft); font-size:.68rem; font-weight:800; }
.newsletter-controls select,.newsletter-controls input,.newsletter-editor input,.newsletter-editor textarea { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text); padding:10px; font:inherit; }
.newsletter-editor textarea { resize:vertical; line-height:1.45; }
.newsletter-source-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.newsletter-source-grid article { display:grid; gap:7px; min-height:108px; padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.newsletter-source-grid span { color:var(--muted); font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.newsletter-source-grid strong { font-size:.82rem; line-height:1.35; }
.newsletter-source-grid a { color:var(--accent-2); font-size:.72rem; font-weight:800; text-decoration:none; }
.newsletter-source-grid small,.newsletter-source-note,.newsletter-progress { margin:0; color:var(--muted); font-size:.76rem; line-height:1.45; }
.newsletter-source-note { padding:11px 14px; border-left:3px solid var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.newsletter-progress { padding:10px 13px; color:var(--accent-2); }
.newsletter-error { margin:0; padding:10px 13px; border:1px solid #aa4b4b; border-radius:10px; color:#ffd6d6; background:#511f25; }
.newsletter-editor-layout { display:grid; grid-template-columns:minmax(320px,.75fr) minmax(450px,1.25fr); gap:16px; align-items:start; }
.newsletter-editor,.newsletter-preview-shell { display:grid; gap:12px; padding:17px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.newsletter-inline-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.newsletter-preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.newsletter-preview-toolbar > div { display:flex; gap:5px; padding:3px; border-radius:9px; background:var(--surface-2); }
.newsletter-preview-toolbar button { border:0; border-radius:7px; padding:6px 10px; background:transparent; color:var(--muted); font:inherit; font-size:.68rem; font-weight:800; cursor:pointer; }
.newsletter-preview-toolbar button.active { color:var(--text); background:var(--accent); }
.newsletter-preview-frame { width:100%; height:720px; border:1px solid var(--line); background:#f3f4f6; transition:width 180ms ease; }
.newsletter-preview-frame.mobile { width:min(390px,100%); margin:0 auto; }
.newsletter-actions { display:flex; align-items:center; gap:10px; padding-bottom:8px; }
.newsletter-actions small { color:var(--muted); font-size:.72rem; }
@media (max-width:1050px) { .newsletter-controls { grid-template-columns:repeat(3,1fr); } .newsletter-controls button { min-height:42px; } .newsletter-editor-layout { grid-template-columns:1fr; } }
@media (max-width:700px) { .newsletter-header { align-items:stretch; flex-direction:column; } .newsletter-controls,.newsletter-source-grid { grid-template-columns:1fr; } .newsletter-inline-fields { grid-template-columns:1fr; } .newsletter-actions { align-items:stretch; flex-direction:column; } }

/* Connected client reporting: contracts, Mailchimp campaigns, Analytics, and AI identity. */
.client-profile-identity { display:flex; align-items:center; gap:14px; min-width:0; }
.client-profile-logo { width:64px; height:64px; flex:0 0 64px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); color:var(--accent); font-size:1rem; font-weight:900; letter-spacing:.08em; }
.client-profile-logo img { width:100%; height:100%; object-fit:contain; padding:7px; box-sizing:border-box; background:#fff; }
.zoho-contract-dates { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.zoho-contract-dates > span { margin:0; padding:0; }
.zoho-contract-dates em { display:block; margin-bottom:5px; color:var(--muted); font-size:.64rem; font-style:normal; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.zoho-contract-dates strong { color:var(--text); font-size:.86rem; }
.zoho-contract-dates small { display:block; margin-top:4px; color:var(--warning); font-weight:800; }
.zoho-contract-dates.contract-renewal-soon { border-color:color-mix(in srgb,var(--warning) 70%,var(--line)); background:color-mix(in srgb,var(--warning) 9%,var(--surface-2)); box-shadow:inset 3px 0 var(--warning); }
.zoho-contract-dates.contract-expired { border-color:color-mix(in srgb,var(--danger) 70%,var(--line)); background:color-mix(in srgb,var(--danger) 8%,var(--surface-2)); box-shadow:inset 3px 0 var(--danger); }

.mailchimp-summary-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 10px; }
.mailchimp-summary-heading > span { color:var(--muted); font-size:.72rem; font-weight:750; }
.mailchimp-overview-grid,.analytics-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mailchimp-overview-grid article,.analytics-metric-grid article { min-height:76px; display:grid; align-content:center; gap:4px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); transition:transform 170ms ease,border-color 170ms ease,box-shadow 170ms ease; }
.mailchimp-overview-grid article:hover,.analytics-metric-grid article:hover,.mailchimp-campaign-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 48%,var(--line)); box-shadow:0 12px 24px color-mix(in srgb,var(--accent) 10%,transparent); }
.mailchimp-overview-grid span,.analytics-metric-grid span { color:var(--muted); font-size:.65rem; font-weight:850; letter-spacing:.045em; text-transform:uppercase; }
.mailchimp-overview-grid strong,.analytics-metric-grid strong { color:var(--text); font-size:1.08rem; }
.analytics-activity-card { display:grid; gap:12px; margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.analytics-activity-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.analytics-activity-card header h4 { margin:2px 0 0; color:var(--text); font-size:1rem; }
.analytics-activity-card header small,.analytics-activity-card > p { margin:0; color:var(--muted); font-size:.72rem; }
.analytics-activity-layout { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(320px,1.3fr); align-items:stretch; gap:14px; }
.analytics-activity-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.analytics-activity-summary article { display:grid; align-content:center; gap:3px; min-height:96px; padding:12px; border:1px solid var(--line); border-radius:13px; background:var(--surface); transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease; }
.analytics-activity-summary article:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 9%,transparent); }
.analytics-activity-summary strong { color:var(--text); font-size:1.3rem; }
.analytics-activity-summary span { color:var(--muted); font-size:.7rem; font-weight:800; text-transform:uppercase; }
.analytics-activity-card .visual-trend { min-height:96px; margin:0; }
.mailchimp-overview-grid small { color:var(--muted); font-size:.68rem; }
.mailchimp-overview-grid article { position:relative; overflow:hidden; padding-left:52px; }
.mailchimp-overview-grid article > i { position:absolute; left:13px; top:50%; display:grid; place-items:center; width:28px; height:28px; border-radius:9px; transform:translateY(-50%); background:color-mix(in srgb,#ffe01b 20%,var(--surface)); color:color-mix(in srgb,#c88a00 80%,var(--text)); font-size:1rem; font-style:normal; font-weight:900; }
.mailchimp-overview-grid .mailchimp-stat-open > i,.mailchimp-overview-grid .mailchimp-stat-click > i { background:color-mix(in srgb,#20b765 16%,var(--surface)); color:#20a363; }
.mailchimp-overview-grid .mailchimp-stat-bounce > i,.mailchimp-overview-grid .mailchimp-stat-unsubscribe > i { background:color-mix(in srgb,#ef8d9a 14%,var(--surface)); color:#d76173; }
.presentation-microstats { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:6px; margin:7px 0 0; }
.presentation-microstats > span { display:grid; grid-template-columns:24px minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; column-gap:7px; min-width:0; padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
.presentation-microstats > span > img { grid-row:1 / 3; width:20px; height:20px; margin:0; }
.presentation-microstats > span > small { grid-column:2; color:var(--muted); font-size:.55rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.presentation-microstats > span > strong { grid-column:2; font-size:.82rem !important; }
.presentation-microstats > span > .social-trend { grid-column:3; grid-row:1 / 3; align-self:center; margin:0; }

.business-profile-brand-icon { background:#fff; }
.business-profile-tool { display:grid; gap:14px; }
.business-rating-overview { display:grid; grid-template-columns:minmax(160px,1fr) minmax(160px,1fr) auto; gap:10px; align-items:stretch; }
.business-rating-overview article { display:grid; align-content:center; gap:5px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.business-rating-overview article > span { color:var(--muted); font-size:.65rem; font-weight:850; letter-spacing:.045em; text-transform:uppercase; }
.business-rating-overview article > strong { font-size:1.35rem; }
.business-rating-overview article small { color:var(--muted); }
.business-rating-overview > button { align-self:center; }
.business-review-stars { color:#f5b400 !important; letter-spacing:1px; font-size:.86rem !important; }
.business-review-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.business-review-card { display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); transition:transform 170ms ease,border-color 170ms ease,box-shadow 170ms ease; }
.business-review-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,#4285f4 52%,var(--line)); box-shadow:0 12px 24px color-mix(in srgb,#4285f4 10%,transparent); }
.business-review-author { display:grid; grid-template-columns:34px 1fr auto; gap:9px; align-items:center; }
.business-review-author > img,.business-review-author > span { width:34px; height:34px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:color-mix(in srgb,#4285f4 16%,var(--surface)); color:#4285f4; font-weight:900; }
.business-review-author > div { display:grid; gap:2px; }
.business-review-author time { color:var(--muted); font-size:.67rem; }
.business-review-card > p,.business-review-reply p { margin:0; line-height:1.5; color:var(--text); }
.business-review-reply { display:grid; gap:4px; padding:10px; border-left:3px solid #4285f4; border-radius:0 9px 9px 0; background:color-mix(in srgb,#4285f4 7%,var(--surface)); }
.business-review-reply strong { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.business-location-picker { display:grid; grid-template-columns:minmax(190px,1fr) minmax(280px,2fr) auto auto; gap:10px; align-items:end; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.business-location-picker > div { display:grid; gap:3px; }
.business-location-picker > div span { color:var(--muted); font-size:.72rem; }
.business-location-picker select { width:100%; }
.business-profile-diagnostic { display:grid; gap:5px; padding:12px 14px; border:1px solid color-mix(in srgb, var(--warning) 42%, var(--line)); border-radius:12px; background:color-mix(in srgb, var(--warning) 8%, var(--surface-2)); }
.business-profile-diagnostic p { margin:0; color:var(--text); font-size:.82rem; line-height:1.45; }
.business-profile-diagnostic small { color:var(--muted); line-height:1.4; }
.mailchimp-campaign-list { display:grid; gap:10px; margin-top:14px; }
.mailchimp-campaign-list .mailchimp-campaign-list-title { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:0 2px; border:0; border-radius:0; background:transparent; }
.mailchimp-campaign-list-title > strong { color:var(--text); }
.mailchimp-campaign-list-title > span { color:var(--muted); font-size:.68rem; }
.mailchimp-campaign-card { display:grid; gap:12px; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); transition:transform 170ms ease,border-color 170ms ease,box-shadow 170ms ease; }
.mailchimp-campaign-list .mailchimp-campaign-title { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:0; border:0; border-radius:0; background:transparent; }
.mailchimp-campaign-list .mailchimp-campaign-title > div { display:grid; gap:3px; min-width:0; padding:0; border:0; border-radius:0; background:transparent; }
.mailchimp-campaign-title div > span,.mailchimp-campaign-title small { color:var(--muted); font-size:.67rem; }
.mailchimp-campaign-title strong { color:var(--text); overflow-wrap:anywhere; }
.mailchimp-campaign-title a { flex:0 0 auto; color:var(--accent); font-size:.72rem; font-weight:850; text-decoration:none; }
.campaign-link-unavailable { flex:0 0 auto; color:var(--muted); font-size:.65rem; }
.mailchimp-campaign-list .mailchimp-campaign-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; padding:0; border:0; border-radius:0; background:transparent; }
.mailchimp-campaign-metrics > span { display:grid; gap:2px; padding:8px 9px; border:1px solid var(--line-soft); border-radius:10px; background:color-mix(in srgb,var(--surface-3) 70%,transparent); }
.mailchimp-campaign-metrics em { color:var(--muted); font-size:.59rem; font-style:normal; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.mailchimp-campaign-metrics strong { color:var(--text); font-size:.82rem; }
.mailchimp-campaign-metrics small { color:var(--muted); font-size:.58rem; }

.analytics-status-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.analytics-status-row > div { display:grid; gap:3px; }
.analytics-status-row > div span { color:var(--muted); font-size:.7rem; }
.analytics-status-row > span { padding:4px 8px; border-radius:999px; background:var(--surface-3); color:var(--muted); font-size:.58rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.analytics-status-row.connected { border-color:color-mix(in srgb,var(--green) 36%,var(--line)); background:color-mix(in srgb,var(--green) 6%,var(--surface-2)); }
.analytics-status-row.connected > span { background:color-mix(in srgb,var(--green) 18%,var(--surface-3)); color:var(--green); }

/* Unified integration headers and presentation controls */
.integration-connection-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; padding:11px 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.integration-connection-header > div:first-child { display:grid; gap:3px; min-width:0; }
.integration-connection-header > div:first-child span,.integration-connection-header > div:first-child small { color:var(--muted); font-size:.66rem; }
.integration-connection-header > div:first-child .analytics-account-memory { color:var(--text); font-size:.86rem; font-weight:750; }
.analytics-account-warning { display:flex; align-items:center; gap:8px 12px; margin:-3px 0 12px; padding:9px 12px; border:1px solid color-mix(in srgb,#e1aa3c 42%,var(--line)); border-radius:11px; background:color-mix(in srgb,#e1aa3c 9%,var(--surface-2)); }
.analytics-account-warning strong { color:var(--text); font-size:.72rem; white-space:nowrap; }
.analytics-account-warning span { color:var(--muted); font-size:.68rem; line-height:1.4; }
.integration-connection-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
.connection-pill { display:inline-flex; align-items:center; min-height:24px; padding:4px 8px; border:1px solid var(--line); border-radius:999px; background:var(--surface-3); color:var(--muted); font-size:.58rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.connection-pill.is-connected { border-color:color-mix(in srgb,var(--green) 32%,var(--line)); background:color-mix(in srgb,var(--green) 10%,var(--surface-3)); color:var(--green); }
.connection-pill::before { content:""; width:6px; height:6px; margin-right:6px; border-radius:50%; background:currentColor; opacity:.75; }
.mailchimp-status-row.connected,.analytics-status-row.connected { border-color:var(--line); background:var(--surface-2); }
.mailchimp-status-row.connected > span:last-child,.analytics-status-row.connected > span { border:1px solid color-mix(in srgb,var(--green) 32%,var(--line)); background:color-mix(in srgb,var(--green) 10%,var(--surface-3)); color:var(--green); }
.integration-report-header { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:0 0 12px; }
.integration-report-header .integration-period-label { margin:0; }

/* Quiet, reusable connection surface for every client integration. */
.connection-setup-card { display:grid; gap:13px; padding:16px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:17px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 6%,var(--surface-2)),var(--surface-2)); box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent); }
.connection-setup-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; }
.connection-setup-head > div { display:grid; gap:2px; min-width:0; }
.connection-setup-head strong { font-size:.9rem; }
.connection-setup-head span:not(.connection-pill) { color:var(--muted); font-size:.69rem; }
.connection-setup-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#0866ff; color:#fff; font-size:.8rem; font-weight:950; }
.mailchimp-setup-icon { background:#f4c542; color:#1b1b1b; }
.connection-setup-card > label { display:grid; gap:6px; color:var(--muted); font-size:.62rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.connection-setup-card > label select { width:100%; min-height:43px; color:var(--text); font-size:.74rem; text-transform:none; }
.connection-setup-card > small { color:var(--muted); font-size:.68rem; }
.connection-setup-card .connection-actions-row { justify-content:flex-start; }
.compact-connection-details { border-color:var(--line-soft); background:transparent; }
.compact-connection-details summary { min-height:38px; padding:9px 12px; color:var(--muted); font-size:.68rem; }
.compact-connection-details .client-connection-body { padding:10px 12px 12px; }
.compact-connection-details summary::after { width:20px; height:20px; }
.analytics-property-browser.connection-setup-card { margin-top:4px; background:linear-gradient(145deg,color-mix(in srgb,#f59d2a 5%,var(--surface-2)),var(--surface-2)); }
.business-location-picker.connection-setup-card,.social-location-picker.connection-setup-card { margin-top:10px; }
.integration-report-controls { display:flex; align-items:end; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-left:auto; }
.analytics-client-tool > .integration-period-label { display:none; }
.presentation-header-controls { display:flex; align-items:end; justify-content:flex-end; flex-wrap:wrap; gap:9px; padding:7px; border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line)); border-radius:15px; background:color-mix(in srgb,var(--surface) 88%,transparent); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.presentation-period-summary { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; flex:1 1 190px; gap:9px; min-width:190px; min-height:38px; padding:6px 10px; box-sizing:border-box; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--accent) 7%,var(--surface-2)); text-align:left; }
.presentation-period-summary > span:last-child { display:grid; gap:1px; min-width:0; }
.presentation-period-summary small { color:var(--muted); font-size:.55rem; font-weight:850; letter-spacing:.055em; line-height:1.15; text-transform:uppercase; }
.presentation-period-summary strong { overflow:hidden; color:var(--text); font-size:.72rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.presentation-period-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:color-mix(in srgb,var(--accent) 15%,var(--surface)); color:var(--accent); }
.presentation-period-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.presentation-mode-toggle { display:inline-flex; align-items:center; min-height:38px; padding:3px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.presentation-mode-toggle button { min-height:30px; padding:6px 11px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-size:.68rem; font-weight:850; cursor:pointer; transition:background 160ms ease,color 160ms ease,box-shadow 160ms ease; }
.presentation-mode-toggle button.is-active { background:var(--surface); color:var(--text); box-shadow:0 3px 10px rgba(0,0,0,.1); }
.simple-presentation,.detailed-presentation,.presentation-source-stack,.simple-source-stack { display:grid; gap:10px; }
.executive-dashboard { gap:12px; }
.executive-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.executive-kpi-card { --card-accent:var(--accent); position:relative; display:grid; align-content:end; min-width:0; min-height:168px; padding:20px 64px 18px 20px; overflow:hidden; border:1px solid color-mix(in srgb,var(--card-accent) 28%,var(--line)); border-radius:18px; background:color-mix(in srgb,var(--card-accent) 5%,var(--surface-2)); }
.executive-kpi-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--card-accent); }
.executive-kpi-card > small { color:var(--muted); font-size:.61rem; font-weight:900; letter-spacing:.055em; text-transform:uppercase; }
.executive-kpi-value { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-width:0; margin-top:6px; }
.executive-kpi-value > strong { overflow:hidden; color:var(--text); font-size:clamp(1.65rem,2.65vw,2.35rem); line-height:.95; letter-spacing:-.055em; text-overflow:ellipsis; white-space:nowrap; }
.executive-kpi-value .social-trend { flex:0 0 auto; padding:.17rem .4rem; font-size:.56rem; }
.executive-kpi-card > em { overflow:hidden; margin-top:7px; color:var(--muted); font-size:.61rem; font-style:normal; font-weight:650; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.executive-kpi-icon,.visual-card-source-icon { display:grid; place-items:center; color:var(--card-accent); }
.executive-kpi-icon { position:absolute; top:17px; right:17px; width:40px; height:40px; border:1px solid color-mix(in srgb,var(--card-accent) 30%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--card-accent) 10%,var(--surface)); }
.executive-kpi-icon img,.executive-kpi-icon svg,.visual-card-source-icon img,.visual-card-source-icon svg { width:19px; height:19px; object-fit:contain; }
.executive-kpi-icon svg,.visual-card-source-icon svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.executive-kpi-icon .linkedin-source-glyph,.visual-card-source-icon .linkedin-source-glyph { width:20px; height:20px; }
.presentation-dashboard-section { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.presentation-dashboard-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; min-height:48px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.presentation-dashboard-heading > div { display:grid; gap:2px; }
.presentation-dashboard-heading small { color:var(--muted); font-size:.56rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.presentation-dashboard-heading strong { color:var(--text); font-size:.86rem; }
.presentation-dashboard-heading > span { color:var(--muted); font-size:.6rem; font-weight:750; }
.presentation-dashboard-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-flow:row dense; align-items:start; gap:9px; padding:9px; }
.presentation-dashboard-grid > .visual-metric-card,
.presentation-dashboard-grid > .presentation-pie-card { grid-column:auto; width:100%; box-sizing:border-box; }
.presentation-dashboard-grid > .visual-metric-card.is-trend-card,
.presentation-dashboard-grid > .visual-metric-card.is-bar-card,
.presentation-dashboard-grid > .visual-metric-card.is-breakdown-card,
.presentation-dashboard-grid > .visual-metric-card.is-rate-card,
.presentation-dashboard-grid > .visual-metric-card.is-delivery-card { grid-column:auto; }
.presentation-dashboard-grid > .visual-metric-card.is-activity-card { grid-column:auto; }
.presentation-dashboard-grid .visual-metric-card { min-height:0; padding:12px 13px; border-radius:13px; }
.presentation-dashboard-grid .visual-metric-card.is-trend-card,
.presentation-dashboard-grid .visual-metric-card.is-bar-card { min-height:212px; aspect-ratio:auto; }
.presentation-dashboard-grid .visual-metric-card.is-activity-card,
.presentation-dashboard-grid .visual-metric-card.is-breakdown-card,
.presentation-dashboard-grid .visual-metric-card.is-rate-card,
.presentation-dashboard-grid .visual-metric-card.is-delivery-card { min-height:158px; align-self:start; }
.presentation-dashboard-grid .visual-metric-card .visual-metric-header { gap:3px; }
.presentation-dashboard-grid .visual-metric-card .visual-metric-value > strong { font-size:clamp(1.45rem,1.8vw,1.9rem); }
.presentation-dashboard-grid .visual-metric-card footer { padding-top:6px; font-size:.6rem; }
.presentation-dashboard-grid .visual-sparkline { height:112px; max-height:112px; }
.presentation-dashboard-grid .visual-metric-card.is-activity-card .visual-metric-chart,
.presentation-dashboard-grid .visual-metric-card.is-breakdown-card .visual-metric-chart,
.presentation-dashboard-grid .visual-metric-card.is-rate-card .visual-metric-chart,
.presentation-dashboard-grid .visual-metric-card.is-delivery-card .visual-metric-chart { flex:0 0 auto; display:block; }
.presentation-dashboard-grid .presentation-rate-visual { grid-template-columns:72px minmax(0,1fr); gap:10px; margin:10px 0 6px; }
.presentation-dashboard-grid .presentation-rate-ring,
.presentation-dashboard-grid .presentation-rate-ring svg { width:72px; height:72px; }
.presentation-dashboard-grid .presentation-activity-visual { grid-template-columns:42px minmax(0,1fr); gap:10px; min-height:78px; padding:8px 0 4px; }
.presentation-dashboard-grid .presentation-activity-icon { width:42px; height:42px; border-radius:12px; font-size:1rem; }
.presentation-dashboard-grid .presentation-pie-card { min-height:212px; padding:12px 13px; border-radius:13px; }
.presentation-dashboard-grid .presentation-pie-wrap { grid-template-columns:88px minmax(0,1fr); gap:10px; margin:16px auto 0; }
.presentation-dashboard-grid .presentation-pie { width:88px; height:88px; }
.presentation-dashboard-insight { align-self:start; }
.visual-card-source-icon { flex:0 0 25px; width:25px; height:25px; border:1px solid color-mix(in srgb,var(--card-accent) 25%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--card-accent) 8%,var(--surface)); }
.visual-card-source-icon img,.visual-card-source-icon svg { width:15px; height:15px; }
.visual-card-source-icon .linkedin-source-glyph { width:17px; height:17px; border-radius:4px; font-size:9px; }
.simple-client-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; min-height:58px; padding:9px 12px; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--accent) 5%,var(--surface-2)); }
.simple-client-summary > div { display:grid; gap:1px; min-width:0; }
.simple-client-summary small { color:var(--muted); font-size:.57rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.simple-client-summary strong { overflow:hidden; color:var(--text); font-size:1rem; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.simple-client-summary em { color:var(--muted); font-size:.62rem; font-style:normal; }
.simple-client-summary-count { display:grid; gap:1px; padding-left:12px; border-left:1px solid var(--line); text-align:right; }
.simple-client-summary-count b { color:var(--accent); font-size:1rem; line-height:1; }
.simple-client-logo { width:46px; height:46px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:#fff; color:#151515; font-size:.76rem; font-weight:950; letter-spacing:.06em; }
.simple-client-logo img { width:100%; height:100%; padding:5px; box-sizing:border-box; object-fit:contain; }
.simple-kpi-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.simple-kpi-strip article,.simple-metric-card { position:relative; min-width:0; display:flex; align-items:center; gap:10px; padding:10px 11px; overflow:hidden; border:1px solid color-mix(in srgb,var(--card-accent) 22%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--card-accent) 4%,var(--surface-2)); box-shadow:0 8px 22px rgba(0,0,0,.055); transition:transform 170ms ease,border-color 170ms ease,box-shadow 170ms ease; }
.simple-kpi-strip article { min-height:168px; padding:18px; border-radius:18px; background:color-mix(in srgb,var(--card-accent) 8%,var(--surface-2)); }
.simple-metric-card { display:grid; align-content:end; min-height:148px; padding:16px 54px 16px 16px; border-radius:16px; }
.simple-kpi-strip article:hover,.simple-metric-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:0 12px 25px color-mix(in srgb,var(--accent) 10%,transparent); }
.simple-metric-icon { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--card-accent) 16%,var(--surface)); color:var(--card-accent); font-size:1.05rem; font-weight:950; }
.simple-metric-card > .simple-metric-icon { position:absolute; top:14px; right:14px; }
.simple-metric-icon.linkedin-brand-icon { background:#0a66c2; color:#fff; font-family:Arial,sans-serif; font-size:1.1rem; font-weight:900; letter-spacing:-.08em; }
.simple-kpi-strip article > div,.simple-metric-card > div { min-width:0; display:grid; gap:2px; }
.simple-kpi-strip small,.simple-metric-card small { overflow:hidden; color:var(--muted); font-size:.6rem; font-weight:800; letter-spacing:.035em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.simple-kpi-strip strong { color:var(--text); font-size:clamp(1.45rem,3vw,2rem); letter-spacing:-.04em; }
.simple-kpi-strip em { color:var(--muted); font-size:.62rem; font-style:normal; font-weight:650; }
.simple-metric-card strong { color:var(--text); font-size:clamp(1.45rem,2.2vw,2rem); letter-spacing:-.04em; }
.simple-metric-card em { color:var(--muted); font-size:.64rem; font-style:normal; font-weight:620; line-height:1.35; white-space:normal; }
.presentation-source-section { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--card-accent) 2%,var(--surface)); }
.presentation-source-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; padding:7px 10px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--card-accent) 5%,var(--surface-2)); }
.presentation-source-heading > div { display:flex; align-items:center; gap:9px; min-width:0; }
.presentation-source-heading > div > span { overflow:hidden; color:var(--text); font-size:.66rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.presentation-source-heading > small { color:var(--muted); font-size:.58rem; font-weight:750; white-space:nowrap; }
.presentation-source-heading .visual-source-badge { min-height:24px; padding:3px 7px 3px 4px; }
.presentation-source-heading .visual-source-badge img,.presentation-source-heading .linkedin-source-glyph { width:17px; height:17px; }
.simple-source-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:10px; }
.presentation-customizer { position:relative; }
.presentation-customizer > summary { display:flex; align-items:center; justify-content:center; min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); font-size:.7rem; font-weight:800; cursor:pointer; list-style:none; }
.presentation-customizer > summary::-webkit-details-marker { display:none; }
.presentation-customizer[open] > summary { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.presentation-customizer-panel { position:absolute; z-index:20; top:calc(100% + 8px); right:0; width:min(520px,calc(100vw - 48px)); padding:13px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 20px 46px rgba(0,0,0,.24); }
.presentation-customizer-panel > strong { display:block; margin:2px 0 8px; color:var(--muted); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; }
.presentation-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:12px; }
.presentation-option-grid label { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0; padding:8px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); cursor:pointer; }
.presentation-option-grid label > span { overflow:hidden; color:var(--text); font-size:.68rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.presentation-option-grid .visual-source-badge b { display:none; }
.presentation-pie-card { position:relative; min-width:0; min-height:280px; padding:16px; overflow:hidden; border:1px solid color-mix(in srgb,var(--card-accent) 25%,var(--line)); border-radius:16px; background:var(--surface-2); box-shadow:0 8px 24px rgba(0,0,0,.06); transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease; }
.presentation-pie-card:hover { border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); transform:translateY(-2px); }
.presentation-pie-wrap { display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; gap:16px; width:min(100%,420px); margin:28px auto 0; }
.presentation-pie { display:block; width:120px; height:120px; margin:auto; overflow:visible; transform:rotate(-90deg); }
.presentation-pie circle { fill:none; stroke-width:18; }
.presentation-pie-track { stroke:color-mix(in srgb,var(--card-accent) 10%,var(--line)); }
.presentation-pie-segment { cursor:pointer; transform-box:fill-box; transform-origin:center; transition:stroke-width 170ms ease,opacity 170ms ease,filter 170ms ease; }
.presentation-pie:hover .presentation-pie-segment:not(:hover) { opacity:.48; }
.presentation-pie .presentation-pie-segment:hover { stroke-width:23; opacity:1; filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)); }
.presentation-pie-legend { display:grid; gap:8px; }
.presentation-pie-legend span { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px; min-width:0; }
.presentation-pie-legend i { width:9px; height:9px; border-radius:50%; background:var(--legend-color); }
.presentation-pie-legend b { overflow:hidden; color:var(--text); font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.presentation-pie-legend small { color:var(--muted); font-size:.62rem; white-space:nowrap; }
.presentation-pie-empty,.presentation-empty-selection { display:grid; place-items:center; min-height:100px; padding:16px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); font-size:.72rem; text-align:center; }
.presentation-empty-selection { grid-column:1 / -1; }

@media (max-width:1350px) {
  .executive-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .presentation-dashboard-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .simple-source-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width:1800px) {
  .presentation-dashboard-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

@media (max-width:1100px) {
  .visual-overview-heading { align-items:stretch; flex-direction:column; }
  .presentation-header-controls { justify-content:flex-start; width:100%; box-sizing:border-box; }
}

@media (max-width:800px) {
  .presentation-dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .presentation-dashboard-grid .visual-metric-card.is-trend-card,
  .presentation-dashboard-grid .visual-metric-card.is-bar-card { aspect-ratio:auto; }
  .simple-kpi-strip,.simple-source-metric-grid { grid-template-columns:1fr; }
}

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

@media (max-width:700px) {
  .integration-connection-header,.integration-report-header { align-items:stretch; flex-direction:column; }
  .integration-connection-actions,.integration-report-controls { justify-content:flex-start; margin-left:0; }
  .presentation-header-controls { width:100%; }
  .presentation-period-summary { flex:1 1 210px; }
  .presentation-customizer { flex:1; }
  .presentation-customizer > summary { width:100%; }
  .presentation-option-grid { grid-template-columns:1fr; }
  .presentation-pie-wrap { grid-template-columns:1fr; }
}

@media (max-width:560px) {
  .executive-kpi-grid { grid-template-columns:1fr; }
  .presentation-header-controls { align-items:stretch; flex-direction:column-reverse; }
  .presentation-period-summary { width:100%; }
  .presentation-customizer-panel { position:fixed; top:12%; right:12px; left:12px; width:auto; max-height:76vh; overflow:auto; }
  .integration-report-controls .subtle-control,.integration-report-controls button { width:100%; }
  .presentation-mode-toggle { width:100%; }
  .presentation-mode-toggle button { flex:1; }
  .simple-client-summary { grid-template-columns:auto minmax(0,1fr); }
  .simple-client-summary-count { grid-column:2; padding:6px 0 0; border-top:1px solid var(--line); border-left:0; text-align:left; }
  .simple-client-summary-count b,.simple-client-summary-count small { display:inline; }
}
.analytics-property-picker { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; margin:12px 0; }
.analytics-property-picker label { display:grid; gap:5px; color:var(--muted); font-size:.66rem; font-weight:800; text-transform:uppercase; }
.analytics-brand-icon img { width:26px; height:26px; object-fit:contain; }

.home-heading-with-icon { display:flex !important; align-items:center; gap:9px; }
.home-heading-with-icon > span:not(.home-section-icon) { display:grid; gap:2px; }
.home-heading-with-icon em { color:var(--muted); font-size:.7rem; font-style:normal; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.home-section-icon { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; object-fit:contain; border-radius:9px; background:var(--surface-3); color:var(--accent); font-size:.8rem; font-weight:950; }
.home-icon-alert,.home-icon-todo { padding:4px; box-sizing:border-box; background:#fff; }
.home-icon-calendar { color:var(--sky); }

.provider-option { grid-template-columns:auto 34px minmax(0,1fr) auto; align-items:center; }
.provider-logo { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; }
.provider-logo img { width:23px; height:23px; object-fit:contain; }
.provider-option > span:nth-child(3) { min-width:0; }
.ai-section-logo,.ai-heading-logo { width:28px; height:28px; flex:0 0 28px; object-fit:contain; padding:4px; box-sizing:border-box; border-radius:9px; background:#fff; }
.ai-heading-logo { display:inline-block; vertical-align:middle; margin-right:8px; }
.ai-route-heading { display:flex; align-items:flex-start; gap:10px; }
.ai-route-heading .ai-heading-logo { margin:0; }

@media (max-width:900px) {
  .analytics-activity-layout { grid-template-columns:1fr; }
  .mailchimp-overview-grid,.analytics-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mailchimp-campaign-list .mailchimp-campaign-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .business-review-list { grid-template-columns:1fr; }
  .business-location-picker { grid-template-columns:1fr; align-items:stretch; }
}

@media (max-width:620px) {
  .client-profile-identity { align-items:flex-start; }
  .client-profile-logo { width:52px; height:52px; flex-basis:52px; border-radius:13px; }
  .zoho-contract-dates,.mailchimp-overview-grid,.analytics-metric-grid,.analytics-property-picker,.business-rating-overview { grid-template-columns:1fr; }
  .mailchimp-summary-heading,.mailchimp-campaign-list .mailchimp-campaign-list-title,.mailchimp-campaign-list .mailchimp-campaign-title { align-items:flex-start; flex-direction:column; }
  .mailchimp-campaign-list .mailchimp-campaign-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .provider-option { grid-template-columns:auto 30px minmax(0,1fr); }
  .provider-option .provider-badge { grid-column:3; justify-self:start; }
}
/* HighLevel Social Planner client integration */
.highlevel-brand-icon svg { width: 100%; height: 100%; fill: none; stroke: #8b5cf6; stroke-width: 2.2; stroke-linecap: round; }
.social-location-picker, .integration-reporting-toolbar { display: flex; align-items: end; gap: .65rem; flex-wrap: wrap; margin-top: .85rem; }
.social-location-picker > div { margin-right: auto; }
.social-location-picker span { display: block; color: var(--muted); font-size: .78rem; }
.social-location-picker select { min-width: min(28rem, 100%); }
.integration-reporting-toolbar { justify-content: flex-end; }
.integration-reporting-toolbar label { max-width: 12rem; }
.social-reporting-controls { display:flex; align-items:end; justify-content:space-between; gap:.7rem; flex-wrap:wrap; margin-top:.85rem; }
.social-reporting-controls .integration-reporting-toolbar { margin-top:0; margin-left:auto; }
.social-platform-filter { position:relative; order:-1; }
.social-platform-filter > summary { display:flex; align-items:center; gap:.5rem; min-height:38px; padding:.55rem .75rem; border:1px solid var(--border); border-radius:12px; background:var(--surface-subtle); color:var(--text); font-size:.72rem; font-weight:800; cursor:pointer; list-style:none; }
.social-platform-filter > summary::-webkit-details-marker { display:none; }
.social-platform-filter > summary span { color:var(--muted); }
.social-platform-filter > div { position:absolute; z-index:15; top:calc(100% + 7px); left:0; width:min(320px,calc(100vw - 40px)); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; padding:.65rem; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 18px 42px rgba(0,0,0,.22); }
.social-platform-filter label { display:grid; grid-template-columns:22px auto minmax(0,1fr); align-items:center; gap:.45rem; min-width:0; padding:.45rem; border-radius:9px; background:var(--surface-subtle); cursor:pointer; }
.social-platform-filter label img { width:22px; height:22px; object-fit:contain; }
.social-platform-filter label span { overflow:hidden; color:var(--text); font-size:.7rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.social-summary-panel { margin-top:.85rem; padding:.85rem; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-subtle); }
.social-summary-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.social-summary-heading > div:first-child { display:grid; gap:.15rem; min-width:0; }
.social-summary-heading strong { color:var(--text); font-size:.9rem; }.social-summary-heading small { color:var(--muted); font-size:.66rem; }
.social-connection-dock { display:flex; align-items:center; gap:.45rem; flex:0 0 auto; }
.social-connection-icon { position:relative; display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); outline:0; transition:transform 150ms ease,border-color 150ms ease,background 150ms ease; }
.social-connection-icon img { width:23px; height:23px; object-fit:contain; transition:filter 150ms ease,opacity 150ms ease; }
.social-connection-icon.is-disconnected img { filter:grayscale(1); opacity:.26; }.social-connection-icon.is-connected { border-color:color-mix(in srgb,var(--accent) 38%,var(--border)); }
.social-connection-icon:hover,.social-connection-icon:focus { z-index:3; transform:translateY(-2px); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface-raised)); }
.social-connection-icon i { position:absolute; right:-4px; bottom:-4px; display:none; min-width:15px; height:15px; padding:0 3px; place-items:center; border-radius:999px; background:var(--accent); color:#fff; font-size:.48rem; font-style:normal; font-weight:900; }
.social-connection-icon.is-connected i:not(:empty) { display:grid; }
.social-connection-icon::after { content:attr(data-tooltip); position:absolute; right:0; bottom:calc(100% + 8px); width:max-content; max-width:min(260px,70vw); padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--text); color:var(--surface); box-shadow:0 8px 20px rgba(0,0,0,.18); font-size:.61rem; font-weight:750; line-height:1.3; opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity 130ms ease,transform 130ms ease; }
.social-connection-icon:hover::after,.social-connection-icon:focus::after { opacity:1; transform:translateY(0); }
.social-overview-table-wrap { margin-top:.75rem; overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface-raised); scrollbar-width:thin; }
.social-overview-table { width:100%; min-width:720px; border-collapse:separate; border-spacing:0; }
.social-overview-table th,.social-overview-table td { padding:.7rem .8rem; border-right:1px solid var(--border); text-align:center; transition:background 150ms ease,transform 150ms ease; }
.social-overview-table th:last-child,.social-overview-table td:last-child { border-right:0; }
.social-overview-table th { color:var(--muted); font-size:.61rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.social-overview-table td { position:relative; color:var(--text); font-size:1.35rem; font-weight:900; cursor:help; }
.social-overview-table td:hover { z-index:2; background:color-mix(in srgb,var(--accent) 10%,var(--surface-raised)); transform:translateY(-2px); }
.social-overview-table td::after { content:attr(data-tooltip); position:absolute; z-index:4; left:50%; bottom:calc(100% + 5px); width:max-content; max-width:190px; padding:5px 7px; border-radius:7px; background:var(--text); color:var(--surface); font-size:.58rem; font-weight:700; line-height:1.25; opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity 130ms ease,transform 130ms ease; }
.social-overview-table td:hover::after { opacity:1; transform:translate(-50%,0); }
.visual-source-badge svg { width:14px; height:14px; fill:none; stroke:#8b5cf6; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.social-platform-breakdown { margin-top:1rem; }
.social-platform-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.65rem; }
.social-platform-heading > div { display:grid; gap:.12rem; }
.social-platform-heading > div > strong { font-size:1rem; }
.social-platform-heading > div > small { color:var(--muted); font-size:.72rem; }
.social-platform-heading > span { padding:.28rem .55rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:.78rem; font-weight:750; }
.social-platform-table-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-subtle); scrollbar-width:thin; }
.social-platform-table { width:100%; min-width:780px; border-collapse:separate; border-spacing:0; }
.social-platform-table th,.social-platform-table td { padding:.7rem .75rem; border-bottom:1px solid var(--border); color:var(--text); text-align:right; white-space:nowrap; transition:background 140ms ease,color 140ms ease; }
.social-platform-table thead th { position:sticky; top:0; z-index:1; background:var(--surface-raised); color:var(--muted); font-size:.62rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.social-platform-table th:first-child { left:0; text-align:left; }
.social-platform-table tbody th:first-child { position:sticky; z-index:1; background:var(--surface-subtle); }
.social-platform-table tbody td { font-size:.8rem; font-weight:750; }
.social-platform-table tbody tr:last-child > * { border-bottom:0; }
.social-platform-table tbody tr:hover > * { background:color-mix(in srgb,var(--accent) 8%,var(--surface-subtle)); }
.social-platform-table tbody tr:hover th:first-child { background:color-mix(in srgb,var(--accent) 11%,var(--surface-subtle)); }
.social-platform-table tbody td:hover { background:color-mix(in srgb,var(--accent) 16%,var(--surface-subtle)); color:var(--text); }
.social-platform-name { display:flex; align-items:center; gap:.55rem; min-width:0; }
.social-platform-name i { width:26px; height:26px; flex:0 0 26px; display:grid; place-items:center; border-radius:8px; background:#6f5cff; color:#fff; font-size:.72rem; font-style:normal; font-weight:900; }
.social-platform-name img { width:28px; height:28px; flex:0 0 28px; object-fit:contain; border-radius:7px; }
.integration-metric-grid article,.mailchimp-campaign-metrics > span,.analytics-metric-grid article,.zoho-role-grid article,.zoho-service-grid article,.zoho-advertising-grid article { transition:transform 160ms ease,border-color 160ms ease,background 160ms ease,box-shadow 160ms ease; }
.integration-metric-grid article:hover,.mailchimp-campaign-metrics > span:hover,.analytics-metric-grid article:hover,.zoho-role-grid article:hover,.zoho-service-grid article:hover,.zoho-advertising-grid article:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 42%,var(--border)); background:color-mix(in srgb,var(--accent) 6%,var(--surface-subtle)); box-shadow:0 9px 20px rgba(0,0,0,.07); }
.social-platform-name .platform-facebook { background:#1877f2; }
.social-platform-name .platform-instagram { background:#d946ef; }
.social-platform-name .platform-linkedin { background:#0a66c2; }
.social-platform-name .platform-youtube { background:#ff0033; }
.social-platform-name .platform-tiktok,.social-platform-name .platform-threads { background:#111; }
.social-trend { display:inline-flex; width:max-content; align-items:center; padding:.18rem .45rem; border-radius:999px; font-size:.72rem; font-weight:800; }
.social-trend.up { color:#22a76a; background:color-mix(in srgb,#22a76a 14%,transparent); }
.social-trend.down { color:#e25767; background:color-mix(in srgb,#e25767 14%,transparent); }
.social-trend.neutral { color:var(--muted); background:var(--surface-raised); }
.presentation-microstats > span { transition:border-color 160ms ease,background 160ms ease; }
.presentation-microstats > span:hover { border-color:color-mix(in srgb,var(--accent) 46%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--surface-2)); }
.presentation-microstats > span > img { object-fit:contain; border-radius:4px; }
.presentation-microstats .social-trend { font-size:.58rem; }
@media (max-width: 720px) {
  .social-summary-heading { align-items:flex-start; flex-direction:column; }.social-connection-dock { width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .social-location-picker select, .social-location-picker button, .integration-reporting-toolbar label, .integration-reporting-toolbar button { width: 100%; max-width: none; }
  .social-platform-heading { align-items:flex-start; }
  .social-platform-card-grid { grid-template-columns:1fr; }
}

/* Curated workspace themes and paintbrush picker. */
:root {
  --border: var(--line);
  --surface-subtle: var(--surface-2);
  --surface-raised: var(--surface);
}

:root[data-theme="violet"] {
  color-scheme: dark;
  --bg: #160812;
  --surface: #24101d;
  --surface-2: #301426;
  --surface-3: #421b33;
  --line: #65304e;
  --line-soft: rgba(255, 224, 241, .11);
  --text: #fff5fa;
  --muted: #d2a7bd;
  --soft: #f2d7e5;
  --accent: #ff78bb;
  --accent-2: #ffd0e7;
  --accent-deep: #d94b90;
  --accent-contrast: #2a0719;
  --shadow: 0 18px 46px rgba(22, 1, 13, .4);
}

:root[data-theme="cobalt"] {
  color-scheme: dark;
  --bg: #030b19;
  --surface: #07172e;
  --surface-2: #0c2140;
  --surface-3: #13305a;
  --line: #285184;
  --line-soft: rgba(219, 235, 255, .11);
  --text: #f3f8ff;
  --muted: #a8bfdd;
  --soft: #dce9fb;
  --accent: #63a7ff;
  --accent-2: #c9e1ff;
  --accent-deep: #347bd7;
  --accent-contrast: #061122;
  --shadow: 0 18px 46px rgba(0, 7, 22, .4);
}

:root[data-theme="ocean"] {
  color-scheme: dark;
  --bg: #03111b;
  --surface: #071d2a;
  --surface-2: #0b2938;
  --surface-3: #103849;
  --line: #1d5968;
  --line-soft: rgba(214, 253, 255, .11);
  --text: #eefbff;
  --muted: #91c3ce;
  --soft: #d8eef2;
  --accent: #41e4d2;
  --accent-2: #c5fff9;
  --accent-deep: #0fa99e;
  --accent-contrast: #07110b;
  --shadow: 0 18px 46px rgba(0, 8, 12, .34);
}

:root[data-theme="forest"] {
  color-scheme: dark;
  --bg: #05130c;
  --surface: #0b2116;
  --surface-2: #12301f;
  --surface-3: #1b402b;
  --line: #315f42;
  --line-soft: rgba(226, 248, 232, .1);
  --text: #f1fbf4;
  --muted: #a8c9b2;
  --soft: #dcece1;
  --accent: #9be564;
  --accent-2: #e3f8d8;
  --accent-deep: #58a849;
  --accent-contrast: #07110b;
  --shadow: 0 18px 46px rgba(0, 9, 4, .34);
}

:root[data-theme="amber"] {
  color-scheme: dark;
  --bg: #130b06;
  --surface: #24170f;
  --surface-2: #302015;
  --surface-3: #422c1c;
  --line: #65452e;
  --line-soft: rgba(255, 237, 215, .11);
  --text: #fff8ef;
  --muted: #d1b59b;
  --soft: #f1dfcf;
  --accent: #ffad42;
  --accent-2: #ffe0ad;
  --accent-deep: #d87921;
  --accent-contrast: #241005;
  --shadow: 0 18px 46px rgba(18, 7, 0, .4);
}

body { background: var(--bg); color: var(--text); transition: background-color 220ms ease, color 220ms ease; }
:root[data-theme="light"] { --accent-contrast:#fff; }
:root[data-theme="dark"] { --accent-contrast:#17130a; }
.primary-button { color:var(--accent-contrast,#fff); }
.primary-button:hover { color:var(--accent-contrast,#fff); }
.app-shell .sidebar { background: var(--surface-2); border-right-color: var(--line); color: var(--text); }
.app-shell .nav-item { color: color-mix(in srgb, var(--text) 70%, transparent); }
.app-shell .nav-item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, var(--surface-2)); }
.app-shell .nav-item.active { color: var(--text); background: color-mix(in srgb, var(--accent) 13%, var(--surface-2)); }
.app-shell .nav-item.active::before { background: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 68%, transparent); }
.app-shell .nav-item.active .nav-icon { color: var(--accent); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 42%, transparent)); }

.sidebar-theme { position:relative; margin:14px 0 12px; padding-top:14px; border-top:1px solid var(--line); }
.app-shell .sidebar { z-index:100; overflow:visible; }
.theme-picker { position:relative; }
.theme-picker[open] { z-index:1001; }
.theme-picker > summary { display:flex; align-items:center; gap:9px; min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font-size:.72rem; font-weight:800; cursor:pointer; list-style:none; transition:border-color 160ms ease,background 160ms ease,transform 160ms ease; }
.theme-picker > summary::-webkit-details-marker { display:none; }
.theme-picker > summary:hover,.theme-picker[open] > summary { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.theme-picker > summary svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.active-theme-swatch { width:13px; height:13px; margin-left:auto; border:3px solid var(--surface-3); border-radius:50%; box-shadow:0 0 0 1px var(--line); }
.theme-picker-menu { position:absolute; z-index:1002; isolation:isolate; display:grid; gap:5px; width:276px; padding:8px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:0 20px 46px rgba(0,0,0,.3); }
.theme-picker-sidebar .theme-picker-menu { bottom:calc(100% + 8px); left:0; }
.theme-picker-login .theme-picker-menu { top:calc(100% + 8px); right:0; }
.theme-picker-menu button { display:grid; grid-template-columns:38px minmax(0,1fr) 18px; align-items:center; gap:9px; width:100%; min-height:48px; padding:7px 9px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--text); text-align:left; transition:border-color 150ms ease,background 150ms ease,transform 150ms ease; }
.theme-picker-menu button:hover { border-color:var(--line); background:var(--surface-2); transform:translateX(2px); }
.theme-picker-menu button.active { border-color:color-mix(in srgb,var(--accent) 48%,var(--line)); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.theme-picker-menu button > span:nth-child(2) { display:grid; gap:2px; min-width:0; }
.theme-picker-menu strong { color:var(--text); font-size:.72rem; }
.theme-picker-menu small { overflow:hidden; color:var(--muted); font-size:.61rem; text-overflow:ellipsis; white-space:nowrap; }
.theme-picker-menu button > svg { width:17px; height:17px; fill:none; stroke:var(--accent); stroke-width:2.3; opacity:0; }
.theme-picker-menu button.active > svg { opacity:1; }
.theme-option-swatches { display:flex; align-items:center; justify-content:center; }
.theme-option-swatches { width:38px; height:30px; overflow:hidden; border:1px solid var(--line); border-radius:7px; }
.theme-option-swatches i { width:20%; height:100%; border:0; border-radius:0; box-shadow:none; }
.theme-option-swatches i + i { margin-left:0; }
.theme-picker-login { margin-left:auto; }

.app-shell.sidebar-collapsed .sidebar-theme { padding-top:10px; }
.app-shell.sidebar-collapsed .theme-picker > summary { justify-content:center; padding:8px; }
.app-shell.sidebar-collapsed .theme-picker > summary span,.app-shell.sidebar-collapsed .active-theme-swatch { display:none; }
.app-shell.sidebar-collapsed .theme-picker-sidebar .theme-picker-menu { right:auto; bottom:0; left:calc(100% + 9px); }

.settings-theme-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:13px; }
.settings-theme-heading > div { display:grid; gap:3px; }
.settings-theme-heading p { margin:0; }
.settings-current-theme { display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--text); font-size:.7rem; font-weight:800; white-space:nowrap; }
.settings-current-theme i { width:10px; height:10px; border-radius:50%; }
.theme-palette-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px; }
.theme-palette-card { display:grid; grid-template-columns:54px minmax(0,1fr) 19px; align-items:center; gap:10px; min-height:72px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); color:var(--text); text-align:left; transition:transform 160ms ease,border-color 160ms ease,background 160ms ease; }
.theme-palette-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 48%,var(--line)); }
.theme-palette-card.active { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface-2)); }
.theme-palette-card > span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.theme-palette-card strong { font-size:.75rem; }
.theme-palette-card small { color:var(--muted); font-size:.62rem; line-height:1.25; }
.theme-palette-card > svg { width:18px; height:18px; fill:none; stroke:var(--accent); stroke-width:2.3; opacity:0; }
.theme-palette-card.active > svg { opacity:1; }
.theme-card-preview { display:flex; width:54px; height:42px; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.theme-card-preview i { position:static; width:20%; height:100%; border-radius:0; opacity:1; }

@media (max-width:700px) {
  .theme-picker-login .theme-picker-menu { position:fixed; top:62px; right:12px; left:12px; width:auto; }
  .settings-theme-heading { align-items:stretch; flex-direction:column; }
  .settings-current-theme { width:max-content; }
}
/* Protected team directory */
.user-management-toolbar,
.managed-user-identity,
.managed-user-controls,
.user-management-loading {
  display: flex;
  align-items: center;
}

.user-management-toolbar {
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-subtle);
}

.user-management-toolbar > div,
.user-management-loading > div,
.managed-user-identity > div {
  display: grid;
  gap: 3px;
}

.user-management-toolbar > .user-management-actions {
  display: flex;
  gap: 8px;
}

.user-management-toolbar small,
.user-management-loading small,
.managed-user-identity small {
  color: var(--muted);
}

.user-management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 12px;
}

.managed-user-card {
  display: grid;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-subtle);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.managed-user-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgb(0 0 0 / 10%);
}

.managed-user-identity {
  min-width: 0;
  gap: 11px;
}

.managed-user-identity > div:nth-child(2) {
  min-width: 0;
}

.managed-user-identity strong,
.managed-user-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.managed-user-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
  background: var(--surface-raised);
  font-weight: 800;
}

.managed-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.role-pill {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.role-pill.role-owner {
  color: var(--accent-contrast);
  border-color: var(--accent);
  background: var(--accent);
}

.role-pill.role-admin {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.managed-user-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}

.managed-user-controls button {
  grid-column: 1 / -1;
  justify-self: end;
}

.managed-user-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.user-management-loading {
  min-height: 110px;
  justify-content: center;
  gap: 12px;
}

.settings-empty-state {
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

/* Admin-only operations feed */
.system-alert-nav-badge {
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, #dc3345 72%, var(--border));
  border-radius: 999px;
  color: #fff;
  background: #b82f40;
  font-size: .65rem;
  font-weight: 850;
  line-height: 1;
}

.system-alert-nav-badge.hidden,
.system-alert-nav-badge.admin-hidden { display: none; }

.app-shell.sidebar-collapsed .system-alert-nav-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: .58rem;
}

.system-alert-notification {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  width: min(430px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, #dc3345 60%, var(--border));
  border-radius: 14px;
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: 0 14px 36px color-mix(in srgb, #000 28%, transparent);
  animation: system-alert-notification-in 180ms ease-out both;
}

@keyframes system-alert-notification-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.system-alert-notification-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: #b82f40;
  font-size: 1.05rem;
  font-weight: 900;
}

.system-alert-notification > div { min-width: 0; display: grid; gap: 2px; }
.system-alert-notification small { color: #dc5968; font-size: .65rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.system-alert-notification strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-alert-notification p { margin: 0; overflow: hidden; color: var(--muted); font-size: .73rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.system-alert-notification p span { color: var(--text); font-weight: 750; }

.system-alert-notification-dismiss {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 1.05rem;
}

.system-alert-notification-dismiss:hover { color: var(--text); background: var(--surface-subtle); }

.system-alert-toolbar,
.system-alert-summary,
.system-alert-actions,
.system-alert-item,
.system-alert-title,
.system-alert-meta,
.system-alert-loading {
  display: flex;
  align-items: center;
}

.system-alert-toolbar {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.system-alert-summary {
  gap: 8px;
}

.system-alert-summary > span {
  min-width: 92px;
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-subtle);
}

.system-alert-summary strong {
  color: var(--text);
  font-size: 1.05rem;
}

.system-alert-summary small,
.system-alert-meta,
.system-alert-empty small,
.system-alert-loading small {
  color: var(--muted);
}

.system-alert-actions {
  gap: 8px;
}

.system-alert-list {
  display: grid;
  gap: 9px;
}

.system-alert-item {
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-left: 4px solid #e45d68;
  border-radius: 14px;
  background: var(--surface-subtle);
}

.system-alert-item.severity-warning { border-left-color: #d7a62b; }
.system-alert-item.severity-critical { border-left-color: #dc3345; }
.system-alert-item.is-acknowledged { opacity: .68; border-left-color: var(--muted); }

.system-alert-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #b6414d;
  font-size: 1rem;
  font-weight: 900;
}

.severity-warning .system-alert-icon { color: #231b08; background: #e8bd4b; }
.is-acknowledged .system-alert-icon { color: var(--text); background: var(--surface-raised); }

.system-alert-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
}

.system-alert-title {
  gap: 8px;
}

.system-alert-title strong { color: var(--text); }
.system-alert-copy p { margin: 0; color: var(--text); line-height: 1.35; }

.system-alert-state {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, #e45d68 55%, var(--border));
  border-radius: 999px;
  color: #e45d68;
  font-size: .62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.is-acknowledged .system-alert-state { color: var(--muted); border-color: var(--border); }

.system-alert-meta {
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: .68rem;
}

.system-alert-meta code {
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--text);
  background: var(--surface-raised);
}

.system-alert-request-id {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 3px 8px;
  font: inherit;
  cursor: pointer;
}

.system-alert-request-id:hover,
.system-alert-request-id:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}

.system-alert-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: var(--text);
  text-align: center;
}

.system-alert-empty > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #167a4d;
  background: color-mix(in srgb, #24b573 14%, var(--surface));
  font-size: 1.2rem;
  font-weight: 900;
}

.system-alert-loading {
  min-height: 120px;
  justify-content: center;
  gap: 12px;
}

.system-alert-loading > div { display: grid; gap: 3px; }

.integration-health-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:12px; }
.integration-health-summary button { display:grid; gap:3px; min-height:68px; padding:11px 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); color:var(--text); text-align:left; cursor:pointer; transition:border-color 150ms ease,background 150ms ease; }
.integration-health-summary button:hover,.integration-health-summary button.is-active { border-color:color-mix(in srgb,var(--health-tone,var(--accent)) 55%,var(--line)); background:color-mix(in srgb,var(--health-tone,var(--accent)) 8%,var(--surface-2)); }
.integration-health-summary button.is-healthy { --health-tone:#20b765; }
.integration-health-summary button.is-expired { --health-tone:#e8a52b; }
.integration-health-summary button.is-failing { --health-tone:#e5505f; }

.storage-health-loading,
.storage-health-overview,
.storage-health-facts,
.storage-health-stores,
.storage-health-stores article { display:flex; align-items:center; }
.storage-health-loading { min-height:90px; justify-content:center; gap:10px; color:var(--muted); }
.storage-health-overview { gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.storage-health-overview > div { display:grid; min-width:0; gap:2px; }
.storage-health-overview strong { color:var(--text); }
.storage-health-overview small { color:var(--muted); }
.storage-health-overview button { margin-left:auto; }
.storage-health-indicator { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:#d7a62b; box-shadow:0 0 0 5px color-mix(in srgb,#d7a62b 13%,transparent); }
.storage-health-overview.is-ready .storage-health-indicator { background:#20b765; box-shadow:0 0 0 5px color-mix(in srgb,#20b765 13%,transparent); }
.storage-health-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:10px 0; }
.storage-health-facts > span { display:grid; gap:3px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.storage-health-facts small,.storage-health-stores small { color:var(--muted); }
.storage-health-stores { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.storage-health-stores article { min-width:0; gap:9px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.storage-health-stores article > span { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#e8a52b; }
.storage-health-stores article.is-matched > span { background:#20b765; }
.storage-health-stores article.is-out_of_sync > span { background:#e5505f; }
.storage-health-stores article > div { display:grid; min-width:0; gap:2px; }
.storage-health-stores article strong,.storage-health-stores article small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.storage-health-stores article em { margin-left:auto; color:var(--muted); font-size:.7rem; font-style:normal; }
.storage-health-stores > .settings-empty-state { grid-column:1 / -1; width:100%; }
@media (max-width:1100px) { .storage-health-stores { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .storage-health-facts,.storage-health-stores { grid-template-columns:1fr; } }
.integration-health-summary button.is-never_connected { --health-tone:var(--muted); }
.integration-health-summary strong { font-size:1.35rem; line-height:1; }
.integration-health-summary small { color:var(--muted); font-size:.66rem; font-weight:800; }
.integration-health-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) 150px 180px auto; align-items:end; gap:9px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.integration-health-toolbar label { display:grid; gap:5px; min-width:0; }
.integration-health-toolbar label > span { color:var(--muted); font-size:.59rem; font-weight:850; letter-spacing:.055em; text-transform:uppercase; }
.integration-health-toolbar input,.integration-health-toolbar select { width:100%; min-width:0; height:38px; }
.integration-health-result-meta { display:flex; justify-content:space-between; gap:12px; padding:12px 3px 7px; color:var(--muted); font-size:.67rem; font-weight:750; }
.integration-health-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; }
.integration-health-table { width:100%; min-width:900px; border-collapse:collapse; }
.integration-health-table th { padding:9px 10px; border-bottom:1px solid var(--line); background:var(--surface-2); color:var(--muted); font-size:.59rem; font-weight:850; letter-spacing:.05em; text-align:left; text-transform:uppercase; }
.integration-health-table td { height:54px; padding:8px 10px; border-bottom:1px solid var(--line); color:var(--text); font-size:.69rem; vertical-align:middle; }
.integration-health-table tbody tr:last-child td { border-bottom:0; }
.integration-health-table tbody tr:hover { background:color-mix(in srgb,var(--accent) 3%,transparent); }
.integration-health-table td:first-child { width:22%; }
.integration-health-platform { font-weight:780; white-space:nowrap; }
.integration-health-status { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid color-mix(in srgb,var(--health-tone,var(--muted)) 28%,var(--line)); border-radius:999px; color:var(--health-tone,var(--muted)); font-size:.61rem; font-weight:850; white-space:nowrap; }
.integration-health-status i { width:7px; height:7px; border-radius:999px; background:currentColor; }
.integration-health-status.is-healthy { --health-tone:#20b765; }
.integration-health-status.is-expired { --health-tone:#e8a52b; }
.integration-health-status.is-failing { --health-tone:#e5505f; }
.integration-health-status.is-never_connected { --health-tone:var(--muted); }
.integration-health-table time { display:grid; gap:2px; color:var(--text); font-weight:760; white-space:nowrap; }
.integration-health-table time small { color:var(--muted); font-size:.58rem; font-weight:650; }
.integration-health-detail { display:block; max-width:280px; overflow:hidden; color:var(--muted); line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.integration-health-saved { display:block; margin-top:2px; color:#20a65c; font-size:.57rem; font-weight:800; }
.integration-health-empty { display:grid; justify-items:center; gap:3px; padding:24px; color:var(--text); }
.integration-health-empty small { color:var(--muted); }
.integration-health-pagination { display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:10px; }
.integration-health-pagination span { min-width:58px; color:var(--muted); font-size:.66rem; font-weight:800; text-align:center; }
.integration-health-loading { display:flex; align-items:center; gap:10px; min-height:90px; padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.integration-health-loading > div { display:grid; gap:3px; }
.integration-health-loading small { color:var(--muted); }

@media (max-width: 760px) {
  .system-alert-notification {
    right: 16px;
    bottom: 16px;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
  }

  .system-alert-notification > [data-view-system-alerts] {
    grid-column: 2 / 4;
    width: 100%;
  }

  .system-alert-toolbar,
  .system-alert-item {
    align-items: stretch;
    flex-direction: column;
  }

  .system-alert-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .system-alert-summary > span { min-width: 0; }
  .system-alert-actions { justify-content: flex-end; }

  .user-management-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .user-management-toolbar > .user-management-actions {
    justify-content: flex-end;
  }

  .managed-user-controls {
    grid-template-columns: 1fr;
  }

  .managed-user-controls button {
    width: 100%;
  }

  .integration-health-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .integration-health-toolbar { grid-template-columns:1fr 1fr; }
  .integration-health-search { grid-column:1 / -1; }
}

.admin-readonly-notice {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.admin-readonly-notice strong {
  color: var(--text);
  font-size: 0.82rem;
}

.admin-readonly-notice span,
.admin-readonly-inline {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.admin-readonly-inline {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-raised);
}

.home-team-title {
  display: inline-flex;
  width: fit-content;
  margin: 2px 0 6px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.dashboard-tools-menu.admin-locked > summary {
  opacity: 0.7;
  cursor: not-allowed;
}

html[data-shared-access="read-only"] [data-create-client-files],
html[data-shared-access="read-only"] .asset-action-row,
html[data-shared-access="read-only"] .asset-secondary-actions {
  display: none !important;
}

/* Campaign Builder: compact assigned-client setup */
.new-client-wizard {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
}

.wizard-step {
  padding: 9px;
  border-radius: 13px;
  background: var(--surface-raised);
}

.wizard-step.active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
}

.wizard-step.complete span {
  color: #58df8f;
  background: color-mix(in srgb, #58df8f 14%, var(--surface));
}

.wizard-panel {
  gap: 12px;
  padding: 14px;
  background: var(--surface);
}

.campaign-step-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.campaign-step-heading > div {
  display: grid;
  gap: 3px;
}

.campaign-step-heading h3,
.campaign-client-summary h4 {
  margin: 0;
}

.campaign-client-picker {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
}

.campaign-client-picker label {
  gap: 6px;
}

.campaign-client-picker-meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 6px;
  align-items: baseline;
  min-width: 128px;
  padding-bottom: 5px;
  color: var(--muted);
  text-align: right;
}

.campaign-client-picker-meta strong {
  color: var(--text);
  font-size: 1.05rem;
}

.campaign-client-picker-meta small {
  grid-column: 1 / -1;
  font-size: 0.68rem;
}

.campaign-client-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-raised));
}

.campaign-client-identity {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.campaign-client-identity img,
.campaign-client-monogram {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  object-fit: contain;
}

.campaign-client-monogram {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 900;
}

.campaign-client-identity > div {
  min-width: 0;
}

.campaign-client-identity p,
.campaign-client-identity small,
.campaign-client-readiness span {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.campaign-client-identity h4 {
  overflow: hidden;
  color: var(--text);
  font-size: 1.08rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-client-readiness {
  display: grid;
  justify-items: end;
  min-width: 86px;
}

.campaign-client-readiness strong {
  color: var(--accent);
  font-size: 1.1rem;
}

.campaign-resource-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.campaign-resource-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-raised);
  color: var(--text);
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.campaign-resource-card:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised));
  transform: translateY(-2px);
}

.campaign-resource-card.missing {
  opacity: 0.58;
}

.campaign-resource-card > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.campaign-resource-card strong,
.campaign-resource-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-resource-card strong {
  font-size: 0.75rem;
}

.campaign-resource-card small {
  color: var(--muted);
  font-size: 0.65rem;
}

.campaign-resource-state {
  color: var(--accent);
  font-weight: 900;
}

.campaign-resource-card .client-platform-icon {
  width: 32px;
  height: 32px;
}

.client-platform-icon.website-icon,
.client-platform-icon.ghl-icon {
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  font-size: 1.05rem;
  font-weight: 900;
}

.campaign-import-details {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-raised);
}

.campaign-import-details summary {
  padding: 11px 13px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 850;
}

.campaign-import-details > p {
  margin: -2px 13px 10px;
  color: var(--muted);
  font-size: 0.7rem;
}

.campaign-import-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 13px 13px;
}

.campaign-client-empty {
  display: grid;
  gap: 5px;
  padding: 22px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised));
}

.campaign-client-empty p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 1120px) {
  .new-client-wizard {
    grid-template-columns: 1fr;
  }

  .wizard-rail {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .wizard-step {
    flex: 0 0 164px;
    scroll-snap-align: start;
  }

  .wizard-step small {
    display: none;
  }

  .campaign-resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .campaign-client-picker,
  .campaign-client-summary {
    grid-template-columns: 1fr;
  }

  .campaign-client-picker-meta,
  .campaign-client-readiness {
    justify-items: start;
    text-align: left;
  }

  .campaign-resource-grid,
  .campaign-import-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .campaign-resource-grid,
  .campaign-import-form {
    grid-template-columns: 1fr;
  }
}

/* Final grouped-navigation overrides. */
.app-shell .nav-stack { gap: 14px; }
.app-shell.sidebar-collapsed .nav-stack { gap: 8px; }

/* Compact home command center
   Keep the first two dashboard rows visible on common laptop displays without
   removing information. Long feeds scroll inside their consistently sized card. */
.app-shell #homeContent {
  --home-card-row: clamp(210px, 23vh, 252px);
}

.app-shell #homeContent .home-hero {
  min-height: 0;
  margin-bottom: 12px;
  padding: 16px 18px;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.42fr);
  gap: 14px;
  border-radius: 16px;
}

.app-shell #homeContent .home-profile {
  gap: 14px;
}

.app-shell #homeContent .home-profile img {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border-width: 2px;
  border-radius: 19px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.app-shell #homeContent .home-profile .section-kicker {
  font-size: 0.62rem;
  line-height: 1;
}

.app-shell #homeContent .home-profile h2 {
  margin: 3px 0 4px;
  font-size: clamp(2rem, 3.15vw, 3.45rem);
  line-height: 0.96;
}

.app-shell #homeContent .home-profile p:last-child {
  max-width: 780px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.app-shell #homeContent .home-team-title {
  margin: 1px 0 4px;
  padding: 3px 7px;
  font-size: 0.62rem;
}

.app-shell #homeContent .home-weather-card {
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
}

.app-shell #homeContent .weather-main {
  gap: 8px;
}

.app-shell #homeContent .weather-main > span {
  width: 30px;
  height: 30px;
  font-size: 1rem;
}

.app-shell #homeContent .home-weather-card strong {
  font-size: 0.8rem;
}

.app-shell #homeContent .home-weather-card small {
  font-size: 0.64rem;
}

.app-shell #homeContent .home-time-strip {
  gap: 6px;
  padding-top: 0;
}

.app-shell #homeContent .home-time-strip div {
  padding: 6px 7px;
}

.app-shell #homeContent .home-time-strip span,
.app-shell #homeContent .home-quote-mini span {
  font-size: 0.56rem;
}

.app-shell #homeContent .home-time-strip strong {
  margin-top: 2px;
  font-size: 0.76rem;
}

.app-shell #homeContent .home-quote-mini {
  padding: 6px 8px;
}

.app-shell #homeContent .home-quote-mini p {
  margin-top: 2px;
  font-size: 0.68rem;
  line-height: 1.25;
}

.app-shell #homeContent .home-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--home-card-row);
  gap: 12px;
  align-items: stretch;
}

.app-shell #homeContent .home-card,
.app-shell #homeContent .bonusly-card {
  height: 100%;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  border-radius: 14px;
}

.app-shell #homeContent .home-card {
  display: grid;
  align-content: start;
}

.app-shell #homeContent .integration-card-title,
.app-shell #homeContent .home-heading-with-icon {
  gap: 7px;
}

.app-shell #homeContent .integration-card-title img,
.app-shell #homeContent .home-section-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 7px;
}

.app-shell #homeContent .integration-card-title span,
.app-shell #homeContent .home-heading-with-icon em {
  font-size: 0.61rem;
}

.app-shell #homeContent .home-card > strong,
.app-shell #homeContent .home-card-heading strong,
.app-shell #homeContent .integration-card > strong {
  margin-top: 4px;
  font-size: 1.35rem;
  line-height: 1;
}

.app-shell #homeContent .home-card > small,
.app-shell #homeContent .integration-card > small {
  margin-top: 3px;
  font-size: 0.66rem;
  line-height: 1.25;
}

.app-shell #homeContent .home-card-heading {
  margin-bottom: 8px;
}

.app-shell #homeContent .home-preview-list {
  min-height: 0;
  margin-top: 8px;
}

.app-shell #homeContent .home-preview-list.scrollable,
.app-shell #homeContent .home-alert-list,
.app-shell #homeContent .todo-list {
  max-height: 155px;
  overscroll-behavior: contain;
}

.app-shell #homeContent .home-preview-item,
.app-shell #homeContent .home-alert-list,
.app-shell #homeContent .holiday-list,
.app-shell #homeContent .todo-list {
  gap: 6px;
}

.app-shell #homeContent .slack-card .home-preview-item,
.app-shell #homeContent .home-alert-list button,
.app-shell #homeContent .holiday-list div,
.app-shell #homeContent .todo-item {
  padding: 7px 8px;
  border-radius: 9px;
}

.app-shell #homeContent .slack-card .home-preview-item {
  gap: 8px;
}

.app-shell #homeContent .slack-card .home-preview-item strong,
.app-shell #homeContent .home-alert-list strong,
.app-shell #homeContent .holiday-list strong,
.app-shell #homeContent .todo-open strong {
  font-size: 0.74rem;
  line-height: 1.2;
}

.app-shell #homeContent .slack-card .home-preview-item small,
.app-shell #homeContent .home-alert-list small,
.app-shell #homeContent .holiday-list small,
.app-shell #homeContent .todo-open small {
  font-size: 0.62rem;
  line-height: 1.3;
}

.app-shell #homeContent .slack-card .home-preview-item .quiet-button,
.app-shell #homeContent .home-card-heading .secondary-button {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 0.6rem;
}

.app-shell #homeContent .client-breakdown {
  gap: 4px;
  margin-top: 8px;
}

.app-shell #homeContent .client-breakdown small {
  padding: 5px 7px;
  font-size: 0.62rem;
}

.app-shell #homeContent .todo-card,
.app-shell #homeContent .bonusly-card {
  gap: 8px;
}

.app-shell #homeContent .todo-add-button {
  width: 30px;
  height: 30px;
  min-height: 30px;
}

.app-shell #homeContent .bonusly-heading strong {
  font-size: 1.3rem;
}

.app-shell #homeContent .bonusly-orbit {
  width: 34px;
  height: 34px;
}

.app-shell #homeContent .bonusly-stats {
  gap: 6px;
}

.app-shell #homeContent .bonusly-stats div {
  padding: 7px;
  border-radius: 9px;
}

.app-shell #homeContent .bonusly-activity {
  min-height: 0;
  max-height: 90px;
  gap: 5px;
  overflow-y: auto;
}

.app-shell #homeContent .bonusly-activity a {
  padding: 6px 8px;
  border-radius: 9px;
}

.app-shell #homeContent .bonusly-actions {
  gap: 8px;
  padding-top: 0;
}

@media (max-width: 1120px) {
  .app-shell #homeContent {
    --home-card-row: 230px;
  }

  .app-shell #homeContent .home-hero {
    grid-template-columns: 1fr;
  }

  .app-shell #homeContent .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .app-shell #homeContent .home-hero {
    padding: 14px;
  }

  .app-shell #homeContent .home-profile {
    align-items: center;
    flex-direction: row;
  }

  .app-shell #homeContent .home-profile h2 {
    font-size: clamp(1.65rem, 9vw, 2.5rem);
  }

  .app-shell #homeContent .home-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .app-shell #homeContent .home-card,
  .app-shell #homeContent .bonusly-card {
    min-height: 210px;
    height: auto;
  }
}

/* Expandable navigation groups */
.app-shell .nav-group {
  position: relative;
  gap: 0;
}

.app-shell .nav-group-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: color-mix(in srgb, var(--text) 76%, transparent);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.app-shell .nav-group-toggle:hover,
.app-shell .nav-group.open > .nav-group-toggle {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}

.app-shell .nav-group:has(.nav-item.active) > .nav-group-toggle {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.app-shell .nav-group-toggle .nav-icon {
  width: 24px;
  height: 24px;
  padding: 3px;
}

.app-shell .nav-group-chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.app-shell .nav-group.open > .nav-group-toggle .nav-group-chevron {
  transform: rotate(180deg);
}

.app-shell .nav-group-menu {
  display: grid;
  gap: 3px;
  max-height: 0;
  margin-top: 0;
  padding-left: 10px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 220ms ease, margin 180ms ease, opacity 160ms ease, transform 180ms ease;
}

.app-shell .nav-group.open > .nav-group-menu {
  max-height: 180px;
  margin-top: 5px;
  opacity: 1;
  transform: translateY(0);
}

.app-shell .nav-group-menu .nav-item {
  min-height: 38px;
  padding-inline: 10px;
  font-size: 0.76rem;
}

.app-shell .nav-group-menu .nav-icon {
  width: 22px;
  height: 22px;
}

.app-shell .nav-group-settings {
  margin-top: 2px;
}

.app-shell.sidebar-collapsed .nav-group {
  position: relative;
}

.app-shell.sidebar-collapsed .nav-group-toggle {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 44px;
  padding: 0;
  font-size: 0;
}

.app-shell.sidebar-collapsed .nav-group-toggle > span:not(.nav-icon),
.app-shell.sidebar-collapsed .nav-group-chevron {
  display: none;
}

.app-shell.sidebar-collapsed .nav-group-menu {
  position: absolute;
  z-index: 60;
  top: 0;
  left: calc(100% + 12px);
  width: 220px;
  max-height: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.app-shell.sidebar-collapsed .nav-group.open > .nav-group-menu {
  max-height: 190px;
  border-color: var(--line);
  opacity: 1;
  pointer-events: auto;
}

.app-shell.sidebar-collapsed .nav-group-menu .nav-item {
  justify-content: flex-start;
  padding: 0 10px;
  font-size: 0.76rem;
}

@media (max-width: 760px) {
  .app-shell.sidebar-collapsed .nav-group-menu {
    position: static;
    width: auto;
    padding: 0 0 0 10px;
    border: 0;
    box-shadow: none;
  }

  .app-shell.sidebar-collapsed .nav-group-toggle {
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    justify-items: stretch;
    padding: 0 11px;
    font-size: 0.82rem;
  }

  .app-shell.sidebar-collapsed .nav-group-toggle > span:not(.nav-icon),
  .app-shell.sidebar-collapsed .nav-group-chevron {
    display: initial;
  }
}
.meta-auction-readiness {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  padding: 18px;
  display: grid;
  gap: 14px;
}

.meta-auction-readiness > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.meta-auction-readiness > header div {
  display: grid;
  gap: 3px;
}

.meta-auction-readiness > header span,
.meta-readiness-grid strong {
  color: var(--text);
}

.meta-auction-readiness > header span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.meta-auction-readiness > header strong {
  font-size: 1.1rem;
}

.meta-auction-readiness small,
.meta-readiness-grid small {
  color: var(--muted);
}

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

.meta-readiness-grid article {
  min-width: 0;
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--surface-2);
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.meta-readiness-grid article:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.meta-readiness-grid article i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 900;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
}

.meta-readiness-grid article.needs-work i {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
}

.meta-readiness-grid article div {
  display: grid;
  gap: 4px;
}

.original-concept-preview {
  grid-template-columns: minmax(0, 1fr) !important;
}

.meta-guidance-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.meta-guidance-links span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.meta-guidance-links a {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.meta-guidance-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

@media (max-width: 980px) {
  .meta-readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .meta-auction-readiness > header { align-items: flex-start; flex-direction: column; }
  .meta-readiness-grid { grid-template-columns: 1fr; }
}

/* Guided campaign creation */
.wizard-step-hint {
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wizard-step-hint.complete {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}

.copy-batch-heading,
.creative-mode-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.copy-batch-heading > div,
.creative-mode-caption {
  min-width: 0;
}

.copy-batch-heading span,
.creative-mode-caption span {
  color: var(--muted);
  font-size: 0.76rem;
}

.copy-batch-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line-soft));
  border-radius: var(--radius-sm);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.copy-batch-status::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: copy-card-spin 800ms linear infinite;
}

.copy-workflow-card.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.copy-workflow-card.approved {
  border-color: color-mix(in srgb, var(--success) 44%, var(--line-soft));
  background: color-mix(in srgb, var(--success) 7%, var(--panel));
}

.copy-next-pill {
  color: var(--accent) !important;
  font-size: 0.62rem !important;
  font-weight: 900;
  text-transform: uppercase;
}

.guided-action,
.guided-next {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Meta-style creative previews */
.creative-concept-card.state-generating {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.creative-concept-card.state-generated {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line-soft));
}

.creative-concept-card.state-approved {
  border-color: color-mix(in srgb, var(--success) 55%, var(--line-soft));
  background: color-mix(in srgb, var(--success) 6%, var(--panel));
}

.creative-concept-card.state-error {
  border-color: color-mix(in srgb, var(--danger) 60%, var(--line-soft));
}

.creative-concept-card.state-generating .creative-concept-header strong {
  animation: loading-pulse 900ms ease-in-out infinite alternate;
}

@keyframes loading-pulse {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.meta-ad-preview {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) - 2px);
  background: var(--surface);
}

.meta-ad-author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px 12px 7px;
}

.meta-ad-author > div {
  display: grid;
  gap: 1px;
}

.meta-ad-author small,
.meta-ad-link-row small,
.meta-ad-link-row span {
  color: var(--muted);
  font-size: 0.66rem;
}

.meta-ad-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--accent);
  font-weight: 900;
}

.meta-ad-menu {
  color: var(--muted);
  letter-spacing: 0.08em;
}

.meta-ad-primary {
  margin: 0;
  padding: 4px 12px 11px;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.42;
}

.meta-ad-preview .creative-concept-preview {
  display: block;
  width: 100%;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
}

.meta-ad-preview .ai-png-empty {
  border-width: 1px 0;
  border-radius: 0;
  min-height: 260px;
}

.meta-ad-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel-soft);
}

.meta-ad-link-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.meta-ad-link-row strong,
.meta-ad-link-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-ad-link-row button {
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--text) 10%, var(--panel));
  color: var(--text);
  font-weight: 850;
  pointer-events: none;
}

.meta-ad-reactions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

/* Admin creative example manager */
.creative-example-settings,
.creative-example-upload-row,
.creative-example-filter-row {
  display: grid;
  gap: 12px;
}

.creative-example-upload-row {
  grid-template-columns: minmax(190px, 0.75fr) minmax(240px, 1fr) minmax(180px, 1fr);
  align-items: end;
}

.creative-example-filter-row {
  grid-template-columns: repeat(2, minmax(180px, 260px));
}

.creative-example-upload-row label,
.creative-example-filter-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.creative-example-file input[type="file"] {
  min-height: 42px;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--panel-soft);
}

@media (max-width: 760px) {
  .copy-batch-heading,
  .creative-mode-caption { align-items: stretch; flex-direction: column; }
  .copy-workflow-card > header { grid-template-columns: auto minmax(0, 1fr); }
  .copy-card-actions { grid-column: 1 / -1; width: 100%; justify-content: flex-start; }
  .creative-example-upload-row,
  .creative-example-filter-row { grid-template-columns: 1fr; }
}

/* Seven flat workspace palettes. Stable IDs preserve every saved user preference. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0c;
  --surface: #171719;
  --surface-2: #242426;
  --surface-3: #303034;
  --line: #414146;
  --line-soft: rgba(255, 255, 255, .08);
  --text: #f5f5f2;
  --muted: #aaa9a4;
  --soft: #deded9;
  --accent: #f7b928;
  --accent-2: #ffd46b;
  --accent-deep: #d59a11;
  --accent-contrast: #111111;
  --violet: #f7b928;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f0e8;
  --surface: #fffdf8;
  --surface-2: #edf2f4;
  --surface-3: #dce7ed;
  --line: #bdc8cf;
  --line-soft: rgba(51, 51, 51, .08);
  --text: #333333;
  --muted: #666a86;
  --soft: #4f536b;
  --accent: #666a86;
  --accent-2: #95b8d1;
  --accent-deep: #4f536b;
  --accent-contrast: #ffffff;
  --violet: #666a86;
}

:root[data-theme="violet"] {
  color-scheme: dark;
  --bg: #21191e;
  --surface: #2d2327;
  --surface-2: #3a2c37;
  --surface-3: #45364b;
  --line: #62466b;
  --line-soft: rgba(255, 255, 255, .08);
  --text: #f5f1f4;
  --muted: #b9b5c2;
  --soft: #ded8df;
  --accent: #8c93a8;
  --accent-2: #b5c2b7;
  --accent-deep: #70778e;
  --accent-contrast: #17131a;
  --violet: #8c93a8;
}

:root[data-theme="cobalt"] {
  color-scheme: dark;
  --bg: #0c2229;
  --surface: #122c34;
  --surface-2: #193b4b;
  --surface-3: #224870;
  --line: #356a8e;
  --line-soft: rgba(255, 255, 255, .08);
  --text: #f4fbfd;
  --muted: #a9c9d7;
  --soft: #d4e8ee;
  --accent: #4ea5d9;
  --accent-2: #44cfcb;
  --accent-deep: #2a4494;
  --accent-contrast: #081820;
  --violet: #4ea5d9;
}

:root[data-theme="ocean"] {
  color-scheme: light;
  --bg: #e5f1f2;
  --surface: #f8fcfc;
  --surface-2: #dcebea;
  --surface-3: #b2cede;
  --line: #9bc5c7;
  --line-soft: rgba(38, 58, 58, .08);
  --text: #263a3a;
  --muted: #5a716a;
  --soft: #405955;
  --accent: #347c8e;
  --accent-2: #8cdfd6;
  --accent-deep: #286b7d;
  --accent-contrast: #ffffff;
  --violet: #85546f;
}

:root[data-theme="forest"] {
  color-scheme: dark;
  --bg: #0b3542;
  --surface: #114b5f;
  --surface-2: #15596a;
  --surface-3: #456990;
  --line: #4f7d8e;
  --line-soft: rgba(255, 255, 255, .09);
  --text: #f3fff2;
  --muted: #b8d7d5;
  --soft: #e4fde1;
  --accent: #62d2d0;
  --accent-2: #e4fde1;
  --accent-deep: #028090;
  --accent-contrast: #082c36;
  --violet: #62d2d0;
}

:root[data-theme="amber"] {
  color-scheme: dark;
  --bg: #07090f;
  --surface: #17171c;
  --surface-2: #262126;
  --surface-3: #3a2d2b;
  --line: #66514c;
  --line-soft: rgba(255, 255, 255, .08);
  --text: #f8f2f2;
  --muted: #c6b0aa;
  --soft: #ead9dc;
  --accent: #a37c40;
  --accent-2: #d6c3c9;
  --accent-deep: #98473e;
  --accent-contrast: #100d0b;
  --violet: #a37c40;
}

/* Flat visual system: hierarchy comes from solid blocks, borders, and spacing. */
:root,
:root[data-theme] {
  --shadow: none;
}

body,
:root[data-theme="light"] body {
  background: var(--bg);
  background-image: none !important;
}

.app-shell *,
.app-shell *::before,
.app-shell *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

.app-shell .nav-icon {
  filter: none !important;
}

.primary-button,
.bar-fill,
.metric-card::after {
  background: var(--accent) !important;
}

.avatar,
.home-hero,
.app-shell .home-hero,
.sticky-card,
.dashboard-insights,
.ad-visual-preview,
.newsletter-header,
.connection-setup-card,
.analytics-property-browser.connection-setup-card,
.integration-card.sky,
.integration-card.violet,
.integration-card.green,
.integration-card.pink,
.integration-card.gold,
.board-column.red,
.board-column.yellow,
.board-column.green,
.board-column.testing {
  background: var(--surface-2) !important;
  background-image: none !important;
}

.home-hero::before,
.app-shell .home-hero::before,
.home-sun {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

.ad-creative,
.ad-creative.testimonial,
.ad-creative.urgent,
.template-preview,
.template-preview.uploaded,
.template-preview.urgent,
.template-preview.testimonial,
.template-choice-preview,
.template-choice-preview.urgent,
.template-choice-preview.testimonial {
  background: color-mix(in srgb, var(--surface-3) 86%, #000) !important;
  background-image: none !important;
}

.template-card:hover,
.mailchimp-overview-grid article:hover,
.analytics-metric-grid article:hover,
.mailchimp-campaign-card:hover,
.analytics-activity-summary article:hover,
.business-review-card:hover,
.simple-kpi-strip article:hover,
.simple-metric-card:hover,
.integration-metric-grid article:hover,
.mailchimp-campaign-metrics > span:hover,
.zoho-role-grid article:hover,
.zoho-service-grid article:hover,
.zoho-advertising-grid article:hover,
.presentation-microstats > span:hover {
  transform: none !important;
}

.lawmatics-brand-icon {
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, #06a9d5 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #06a9d5 34%, var(--line));
  box-sizing: border-box;
  overflow: hidden;
}

.lawmatics-brand-icon img { width: 86%; height: 86%; object-fit: contain; }
.tool-platform-icon.lawmatics-brand-icon img { width: 88% !important; height: 88% !important; }

.lawmatics-credential-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lawmatics-overview-grid article i {
  background: color-mix(in srgb, #6553c6 24%, transparent);
  color: #a99cf2;
}

.lawmatics-campaign-report { display:grid; gap:10px; margin-top:16px; }
.lawmatics-campaign-report-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.lawmatics-campaign-report-heading > div { display:grid; gap:2px; }

/* Accessible semantic colors shared by every flat theme. */
:root[data-theme] {
  --status-good-bg: #173d2b;
  --status-good-text: #bdf5d2;
  --status-good-line: #347b55;
  --status-warn-bg: #493a16;
  --status-warn-text: #ffe39a;
  --status-warn-line: #8e742c;
  --status-bad-bg: #4a2229;
  --status-bad-text: #ffd0d7;
  --status-bad-line: #934858;
}

:root[data-theme="light"],
:root[data-theme="ocean"] {
  --status-good-bg: #dcefe4;
  --status-good-text: #125735;
  --status-good-line: #6ea787;
  --status-warn-bg: #f4e8c8;
  --status-warn-text: #684b00;
  --status-warn-line: #b39545;
  --status-bad-bg: #f4dce0;
  --status-bad-text: #7b2432;
  --status-bad-line: #bd7783;
}

.app-shell .connection-pill.is-connected,
.app-shell .connection-status.connected,
.app-shell .asset-status.ready,
.app-shell .asset-chip.ready,
.app-shell .status-pill.green,
.app-shell [class*="readiness"][class*="ready"] {
  border-color: var(--status-good-line) !important;
  background: var(--status-good-bg) !important;
  color: var(--status-good-text) !important;
}

.app-shell .connection-status.warning,
.app-shell .asset-status.needs-logo,
.app-shell .asset-status.needs-colors,
.app-shell .asset-status.not-ready,
.app-shell .asset-chip.missing,
.app-shell .status-pill.yellow {
  border-color: var(--status-warn-line) !important;
  background: var(--status-warn-bg) !important;
  color: var(--status-warn-text) !important;
}

.app-shell .connection-status.error,
.app-shell .asset-status.error,
.app-shell .status-pill.red,
.app-shell .error-text {
  color: var(--status-bad-text) !important;
}

:root[data-theme="light"] .client-source-badge,
:root[data-theme="ocean"] .client-source-badge,
:root[data-theme="light"] .section-kicker,
:root[data-theme="ocean"] .section-kicker {
  color: var(--accent-deep);
}

/* One compact client workspace instead of stacked context and file surfaces. */
.client-context-header {
  min-height: 62px;
  padding: 12px 16px;
}
.client-context-summary {
  grid-template-columns: minmax(230px, .72fr) minmax(360px, 1.28fr);
  gap: 10px;
  padding: 10px 16px;
}
.client-status-card {
  min-height: 52px;
  padding: 8px 10px;
}
.client-quick-links .platform-link-card {
  min-height: 52px;
  padding: 7px 10px;
  border-radius: 12px;
}
.client-quick-links .client-platform-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}
.client-quick-links .client-platform-icon img { width: 22px; height: 22px; }
.client-account-assets { padding: 12px 16px 14px; }
.asset-workspace-heading { margin-bottom: 9px; }
.asset-workspace-heading h4 { font-size: .9rem; }
.asset-readiness-ring {
  flex-basis: 46px;
  width: 46px;
  height: 46px;
  border-width: 2px;
}
.asset-readiness-ring strong { font-size: .7rem; }
.asset-readiness-ring span { margin-top: -9px; }
.asset-workspace-grid { grid-template-columns: minmax(0, 1.6fr) minmax(270px, .7fr); gap: 10px; }
.asset-workspace-card { gap: 9px; padding: 11px; border-radius: 14px; }
.asset-workspace-card .asset-website-link { padding: 7px 9px; }

/* Dense, legible website analysis. */
.brand-card .client-asset-preview {
  grid-template-columns: 108px minmax(0, 1fr) minmax(180px, .42fr);
  align-items: center;
  gap: 12px;
  padding: 11px;
  border-radius: 13px;
}
.brand-card .asset-preview-media { width: 108px; height: 88px; border-radius: 10px; }
.asset-analysis-heading strong { font-size: 1.02rem; }
.asset-analysis-summary {
  display: -webkit-box;
  margin: 1px 0;
  overflow: hidden;
  font-size: .74rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.asset-analysis-facts { gap: 6px 16px; }
.asset-analysis-facts dd { max-width: 360px; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.asset-palette-panel { gap: 6px; padding-left: 12px; }
.asset-palette-grid { grid-template-columns: repeat(3, minmax(38px, 1fr)); gap: 6px; }
.asset-palette-swatch { gap: 3px; }
.asset-palette-swatch i { aspect-ratio: 1.35; border-radius: 8px; }

/* Simple View: one screen-sized summary board with no chart layer. */
.simple-presentation { display: block; min-width: 0; }
.simple-summary-board {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.simple-summary-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.simple-summary-header > div { display: grid; gap: 1px; min-width: 0; }
.simple-summary-header small { color: var(--muted); font-size: .55rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.simple-summary-header strong { overflow: hidden; color: var(--text); font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.simple-summary-header em { color: var(--muted); font-size: .61rem; font-style: normal; }
.simple-summary-header .simple-client-logo { width: 44px; height: 44px; }
.simple-summary-count { display: grid; gap: 1px; padding-left: 12px; border-left: 1px solid var(--line); text-align: right; }
.simple-summary-count b { color: var(--accent); font-size: 1rem; line-height: 1; }
.simple-summary-count small { font-size: .52rem; }
.simple-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  align-items: stretch;
  gap: 0;
  padding: 6px;
}
.simple-summary-item {
  --card-accent: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 84px;
  padding: 10px 12px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.simple-summary-item::before { content: ""; position: absolute; inset: 7px auto 7px 0; width: 2px; border-radius: 2px; background: var(--card-accent); }
.simple-summary-item.is-summary-total { background: color-mix(in srgb, var(--card-accent) 6%, var(--surface)); }
.simple-summary-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-accent) 13%, var(--surface-2));
  color: var(--card-accent);
  font-size: .86rem;
  font-weight: 950;
}
.simple-summary-icon.linkedin-brand-icon { background: #0a66c2; color: #fff; font-family: Arial, sans-serif; font-size: .92rem; letter-spacing: -.08em; }
.simple-summary-item > div { display: grid; gap: 1px; min-width: 0; }
.simple-summary-item small { overflow: hidden; color: var(--muted); font-size: .61rem; font-weight: 850; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.simple-summary-value { display: flex; align-items: center; gap: 5px; min-width: 0; }
.simple-summary-value strong { overflow: hidden; color: var(--text); font-size: clamp(1.18rem, 1.7vw, 1.48rem); line-height: 1.05; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.simple-summary-value .social-trend { flex: 0 0 auto; padding: .12rem .3rem; font-size: .48rem; }
.simple-summary-item em { overflow: hidden; color: var(--muted); font-size: .61rem; font-style: normal; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.simple-summary-item.is-summary-total .simple-summary-value strong { color: var(--card-accent); }
.simple-summary-item.is-ga-summary {
  grid-column: 1 / -1;
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 106px;
  background: color-mix(in srgb, var(--card-accent) 4%, var(--surface));
}
.simple-ga-summary-content { display: grid; gap: 6px; min-width: 0; }
.simple-ga-summary-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.simple-ga-summary-values > span { display: grid; gap: 2px; min-width: 0; padding: 1px 13px; border-left: 1px solid var(--line-soft); }
.simple-ga-summary-values > span:first-child { padding-left: 0; border-left: 0; }
.simple-ga-summary-values strong { overflow: hidden; color: var(--text); font-size: clamp(1.12rem, 1.55vw, 1.42rem); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 1500px) {
  .simple-summary-grid { grid-template-columns: repeat(auto-fit, minmax(min(235px, 100%), 1fr)); }
}

@media (max-width: 1200px) {
  .brand-card .client-asset-preview { grid-template-columns: 96px minmax(0, 1fr) minmax(160px, .45fr); }
  .brand-card .asset-preview-media { width: 96px; height: 82px; }
  .asset-palette-panel { grid-column: auto; padding: 0 0 0 10px; border-top: 0; border-left: 1px solid var(--line); }
  .asset-palette-grid { grid-template-columns: repeat(2, minmax(38px, 1fr)); }
}

@media (max-width: 900px) {
  .client-context-summary, .asset-workspace-grid { grid-template-columns: 1fr; }
  .brand-card .client-asset-preview { grid-template-columns: 88px minmax(0, 1fr); }
  .brand-card .asset-preview-media { width: 88px; height: 76px; }
  .asset-palette-panel { grid-column: 1 / -1; padding: 9px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .asset-palette-grid { grid-template-columns: repeat(6, minmax(38px, 1fr)); }
}

@media (max-width: 620px) {
  .simple-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simple-summary-item { min-height: 78px; }
  .simple-summary-header { grid-template-columns: auto minmax(0, 1fr); }
  .simple-summary-count { grid-column: 2; display: flex; gap: 4px; padding: 5px 0 0; border-top: 1px solid var(--line); border-left: 0; text-align: left; }
  .brand-card .client-asset-preview { grid-template-columns: 1fr; }
  .brand-card .asset-preview-media { width: 100%; height: 82px; }
  .asset-palette-grid { grid-template-columns: repeat(3, minmax(38px, 1fr)); }
}

/* Presentation View hierarchy: concise summary first, then metrics grouped by business goal. */
.executive-summary,
.presentation-purpose-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.executive-summary-heading,
.presentation-purpose-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.executive-summary-heading > div { display: grid; gap: 1px; min-width: 0; }
.executive-summary-heading small,
.presentation-purpose-heading small {
  color: var(--muted);
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.executive-summary-heading strong,
.presentation-purpose-heading strong { color: var(--text); font-size: .88rem; }
.executive-summary-heading > span,
.presentation-purpose-count { color: var(--muted); font-size: .59rem; font-weight: 750; white-space: nowrap; }
.executive-kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}
.executive-kpi-card {
  min-height: 126px;
  padding: 18px 58px 15px 17px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--surface);
}
.executive-kpi-card::before { width: 3px; inset: 12px auto 12px 0; border-radius: 0 3px 3px 0; }
.executive-kpi-card > small { font-size: .58rem; }
.executive-kpi-value > strong { font-size: clamp(1.55rem, 2.2vw, 2rem); }
.executive-kpi-icon { top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; }
.executive-kpi-card > em { font-size: .6rem; }
.presentation-purpose-stack { display: grid; gap: 12px; padding: 12px; }
.presentation-purpose-group { --purpose-accent: var(--accent); border-radius: 14px; }
.presentation-purpose-group.purpose-advertising { --purpose-accent: #3f8cff; }
.presentation-purpose-group.purpose-lead-generation { --purpose-accent: #20a96b; }
.presentation-purpose-group.purpose-email { --purpose-accent: #d89f38; }
.presentation-purpose-group.purpose-website { --purpose-accent: #f08a34; }
.presentation-purpose-group.purpose-social { --purpose-accent: #8462d5; }
.presentation-purpose-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--purpose-accent) 6%, var(--surface-2));
}
.presentation-purpose-heading > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 8px; min-width: 0; }
.presentation-purpose-heading > div small { grid-column: 1 / -1; }
.presentation-purpose-heading em { overflow: hidden; color: var(--muted); font-size: .61rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.presentation-purpose-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--purpose-accent) 28%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--purpose-accent) 11%, var(--surface));
  color: var(--purpose-accent);
  font-size: .92rem;
  font-weight: 900;
}
.presentation-purpose-group .presentation-dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 9px;
}
.presentation-purpose-group .visual-metric-card,
.presentation-purpose-group .presentation-pie-card {
  border-color: color-mix(in srgb, var(--card-accent) 22%, var(--line));
  background: var(--surface-2);
  box-shadow: none;
}
.presentation-purpose-group .visual-metric-card:hover,
.presentation-purpose-group .presentation-pie-card:hover { transform: none; box-shadow: none; }
.presentation-purpose-group .visual-metric-meta span:first-child { font-size: .61rem; }
.presentation-purpose-group .visual-metric-card.is-trend-card,
.presentation-purpose-group .visual-metric-card.is-bar-card,
.presentation-purpose-group .presentation-pie-card { min-height: 204px; }
.presentation-purpose-group .visual-metric-card.is-activity-card,
.presentation-purpose-group .visual-metric-card.is-breakdown-card,
.presentation-purpose-group .visual-metric-card.is-rate-card,
.presentation-purpose-group .visual-metric-card.is-delivery-card { min-height: 148px; }

@media (min-width: 1800px) {
  .executive-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .presentation-purpose-group .presentation-dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .executive-kpi-grid,
  .presentation-purpose-group .presentation-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .executive-kpi-grid,
  .presentation-purpose-group .presentation-dashboard-grid { grid-template-columns: 1fr; }
  .presentation-purpose-heading { grid-template-columns: 32px minmax(0, 1fr); }
  .presentation-purpose-count { grid-column: 2; }
  .presentation-purpose-heading > div { grid-template-columns: 1fr; }
  .presentation-purpose-heading em { white-space: normal; }
}

/* Dashboard phase two: one sticky range, honest freshness, and content-sized cards. */
.client-visual-overview > .visual-overview-heading {
  position: sticky;
  top: 8px;
  z-index: 18;
  margin-bottom: 12px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .09);
  backdrop-filter: blur(12px);
}
.client-visual-overview > .visual-overview-heading::after { display: none; }
.presentation-header-controls {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.presentation-refresh-status,
.presentation-freshness {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: .56rem;
  font-weight: 750;
  white-space: nowrap;
}
.presentation-refresh-status { align-self: center; padding: 5px 7px; }
.presentation-refresh-status i,
.presentation-freshness i { width: 6px; height: 6px; border-radius: 50%; background: #35c978; }
.presentation-refresh-status.is-updating i,
.presentation-freshness.is-updating i {
  width: 9px;
  height: 9px;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-top-color: var(--accent);
  background: transparent;
  animation: dashboard-source-spin .75s linear infinite;
}
.presentation-freshness.is-aging i { background: #e1aa3c; }
.presentation-freshness.is-stale i,
.presentation-freshness.is-unknown i { background: #dc6673; }
.executive-summary-meta,
.presentation-purpose-meta { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; }
.executive-summary-meta > span:last-child,
.presentation-purpose-count { padding-left: 9px; border-left: 1px solid var(--line-soft); }

.executive-summary,
.presentation-dashboard-section,
.presentation-purpose-group { border: 0; background: var(--surface); }
.executive-summary-heading,
.presentation-dashboard-heading,
.presentation-purpose-heading { border-bottom-color: var(--line-soft); }
.presentation-dashboard-section { overflow: visible; }
.presentation-purpose-stack { padding: 10px 0 0; }
.presentation-purpose-group {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
  background: color-mix(in srgb, var(--purpose-accent) 3%, var(--surface));
}
.presentation-purpose-group .presentation-dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}
.presentation-purpose-group .visual-metric-card,
.presentation-purpose-group .presentation-pie-card {
  grid-column: span 4;
  border: 0;
  background: color-mix(in srgb, var(--card-accent) 4%, var(--surface-2));
}
.presentation-purpose-group .visual-metric-card::before,
.presentation-purpose-group .presentation-pie-card::before { width: 2px; opacity: .68; }
.presentation-purpose-group .visual-metric-card.is-trend-card,
.presentation-purpose-group .visual-metric-card.is-bar-card,
.presentation-purpose-group .presentation-pie-card { grid-column: span 6; min-height: 204px; }
.presentation-purpose-group .visual-metric-card.is-rate-card,
.presentation-purpose-group .visual-metric-card.is-delivery-card,
.presentation-purpose-group .visual-metric-card.is-breakdown-card { grid-column: span 4; min-height: 148px; }
.presentation-purpose-group .visual-metric-card.is-activity-card { grid-column: span 3; min-height: 132px; }
.presentation-purpose-group .visual-metric-card.is-ga-summary-card { grid-column: span 12; min-height: 136px; }
.presentation-purpose-group .presentation-dashboard-grid > .is-span-12 { grid-column: span 12; }
.presentation-purpose-group .presentation-dashboard-grid > .is-span-6 { grid-column: span 6; }
.presentation-purpose-group .presentation-dashboard-grid > .is-span-4 { grid-column: span 4; }
.presentation-purpose-group .visual-metric-card.is-trend-card.is-span-12,
.presentation-purpose-group .visual-metric-card.is-bar-card.is-span-12 { min-height: 248px; }
.presentation-purpose-group .visual-metric-card.is-trend-card .visual-metric-chart,
.presentation-purpose-group .visual-metric-card.is-bar-card .visual-metric-chart { align-items: stretch; }
.presentation-purpose-group .visual-metric-card.is-trend-card .visual-sparkline {
  height: auto;
  max-height: none;
  aspect-ratio: 32 / 7;
}
.presentation-purpose-group .visual-metric-card footer { border-top-color: var(--line-soft); }
.presentation-purpose-group .presentation-pie-card footer { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .6rem; }
.presentation-detail-grid > span { border: 0; background: color-mix(in srgb, var(--card-accent) 6%, var(--surface)); }
.ga-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  min-height: 72px;
  margin: 8px 0 3px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
}
.ga-summary-bar > span { display: grid; align-content: center; gap: 6px; min-width: 0; padding: 12px 18px; border-left: 1px solid var(--line-soft); }
.ga-summary-bar > span:first-child { border-left: 0; }
.ga-summary-bar small { overflow: hidden; color: var(--muted); font-size: .62rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.ga-summary-bar strong { color: var(--text); font-size: clamp(1.35rem, 2vw, 1.9rem); letter-spacing: -.035em; line-height: 1; }

/* Compact dashboard toolbar: client choice, optional search, tools, and health. */
.topbar .control-row {
  flex: 0 1 980px;
  flex-wrap: nowrap;
  gap: 8px;
}
.topbar .dashboard-client-control {
  flex: 1 1 360px;
  min-width: 260px;
}
.topbar .dashboard-client-control > span {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.topbar .dashboard-search-control {
  flex: 0 1 230px;
  min-width: 150px;
  align-self: end;
}
.topbar .dashboard-search-control input { width: 100%; }
.topbar .dashboard-tools-menu,
.topbar .dashboard-health-center,
.topbar .dashboard-readiness { flex: 0 0 auto; }

@media (max-width: 1120px) {
  .presentation-purpose-group .presentation-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presentation-purpose-group .visual-metric-card,
  .presentation-purpose-group .presentation-pie-card,
  .presentation-purpose-group .visual-metric-card.is-trend-card,
  .presentation-purpose-group .visual-metric-card.is-bar-card,
  .presentation-purpose-group .visual-metric-card.is-rate-card,
  .presentation-purpose-group .visual-metric-card.is-delivery-card,
  .presentation-purpose-group .visual-metric-card.is-breakdown-card,
  .presentation-purpose-group .visual-metric-card.is-activity-card { grid-column: auto; }
  .presentation-purpose-group .visual-metric-card.is-ga-summary-card { grid-column: 1 / -1; }
  .topbar .control-row { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .client-visual-overview > .visual-overview-heading { position: relative; top: auto; }
  .presentation-purpose-group .presentation-dashboard-grid { grid-template-columns: 1fr; }
  .executive-summary-meta,
  .presentation-purpose-meta { align-items: flex-end; flex-direction: column; gap: 3px; }
  .executive-summary-meta > span:last-child,
  .presentation-purpose-count { padding-left: 0; border-left: 0; }
  .ga-summary-bar,
  .simple-ga-summary-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ga-summary-bar > span:nth-child(3),
  .simple-ga-summary-values > span:nth-child(3) { border-left: 0; }
  .ga-summary-bar > span { border-bottom: 1px solid var(--line-soft); }
  .ga-summary-bar > span:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Minimal client toolbar: one searchable client field and one actions menu. */
.topbar .control-row {
  flex: 0 1 620px;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}
.topbar .dashboard-client-combobox-control {
  position: relative;
  flex: 1 1 auto;
  min-width: 300px;
}
.topbar .dashboard-client-combobox-control input {
  width: 100%;
  min-height: 42px;
  padding-right: 38px;
  border-radius: 13px;
  font-weight: 750;
}
.topbar .dashboard-client-combobox-control::after {
  content: "⌄";
  position: absolute;
  right: 14px;
  bottom: 13px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1;
  pointer-events: none;
}
.topbar .dashboard-toolbar-legacy-control,
.topbar .dashboard-readiness {
  display: none !important;
}
.dashboard-client-select-native {
  position: absolute !important;
  left: 1px;
  bottom: 1px;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.topbar .dashboard-health-center {
  position: relative;
  flex: 0 0 42px;
  align-self: flex-end;
  z-index: 40;
}
.topbar .dashboard-health-center > summary {
  position: relative;
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  padding: 0;
  border-radius: 13px;
}
.dashboard-actions-glyph {
  transform: translateY(-2px);
  font-size: 1rem;
  letter-spacing: .08em;
  line-height: 1;
}
.dashboard-actions-attention {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #e8a52b;
  color: #16130c !important;
  font-size: .57rem !important;
  font-weight: 900 !important;
  line-height: 1;
}

@media (max-width: 760px) {
  .topbar .control-row { width: 100%; flex: 1 1 100%; }
  .topbar .dashboard-client-combobox-control { min-width: 0; }
}

/* Dense Detailed View: larger readable type, shorter cards, and fuller desktop rows. */
.detailed-presentation .executive-kpi-card { min-height: 104px; padding: 13px 50px 12px 15px; }
.detailed-presentation .executive-kpi-card > small,
.detailed-presentation .executive-kpi-card > em { font-size: .68rem; }
.detailed-presentation .presentation-purpose-stack { gap: 7px; padding-top: 7px; }
.detailed-presentation .presentation-purpose-heading { min-height: 44px; padding: 6px 9px; }
.detailed-presentation .presentation-purpose-heading small { font-size: .61rem; }
.detailed-presentation .presentation-purpose-heading strong { font-size: .96rem; }
.detailed-presentation .presentation-purpose-heading em,
.detailed-presentation .presentation-purpose-count,
.detailed-presentation .presentation-freshness { font-size: .68rem; }
.detailed-presentation .presentation-purpose-icon { width: 30px; height: 30px; }
.detailed-presentation .presentation-purpose-group .presentation-dashboard-grid { gap: 6px; padding: 6px; }
.detailed-presentation .presentation-purpose-group .visual-metric-card,
.detailed-presentation .presentation-purpose-group .presentation-pie-card { padding: 10px 11px; }
.detailed-presentation .presentation-purpose-group .visual-metric-meta span:first-child { font-size: .7rem; }
.detailed-presentation .presentation-purpose-group .visual-metric-card footer,
.detailed-presentation .presentation-purpose-group .presentation-pie-card footer { font-size: .68rem; }
.detailed-presentation .presentation-purpose-group .visual-metric-card.is-trend-card,
.detailed-presentation .presentation-purpose-group .visual-metric-card.is-bar-card,
.detailed-presentation .presentation-purpose-group .presentation-pie-card { min-height: 176px; }
.detailed-presentation .presentation-purpose-group .visual-metric-card.is-activity-card,
.detailed-presentation .presentation-purpose-group .visual-metric-card.is-breakdown-card,
.detailed-presentation .presentation-purpose-group .visual-metric-card.is-rate-card,
.detailed-presentation .presentation-purpose-group .visual-metric-card.is-delivery-card { min-height: 122px; }
.detailed-presentation .presentation-purpose-group .visual-metric-card.is-trend-card .visual-sparkline { height: 96px; aspect-ratio: auto; }
.detailed-presentation .purpose-website .visual-metric-card.is-ga-summary-card { min-height: 112px; }

@media (min-width: 1280px) {
  .detailed-presentation .purpose-website .presentation-dashboard-grid > :not(.is-ga-summary-card) { grid-column: span 3; }
  .detailed-presentation .purpose-website .visual-metric-card.is-trend-card,
  .detailed-presentation .purpose-website .visual-metric-card.is-bar-card,
  .detailed-presentation .purpose-website .presentation-pie-card { min-height: 184px; }
}

/* Single-line presentation hierarchy. */
.client-visual-overview .presentation-title-lockup > div { display: flex; align-items: center; }
.client-visual-overview .presentation-title-lockup h3 { font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.1; }
.simple-summary-header > div,
.executive-summary-heading > div,
.presentation-dashboard-heading > div,
.presentation-purpose-heading > div { display: flex; align-items: center; }
.simple-summary-header strong,
.executive-summary-heading strong,
.presentation-dashboard-heading strong { font-size: 1rem; line-height: 1.15; }
.detailed-presentation .presentation-purpose-heading strong { font-size: 1rem; line-height: 1.15; }

/* Readable chart annotations and single-focus activity cards. */
.detailed-presentation .visual-sparkline .trend-axis-label { font-size: 11px; font-weight: 800; }
.detailed-presentation .visual-sparkline .trend-date-label { font-size: 14px; font-weight: 850; }
.detailed-presentation .visual-trend-summary { margin-top: 2px; font-size: .76rem; }
.detailed-presentation .visual-metric-card.is-trend-card footer { font-size: .76rem; }
.detailed-presentation .presentation-purpose-group .presentation-dashboard-grid { align-items: stretch; }
.detailed-presentation .presentation-purpose-group .visual-metric-card,
.detailed-presentation .presentation-purpose-group .presentation-pie-card { height: 100%; align-self: stretch; }
.detailed-presentation .visual-mini-bars > span em { font-size: clamp(.7rem, .9vw, .82rem); }
.detailed-presentation .visual-mini-bars small,
.detailed-presentation .visual-mini-bars b { max-width: 180px; padding: 5px 8px; font-size: .7rem; }
.detailed-presentation .presentation-activity-visual.is-compact {
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 72px;
  padding: 8px 0 2px;
}
.detailed-presentation .presentation-activity-visual.is-compact p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.detailed-presentation .visual-metric-card .visual-metric-value > strong { font-size: clamp(1.6rem, 2vw, 2rem); }

/* Balanced GA typography and donut-card composition. */
.detailed-presentation .purpose-website .visual-metric-meta span:first-child { font-size: .76rem; line-height: 1.2; }
.detailed-presentation .purpose-website .presentation-pie-card { display: flex; flex-direction: column; }
.detailed-presentation .purpose-website .presentation-pie-wrap {
  flex: 1 1 auto;
  grid-template-columns: 108px minmax(0, 1fr);
  align-content: center;
  gap: 16px;
  width: 100%;
  margin: 6px auto 10px;
}
.detailed-presentation .purpose-website .presentation-pie { width: 104px; height: 104px; }
.detailed-presentation .purpose-website .presentation-pie-legend { gap: 10px; }
.detailed-presentation .purpose-website .presentation-pie-legend span { gap: 9px; }
.detailed-presentation .purpose-website .presentation-pie-legend i { width: 11px; height: 11px; }
.detailed-presentation .purpose-website .presentation-pie-legend b { font-size: .8rem; }
.detailed-presentation .purpose-website .presentation-pie-legend small { color: var(--text); font-size: .76rem; font-weight: 750; }
.detailed-presentation .purpose-website .presentation-pie-card footer { margin-top: auto; padding-top: 9px; font-size: .76rem; }
.lawmatics-campaign-report-heading small,.lawmatics-campaign-report-heading > span,.lawmatics-calculation-note { color:var(--muted); font-size:10px; }
.lawmatics-campaign-report-heading > span { padding:5px 8px; border:1px solid var(--line); border-radius:999px; white-space:nowrap; }
.lawmatics-campaign-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.lawmatics-campaign-table { width:100%; min-width:850px; border-collapse:collapse; }
.lawmatics-campaign-table th,.lawmatics-campaign-table td { padding:11px 12px; border-bottom:1px solid var(--line-soft); color:var(--text); text-align:left; vertical-align:middle; }
.lawmatics-campaign-table thead th { color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.lawmatics-campaign-table tbody tr:last-child > * { border-bottom:0; }
.lawmatics-campaign-table tbody tr.is-excluded { opacity:.48; }
.lawmatics-campaign-table tbody th { min-width:230px; }
.lawmatics-campaign-table tbody th,.lawmatics-campaign-table tbody td:nth-last-child(-n+3) { font-size:11px; }
.lawmatics-campaign-table tbody th strong,.lawmatics-campaign-table tbody th small,.lawmatics-campaign-table tbody td strong,.lawmatics-campaign-table tbody td small { display:block; }
.lawmatics-campaign-table tbody th small,.lawmatics-campaign-table tbody td small { margin-top:2px; color:var(--muted); font-size:9px; font-weight:500; }
.lawmatics-table-toggle { min-width:74px; }
.lawmatics-calculation-note { margin:0; }

.highlevel-brand-icon img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }

@media (max-width: 720px) {
  .lawmatics-credential-grid { grid-template-columns: 1fr; }
  .lawmatics-campaign-report-heading { align-items:flex-start; flex-direction:column; }
}