/* Orbit by Vynuro — design system
   Brand from vynuro.tech: primary #0040c1, light sky surfaces, pill buttons,
   Plus Jakarta Sans. Shared by every dashboard page and the shell (shell.js).

   Generic components are written as `html body …` so they win over the older
   per-page inline styles; they only set look (colour, type, border, radius, shadow),
   never page layout, so existing page structure keeps working. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Poppins:wght@500;600;700&display=swap');

:root {
  /* brand */
  --vy-primary: #0040c1;
  --vy-primary-600: #00359e;
  --vy-primary-400: #2970ff;
  --vy-sky: #0082f3;
  --vy-soft: #eff4ff;
  --vy-mist: #d1e0ff;
  --vy-periwinkle: #6f78f5;
  --vy-ink: #0f172a;
  --vy-text: #1d2939;
  --vy-muted: #475467;
  --vy-subtle: #667085;
  --vy-line: #e3eaf7;
  --vy-line-strong: #c7d6f2;
  --vy-bg: #f5f8fe;
  --vy-surface: #ffffff;
  --vy-surface-2: #f8faff;
  /* status (always paired with text/icon, never colour alone) */
  --vy-ok: #067647;      --vy-ok-soft: #e6f6ee;   --vy-ok-line: #a6e3c4;
  --vy-warn: #a15c07;    --vy-warn-soft: #fef6e7; --vy-warn-line: #f6d38a;
  --vy-bad: #c01e3a;     --vy-bad-soft: #fdecef;  --vy-bad-line: #f5b5c1;
  --vy-info: #0040c1;    --vy-info-soft: #eff4ff;
  /* channels */
  --ch-instagram: #c13584; --ch-instagram-soft: #fcebf5;
  --ch-facebook: #1877f2;  --ch-facebook-soft: #e8f1fe;
  --ch-linkedin: #0a66c2;  --ch-linkedin-soft: #e6f0fa;
  --ch-email: #6941c6;     --ch-email-soft: #f2edfd;
  --ch-website: #0e7c86;   --ch-website-soft: #e6f6f7;
  --ch-contact_form: #b54708; --ch-contact_form-soft: #fdf1e6;
  --ch-system: #475467;    --ch-system-soft: #eef1f6;
  /* shape + depth */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --pill: 999px;
  --elev-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(0, 64, 193, .04);
  --elev-2: 0 12px 32px rgba(0, 64, 193, .10);
  --elev-3: 0 24px 60px rgba(15, 23, 42, .16);
  --sidebar-w: 256px;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", "Poppins", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* legacy names used by existing pages — mapped onto the brand */
  --page: var(--vy-bg);
  --paper: var(--vy-surface);
  --ink: var(--vy-text);
  --muted: var(--vy-muted);
  --line: var(--vy-line);
  --line-strong: var(--vy-line-strong);
  --teal: var(--vy-primary);
  --teal-hot: var(--vy-primary-600);
  --teal-soft: var(--vy-soft);
  --teal-ring: #84adff;
  --blue: var(--vy-primary);
  --sky: var(--vy-sky);
  --red: var(--vy-bad);
  --red-soft: var(--vy-bad-soft);
  --amber: var(--vy-warn);
  --amber-soft: var(--vy-warn-soft);
  --vynuro-primary: var(--vy-primary);
  --vynuro-primary-hot: var(--vy-primary-600);
  --vynuro-soft: var(--vy-soft);
  --vynuro-mist: var(--vy-mist);
  --vynuro-ink: var(--vy-ink);
  --ig: var(--ch-instagram); --ig-soft: var(--ch-instagram-soft);
  --fb: var(--ch-facebook);  --fb-soft: var(--ch-facebook-soft);

  font-family: var(--font);
  color: var(--vy-text);
  background: var(--vy-bg);
  font-size: 14px;
  line-height: 1.5;
}

