/* CoreStream Batch 5: staff analytics, referral leaderboard, welcome delivery, share preview. */
:root {
  --cs-staff-content: 78rem;
  --cs-staff-sidebar: 16.5rem;
  --cs-data-blue-2: #4FA3FF;
  --cs-data-cyan: #54D6E8;
  --cs-data-violet: #9A8BFF;
  --cs-data-neutral: #9DB0C7;
  --cs-rank-track: rgba(204,225,246,.12);
}

/* Staff shell */
.staff-app { min-height:100dvh; background:var(--cs-hero-glow),var(--cs-color-bg); }
.staff-sidebar { display:none; }
.staff-main { width:min(100%, 48rem); margin-inline:auto; padding:calc(var(--cs-space-4) + env(safe-area-inset-top)) var(--cs-space-5) calc(var(--cs-space-10) + env(safe-area-inset-bottom)); }
.staff-mobile-bar { display:flex; align-items:center; justify-content:space-between; min-height:3rem; margin-bottom:var(--cs-space-8); }
.staff-mobile-bar__logo { width:9.25rem; height:auto; }
.staff-mobile-bar__label { color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-caption); font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.staff-page { display:grid; gap:var(--cs-space-6); min-width:0; }
.staff-header { display:grid; gap:var(--cs-space-4); }
.staff-header__top { display:grid; gap:var(--cs-space-3); }
.staff-header__title { margin:0; color:var(--cs-color-text-strong); font-size:clamp(2rem,7vw,3rem); font-weight:700; letter-spacing:-.035em; line-height:1.08; }
.staff-header__support { max-width:50rem; margin:0; color:var(--cs-color-text-muted); }
.staff-controls { display:grid; grid-template-columns:1fr; gap:var(--cs-space-3); }
.staff-controls__group { display:grid; gap:var(--cs-space-2); }
.staff-controls__label { color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-caption); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.staff-segmented { display:grid; grid-template-columns:repeat(2,1fr); gap:.25rem; padding:.25rem; border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-lg); background:rgba(3,16,31,.42); }
.staff-segmented__button { min-height:2.75rem; border:0; border-radius:var(--cs-radius-md); background:transparent; color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-small); font-weight:600; cursor:pointer; }
.staff-segmented__button[aria-pressed="true"] { background:var(--cs-color-info-bg); color:var(--cs-color-light-blue); box-shadow:inset 0 0 0 1px var(--cs-color-info-line); }
.staff-footer { display:grid; gap:var(--cs-space-2); margin-top:var(--cs-space-8); padding-top:var(--cs-space-5); border-top:1px solid var(--cs-color-line); color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-caption); }
.staff-footer__links { display:flex; gap:var(--cs-space-4); flex-wrap:wrap; }
.staff-footer a { color:var(--cs-color-light-blue); }

