/* CYRUS CRYSTAL 4.0.44
 * Rein visuelles Theme. Keine Layout-, Abstands-, Groessen- oder DOM-Regeln.
 * Die Plattformfarbe wird von dashboard-runtime.js als --cg-platform gesetzt.
 */

html.cg-crystal {
  color-scheme: dark;
  background: #07090f;
}

html.cg-crystal body {
  background: #07090f;
  color: #f7f8fb;
  font-family: "Avenir Next", "Segoe UI Variable Text", "SF Pro Text", "Segoe UI", Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

html.cg-crystal body .main-content,
html.cg-crystal body .main-content.cg-advanced,
html.cg-crystal body .main-content.cg-overview {
  background:
    radial-gradient(circle at 88% -10%, color-mix(in srgb, var(--cg-platform) 16%, transparent), transparent 48%),
    radial-gradient(circle at 16% 112%, rgba(92, 67, 255, .09), transparent 37%),
    radial-gradient(circle at 74% 118%, rgba(255, 151, 15, .06), transparent 31%),
    linear-gradient(145deg, #090a10, #07080d 62%, #09090f);
  color: #f7f8fb;
  font-family: "Avenir Next", "Segoe UI Variable Text", "SF Pro Text", "Segoe UI", Inter, Arial, sans-serif;
}

html.cg-crystal body .side {
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--cg-platform) 11%, transparent), transparent 35%),
    rgba(8, 10, 16, .84);
  border-color: rgba(255,255,255,.11);
  box-shadow: inset -1px 0 rgba(255,255,255,.035), 18px 0 56px rgba(0,0,0,.17);
  -webkit-backdrop-filter: blur(34px) saturate(145%);
  backdrop-filter: blur(34px) saturate(145%);
}

html.cg-crystal body .side .brand,
html.cg-crystal body .side .side-foot {
  border-color: rgba(255,255,255,.11);
}

html.cg-crystal body .side nav a {
  --cg-nav-color: var(--nav-color, var(--nav, var(--cg-platform)));
  border-color: transparent;
  background: transparent;
  color: #9aa2b1;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

html.cg-crystal body .side nav a:hover,
html.cg-crystal body .side nav a.active,
html.cg-crystal body .side nav a.nav-platform:hover,
html.cg-crystal body .side nav a.nav-platform.active {
  border-color: color-mix(in srgb, var(--cg-nav-color) 34%, transparent);
  background:
    linear-gradient(104deg, color-mix(in srgb, var(--cg-nav-color) 17%, transparent), rgba(255,255,255,.035) 70%, transparent),
    rgba(255,255,255,.025);
  color: #fff;
  box-shadow:
    inset 3px 0 0 var(--cg-nav-color),
    inset 0 1px rgba(255,255,255,.13),
    0 12px 30px rgba(0,0,0,.23),
    0 0 24px color-mix(in srgb, var(--cg-nav-color) 8%, transparent);
  filter: brightness(1.05);
}

html.cg-crystal body .side nav a svg {
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--cg-nav-color) 55%, transparent));
}

html.cg-crystal body .cg-kicker,
html.cg-crystal body .ov-head > div > span,
html.cg-crystal body .ov-section-head span,
html.cg-crystal body .eyebrow {
  color: #ff9e1f;
  text-shadow: 0 0 18px rgba(255,151,15,.12);
}

html.cg-crystal body .cg-head h1,
html.cg-crystal body .cg-brand b,
html.cg-crystal body .cg-metric strong,
html.cg-crystal body .cg-detail-stat strong,
html.cg-crystal body .cg-panel-head h2,
html.cg-crystal body .ov-head h1,
html.cg-crystal body .ov-section-head h2,
html.cg-crystal body .ov-totals article > strong,
html.cg-crystal body .metric-card strong,
html.cg-crystal body .panel h2 {
  font-family: "Avenir Next", "Segoe UI Variable Display", "SF Pro Display", "Segoe UI", Arial, sans-serif;
  text-shadow: 0 1px 18px rgba(255,255,255,.025);
}

