:root{
  --blue:#2563eb; --blue-deep:#1d4ed8; --blue-soft:#7ea6f5; --blue-dark:#1e40af;
  --green:#16a34a; --green-soft:#22c55e; --amber:#f59e0b; --red:#e2582c; --purple:#8b5cf6;
  --bg:#f4f7fc; --surface:#fff; --text:#0d1b33; --muted:#6b7a94; --line:#e6ecf6;
  --line-strong:#cfdcf1; --hover:#eff5ff; --track:#e6ecf6;
  --grid:#e6ecf6;
  --header-a:#0b2a6b; --header-b:#123a8a; --header-text:#fff;
  --hero-a:#0f307e; --hero-b:#1749b8; --hero-text:#fff; --hero-sub:#b9cdf5;
  --chip-bg:#eaf1ff; --chip-icon:#2563eb;
  --warn-bg:#fff7ed; --warn-hover:#ffedd5; --warn-border:#fed7aa; --warn-border-strong:#fdba74;
  --warn-text:#9a3412; --warn-icon:#c2410c; --warn-dot:#f97316;
  --err-bg:#fef2f2; --err-border:#fecaca; --err-text:#991b1b; --err-icon-bg:#fee2e2; --err-icon:#b91c1c;
  --est-bg:#eff6ff; --est-hover:#dbeafe; --est-border:#c7dbfd; --est-border-strong:#93c5fd;
  --est-text:#1d4ed8; --est-dot:#3b82f6;
  --proj-bg:#edfaf2; --proj-border:#c7ecd6; --proj-text:#15803d; --proj-strong:#15803d; --proj-dot:#16a34a;
  --proj-go-bg:rgba(22,163,74,.14); --ring-track:#e8eefb; --good-bg:#e6f7ec;
  --banner-link-hover:rgba(255,255,255,.7);
  --shadow:0 1px 2px rgba(13,27,51,.04), 0 6px 20px rgba(13,27,51,.05);
  --shadow-lift:0 10px 34px rgba(13,27,51,.10);
  --radius:14px;
  color-scheme:light;
}

/* ------------------------------------------------ 3.11.11 live UI fixes */
/* Presence tooltips are portalled to body by dashboard.js, so neither the
   target artwork nor the live-card border can clip them. */
.bsr-presence-chart i[data-tip]::after,
.bsr-online-note[data-tip]::after,
.bsr-audience-donut[data-tip]::before{content:none!important;display:none!important}
.bsr-presence-floating-tip{position:fixed;z-index:10000;width:max-content;max-width:min(280px,calc(100vw - 16px));
  padding:7px 9px;border-radius:8px;background:#0d1b33;color:#fff;box-shadow:0 10px 28px rgba(13,27,51,.28);
  font:600 11px/1.3 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  white-space:normal;pointer-events:none}
.bsr-presence-floating-tip[hidden]{display:none!important}

/* Only real extra country pages receive navigation. */
.bsr-audience-pages{display:none!important}
.bsr-country-pager{display:none;align-items:center;justify-content:center;gap:6px;margin-top:4px}
.bsr-country-pager button{width:18px;height:4px;padding:0;border:0;border-radius:999px;background:var(--line-strong);cursor:pointer}
.bsr-country-pager button.is-active{width:27px;background:var(--blue)}
.bsr-audience-row.is-country::after{left:24px;right:0;width:auto;
  background:linear-gradient(90deg,#4f8ef5 0 var(--share,0%),transparent var(--share,0%) 100%)}

/* Provider marks read as one compact group. The generic layers icon is not
   repeated when the selected All sites row already shows its providers. */
.bsr-site-provider-icons{gap:2px!important}
.bsr-siteswitch.is-all-sites>summary>.bsr-ico:first-child{display:none!important}
.bsr-siteswitch>summary .bsr-site-provider-icons img{width:18px!important;height:18px!important}

@media(min-width:861px){
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:42px!important}
}
@media(max-width:860px){
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:40px!important}
  .bsr-country-pager{display:flex}
  .bsr-change.is-down .bsr-arrow{color:#e56b3f!important}
}

*{box-sizing:border-box}
html{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);overflow-x:clip}
button,input,select{font:inherit;color:inherit}
h1,h2{margin:0}
[hidden]{display:none!important}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid #8bb8ff;outline-offset:2px}

/* ------------------------------------------------------------------ layout */
.bsr-app{width:100%;max-width:1360px;min-width:0;margin:0 auto;padding:14px clamp(14px,2vw,36px) 40px;overflow-x:clip}
.bsr-main{display:flex;flex-direction:column;gap:14px;min-width:0;margin-top:14px}

/* ------------------------------------------------------------------ header */
.bsr-header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-radius:16px;color:var(--header-text);
  background:linear-gradient(100deg,var(--header-a),var(--header-b));box-shadow:var(--shadow-lift)}
.bsr-brand{display:flex;align-items:center;gap:12px;min-width:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.bsr-logo{width:40px;height:40px;flex:0 0 40px;border-radius:11px;object-fit:contain;background:#fff}
.bsr-logo-fallback{display:grid;place-items:center;color:var(--header-a);font-weight:800;font-size:19px}
.bsr-brand strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.bsr-header-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.bsr-tools:empty{display:none}
.bsr-chip{font-size:12.5px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:#dce8ff;white-space:nowrap}
.bsr-sync{font-size:13px;color:#c3d6f7;white-space:nowrap}

.bsr-hbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 15px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;border-radius:11px;
  font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.bsr-hbtn:hover{background:rgba(255,255,255,.18)}
.bsr-hbtn:disabled{opacity:.6;cursor:wait}
.bsr-hbtn.is-icon{width:40px;padding:0}
.bsr-ico{flex:0 0 auto}
.bsr-hbtn.is-busy .bsr-ico,.bsr-card-sync.is-busy .bsr-ico{animation:bsr-spin .9s linear infinite;transform-origin:50% 50%}
@keyframes bsr-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bsr-hbtn.is-busy .bsr-ico,.bsr-card-sync.is-busy .bsr-ico{animation:none;opacity:.5}}

.bsr-account{position:relative;flex:0 0 auto}
.bsr-account summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;height:40px;
  padding:0 11px 0 5px;border-radius:11px;border:1px solid rgba(255,255,255,.2);font-weight:600;font-size:14px;white-space:nowrap}
.bsr-account summary::-webkit-details-marker{display:none}
.bsr-account summary:hover{background:rgba(255,255,255,.14)}
.bsr-avatar{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:9px;
  background:var(--blue);color:#fff;font-size:13px;font-weight:700;text-transform:uppercase}
.bsr-account-name{overflow:hidden;text-overflow:ellipsis;max-width:120px}
.bsr-account>div{position:absolute;right:0;top:48px;z-index:60;width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 70px);overflow-y:auto;padding:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lift)}
.bsr-account-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 7px 12px;color:var(--text)}
.bsr-account-user{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:800}
.bsr-account-role{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:var(--chip-bg);color:var(--blue-deep);
  font-size:10px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.07em}
.bsr-account a{display:flex;align-items:center;gap:11px;min-height:42px;padding:9px 10px;color:var(--text);text-decoration:none;border-radius:9px;font-size:14px;font-weight:650}
.bsr-account a:hover,.bsr-account a:focus-visible{background:var(--hover)}
/* The menu holds one button among its links; it has to look like the rest. */
.bsr-account-action{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:9px 10px;border:0;background:transparent;
  color:var(--text);text-align:left;border-radius:9px;font-size:14px;font-weight:650;cursor:pointer}
.bsr-account-action:hover,.bsr-account-action:focus-visible{background:var(--hover)}
.bsr-account-appearance{display:grid;gap:14px;padding:12px 6px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--text)}
.bsr-account-group-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bsr-account-control{display:grid;gap:7px}
.bsr-account-control-label,.bsr-style-switcher.is-account .bsr-style-title{font-size:12px;font-weight:750;color:var(--text)}
.bsr-account-control form{margin:0}
.bsr-account-theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.bsr-account-theme-choice{min-height:40px;padding:0 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:12px;font-weight:750;cursor:pointer}
.bsr-account-theme-choice:hover,.bsr-account-theme-choice:focus-visible{background:var(--surface);color:var(--text);border-color:var(--line)}
.bsr-account-theme-choice.is-active{background:var(--surface);color:var(--text);border-color:var(--line-strong);box-shadow:0 1px 3px rgba(13,27,51,.08)}
.bsr-language-section select{width:100%;height:42px;padding:0 36px 0 11px;border:1px solid var(--line-strong);
  border-radius:9px;background:var(--surface);color:var(--text);font:650 13px/1 Inter,ui-sans-serif,sans-serif;cursor:pointer}
.bsr-language-section select:hover{border-color:var(--blue-soft)}
.bsr-language-section select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bsr-language-section select option{background:var(--surface);color:var(--text)}
.bsr-account-links{padding-top:7px}
.bsr-account-signout{margin-top:7px;border-top:1px solid var(--line);border-radius:0 0 9px 9px!important}

/* ----------------------------------------------------------- target history */
.bsr-modal-card.bsr-history-card{width:min(640px,100%)}
.bsr-history-empty{margin:0 0 4px;font-size:13px;color:var(--muted);line-height:1.55}
.bsr-history-filter{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:13px;color:var(--muted)}
.bsr-history-filter select{height:36px;border:1px solid var(--line);border-radius:9px;padding:0 9px;
  background:var(--surface);color:var(--text);font-size:13px}
.bsr-history-scroll{max-height:min(52vh,420px);overflow:auto;border:1px solid var(--line);border-radius:11px}
.bsr-history-table{width:100%;border-collapse:collapse;font-size:13px}
.bsr-history-table th,.bsr-history-table td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line)}
.bsr-history-table td:first-child{white-space:nowrap}
.bsr-history-table thead th{position:sticky;top:0;z-index:1;background:var(--surface);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.bsr-history-table tbody tr:last-child td{border-bottom:0}
.bsr-history-num{font-variant-numeric:tabular-nums;font-weight:650}
.bsr-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:650;
  background:var(--chip-bg);color:var(--muted)}
.bsr-pill.is-met{background:var(--good-bg);color:var(--proj-strong)}
.bsr-pill.is-missed{background:var(--err-bg);color:var(--err-text)}
.bsr-pill.is-open{background:var(--est-bg);color:var(--est-text)}

/* ------------------------------------------------------- collapsible panels */
.bsr-collapse{display:flex;align-items:center;gap:6px;margin-left:auto;height:32px;padding:0 11px;
  border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);
  font-size:12.5px;font-weight:600;cursor:pointer}
.bsr-collapse:hover{background:var(--hover);color:var(--blue-deep);border-color:var(--line-strong)}
/* Chevron points the way the panel will move: up to hide, down to show. */
.bsr-collapse[aria-expanded="true"] .bsr-chevron{transform:rotate(180deg)}
.bsr-panel.is-collapsed .bsr-panel-body{display:none}
.bsr-panel.is-collapsed{padding-bottom:14px}
/* The dimension tabs belong to the panel body, not its header, once collapsed. */
.bsr-panel.is-collapsed .bsr-subtabs{display:none}
@media(max-width:820px){
  .bsr-collapse-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .bsr-collapse{width:32px;padding:0;justify-content:center}
}
.bsr-avatar{overflow:hidden}.bsr-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
@media(max-width:820px){
  .bsr-history-scroll{max-height:58vh}
  .bsr-history-table th,.bsr-history-table td{padding:8px 9px;font-size:12.5px}
}

/* --------------------------------------------------------------- summary row */
/* The summary is a grouping in the markup only. Its target/live row is a
   bounded desktop grid, while the remaining summary children keep their
   place directly in the page flow. */
.bsr-summary{display:contents}
.bsr-main>*{order:7}
.bsr-controls{order:0}
.bsr-proj-wrap{order:1}
.bsr-target-live-row{order:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(437px,506px);gap:14px;min-width:0;max-width:100%}
.bsr-target-live-row.no-target{grid-template-columns:minmax(0,1fr)}
.bsr-target-live-row.no-target .bsr-online-standalone{grid-column:1/-1}
.bsr-target-live-row .bsr-target{min-width:0}
.bsr-target,.bsr-set-target,.bsr-month-total{order:initial}
.bsr-banner{order:4}
.bsr-metrics{order:5}
.bsr-traffic{order:6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0;max-width:100%}

.bsr-proj-wrap{position:relative;display:flex}
.bsr-proj{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius);width:100%;
  text-align:left;font:inherit;cursor:pointer;
  background:var(--proj-bg);border:1px solid var(--proj-border);text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.bsr-proj:hover,.bsr-proj[aria-expanded="true"]{border-color:var(--proj-dot)}
/* The explainer is a centred dialog, not a popover hanging off the button:
   anchored to the button it fell off the side of a phone screen. */
.bsr-modal-card.bsr-proj-card{width:min(400px,100%)}

/* Worked-out figures inside an explainer popover. */
.bsr-calc{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:baseline;
  font-size:12.5px;color:var(--muted);margin:0 0 11px}
.bsr-calc b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.bsr-calc-rule{grid-column:1/-1;height:1px;background:var(--line);margin:1px 0}
.bsr-proj-icon{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:50%;
  background:var(--proj-dot);color:#fff}
.bsr-proj-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.bsr-proj-label{font-size:13.5px;color:var(--proj-text);font-weight:600}
.bsr-proj strong{font-size:26px;font-weight:800;color:var(--proj-strong);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bsr-proj-label{font-size:14px;color:var(--proj-text);font-weight:600}
.bsr-proj-go{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;
  background:var(--proj-go-bg);color:var(--proj-strong)}
.bsr-proj:hover .bsr-proj-go{background:var(--proj-dot);color:#fff}

.bsr-target{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 18px}
.bsr-target-main{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* Middle column */
.bsr-target-mid{flex:1;min-width:0}
.bsr-target-label{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--muted);font-weight:600;margin-bottom:3px;position:relative;top:-8px}
.bsr-target-label-icon{width:24px;height:24px;flex:0 0 24px;display:inline-grid;place-items:center;border-radius:8px;background:var(--chip-bg);color:var(--blue)}
.bsr-target-label-icon .bsr-ico{width:16px;height:16px}
.bsr-target-amount-row{position:relative;top:-8px}
.bsr-target-amounts{display:block;font-size:27px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.bsr-target-amounts em{font-style:normal;font-size:16px;font-weight:600;color:var(--muted);white-space:nowrap}
.bsr-target-track{position:relative;height:9px;border-radius:999px;background:var(--track);
  overflow:visible}
.bsr-target-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--blue)}
.bsr-target.is-ontrack .bsr-target-fill,.bsr-target.is-hit .bsr-target-fill{background:var(--green)}
.bsr-target-tick{position:absolute;top:0;width:2px;height:9px;background:var(--text);opacity:.5;left:0}

/* Figures to the right of the bar.
   Across the foot of the card they cost a second row of height for nothing —
   the card is full width again, so all three fit beside the ring and the card
   becomes a single row. A phone still stacks them; see the 820px block. */
.bsr-target-stats{position:relative;flex:0 0 auto;display:flex;flex-direction:row;gap:6px;
  align-self:stretch;align-items:center;padding-left:18px;border-left:1px solid var(--line)}
.bsr-tstat{flex:0 0 auto;min-width:132px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:6px;padding:8px 10px}
.bsr-tstat-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;
  background:var(--chip-bg);color:var(--chip-icon)}
.bsr-tstat.is-good .bsr-tstat-icon{background:var(--good-bg);color:var(--green)}
.bsr-tstat-text{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;text-align:center}
.bsr-tstat-text span{font-size:11.5px;color:var(--muted);line-height:1.25}
.bsr-tstat-text strong{font-size:19px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}

.bsr-tstat-btn{border:0;background:var(--proj-bg);border-radius:11px;
  font:inherit;color:inherit;text-align:center;cursor:pointer}
.bsr-tstat-btn:hover,.bsr-tstat-btn[aria-expanded="true"]{background:var(--proj-bg)}
.bsr-tstat-go{display:none}
.bsr-tstat-btn[aria-expanded="true"] .bsr-tstat-go{transform:rotate(180deg)}

/* Projected month keeps the green it had as its own card. */
.bsr-tstat.is-proj .bsr-tstat-icon{background:var(--good-bg);color:var(--green)}
.bsr-tstat.is-proj .bsr-tstat-text strong{color:var(--proj-strong)}
@media(prefers-reduced-motion:reduce){.bsr-tstat-go{transition:none}}

/* Completed months have one final result rather than three live forecasts. */
.bsr-target.is-closed .bsr-target-stats{flex-basis:170px}
.bsr-target.is-closed .bsr-tstat{min-width:150px}

/* -------------------------------------------------------- target motion */
/* The "cling": once the count-up lands, a light runs along the bar and the
   figure gives one small bounce. Everything is static again inside a second. */
@keyframes bsr-cling-pop{0%{transform:scale(1)}30%{transform:scale(1.07)}62%{transform:scale(.985)}100%{transform:scale(1)}}
@keyframes bsr-cling-sweep{from{transform:translateX(-60%)}to{transform:translateX(320%)}}
@keyframes bsr-cling-glow{0%{opacity:0}25%{opacity:.85}100%{opacity:0}}
/* Target met: the headline revenue figure swells very slightly, then settles.
   It grows from its left edge so it reads as emphasis, not as movement. */
@keyframes bsr-earn-zoom{
  0%{transform:scale(1)}
  38%{transform:scale(1.07)}
  74%{transform:scale(.996)}
  100%{transform:scale(1)}
}
.bsr-value.is-flash{animation:bsr-earn-zoom 1.05s cubic-bezier(.22,.9,.24,1) both;
  transform-origin:left center;will-change:transform}

@keyframes bsr-celebrate-ring{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.22);opacity:0}100%{transform:scale(1.22);opacity:0}}

.bsr-target.is-cling .bsr-ring-pct,
.bsr-target.is-cling .bsr-target-earned{animation:bsr-cling-pop .52s cubic-bezier(.22,.9,.24,1) both;display:inline-block}

.bsr-target-track::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  opacity:0;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);
  width:38%}
.bsr-target.is-cling .bsr-target-track::after{animation:bsr-cling-sweep .62s ease-out .02s, bsr-cling-glow .62s ease-out .02s}

/* Target met: one green pulse out of the ring, then it stops for good. */
.bsr-ring-burst{position:absolute;inset:6px;border-radius:50%;border:3px solid var(--green);
  opacity:0;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .bsr-target.is-cling .bsr-ring-pct,
  .bsr-target.is-cling .bsr-target-earned,
  .bsr-target.is-cling .bsr-target-track::after,
  .bsr-target.is-celebrate .bsr-ring-burst,
  .bsr-value.is-flash,
  .bsr-online-pulse{animation:none}
}