.analytics-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--cs-space-3); }
.analytics-kpi { min-width:0; padding:var(--cs-space-4); border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-xl); background:rgba(10,42,77,.62); }
.analytics-kpi__label { display:block; min-height:2.5rem; color:var(--cs-color-text-muted); font-size:.8125rem; font-weight:500; line-height:1.4; }
.analytics-kpi__value { display:block; margin-top:var(--cs-space-2); color:var(--cs-color-text-strong); font-size:clamp(1.55rem,6vw,2.25rem); font-weight:700; letter-spacing:-.035em; line-height:1.05; font-variant-numeric:tabular-nums; }
.analytics-kpi__meta { display:flex; align-items:center; gap:var(--cs-space-2); margin-top:var(--cs-space-2); color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-caption); line-height:1.45; }
.analytics-kpi__delta { color:var(--cs-color-success-text); font-weight:600; }
.analytics-kpi__delta--neutral { color:var(--cs-color-light-blue); }
.analytics-kpi__delta--warning { color:var(--cs-color-warning-text); }
.analytics-grid { display:grid; gap:var(--cs-space-4); }
.analytics-card { min-width:0; padding:var(--cs-space-5); border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-2xl); background:rgba(10,42,77,.58); }
.analytics-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--cs-space-4); margin-bottom:var(--cs-space-5); }
.analytics-card__title { margin:0; color:var(--cs-color-text-strong); font-size:var(--cs-font-size-h3); font-weight:600; }
.analytics-card__support { margin:.2rem 0 0; color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-small); }
.analytics-card__metric { color:var(--cs-color-light-blue); font-size:var(--cs-font-size-small); font-weight:600; white-space:nowrap; }
.analytics-funnel { display:grid; gap:var(--cs-space-3); }
.analytics-funnel__row { display:grid; grid-template-columns:7.5rem minmax(0,1fr) 4.5rem; gap:var(--cs-space-3); align-items:center; }
.analytics-funnel__label { color:var(--cs-color-text-muted); font-size:.8125rem; font-weight:500; }
.analytics-funnel__bar { position:relative; height:2rem; overflow:hidden; border-radius:var(--cs-radius-sm); background:rgba(204,225,246,.08); }
.analytics-funnel__fill { display:block; height:100%; width:var(--width); border-radius:inherit; background:linear-gradient(90deg,var(--cs-color-primary),var(--cs-data-blue-2)); }
.analytics-funnel__fill[data-tone="milestone"] { background:linear-gradient(90deg,var(--cs-data-cyan),var(--cs-color-primary)); }
.analytics-funnel__value { text-align:end; color:var(--cs-color-text-strong); font-size:.8125rem; font-weight:600; font-variant-numeric:tabular-nums; }
.analytics-funnel__rate { display:block; color:var(--cs-color-text-subtle); font-size:.6875rem; font-weight:400; }
.analytics-split { display:grid; gap:var(--cs-space-3); }
.analytics-split__row { display:grid; grid-template-columns:minmax(5.5rem,auto) minmax(0,1fr) 3.5rem; gap:var(--cs-space-3); align-items:center; }
.analytics-split__label { color:var(--cs-color-text-muted); font-size:.8125rem; }
.analytics-split__track { height:.5rem; overflow:hidden; border-radius:999px; background:rgba(204,225,246,.1); }
.analytics-split__fill { display:block; height:100%; width:var(--width); border-radius:inherit; background:var(--cs-color-primary); }
.analytics-split__fill[data-series="source"] { background:var(--cs-data-cyan); }
.analytics-split__value { color:var(--cs-color-text); font-size:.8125rem; font-weight:600; text-align:end; font-variant-numeric:tabular-nums; }
.analytics-trend { width:100%; height:auto; min-height:13rem; }
.analytics-trend .grid { stroke:var(--cs-color-chart-grid); stroke-width:1; }
.analytics-trend .line-a { fill:none; stroke:var(--cs-color-primary); stroke-width:3; vector-effect:non-scaling-stroke; }
.analytics-trend .line-b { fill:none; stroke:var(--cs-data-cyan); stroke-width:3; vector-effect:non-scaling-stroke; }
.analytics-trend .area-a { fill:rgba(1,126,255,.12); }
.analytics-legend { display:flex; flex-wrap:wrap; gap:var(--cs-space-4); margin-top:var(--cs-space-3); color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-caption); }
.analytics-legend__item { display:flex; align-items:center; gap:var(--cs-space-2); }
.analytics-legend__swatch { width:.75rem; height:.2rem; border-radius:999px; background:var(--cs-color-primary); }
.analytics-legend__swatch--b { background:var(--cs-data-cyan); }
.analytics-tables { display:grid; gap:var(--cs-space-4); }
.data-table-wrap { overflow-x:auto; border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-xl); }
.data-table { width:100%; min-width:42rem; border-collapse:collapse; font-size:.8125rem; }
.data-table caption { padding:var(--cs-space-4); color:var(--cs-color-text-strong); font-size:var(--cs-font-size-body); font-weight:600; text-align:start; }
.data-table th, .data-table td { padding:.8rem var(--cs-space-4); border-top:1px solid var(--cs-color-line-subtle); text-align:start; }
.data-table th { color:var(--cs-color-text-subtle); font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.data-table td { color:var(--cs-color-text-muted); font-variant-numeric:tabular-nums; }
.data-table td:first-child { color:var(--cs-color-text); font-weight:600; }
.data-table .numeric { text-align:end; }
.analytics-state { display:grid; justify-items:start; gap:var(--cs-space-4); padding:var(--cs-space-8); border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-2xl); background:rgba(10,42,77,.42); }
.analytics-state__icon { display:grid; place-items:center; width:3.5rem; height:3.5rem; border:1px solid var(--cs-color-info-line); border-radius:50%; background:var(--cs-color-info-bg); color:var(--cs-color-primary); }
.analytics-state__icon svg { width:1.75rem; height:1.75rem; }
.analytics-state__title { margin:0; color:var(--cs-color-text-strong); font-size:var(--cs-font-size-h2); font-weight:600; }
.analytics-state__body { margin:0; max-width:40rem; color:var(--cs-color-text-muted); }
.analytics-skeleton { display:grid; gap:var(--cs-space-4); }
.analytics-skeleton__block { min-height:8rem; border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-xl); background:linear-gradient(90deg,rgba(204,225,246,.05),rgba(204,225,246,.11),rgba(204,225,246,.05)); background-size:220% 100%; animation:cs-skeleton 1.5s linear infinite; }
@keyframes cs-skeleton { to { background-position:-220% 0; } }