html.cg-crystal body .cg-metric,
html.cg-crystal body .cg-panel,
html.cg-crystal body .cg-detail-stat,
html.cg-crystal body .cg-detail-breakdown,
html.cg-crystal body .cg-reconciliation,
html.cg-crystal body .ov-connections,
html.cg-crystal body .ov-panel,
html.cg-crystal body .ov-totals article,
html.cg-crystal body .ov-skeleton,
html.cg-crystal body .ov-insights article,
html.cg-crystal body .metric-card,
html.cg-crystal body .panel,
html.cg-crystal body .platform-hero,
html.cg-crystal body .platform-connect,
html.cg-crystal body .connection-card {
  background:
    linear-gradient(132deg, rgba(255,255,255,.145), rgba(255,255,255,.035) 18%, transparent 37%),
    radial-gradient(circle at 12% -4%, color-mix(in srgb, var(--cg-platform) 16%, transparent), transparent 40%),
    linear-gradient(145deg, rgba(37,41,52,.69), rgba(12,14,20,.78));
  border-color: rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.32);
  border-left-color: rgba(255,255,255,.24);
  border-radius: 20px;
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    inset 1px 0 rgba(255,255,255,.045),
    inset 0 -1px rgba(0,0,0,.48),
    0 20px 52px rgba(0,0,0,.29),
    0 1px 3px rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(31px) saturate(165%);
  backdrop-filter: blur(31px) saturate(165%);
  transition: background .2s ease, border-color .18s ease, box-shadow .2s ease, filter .18s ease;
}

html.cg-crystal body .cg-metric:hover,
html.cg-crystal body .cg-panel:hover,
html.cg-crystal body .cg-detail-stat:hover,
html.cg-crystal body .cg-detail-breakdown:hover,
html.cg-crystal body .ov-panel:hover,
html.cg-crystal body .ov-totals article:hover,
html.cg-crystal body .metric-card:hover,
html.cg-crystal body .panel:hover {
  border-color: color-mix(in srgb, var(--cg-platform) 29%, rgba(255,255,255,.19));
  border-top-color: rgba(255,255,255,.42);
  box-shadow:
    inset 0 1px rgba(255,255,255,.24),
    inset 1px 0 rgba(255,255,255,.065),
    inset 0 -1px rgba(0,0,0,.48),
    0 23px 60px rgba(0,0,0,.34),
    0 0 30px color-mix(in srgb, var(--cg-platform) 7%, transparent);
  filter: brightness(1.025);
}

html.cg-crystal body .cg-content-card,
html.cg-crystal body .cg-stream-card,
html.cg-crystal body .cg-tiktok-card,
html.cg-crystal body .cg-social-card,
html.cg-crystal body .content-row {
  background:
    linear-gradient(130deg, rgba(255,255,255,.09), transparent 27%),
    radial-gradient(circle at 4% -8%, color-mix(in srgb, var(--cg-platform) 12%, transparent), transparent 35%),
    linear-gradient(145deg, rgba(27,30,39,.71), rgba(9,11,16,.8));
  border-color: rgba(255,255,255,.15);
  border-top-color: rgba(255,255,255,.25);
  border-radius: 17px;
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 14px 35px rgba(0,0,0,.24);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  transition: background .18s ease, border-color .16s ease, box-shadow .18s ease, filter .16s ease;
}

html.cg-crystal body .cg-content-card:hover,
html.cg-crystal body .cg-stream-card:hover,
html.cg-crystal body .cg-tiktok-card:hover,
html.cg-crystal body .cg-social-card:hover,
html.cg-crystal body .content-row:hover {
  border-color: color-mix(in srgb, var(--cg-platform) 45%, rgba(255,255,255,.2));
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 16px 40px rgba(0,0,0,.3), 0 0 24px color-mix(in srgb, var(--cg-platform) 7%, transparent);
  filter: brightness(1.04);
}

