/* =========================================================================
   creato-share-web · component design system
   Tokens + base reset live in index.html <style>; this file owns components.
   ========================================================================= */

/* ---------- Layout primitives ---------- */
.csw-app {
  min-height: 100vh;
  background: var(--bg);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.csw-stack { display: flex; flex-direction: column; }
.csw-row   { display: flex; align-items: center; }
.csw-spacer { flex: 1; }

/* ---------- App header ---------- */
.csw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) {
  .csw-header { background: rgba(11, 16, 32, .72); }
}
.csw-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  text-decoration: none;
  font-size: 15px;
}
.csw-header__brand-mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-sm);
}
.csw-header__crumb {
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------- Status / state shell ---------- */
.csw-status {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.csw-status-card {
  width: 100%;
  max-width: 520px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: csw-fade-in-up var(--dur-med) var(--ease-out) both;
}
.csw-status-card__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
}
.csw-status-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.csw-status-card p {
  margin: 0;
  color: var(--ink-2);
}
.csw-status-card__cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: var(--ink-1);
  color: var(--ink-inverse);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.csw-status-card__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.csw-status-card--danger .csw-status-card__icon { background: var(--danger-soft); color: var(--danger); }
.csw-status-card--warning .csw-status-card__icon { background: var(--warning-soft); color: var(--warning); }

.csw-spinner {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  margin: 0 auto 14px;
  animation: csw-spin 800ms linear infinite;
}

/* Loading skeleton */
.csw-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.csw-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.55) 50%,
    transparent 100%);
  animation: csw-shimmer 1.4s var(--ease-out) infinite;
}
@media (prefers-color-scheme: dark) {
  .csw-skeleton::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  }
}

/* ---------- Email gate ---------- */
.csw-gate {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: csw-fade-in-up var(--dur-med) var(--ease-out) both;
}
.csw-gate__header {
  position: relative;
  padding: 26px 28px 22px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.18), transparent 55%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  overflow: hidden;
}
.csw-gate__header::after {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%);
  filter: blur(8px);
  pointer-events: none;
}
.csw-gate__org {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-pill);
  font-size: 13px;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
}
.csw-gate__org img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.csw-gate__title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.csw-gate__subtitle {
  margin: 0;
  opacity: .9;
}
.csw-gate__body {
  padding: 22px 28px 26px;
}
.csw-gate__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.csw-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 15px;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink-1);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.csw-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(1,88,155,.18);
}
.csw-gate__error {
  margin: 8px 0 0;
  color: var(--danger);
  font-size: 13px;
}
.csw-gate__cta {
  margin-top: 14px;
  width: 100%;
  padding: 12px 16px;
  background: var(--ink-1);
  color: var(--ink-inverse);
  border: 0;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.csw-gate__cta:hover { transform: translateY(-1px); background: #000; }
.csw-gate__cta:disabled { opacity: .65; cursor: progress; }
.csw-gate__hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-3);
}

/* ---------- Page shell (kit/report) ---------- */
.csw-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 22px 80px;
  width: 100%;
  min-width: 0;
}
@media (max-width: 720px) {
  .csw-shell { padding: 16px 12px 60px; }
}