/* Leaderboard */
.leaderboard-summary { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--cs-space-4); align-items:center; padding:var(--cs-space-5); border:1px solid var(--cs-color-info-line); border-radius:var(--cs-radius-2xl); background:var(--cs-color-info-bg); }
.leaderboard-summary__rank { display:grid; place-items:center; width:4rem; height:4rem; border:1px solid rgba(204,225,246,.32); border-radius:50%; background:rgba(3,16,31,.42); color:var(--cs-color-text-strong); font-size:1.75rem; font-weight:700; font-variant-numeric:tabular-nums; }
.leaderboard-summary__eyebrow { color:var(--cs-color-light-blue); font-size:var(--cs-font-size-caption); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.leaderboard-summary__title { margin:.1rem 0 0; color:var(--cs-color-text-strong); font-size:var(--cs-font-size-h3); font-weight:600; }
.leaderboard-summary__body { margin:.25rem 0 0; color:var(--cs-color-text-muted); font-size:var(--cs-font-size-small); }
.leaderboard-progress { margin-top:var(--cs-space-3); }
.leaderboard-progress__track { display:block; height:.5rem; overflow:hidden; border-radius:999px; background:var(--cs-rank-track); }
.leaderboard-progress__fill { display:block; width:var(--progress); height:100%; border-radius:inherit; background:var(--cs-color-primary); }
.leaderboard-list { display:grid; gap:var(--cs-space-3); }
.leaderboard-row { display:grid; grid-template-columns:2.5rem 2.5rem minmax(0,1fr) auto; gap:var(--cs-space-3); align-items:center; min-width:0; padding:var(--cs-space-4); border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-xl); background:rgba(10,42,77,.54); }
.leaderboard-row[data-member="true"] { border-color:var(--cs-color-info-line); background:rgba(1,126,255,.11); box-shadow:inset 3px 0 0 var(--cs-color-primary); }
.leaderboard-row__rank { color:var(--cs-color-text-muted); font-size:var(--cs-font-size-body); font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.leaderboard-row__avatar { display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid var(--cs-color-line-strong); border-radius:50%; background:rgba(3,16,31,.48); color:var(--cs-color-light-blue); font-size:.75rem; font-weight:700; }
.leaderboard-row__identity { min-width:0; }
.leaderboard-row__handle { display:flex; align-items:center; gap:var(--cs-space-2); margin:0; color:var(--cs-color-text); font-size:var(--cs-font-size-small); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-row__meta { margin:.1rem 0 0; color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-caption); }
.leaderboard-row__score { text-align:end; }
.leaderboard-row__value { display:block; color:var(--cs-color-text-strong); font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums; }
.leaderboard-row__label { display:block; color:var(--cs-color-text-subtle); font-size:.6875rem; }
.leaderboard-period { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--cs-space-2); max-width:18rem; }