html.cg-crystal body .cg-range select,
html.cg-crystal body .cg-filters input,
html.cg-crystal body .cg-filters select,
html.cg-crystal body .cg-view-switch,
html.cg-crystal body .cg-segments,
html.cg-crystal body .ov-head select,
html.cg-crystal body .date-button,
html.cg-crystal body .period-pill,
html.cg-crystal body .top-actions button {
  background:
    linear-gradient(135deg, rgba(255,255,255,.105), transparent 38%),
    rgba(22,25,33,.72);
  border-color: rgba(255,255,255,.19);
  border-top-color: rgba(255,255,255,.31);
  border-radius: 14px;
  color: #f7f8fb;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 30px rgba(0,0,0,.23);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

html.cg-crystal body .cg-view-switch button.active,
html.cg-crystal body .cg-segments button.active {
  background: color-mix(in srgb, var(--cg-platform) 18%, rgba(255,255,255,.055));
  color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cg-platform) 38%, transparent), 0 0 22px color-mix(in srgb, var(--cg-platform) 7%, transparent);
}

html.cg-crystal body .cg-tooltip,
html.cg-crystal body .ov-tooltip {
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), transparent 35%),
    rgba(8,10,16,.9);
  border-color: rgba(255,255,255,.24);
  border-top-color: rgba(255,255,255,.39);
  border-radius: 14px;
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 18px 45px rgba(0,0,0,.48);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  backdrop-filter: blur(30px) saturate(155%);
}

html.cg-crystal body .cg-chart polyline,
html.cg-crystal body .ov-chart polyline,
html.cg-crystal body .spark polyline {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cg-platform) 52%, transparent));
}

html.cg-crystal body .cg-chart line,
html.cg-crystal body .ov-chart line {
  opacity: .78;
}

html.cg-crystal body .cg-detail-media,
html.cg-crystal body .cg-thumb,
html.cg-crystal body .cg-stream-thumb,
html.cg-crystal body .cg-tiktok-thumb,
html.cg-crystal body .cg-social-card.with-image > img {
  background: #06070b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 12px 30px rgba(0,0,0,.28);
  filter: saturate(1.04) contrast(1.02);
}

html.cg-crystal body .cg-alert,
html.cg-crystal body .ov-alert {
  background: linear-gradient(135deg, rgba(255,151,15,.15), rgba(255,151,15,.055));
  border-color: rgba(255,166,54,.48);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 13px 32px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* CG-CONDITIONAL-SCROLLBARS-BEGIN
 * Technisch noetige Scrollleisten werden von dashboard-runtime.js markiert.
 */
html.cg-crystal,
html.cg-crystal body,
html.cg-crystal body * {
  scrollbar-width: none;
}

html.cg-crystal::-webkit-scrollbar,
html.cg-crystal body::-webkit-scrollbar,
html.cg-crystal body *::-webkit-scrollbar {
  width: 0;
  height: 0;
}

html.cg-crystal.cg-scroll-y,
html.cg-crystal body.cg-scroll-y,
html.cg-crystal body .cg-scroll-y,
html.cg-crystal.cg-scroll-x,
html.cg-crystal body.cg-scroll-x,
html.cg-crystal body .cg-scroll-x {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cg-platform) 78%, white 12%) transparent;
}

html.cg-crystal.cg-scroll-y::-webkit-scrollbar,
html.cg-crystal body.cg-scroll-y::-webkit-scrollbar,
html.cg-crystal body .cg-scroll-y::-webkit-scrollbar {
  width: 8px;
}

html.cg-crystal.cg-scroll-x::-webkit-scrollbar,
html.cg-crystal body.cg-scroll-x::-webkit-scrollbar,
html.cg-crystal body .cg-scroll-x::-webkit-scrollbar {
  height: 8px;
}

html.cg-crystal.cg-scroll-y::-webkit-scrollbar-thumb,
html.cg-crystal body.cg-scroll-y::-webkit-scrollbar-thumb,
html.cg-crystal body .cg-scroll-y::-webkit-scrollbar-thumb,
html.cg-crystal.cg-scroll-x::-webkit-scrollbar-thumb,
html.cg-crystal body.cg-scroll-x::-webkit-scrollbar-thumb,
html.cg-crystal body .cg-scroll-x::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cg-platform) 88%, white 12%), color-mix(in srgb, var(--cg-platform) 68%, black 20%));
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--cg-platform) 34%, transparent);
}