/* ------------------------------------------------ 3.11.9 Classic refinements */
.bsr-ga4-mark{background:var(--chip-bg);color:var(--chip-icon)}
.bsr-ga4-mark .bsr-ga4-icon{width:18px;height:20px;object-fit:contain}
.bsr-site-provider-icons{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.bsr-site-provider-icons img{display:block;width:22px;height:22px;border-radius:6px;object-fit:contain}
.bsr-site-provider-icons img.is-adsense{width:20px;height:20px;border-radius:0}
.bsr-site-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsr-account>div>a,.bsr-account-action{display:flex;align-items:center;gap:9px}
.bsr-account>div>a .bsr-ico,.bsr-account-action .bsr-ico{color:var(--blue);flex:0 0 16px}

:root[data-style="classic"] .bsr-target{overflow:visible}
.bsr-target-inherited{position:relative;display:inline-grid;place-items:center;width:25px;height:25px;
  flex:0 0 25px;border-radius:8px;background:#eef4ff;color:var(--blue);cursor:help}
.bsr-target-inherited::after{content:attr(data-tip);position:absolute;z-index:90;right:0;bottom:calc(100% + 8px);
  width:250px;padding:8px 10px;border-radius:9px;background:#0d1b33;color:#fff;font-size:11px;
  font-weight:600;line-height:1.35;box-shadow:0 8px 24px rgba(7,24,52,.22);opacity:0;visibility:hidden;
  transform:translateY(3px);transition:.16s}
.bsr-target-inherited:hover::after,.bsr-target-inherited:focus-within::after{opacity:1;visibility:visible;transform:none}
.bsr-target-history{margin-left:0}
.bsr-edit-specific{display:none}
.bsr-target.is-inherited .bsr-edit-pencil{display:none}
.bsr-target.is-inherited .bsr-edit-specific{display:grid}

/* Put the daily pace directly beneath the edit controls and against the rail. */
:root[data-style="classic"] .bsr-target-mid{position:relative;padding-bottom:22px}
:root[data-style="classic"] .bsr-target-stats{position:absolute;right:0;bottom:0;z-index:3;gap:9px}
:root[data-style="classic"] .bsr-target-stats .bsr-tstat{font-size:11.5px}
:root[data-style="classic"] .bsr-target-stats .bsr-tstat-text{flex-direction:row}

/* A roomy GA4-inspired reverse face. The chart keeps the same bar language. */
@media(min-width:861px){
  :root[data-style="classic"] .bsr-goal-side{grid-template-columns:clamp(410px,34vw,480px)}
  :root[data-style="classic"] .bsr-online-target{min-height:214px;padding:16px 18px;cursor:pointer}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:132px;gap:3px}
}
.bsr-online-target[data-presence-flip]{position:relative;perspective:900px;cursor:pointer}
.bsr-online-target[data-presence-flip]:focus-visible{outline:3px solid #8bb8ff;outline-offset:2px}
.bsr-online-target[data-presence-flip] .bsr-online-copy{padding-right:0}
.bsr-audience-breakdown{position:absolute;inset:14px 16px 10px;display:flex;flex-direction:column;gap:10px;
  opacity:0;visibility:hidden;pointer-events:none;transform:rotateY(-88deg);transform-origin:center;
  transition:opacity .18s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s}
.bsr-online-target.is-flipped .bsr-audience-breakdown{opacity:1;visibility:visible;pointer-events:auto;
  transform:rotateY(0);transition-delay:0s}
.bsr-audience-heading{display:flex;align-items:baseline;gap:8px;padding:0;min-width:0}
.bsr-audience-heading strong{display:flex;align-items:center;gap:7px;font-size:15px;line-height:1.15;color:var(--text)}
.bsr-audience-heading strong i{width:8px;height:8px;border-radius:50%;background:#32bd50;box-shadow:0 0 0 4px rgba(50,189,80,.11)}
.bsr-audience-heading small{font-size:10.5px;line-height:1.2;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsr-audience-layout{display:grid;grid-template-columns:108px minmax(108px,.75fr) minmax(150px,1fr);gap:15px;align-items:center;min-height:132px}
.bsr-audience-layout section{min-width:0}
.bsr-audience-layout h4{margin:0 0 8px;font-size:11px;color:var(--muted);letter-spacing:.01em}
.bsr-audience-countries{padding-left:14px;border-left:1px solid var(--line)}
.bsr-audience-donut{--mobile-share:72%;--tablet-end:88%;width:102px;height:102px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#3b82f6 0 var(--mobile-share),#4fbd61 var(--mobile-share) var(--tablet-end),#f5a524 var(--tablet-end) 100%);position:relative}
.bsr-audience-donut::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--surface)}
.bsr-audience-donut>span{position:relative;z-index:1;display:grid;text-align:center;gap:2px}
.bsr-audience-donut strong{font-size:24px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.bsr-audience-donut small{font-size:9.5px;line-height:1.2;color:var(--muted)}
.bsr-audience-list{display:grid;gap:7px;min-height:42px}
.bsr-audience-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;
  min-width:0;padding-bottom:5px;font-size:11px;line-height:1.1}
.bsr-audience-row.is-device{grid-template-columns:minmax(0,1fr) auto auto}
.bsr-audience-row::after{content:"";position:absolute;left:0;bottom:0;width:var(--share,0%);height:3px;border-radius:999px;background:#4f8ef5;opacity:.9}
.bsr-audience-row>span{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.bsr-audience-row b{font-size:11px;color:var(--text);font-weight:750;font-variant-numeric:tabular-nums}
.bsr-audience-row small{font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.bsr-country-flag{font-style:normal;font-size:15px;line-height:1}
.bsr-device-dot{width:9px;height:9px;border-radius:50%;background:#3b82f6;flex:0 0 9px}
.bsr-audience-row.is-device:nth-child(2) .bsr-device-dot{background:#4fbd61}
.bsr-audience-row.is-device:nth-child(3) .bsr-device-dot{background:#f5a524}
.bsr-audience-empty{display:flex;align-items:center;min-height:42px;font-size:10.5px;color:var(--muted)}
.bsr-audience-pages{display:flex;justify-content:center;gap:6px;margin-top:auto}
.bsr-audience-pages i{width:20px;height:4px;border-radius:99px;background:var(--line-strong)}
.bsr-audience-pages i.is-active{width:30px;background:var(--blue)}

/* Classic dark keeps its icon chips and target rail integrated with the card. */
:root[data-theme="dark"][data-style="classic"] .bsr-card .bsr-card-icon,
:root[data-theme="dark"][data-style="classic"] .bsr-card.is-rpm .bsr-card-icon,
:root[data-theme="dark"][data-style="classic"] .bsr-card.is-vrpm .bsr-card-icon,
:root[data-theme="dark"][data-style="classic"] .bsr-card.is-pageviews .bsr-card-icon,
:root[data-theme="dark"][data-style="classic"] .bsr-card.is-visible .bsr-card-icon{background:#16264a;color:#60a5fa;box-shadow:none}
:root[data-theme="dark"][data-style="classic"] .bsr-target-track{background:#1c2942;box-shadow:inset 0 1px 2px rgba(0,0,0,.24)}
:root[data-theme="dark"][data-style="classic"] .bsr-target-ghost{background:repeating-linear-gradient(115deg,#315b9c 0 5px,transparent 5px 10px)}
:root[data-theme="dark"][data-style="classic"] .bsr-target-inherited{background:#16264a;color:#60a5fa}

@media(max-width:860px){
  :root[data-style="classic"] .bsr-target-mid{padding-bottom:0}
  :root[data-style="classic"] .bsr-target-stats{position:static;gap:7px}
  :root[data-style="classic"] .bsr-online-target{min-height:250px;padding:11px;border-left:0;border:1px solid var(--line);border-radius:12px}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:132px;gap:2px}
  .bsr-audience-breakdown{inset:11px 12px 8px;gap:8px}
  .bsr-audience-heading strong{font-size:13px}
  .bsr-audience-layout{grid-template-columns:92px minmax(0,1fr);grid-template-areas:"donut devices" "countries countries";gap:9px 13px;min-height:195px}
  .bsr-audience-donut{grid-area:donut;width:86px;height:86px}
  .bsr-audience-donut::after{inset:12px}
  .bsr-audience-donut strong{font-size:20px}
  .bsr-audience-devices{grid-area:devices}
  .bsr-audience-countries{grid-area:countries;padding:8px 0 0;border-left:0;border-top:1px solid var(--line)}
  .bsr-audience-countries .bsr-audience-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:13px}
  .bsr-audience-row{font-size:10px;gap:5px}
  .bsr-audience-row b{font-size:10px}
  .bsr-audience-pages{display:none}
}

.bsr-target-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bsr-target-edit{flex:0 0 auto;width:30px;height:30px;display:grid;
  place-items:center;border:0;background:var(--chip-bg);color:var(--chip-icon);border-radius:10px;cursor:pointer}
.bsr-target-edit:hover{background:var(--hover);color:var(--blue)}

@media(prefers-reduced-motion:reduce){.bsr-target-fill,.bsr-hero-spark{transition:none}}

/* Set-target prompt when no goal exists yet. */
.bsr-set-target{display:flex;align-items:center;gap:9px;padding:13px 18px;border-radius:var(--radius);
  border:1px dashed var(--line-strong);background:var(--surface);color:var(--blue-deep);
  font-weight:650;font-size:14px;cursor:pointer;width:100%;justify-content:center}
.bsr-set-target:hover{background:var(--hover);border-color:var(--blue)}

/* ------------------------------------------------------------- period pill */
.bsr-period{position:relative;align-self:flex-start}
.bsr-period>summary{display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;height:46px;padding:0 15px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);font-size:14.5px;white-space:nowrap}
.bsr-period>summary::-webkit-details-marker{display:none}
.bsr-period>summary:hover{background:var(--hover)}
.bsr-period>summary>.bsr-ico{color:var(--blue)}
.bsr-period-label{font-weight:700;color:var(--blue-deep)}
.bsr-period-range{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:14px}
.bsr-period[open]>summary .bsr-chevron{transform:rotate(180deg)}

/* An open dropdown dims the page behind it the way the dialogs do, so the
   menu reads as the thing in focus. The scrim ignores pointer events: the
   document click handler that closes the menu needs to see the real target. */
.bsr-period[open]::before{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,rgba(13,45,120,.16),rgba(9,24,68,.42));
  backdrop-filter:blur(3px) saturate(1.05);-webkit-backdrop-filter:blur(3px) saturate(1.05);
  animation:bsr-scrim-in .18s ease both}
.bsr-period[open]>summary{position:relative;z-index:41}
@keyframes bsr-scrim-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.bsr-period[open]::before{animation:none}}

.bsr-chevron{flex:0 0 auto;transition:transform .18s ease;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.bsr-chevron{transition:none}}
.bsr-period-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:50;min-width:290px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lift)}
.bsr-period-option{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px;
  border:0;background:transparent;border-radius:9px;cursor:pointer;font-size:14px;color:var(--text);text-align:left}
.bsr-period-option:hover{background:var(--hover)}
.bsr-period-option .bsr-tick{opacity:0;flex:0 0 auto;color:var(--blue)}
.bsr-period-option.is-active{color:var(--blue-deep);font-weight:650}
.bsr-period-option.is-active .bsr-tick{opacity:1}
.bsr-period-option:disabled{opacity:.55;cursor:wait}
/* Platform heading inside the site switcher, when sites span more than one. */
.bsr-optgroup{display:block;padding:9px 12px 4px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bsr-optgroup:not(:first-child){margin-top:3px;border-top:1px solid var(--line);padding-top:9px}
.bsr-period-custom{margin-top:6px;padding:12px;border-top:1px solid var(--line)}
.bsr-period-custom-title{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.bsr-period-dates{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px}
.bsr-period-dates input{flex:1 1 0;min-width:0;height:38px;border:1px solid var(--line);border-radius:9px;
  padding:0 8px;background:var(--surface);font-size:13px}
.bsr-apply{width:100%;margin-top:9px;height:38px;border:1px solid var(--line);border-radius:9px;
  background:var(--hover);color:var(--blue-deep);font-weight:650;font-size:13.5px;cursor:pointer}
.bsr-apply:hover{background:var(--surface);border-color:var(--line-strong)}

/* --------------------------------------------------------------- metrics */
.bsr-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* Money stays blue; counts are plain figures. */
/* Traffic counts are not money, so they do not take the money blue. The old
   selector named a wrapper that no longer exists, which is why they turned
   blue again. --text is near-black in light and near-white in dark. */
.bsr-traffic .bsr-value{color:var(--text)}
.bsr-metrics-wide{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.bsr-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px 13px;box-shadow:var(--shadow)}
.bsr-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bsr-card-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;
  background:var(--chip-bg);color:var(--chip-icon)}
.bsr-card h2{font-size:14.5px;font-weight:650;letter-spacing:-.01em;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsr-card-sync{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--muted);border-radius:8px;cursor:pointer}
.bsr-card-sync:hover{background:var(--hover);color:var(--blue)}
.bsr-card-sync:disabled{cursor:wait;opacity:.6}
.bsr-value{font-size:32px;line-height:1.1;letter-spacing:-.03em;font-weight:800;color:var(--blue);
  margin:2px 0 0;font-variant-numeric:tabular-nums;white-space:nowrap}
.bsr-spark{flex:1;min-width:0;height:44px;display:block;overflow:visible}
/* The line takes currentColor, and the fill under it a gradient of the same
   colour, so one rule per card recolours both. */
.bsr-spark{color:var(--blue)}
.bsr-spark .bsr-spark-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.bsr-spark .bsr-spark-area{stroke:none}
.bsr-stat.is-best .bsr-spark{color:var(--green)}
.bsr-compare{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);
  margin-top:12px;padding-top:10px;color:var(--muted);font-size:13px}
.bsr-compare-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsr-card.is-hero .bsr-compare{position:relative;z-index:1}
.bsr-compare strong{color:var(--text);font-size:13.5px;font-variant-numeric:tabular-nums;font-weight:700}
.bsr-change{font-weight:700;font-size:13px;white-space:nowrap}
.bsr-change.is-up{color:var(--green)}
.bsr-change.is-down{color:var(--muted);font-weight:600}
.bsr-change.is-down .bsr-arrow{color:var(--red)}
.bsr-card.is-hero .bsr-change.is-down{color:var(--hero-sub)}
.bsr-change.is-flat{color:var(--muted);font-weight:500}

/* Hero revenue card */
.bsr-card.is-hero{background:linear-gradient(115deg,var(--hero-a),var(--hero-b));border-color:transparent;color:var(--hero-text)}
.bsr-hero-spark{position:absolute;left:36%;width:64%;bottom:56px;height:44px;display:block;pointer-events:none;
  transition:left .25s ease, width .25s ease}
.bsr-hero-spark.is-hoverable{pointer-events:auto}
.bsr-hero-hover-guide{stroke:rgba(255,255,255,.68);stroke-width:.7;stroke-dasharray:2 2;vector-effect:non-scaling-stroke}
.bsr-hero-hover-dot{fill:#fff;stroke:#8fe3ff;stroke-width:1.4;vector-effect:non-scaling-stroke}
.bsr-hero-tooltip{position:absolute;z-index:6;pointer-events:none;padding:6px 9px;border-radius:8px;background:rgba(7,20,55,.94);color:#fff;
  box-shadow:0 6px 18px rgba(2,8,23,.24);font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.bsr-hero-spark{color:#57a2ff}
.bsr-hero-spark .bsr-spark-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.bsr-hero-spark .bsr-spark-area{stroke:none}
.bsr-hero-dot{fill:#8fe3ff}
.bsr-hero-dot-glow{fill:#8fe3ff;opacity:.32}
.bsr-card.is-hero{padding-bottom:14px}
.bsr-card.is-hero h2{color:#dce8ff;font-weight:600;font-size:15px}
.bsr-card.is-hero .bsr-card-head{margin-bottom:2px}
.bsr-card.is-hero .bsr-value{color:#fff;font-size:36px;position:relative;z-index:1}
.bsr-hero-main{display:flex;align-items:center;gap:24px;min-height:54px;position:relative;z-index:1}
.bsr-online{align-items:center;gap:11px;color:#087b2c}
.bsr-online[hidden]{display:none!important}
.bsr-online-icon{position:relative;width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;border-radius:50%;
  color:var(--blue);background:var(--chip-bg);border:2px solid rgba(37,99,235,.48);
  box-shadow:0 0 0 5px rgba(37,99,235,.11),0 0 0 10px rgba(37,99,235,.045),inset 0 0 0 5px rgba(37,99,235,.07)}
.bsr-online-pulse{position:absolute;right:-1px;top:1px;width:10px;height:10px;border-radius:50%;background:#31c84c;
  box-shadow:0 0 0 0 rgba(49,200,76,.48);animation:bsr-presence-pulse 2.2s ease-out infinite}
@keyframes bsr-presence-pulse{0%{box-shadow:0 0 0 0 rgba(49,200,76,.5)}65%,100%{box-shadow:0 0 0 8px rgba(49,200,76,0)}}
.bsr-online-copy{display:grid;grid-template-columns:auto auto;align-items:end;column-gap:8px;min-width:112px}
.bsr-online-copy>span{grid-column:1/-1;font-size:12px;line-height:1.15;color:var(--muted);white-space:nowrap}
.bsr-online-copy strong{font-size:29px;line-height:1;margin-top:3px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.bsr-online-copy small{font-size:8.5px;line-height:1.1;color:var(--muted);white-space:nowrap;padding-bottom:3px}
.bsr-online-target{display:grid;flex:0 0 202px;column-gap:13px;row-gap:12px;
  padding:3px 20px 3px 3px;border-right:1px solid var(--line)}
.bsr-presence-chart{grid-column:1/-1;height:25px;display:grid;grid-template-columns:repeat(30,1fr);align-items:end;gap:2px;
  padding-top:4px;border-bottom:1px solid #d7e0ef}
.bsr-presence-chart i{display:block;height:2px;min-width:0;border-radius:1px 1px 0 0;background:#2878ef;opacity:.2}
.bsr-presence-chart i.is-level-1{height:3px;opacity:.75}.bsr-presence-chart i.is-level-2{height:5px;opacity:.78}
.bsr-presence-chart i.is-level-3{height:7px;opacity:.8}.bsr-presence-chart i.is-level-4{height:9px;opacity:.83}
.bsr-presence-chart i.is-level-5{height:11px;opacity:.86}.bsr-presence-chart i.is-level-6{height:13px;opacity:.88}
.bsr-presence-chart i.is-level-7{height:15px;opacity:.9}.bsr-presence-chart i.is-level-8{height:18px;opacity:.93}
.bsr-presence-chart i.is-level-9{height:21px;opacity:.96}.bsr-presence-chart i.is-level-10{height:24px;opacity:1}
/* Each bar carries its own value on hover, so give it a hit area and a cue. */
.bsr-presence-chart,.bsr-presence-chart i{cursor:default;transition:opacity .12s ease}
.bsr-presence-chart:hover i{opacity:.45}
.bsr-presence-chart i:hover{opacity:1;background:var(--blue)}
/* The count covers only some of the sites in view; say so rather than imply
   the number speaks for all of them. */
.bsr-online-note{width:14px;height:14px;margin-left:5px;padding:0;border:0;border-radius:50%;
  background:var(--line-strong);color:var(--surface);font-size:10px;font-weight:800;line-height:14px;
  cursor:help;vertical-align:1px}
.bsr-online-note:hover,.bsr-online-note:focus-visible{background:var(--blue);color:#fff}
.bsr-online-mobile{display:none}
.bsr-tstat-stack{display:contents}
.bsr-card.is-hero .bsr-compare{border-top-color:rgba(255,255,255,.18);color:var(--hero-sub)}
.bsr-card.is-hero .bsr-compare strong{color:#fff}
.bsr-card.is-hero .bsr-card-sync{color:#cfe0ff}
.bsr-card.is-hero .bsr-card-sync:hover{background:rgba(255,255,255,.16);color:#fff}
.bsr-card.is-hero .bsr-change.is-down .bsr-arrow{color:#ff8b5e}
.bsr-card.is-hero .bsr-change.is-up{color:#5ee9a0}

/* --------------------------------------------------------------- insights */
.bsr-insights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bsr-stat{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow)}
.bsr-stat-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:50%;
  background:var(--chip-bg);color:var(--chip-icon)}
.bsr-stat-icon.is-green{background:#e6f7ec;color:var(--green)}
.bsr-stat-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.bsr-stat-text>span{color:var(--muted);font-size:12.5px}
.bsr-stat-text>strong{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.bsr-stat-money{color:var(--blue)}
.bsr-stat.is-best .bsr-stat-money{color:var(--green)}
.bsr-stat.is-active-peak .bsr-stat-audience{color:var(--blue)}

.bsr-stat .bsr-spark{height:38px;margin-left:auto;max-width:200px}
.bsr-spark:empty{display:none}
.bsr-scope{font-style:normal;opacity:.72}

/* ----------------------------------------------------- accordion sections */
.bsr-more{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.bsr-accordion{position:relative;overflow:visible}
.bsr-more>summary{display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;padding:11px 14px;
  min-height:56px;font-size:14.5px;font-weight:650;border-radius:var(--radius);user-select:none}
.bsr-more>summary::-webkit-details-marker{display:none}
.bsr-more>summary:hover{background:var(--hover)}
.bsr-more>summary .bsr-chevron{margin-left:2px;flex:0 0 auto;color:var(--muted);transition:transform .18s ease}
.bsr-more[open]>summary{border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.bsr-more[open]>summary .bsr-chevron{transform:rotate(180deg)}
.bsr-accordion-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:10px;
  background:var(--chip-bg);color:var(--blue)}
.bsr-accordion-icon.is-live{background:var(--good-bg);color:var(--green)}
.bsr-accordion-title{font-weight:750;color:var(--text);letter-spacing:-.01em;min-width:0;flex:1}
.bsr-accordion-body{padding:14px 18px 16px}
.bsr-accordion-body.is-flush{padding:0}
.bsr-realtime-badge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--muted);font-size:11.5px;font-weight:700}
.bsr-realtime-badge i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--good-bg)}

/* ------------------------------------------------------- engagement rates */
.bsr-strip{display:grid;grid-template-columns:repeat(5,1fr);padding:6px 4px 10px}
.bsr-stat-mini{display:flex;align-items:center;gap:11px;padding:10px 14px;border-right:1px solid var(--line)}
.bsr-stat-mini:last-child{border-right:0}
.bsr-mini-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:50%}
.bsr-mini-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.bsr-mini-text span{font-size:12px;color:var(--muted);white-space:nowrap}
.bsr-mini-text strong{font-size:18px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--blue)}
.bsr-i-blue{background:var(--chip-bg);color:var(--blue)}
.bsr-i-green{background:#e6f7ec;color:var(--green)}
.bsr-i-purple{background:#f1ecfe;color:var(--purple)}
.bsr-i-amber{background:#fef3e2;color:var(--amber)}

/* ---------------------------------------------------------- GA4 page lists */
.bsr-top-pages[hidden],.bsr-realtime-pages[hidden]{display:none!important}
.bsr-pages-intro{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.bsr-pages-intro p,.bsr-top-pages-sub{margin:0;color:var(--muted);font-size:12.5px;line-height:1.4}
.bsr-top-pages-list{min-width:0}
.bsr-top-pages-columns,.bsr-top-page-row{display:grid;grid-template-columns:30px minmax(0,1fr) 120px 68px;
  gap:10px;align-items:center}
.bsr-top-pages-columns{padding:5px 8px 7px;border-bottom:1px solid var(--line);color:var(--muted);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.045em}
.bsr-top-pages-columns span:first-child{grid-column:2}
.bsr-top-pages-columns span:last-child{grid-column:4;text-align:right}
.bsr-top-page-row{min-height:39px;padding:5px 8px;border-bottom:1px solid var(--line)}
.bsr-top-page-row:last-child{border-bottom:0}
.bsr-top-page-row:hover{background:var(--hover);border-radius:8px}
.bsr-top-page-rank{color:var(--muted);font-size:12px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.bsr-top-page-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:13px}
.bsr-top-page-row strong{text-align:right;color:var(--text);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.bsr-top-page-meter{height:7px;border-radius:999px;background:var(--track);overflow:hidden}
.bsr-top-page-meter i{display:block;height:100%;border-radius:inherit;background:var(--blue)}
.bsr-top-page-meter .is-w1{width:10%}.bsr-top-page-meter .is-w2{width:20%}.bsr-top-page-meter .is-w3{width:30%}
.bsr-top-page-meter .is-w4{width:40%}.bsr-top-page-meter .is-w5{width:50%}.bsr-top-page-meter .is-w6{width:60%}
.bsr-top-page-meter .is-w7{width:70%}.bsr-top-page-meter .is-w8{width:80%}.bsr-top-page-meter .is-w9{width:90%}
.bsr-top-page-meter .is-w10{width:100%}
.bsr-top-pages-empty{padding:18px 8px;color:var(--muted);font-size:13px;text-align:center}
.bsr-pages-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:38px;padding:9px 8px 0;
  border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.bsr-pages-footer.is-realtime{justify-content:space-between}
.bsr-pages-pager{display:flex;align-items:center;gap:6px}
.bsr-pages-pager button{width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer}
.bsr-pages-pager button:hover:not(:disabled){background:var(--hover);border-color:var(--line-strong);color:var(--blue-deep)}
.bsr-pages-pager button:disabled{opacity:.36;cursor:default}
.bsr-pages-pager button:first-child .bsr-ico{transform:rotate(90deg)}
.bsr-pages-pager .is-next{transform:rotate(-90deg)}
.bsr-breakdown-table-wrap{margin-top:12px}

/* ------------------------------------------------------------ panels/chart */
.bsr-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);position:relative}
.bsr-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.bsr-panel-head h2{font-size:16px;font-weight:700}
.bsr-legend{display:flex;gap:8px;flex-wrap:wrap}
.bsr-legend-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:transparent;
  border-radius:999px;padding:7px 14px;font-size:13px;color:var(--muted);cursor:pointer}
.bsr-legend-item i{width:9px;height:9px;border-radius:50%;opacity:.35}
.bsr-legend-item.is-on{color:var(--text);border-color:var(--line-strong);background:var(--hover)}
.bsr-legend-item.is-on i{opacity:1}
.bsr-dot-revenue{background:#2563eb}
.bsr-dot-pageViews{background:#7ea6f5}
.bsr-dot-visibleViews{background:#16a34a}
.bsr-dot-adClicks{background:#f59e0b}
.bsr-chart{min-height:300px}
.bsr-chart svg{width:100%;height:300px;display:block;overflow:visible}
.bsr-chart-empty{color:var(--muted);text-align:center;padding:120px 0;margin:0}
.bsr-tooltip{position:absolute;z-index:30;pointer-events:none;background:var(--header-a);color:#fff;padding:10px 12px;
  border-radius:10px;font-size:12.5px;line-height:1.6;box-shadow:var(--shadow-lift);white-space:nowrap}
.bsr-tooltip b{display:block;margin-bottom:4px;font-size:13px}
.bsr-subtabs{display:flex;gap:7px;flex-wrap:wrap}
.bsr-subtabs button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 15px;
  font-size:13px;color:var(--muted);cursor:pointer}
.bsr-subtabs button.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

.bsr-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bsr-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
.bsr-table th,.bsr-table td{padding:11px 12px;text-align:right;border-bottom:1px solid var(--line);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.bsr-table th:first-child,.bsr-table td:first-child{text-align:left}
.bsr-table thead th{color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.bsr-table tbody tr:hover{background:var(--hover)}
.bsr-table tbody tr:last-child td{border-bottom:0}
.bsr-table .bsr-empty{text-align:center;color:var(--muted);padding:26px 0}
.bsr-bar{display:inline-block;height:6px;border-radius:3px;background:var(--blue);vertical-align:middle;min-width:2px}
.bsr-foot{margin-top:6px;color:var(--muted);font-size:12.5px;text-align:center}

/* --------------------------------------------------------------- banners */
.bsr-banner{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:12px;font-size:14px}
.bsr-banner>div{display:flex;flex-direction:column;gap:3px;flex:1}
.bsr-banner span:not(.bsr-banner-icon){font-size:13px;line-height:1.5}
.bsr-banner-icon{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:50%;font-weight:800}
.bsr-banner.is-error{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err-text)}
.bsr-banner.is-stale{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text)}
.bsr-banner.is-stale .bsr-banner-icon{background:var(--warn-hover);color:var(--warn-icon)}
.bsr-banner.is-error .bsr-banner-icon{background:var(--err-icon-bg);color:var(--err-icon)}
.bsr-banner a{color:var(--blue);font-weight:600;text-decoration:none;padding:8px 10px;border-radius:6px;white-space:nowrap}
.bsr-banner a:hover{background:var(--banner-link-hover)}
.bsr-banner.is-demo{position:fixed;z-index:120;left:50%;bottom:12px;transform:translateX(-50%);width:min(560px,calc(100% - 24px));padding:7px 11px;gap:8px;border:1px solid var(--line-strong);border-radius:999px;background:color-mix(in srgb,var(--surface) 94%,var(--blue-soft));box-shadow:0 8px 24px rgba(13,27,51,.16);font-size:11px;line-height:1.2;color:var(--muted)}
.bsr-banner.is-demo>div{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bsr-banner.is-demo strong{color:var(--text);margin-right:5px}
.bsr-banner.is-demo span:not(.bsr-banner-icon){font-size:11px;line-height:1.2}
.bsr-banner.is-demo .bsr-banner-icon{width:20px;height:20px;flex:0 0 20px;background:var(--chip-bg);color:var(--blue);font-size:11px}
.bsr-banner.is-demo a{padding:0 2px}
@media(max-width:860px){.bsr-banner.is-demo{bottom:8px;width:calc(100% - 16px);padding:6px 9px}.bsr-banner.is-demo .bsr-banner-icon{width:18px;height:18px;flex-basis:18px}}

/* Accuracy note and CSV export: small header icons, hidden on phones. */
.bsr-tools{display:flex;align-items:center;gap:9px}
.bsr-note-wrap{position:relative}
.bsr-note[aria-expanded="true"]{background:rgba(255,255,255,.22)}
.bsr-note.is-warn{color:#fdba74;border-color:rgba(253,186,116,.45)}
.bsr-note-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(340px,calc(100vw - 40px));color:var(--text);
  padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lift);text-align:left}
.bsr-note-pop strong{display:block;font-size:14px;margin-bottom:7px;color:var(--text)}
.bsr-note-pop p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.bsr-note-pop p:last-of-type{margin-bottom:0}
.bsr-note-pop b{color:var(--text)}
.bsr-note-pop a{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--blue);text-decoration:none}

/* ----------------------------------------------------------- target dialog */
.bsr-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  overflow-y:auto;background:rgba(9,20,40,.45);backdrop-filter:blur(2px)}
/* The projection explainer gets the brand's own blue behind it, deeper at the
   edges, so the page reads as pushed back rather than merely greyed out. */
.bsr-modal.is-brand{background:radial-gradient(120% 90% at 50% 40%,rgba(23,64,158,.34),rgba(7,20,60,.62));
  backdrop-filter:blur(9px) saturate(1.15);-webkit-backdrop-filter:blur(9px) saturate(1.15);
  animation:bsr-scrim-in .2s ease both}
.bsr-modal.is-brand .bsr-modal-card{animation:bsr-modal-in .24s cubic-bezier(.22,.9,.24,1) both}
@keyframes bsr-modal-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bsr-modal.is-brand,.bsr-modal.is-brand .bsr-modal-card{animation:none}
}
.bsr-modal-card{width:min(380px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.bsr-modal-card h2{font-size:17px;margin-bottom:6px}
.bsr-modal-card p{margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.5}
.bsr-modal-field{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;padding:0 13px;height:48px}
.bsr-modal-field span{color:var(--muted);font-size:17px;font-weight:700}
.bsr-modal-field input{flex:1;min-width:0;border:0;background:transparent;height:100%;font-size:17px;font-weight:700;outline:none}
.bsr-modal-err{margin:9px 0 0;font-size:12.5px;color:var(--err-text)}
.bsr-target-row{margin-bottom:11px}
.bsr-target-row:last-child{margin-bottom:0}
.bsr-target-row label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.bsr-target-row .bsr-modal-field{height:44px}
.bsr-target-row .bsr-modal-field input{font-size:16px}
.bsr-modal-actions{display:flex;gap:9px;margin-top:18px}
.bsr-modal-actions button{flex:1;height:44px;border-radius:11px;font-weight:650;font-size:14px;cursor:pointer}
.bsr-btn-primary{border:0;background:var(--blue);color:#fff}
.bsr-btn-primary:hover{background:var(--blue-deep)}
.bsr-btn-ghost{border:1px solid var(--line);background:transparent;color:var(--muted)}
.bsr-btn-ghost:hover{background:var(--hover)}

/* -------------------------------------------------------------------- auth */
.bsr-auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(135deg,var(--header-a),var(--header-b))}
/* The card used to hardcode a white background while its text colour was
   inherited from the theme, so in dark mode it rendered near-white type on
   white. Every colour here is now stated, and the dark block below restates
   all of them together. */
.bsr-auth-card{width:min(430px,100%);background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:0 24px 70px rgba(0,0,0,.24)}
.bsr-auth-card .bsr-brand{color:var(--blue-deep);margin-bottom:26px}
.bsr-auth-card h1{font-size:26px;margin:0 0 9px;letter-spacing:-.025em;color:var(--text)}
.bsr-auth-card>p{color:var(--muted);line-height:1.6;margin:0 0 24px}
.bsr-auth-card label{display:block;font-weight:600;margin:14px 0 6px;color:var(--text)}
.bsr-auth-card input[type=text],.bsr-auth-card input[type=password]{width:100%;height:46px;
  border:1px solid var(--line-strong);color:var(--text);
  border-radius:10px;padding:0 12px;background:var(--surface)}
.bsr-auth-card input[type=text]:focus,.bsr-auth-card input[type=password]:focus{border-color:var(--blue)}
.bsr-auth-card a{color:var(--blue)}
.bsr-auth-card .bsr-logo-fallback{background:var(--blue);color:#fff}
.bsr-auth-card .login-remember,.bsr-auth-card .login-remember label{color:var(--muted)}
.bsr-auth-card .login-remember label{display:flex;align-items:center;gap:8px;font-weight:500}
.bsr-auth-card .button-primary{width:100%;height:46px;border:0;border-radius:10px;background:var(--blue);
  color:#fff;font-weight:700;cursor:pointer;margin-top:6px}
.bsr-auth-card .login-submit{margin-top:20px}
.bsr-button{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:10px;
  padding:12px 18px;font-weight:650;text-decoration:none;margin-top:10px}

/* ------------------------------------------------------------- responsive */
@media(max-width:1180px){
  .bsr-metrics{grid-template-columns:1fr 1fr}
  .bsr-metrics article:first-child{grid-column:1/-1}
  .bsr-strip{grid-template-columns:repeat(3,1fr)}
  .bsr-stat-mini:nth-child(3n){border-right:0}
  .bsr-target-main{gap:12px}
  .bsr-online-target{flex-basis:164px;column-gap:8px;padding-right:12px}
  .bsr-online-target .bsr-online-icon{width:40px;height:40px;flex-basis:40px}
  .bsr-online-target .bsr-online-icon .bsr-ico{width:18px;height:18px}
  .bsr-online-target .bsr-online-copy{min-width:92px}
  .bsr-online-target .bsr-online-copy strong{font-size:22px}
  .bsr-tstat{min-width:104px;padding:6px}
}
@media(max-width:820px){
  .bsr-top-pages-columns,.bsr-top-page-row{grid-template-columns:26px minmax(0,1fr) 86px 58px;gap:8px}
  .bsr-top-page-title{font-size:12.5px}
  .bsr-app{padding:10px 10px 34px}
  .bsr-main{gap:11px;margin-top:11px}
  .bsr-header{padding:10px 12px;border-radius:14px;gap:8px}
  .bsr-chip,.bsr-sync,.bsr-account-name,.bsr-btn-label{display:none}
  .bsr-hbtn{width:40px;padding:0}
  .bsr-account summary{padding:5px;gap:0;border-color:transparent}
  .bsr-avatar{border-radius:50%}
  .bsr-brand{font-size:16px}
  .bsr-logo{width:34px;height:34px;flex:0 0 34px}

  .bsr-traffic{gap:11px}
  .bsr-proj{padding:12px 14px;gap:11px}
  .bsr-proj-icon{width:38px;height:38px;flex:0 0 38px}
  .bsr-proj strong{font-size:22px}
  /* Compact on a phone: the card carried desktop breathing room it cannot
     afford at 390px, where it is the tallest thing on the screen. */
  .bsr-target{padding:11px}
  .bsr-target-main{gap:9px}
  .bsr-target-label{font-size:12px;margin-bottom:1px}
  .bsr-target-amounts{font-size:18px}
  .bsr-target-amounts em{font-size:13px}
  .bsr-target-tick{top:-3px;bottom:-3px;height:auto}
  /* Written for the three-column phone card that no longer exists. The rule
     drew a line across the caption and pushed it down a row. */
  /* The projection column is a button and carries padding for its tinted
     background; the other two need the same box so all three line up. */
  .bsr-tstat{flex:1 1 0;min-width:0;flex-direction:column;align-items:center;
    text-align:center;gap:3px;padding:4px 2px;min-width:0}
  .bsr-tstat-icon{width:23px;height:23px;flex:0 0 23px}
  .bsr-tstat-icon .bsr-ico{width:13px;height:13px}
  .bsr-tstat-text{align-items:center;text-align:center}
  .bsr-tstat-text span{white-space:normal;line-height:1.2;font-size:10.5px}
  .bsr-tstat-text strong{font-size:15px}
  .bsr-tstat-go{display:none}
  .bsr-tstat-btn{width:100%;margin:0;padding:4px 2px;background:var(--proj-bg)}
  .bsr-target-edit{width:26px;height:26px}

  /* Mobile follows the approved two-row reference: progress and goal on the
     left, live audience at the top-right, and three equal summary cards below. */
  .bsr-target-main{display:grid;align-items:center;column-gap:9px;row-gap:10px}
  .bsr-target-mid{align-self:stretch;display:flex;
    flex-direction:column;justify-content:center}
  .bsr-online-target{display:flex!important;flex-direction:column;width:100%;max-width:none;
    align-items:stretch;align-self:stretch;column-gap:6px;row-gap:0;min-width:0;flex-basis:auto;
    padding:4px 0 4px 9px;border-right:0;border-left:1px solid var(--line)}
  .bsr-online-target .bsr-online-icon{width:34px;height:34px;flex-basis:34px;border-width:1px;
    box-shadow:0 0 0 3px rgba(37,99,235,.10),0 0 0 6px rgba(37,99,235,.04)}
  .bsr-online-target .bsr-online-icon .bsr-ico{width:16px;height:16px}
  .bsr-online-target .bsr-online-pulse{width:7px;height:7px;right:-1px;top:-1px}
  /* Also from the old phone card: it hid the audience chart outright and put
     the caption figure in a bordered box of its own. Both are wrong now - the
     chart is the point of that tile, and the caption is one line. */
  .bsr-target.is-closed .bsr-target-main{align-items:center}
  .bsr-target.is-closed .bsr-target-stats{display:block;align-self:stretch;
    padding:0 0 0 7px;border-top:0;border-left:1px solid var(--line)}
  .bsr-target.is-closed .bsr-target-stats .bsr-tstat{min-width:0;min-height:100%;padding:4px 0;
    border:0;border-radius:0;background:transparent}
  /* Neither the CSV file nor the accuracy note earns its space on a phone. */
  .bsr-tools{display:none}

  .bsr-period{align-self:stretch}
  .bsr-period>summary{width:100%}
  .bsr-period-range{margin-left:auto}
  .bsr-period-menu{left:0;right:0;min-width:0}

  .bsr-metrics{grid-template-columns:1fr 1fr;gap:11px}
  .bsr-metrics article:first-child{grid-column:1/-1}
  .bsr-metrics-wide{grid-template-columns:1fr 1fr;gap:11px}
  .bsr-metrics-wide .bsr-card-sync{display:none}
  .bsr-card{padding:12px 13px 11px}
  .bsr-card h2{font-size:12.5px}
  .bsr-card-icon{width:26px;height:26px;flex:0 0 26px;border-radius:8px}
  .bsr-card-head{gap:7px;margin-bottom:7px}
  .bsr-value{font-size:23px}
  .bsr-card.is-hero .bsr-value{font-size:30px}
  .bsr-hero-main{gap:12px;min-height:46px}
  .bsr-online-mobile{display:none!important}
  .bsr-hero-spark{left:30%;width:70%;bottom:52px;height:38px}
  .bsr-spark{height:30px}
  .bsr-compare{font-size:11.5px;gap:6px;margin-top:11px;padding-top:9px;flex-wrap:wrap}
  .bsr-compare-label{flex:1 0 100%;order:-1}
  .bsr-compare strong{font-size:12.5px;margin-right:auto}
  .bsr-card.is-hero .bsr-compare-label{flex:1;order:0}
  .bsr-card.is-hero .bsr-compare strong{margin-right:0}
  .bsr-change{font-size:11.5px}

  /* Three across is too tight on a phone. The two revenue cards keep the
     top row and traffic drops full-width beneath them. */
  .bsr-insights{grid-template-columns:1fr 1fr;gap:11px}
  .bsr-stat.is-views{order:1;grid-column:auto}
  .bsr-stat.is-active-peak{order:2}
  .bsr-stat.is-daily{order:3}
  .bsr-stat.is-best{order:4}
  .bsr-stat{padding:12px 13px;gap:10px;flex-wrap:wrap}
  /* The chip stays on phones — it is what tells the two cards apart at a
     glance, and the text alone reads as an undifferentiated pair. */
  .bsr-stat-icon{width:32px;height:32px;flex:0 0 32px}
  .bsr-stat-text{flex:1;min-width:0}
  /* Two cards side by side leave little width, so nothing may wrap: the
     scope goes, and both lines clip rather than run onto a second row. */
  .bsr-stat-text>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bsr-stat-text>strong{white-space:nowrap;font-size:16px;overflow:hidden;text-overflow:ellipsis}
  /* "$44.18 · Aug 27" is the longest of the two, so it gets a smaller size
     rather than being cut off. */
  .bsr-stat.is-best .bsr-stat-text>strong{font-size:14.5px}
  .bsr-stat .bsr-scope{display:none}

  .bsr-stat .bsr-spark{height:28px;max-width:none;flex:1 0 100%;margin-left:0}

  .bsr-strip{grid-template-columns:1fr 1fr;padding:4px}
  .bsr-stat-mini{border-right:0;padding:9px 10px}
  .bsr-mini-icon{width:28px;height:28px;flex:0 0 28px}
  .bsr-mini-text strong{font-size:15px}
  .bsr-more>summary{padding:10px 12px;font-size:14px;min-height:52px}
  .bsr-accordion-icon{width:34px;height:34px;flex-basis:34px}
  .bsr-accordion-body{padding:12px 14px 14px}
  .bsr-realtime-badge{font-size:10.5px}

  .bsr-panel{padding:14px}
  .bsr-chart svg{height:230px}
  .bsr-table{font-size:12.5px}
}
@media(max-width:420px){
  .bsr-tstat-text span{font-size:10px}
  .bsr-tstat-text strong{font-size:13.5px}
  .bsr-tstat-icon{width:24px;height:24px;flex:0 0 24px}
  .bsr-target-amounts{font-size:17.5px}
  .bsr-target-amounts em{font-size:12px}
  .bsr-stat-text>strong{font-size:15px}
  .bsr-stat.is-best .bsr-stat-text>strong{font-size:13.5px}
  .bsr-value{font-size:20px}
  .bsr-card.is-hero .bsr-value{font-size:27px}
  .bsr-strip{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:no-preference){
  .bsr-card,.bsr-panel,.bsr-stat{animation:bsr-in .26s ease both}
  @keyframes bsr-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
}

/* ------------------------------------------------------------------- theme */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#080e1c; --surface:#101a2e; --text:#e9eefb; --muted:#8fa1bf; --line:#1e2b45;
    --line-strong:#2a3a58; --hover:#182543; --track:#1c2942; --grid:#1e2b45;
    --blue:#3b82f6; --blue-deep:#60a5fa; --blue-dark:#93c5fd;
    --header-a:#08132a; --header-b:#0d1e3d;
    --hero-a:#0d2a63; --hero-b:#123f96; --hero-sub:#a8c3f0;
    --chip-bg:#16264a; --chip-icon:#60a5fa;
    --warn-bg:#2a1b0b; --warn-hover:#3a2410; --warn-border:#7c4a12; --warn-border-strong:#9a5a16;
    --warn-text:#fdba74; --warn-icon:#ffedd5; --warn-dot:#c2410c;
    --err-bg:#2a1113; --err-border:#7f1d1d; --err-text:#fca5a5; --err-icon-bg:#7f1d1d; --err-icon:#fee2e2;
    --est-bg:#0f2038; --est-hover:#16264a; --est-border:#1e4272; --est-border-strong:#2a5896;
    --est-text:#93c5fd; --est-dot:#60a5fa;
    --proj-bg:#0c2a1c; --proj-border:#175236; --proj-text:#6ee7b7; --proj-strong:#6ee7b7; --proj-dot:#16a34a;
    --proj-go-bg:rgba(110,231,183,.14); --ring-track:#1c2942; --good-bg:#0f2e20; --ring-track:#1c2942; --good-bg:#0f2e20;
    --green:#34d399; --red:#fb7185;
    --banner-link-hover:rgba(255,255,255,.08);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.28);
    --shadow-lift:0 10px 34px rgba(0,0,0,.42);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#080e1c; --surface:#101a2e; --text:#e9eefb; --muted:#8fa1bf; --line:#1e2b45;
  --line-strong:#2a3a58; --hover:#182543; --track:#1c2942; --grid:#1e2b45;
  --blue:#3b82f6; --blue-deep:#60a5fa; --blue-dark:#93c5fd;
  --header-a:#08132a; --header-b:#0d1e3d;
  --hero-a:#0d2a63; --hero-b:#123f96; --hero-sub:#a8c3f0;
  --chip-bg:#16264a; --chip-icon:#60a5fa;
  --warn-bg:#2a1b0b; --warn-hover:#3a2410; --warn-border:#7c4a12; --warn-border-strong:#9a5a16;
  --warn-text:#fdba74; --warn-icon:#ffedd5; --warn-dot:#c2410c;
  --err-bg:#2a1113; --err-border:#7f1d1d; --err-text:#fca5a5; --err-icon-bg:#7f1d1d; --err-icon:#fee2e2;
  --est-bg:#0f2038; --est-hover:#16264a; --est-border:#1e4272; --est-border-strong:#2a5896;
  --est-text:#93c5fd; --est-dot:#60a5fa;
  --proj-bg:#0c2a1c; --proj-border:#175236; --proj-text:#6ee7b7; --proj-strong:#6ee7b7; --proj-dot:#16a34a;
  --proj-go-bg:rgba(110,231,183,.14); --ring-track:#1c2942; --good-bg:#0f2e20;
  --green:#34d399; --red:#fb7185;
  --banner-link-hover:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.28);
  --shadow-lift:0 10px 34px rgba(0,0,0,.42);
  color-scheme:dark;
}
:root[data-theme="dark"] .bsr-i-green,
:root[data-theme="dark"] .bsr-stat-icon.is-green{background:#0f2e20}
:root[data-theme="dark"] .bsr-i-purple{background:#241b45}
:root[data-theme="dark"] .bsr-i-amber{background:#2e2410}
@media(prefers-color-scheme:dark){
  /* The sign-in card sits on the same navy gradient in both schemes, so in
     dark it needs to be lifted off it rather than matching the page surface. */
  :root:not([data-theme="light"]) .bsr-auth-card{background:#16233f;border-color:#25355a}
  :root:not([data-theme="light"]) .bsr-auth-card input[type=text],
  :root:not([data-theme="light"]) .bsr-auth-card input[type=password]{background:#0f1b32}
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bsr-i-green,
  :root:not([data-theme="light"]) .bsr-stat-icon.is-green{background:#0f2e20}
  :root:not([data-theme="light"]) .bsr-i-purple{background:#241b45}
  :root:not([data-theme="light"]) .bsr-i-amber{background:#2e2410}
}

/* Theme button shows only the icon for the mode currently in force. */
.bsr-theme .bsr-ico{display:none}
:root[data-theme="light"] .bsr-ico-light{display:block}
:root[data-theme="dark"] .bsr-ico-dark{display:block}
:root:not([data-theme]) .bsr-ico-auto{display:block}

@media(max-width:520px){
  .bsr-top-pages-columns,.bsr-top-page-row{grid-template-columns:24px minmax(0,1fr) 52px;gap:7px}
  .bsr-top-page-meter{display:none}
  .bsr-top-pages-columns span:last-child{grid-column:3}
  .bsr-top-page-row strong{grid-column:3}
  .bsr-top-pages-sub{font-size:11.5px}
}

/* ------------------------------------------------------------------ wizard */
.bsr-wiz{min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:linear-gradient(150deg,var(--header-a),var(--header-b))}
.bsr-wiz-card{width:min(940px,100%);background:var(--surface);border-radius:20px;
  box-shadow:0 28px 80px rgba(0,0,0,.32);overflow:hidden;display:flex;flex-direction:column}
.bsr-wiz-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 26px;border-bottom:1px solid var(--line)}
.bsr-wiz-head .bsr-brand{color:var(--text);font-size:16px}
.bsr-wiz-head .bsr-logo-fallback{background:var(--header-a);color:#fff}
.bsr-wiz-dots{display:flex;gap:7px;list-style:none;margin:0;padding:0}
.bsr-wiz-dots li{width:26px;height:5px;border-radius:999px;background:var(--track)}
.bsr-wiz-dots li.is-on{background:var(--blue)}

.bsr-wiz-body{padding:28px 26px 8px}
.bsr-wiz-step{display:none}
.bsr-wiz-step.is-active{display:block}
.bsr-wiz-step h1{font-size:25px;letter-spacing:-.025em;margin-bottom:8px}
.bsr-wiz-opt{font-style:normal;font-size:13px;font-weight:600;color:var(--muted);
  background:var(--hover);border-radius:999px;padding:4px 10px;vertical-align:middle;margin-left:6px}
.bsr-wiz-lead{margin:0 0 20px;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:62ch}

.bsr-wiz-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.bsr-wiz-list li{display:flex;gap:13px;align-items:flex-start}
.bsr-wiz-num{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:50%;
  background:var(--chip-bg);color:var(--chip-icon);font-weight:800;font-size:13px}
.bsr-wiz-list div{display:flex;flex-direction:column;gap:2px}
.bsr-wiz-list strong{font-size:14.5px}
.bsr-wiz-list span{color:var(--muted);font-size:13.5px;line-height:1.5}

.bsr-wiz-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1.05fr);gap:26px;align-items:start}
.bsr-wiz-fields{display:flex;flex-direction:column;gap:14px}
.bsr-field{display:flex;flex-direction:column;gap:6px}
.bsr-field>span{font-size:13px;font-weight:650}
.bsr-field>span i{font-style:normal;font-weight:500;color:var(--muted)}
.bsr-field input,.bsr-field select{height:44px;border:1px solid var(--line-strong);border-radius:10px;
  padding:0 12px;background:var(--surface);font-size:14.5px;width:100%}
.bsr-field input:focus,.bsr-field select:focus{border-color:var(--blue);outline:none}
.bsr-field.is-bad input{border-color:var(--err-text)}
.bsr-wiz-note{margin:2px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}

.bsr-wiz-help{background:var(--bg);border:1px solid var(--line);border-radius:13px;padding:16px 18px}
.bsr-wiz-help strong{display:block;font-size:13.5px;margin-bottom:9px}
.bsr-wiz-help ol{margin:0 0 11px;padding-left:19px;color:var(--muted);font-size:13px;line-height:1.65}
.bsr-wiz-help p{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
.bsr-wiz-help img{display:block;width:100%;height:auto;border-radius:9px;border:1px solid var(--line);
  margin:0 0 11px;background:#111}

.bsr-wiz-error{margin:0 26px;padding:11px 14px;border-radius:10px;background:var(--err-bg);
  border:1px solid var(--err-border);color:var(--err-text);font-size:13.5px}
.bsr-wiz-foot{display:flex;gap:10px;justify-content:flex-end;padding:20px 26px 24px}
.bsr-wiz-foot button{height:46px;padding:0 22px;border-radius:11px;font-weight:650;font-size:14.5px;cursor:pointer}
.bsr-wiz-foot .bsr-btn-primary{min-width:130px}
.bsr-wiz-foot button:disabled{opacity:.6;cursor:wait}
.bsr-wiz-foot #bsr-wiz-back{margin-right:auto}

@media(max-width:820px){
  .bsr-wiz{padding:0}
  .bsr-wiz-card{width:100%;min-height:100vh;border-radius:0}
  .bsr-wiz-body{padding:22px 16px 6px}
  .bsr-wiz-step h1{font-size:21px}
  .bsr-wiz-grid{grid-template-columns:1fr;gap:20px}
  .bsr-wiz-head{padding:14px 16px}
  .bsr-wiz-error{margin:0 16px}
  .bsr-wiz-foot{padding:16px}
  .bsr-wiz-foot button{flex:1;padding:0 14px}
  .bsr-wiz-foot #bsr-wiz-back{margin-right:0}
}

/* ------------------------------------------------------- currency switch */
/* Matches the height and shell of the period and site controls it sits beside,
   so the row reads as one set of pickers rather than a stray widget. */
.bsr-fx{display:inline-flex;align-items:center;height:46px;padding:4px;gap:3px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.bsr-fx-opt{min-width:38px;height:36px;padding:0 11px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .16s ease,color .16s ease}
.bsr-fx-opt:hover{background:var(--hover);color:var(--blue-deep)}
.bsr-fx-opt.is-active{background:var(--blue);color:#fff}
.bsr-fx-opt.is-active:hover{background:var(--blue-deep);color:#fff}
.bsr-fx-opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* --------------------------------------------------------- site switcher */
.bsr-controls{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.bsr-siteswitch>summary .bsr-ico:first-child{color:var(--purple)}
.bsr-siteswitch .bsr-period-menu{min-width:220px}
@media(max-width:820px){
  /* One row on a phone: site, period, currency. The two pickers share what
     the switch does not need and shrink to fit — min-width:0 is what lets a
     flex item go narrower than its own content — so a long site name
     truncates instead of pushing the row on to a second line. */
  .bsr-controls{gap:8px;flex-wrap:nowrap;align-items:stretch}
  /* The period name is short and always worth reading in full, so it takes
     what it needs; the site name absorbs whatever is left and truncates,
     because it is the one that can run to a long domain — and it is spelled
     out again the moment the picker is opened. */
  .bsr-controls>.bsr-period{flex:0 0 auto;min-width:0}
  .bsr-controls>.bsr-siteswitch{flex:1 1 auto;min-width:0}
  .bsr-period>summary{gap:7px;padding:0 11px;overflow:hidden}
  .bsr-period-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bsr-period>summary>.bsr-ico,.bsr-period .bsr-chevron{flex:0 0 auto}
  .bsr-fx{flex:0 0 auto}
  .bsr-fx-opt{min-width:34px;padding:0 9px}

  /* Each menu used to be as wide as its button, which worked while a button
     filled the row. A third of the row is too narrow to read a menu in, and
     the right-hand one would open off the edge of the screen — so pin them to
     the viewport's gutters instead. top:auto keeps the vertical position the
     menu would have had in flow, so it still opens directly under its own
     button. */
  .bsr-period[open]>.bsr-period-menu{position:fixed;left:12px;right:12px;top:auto;min-width:0;
    transform:translateY(10px)}
  .bsr-siteswitch .bsr-period-menu{min-width:0}
}

@media(max-width:560px){
  /* The date beside the period name is the first thing to give up its space:
     the name is what identifies the view, and the exact range is printed
     again under the cards below. */
  .bsr-period-range{display:none}
}

@media(max-width:380px){
  /* On the narrowest phones the leading icons go too, which is worth about a
     word of the site name. The chevrons stay: they are what say these are
     pickers rather than labels. */
  .bsr-controls .bsr-period>summary>.bsr-ico:first-child{display:none}
}

/* --------------------------------------------------- target history removal */
.bsr-history-remove{width:34px;text-align:right}
.bsr-history-x{width:22px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;
  color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.bsr-history-x:hover,.bsr-history-x:focus-visible{background:var(--err-bg);color:var(--err-text)}
.bsr-btn-danger{padding:9px 14px;border:1px solid var(--err-border);border-radius:9px;
  background:var(--err-bg);color:var(--err-text);font-weight:600;cursor:pointer}
.bsr-btn-danger:hover{background:var(--err-icon-bg)}
.bsr-btn-quiet{padding:9px 14px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);font-weight:600;cursor:pointer}
.bsr-history-warn{margin:10px 0 0;padding:12px 14px;border-radius:10px;background:var(--warn-bg);
  border:1px solid var(--warn-border);color:var(--warn-text);font-size:13px;line-height:1.5;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* ---------------------------------------------------------- visual styles */
/* Classic-specific refinements. Alternative dashboards use separate renderers
   and their own assets; Classic remains isolated here. */

/* Classic: active audience, goal and the two decisions sit in one deliberate
   desktop workspace. The KPI cards below keep their established 3.6 layout. */
@media(min-width:821px){
  :root[data-style="classic"] .bsr-target{padding:18px 20px}

  :root[data-style="classic"] .bsr-target-mid{display:flex;flex-direction:column;justify-content:center;
    border-left:0;padding-left:0}
  :root[data-style="classic"] .bsr-target-label{font-size:15px}
  :root[data-style="classic"] .bsr-target-amounts{font-size:31px}
  :root[data-style="classic"] .bsr-target-fill{box-shadow:0 2px 5px rgba(37,99,235,.18)}
  :root[data-style="classic"] .bsr-tstat-text span{font-size:12px}
  :root[data-style="classic"] .bsr-tstat-text strong{font-size:21px}
}

/* Instant desktop-only data tips. There is no native-title delay, and phones
   never receive a hover bubble they cannot dismiss cleanly. */
@media(hover:hover) and (pointer:fine) and (min-width:821px){
  .bsr-presence-chart i[data-tip],.bsr-online-note[data-tip]{position:relative}
  .bsr-presence-chart i[data-tip]::after,.bsr-online-note[data-tip]::after{
    content:attr(data-tip);position:absolute;z-index:80;left:50%;bottom:calc(100% + 8px);
    transform:translate(-50%,3px);width:max-content;max-width:260px;padding:6px 8px;border-radius:7px;
    background:#0d1b33;color:#fff;box-shadow:0 8px 22px rgba(13,27,51,.2);
    font:600 11px/1.25 Inter,ui-sans-serif,sans-serif;white-space:nowrap;pointer-events:none;
    opacity:0;visibility:hidden;transition:opacity .06s linear,transform .06s linear}
  .bsr-online-note[data-tip]::after{left:auto;right:-7px;transform:translateY(3px);white-space:normal;width:250px}
  .bsr-presence-chart i[data-tip]:hover::after,.bsr-online-note[data-tip]:hover::after,
  .bsr-online-note[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .bsr-online-note[data-tip]:hover::after,.bsr-online-note[data-tip]:focus-visible::after{transform:none}
}

@media(max-width:1100px) and (min-width:821px){
  .bsr-insights{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:820px){
  .bsr-online-note{display:none!important}

  /* The phone layout for this card is defined once, further down, in terms of
     grid areas. What stood here placed a .bsr-tstat-stack and a ring that no
     longer exist, forced display:grid on the audience tile, and hid the
     per-minute bars - which are wanted on phones. */
  :root[data-style="classic"] .bsr-target{padding:12px}
  :root[data-style="classic"] .bsr-target-amounts{font-size:19px}
}

@media(max-width:420px){
  :root[data-style="classic"] .bsr-target-main{column-gap:7px}
}

/* ------------------------------------------------------- goal card (top) */
/* One card, three regions: the goal on the left with its bar, what each day
   still needs beneath it, and the two supporting figures on the right. The
   percentage ring is gone - it said the same thing as the bar, in a second
   place - and "remaining" now lives at the end of the track it belongs to
   rather than in a tile of its own. That duplication is what left a finished
   month looking half empty. */
/* Two columns: the goal, and the two supporting figures. No decorative icons -
   every glyph here labelled something the words already said. */
.bsr-target-main{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  grid-template-areas:"mid side";
  align-items:center;
  column-gap:22px;row-gap:12px;
}
.bsr-target-mid{grid-area:mid;min-width:0;display:flex;flex-direction:column;
  justify-content:center;gap:9px}
/* The head row holds label, percentage and the edit control. space-between
   with three children pushed the percentage into the middle of the row,
   detached from the label it qualifies; it groups left, edit stays right. */
.bsr-target-head{justify-content:flex-start;gap:9px}
.bsr-target-head .bsr-target-label{margin-bottom:0}
.bsr-target-edit{margin-left:auto}
.bsr-target-amounts{margin-bottom:0}

/* The dot lives beside the figure, not inside it: the count is refreshed by
   setting text on its own node, which would otherwise delete the dot on the
   first poll. */
.bsr-online-target .bsr-online-value{display:inline-flex;align-items:center;gap:7px}
.bsr-online-target .bsr-online-pulse{position:static;width:8px;height:8px;flex:0 0 8px;
  border-radius:50%;background:#31c84c;
  box-shadow:0 0 0 0 rgba(49,200,76,.5);animation:bsr-presence-pulse 2.2s ease-out infinite}

/* The percentage sits beside the label, not inside the fill. At a few percent
   the fill is a sliver, so no amount of sizing gives a figure room in there -
   the constraint is structural. Out here it is legible at any value and the
   bar can go back to being a quiet rail. */
/* The verdict, not the percentage. Green when ahead, grey when level, amber
   when behind - never red: being behind on day three is not a failure. */
.bsr-target-pct{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;position:relative;top:-5px;
  line-height:1.5;white-space:nowrap;cursor:help}
.bsr-target-pct.is-ahead{color:var(--green);background:#e9f8ef}
.bsr-target-pct.is-level{color:var(--muted);background:var(--track)}
.bsr-target-pct.is-behind{color:var(--warn-text);background:var(--warn-bg)}

/* The track answers three questions on one axis: earned, heading, and where a
   steady month would be by now. */
.bsr-target-ghost{position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:repeating-linear-gradient(115deg,var(--est-border) 0 5px,transparent 5px 10px);
  transition:width .5s cubic-bezier(.22,.61,.36,1);cursor:default}
.bsr-target-tick{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:2px;
  background:var(--text);box-shadow:0 0 0 1.5px var(--surface);cursor:default;z-index:2}

.bsr-goal-proj{display:flex;align-items:baseline;gap:5px;color:var(--muted);border:0;background:transparent;padding:0;margin:0;
  font:inherit;cursor:pointer;text-align:left}
.bsr-goal-proj b{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.bsr-goal-proj:hover b{color:var(--blue)}
.bsr-goal-proj:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* What is left and what each day needs are both read off the bar above them,
   so they share one caption line rather than becoming tiles competing with
   the projection and the audience. */
.bsr-goal-caption{display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--muted)}
.bsr-goal-caption>span:first-child{margin-right:auto}
/* Both figures read at the same weight and size: they answer the same
   question, one about the month and one about a day. */
.bsr-goal-caption b,.bsr-goal-caption strong{font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums}
/* Verified against the live page: the base rule gives this a left border and
   18px of padding from when it was a separate column, which drew a stray
   divider through the caption line; and .bsr-tstat stacks its text in a
   column, which made a one-line caption 48px tall. */
.bsr-target-stats{display:flex;align-items:center;flex:0 0 auto;align-self:auto;
  padding-left:0;border-left:0}
.bsr-target-stats .bsr-tstat-text{flex-direction:row;align-items:baseline;gap:5px}
.bsr-goal-side{align-self:center}
/* Live audience sits left of the projection on desktop: it is the figure that
   moves, and it earns the first position. */
/* The projection moved onto the track, so the audience is the only tile left
   and it gets the whole column - which is what makes room for a chart worth
   reading. */
.bsr-goal-side{grid-area:side;display:grid;grid-template-columns:270px;align-self:center}
/* .bsr-online-copy is a grid by default, so flex-direction alone did nothing
   and the label stayed stacked above the count. Label left, count hard right,
   one line. */
.bsr-online-target{align-items:stretch;text-align:left;padding:13px 15px;gap:8px}
.bsr-online-target .bsr-online-copy{display:flex;flex-direction:row;align-items:center;
  gap:8px;width:100%;min-width:0}
.bsr-online-target .bsr-online-copy>span{grid-column:auto;font-size:12.5px}
.bsr-online-target .bsr-online-copy strong{margin:0 0 0 auto;font-size:28px;line-height:1}
.bsr-online-target .bsr-presence-chart{width:100%;height:56px}

/* The bar carries both readings: how far along, and how much is left. */
/* overflow stays visible so the pace mark can stand slightly proud of the
   rail; the fills clip themselves instead. */
.bsr-target-track{position:relative;display:flex;align-items:center;height:11px;
  border-radius:999px;background:var(--track);overflow:visible}
.bsr-target-fill{position:absolute;inset:0 auto 0 0;min-width:6px;border-radius:999px;
  background:var(--blue);transition:width .5s cubic-bezier(.22,.61,.36,1);z-index:1}

.bsr-target-stats .bsr-tstat{display:flex;align-items:center;gap:5px;padding:0;border:0;
  background:none;width:auto;min-width:0;text-align:left}
.bsr-target-stats .bsr-tstat-text{display:flex;align-items:baseline;gap:5px}
.bsr-target-stats .bsr-tstat-text span{font-size:12.5px;color:var(--muted);font-weight:400}
.bsr-target-stats .bsr-tstat-text strong{font-size:12.5px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums}
.bsr-goal-caption #bsr-target-remaining-inline strong,
.bsr-goal-caption>span:first-child{color:var(--muted)}

/* Two supporting tiles, equal width, quiet borders. */
.bsr-goal-tile,.bsr-online-target{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;width:100%;min-width:0;padding:12px 10px;text-align:center;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  color:inherit;cursor:pointer}
.bsr-goal-tile:hover{border-color:var(--line-strong);background:var(--hover)}
.bsr-goal-tile-icon{display:grid;place-items:center;width:38px;height:38px;
  border-radius:12px;background:var(--chip-bg);color:var(--chip-icon)}
.bsr-goal-tile-icon.is-green{background:#e9f8ef;color:var(--green)}
.bsr-goal-tile-label{font-size:13px;color:var(--muted)}
.bsr-goal-tile .bsr-proj-value{font-size:23px;font-weight:800;color:var(--green);
  font-variant-numeric:tabular-nums}
.bsr-online-target{cursor:default}
.bsr-online-target .bsr-online-copy{display:flex;flex-direction:column;align-items:center;
  gap:2px;min-width:0}
.bsr-online-target .bsr-online-copy strong{font-size:27px}
.bsr-online-target .bsr-online-copy small{display:none}
.bsr-online-target .bsr-presence-chart{width:100%;height:38px;gap:1.5px;position:relative;top:4px}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bsr-goal-tile-icon.is-green{background:#10281a}
}
:root[data-theme="dark"] .bsr-goal-tile-icon.is-green{background:#10281a}

/* Phones: the goal on top, then the two figures. Kept tight - this card should
   not take a third of the screen before any revenue is visible - but the
   audience chart is deliberately larger, since a sparkline that small says
   nothing. Order stays projection-then-audience here, matching the phone
   layout that was approved. */
@media(max-width:860px){
  .bsr-target-live-row{grid-template-columns:minmax(0,1fr);gap:11px}
  .bsr-target-live-row.no-target{grid-template-columns:minmax(0,1fr)}
  .bsr-target-live-row .bsr-online-standalone{grid-column:1/-1}
  .bsr-target{padding:12px}
  .bsr-target-main{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"mid" "side";
    column-gap:0;row-gap:10px}
  .bsr-online-target .bsr-online-copy strong{font-size:20px}
  .bsr-target-mid{gap:7px}
  .bsr-target-amounts{font-size:23px}
  .bsr-goal-side{grid-template-columns:minmax(0,1fr)}
  .bsr-goal-tile,.bsr-online-target{padding:9px 8px;gap:4px;border-radius:11px}
  .bsr-goal-tile .bsr-proj-value{font-size:16px}
  .bsr-goal-tile-label,.bsr-online-target .bsr-online-copy>span{font-size:11px}
  .bsr-online-target .bsr-online-copy strong{font-size:18px}
  .bsr-goal-caption{font-size:11.5px;gap:10px}
  .bsr-target-stats .bsr-tstat-text span,.bsr-target-stats .bsr-tstat-text strong{font-size:11.5px}
  .bsr-target-track{height:9px}
  .bsr-online-target{align-items:stretch;text-align:left}
  .bsr-online-target .bsr-online-copy{display:flex;flex-direction:row;align-items:center;
    gap:7px;width:100%;min-width:0}
  .bsr-online-target .bsr-online-copy>span{grid-column:auto;font-size:11.5px}
  .bsr-online-target .bsr-online-copy strong{margin:0 0 0 auto;font-size:20px}
  .bsr-online-target .bsr-presence-chart{display:grid;width:100%;height:46px;gap:1px}
}

/* Measured at 360px on the live page: "$322.05 to go" and "$11.50 needed per
   day" sit on one line with room to spare, so they are not stacked. Only the
   very narrowest widths need the shorter label. */
@media(max-width:340px){
  .bsr-goal-caption{gap:6px}
  .bsr-target-stats .bsr-tstat-text span{font-size:11px}
}

.bsr-history-live{color:var(--muted);cursor:help}

/* "needed per day" is long on a phone; "/day" says the same thing next to a
   figure that is plainly money. */
.bsr-gap-short{display:none}
@media(max-width:860px){
  .bsr-gap-long{display:none}
  .bsr-gap-short{display:inline}
  .bsr-target-stats .bsr-tstat-text{gap:2px}
}


/* ------------------------------------------------------- 3.9.x UI fixes */
/* Active users uses the same label-left / live-count-right header on desktop
   and mobile. This final override intentionally comes after the older tile
   rules that centered the desktop copy. */
.bsr-online-target{align-items:stretch;text-align:left}
.bsr-online-target .bsr-online-copy{display:flex;flex-direction:row;align-items:center;
  gap:7px;width:100%;min-width:0;text-align:left;position:relative;top:-8px}
.bsr-online-target .bsr-online-copy>span{grid-column:auto}
.bsr-online-target .bsr-online-copy strong{margin:0 0 0 auto;line-height:1}

/* One tooltip system for mouse, keyboard and touch. Desktop reveals on hover;
   a phone tap adds .is-tip-open in dashboard.js. Edge bars anchor inward so
   the bubble never creates horizontal overflow on a narrow viewport. */
.bsr-presence-chart i[data-tip]{position:relative;outline:0}
.bsr-presence-chart i[data-tip]:focus,.bsr-presence-chart i[data-tip].is-tip-open{opacity:1;background:var(--blue)}
.bsr-presence-chart i[data-tip]::after{
  content:attr(data-tip);position:absolute;z-index:80;left:50%;bottom:calc(100% + 7px);
  transform:translate(-50%,3px);width:max-content;max-width:220px;padding:6px 8px;border-radius:7px;
  background:#0d1b33;color:#fff;box-shadow:0 8px 22px rgba(13,27,51,.2);
  font:600 11px/1.25 Inter,ui-sans-serif,sans-serif;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .06s linear,transform .06s linear}
.bsr-presence-chart i[data-tip]:hover::after,
.bsr-presence-chart i[data-tip]:focus::after,
.bsr-presence-chart i[data-tip].is-tip-open::after{
  opacity:1;visibility:visible;transform:translate(-50%,0)}
.bsr-presence-chart i[data-tip]:nth-child(-n+4)::after{left:0;transform:translateY(3px)}
.bsr-presence-chart i[data-tip]:nth-child(-n+4):hover::after,
.bsr-presence-chart i[data-tip]:nth-child(-n+4):focus::after,
.bsr-presence-chart i[data-tip]:nth-child(-n+4).is-tip-open::after{transform:none}
.bsr-presence-chart i[data-tip]:nth-last-child(-n+4)::after{left:auto;right:0;transform:translateY(3px)}
.bsr-presence-chart i[data-tip]:nth-last-child(-n+4):hover::after,
.bsr-presence-chart i[data-tip]:nth-last-child(-n+4):focus::after,
.bsr-presence-chart i[data-tip]:nth-last-child(-n+4).is-tip-open::after{transform:none}

/* Desktop caption: number and words share one size and one baseline, even in
   Classic style where an older high-specificity rule enlarged only $82.68. */
@media(min-width:861px){
  :root .bsr-goal-caption .bsr-target-stats .bsr-tstat-text,
  :root .bsr-goal-caption .bsr-goal-proj{display:flex;align-items:baseline;gap:5px;
    font-size:12.5px;line-height:1.25;white-space:nowrap}
  :root .bsr-goal-caption .bsr-target-stats .bsr-tstat-text span,
  :root .bsr-goal-caption .bsr-target-stats .bsr-tstat-text strong,
  :root .bsr-goal-caption .bsr-goal-proj,
  :root .bsr-goal-caption .bsr-goal-proj b{font-size:12.5px;line-height:1.25}
}

@media(max-width:860px){
  /* Slightly taller bars without adding height to the Active users card. */
  .bsr-online-target .bsr-presence-chart i.is-level-1{height:4px}
  .bsr-online-target .bsr-presence-chart i.is-level-2{height:7px}
  .bsr-online-target .bsr-presence-chart i.is-level-3{height:10px}
  .bsr-online-target .bsr-presence-chart i.is-level-4{height:13px}
  .bsr-online-target .bsr-presence-chart i.is-level-5{height:16px}
  .bsr-online-target .bsr-presence-chart i.is-level-6{height:20px}
  .bsr-online-target .bsr-presence-chart i.is-level-7{height:24px}
  .bsr-online-target .bsr-presence-chart i.is-level-8{height:28px}
  .bsr-online-target .bsr-presence-chart i.is-level-9{height:32px}
  .bsr-online-target .bsr-presence-chart i.is-level-10{height:36px}

  /* Safari could visibly rescale the page while load-time number emphasis and
     a transient wide caption settled. Keep mobile first paint geometrically
     stable and clip any accidental horizontal paint outside the app. */
  .bsr-dashboard-body{overflow-x:hidden}
  .bsr-app{overflow-x:clip}
  .bsr-target.is-cling .bsr-target-earned,
  .bsr-target.is-cling .bsr-ring-pct,
  .bsr-value.is-flash{animation:none!important;transform:none!important}
  .bsr-target.is-cling .bsr-target-earned{display:inline!important}
}

/* ------------------------------------------------------- 3.9.6 desktop live-card sizing */
/* Keep the approved phone layout untouched. Above the phone breakpoint, let
   the live audience tile grow with the viewport instead of staying fixed at
   270px. The clamps protect tablets/small laptops while using the extra room
   available on normal desktop screens. */
@media(min-width:861px){
  .bsr-goal-side{grid-template-columns:clamp(250px,24vw,340px)}
  .bsr-online-target{
    min-height:clamp(100px,9vw,122px);
    padding:clamp(12px,1vw,15px) clamp(13px,1.25vw,18px);
    gap:clamp(7px,.75vw,10px)
  }
  .bsr-online-target .bsr-presence-chart{
    height:clamp(44px,4.1vw,58px);
    gap:clamp(1.5px,.16vw,2.3px)
  }
  .bsr-online-target .bsr-presence-chart i.is-level-1{height:4px}
  .bsr-online-target .bsr-presence-chart i.is-level-2{height:7px}
  .bsr-online-target .bsr-presence-chart i.is-level-3{height:10px}
  .bsr-online-target .bsr-presence-chart i.is-level-4{height:13px}
  .bsr-online-target .bsr-presence-chart i.is-level-5{height:16px}
  .bsr-online-target .bsr-presence-chart i.is-level-6{height:20px}
  .bsr-online-target .bsr-presence-chart i.is-level-7{height:24px}
  .bsr-online-target .bsr-presence-chart i.is-level-8{height:28px}
  .bsr-online-target .bsr-presence-chart i.is-level-9{height:32px}
  .bsr-online-target .bsr-presence-chart i.is-level-10{height:36px}
}

@media(min-width:1280px){
  .bsr-online-target .bsr-online-copy>span{font-size:13px}
  .bsr-online-target .bsr-online-copy strong{font-size:30px}
  .bsr-online-target .bsr-presence-chart i.is-level-1{height:5px}
  .bsr-online-target .bsr-presence-chart i.is-level-2{height:9px}
  .bsr-online-target .bsr-presence-chart i.is-level-3{height:13px}
  .bsr-online-target .bsr-presence-chart i.is-level-4{height:17px}
  .bsr-online-target .bsr-presence-chart i.is-level-5{height:21px}
  .bsr-online-target .bsr-presence-chart i.is-level-6{height:25px}
  .bsr-online-target .bsr-presence-chart i.is-level-7{height:29px}
  .bsr-online-target .bsr-presence-chart i.is-level-8{height:33px}
  .bsr-online-target .bsr-presence-chart i.is-level-9{height:37px}
  .bsr-online-target .bsr-presence-chart i.is-level-10{height:42px}
}


/* ------------------------------------------------------- 3.9.7 target-side presence */
/* The standalone wrapper is independent of target data, but on desktop it
   occupies the right-hand column beside the monthly target. Keeping that
   relationship in one bounded grid prevents the card from becoming a new
   full-width row or expanding the page horizontally. */
.bsr-online-standalone{display:block;width:100%;min-width:0;max-width:100%}
.bsr-online-standalone[hidden]{display:none!important}
.bsr-online-standalone>.bsr-online-target{width:100%;max-width:none;min-width:0;flex:none;border-radius:var(--radius)}
@media(min-width:861px){.bsr-online-standalone>.bsr-online-target{height:100%}}
.bsr-online-target.is-stale .bsr-online-pulse{background:var(--amber);animation:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 18%,transparent)}
.bsr-online-target.is-unavailable .bsr-online-pulse{background:var(--muted);animation:none;box-shadow:none}
.bsr-online-status{width:100%;color:var(--muted);font-size:11px;font-weight:650;line-height:1.35;text-align:left}


/* ------------------------------------------------------- insights + dark polish */
/* In dark mode the rate figures and live bars use the same lifted blue. The
   chart baseline was a hard-coded light border, so remove it only in dark. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bsr-metrics .bsr-card:not(.is-hero) .bsr-value,
  :root:not([data-theme="light"]) .bsr-stat.is-active-peak .bsr-stat-audience{color:var(--blue-deep)}
  :root:not([data-theme="light"]) .bsr-presence-chart{border-bottom:0}
  :root:not([data-theme="light"]) .bsr-presence-chart i,
  :root:not([data-theme="light"]) .bsr-presence-chart i:hover,
  :root:not([data-theme="light"]) .bsr-presence-chart i:focus,
  :root:not([data-theme="light"]) .bsr-presence-chart i.is-tip-open{background:var(--blue-deep)}
}
:root[data-theme="dark"] .bsr-metrics .bsr-card:not(.is-hero) .bsr-value,
:root[data-theme="dark"] .bsr-stat.is-active-peak .bsr-stat-audience{color:var(--blue-deep)}
:root[data-theme="dark"] .bsr-presence-chart{border-bottom:0}
:root[data-theme="dark"] .bsr-presence-chart i,
:root[data-theme="dark"] .bsr-presence-chart i:hover,
:root[data-theme="dark"] .bsr-presence-chart i:focus,
:root[data-theme="dark"] .bsr-presence-chart i.is-tip-open{background:var(--blue-deep)}

/* Compact source marks: the hero follows the active site/provider selection. */
.bsr-provider-badges{position:absolute;z-index:7;right:18px;top:60px;display:flex;align-items:center;justify-content:flex-end;gap:8px;max-width:46%}
.bsr-provider-badges[hidden],.bsr-provider-badge[hidden]{display:none!important}
.bsr-provider-badge{height:26px;min-width:38px;max-width:88px;padding:0;display:grid;place-items:center;border:0;background:transparent;box-shadow:none}
.bsr-provider-badge img{display:block;max-width:100%;max-height:20px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(3,16,43,.32))}
.bsr-provider-badge.is-adsense{width:42px}
.bsr-provider-badge.is-adskeeper{width:86px}
.bsr-ga4-icon{display:block;flex:0 0 auto;width:18px;height:20px;object-fit:contain}
#bsr-realtime-pages-sub,#bsr-top-pages-sub{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.bsr-ga4-icon[title]{cursor:help}
@media(max-width:520px){.bsr-provider-badges{right:12px;top:56px;gap:6px;max-width:48%}.bsr-provider-badge{height:22px;padding:0}.bsr-provider-badge img{max-height:17px}.bsr-provider-badge.is-adsense{width:35px}.bsr-provider-badge.is-adskeeper{width:72px}}
/* Per-user style picker for Finance and administrator accounts. */
.bsr-style-switcher{display:flex;align-items:center;gap:5px;padding:4px;border:1px solid var(--line,rgba(120,140,170,.28));border-radius:13px;background:var(--surface,rgba(255,255,255,.07))}
.bsr-style-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bsr-style-choice{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:var(--muted,currentColor);text-decoration:none}
.bsr-style-choice>span{display:none}
.bsr-style-choice:hover{background:rgba(76,111,180,.12);color:inherit}
.bsr-style-choice.is-active{background:var(--blue,#2563eb);color:#fff;box-shadow:0 5px 12px rgba(25,82,190,.2)}
.bsr-style-switcher.is-mobile{display:none!important}
.bsr-style-switcher.is-account{display:grid;grid-template-columns:1fr;gap:4px;width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.bsr-style-switcher.is-account .bsr-style-title{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;padding:0 0 2px;color:var(--text)}
.bsr-style-switcher.is-account .bsr-style-form{display:block;min-width:0}
.bsr-style-switcher.is-account .bsr-style-choice{width:100%;min-height:42px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 11px;border:1px solid transparent;border-radius:9px;color:var(--text);background:transparent;box-shadow:none}
.bsr-style-switcher.is-account .bsr-style-choice:hover,.bsr-style-switcher.is-account .bsr-style-choice:focus-visible{background:var(--hover);border-color:var(--line)}
.bsr-style-switcher.is-account .bsr-style-choice.is-active{background:var(--hover);border-color:var(--line-strong);color:var(--text);box-shadow:none}
.bsr-style-switcher.is-account .bsr-style-choice .bsr-ico{color:var(--blue);flex:0 0 17px}
.bsr-style-switcher.is-account .bsr-style-label{display:inline;font-size:13px;font-weight:700}
.bsr-style-switcher.is-account .bsr-style-check{display:none;margin-left:auto;color:var(--green);font-size:15px;font-weight:900}
.bsr-style-switcher.is-account .bsr-style-choice.is-active .bsr-style-check{display:inline}
@media(max-width:900px){.bsr-style-switcher.is-desktop{display:none!important}.bsr-style-switcher.is-mobile{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;width:100%;margin:5px 0 7px;padding:8px}.bsr-style-switcher.is-mobile .bsr-style-title{position:static;grid-column:1/-1;width:auto;height:auto;overflow:visible;clip:auto;padding:2px 4px 5px;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;opacity:.68}.bsr-style-switcher.is-mobile .bsr-style-choice{width:100%;height:38px;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:0 10px}.bsr-style-switcher.is-mobile .bsr-style-choice>span{display:inline;font-size:12px;font-weight:700}}
@media(max-width:900px){.bsr-account>div{min-width:0}}
.bsr-style-switcher.is-mobile .bsr-style-title{color:var(--muted,#6b7280)}

/* Match the Classic header controls and keep every style option readable. */
.bsr-header .bsr-style-switcher.is-desktop{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.bsr-header .bsr-style-switcher.is-desktop .bsr-style-choice{color:#c3d6f7}
.bsr-header .bsr-style-switcher.is-desktop .bsr-style-choice:hover{background:rgba(255,255,255,.18);color:#fff}
.bsr-header .bsr-style-switcher.is-desktop .bsr-style-choice.is-active{background:#fff;color:var(--header-a);box-shadow:none}
.bsr-theme,.bsr-fx,.bsr-fx-opt,.bsr-style-switcher,.bsr-style-choice{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* Classic GA4 tables follow the compact Analytics presentation: the title
   owns the row, Views stays right-aligned, and the blue rule carries rank. */
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-pages-columns,
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-row{grid-template-columns:minmax(0,1fr) 64px;column-gap:12px}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-pages-columns{padding:4px 0 6px;border-bottom:1px dotted var(--line-strong);font-size:10px;letter-spacing:.05em}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-pages-columns span:nth-child(1),
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-pages-columns span:nth-child(3){display:none}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-pages-columns span:nth-child(2){grid-column:1}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-pages-columns span:nth-child(4){grid-column:2;text-align:right}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-row{position:relative;min-height:36px;padding:7px 0 9px}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-rank{display:none}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-title{grid-column:1;grid-row:1;font-size:12.5px;font-weight:600;padding-bottom:4px}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-meter{grid-column:1;grid-row:1;align-self:end;width:100%;height:2px;border-radius:0;background:transparent;overflow:visible}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-meter i{height:2px;border-radius:0}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-views{grid-column:2;grid-row:1;font-size:12.5px;font-weight:600}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-pages-footer{border-top:0;padding-right:0}


/* ------------------------------------------------------- 3.11.5 visual polish */
/* The dashboard keeps Brightstone's restrained blue system, but distributes
   it across the page so the dark hero card is not the only strong visual
   anchor. These surfaces are intentionally light-only; dark mode retains the
   existing dedicated palette below. */
:root[data-style="classic"]{
  --bsr-polish-line:#d9e6fa;
  --bsr-polish-surface:#f8fbff;
  --bsr-polish-surface-strong:#eef5ff;
  --bsr-polish-glow:rgba(37,99,235,.10);
}

:root[data-style="classic"] .bsr-target{
  overflow:hidden;
  border-color:var(--bsr-polish-line);
  background:
    radial-gradient(78% 115% at 83% 122%,rgba(255,255,255,.92) 0 47%,transparent 48%),
    radial-gradient(55% 90% at 63% 117%,rgba(255,255,255,.72) 0 47%,transparent 48%),
    linear-gradient(108deg,#fbfdff 0%,#f2f7ff 55%,#f8fbff 100%);
  box-shadow:0 1px 2px rgba(13,27,51,.035),0 8px 24px rgba(24,72,154,.055);
}
:root[data-style="classic"] .bsr-target>*{position:relative;z-index:1}
:root[data-style="classic"] .bsr-target-pct.is-level{
  color:#9a5a08;
  background:#fff3d7;
}
:root[data-style="classic"] .bsr-target-pct.is-behind{
  color:#8a4b03;
  background:#ffedc2;
}
:root[data-style="classic"] .bsr-target-track{
  background:#e3ecfa;
  box-shadow:inset 0 1px 2px rgba(25,62,125,.06);
}
:root[data-style="classic"] .bsr-target-fill{
  background:linear-gradient(90deg,#2563eb,#347cf4);
  box-shadow:0 2px 7px rgba(37,99,235,.2);
}

/* Realtime audience reads as a live companion to the goal rather than a plain
   white box. The green status dot remains the only live-state color. */
:root[data-style="classic"] .bsr-online-target{
  border-color:#d8e6fb;
  background:linear-gradient(145deg,#fbfdff 0%,#f1f6ff 100%);
  box-shadow:0 5px 16px rgba(37,99,235,.05);
}
:root[data-style="classic"] .bsr-online-target .bsr-presence-chart{
  border-bottom-color:#cbdaf2;
}
:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i{
  background:linear-gradient(180deg,#3c86f6,#2563eb);
  opacity:.78;
}
:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i:hover,
:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i:focus,
:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-tip-open{opacity:1}

/* RPM cards get a concentrated top-left blue lift. Traffic cards instead use
   a quieter top wash so count metrics stay visually neutral. */
:root[data-style="classic"] .bsr-card.is-rpm,
:root[data-style="classic"] .bsr-card.is-vrpm,
:root[data-style="classic"] .bsr-card.is-pageviews,
:root[data-style="classic"] .bsr-card.is-visible{
  border-color:#dde8f8;
}
:root[data-style="classic"] .bsr-card.is-rpm,
:root[data-style="classic"] .bsr-card.is-vrpm{
  background:
    radial-gradient(150px 105px at 13% 6%,rgba(37,99,235,.105),transparent 72%),
    linear-gradient(120deg,#fafdff 0%,#fff 48%);
}
:root[data-style="classic"] .bsr-card.is-pageviews,
:root[data-style="classic"] .bsr-card.is-visible{
  background:
    radial-gradient(78% 115% at 75% -55%,rgba(71,132,239,.095) 0 52%,transparent 53%),
    linear-gradient(180deg,#f9fcff 0%,#fff 52%);
}
:root[data-style="classic"] .bsr-card.is-rpm .bsr-card-icon,
:root[data-style="classic"] .bsr-card.is-vrpm .bsr-card-icon{
  background:#e2edff;
  color:#1f67e8;
  box-shadow:0 5px 14px rgba(37,99,235,.08);
}
:root[data-style="classic"] .bsr-card.is-pageviews .bsr-card-icon,
:root[data-style="classic"] .bsr-card.is-visible .bsr-card-icon{
  background:#eaf2ff;
}

/* Compact insight cards inherit the same soft-blue personality while the Best
   day card keeps green as an achievement cue. */
:root[data-style="classic"] .bsr-stat{
  border-color:#e0e9f7;
  background:linear-gradient(112deg,#fbfdff 0%,#fff 72%);
}
:root[data-style="classic"] .bsr-stat.is-views .bsr-stat-icon,
:root[data-style="classic"] .bsr-stat.is-daily .bsr-stat-icon,
:root[data-style="classic"] .bsr-stat.is-active-peak .bsr-stat-icon{
  background:#e3edff;
  color:#2563eb;
}
:root[data-style="classic"] .bsr-stat.is-best{
  background:linear-gradient(112deg,#fbfefc 0%,#fff 72%);
}

/* Deeper sections sit on a slightly cooler surface to complete the visual
   rhythm without becoming a second hero area. */
:root[data-style="classic"] .bsr-more,
:root[data-style="classic"] .bsr-panel{
  border-color:#e0e8f5;
  background:linear-gradient(180deg,#fcfdff 0%,#fff 100%);
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-style="classic"] .bsr-target,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-online-target,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-card.is-rpm,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-card.is-vrpm,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-card.is-pageviews,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-card.is-visible,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-stat,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-more,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-panel{
    background:var(--surface);
    border-color:var(--line);
    box-shadow:var(--shadow);
  }
  :root:not([data-theme="light"])[data-style="classic"] .bsr-target-fill{background:var(--blue);box-shadow:none}
  :root:not([data-theme="light"])[data-style="classic"] .bsr-target-pct.is-level{color:var(--muted);background:var(--track)}
}
:root[data-theme="dark"][data-style="classic"] .bsr-target,
:root[data-theme="dark"][data-style="classic"] .bsr-online-target,
:root[data-theme="dark"][data-style="classic"] .bsr-card.is-rpm,
:root[data-theme="dark"][data-style="classic"] .bsr-card.is-vrpm,
:root[data-theme="dark"][data-style="classic"] .bsr-card.is-pageviews,
:root[data-theme="dark"][data-style="classic"] .bsr-card.is-visible,
:root[data-theme="dark"][data-style="classic"] .bsr-stat,
:root[data-theme="dark"][data-style="classic"] .bsr-more,
:root[data-theme="dark"][data-style="classic"] .bsr-panel{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
:root[data-theme="dark"][data-style="classic"] .bsr-target-fill{background:var(--blue);box-shadow:none}
:root[data-theme="dark"][data-style="classic"] .bsr-target-pct.is-level{color:var(--muted);background:var(--track)}
/* Preserve the dashboard's positive goal state after the light-surface polish. */
:root[data-style="classic"] .bsr-target.is-ontrack .bsr-target-fill,
:root[data-style="classic"] .bsr-target.is-hit .bsr-target-fill{
  background:linear-gradient(90deg,#16a34a,#22c55e);
  box-shadow:0 2px 7px rgba(22,163,74,.18);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-style="classic"] .bsr-target.is-ontrack .bsr-target-fill,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-target.is-hit .bsr-target-fill{
    background:var(--green);box-shadow:none;
  }
}
:root[data-theme="dark"][data-style="classic"] .bsr-target.is-ontrack .bsr-target-fill,
:root[data-theme="dark"][data-style="classic"] .bsr-target.is-hit .bsr-target-fill{
  background:var(--green);box-shadow:none;
}

/* --------------------------------------------------- 3.11.7 GA4 audience flip */
/* The breakdown occupies the existing live-card footprint. Nothing here adds
   height: the back is overlaid on the minute chart and header. */
.bsr-online-target[data-presence-flip]{position:relative;isolation:isolate;cursor:pointer;perspective:700px}
.bsr-online-target[data-presence-flip] [data-presence-front]{
  backface-visibility:hidden;transform-origin:50% 50%;
  transition:opacity .18s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.bsr-online-target[data-presence-flip] .bsr-online-copy{padding-right:24px}
.bsr-presence-flip-toggle{
  position:absolute;z-index:4;top:7px;right:7px;display:grid;place-items:center;
  width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:7px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);color:var(--muted);
  box-shadow:0 2px 7px rgba(15,37,72,.06);cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.bsr-presence-flip-toggle:hover,.bsr-presence-flip-toggle:focus-visible{
  color:var(--blue);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));
  background:var(--surface);outline:0}
.bsr-presence-flip-toggle .bsr-ico{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.bsr-online-target.is-flipped .bsr-presence-flip-toggle .bsr-ico{transform:rotate(180deg)}
.bsr-online-target.is-flipped [data-presence-front]{
  opacity:0;transform:rotateY(88deg);pointer-events:none}

.bsr-audience-breakdown{
  position:absolute;z-index:2;inset:8px 10px 7px;display:flex;flex-direction:column;
  justify-content:center;gap:5px;min-width:0;opacity:0;visibility:hidden;pointer-events:none;
  transform:rotateY(-88deg);transform-origin:50% 50%;backface-visibility:hidden;
  transition:opacity .18s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s}
.bsr-online-target.is-flipped .bsr-audience-breakdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:rotateY(0);
  transition-delay:0s}
.bsr-audience-heading{display:flex;align-items:baseline;gap:6px;padding-right:23px;min-width:0}
.bsr-audience-heading strong{font-size:11.5px;line-height:1.1;color:var(--text);white-space:nowrap}
.bsr-audience-heading small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:8.5px;line-height:1.1;color:var(--muted)}
.bsr-audience-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-width:0}
.bsr-audience-columns section{min-width:0;margin:0;padding:0}
.bsr-audience-columns section+section{padding-left:10px;border-left:1px solid var(--line)}
.bsr-audience-columns h4{margin:0 0 3px;font-size:9px;line-height:1.05;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.bsr-audience-list{display:grid;gap:3px;min-height:31px}
.bsr-audience-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:4px;min-width:0;padding-bottom:2px;font-size:9.5px;line-height:1.05}
.bsr-audience-row::after{content:"";position:absolute;left:0;bottom:0;width:var(--share,0%);height:1px;
  border-radius:999px;background:var(--blue);opacity:.72}
.bsr-audience-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.bsr-audience-row b{font-size:9px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.bsr-audience-empty{display:flex;align-items:center;min-height:31px;font-size:9.5px;line-height:1.25;
  color:var(--muted)}
.bsr-audience-breakdown.is-loading .bsr-audience-empty{animation:bsr-audience-pulse 1s ease-in-out infinite alternate}
@keyframes bsr-audience-pulse{to{opacity:.45}}

@media(max-width:860px){
  .bsr-presence-chart:hover i{opacity:1}
  .bsr-presence-chart i[data-tip]{-webkit-tap-highlight-color:transparent}
  .bsr-presence-flip-toggle{top:6px;right:6px;width:21px;height:21px}
  .bsr-online-target[data-presence-flip] .bsr-online-copy{padding-right:23px}
  .bsr-audience-breakdown{inset:6px 8px 5px;gap:4px}
  .bsr-audience-heading strong{font-size:11px}
  .bsr-audience-columns{gap:9px}
  .bsr-audience-columns section+section{padding-left:8px}
  .bsr-audience-list{gap:2px}
  .bsr-audience-row{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .bsr-online-target[data-presence-flip] [data-presence-front],
  .bsr-audience-breakdown,.bsr-presence-flip-toggle .bsr-ico{transition:none}
  .bsr-audience-breakdown.is-loading .bsr-audience-empty{animation:none}
}

/* Final cascade for the expanded Classic audience card. */
.bsr-presence-flip-toggle{display:none!important}
.bsr-online-target[data-presence-flip]{position:relative;perspective:900px;cursor:pointer}
.bsr-online-target[data-presence-flip] .bsr-online-copy{padding-right:0}
.bsr-audience-breakdown{position:absolute;inset:14px 16px 10px;display:flex;flex-direction:column;gap:10px;
  opacity:0;visibility:hidden;pointer-events:none;transform:rotateY(-88deg);transform-origin:center;
  transition:opacity .18s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s}
.bsr-online-target.is-flipped .bsr-audience-breakdown{opacity:1;visibility:visible;pointer-events:auto;transform:rotateY(0);transition-delay:0s}
.bsr-audience-heading{display:flex;align-items:baseline;gap:8px;padding:0;min-width:0}
.bsr-audience-heading strong{display:flex;align-items:center;gap:7px;font-size:15px;line-height:1.15;color:var(--text)}
.bsr-audience-heading strong i{width:8px;height:8px;border-radius:50%;background:#32bd50;box-shadow:0 0 0 4px rgba(50,189,80,.11)}
.bsr-audience-heading small{font-size:10.5px;line-height:1.2;color:var(--muted)}
.bsr-audience-layout{display:grid;grid-template-columns:108px minmax(108px,.75fr) minmax(150px,1fr);gap:15px;align-items:center;min-height:132px}
.bsr-audience-layout section{min-width:0}.bsr-audience-layout h4{margin:0 0 8px;font-size:11px;color:var(--muted)}
.bsr-audience-countries{padding-left:14px;border-left:1px solid var(--line)}
.bsr-audience-donut{--mobile-share:72%;--tablet-end:88%;width:102px;height:102px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#3b82f6 0 var(--mobile-share),#4fbd61 var(--mobile-share) var(--tablet-end),#f5a524 var(--tablet-end) 100%);position:relative}
.bsr-audience-donut::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--surface)}
.bsr-audience-donut>span{position:relative;z-index:1;display:grid;text-align:center;gap:2px}.bsr-audience-donut strong{font-size:24px;line-height:1;color:var(--text)}
.bsr-audience-donut small{font-size:9.5px;line-height:1.2;color:var(--muted)}
.bsr-audience-list{display:grid;gap:7px;min-height:42px}
.bsr-audience-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0;padding-bottom:5px;font-size:11px;line-height:1.1}
.bsr-audience-row.is-device{grid-template-columns:minmax(0,1fr) auto auto}
.bsr-audience-row::after{content:"";position:absolute;left:0;bottom:0;width:var(--share,0%);height:3px;border-radius:999px;background:#4f8ef5;opacity:.9}
.bsr-audience-row>span{display:flex;align-items:center;gap:6px;color:var(--text)}.bsr-audience-row b{font-size:11px;color:var(--text);font-weight:750}.bsr-audience-row small{font-size:9.5px;color:var(--muted)}
.bsr-country-flag{font-style:normal;font-size:15px;line-height:1}.bsr-device-dot{width:9px;height:9px;border-radius:50%;background:#3b82f6;flex:0 0 9px}
.bsr-audience-row.is-device:nth-child(2) .bsr-device-dot{background:#4fbd61}.bsr-audience-row.is-device:nth-child(3) .bsr-device-dot{background:#f5a524}
.bsr-audience-empty{display:flex;align-items:center;min-height:42px;font-size:10.5px;color:var(--muted)}
.bsr-audience-pages{display:flex;justify-content:center;gap:6px;margin-top:auto}.bsr-audience-pages i{width:20px;height:4px;border-radius:99px;background:var(--line-strong)}.bsr-audience-pages i.is-active{width:30px;background:var(--blue)}
@media(min-width:861px){:root[data-style="classic"] .bsr-goal-side{grid-template-columns:clamp(410px,34vw,480px)}:root[data-style="classic"] .bsr-online-target{min-height:214px;padding:16px 18px}:root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:132px;gap:3px}}
:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-1{height:10px}:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-2{height:20px}:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-3{height:30px}:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-4{height:40px}:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-5{height:50px}:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-6{height:61px}:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-7{height:72px}:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-8{height:84px}:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-9{height:96px}:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-10{height:110px}
@media(max-width:860px){
  :root[data-style="classic"] .bsr-online-target{min-height:250px;padding:11px;border-left:0;border:1px solid var(--line);border-radius:12px}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:132px;gap:2px}
  .bsr-audience-breakdown{inset:11px 12px 8px;gap:8px}.bsr-audience-heading strong{font-size:13px}
  .bsr-audience-layout{grid-template-columns:92px minmax(0,1fr);grid-template-areas:"donut devices" "countries countries";gap:9px 13px;min-height:195px}
  .bsr-audience-donut{grid-area:donut;width:86px;height:86px}.bsr-audience-donut::after{inset:12px}.bsr-audience-donut strong{font-size:20px}
  .bsr-audience-devices{grid-area:devices}.bsr-audience-countries{grid-area:countries;padding:8px 0 0;border-left:0;border-top:1px solid var(--line)}
  .bsr-audience-countries .bsr-audience-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:13px}.bsr-audience-pages{display:none}
}
.bsr-target-head .bsr-target-history{margin-left:0!important}

/* ------------------------------------------------ 3.11.10 compact controls */
.bsr-mobile-notifications{display:none}
.bsr-sync-menu{position:relative}
.bsr-sync-menu>summary{list-style:none}
.bsr-sync-menu>summary::-webkit-details-marker{display:none}
.bsr-sync-menu>div{position:absolute;z-index:90;right:0;top:calc(100% + 9px);display:grid;gap:2px;
  min-width:190px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);
  color:var(--text);box-shadow:var(--shadow);font-size:12px}
.bsr-sync-menu>div .bsr-sync{font-size:11px;color:var(--muted)}

/* The selected picker always keeps its provider marks and readable label. */
.bsr-siteswitch>summary{min-width:0}
.bsr-siteswitch>summary .bsr-site-provider-icons{flex:0 0 auto}
.bsr-siteswitch>summary #bsr-site-label{display:block!important;min-width:0;flex:1 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsr-siteswitch>summary .bsr-site-provider-icons img{width:19px;height:19px;object-fit:contain}
.bsr-provider-badge.is-adskeeper{width:30px!important}
.bsr-provider-badge.is-adskeeper img{width:24px!important;height:24px!important;object-fit:contain}

/* Pace -> same point last month -> info, without changing target maths. */
.bsr-target-pct{font-family:inherit;border:0;cursor:pointer;line-height:1.35}
.bsr-target-pct.is-info-only{display:grid;place-items:center;width:22px;height:22px;padding:0;border-radius:50%;
  background:var(--chip-bg);color:var(--blue);font-size:12px;font-weight:800}
.bsr-target-tools{margin-left:auto;display:grid;justify-items:end;align-self:flex-start;gap:5px;flex:0 0 auto}
.bsr-target-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.bsr-target-amount-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;min-width:0}
.bsr-target-amount-row .bsr-target-amounts{min-width:0}
.bsr-target-amount-row .bsr-tstat{display:flex;flex:0 0 auto;flex-direction:row;align-items:baseline;min-width:0;
  padding:0;border:0;background:none;text-align:right}
.bsr-target-amount-row .bsr-tstat-text{display:flex;flex-direction:row;align-items:baseline;gap:4px;white-space:nowrap;text-align:right}
:root[data-style="classic"] .bsr-target-amount-row .bsr-tstat-text strong,
:root[data-style="classic"] .bsr-target-amount-row .bsr-tstat-text span{font-size:12.5px;line-height:1.25}
.bsr-target-amount-row .bsr-tstat-text strong{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.bsr-target-amount-row .bsr-tstat-text span{color:var(--muted);font-weight:400}
:root[data-style="classic"] .bsr-target-mid{padding-bottom:0}
:root[data-style="classic"] .bsr-target-stats{position:static;right:auto;bottom:auto}

/* The live card returns to a compact footprint. Its back keeps the donut and
   useful countries, while device detail stays available from the donut. */
:root[data-style="classic"] .bsr-online-target{min-height:128px!important;padding:10px 12px!important}
:root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:54px!important;gap:2px!important}
:root[data-style="classic"] .bsr-online-target .bsr-presence-chart i{max-height:100%}
.bsr-audience-breakdown{inset:10px 12px 8px!important;gap:7px!important}
.bsr-audience-layout{grid-template-columns:66px minmax(0,.72fr) minmax(0,1fr)!important;
  gap:9px!important;min-width:0;min-height:70px!important}
.bsr-audience-donut{width:66px!important;height:66px!important}
.bsr-audience-donut::after{inset:11px!important}
.bsr-audience-donut strong{font-size:20px!important}
.bsr-audience-layout h4{margin-bottom:5px!important}
.bsr-audience-list{gap:4px!important;min-height:34px!important}
.bsr-audience-row{padding-bottom:3px!important}
.bsr-country-flag{display:inline-block;min-width:17px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:15px!important;line-height:1!important;color:initial}
.bsr-country-flag img{display:block;width:18px;height:13px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(15,35,70,.08)}
.bsr-country-flag>span{display:none}
.bsr-country-flag.is-fallback>span{display:inline}
.bsr-audience-donut[data-tip]::before{content:attr(data-tip);position:absolute;z-index:12;left:50%;bottom:calc(100% + 7px);
  transform:translate(-50%,3px);width:max-content;max-width:min(280px,80vw);padding:7px 9px;border-radius:8px;
  background:#0d1b33;color:#fff;font:600 10px/1.3 Inter,ui-sans-serif,sans-serif;white-space:normal;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,transform .12s ease}
.bsr-audience-donut[data-tip]:hover::before,.bsr-audience-donut.is-tip-open::before{
  opacity:1;visibility:visible;transform:translate(-50%,0)}

@media(max-width:860px){
  .bsr-mobile-notifications{display:grid}
  .bsr-avatar{border-radius:9px!important}
  .bsr-sync-menu{display:none}
  .bsr-target-head{align-items:flex-start}
  .bsr-target-pct{max-width:150px;text-align:left}
  .bsr-target-amount-row{gap:8px}
  :root[data-style="classic"] .bsr-target-amount-row .bsr-tstat-text strong,
  :root[data-style="classic"] .bsr-target-amount-row .bsr-tstat-text span{font-size:11px}
  :root[data-style="classic"] .bsr-online-target{min-height:126px!important;padding:9px 10px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:52px!important}
  .bsr-audience-heading strong{font-size:12px!important}
  .bsr-audience-heading small{font-size:9px!important}
  .bsr-audience-layout{grid-template-columns:66px minmax(0,1fr)!important;grid-template-areas:"donut countries"!important;
    gap:9px!important;min-height:68px!important}
  .bsr-audience-donut{grid-area:donut;width:62px!important;height:62px!important}
  .bsr-audience-donut::after{inset:10px!important}
  .bsr-audience-donut strong{font-size:20px!important}
  .bsr-audience-donut small{display:none!important}
  .bsr-audience-devices{display:none!important}
  .bsr-audience-countries{grid-area:countries;padding:0!important;border:0!important}
  .bsr-audience-countries .bsr-audience-list{display:grid!important;grid-template-columns:1fr!important;gap:4px!important}
  .bsr-audience-row{font-size:9.5px!important}
  .bsr-audience-row b{font-size:9.5px!important}
}

/* Final 3.11.11 overrides stay after the older compact-card experiments. */
.bsr-presence-chart i[data-tip]::after,
.bsr-online-note[data-tip]::after,
.bsr-audience-donut[data-tip]::before{content:none!important;display:none!important}
.bsr-audience-pages{display:none!important}
.bsr-site-provider-icons{gap:2px!important}
.bsr-siteswitch.is-all-sites>summary>.bsr-ico:first-child{display:none!important}
.bsr-siteswitch>summary .bsr-site-provider-icons img{width:18px!important;height:18px!important}
.bsr-audience-row.is-country::after{left:24px!important;right:0;width:auto!important;
  background:linear-gradient(90deg,#4f8ef5 0 var(--share,0%),transparent var(--share,0%) 100%)!important}
@media(min-width:861px){
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:42px!important}
}
@media(max-width:860px){
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:40px!important}
  .bsr-country-pager{display:flex}
  .bsr-change.is-down .bsr-arrow{color:#e56b3f!important}
}

/* ------------------------------------------------ 3.11.12 live card polish */

/* The minute chart is a fixed-height strip. Its bar levels were still carrying
   the heights of the tall card it used to live in, which is what pushed them
   out past the card edge on desktop. Clip the strip, and scale levels to it. */
.bsr-online-target .bsr-presence-chart{overflow:hidden;align-items:end}
.bsr-online-target .bsr-presence-chart i{max-height:100%!important}
@media(min-width:861px){
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-1{height:5px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-2{height:9px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-3{height:13px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-4{height:17px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-5{height:21px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-6{height:25px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-7{height:29px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-8{height:34px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-9{height:38px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-10{height:42px!important}
}

/* Google Analytics is the source of this number, so it says so. */
.bsr-online-ga4{display:inline-block;width:12px;height:14px;margin-right:5px;
  vertical-align:-2px;object-fit:contain}

/* The count alone carries the donut; the caption under it was only repeating
   the heading beside it. */
.bsr-audience-donut small.screen-reader-text{position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Flags are an image with an emoji fallback. Pin the image down so a narrow
   desktop column cannot shrink it out of the row. */
.bsr-country-flag{display:inline-flex!important;align-items:center;flex:0 0 auto!important;
  min-width:18px;width:18px;height:13px}
.bsr-country-flag img{display:block!important;width:18px!important;height:13px!important;
  object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(15,35,70,.08)}
.bsr-country-flag img[hidden]{display:none!important}
.bsr-country-flag>span{display:none}
.bsr-country-flag.is-fallback{width:auto;min-width:18px;height:13px;justify-content:center;
  padding:0 3px;border-radius:2px;background:var(--chip-bg);color:var(--blue)}
.bsr-country-flag.is-fallback>span{display:inline;font:800 8.5px/13px Inter,ui-sans-serif,sans-serif;
  letter-spacing:.02em}

/* Share bars sit under the label text, not under the marker, and keep a little
   air above the row below them. */
.bsr-audience-row{padding-bottom:9px!important}
.bsr-audience-row::after{bottom:2px!important}
.bsr-audience-row.is-country::after{left:24px!important}
.bsr-audience-row.is-device::after{left:15px!important;right:0;width:auto!important;
  background:linear-gradient(90deg,#4f8ef5 0 var(--share,0%),transparent var(--share,0%) 100%)!important}

/* Site picker: the provider marks are the identity, so the generic layers
   glyph goes whenever they are present, and the marks get room to breathe. */
.bsr-site-provider-icons{gap:6px!important}
.bsr-siteswitch>summary:has(.bsr-site-provider-icons)>.bsr-ico:first-child{display:none!important}
.bsr-siteswitch>summary .bsr-site-provider-icons img{width:19px!important;height:19px!important}

/* The two revenue-source marks read as one group rather than two badges. */
.bsr-provider-badges{gap:2px!important}
@media(max-width:520px){.bsr-provider-badges{gap:2px!important}}

/* The info badge stays brand blue in every style and pace state. */
:root .bsr-target-pct.is-info-only,
:root[data-style="classic"] .bsr-target-pct.is-info-only,
:root[data-style="classic"] .bsr-target-pct.is-ahead.is-info-only,
:root[data-style="classic"] .bsr-target-pct.is-level.is-info-only,
:root[data-style="classic"] .bsr-target-pct.is-behind.is-info-only{
  background:var(--chip-bg)!important;color:var(--blue)!important}

/* Notifications belong in the desktop header too. */
.bsr-mobile-notifications{display:grid}

/* ------------------------------------------------ 3.11.13 live card refinements */

/* A one-line tooltip should not read like a paragraph. */
.bsr-presence-floating-tip{padding:6px 9px!important;border-radius:7px!important;
  max-width:min(280px,calc(100vw - 16px))!important;
  /* Multi-part tips are written one per line, so the line breaks must survive. */
  white-space:pre-line!important;
  font:600 10px/1.4 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}

/* The card was mostly air with a thin strip of bars in the middle. Trim the
   top and bottom, and give the minutes the room that frees up so the tallest
   bar actually reaches the top of its strip. */
:root[data-style="classic"] .bsr-online-target{min-height:0!important;padding:9px 14px 8px!important;row-gap:6px!important}
:root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:60px!important;gap:3px!important}
@media(min-width:861px){
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:60px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-1{height:7px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-2{height:13px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-3{height:19px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-4{height:25px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-5{height:31px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-6{height:37px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-7{height:43px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-8{height:49px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-9{height:55px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-10{height:60px!important}
}
@media(max-width:860px){
  :root[data-style="classic"] .bsr-online-target{min-height:0!important;padding:8px 11px 7px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:54px!important;gap:2px!important}
  .bsr-online-target .bsr-presence-chart i.is-level-1{height:6px!important}
  .bsr-online-target .bsr-presence-chart i.is-level-2{height:12px!important}
  .bsr-online-target .bsr-presence-chart i.is-level-3{height:17px!important}
  .bsr-online-target .bsr-presence-chart i.is-level-4{height:23px!important}
  .bsr-online-target .bsr-presence-chart i.is-level-5{height:28px!important}
  .bsr-online-target .bsr-presence-chart i.is-level-6{height:33px!important}
  .bsr-online-target .bsr-presence-chart i.is-level-7{height:39px!important}
  .bsr-online-target .bsr-presence-chart i.is-level-8{height:44px!important}
  .bsr-online-target .bsr-presence-chart i.is-level-9{height:49px!important}
  .bsr-online-target .bsr-presence-chart i.is-level-10{height:54px!important}
}

/* Hovering one minute highlights that minute. Dimming the whole chart to make
   the point was the part that read as a glitch. */
.bsr-presence-chart:hover i{opacity:inherit}
.bsr-presence-chart i{opacity:.2}
.bsr-presence-chart i.is-level-1{opacity:.75}.bsr-presence-chart i.is-level-2{opacity:.78}
.bsr-presence-chart i.is-level-3{opacity:.8}.bsr-presence-chart i.is-level-4{opacity:.83}
.bsr-presence-chart i.is-level-5{opacity:.86}.bsr-presence-chart i.is-level-6{opacity:.88}
.bsr-presence-chart i.is-level-7{opacity:.9}.bsr-presence-chart i.is-level-8{opacity:.93}
.bsr-presence-chart i.is-level-9{opacity:.96}.bsr-presence-chart i.is-level-10{opacity:1}
.bsr-presence-chart i:hover,.bsr-presence-chart i.is-tip-open{opacity:1!important;background:var(--blue)}

/* The back face follows the front face's tighter padding. */
.bsr-audience-breakdown{inset:9px 14px 8px!important}
@media(max-width:860px){.bsr-audience-breakdown{inset:8px 11px 7px!important}}

/* Source and window belong at the far end of the heading line. */
.bsr-audience-heading{justify-content:space-between}
.bsr-audience-heading strong{flex:0 1 auto;min-width:0}
.bsr-audience-heading small{margin-left:auto;text-align:right;flex:0 1 auto}

/* The column labels said what the flags and dots already say, and the height
   they cost is better spent on the rows themselves. */
.bsr-audience-layout h4{display:none!important}

/* Share bars stop short of the figures they describe rather than running
   underneath them. */
.bsr-audience-row.is-country::after{left:24px!important;right:30px!important}
.bsr-audience-row.is-device::after{left:15px!important;right:62px!important}
@media(max-width:860px){
  .bsr-audience-row.is-country::after{right:26px!important}
  .bsr-audience-row.is-device::after{right:54px!important}
}

/* The longer, plainer title has to share its line with the source caption. */
.bsr-audience-heading{gap:10px}
.bsr-audience-heading strong{flex:0 0 auto;font-size:12.5px;letter-spacing:-.01em;white-space:nowrap}
.bsr-audience-heading strong i{flex:0 0 7px;width:7px;height:7px;box-shadow:0 0 0 3px rgba(50,189,80,.11)}
.bsr-audience-heading small{flex:1 1 auto;min-width:0;font-size:10px}
@media(max-width:860px){
  .bsr-audience-heading{gap:7px}
  .bsr-audience-heading strong{font-size:10.5px!important}
  .bsr-audience-heading small{font-size:8.5px!important}
}

/* The heading line reserves the control's height so the first row below it
   never runs under the corner. */
.bsr-audience-heading{align-items:center;min-height:22px}
@media(max-width:860px){
  .bsr-presence-flip-btn{top:6px;right:7px;width:20px;height:20px}
  .bsr-audience-heading{min-height:20px;padding-right:24px}
  .bsr-online-target[data-presence-flip] .bsr-online-copy{padding-right:24px}
}

/* Both marks were reading as one glyph. Give them a clear gap, and let the
   Analytics mark breathe before the label it belongs to. */
.bsr-site-provider-icons{gap:9px!important}
.bsr-siteswitch>summary .bsr-site-provider-icons{gap:9px!important;margin-right:2px}
.bsr-online-ga4{margin-right:8px!important}

/* ------------------------------------------------ 3.11.14 flip control, mobile density */

/* The control sits with the label it belongs to, one per face, so the card
   body stays inert: hovering a minute and swiping countries flip nothing. */
.bsr-online-target[data-presence-flip]{cursor:default}
.bsr-presence-flip-btn{display:inline-grid;place-items:center;vertical-align:middle;
  width:19px;height:19px;margin-left:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--chip-bg);color:var(--blue);opacity:.72;
  transition:opacity .15s ease,background .15s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.bsr-presence-flip-btn:hover,.bsr-presence-flip-btn:focus-visible{opacity:1;background:var(--hover)}
.bsr-presence-flip-btn:focus-visible{outline:2px solid var(--blue-soft);outline-offset:2px}
.bsr-presence-flip-btn svg{display:block}
.bsr-presence-flip-btn[data-tip]{position:relative}
.bsr-presence-flip-btn[data-tip]::after{content:attr(data-tip);position:absolute;z-index:90;left:50%;bottom:calc(100% + 8px);
  transform:translate(-50%,3px);width:max-content;max-width:240px;padding:6px 8px;border-radius:7px;
  background:#0d1b33;color:#fff;box-shadow:0 8px 22px rgba(13,27,51,.2);
  font:600 11px/1.25 Inter,ui-sans-serif,sans-serif;white-space:normal;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .06s linear,transform .06s linear}
.bsr-presence-flip-btn[data-tip]:hover::after,.bsr-presence-flip-btn[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.bsr-audience-heading strong .bsr-presence-flip-btn{margin-left:8px}
/* Nothing is pinned to the corner any more. */
.bsr-online-target[data-presence-flip] .bsr-online-copy{padding-right:0}
.bsr-audience-heading{padding-right:0!important}

@media(min-width:861px){
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:78px!important}
}

/* Shown once per browser, then the class is dropped and never returns. */
@keyframes bsr-flip-hint{0%,58%,100%{transform:rotate(0)}66%{transform:rotate(-170deg)}74%,92%{transform:rotate(-180deg)}}
@keyframes bsr-flip-hint-ring{0%,50%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}60%{box-shadow:0 0 0 5px rgba(37,99,235,.18)}80%{box-shadow:0 0 0 9px rgba(37,99,235,0)}}
.bsr-online-target.is-hinting .bsr-presence-flip-btn{opacity:1;animation:bsr-flip-hint-ring 2.6s ease-out 3}
.bsr-online-target.is-hinting .bsr-presence-flip-btn svg{animation:bsr-flip-hint 2.6s ease-in-out 3}
@media(prefers-reduced-motion:reduce){
  .bsr-online-target.is-hinting .bsr-presence-flip-btn,
  .bsr-online-target.is-hinting .bsr-presence-flip-btn svg{animation:none}
  .bsr-online-target.is-hinting .bsr-presence-flip-btn{opacity:1;background:var(--hover)}
}

/* Flag emoji where the platform draws them, the CDN image where it does not,
   and the country code when neither answers. */
.bsr-country-flag.is-emoji{width:auto!important;min-width:19px;height:13px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:14px;line-height:13px;background:none;padding:0}
.bsr-country-flag.is-emoji>span{display:inline!important;font:inherit;color:initial}

/* Mobile: the flipped face needs room to be read, not squeezed into the
   height of the front one. */
@media(max-width:860px){
  .bsr-presence-flip-btn{width:15px;height:15px;margin-left:5px}
  .bsr-presence-flip-btn svg{width:9px;height:9px}
  .bsr-audience-heading strong .bsr-presence-flip-btn{margin-left:6px}

  :root[data-style="classic"] .bsr-online-target{transition:min-height .26s ease}
  :root[data-style="classic"] .bsr-online-target.is-flipped{min-height:152px!important;padding-bottom:9px!important}
  .bsr-audience-breakdown{inset:9px 12px 8px!important;justify-content:flex-start!important;gap:7px!important}
  .bsr-audience-layout{grid-template-columns:58px minmax(0,1fr)!important;
    grid-template-areas:"donut countries"!important;gap:10px 11px!important;
    min-height:0!important;align-items:start!important}
  .bsr-audience-donut{width:58px!important;height:58px!important;align-self:center}
  .bsr-audience-donut::after{inset:9px!important}
  .bsr-audience-donut strong{font-size:17px!important}
  .bsr-audience-row{font-size:11px!important;padding-bottom:8px!important}
  .bsr-audience-row b{font-size:11px!important}
  .bsr-audience-countries .bsr-audience-list{gap:5px!important}

  /* Smaller pace badge beside the monthly target. */
  .bsr-target-pct.is-info-only{width:17px!important;height:17px!important;font-size:9.5px!important}

  /* No reload button in the header; the PWA pull gesture replaces it. */
  #bsr-refresh,.bsr-hbtn#bsr-refresh{display:none!important}
}

/* Countries page as a native snap scroller. Hand-rolled swipe maths fought the
   page's own scrolling; this hands the gesture back to the browser. */
.bsr-audience-list.is-carousel{display:flex!important;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  overscroll-behavior-x:contain;touch-action:pan-x;gap:0!important;min-width:0}
.bsr-audience-list.is-carousel::-webkit-scrollbar{display:none}
.bsr-country-page{flex:0 0 100%;width:100%;min-width:100%;scroll-snap-align:start;
  display:grid;gap:5px;align-content:start}
.bsr-country-pager{display:none;align-items:center;justify-content:center;gap:7px;margin-top:6px}
.bsr-country-pager button{width:18px;height:4px;padding:0;border:0;border-radius:999px;
  background:var(--line-strong);cursor:pointer;transition:width .18s ease,background .18s ease}
.bsr-country-pager button.is-active{width:26px;background:var(--blue)}
@media(max-width:860px){.bsr-country-pager{display:flex}}

/* On a phone the title plus the control leaves no room for the source line,
   so it takes its own line rather than being cut mid-word. */
@media(max-width:860px){
  .bsr-audience-heading{flex-wrap:wrap;row-gap:1px;align-items:center}
  .bsr-audience-heading strong{flex:0 0 auto}
  .bsr-audience-heading small{flex:0 0 100%;margin-left:0!important;text-align:left!important;
    font-size:8.5px!important;line-height:1.15}
  :root[data-style="classic"] .bsr-online-target.is-flipped{min-height:162px!important}
  .bsr-audience-breakdown{gap:6px!important}
}

/* ------------------------------------------------ 3.11.16 flip, paging, fit */

/* The card is not a button. An older classic rule was still painting a pointer
   over the whole thing, which is why the top strip read as clickable long after
   it stopped being clickable. */
:root[data-style="classic"] .bsr-online-target,
:root[data-style="classic"] .bsr-online-target[data-presence-flip],
.bsr-online-target[data-presence-flip]{cursor:default}
:root[data-style="classic"] .bsr-online-target .bsr-presence-flip-btn{cursor:pointer}

/* One title, two lengths. */
.bsr-audience-title.is-short{display:none}
@media(max-width:860px){
  .bsr-audience-title.is-long{display:none}
  .bsr-audience-title.is-short{display:inline}
}

/* Desktop: the back face had exactly as much room as it needed and not one
   pixel more, so it read as cramped top and bottom. Give the flipped card a
   little height of its own and centre the content in it. */
@media(min-width:861px){
  :root[data-style="classic"] .bsr-online-target.is-flipped{min-height:130px!important}
  .bsr-audience-breakdown{inset:10px 14px 9px!important;justify-content:center!important;gap:9px!important}
  .bsr-audience-layout{gap:11px!important}
}

/* Mobile: the short title lets the source line share the heading again, which
   takes a whole line back out of the card. The rows then need a gap from the
   heading rather than the height of an empty one below them. */
@media(max-width:860px){
  .bsr-audience-heading{flex-wrap:nowrap!important;gap:8px!important;min-height:19px}
  .bsr-audience-heading strong{flex:0 0 auto}
  .bsr-audience-heading small{flex:1 1 auto;min-width:0;margin-left:auto!important;
    text-align:right!important;font-size:8px!important}
  :root[data-style="classic"] .bsr-online-target.is-flipped{min-height:124px!important;padding-bottom:8px!important}
  .bsr-audience-breakdown{inset:8px 11px 7px!important;justify-content:flex-start!important;gap:9px!important}
  .bsr-audience-layout{gap:9px 11px!important}
  .bsr-audience-countries .bsr-audience-list{gap:4px!important}
  .bsr-audience-row{padding-bottom:7px!important}
}

/* Dots page the countries at every width; on desktop they are the only way to
   reach the rest, since there is nothing to swipe with. */
.bsr-country-pager{display:flex!important;margin-top:5px}
.bsr-country-pager button{height:5px;border:0;background:var(--line-strong)}
.bsr-country-pager button:hover{background:var(--blue-soft)}
.bsr-country-pager button.is-active{background:var(--blue)}

/* The remove control was a grey glyph in the last column of a table that
   scrolls sideways on a phone — present, but effectively invisible. Pin the
   column to the right edge and let the control look like the button it is. */
.bsr-history-table th:last-child,
.bsr-history-remove{position:sticky;right:0;z-index:2;width:42px;padding-left:6px!important;
  background:var(--surface);text-align:center}
.bsr-history-table thead th:last-child{z-index:3}
.bsr-history-remove::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;
  transform:translateX(-100%);background:linear-gradient(90deg,rgba(13,27,51,0),rgba(13,27,51,.05));
  pointer-events:none}
.bsr-history-x{display:inline-grid;place-items:center;width:24px;height:24px;
  border:1px solid var(--line-strong)!important;border-radius:7px!important;
  background:var(--surface)!important;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  transition:background .14s ease,color .14s ease,border-color .14s ease}
.bsr-history-x:hover,.bsr-history-x:focus-visible{background:var(--err-bg)!important;
  color:var(--err-text);border-color:var(--err-border)!important}
.bsr-history-x:disabled{opacity:.45;cursor:wait}
/* Says why this one has no button, instead of an unexplained dash. */
.bsr-history-live{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--est-bg);
  color:var(--est-text);font-size:9.5px;font-weight:700;cursor:help}

/* The provider marks sit under the card's refresh button, so they share its
   column: same 28px box, same right gutter. Boxes of different widths meant
   each logo landed on its own vertical line. */
.bsr-provider-badges{right:18px!important;align-items:center;gap:3px!important}
.bsr-provider-badge{width:28px!important;height:26px;display:grid!important;place-items:center;padding:0!important}
.bsr-provider-badge img{max-width:100%!important;max-height:20px!important;width:auto!important;
  height:auto!important;object-fit:contain}
.bsr-provider-badge.is-adskeeper img{max-width:24px!important;max-height:24px!important}
@media(max-width:520px){
  .bsr-provider-badges{right:14px!important;gap:3px!important}
  .bsr-provider-badge{width:24px!important;height:22px}
  .bsr-provider-badge img{max-height:17px!important}
  .bsr-provider-badge.is-adskeeper img{max-width:20px!important;max-height:20px!important}
}

/* ------------------------------------------------ 3.11.17 flipped card fit */

/* Desktop keeps one height for both faces, so turning the card over moves
   nothing on the page. A card that grows mid-flip is the thing that reads as a
   glitch, and animating the growth only makes it a slower one. The extra room
   goes to the chart on the front and to the rows on the back, not to padding. */
@media(min-width:861px){
  :root[data-style="classic"] .bsr-online-target,
  :root[data-style="classic"] .bsr-online-target.is-flipped{min-height:132px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart{height:76px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-1{height:9px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-2{height:16px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-3{height:23px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-4{height:31px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-5{height:39px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-6{height:46px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-7{height:54px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-8{height:61px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-9{height:69px!important}
  :root[data-style="classic"] .bsr-online-target .bsr-presence-chart i.is-level-10{height:76px!important}
  .bsr-audience-breakdown{inset:11px 14px 10px!important}
}

/* Mobile stays where it was; only the growth is eased, and the card below it
   moves once, with the turn, rather than snapping. */
@media(max-width:860px){
  :root[data-style="classic"] .bsr-online-target.is-flipped{min-height:124px!important}
  .bsr-audience-breakdown{inset:8px 11px 8px!important}
  :root[data-style="classic"] .bsr-online-target{
    transition:min-height .28s cubic-bezier(.2,.7,.2,1)!important}
}
@media(prefers-reduced-motion:reduce){
  :root[data-style="classic"] .bsr-online-target{transition:none!important}
}

.bsr-country-pager{margin-top:7px}

/* The hint turns the icon over rather than spinning it — a spin was the other
   half of why it read as refresh. */
@keyframes bsr-flip-hint{
  0%,55%,100%{transform:rotateY(0)}
  70%,88%{transform:rotateY(180deg)}
}
.bsr-presence-flip-btn svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.bsr-presence-flip-btn:hover svg{transform:rotateY(180deg)}

/* ------------------------------------------------ 3.11.18 chart hover, loading */

/* Hovering the chart steps the whole row back so the minute under the cursor
   can come forward. The empty minutes keep their own faint weight — lifting
   them to the dimmed level would make them more visible, not less. */
.bsr-presence-chart:hover i.is-level-1,
.bsr-presence-chart:hover i.is-level-2,
.bsr-presence-chart:hover i.is-level-3,
.bsr-presence-chart:hover i.is-level-4,
.bsr-presence-chart:hover i.is-level-5,
.bsr-presence-chart:hover i.is-level-6,
.bsr-presence-chart:hover i.is-level-7,
.bsr-presence-chart:hover i.is-level-8,
.bsr-presence-chart:hover i.is-level-9,
.bsr-presence-chart:hover i.is-level-10{opacity:.4}
.bsr-presence-chart i:hover,
.bsr-presence-chart:hover i:hover,
.bsr-presence-chart i.is-tip-open{opacity:1!important;background:var(--blue-deep)!important}

/* Bar heights change as minutes roll off the window. Easing that keeps a
   ten-second refresh from reading as the chart twitching. */
.bsr-presence-chart i{transition:height .22s cubic-bezier(.2,.7,.2,1),opacity .12s ease,background .12s ease}
@media(prefers-reduced-motion:reduce){.bsr-presence-chart i{transition:none}}

/* A silent refresh writes new numbers into the rows that are already there, so
   there is nothing left to fade. The pulse belongs to a first load only. */
.bsr-audience-breakdown.is-loading .bsr-audience-row{opacity:1}

/* ------------------------------------------------ 3.11.19 pace badge states */

/* Each reading is coloured by what it shows. Up against the same point last
   month is good news and reads green — the old badge borrowed the pace colour,
   so a month that was 109% up could appear in the amber of a behind-pace card. */
:root .bsr-target-pct.is-ahead,
:root[data-style="classic"] .bsr-target-pct.is-ahead{color:var(--green)!important;background:#e9f8ef!important}
:root .bsr-target-pct.is-behind,
:root[data-style="classic"] .bsr-target-pct.is-behind{color:var(--warn-text)!important;background:var(--warn-bg)!important}
/* Level, or nothing to compare with: neutral, never a warning colour. */
:root .bsr-target-pct.is-flat,
:root[data-style="classic"] .bsr-target-pct.is-flat{color:var(--muted)!important;background:var(--track)!important}
/* The resting badge stays brand blue whatever the reading behind it. */
:root .bsr-target-pct.is-info-only,
:root[data-style="classic"] .bsr-target-pct.is-info-only{background:var(--chip-bg)!important;color:var(--blue)!important}
:root[data-theme="dark"] .bsr-target-pct.is-ahead{background:rgba(34,197,94,.14)!important;color:#4ade80!important}
:root[data-theme="dark"] .bsr-target-pct.is-behind{background:rgba(245,158,11,.15)!important;color:#fbbf24!important}

/* ------------------------------------------------ 3.11.20 history + presence */

/* The month in progress can be removed too now, so it gets the same control as
   any other row — tinted, because removing it clears that month's goal. */
.bsr-history-x.is-live{border-color:var(--est-border)!important;color:var(--est-text)}
.bsr-history-x.is-live:hover,.bsr-history-x.is-live:focus-visible{
  background:var(--err-bg)!important;color:var(--err-text);border-color:var(--err-border)!important}
/* No card, no column. */
.bsr-goal-side[hidden],.bsr-online-standalone[hidden]{display:none!important}

/* Page-list share bars.
   They shared a grid cell with the title and were drawn as a 2px square-ended
   line with no rail, so they read as an underline struck through the text
   rather than as a measure of anything. Given their own space, a rail to be a
   fraction of, and rounded ends, they read as bars again. */
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-title{
  padding-bottom:10px!important;line-height:1.35}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-meter{
  align-self:end!important;width:100%!important;height:4px!important;
  border-radius:999px!important;background:var(--track)!important;overflow:hidden!important}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-meter i{
  height:4px!important;border-radius:999px!important;min-width:4px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue-soft))!important;
  transition:width .35s cubic-bezier(.2,.7,.2,1)}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-row{
  padding:8px 0 10px!important;border-radius:8px}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-row:hover{
  background:transparent}
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-row:hover .bsr-top-page-meter i{
  background:linear-gradient(90deg,var(--blue-deep),var(--blue))!important}
/* The leader in each list earns a slightly stronger bar. */
.bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-meter i.is-w10{
  background:linear-gradient(90deg,var(--blue-dark),var(--blue))!important}
@media(prefers-reduced-motion:reduce){
  .bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-meter i{transition:none}
}
@media(max-width:860px){
  .bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-meter{display:block!important;height:3px!important}
  .bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-meter i{height:3px!important}
  .bsr-app:not(.bsr-momentum):not(.bsr-focus):not(.bsr-mission) .bsr-top-page-title{padding-bottom:8px!important}
}

/* ------------------------------------------------ 3.11.21 lifetime + balance */

/* Sits in the space the filters leave. Both figures are slow to fetch and
   neither belongs on a card, so they get a quiet strip of their own. */
.bsr-ledger{display:flex;align-items:stretch;gap:0;margin-left:auto;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden}
.bsr-ledger[hidden]{display:none!important}
.bsr-ledger-item{display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:7px 16px;min-width:0}
.bsr-ledger-item[hidden]{display:none!important}
.bsr-ledger-item+.bsr-ledger-item{border-left:1px solid var(--line)}
.bsr-ledger-label{display:flex;align-items:baseline;gap:6px;font-size:11px;line-height:1.1;
  color:var(--muted);font-weight:600;white-space:nowrap}
.bsr-ledger-label small{font-size:9.5px;font-weight:600;color:var(--muted);opacity:.8;
  overflow:hidden;text-overflow:ellipsis;max-width:150px}
.bsr-ledger-value{display:flex;align-items:center;gap:7px;min-width:0}
.bsr-ledger-value strong{font-size:18px;line-height:1.15;font-weight:800;letter-spacing:-.02em;
  color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.bsr-ledger-marks{display:flex;align-items:center;gap:5px}
.bsr-ledger-marks img{display:block;width:17px;height:17px;object-fit:contain}
.bsr-ledger-item.is-balance .bsr-ledger-value strong{color:var(--blue-deep)}
.bsr-ledger-note{width:15px;height:15px;flex:0 0 15px;padding:0;border:0;border-radius:50%;
  background:var(--chip-bg);color:var(--blue);font:800 10px/15px Inter,ui-sans-serif,sans-serif;
  cursor:help}
.bsr-ledger-note[hidden]{display:none!important}
.bsr-ledger-note:hover,.bsr-ledger-note:focus-visible{background:var(--blue);color:#fff}

/* Below the filters on a phone, where there is no room beside them. */
@media(max-width:860px){
  .bsr-ledger{width:100%;margin-left:0;order:99}
  .bsr-ledger-item{flex:1 1 0;padding:7px 12px}
  .bsr-ledger-value strong{font-size:15px}
  .bsr-ledger-label small{max-width:90px}
}

/* Panels that come and go with the period filter fade before they give up
   their space, so the page settles once instead of blinking. */
.bsr-panel-fade{transition:opacity .26s ease,transform .26s ease}
.bsr-panel-fade.is-panel-out{opacity:0;transform:translateY(-4px);pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .bsr-panel-fade{transition:none}
  .bsr-panel-fade.is-panel-out{transform:none}
}

/* Under Engagement rates on a phone, where the filters leave no gap to fill. */
@media(max-width:860px){
  /* .bsr-main orders its children and defaults them to 6, so anything lower
     jumps the strip to the top of the page. It belongs after the last card. */
  .bsr-ledger{width:100%;margin:0 0 2px;order:20}
}

/* The label carries its own explanation now, so the sub-captions are gone and
   the control sits with the words it explains rather than with the figure. */
.bsr-ledger-label{gap:5px}
.bsr-ledger-label .bsr-ledger-note{width:14px;height:14px;flex:0 0 14px;
  font:800 9.5px/14px Inter,ui-sans-serif,sans-serif;align-self:center}
.bsr-ledger-value{gap:8px}

/* The info controls sit back until they are wanted: small, grey and quiet
   beside the label, full size and brand blue on hover. Scaled rather than
   resized, so nothing beside them shifts when they wake up. */
.bsr-ledger-label .bsr-ledger-note{
  background:transparent;color:var(--muted);opacity:.55;
  border:1px solid var(--line-strong);transform:scale(.82);transform-origin:center;
  transition:transform .15s ease,opacity .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.bsr-ledger-item:hover .bsr-ledger-label .bsr-ledger-note,
.bsr-ledger-label .bsr-ledger-note:hover,
.bsr-ledger-label .bsr-ledger-note:focus-visible{
  opacity:1;transform:none;background:var(--chip-bg);color:var(--blue);border-color:transparent}
@media(prefers-reduced-motion:reduce){.bsr-ledger-label .bsr-ledger-note{transition:none}}

/* One figure left standing needs no divider, and on a phone it should not be
   stretched across the full width as though something were missing beside it. */
.bsr-ledger-item[hidden]{display:none!important}
@media(max-width:860px){
  .bsr-ledger.is-single{width:auto;align-self:flex-start}
  .bsr-ledger.is-single .bsr-ledger-item{flex:0 1 auto}
}

/* A tapped minute should read the way a hovered one does.
   Touch has no :hover, so on a phone the chart never stepped back and every
   bar stayed at full strength with the tapped one merely a shade darker. This
   keys off the pinned bar instead, so tapping does what hovering does. The
   :not() keeps the tapped bar out of its own dimming rule. */
.bsr-presence-chart:has(i.is-tip-open) i:not(.is-tip-open){opacity:.4!important}
.bsr-presence-chart i.is-tip-open{opacity:1!important;background:var(--blue-deep)!important}

/* No padding trick for the touch target: a bar is 2-3px wide, so 1px of
   padding either side left almost nothing of it painted. The bars stay as they
   are; the chart is read, not operated, and the tooltip is a bonus. */

/* ------------------------------------------------ 3.11.32 dark chips, hover */

/* Three of the four insight tiles had their icon chip hardcoded to a light
   lavender in the classic style, with no dark counterpart — so on a dark card
   they read as white discs. The fourth looked right only because its green
   variant already had one. */
:root[data-theme="dark"][data-style="classic"] .bsr-stat.is-views .bsr-stat-icon,
:root[data-theme="dark"][data-style="classic"] .bsr-stat.is-daily .bsr-stat-icon,
:root[data-theme="dark"][data-style="classic"] .bsr-stat.is-active-peak .bsr-stat-icon,
:root[data-theme="dark"] .bsr-stat-icon{background:#16264a!important;color:#7cb0ff!important}
:root[data-theme="dark"] .bsr-stat-icon.is-green{background:#0f2e20!important;color:#34d399!important}

/* And the same again for a reader on system dark with no explicit choice. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-style="classic"] .bsr-stat.is-views .bsr-stat-icon,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-stat.is-daily .bsr-stat-icon,
  :root:not([data-theme="light"])[data-style="classic"] .bsr-stat.is-active-peak .bsr-stat-icon,
  :root:not([data-theme="light"]) .bsr-stat-icon{background:#16264a!important;color:#7cb0ff!important}
  :root:not([data-theme="light"]) .bsr-stat-icon.is-green{background:#0f2e20!important;color:#34d399!important}
  :root:not([data-theme="light"])[data-style="classic"] .bsr-stat.is-best{
    background:linear-gradient(112deg,#0f2e20 0%,var(--surface) 72%)!important}
}
:root[data-theme="dark"][data-style="classic"] .bsr-stat.is-best{
  background:linear-gradient(112deg,#0f2e20 0%,var(--surface) 72%)!important}

/* Hovering a minute should look exactly like tapping one: the same solid bar,
   not a slightly darker version of the resting colour. The pinned state exists
   for touch, where there is no hover — it is not a different reading. */
.bsr-presence-chart i:hover,
.bsr-presence-chart:hover i:hover{opacity:1!important;background:var(--blue-deep)!important}

/* ------------------------------------------------ 3.11.33 minute hover */

/* Hovering the chart used to dim every bar and light nothing, because a bar is
   two or three pixels wide with a gap either side — the pointer is in a gap
   most of the time, so :hover on the bar itself rarely landed and the chart
   read as flickering. The nearest bar is now resolved in script and carries
   .is-hot, so the hover state is the same state a tap produces. */
.bsr-presence-chart:hover i.is-level-1{opacity:.75!important}
.bsr-presence-chart:hover i.is-level-2{opacity:.78!important}
.bsr-presence-chart:hover i.is-level-3{opacity:.8!important}
.bsr-presence-chart:hover i.is-level-4{opacity:.83!important}
.bsr-presence-chart:hover i.is-level-5{opacity:.86!important}
.bsr-presence-chart:hover i.is-level-6{opacity:.88!important}
.bsr-presence-chart:hover i.is-level-7{opacity:.9!important}
.bsr-presence-chart:hover i.is-level-8{opacity:.93!important}
.bsr-presence-chart:hover i.is-level-9{opacity:.96!important}
.bsr-presence-chart:hover i.is-level-10{opacity:1!important}

/* One bar forward, the rest a step back — whether it was hovered or tapped.
   Empty minutes are left at their own faint weight: lifting them to the dimmed
   level would make them more visible, not less. */
.bsr-presence-chart:has(i.is-hot) i[class*="is-level-"]:not(.is-hot),
.bsr-presence-chart:has(i.is-tip-open) i[class*="is-level-"]:not(.is-tip-open){opacity:.4!important}
.bsr-presence-chart i.is-hot,
.bsr-presence-chart i.is-tip-open,
.bsr-presence-chart:hover i.is-hot,
.bsr-presence-chart:hover i.is-tip-open,
.bsr-presence-chart:has(i.is-hot) i.is-hot,
.bsr-presence-chart:has(i.is-tip-open) i.is-tip-open{opacity:1!important;background:var(--blue-deep)!important}
:root[data-theme="dark"] .bsr-presence-chart i.is-hot{background:var(--blue-deep)!important}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bsr-presence-chart i.is-hot{background:var(--blue-deep)!important}
}
.bsr-style-form{margin:0;display:contents}
button.bsr-style-choice{border:0;font:inherit;cursor:pointer;background:transparent;padding:0}
button.bsr-style-choice.is-active{background:var(--blue,#2563eb)}

.bsr-provider-badge.is-idle{opacity:.34;filter:grayscale(1)}
.bsr-month-total{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.bsr-month-total-text{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}.bsr-month-total-label{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--muted)}.bsr-month-total-value{font-size:20px;font-weight:800;color:var(--text)}.bsr-month-total-compare{font-size:11px;color:var(--muted)}
.bsr-month-total-marks{display:flex;align-items:center;gap:5px;flex:0 0 auto}.bsr-month-total-marks img{display:block;width:24px;height:24px;border-radius:6px;object-fit:contain}.bsr-month-total-marks img[hidden]{display:none}
.bsr-logo-image{width:40px;height:40px;border-radius:11px;object-fit:contain;display:block;background:#fff}
:root[data-style="classic"] .bsr-target-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"mid"}
.bsr-live-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 14px;margin:12px 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm,0 8px 24px rgba(15,23,42,.06))}.bsr-live-card>span{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:700}.bsr-live-card>span i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px color-mix(in srgb,#22c55e 16%,transparent)}.bsr-live-card>strong{grid-column:2;grid-row:1 / span 2;font-size:24px;font-weight:850;color:var(--text);font-variant-numeric:tabular-nums}.bsr-live-card>small{color:var(--muted);font-size:10px}.bsr-live-card[hidden]{display:none!important}