/* ───────────────────────── base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--vy-text);
  background:
    radial-gradient(1100px 420px at 12% -8%, rgba(41, 112, 255, .13), transparent 60%),
    radial-gradient(800px 380px at 100% -10%, rgba(111, 120, 245, .10), transparent 55%),
    linear-gradient(180deg, #f2f6ff 0, var(--vy-bg) 340px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
html body h1, html body h2, html body h3 { font-family: var(--font-display); color: var(--vy-ink); }
html body h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 4px; }
html body h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
html body h3 { font-size: 14px; font-weight: 700; }
html body .sub { color: var(--vy-muted); font-size: 13px; line-height: 1.55; }
html body .hint { color: var(--vy-subtle); font-size: 12px; line-height: 1.55; }
html body a { color: var(--vy-primary); text-underline-offset: 2px; }
html body a:hover { color: var(--vy-primary-600); }
html body code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; background: var(--vy-soft);
  color: var(--vy-primary-600); padding: 1px 6px; border-radius: 6px; }
html body ::selection { background: var(--vy-mist); }
html body :focus-visible { outline: 3px solid var(--teal-ring); outline-offset: 2px; }
html body .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────────────────────── buttons ───────────────────────── */
html body button {
  font-family: var(--font);
  font-weight: 600;
  color: var(--vy-text);
  background: var(--vy-surface);
  border: 1px solid var(--vy-line-strong);
  border-radius: var(--pill);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s, box-shadow .15s, transform .1s;
  touch-action: manipulation;
}
html body button:hover { background: var(--vy-soft); border-color: #a9c1f0; }
html body button:active { transform: translateY(1px); }
html body button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
html body button.primary, html body .btn-primary {
  background: var(--vy-primary);
  border-color: var(--vy-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 64, 193, .22);
}
html body button.primary:hover, html body .btn-primary:hover { background: var(--vy-primary-600); border-color: var(--vy-primary-600); color: #fff; }
html body button.danger { color: var(--vy-bad); border-color: var(--vy-bad-line); }
html body button.danger:hover { background: var(--vy-bad-soft); }
html body button.ghost, html body .text-button { border-color: transparent; background: transparent; color: var(--vy-primary); box-shadow: none; }
html body button.ghost:hover, html body .text-button:hover { background: var(--vy-soft); }
html body button.small { font-size: 12px; padding: 6px 12px; }
/* "Book a call" style arrow pill: <button class="primary arrow">Label<span class="arr" aria-hidden="true"></span></button> */
html body .arrow { display: inline-flex; align-items: center; gap: 10px; padding-right: 6px; }
html body .arrow .arr { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: inline-grid; place-items: center; }
html body .arrow .arr::before { content: ""; width: 10px; height: 10px; background: var(--vy-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat; }
/* segmented / tab-like controls keep square inner corners */
html body .mode { border-radius: var(--pill); border-color: var(--vy-line-strong); background: var(--vy-surface); padding: 3px; gap: 2px; }
html body .mode button { border: 0; border-radius: var(--pill); background: transparent; color: var(--vy-muted); box-shadow: none; }
html body .mode button + button { border-left: 0; }
html body .mode button.active { background: var(--vy-primary); color: #fff; }
html body .excel-tab { border-radius: 8px 8px 0 0; }

/* ───────────────────────── forms ───────────────────────── */
html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), html body select, html body textarea {
  font-family: var(--font);
  color: var(--vy-text);
  background: var(--vy-surface);
  border: 1px solid var(--vy-line-strong);
  border-radius: var(--radius-xs);
  transition: border-color .15s, box-shadow .15s;
}
html body input:not([type=checkbox]):not([type=radio]):hover, html body select:hover, html body textarea:hover { border-color: #a9c1f0; }
html body input:focus, html body select:focus, html body textarea:focus {
  border-color: var(--vy-primary);
  box-shadow: 0 0 0 4px rgba(0, 64, 193, .12);
  outline: none;
}
html body input::placeholder, html body textarea::placeholder { color: #98a2b3; }
html body input[type=checkbox], html body input[type=radio] { accent-color: var(--vy-primary); }
html body label { font-family: var(--font); color: var(--vy-ink); }
/* iOS-style switch used across pages: <label class="switch"><input type="checkbox">Text</label> */
html body .switch input { background: #cfd8e8; }
html body .switch input:checked { background: var(--vy-primary); }

/* ───────────────────────── surfaces ───────────────────────── */
html body .card, html body .panel, html body details.section, html body .details-block, html body .schedule-card,
html body .account-card, html body .creative-card {
  background: var(--vy-surface);
  border: 1px solid var(--vy-line);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
}
html body .card:hover, html body details.section:hover { border-color: #d3dff5; }
html body details.section > summary, html body .details-block > summary { font-family: var(--font); }
html body details.section[open] > summary { background: linear-gradient(180deg, var(--vy-surface-2), transparent); }
html body .body { border-top-color: var(--vy-line); }
html body .metrics, html body .counters { border-color: var(--vy-line); }
html body .metric b, html body .metric strong, html body .counter b {
  font-family: var(--font-display); color: var(--vy-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
html body .metric span, html body .metric-label, html body .counter span { color: var(--vy-subtle); }
html body .bar { background: #e8eef9; border-radius: var(--pill); }
html body .bar i { background: linear-gradient(90deg, var(--vy-primary-400), var(--vy-primary)); border-radius: var(--pill); }
html body .control-card, html body .ai-panel, html body .aibox {
  border-color: var(--vy-mist);
  background: radial-gradient(600px 200px at 0 0, rgba(41, 112, 255, .10), transparent 70%), var(--vy-surface);
}
html body .aibox { border-radius: var(--radius-sm); }

/* ───────────────────────── chips / tags / status ───────────────────────── */
html body .chip, html body .tag {
  font-family: var(--font);
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--pill);
  padding: 3px 10px;
  font-size: 12px; font-weight: 600;
  background: var(--vy-soft); color: var(--vy-primary-600);
  border: 1px solid transparent;
  white-space: nowrap;
}
html body .chip.good, html body .tag.good { background: var(--vy-ok-soft); color: var(--vy-ok); border-color: var(--vy-ok-line); }
html body .chip.warn, html body .tag.warn { background: var(--vy-warn-soft); color: var(--vy-warn); border-color: var(--vy-warn-line); }
html body .chip.bad, html body .tag.bad { background: var(--vy-bad-soft); color: var(--vy-bad); border-color: var(--vy-bad-line); }
html body .chip.good::before, html body .chip.warn::before, html body .chip.bad::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
html body .banner { border-radius: var(--radius-sm); }
html body .banner.ok { background: var(--vy-info-soft); border: 1px solid var(--vy-mist); color: var(--vy-primary-600); }
html body .banner.bad { background: var(--vy-bad-soft); color: var(--vy-bad); }
html body .banner.warn { background: var(--vy-warn-soft); color: var(--vy-warn); }
html body .warnings { background: var(--vy-warn-soft); color: var(--vy-warn); border: 1px solid var(--vy-warn-line); border-radius: var(--radius-sm); }
html body .dot { background: #98a2b3; }
html body .dot.on { background: #12b76a; box-shadow: 0 0 0 3px rgba(18, 183, 106, .18); }

/* platform logos */
html body .logo { border-radius: 9px; font-family: var(--font-display); font-weight: 800; }
html body .logo.instagram { background: var(--ch-instagram-soft); color: var(--ch-instagram); }
html body .logo.facebook { background: var(--ch-facebook-soft); color: var(--ch-facebook); }
html body .logo.linkedin { background: var(--ch-linkedin-soft); color: var(--ch-linkedin); }
html body .logo.email { background: var(--ch-email-soft); color: var(--ch-email); }

/* tabs (outreach platform tabs and similar) */
html body .tabs { gap: 8px; }
html body .tab {
  border-radius: var(--pill);
  border: 1px solid var(--vy-line-strong);
  background: var(--vy-surface);
  color: var(--vy-text);
  box-shadow: var(--elev-1);
}
html body .tab:hover { border-color: #a9c1f0; background: var(--vy-surface-2); }
html body .tab.active { background: var(--vy-ink); border-color: var(--vy-ink); color: #fff; }
html body .tab.primary { background: var(--vy-primary); border-color: var(--vy-primary); color: #fff; }
html body .tab.primary:hover, html body .tab.primary.active { background: var(--vy-primary-600); }
html body .tab svg { width: 16px; height: 16px; }

/* ───────────────────────── tables ───────────────────────── */
html body table { border-collapse: separate; border-spacing: 0; }
html body th {
  font-family: var(--font);
  background: var(--vy-surface-2);
  color: var(--vy-subtle);
  font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--vy-line);
}
html body td { border-bottom: 1px solid #eef2fa; }
html body tr:hover td { background: #f8faff; }
html body .table-wrap { border-radius: var(--radius-sm); }

/* ───────────────────────── feedback ───────────────────────── */
html body .toast {
  font-family: var(--font);
  background: var(--vy-ink);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-3);
}
html body .empty { color: var(--vy-subtle); }
html body .savebar { box-shadow: 0 -8px 24px rgba(15, 23, 42, .08); border-top: 1px solid var(--vy-line); }
html body dialog { border: 1px solid var(--vy-line); border-radius: var(--radius); box-shadow: var(--elev-3); }
html body dialog::backdrop { background: rgba(15, 23, 42, .35); backdrop-filter: blur(2px); }

/* live log (CSV automation) — light, readable */
html body .live-log { background: var(--vy-surface); color: var(--vy-text); border: 1px solid var(--vy-line); border-radius: var(--radius-sm); }
html body .live-log .ll { border-bottom: 1px solid #eef2fa; border-left: 3px solid transparent; }
html body .live-log .ll.ok { background: #f6fcf9; border-left-color: #12b76a; }
html body .live-log .ll.bad { background: #fff7f8; border-left-color: var(--vy-bad); }
html body .live-log .ll.warn { background: #fffbf3; border-left-color: #f79009; }
html body .live-log time { color: var(--vy-subtle); }
html body .live-log .kind { color: var(--vy-primary); }
html body .activity-rail .rail-head { background: linear-gradient(180deg, var(--vy-soft), #fff); }

/* ───────────────────────── shared page parts ───────────────────────── */
html body .topbar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--vy-line);
}
html body .content { max-width: 1400px; }
html body .page-footer { color: var(--vy-subtle); border-top: 1px solid var(--vy-line); }

/* excel preview (CSV automation) */
html body .excel-wrap { border-color: var(--vy-line-strong); border-radius: var(--radius-sm); }
html body .excel-grid th { background: var(--vy-soft); color: var(--vy-primary-600); }
html body .excel-tabs { background: #edf2fb; }
html body .excel-tab { background: #dde7f8; }
html body .excel-tab.active { background: #fff; }

/* conn cards */
html body .conn-card { border-color: var(--vy-line); border-radius: var(--radius); background: var(--vy-surface); }
html body .conn-card.ok { border-color: var(--vy-ok-line); background: linear-gradient(180deg, #fff, var(--vy-ok-soft)); }
html body .conn-card.bad { border-color: var(--vy-bad-line); background: linear-gradient(180deg, #fff, var(--vy-bad-soft)); }

/* ───────────────────────── shell (shell.js) ───────────────────────── */
html body .app.vy-app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }
html body .app.vy-app > .main { grid-column: 2; min-width: 0; }
html body .vy-side {
  position: sticky; top: 0; height: 100dvh; width: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px 16px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--vy-line);
  color: var(--vy-text);
  z-index: 20;
  overflow-y: auto;
}
html body .vy-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 14px; text-decoration: none; }
html body .vy-brand img { height: 24px; width: auto; display: block; }
html body .vy-brand .vy-product {
  font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .02em;
  color: var(--vy-primary); background: var(--vy-soft); border: 1px solid var(--vy-mist);
  padding: 3px 9px; border-radius: var(--pill);
}
html body .vy-nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
html body .vy-nav .vy-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #98a2b3; padding: 14px 12px 6px;
}
html body .vy-nav a, html body .vy-nav button {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 0; border-radius: 12px;
  background: transparent; box-shadow: none;
  color: var(--vy-muted);
  font: 600 14px/1.2 var(--font);
  text-align: left; text-decoration: none;
  cursor: pointer;
  transform: none;
}
html body .vy-nav a:hover, html body .vy-nav button:hover { background: var(--vy-soft); color: var(--vy-ink); }
html body .vy-nav a.active, html body .vy-nav button.active {
  background: var(--vy-primary); color: #fff; box-shadow: 0 8px 18px rgba(0, 64, 193, .22);
}
html body .vy-nav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body .vy-nav .vy-sub { display: grid; gap: 2px; margin: 2px 0 6px 18px; padding-left: 10px; border-left: 1px solid var(--vy-line); }
html body .vy-nav .vy-sub a, html body .vy-nav .vy-sub button { min-height: 36px; font-size: 13px; padding: 7px 10px; }
html body .vy-nav .vy-sub a.active, html body .vy-nav .vy-sub button.active { background: var(--vy-soft); color: var(--vy-primary); box-shadow: inset 0 0 0 1px var(--vy-mist); }
html body .vy-nav .vy-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--pill); background: var(--vy-soft); color: var(--vy-primary); }
html body .vy-nav a.active .vy-badge { background: rgba(255, 255, 255, .2); color: #fff; }
html body .vy-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 14px; }
html body .vy-status {
  border: 1px solid var(--vy-line); border-radius: 14px; padding: 12px; background: var(--vy-surface);
  font-size: 12px; color: var(--vy-muted); display: grid; gap: 6px;
}
html body .vy-status b { color: var(--vy-ink); font-size: 13px; display: flex; align-items: center; gap: 8px; }
html body .vy-status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0; }
html body .vy-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; padding: 0 6px; }
html body .vy-links a { color: var(--vy-subtle); text-decoration: none; }
html body .vy-links a:hover { color: var(--vy-primary); }
html body .vy-made { font-size: 11px; color: #98a2b3; padding: 0 6px; }
html body .vy-made a { color: var(--vy-primary); font-weight: 600; text-decoration: none; }
html body .vy-menu { display: none; }

@media (max-width: 960px) {
  html body .app.vy-app { grid-template-columns: 1fr; }
  html body .app.vy-app > .main { grid-column: 1; }
  html body .vy-side {
    position: sticky; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap;
    padding: 10px 16px; gap: 8px; border-right: 0; border-bottom: 1px solid var(--vy-line);
  }
  html body .vy-brand { padding: 0; margin-right: auto; }
  html body .vy-menu { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; }
  html body .vy-side .vy-nav, html body .vy-side .vy-foot { display: none; width: 100%; }
  html body .vy-side.open .vy-nav, html body .vy-side.open .vy-foot { display: grid; }
  html body .savebar { left: 0; }
}

/* ───────────────────────── activity log page ───────────────────────── */
.act-summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 16px; margin-bottom: 18px; }
.act-total { position: relative; overflow: hidden; border-radius: var(--radius); padding: 22px; color: #fff;
  background: radial-gradient(500px 220px at 100% 0, rgba(132, 173, 255, .55), transparent 60%), linear-gradient(135deg, #0040c1, #00359e 60%, #1b1f6b); box-shadow: var(--elev-2); }
.act-total .k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.act-total .n { font: 800 44px/1 var(--font-display); letter-spacing: -.03em; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.act-total .s { font-size: 13px; opacity: .9; }
.act-total .split { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.act-total .split span { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--pill); padding: 4px 10px; font-size: 12px; font-weight: 600; }
.act-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.act-ch { background: var(--vy-surface); border: 1px solid var(--vy-line); border-radius: var(--radius-sm); padding: 14px; box-shadow: var(--elev-1);
  display: grid; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
html body .act-ch { border-radius: var(--radius-sm); }
.act-ch:hover { border-color: #a9c1f0; }
.act-ch[aria-pressed="true"] { border-color: var(--vy-primary); box-shadow: 0 0 0 3px rgba(0, 64, 193, .12); }
.act-ch .top { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--vy-ink); }
.act-ch .n { font: 800 26px/1.1 var(--font-display); color: var(--vy-ink); font-variant-numeric: tabular-nums; }
.act-ch .d { font-size: 12px; color: var(--vy-subtle); min-height: 18px; }
.ch-ico { width: 28px; height: 28px; border-radius: 9px; display: inline-grid; place-items: center; flex: none; }
.ch-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-instagram { background: var(--ch-instagram-soft); color: var(--ch-instagram); }
.ch-facebook { background: var(--ch-facebook-soft); color: var(--ch-facebook); }
.ch-linkedin { background: var(--ch-linkedin-soft); color: var(--ch-linkedin); }
.ch-email { background: var(--ch-email-soft); color: var(--ch-email); }
.ch-website { background: var(--ch-website-soft); color: var(--ch-website); }
.ch-contact_form { background: var(--ch-contact_form-soft); color: var(--ch-contact_form); }
.ch-system { background: var(--ch-system-soft); color: var(--ch-system); }

.act-filters { position: sticky; top: 72px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); border: 1px solid var(--vy-line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 14px; box-shadow: var(--elev-1); }
.seg { display: inline-flex; background: var(--vy-surface-2); border: 1px solid var(--vy-line); border-radius: var(--pill); padding: 3px; gap: 2px; flex-wrap: wrap; }
html body .seg button { border: 0; background: transparent; box-shadow: none; padding: 6px 12px; font-size: 13px; color: var(--vy-muted); min-height: 32px; }
html body .seg button[aria-pressed="true"] { background: var(--vy-surface); color: var(--vy-ink); box-shadow: var(--elev-1), inset 0 0 0 1px var(--vy-line); }
.act-filters .grow { flex: 1 1 220px; }
.act-filters input[type=search] { width: 100%; padding: 9px 12px; }
.live-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--vy-muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; }
.live-dot.on { background: #12b76a; box-shadow: 0 0 0 0 rgba(18, 183, 106, .5); animation: vy-pulse 1.8s infinite; }
@keyframes vy-pulse { 70% { box-shadow: 0 0 0 7px rgba(18, 183, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); } }

.act-day { margin-bottom: 20px; }
.act-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 4px 10px; }
.act-day-head h2 { font-size: 15px; }
.act-day-head .totals { font-size: 12px; color: var(--vy-subtle); display: flex; gap: 10px; flex-wrap: wrap; }
.act-list { background: var(--vy-surface); border: 1px solid var(--vy-line); border-radius: var(--radius); box-shadow: var(--elev-1); overflow: hidden; }
.act-row { display: grid; grid-template-columns: 64px 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border-top: 1px solid #eef2fa; }
.act-row:first-child { border-top: 0; }
.act-row:hover { background: #fafcff; }
.act-row time { font-size: 12px; color: var(--vy-subtle); font-variant-numeric: tabular-nums; padding-top: 6px; }
.act-row .t { font-weight: 600; color: var(--vy-ink); font-size: 14px; overflow-wrap: anywhere; }
.act-row .m { font-size: 12px; color: var(--vy-subtle); display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.act-row .why { color: var(--vy-warn); }
.act-row.failed .why { color: var(--vy-bad); }
.act-row details { margin-top: 6px; }
.act-row details summary { font-size: 12px; color: var(--vy-primary); cursor: pointer; font-weight: 600; width: max-content; }
.act-row .msg { margin-top: 6px; white-space: pre-wrap; font-size: 13px; background: var(--vy-surface-2); border: 1px solid var(--vy-line); border-radius: 10px; padding: 10px 12px; color: var(--vy-text); }
.act-row.setting .t { font-weight: 500; color: var(--vy-muted); }
.act-more { display: flex; justify-content: center; padding: 12px; }
.act-empty { text-align: center; padding: 48px 20px; color: var(--vy-subtle); }
.act-empty b { display: block; color: var(--vy-ink); font-size: 15px; margin-bottom: 4px; }
.skeleton { background: linear-gradient(90deg, #eef2fa 25%, #f6f8fd 37%, #eef2fa 63%); background-size: 400% 100%; animation: vy-shimmer 1.2s ease infinite; border-radius: 10px; }
@keyframes vy-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (max-width: 960px) {
  .act-summary { grid-template-columns: 1fr; }
  .act-filters { top: 58px; }
  .act-row { grid-template-columns: 36px minmax(0, 1fr); }
  .act-row time { grid-column: 2; order: 3; padding-top: 0; }
  .act-row .res { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ───────────────────────── fallbacks for pages without page CSS ───────────────────────── */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.main { min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 28px; position: sticky; top: 0; z-index: 12; }
.content { margin: 0 auto; padding: 22px 28px 72px; }
button { padding: 9px 16px; }
input, select, textarea { padding: 9px 12px; width: 100%; min-width: 0; }
input[type=checkbox], input[type=radio], input[type=file] { width: auto; }
label { font-weight: 600; font-size: 12px; display: block; margin-bottom: 6px; }
.card, .panel { margin-bottom: 12px; padding: 18px 20px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.full { grid-column: 1 / -1; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--vy-surface); border: 1px solid var(--vy-line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.metric { padding: 16px 18px; }
.metric + .metric { border-left: 1px solid var(--vy-line); }
.metric span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.metric b { display: block; font-size: 26px; margin-top: 6px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
table { width: 100%; font-size: 13px; }
th { text-align: left; padding: 9px 10px; position: sticky; top: 0; z-index: 1; }
td { padding: 10px; vertical-align: top; max-width: 260px; overflow-wrap: anywhere; }
td.wrap { max-width: 420px; white-space: normal; }
.table-wrap { overflow: auto; max-height: 520px; margin-top: 10px; border: 1px solid var(--vy-line); }
.steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.step { padding: 7px 12px; border-radius: var(--pill); background: var(--vy-surface-2); color: var(--vy-muted); font-size: 12px; font-weight: 600; }
.step.on { background: var(--vy-soft); color: var(--vy-primary); box-shadow: inset 0 0 0 1px var(--vy-mist); }
.checks { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.checks label { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; font-size: 13px; }
.list { display: grid; gap: 10px; }
.list a { display: block; padding: 16px 18px; border: 1px solid var(--vy-line); border-radius: var(--radius-sm); text-decoration: none; color: inherit; background: var(--vy-surface); transition: border-color .15s, box-shadow .15s; }
.list a:hover { border-color: #a9c1f0; box-shadow: var(--elev-1); }
.toast { position: fixed; right: 20px; bottom: 24px; padding: 12px 16px; opacity: 0; transition: opacity .2s, transform .2s; transform: translateY(8px); z-index: 40; max-width: min(420px, 90vw); pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.empty { text-align: center; padding: 28px; font-size: 13px; }
.banner { padding: 12px 14px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.conn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.conn-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 170px; }
.conn-card h3 { margin: 0; font-size: 15px; }
.conn-card .hint { margin: 0; flex: 1; }
.live-log { max-height: min(62vh, 560px); overflow: auto; margin-top: 10px; font-size: 12px; }
.live-log .ll { display: grid; grid-template-columns: 64px 72px 1fr; gap: 8px; padding: 8px 12px; align-items: start; }
.live-log .ll:last-child { border-bottom: 0; }
.live-log time { font-variant-numeric: tabular-nums; }
.live-log .kind { font-weight: 700; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; align-items: start; }
.workspace-main { min-width: 0; }
.activity-rail { position: sticky; top: 76px; max-height: calc(100vh - 92px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--vy-line); border-radius: var(--radius); background: var(--vy-surface); box-shadow: var(--elev-2); z-index: 5; }
.activity-rail .rail-head { padding: 14px 16px; border-bottom: 1px solid var(--vy-line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.activity-rail .rail-body { padding: 12px 14px 16px; overflow: auto; flex: 1; }
.activity-rail .live-log { max-height: none; height: calc(100vh - 220px); margin-top: 0; }
.hero-bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.control-bar .primary { min-width: 148px; }
.details-block { margin-bottom: 12px; overflow: hidden; }
.details-block > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.details-block > summary::-webkit-details-marker { display: none; }
.details-block > summary::after { content: "+"; color: var(--vy-subtle); font-weight: 400; font-size: 18px; }
.details-block[open] > summary::after { content: "–"; }
.details-block .body { padding: 4px 18px 18px; border-top: 1px solid var(--vy-line); }
.excel-wrap { border: 1px solid var(--vy-line-strong); overflow: hidden; background: #fff; margin-top: 12px; }
.excel-toolbar { background: var(--vy-soft); border-bottom: 1px solid var(--vy-line); padding: 8px 12px; font-size: 12px; color: var(--vy-muted); }
.excel-grid { overflow: auto; max-height: 420px; }
.excel-grid table { margin: 0; font-size: 12px; }
.excel-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; border-top: 1px solid var(--vy-line-strong); padding: 0 6px; min-height: 32px; align-items: flex-end; }
.excel-tab { border: 1px solid transparent; border-bottom: 0; color: #334455; padding: 7px 14px; font-size: 12px; font-weight: 600; margin: 4px 2px 0; white-space: nowrap; cursor: pointer; }
.excel-tab.active { border-color: var(--vy-line-strong); color: var(--vy-ink); }
.excel-tab.skip { color: #8a7350; font-weight: 500; }
.excel-tab .n { font-weight: 500; color: var(--vy-subtle); margin-left: 6px; }
.page-footer { margin-top: 28px; padding: 18px 0 8px; text-align: center; font-size: 12px; }
.page-footer a { font-weight: 600; text-decoration: none; }
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .activity-rail { position: relative; top: 0; max-height: none; order: -1; }
  .activity-rail .live-log { height: 280px; }
}
@media (max-width: 860px) {
  .grid, .metrics, .conn-grid { grid-template-columns: 1fr; }
  .metric + .metric { border-left: 0; border-top: 1px solid var(--vy-line); }
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
}

/* inline SVG icons inside buttons and labels */
html body svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 6px; }
html body button svg.i, html body .tab svg.i { margin-right: 0; }
html body button:has(> svg.i), html body .tab:has(> svg.i) { display: inline-flex; align-items: center; gap: 8px; }

/* banners hold a sentence (text, bold, code) plus maybe one button: flow the text, button to the right */
html body .banner { display: block; line-height: 1.6; }
html body .banner::after { content: ""; display: block; clear: both; }
html body .banner > button { float: right; margin: -2px 0 0 12px; }
html body #ext-state .dot { margin-right: 8px; vertical-align: 1px; }

/* CSV automation: Sheet / Live activity tabs (replaces the right-hand rail) */
.sheet-tabs { margin: 0 0 16px; }
.sheet-tabs button { display: inline-flex; align-items: center; gap: 8px; }
html body .live-card .live-log { max-height: none; margin-top: 14px; }
html body .live-card .live-log .ll { grid-template-columns: 72px 120px minmax(0, 1fr); padding: 10px 14px; font-size: 13px; }
@media (max-width: 700px) { html body .live-card .live-log .ll { grid-template-columns: 60px minmax(0, 1fr); } html body .live-card .live-log .ll .kind { display: none; } }
html body .conn-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
html body .logo.reddit { background: #fff0e8; color: #e8430c; }
.ch-reddit { background: #fff0e8; color: #e8430c; }

/* Sheet outreach report */
.rp-lead{border:1px solid var(--vy-line,#e3e8f2);border-radius:14px;padding:14px 16px;margin:0 0 12px;background:var(--vy-surface,#fff)}
.rp-lead>header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.rp-ch{border-top:1px solid var(--vy-line,#eef1f6);padding:8px 0}
.rp-ch-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600}
.rp-where{font-weight:400;overflow-wrap:anywhere}
.rp-acts{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.rp-subj{font-size:13px;margin-top:4px}
.rp-lead blockquote{margin:6px 0 0;padding:8px 10px;border-left:3px solid var(--vy-primary,#0040c1);background:#f6f8fc;border-radius:6px;white-space:pre-wrap;font-size:13px;line-height:1.5}
.rp-form{width:100%;border-collapse:collapse;margin-top:6px;font-size:13px}
.rp-form th{width:110px;text-align:left;vertical-align:top;padding:6px 8px;color:var(--vy-muted,#5b6475);font-weight:600;text-transform:capitalize}
.rp-form td{padding:6px 8px;white-space:pre-wrap;background:#f6f8fc;border-radius:4px}
.rp-form tr+tr th,.rp-form tr+tr td{border-top:4px solid transparent}

/* Review & approve */
.rv-rec{margin:0 0 8px;padding:8px 10px;border-radius:8px;background:#fff7e6;color:#7a4b00;font-size:13px}
.rv-ch{border-top:1px solid var(--vy-line,#eef1f6);padding:10px 0}
.rv-ch-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.rv-subj{display:flex;gap:8px;align-items:center;font-size:13px;margin:0 0 6px}
.rv-subj select{max-width:100%}
.rv-opts{display:grid;gap:6px}
.rv-opt{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:start;padding:8px 10px;border:1px solid var(--vy-line,#e3e8f2);border-radius:10px;cursor:pointer;font-size:13px;line-height:1.5}
.rv-opt.on{border-color:var(--vy-primary,#0040c1);background:#f3f6ff}
.rv-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#eef1f6;white-space:nowrap}
.rv-tag.mvp{background:#e8f0ff;color:#0040c1}.rv-tag.redesign{background:#e9f8ef;color:#0a7d3c}
.rv-text{white-space:pre-wrap;overflow-wrap:anywhere}
.rv-edit{width:100%;margin-top:6px;font:inherit;font-size:13px;padding:8px;border-radius:8px;border:1px solid var(--vy-line-strong,#cfd6e4);box-sizing:border-box}
@media (max-width:600px){.rv-opt{grid-template-columns:auto 1fr}.rv-text{grid-column:1/-1}}