html.cg-crystal.cg-scroll-y::-webkit-scrollbar-track,
html.cg-crystal body.cg-scroll-y::-webkit-scrollbar-track,
html.cg-crystal body .cg-scroll-y::-webkit-scrollbar-track,
html.cg-crystal.cg-scroll-x::-webkit-scrollbar-track,
html.cg-crystal body.cg-scroll-x::-webkit-scrollbar-track,
html.cg-crystal body .cg-scroll-x::-webkit-scrollbar-track {
  background: transparent;
}
/* CG-CONDITIONAL-SCROLLBARS-END */

@media (prefers-reduced-motion: reduce) {
  html.cg-crystal body .side nav a,
  html.cg-crystal body .cg-metric,
  html.cg-crystal body .cg-panel,
  html.cg-crystal body .cg-detail-stat,
  html.cg-crystal body .cg-detail-breakdown,
  html.cg-crystal body .cg-content-card,
  html.cg-crystal body .cg-stream-card,
  html.cg-crystal body .cg-tiktok-card,
  html.cg-crystal body .cg-social-card {
    transition: none;
  }
}

html.cg-crystal :where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cg-platform, #ff970f) 78%, white 22%);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  html.cg-crystal body :where(.side,.ov-panel,.cg-panel,.cg-metric,.game-card,.game-detail-section) {
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
  }
}

@media (forced-colors: active) {
  html.cg-crystal :where(a,button,input,select,textarea,[tabindex]) { forced-color-adjust:auto; }
  html.cg-crystal :where(.side nav a.active,.is-active) { outline:2px solid Highlight; }
}

/* Repair 5.0.21: readable secondary text, keyboard charts and complete navigation. */
.cg-sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cg-chart-table{margin-top:12px;color:#e3e6ed;font-size:14px}.cg-chart-table summary{cursor:pointer;padding:12px;border:1px solid #ffffff38;border-radius:8px}.cg-table-scroll{max-height:360px;overflow:auto}.cg-chart-table table{border-collapse:collapse;width:100%;background:#14171f}.cg-chart-table th,.cg-chart-table td{padding:10px;text-align:left;border-bottom:1px solid #ffffff38}.cg-chart-table caption{padding:12px}
html.cg-crystal body :is(.cg-note,.cg-followers small,.ov-stat small,.ov-stat span){font-size:12px!important;color:#c7cbd5!important}
html.cg-crystal body :focus-visible{outline:3px solid #ffb653!important;outline-offset:3px}
@media(max-width:1650px){html.cg-crystal body .ov-head{grid-template-columns:1fr!important;align-items:start!important}.ov-search-pair{grid-template-columns:repeat(2,minmax(0,1fr))!important}.ov-google-wrap{grid-column:1/-1}.ov-cosmetics-search{grid-template-columns:auto minmax(0,1fr) auto!important}.ov-cosmetics-filters{grid-column:1/-1;grid-row:2}}
@media(max-width:1000px){html.cg-crystal body .ov-search-pair{grid-template-columns:1fr!important}.ov-google-wrap{grid-column:auto}.ov-search-wrap,.ov-cosmetics-wrap,.ov-google-wrap{min-width:0}}
@media(max-width:900px){html.cg-crystal body .side{height:calc(118px + env(safe-area-inset-bottom))!important}html.cg-crystal body .side nav{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-flow:row!important;overflow:visible!important}html.cg-crystal body .side nav a,html.cg-crystal body .side nav a:last-child{display:flex!important;flex-direction:column!important;gap:3px!important;height:51px!important;font-size:11px!important}html.cg-crystal body .side nav a span{display:inline!important}html.cg-crystal body .side nav a svg{height:22px!important;width:22px!important}html.cg-crystal body .main-content{padding-bottom:calc(148px + env(safe-area-inset-bottom))!important}html.cg-crystal body .cg-sync{display:block!important;font-size:12px!important;color:#c7cbd5!important}}