/* Welcome delivery partial */
.welcome-delivery { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--cs-space-4); padding:var(--cs-space-5); border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-2xl); background:linear-gradient(160deg,rgba(14,58,92,.62),rgba(10,42,77,.84)); }
.welcome-delivery[data-state="ready"] { border-color:var(--cs-color-info-line); }
.welcome-delivery__icon { display:grid; place-items:center; width:3.25rem; height:3.25rem; border:1px solid var(--cs-color-line-strong); border-radius:50%; background:rgba(3,16,31,.46); color:var(--cs-color-light-blue); }
.welcome-delivery[data-state="ready"] .welcome-delivery__icon { border-color:var(--cs-color-info-line); background:var(--cs-color-info-bg); color:var(--cs-color-primary); }
.welcome-delivery__icon svg { width:1.5rem; height:1.5rem; }
.welcome-delivery__content { min-width:0; }
.welcome-delivery__head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--cs-space-3); }
.welcome-delivery__title { margin:0; color:var(--cs-color-text-strong); font-size:var(--cs-font-size-h3); font-weight:600; }
.welcome-delivery__body { margin:.35rem 0 0; color:var(--cs-color-text-muted); font-size:var(--cs-font-size-small); }
.welcome-delivery__meta { display:flex; flex-wrap:wrap; gap:var(--cs-space-3); margin-top:var(--cs-space-3); color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-caption); }
.welcome-delivery__actions { display:grid; grid-template-columns:1fr; gap:var(--cs-space-3); margin-top:var(--cs-space-4); }

/* Share card preview page */
.share-preview-grid { display:grid; gap:var(--cs-space-5); }
.share-preview-card { display:grid; gap:var(--cs-space-3); padding:var(--cs-space-4); border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-2xl); background:rgba(10,42,77,.5); }
.share-preview-card img { width:100%; height:auto; border-radius:var(--cs-radius-xl); }
.share-preview-card__title { margin:0; color:var(--cs-color-text-strong); font-size:var(--cs-font-size-h3); }
.share-preview-card__meta { margin:0; color:var(--cs-color-text-subtle); font-size:var(--cs-font-size-small); }

@media (min-width:48rem) {
  .staff-controls { grid-template-columns:minmax(12rem,18rem) minmax(15rem,20rem); justify-content:end; }
  .welcome-delivery__actions { grid-template-columns:auto auto; justify-content:start; }
  .share-preview-grid { grid-template-columns:1fr 1fr; align-items:start; }
}
@media (min-width:56.25rem) {
  .staff-app { display:grid; grid-template-columns:var(--cs-staff-sidebar) minmax(0,1fr); }
  .staff-sidebar { position:sticky; inset-block-start:0; display:flex; flex-direction:column; height:100dvh; padding:var(--cs-space-8) var(--cs-space-5); border-inline-end:1px solid var(--cs-color-line); background:rgba(3,16,31,.98); }
  .staff-sidebar__logo { width:10.5rem; margin-bottom:var(--cs-space-10); }
  .staff-sidebar__label { margin:0 0 var(--cs-space-2); color:var(--cs-color-text-subtle); font-size:.6875rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
  .staff-sidebar__link { display:flex; align-items:center; gap:var(--cs-space-3); min-height:2.75rem; padding:0 var(--cs-space-3); border-radius:var(--cs-radius-md); color:var(--cs-color-text-muted); font-size:var(--cs-font-size-small); font-weight:500; text-decoration:none; }
  .staff-sidebar__link svg { width:1.25rem; height:1.25rem; }
  .staff-sidebar__link[aria-current="page"] { background:rgba(1,126,255,.14); color:var(--cs-color-light-blue); }
  .staff-sidebar__profile { margin-top:auto; padding:var(--cs-space-3); border:1px solid var(--cs-color-line); border-radius:var(--cs-radius-xl); background:rgba(10,42,77,.42); color:var(--cs-color-text-muted); font-size:var(--cs-font-size-small); }
  .staff-sidebar__profile strong { display:block; color:var(--cs-color-text); }
  .staff-main { width:min(100%,var(--cs-staff-content)); padding:var(--cs-space-12) var(--cs-space-8) var(--cs-space-16); }
  .staff-mobile-bar { display:none; }
  .staff-header { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
  .analytics-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--cs-space-4); }
  .analytics-grid--top { grid-template-columns:minmax(0,1.45fr) minmax(18rem,.75fr); }
  .analytics-grid--splits { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .analytics-tables { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .leaderboard-row { grid-template-columns:3rem 2.75rem minmax(0,1fr) 8rem; padding:var(--cs-space-4) var(--cs-space-5); }
}
@media (prefers-reduced-motion:reduce) { .analytics-skeleton__block { animation:none; } }