/* ---------- Org strip ---------- */
.csw-org-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  animation: csw-fade-in-up var(--dur-med) var(--ease-out) both;
}
.csw-org-strip__logo {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.csw-org-strip__label { color: var(--ink-3); margin-right: 2px; }
.csw-org-strip__name { font-weight: 600; color: var(--ink-1); }
.csw-org-strip__link {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.csw-org-strip__link:hover { text-decoration: underline; }

/* ---------- Event banner ---------- */
.csw-event-banner {
  position: relative;
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, #18203b, #0b3b6e);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}
.csw-event-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  background-size: 200% 100%;
  animation: csw-ribbon 6s linear infinite;
}
.csw-event-banner__pill {
  position: relative;
  background: rgba(255,255,255,.18);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.csw-event-banner__name {
  position: relative;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.csw-event-banner__loc {
  position: relative;
  margin: 0;
  font-size: 13px;
  opacity: .8;
}

/* ---------- Creator switcher ---------- */
.csw-switcher {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  scrollbar-width: none;
}
.csw-switcher::-webkit-scrollbar { display: none; }
.csw-switcher__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.csw-switcher__pill:hover { background: var(--surface-2); color: var(--ink-1); }
.csw-switcher__pill[aria-pressed="true"] {
  background: var(--ink-1);
  color: var(--ink-inverse);
}
.csw-switcher__pill[aria-pressed="true"] .csw-switcher__avatar { box-shadow: 0 0 0 2px var(--ink-inverse); }
.csw-switcher__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  flex-shrink: 0;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

/* ---------- Document (creator body) ---------- */
.csw-doc {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.csw-doc--switching { animation: csw-fade-in var(--dur-med) var(--ease-out) both; }

/* ---------- Hero ---------- */
.csw-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  gap: 28px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.csw-hero::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 200% 100%;
  animation: csw-ribbon 8s linear infinite;
}
.csw-hero__content { min-width: 0; }
.csw-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.csw-hero__eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.csw-hero__name {
  margin: 0 0 12px;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--ink-1);
}
.csw-hero__bio {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
}
.csw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.csw-hero__photo-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  min-height: 320px;
  animation: csw-pop-in var(--dur-slow) var(--ease-spring) both;
}
.csw-hero__photo {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
.csw-hero:hover .csw-hero__photo { transform: scale(1.03); }
.csw-hero__photo-glow {
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 60%;
  background: radial-gradient(ellipse at top, var(--accent-soft), transparent 70%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .csw-hero { grid-template-columns: 1fr; padding: 22px; }
  .csw-hero__photo-wrap { min-height: 240px; }
  .csw-hero__photo { min-height: 240px; }
}

/* ---------- Social pills ---------- */
.csw-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.csw-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.csw-social-pill:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.csw-social-pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
}
.csw-social-pill--ig .csw-social-pill__dot { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.csw-social-pill--tt .csw-social-pill__dot { background: linear-gradient(135deg, #25f4ee, #fe2c55); }
.csw-social-pill--yt .csw-social-pill__dot { background: #ff0033; }

/* ---------- Buttons ---------- */
.csw-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.csw-btn--primary {
  background: var(--ink-1);
  color: var(--ink-inverse);
  border-color: var(--ink-1);
}
.csw-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.csw-btn--ghost {
  background: var(--surface);
  color: var(--ink-1);
  border-color: var(--border);
}
.csw-btn--ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.csw-btn--accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.csw-btn--accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); }

/* ---------- Section ---------- */
.csw-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  max-width: 100%;
}
.csw-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}
.csw-section__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.csw-section__sub {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .csw-section { padding: 18px; border-radius: var(--r-lg); }
}

/* ---------- Platform strip ---------- */
.csw-platform-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.csw-platform {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-right: 1px solid var(--border);
  position: relative;
}
.csw-platform:last-child { border-right: 0; }
.csw-platform__icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.csw-platform--ig .csw-platform__icon { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.csw-platform--tt .csw-platform__icon { background: linear-gradient(135deg, #25f4ee, #000, #fe2c55); }
.csw-platform--yt .csw-platform__icon { background: #ff0033; }
.csw-platform__meta { display: flex; flex-direction: column; min-width: 0; }
.csw-platform__count {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.csw-platform__label {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}
.csw-platform__handle {
  font-size: 12px;
  color: var(--accent);
  margin-top: 4px;
  text-decoration: none;
  font-weight: 600;
}
.csw-platform__handle:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .csw-platform-strip { grid-template-columns: 1fr 1fr; }
  .csw-platform { border-right: 0; border-bottom: 1px solid var(--border); }
  .csw-platform:nth-last-child(-n+2):nth-child(odd) { border-right: 1px solid var(--border); }
  .csw-platform:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---------- KPI grid ---------- */
.csw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.csw-kpi {
  position: relative;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.csw-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.csw-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 100% 0%, var(--accent-soft), transparent 55%);
  opacity: .8;
  pointer-events: none;
}
.csw-kpi__label {
  position: relative;
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.csw-kpi__value {
  position: relative;
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.csw-kpi__delta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--success);
  font-weight: 600;
}
.csw-kpi__delta--down { color: var(--danger); }
.csw-kpi__hint {
  position: relative;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
}

/* ---------- Sparkline ---------- */
.csw-sparkline {
  width: 100%;
  height: 56px;
  display: block;
  overflow: visible;
}
.csw-sparkline__path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.csw-sparkline__area { fill: var(--accent-soft); opacity: .8; }
.csw-sparkline__dot { fill: var(--accent); }

/* ---------- Bars ---------- */
.csw-bars { display: grid; gap: 10px; }
.csw-bar {
  display: grid;
  grid-template-columns: 110px 1fr 56px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.csw-bar__label { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csw-bar__track {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.csw-bar__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: var(--r-pill);
  transition: width 1.1s var(--ease-out);
}
[data-revealed="true"] .csw-bar__fill { width: var(--bar-width, 0%); }
.csw-bar__value { font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; font-weight: 600; }

/* ---------- Donut (gender split) ---------- */
.csw-donut { width: 120px; height: 120px; transform: rotate(-90deg); }
.csw-donut__track { fill: none; stroke: var(--surface-3); stroke-width: 12; }
.csw-donut__seg { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray 1.1s var(--ease-out); }
.csw-donut__center {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.csw-donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}
.csw-donut-wrap__legend { display: grid; gap: 6px; font-size: 13px; }
.csw-donut-wrap__legend-row { display: flex; align-items: center; gap: 8px; }
.csw-donut-wrap__legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* ---------- Demographic columns ---------- */
.csw-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.csw-demo-col__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

/* ---------- Tabs ---------- */
.csw-tabs {
  display: inline-flex;
  background: var(--surface-2);
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.csw-tab {
  padding: 7px 14px;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.csw-tab:hover { color: var(--ink-1); }
.csw-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink-1);
  box-shadow: var(--shadow-sm);
}

/* ---------- Content rows (row header) ---------- */
.csw-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 18px 0 10px;
}
.csw-row-head__count {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Horizontal content rows: outer clips page width; inner is flex + max-content. */
.csw-content-strip-outer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 2px 0 14px;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.csw-content-strip-outer::-webkit-scrollbar { height: 8px; }
.csw-content-strip-outer::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
}
.csw-content-strip-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  padding: 2px 2px 4px;
}
.csw-content-strip--empty {
  width: 100%;
  max-width: 100%;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
}

/* Card */
.csw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 220px;
  max-width: min(220px, calc(100vw - 48px));
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@media (max-width: 720px) {
  .csw-content-strip-inner .csw-card {
    width: min(300px, calc(100vw - 40px));
    max-width: min(300px, calc(100vw - 40px));
  }
}
.csw-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.csw-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--surface-3);
  overflow: hidden;
}
.csw-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
.csw-card:hover .csw-card__media img { transform: scale(1.06); }
.csw-card__platform {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  background: rgba(11,16,32,.78);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  backdrop-filter: blur(8px);
}
.csw-card__platform--ig { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.csw-card__platform--tt { background: linear-gradient(135deg, #25f4ee, #000, #fe2c55); }
.csw-card__platform--yt { background: #ff0033; }

/* Per-content analytics strip below the media */
.csw-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  padding: 12px 14px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.csw-card__stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-1);
}
.csw-card__stat-icon { color: var(--ink-3); font-size: 12px; }
.csw-card__stat-value { font-weight: 700; }
.csw-card__stat-label {
  color: var(--ink-3);
  font-size: 11px;
  margin-left: 2px;
}

/* ---------- Top videos / featured rows ---------- */
.csw-top-list { display: grid; gap: 10px; }
.csw-top-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.csw-top-item:hover { background: var(--surface-2); }
.csw-top-item__thumb {
  width: 96px; height: 64px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  object-fit: cover;
  overflow: hidden;
}
.csw-top-item__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.csw-top-item__meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}
.csw-top-item__views {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}

/* ---------- Footer ---------- */
.csw-footer {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: 12px;
}
.csw-footer a { color: var(--ink-2); text-decoration: none; }
.csw-footer a:hover { text-decoration: underline; }

/* ---------- Landing ---------- */
.csw-landing {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(60% 60% at 50% 0%, var(--accent-soft), transparent 70%), var(--bg);
}
.csw-landing__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px;
  max-width: 560px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.csw-landing__mark {
  width: 56px; height: 56px;
  border-radius: 16px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-glow);
}
.csw-landing__card h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -0.02em; }
.csw-landing__card p { margin: 0 0 12px; color: var(--ink-2); }
.csw-landing__code {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* ---------- Coming-soon (report placeholder) ---------- */
.csw-coming {
  text-align: center;
  padding: 60px 28px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 60% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.csw-coming__pill {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 14px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.csw-coming h1 { margin: 0 0 10px; font-size: 32px; letter-spacing: -0.02em; }
.csw-coming p { margin: 0 auto; max-width: 440px; color: var(--ink-2); }