:root{--ov-accent:#ddf500;--ov-accent-strong:#c7df00;--ov-ink:#111827;--ov-muted:#667085;--ov-line:#e7eaf0;--ov-bg:#fbfcfe;--ov-card:#fff;--ov-radius:14px;--ov-shadow:none}
body:has(#jwod-overview){margin:0;background:var(--ov-bg)}
.ov-brand-mark img,.ov-workspace-icon img{width:100%;height:100%;object-fit:contain;border-radius:inherit}.ov-workspace-icon>span{font-size:10px;font-weight:800}.ov-workspace-switcher{position:relative}.ov-account-menu{position:absolute;z-index:45;top:62px;left:0;width:100%;max-height:280px;overflow:auto;padding:6px;border:1px solid var(--ov-line);border-radius: 8px;background:#fff;box-shadow:0 14px 30px rgba(16,24,40,.14)}.ov-account-menu[hidden]{display:none}.ov-account-menu a{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:9px;min-height:44px;padding:6px 8px;border-radius:8px;color:var(--ov-ink);text-decoration:none}.ov-account-menu a:hover,.ov-account-menu a.current{background:#f5f7fa}.ov-account-menu a>span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#f0f2f5;color:#475467;font-size:10px;font-weight:800}.ov-account-menu a>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.ov-account-menu a>i{color:#8fa200;font-style:normal;font-weight:800}
*{box-sizing:border-box}.ov-svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.ov-shell{min-height:100vh;background:var(--ov-bg);color:var(--ov-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}.ov-shell button,.ov-shell input,.ov-shell select{font:inherit}.ov-sidebar{position:fixed;inset:0 auto 0 0;z-index:30;width:258px;display:flex;flex-direction:column;padding:14px 12px 12px;background:#fff;border-right:1px solid var(--ov-line)}.ov-brand{display:flex;align-items:center;gap:16px;padding:6px 4px 13px}.ov-brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius: 8px;background:var(--ov-accent);color:#111;font-weight:800}.ov-brand strong{font-size:17px}.ov-close-sidebar{display:none;margin-left:auto;border:0;background:transparent}.ov-close-sidebar svg,.ov-mobile-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}.ov-workspace{width:100%;height:56px;display:flex;align-items:center;gap:10px;text-align:left;padding:8px 12px;border:1px solid var(--ov-line);border-radius: 8px;background:#fff;color:var(--ov-ink);cursor:pointer}.ov-workspace-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--ov-accent)}.ov-workspace-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}.ov-workspace small,.ov-profile small{display:block;color:var(--ov-muted);font-size:11px;margin-bottom:2px}.ov-workspace strong{display:block;font-size:13px}.ov-chevron{margin-left:auto}.ov-nav{display:flex;flex-direction:column;gap:2px;margin-top:10px;overflow:auto;padding-bottom:10px;scrollbar-width:none}.ov-nav::-webkit-scrollbar{display:none}.ov-nav a{min-height:39px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius: 8px;color:#27324a;text-decoration:none;font-weight:500;transition:background .16s,color .16s}.ov-nav a:hover{background:#f5f7fa}.ov-nav a.active{background:linear-gradient(100deg,var(--ov-accent),#eafd5f);color:#171b20}.ov-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.ov-nav-glyph{display:grid;place-items:center;width:18px;height:18px;font-size:18px;color:#667085}.ov-nav-badge{margin-left:auto;min-width:21px;height:21px;display:grid;place-items:center;padding:0 6px;border-radius: 8px;background:#f0f2f6;color:#475467;font-size:11px}.ov-profile{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--ov-line);border-radius: 8px;background:#fff;min-width:0}.ov-profile-avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius: 8px;background:#ede9fe;color:#5b36d5;font-size:12px;font-weight:700}.ov-profile>span:nth-child(2){min-width:0}.ov-profile strong,.ov-profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ov-profile strong{font-size:13px}.ov-profile button{margin-left:auto;border:0;background:transparent;color:var(--ov-muted);cursor:pointer}.ov-main{min-height:100vh;margin-left:258px;padding:24px 30px 34px;overflow:hidden}.ov-header{position:relative;display:flex;align-items:flex-start;gap:18px;min-height:70px}.ov-heading h1{font-size:21px;line-height:1.2;margin:0 0 6px;letter-spacing:-.02em}.ov-heading p{margin:0;color:var(--ov-muted);font-size:13px}.ov-header-actions{position:relative;margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.ov-search{width:270px;height:38px;display:flex;align-items:center;gap:9px;padding:0 10px;border:1px solid var(--ov-line);border-radius: 8px;background:#fff}.ov-search svg{width:17px;height:17px;fill:none;stroke:#667085;stroke-width:1.8}.ov-search input{min-width:0;flex:1;border:0;outline:0;color:var(--ov-ink);background:transparent}.ov-search kbd{padding:0 6px;border-radius:5px;background:#f2f4f7;color:#667085;font-size:11px}.ov-bell{position:relative;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--ov-line);border-radius: 8px;background:#fff;color:#667085}.ov-bell svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}.ov-bell span{position:absolute;right:-4px;top:-7px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff;border-radius: 8px;background:var(--ov-accent);color:#222;font-size:10px;font-weight:700}.ov-date{height:38px;min-width:218px;display:flex;align-items:center;gap:9px;padding:0 14px;border:1px solid var(--ov-line);border-radius: 8px;background:#fff;color:#344054;cursor:pointer}.ov-date svg{width:16px;height:16px;fill:none;stroke:#667085;stroke-width:1.7}.ov-date span:last-child{margin-left:auto}.ov-date-menu{position:absolute;right:0;top:45px;z-index:20;width:180px;display:none;padding:6px;border:1px solid var(--ov-line);border-radius: 8px;background:#fff;box-shadow:0 12px 30px rgba(16,24,40,.12)}.ov-date-menu.open{display:grid}.ov-date-menu button{border:0;border-radius: 8px;background:#fff;text-align:left;padding:9px 10px;cursor:pointer}.ov-date-menu button:hover{background:#f5f7fa}.ov-mobile-menu{display:none;border:0;background:transparent}.ov-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:17px 0 24px}.ov-metric{position:relative;min-height:119px;padding:20px 68px 16px 18px;border:1px solid var(--ov-line);border-radius:var(--ov-radius);background:var(--ov-card);box-shadow:var(--ov-shadow)}.ov-metric>span{display:block;color:#344054;font-size:12px;margin-bottom:9px}.ov-metric strong{display:block;font-size:25px;line-height:1.1;letter-spacing:-.025em}.ov-metric small{display:block;margin-top:9px;color:#16a34a;font-size:11px;white-space:nowrap}.ov-metric i{position:absolute;right:18px;top:27px;width:58px;height:58px;display:grid;place-items:center;border-radius: 8px}.ov-metric i svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8}.ov-metric i.purple{background:#f1edff;color:#7047eb}.ov-metric i.green{background:#e9f9f1;color:#10b96f}.ov-metric i.blue{background:#edf6ff;color:#1688ef}.ov-metric i.amber{background:#fff7e7;color:#f59e0b}.ov-metric i.pink{background:#fff0f8;color:#e83298}.ov-primary-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(360px,1fr);gap:24px}.ov-secondary-grid{display:grid;grid-template-columns:1.22fr 1.15fr .74fr .88fr;gap:20px;margin-top:24px}.ov-card{border:1px solid var(--ov-line);border-radius:var(--ov-radius);background:var(--ov-card);box-shadow:var(--ov-shadow)}.ov-card-head{min-height:58px;display:flex;align-items:center;gap:12px;padding:0 20px}.ov-card-head h2{margin:0;font-size:15px;letter-spacing:-.01em}.ov-card-head>div{margin-left:auto;display:flex;gap:10px}.ov-card-head select{height:34px;padding:0 32px 0 12px;border:1px solid var(--ov-line);border-radius:8px;background:#fff;color:#344054;outline:0}.ov-card-head a{margin-left:auto;color:#7657ed;text-decoration:none;font-size:12px}.ov-chart-wrap{position:relative;height:247px;padding:2px 18px 25px 51px}.ov-chart-y{position:absolute;left:19px;top:2px;bottom:26px;display:flex;flex-direction:column;justify-content:space-between;color:#758095;font-size:10px}.ov-chart{width:100%;height:204px;overflow:visible}.ov-chart-grid path{fill:none;stroke:#edf0f4;stroke-width:1}.ov-chart-area{fill:url(#ov-chart-fill)}.ov-chart-line{fill:none;stroke:#c5dc00;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.ov-chart-labels{position:absolute;left:51px;right:18px;bottom:5px;display:flex;justify-content:space-between;color:#758095;font-size:10px}.ov-channel-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 14px 14px}.ov-channel-stat{display:grid;grid-template-columns:31px 1fr;gap:2px 9px;align-items:center;padding:11px;border:1px solid var(--ov-line);border-radius: 8px;min-width:0}.ov-channel-stat i{grid-row:1/3;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#edf8f2;color:#0ab66f;font-style:normal;font-weight:700}.ov-channel-stat span{font-size:10px;color:#344054;overflow:hidden;text-overflow:ellipsis}.ov-channel-stat strong{font-size:16px}.ov-channel-stat small{color:#16a34a;font-size:10px;margin-left:6px}.ov-recent-list{padding:0 20px 12px}.ov-recent-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:58px;border-top:1px solid #eef0f3}.ov-recent-item:first-child{border-top:0}.ov-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#eef1f5;color:#475467;font-weight:700;overflow:hidden}.ov-avatar img{width:100%;height:100%;object-fit:cover}.ov-recent-copy{min-width:0}.ov-recent-copy strong,.ov-recent-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ov-recent-copy strong{font-size:12px}.ov-recent-copy span{margin-top:4px;color:#667085;font-size:11px}.ov-recent-meta{text-align:right;color:#667085;font-size:10px}.ov-recent-meta b{display:grid;place-items:center;min-width:18px;height:18px;margin:6px 0 0 auto;padding:0 5px;border-radius: 8px;background:var(--ov-accent);color:#1c1c1c;font-size:10px}.ov-campaign-card,.ov-task-card,.ov-integration-card,.ov-upgrade{min-height:248px}.ov-campaign-list,.ov-task-list{padding:0 20px 14px}.ov-campaign-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:57px}.ov-campaign-thumb{width:42px;height:42px;display:grid;place-items:center;border-radius: 8px;background:linear-gradient(135deg,#2d2b29,#8d715d);color:#fff;font-size:10px}.ov-campaign-copy strong,.ov-campaign-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ov-campaign-copy strong{font-size:12px}.ov-campaign-copy small{color:#667085;font-size:10px;margin-top:4px}.ov-campaign-stats{text-align:right}.ov-campaign-stats strong,.ov-campaign-stats small{display:block;font-size:11px}.ov-campaign-stats small{color:#667085;margin-top:4px;font-size:9px}.ov-task-item{padding:8px 0}.ov-task-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#344054;font-size:11px}.ov-task-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ov-progress{height:4px;margin-top:8px;border-radius:4px;background:#eef0f3;overflow:hidden}.ov-progress i{display:block;height:100%;border-radius:4px;background:var(--ov-accent)}.ov-upgrade{display:flex;flex-direction:column;padding:22px 20px;border:1px solid #e4dbff;border-radius:var(--ov-radius);background:radial-gradient(circle at 90% 10%,rgba(130,107,255,.32),transparent 42%),linear-gradient(135deg,#fff2e8,#ece9ff)}.ov-upgrade>span{color:#f59e0b;font-size:20px}.ov-upgrade h2{margin:18px 0 8px;font-size:15px}.ov-upgrade p{margin:0;color:#475467;font-size:11px;line-height:1.7}.ov-upgrade a{margin-top:auto;display:grid;place-items:center;height:38px;border-radius: 8px;background:var(--ov-accent);color:#171717;text-decoration:none;font-size:12px;font-weight:700}.ov-integration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:8px 20px 20px}.ov-integration-grid span{height:56px;display:grid;place-items:center;border:1px solid var(--ov-line);border-radius: 8px;font-size:20px;font-weight:800}.ov-integration-grid .wa{color:#12b76a}.ov-integration-grid .ms{color:#1688ef}.ov-integration-grid .ig{color:#df35c6}.ov-integration-grid .sh{color:#5f9e2f}.ov-integration-grid .wp{color:#21759b}.ov-integration-grid .za{color:#ff5a1f}.ov-empty-inline{grid-column:1/-1;display:grid;place-items:center;min-height:80px;color:#98a2b3;font-size:12px}.ov-loading-list{display:grid;gap:12px;padding-top:8px}.ov-loading-list span{height:46px;border-radius: 8px;background:linear-gradient(90deg,#f5f6f8,#eceff3,#f5f6f8);background-size:200% 100%;animation:ov-shimmer 1.4s infinite}@keyframes ov-shimmer{to{background-position:-200% 0}}.ov-compose{position:fixed;right:24px;bottom:22px;z-index:20;width:56px;height:56px;border:0;border-radius:50%;background:var(--ov-accent);box-shadow:0 8px 25px rgba(156,175,0,.28);font-size:24px;cursor:pointer}.ov-backdrop{display:none}.ov-recent-item,.ov-campaign-item,.ov-task-item{color:inherit;text-decoration:none}
.jwod-overview-nav{color:inherit;text-decoration:none}.jwod-overview-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.jwod-overview-nav.jwod-active{background:linear-gradient(100deg,var(--ov-accent),#eafd5f)!important;color:#171717!important}
@media(max-width:1400px){.ov-main{padding-inline:22px}.ov-metrics{grid-template-columns:repeat(3,1fr)}.ov-primary-grid{grid-template-columns:minmax(0,1.45fr) minmax(330px,1fr)}.ov-secondary-grid{grid-template-columns:1fr 1fr}.ov-upgrade,.ov-integration-card{min-height:230px}}
@media(max-width:1100px){.ov-header{align-items:flex-start}.ov-header-actions{max-width:520px}.ov-primary-grid{grid-template-columns:1fr}.ov-secondary-grid{grid-template-columns:1fr 1fr}.ov-chart-card{min-width:0}}
@media(max-width:820px){.ov-sidebar{transform:translateX(-102%);transition:transform .2s ease;box-shadow:12px 0 30px rgba(16,24,40,.12)}.ov-sidebar.open{transform:translateX(0)}.ov-close-sidebar,.ov-mobile-menu{display:grid;place-items:center}.ov-backdrop{position:fixed;inset:0;z-index:25;background:rgba(15,23,42,.35)}.ov-backdrop.open{display:block}.ov-main{margin-left:0;padding:18px 16px 88px}.ov-header{flex-wrap:wrap}.ov-heading{flex:1}.ov-header-actions{width:100%;max-width:none;justify-content:flex-start}.ov-search{flex:1;width:auto}.ov-date{min-width:190px}.ov-metrics{grid-template-columns:repeat(2,1fr)}.ov-mobile-menu{width:36px;height:36px}.ov-compose{bottom:18px;right:18px}}
@media(max-width:560px){.ov-main{padding-inline:12px}.ov-heading h1{font-size:19px}.ov-heading p{font-size:12px}.ov-header-actions{gap:8px}.ov-search{order:3;flex-basis:100%}.ov-search kbd{display:none}.ov-date{flex:1;min-width:0}.ov-metrics{grid-template-columns:1fr;gap:10px}.ov-metric{min-height:104px}.ov-card-head{padding-inline:14px}.ov-card-head>div{gap:6px}.ov-card-head select{max-width:125px;padding-left:8px}.ov-chart-wrap{height:225px;padding-left:42px}.ov-chart-y{left:12px}.ov-chart-labels{left:42px}.ov-channel-stats{grid-template-columns:1fr 1fr;gap:8px}.ov-recent-list,.ov-campaign-list,.ov-task-list{padding-inline:14px}.ov-secondary-grid{grid-template-columns:1fr}.ov-campaign-card,.ov-task-card,.ov-integration-card,.ov-upgrade{min-height:220px}}

/* Accurate dashboard data states */
.ov-campaign-thumb{position:relative;overflow:hidden;background:#f2f4f7;color:#667085}.ov-campaign-thumb.has-media img,.ov-campaign-thumb.has-media video{width:100%;height:100%;display:block;object-fit:cover}.ov-campaign-thumb.is-video i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(17,24,39,.24);color:#fff;font-size:13px;font-style:normal}.ov-campaign-thumb.is-placeholder svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.ov-campaign-stats .ov-campaign-status{max-width:72px;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:#475467;font-size:10px}.ov-task-item,.ov-progress{display:block}.ov-task-row strong{flex:none;color:var(--ov-ink);font-size:11px}.ov-chart-y{font-variant-numeric:tabular-nums}.ov-chart-line{filter:drop-shadow(0 2px 3px rgba(177,197,0,.16))}
.ov-compose img{display:block;width:25px;height:25px;object-fit:contain;margin:auto}.ov-integration-zapier img{width:32px!important;height:25px!important}.ov-nav a>img{width:18px;height:18px;flex:none;object-fit:contain}

/* --------------------------------------------------------------------------
   Channel cards: the logo carries the brand of its own channel, so the tinted
   disc behind it only muddied it and boxed it in at 27px. The disc is dropped,
   the logo grows to fill the slot, and the inbox name is no longer the
   smallest text on the card.
   -------------------------------------------------------------------------- */
.ov-channel-stat { grid-template-columns: 38px 1fr !important; gap: 3px 11px !important; }

.ov-channel-stat i {
  width: 38px !important;
  height: 38px !important;
  background: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.ov-channel-stat i img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* A channel with no logo still needs its lettermark to read as one. */
.ov-channel-stat i:not(.has-image) {
  border-radius: 50% !important;
  background: #edf8f2 !important;
  font-size: 15px !important;
}

.ov-channel-stat span { font-size: 13px !important; font-weight: 700 !important; }

/* The Overview page shipped with its own lime (#ddf500). The platform's brand
   colour is #d4fb08, so the page's accent tokens are pinned to it rather than
   left a shade apart from every other surface. */
:root {
  --ov-accent: #d4fb08 !important;
  --ov-accent-strong: #b4d507 !important;
}

/* Nothing framing the logo: no border, outline or ring from any source. */
.ov-channel-stat i,
.ov-channel-stat i img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Notifications panel, opened from the bell.
   -------------------------------------------------------------------------- */
/* [hidden] is only display:none from the browser's own stylesheet, which any
   class rule with a display beats - so the panel below stayed on screen no
   matter what the script set. This restores the attribute's meaning. */
.ov-notifications-panel[hidden] { display: none !important; }

.ov-notifications-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 340px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ov-line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, .14);
  z-index: 80;
  overflow: hidden;
}

.ov-notifications-panel > header {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ov-ink);
  border-bottom: 1px solid var(--ov-line);
}

.ov-notifications-list { overflow-y: auto; }

.ov-notification-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 11px 14px;
  border-bottom: 1px solid #f1f3f7;
  text-decoration: none;
  color: var(--ov-ink);
}

.ov-notification-item:last-child { border-bottom: 0; }
.ov-notification-item:hover { background: #f5f7fa; }
.ov-notification-item strong { font-size: 13px; font-weight: 700; }
.ov-notification-item small { grid-column: 2; grid-row: 1; color: var(--ov-muted); font-size: 11px; }
.ov-notification-item span {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--ov-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unread items: a light brand tint and a bold line - no coloured edge (owner, 28 Sep 2026). */
.ov-notification-item.is-unread { background: rgba(212, 251, 8, .12); }
.ov-notification-item.is-unread strong { font-weight: 800; }

.ov-notifications-empty {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  color: var(--ov-muted);
  font-size: 12px;
}

/* Same trap as the panel above: these are shown and hidden through the `hidden`
   attribute, but each has a class rule setting `display`, which outranks the
   browser's own [hidden] { display: none } - so they never actually went away.
   The unread badge in particular sat there reading "0". */
.ov-bell span[hidden],
.ov-nav-badge[hidden],
#ov-notification-count[hidden],
#ov-inbox-badge[hidden] {
  display: none !important;
}

/* ==========================================================================
   Dark mode
   --------------------------------------------------------------------------
   Overview shipped with no dark support: it is a standalone Rails view, so it
   never loads the SPA bundle, brand-recolor.css or theme-sync.js, and stayed
   light while the rest of the platform went dark. The `.dark` class is set on
   <html> before first paint by the inline script in overview.html.erb, which
   reads the same `color_scheme` key the SPA writes.

   The page already has a token layer, so almost all of this is seven values.
   What follows the tokens are the places that wrote a colour literally instead
   of reaching for one - those cannot be reached any other way.

   Only the token block should need editing to retune the theme.
   ========================================================================== */

:root.dark {
  --ov-ink:   #e8eaed;   /* primary text     */
  --ov-muted: #98a1ad;   /* secondary text   */
  --ov-line:  #2c3138;   /* borders          */
  --ov-bg:    #141619;   /* page ground      */
  --ov-card:  #1b1e23;   /* cards and panels */
  --ov-shadow: 0 1px 2px rgba(0, 0, 0, .35);

  /* Surfaces the page paints as literal white, and the two greys it uses for
     hovers and subtle fills. Declared here so the rules below read as roles. */
  --ov-raised: #22262c;
  --ov-fill:   #262a30;
}

/* --- surfaces written as literal white --- */
.dark .ov-sidebar,
.dark .ov-workspace,
.dark .ov-profile,
.dark .ov-search,
.dark .ov-bell,
.dark .ov-date,
.dark .ov-date-menu,
.dark .ov-date-menu button,
.dark .ov-account-menu,
.dark .ov-card-head select,
.dark .ov-notifications-panel { background: var(--ov-card); }

/* --- hovers and subtle fills --- */
.dark .ov-nav a:hover,
.dark .ov-account-menu a:hover,
.dark .ov-account-menu a.current,
.dark .ov-date-menu button:hover,
.dark .ov-notification-item:hover { background: var(--ov-raised); }

.dark .ov-nav-badge,
.dark .ov-search kbd,
.dark .ov-account-menu a > span,
.dark .ov-progress,
.dark .ov-avatar,
.dark .ov-campaign-thumb { background: var(--ov-fill); }

/* --- text written as a literal --- */
.dark .ov-brand-mark { color: var(--ov-ink); }

/* `.ov-recent-meta b` is the unread pill, and its fill is the brand lime — a
   light plate. Its label has to go DARKER in dark mode, not lighter; treating
   it as ordinary text painted it #e8eaed on lime, a contrast ratio of 1.01,
   which is to say invisible. The same goes for the bell's count. */
.dark .ov-recent-meta b,
.dark .ov-bell span { color: #171b20; }

/* Links are a mid purple that sits at 3.5:1 on the dark ground — under the
   4.5:1 a 12px label needs. Lifted to a lighter tint of the same hue. */
.dark .ov-card-head a { color: #a78bfa; }

.dark .ov-nav a,
.dark .ov-date,
.dark .ov-metric > span,
.dark .ov-card-head select,
.dark .ov-channel-stat span,
.dark .ov-task-row,
.dark .ov-campaign-stats .ov-campaign-status,
.dark .ov-account-menu a > span { color: #c3c7cd; }

.dark .ov-nav-glyph,
.dark .ov-nav-badge,
.dark .ov-search kbd,
.dark .ov-bell,
.dark .ov-chart-y,
.dark .ov-chart-labels,
.dark .ov-avatar,
.dark .ov-recent-copy span,
.dark .ov-recent-meta,
.dark .ov-campaign-copy small,
.dark .ov-campaign-stats small,
.dark .ov-campaign-thumb,
.dark .ov-empty-inline { color: var(--ov-muted); }

.dark .ov-search svg,
.dark .ov-date svg { stroke: var(--ov-muted); }
.dark .ov-chart-grid path { stroke: var(--ov-line); }

/* --- depth --- */
.dark .ov-sidebar { box-shadow: 12px 0 30px rgba(0, 0, 0, .45); }
.dark .ov-account-menu,
.dark .ov-date-menu,
.dark .ov-notifications-panel { box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.dark .ov-backdrop { background: rgba(0, 0, 0, .55); }

/* --- accents that must stay recognisable ---
   The metric tiles are a tinted plate behind a coloured glyph. The light tints
   turn into bright blocks on a dark ground, so each becomes a low-alpha wash of
   its own hue and the glyph keeps its colour. */
.dark .ov-metric i.purple { background: rgba(112, 71, 235, .18); }
.dark .ov-metric i.green  { background: rgba(16, 185, 111, .18); }
.dark .ov-metric i.blue   { background: rgba(22, 136, 239, .18); }
.dark .ov-metric i.amber  { background: rgba(245, 158, 11, .18); }
.dark .ov-metric i.pink   { background: rgba(232, 50, 152, .18); }
.dark .ov-channel-stat i:not(.has-image) { background: rgba(10, 182, 111, .18) !important; }

/* The active nav row keeps the brand gradient, which is light - so its label
   stays dark on purpose. The one place dark text is correct here. */
.dark .ov-nav a.active,
.dark .jwod-overview-nav.jwod-active { color: #171b20; }

/* The unread ring is drawn against the header, not against white. */
.dark .ov-bell span { border-color: var(--ov-card); }

/* The date-menu buttons never declare a colour, so they inherit black. That is
   fine on their white plate and invisible on the dark one — 1.26:1. It only
   shows once the menu is opened, which is why an audit catches it and looking
   at the page does not. */
.dark .ov-date-menu button { color: #c3c7cd; }

/* --------------------------------------------------------------------------
   overview-assets.css scopes every rule with the ID `#jwod-overview`, which
   outranks a plain `.dark .ov-*` selector no matter how late it is declared.
   Its surfaces therefore need the ID here too — that is the only reason these
   are separated from the block above rather than folded into it.
   -------------------------------------------------------------------------- */
.dark #jwod-overview .ov-integration-grid a {
  background: var(--ov-raised);
  border-color: var(--ov-line);
}
.dark #jwod-overview .ov-integration-grid a:hover {
  border-color: #3a4048;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}

/* The channel and contact avatars sit on a white disc that reads as a hole in
   a dark card; the disc becomes the card colour so the logo still separates
   from what is behind it. */
.dark #jwod-overview .ov-channel-stat i.has-image,
.dark #jwod-overview .ov-avatar-channel {
  background: var(--ov-card);
  border-color: var(--ov-line);
}
.dark #jwod-overview .ov-avatar-channel { box-shadow: none; }

/* The tip card is an illustration: a tinted plate with paper sheets on it.
   Kept as an illustration, just dimmed — at full white the sheets glare on a
   dark page and pull the eye away from the data. */
.dark #jwod-overview .ov-tip-card {
  background: radial-gradient(circle at 90% 12%, rgba(20, 202, 111, .10), transparent 60%), var(--ov-card);
  border-color: var(--ov-line);
}
.dark #jwod-overview .ov-tip-sheet {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(16, 185, 129, .28);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
}
.dark #jwod-overview .ov-tip-sheet::before,
.dark #jwod-overview .ov-tip-sheet::after { background: rgba(255, 255, 255, .18); }

.dark #jwod-overview .ov-tip-label { color: #c3c7cd; }
.dark #jwod-overview .ov-tip-card p { color: var(--ov-muted); }


/* Anything sitting on the brand lime keeps DARK text in dark mode.

   This caught three separate elements — the unread pill, the bell count and
   the tip card's Learn More button — each one painted light because it looked
   like ordinary text. The lime plate does not change with the theme, so its
   label must not either. Stated once, as a rule about the colour rather than
   about the elements, so the next lime thing added is right by default. */
.dark #jwod-overview [style*="d4fb08"],
.dark #jwod-overview .ov-tip-copy a,
.dark .ov-recent-meta b,
.dark .ov-bell span,
.dark .ov-nav a.active,
.dark .jwod-overview-nav.jwod-active { color: #171b20 !important; }

/* Dividers and hairlines that were written as a light literal rather than
   through --ov-line, so the token override above never reached them. On a dark
   card a #eef0f3 rule reads as a bright white bar between every row, which is
   what made the lists look striped and noisy.

   Softened further than the token used for card outlines: a divider inside a
   card only has to separate, not to frame. */
:root.dark { --ov-divider: #262a30; }

.dark .ov-recent-item,
.dark .ov-campaign-item,
.dark .ov-task-item,
.dark .ov-notification-item,
.dark .ov-account-menu a > span,
.dark .ov-nav-badge,
.dark .ov-profile-avatar,
.dark .ov-search kbd,
.dark .ov-channel-stat i,
.dark .ov-avatar,
.dark .ov-progress,
.dark .ov-upgrade { border-color: var(--ov-divider) !important; }

/* The skeleton shimmer is three light greys; on a dark page it flashes white
   every time the list reloads. */
.dark .ov-loading-list span {
  background: linear-gradient(90deg, #1f2329, #272c33, #1f2329) !important;
}

/* --------------------------------------------------------------------------
   Refresh control, beside the channel and interval selects.
   The section it refreshes no longer redraws on the ten-second poll, so this
   is how it is brought up to date on demand.
   -------------------------------------------------------------------------- */
.ov-refresh {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ov-line);
  border-radius: 8px;
  background: var(--ov-card);
  color: var(--ov-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.ov-refresh svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ov-refresh:hover:not(:disabled) {
  color: var(--ov-ink);
  border-color: var(--ov-accent-strong);
}
.ov-refresh:disabled { cursor: default; }

/* Spins only while a refresh is in flight, so the button reports what it is
   doing rather than looking inert on a slow connection. */
.ov-refresh.is-busy svg { animation: ov-refresh-spin .8s linear infinite; }
@keyframes ov-refresh-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ov-refresh.is-busy svg { animation: none; opacity: .55; }
}

/* The greying rules for disconnected channels were removed with the decision
   to leave them out of the row entirely. isDisconnected() in overview.js is
   now a filter, not a style hook. */

/* --------------------------------------------------------------------------
   Chart gutter.
   `.ov-chart` carried a fixed height taller than the box it sits in, so the
   plot spilled into the strip the date labels occupy and the baseline ran
   straight through "Aug 28 … Sep 3".

   The wrap is switched to border-box first: without that, `height: 100%` on
   the SVG resolves against a box that already excludes the padding, and the
   SVG came out 240px inside a 211px region — taller than before the fix. With
   border-box the percentage means what it reads as, and the padding below is
   a real gutter the plot cannot enter.

   The selector is `#ov-chart`, not `.ov-chart`: the element carries only that
   id and no class, so the shipped `.ov-chart{height:204px}` rule has never
   matched anything. The SVG was being sized purely by its viewBox ratio, which
   is why it grew past its box as the card got wider.
   -------------------------------------------------------------------------- */
.ov-chart-wrap {
  box-sizing: border-box;
  padding-bottom: 34px;
}
#ov-chart {
  /* Width as well as height. Fixing only the height left the SVG taking its
     WIDTH from the viewBox ratio, so it stayed 763px wide however far the card
     stretched and the plot stopped short of the last date label. Both axes are
     stated, and preserveAspectRatio="none" on the element lets the plot fill
     whatever box it is given. */
  width: 100%;
  height: 100%;
  overflow: hidden;   /* the 2.4px stroke would otherwise bleed past the edge */
}
.ov-chart-y { bottom: 34px; }
.ov-chart-labels { bottom: 8px; }