/* Claudbar · Cielo de estrellas con estrellas fugaces + Liquid Glass, en TODAS las páginas de claudbar.com
   (portada, app, ajustes, cuenta, privacidad, herramientas). Se carga el último. Las estrellas fugaces las crea cb-sky.js. */
:root { color-scheme: dark; }
:root {
  --cb-sky: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.75) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.5) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1.5px 1.5px at 200px 20px, rgba(255,255,255,.85) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1px 1px at 60px 140px, rgba(255,255,255,.5) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(1px 1px at 170px 120px, rgba(200,210,255,.6) 50%, transparent) 0 0 / 240px 180px,
    radial-gradient(ellipse at 50% 120%, rgba(60,70,140,.28), transparent 60%);
  --cb-glass: linear-gradient(135deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.04) 55%, rgba(255,255,255,.08) 100%);
  --cb-edge: rgba(255,255,255,.16);
  --cb-shine: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.05);
}

/* El cielo, detrás de todo */
html { background: var(--cb-sky), #07080d !important; background-attachment: fixed !important; }
html body { background: transparent !important; }

/* Lo que tapaba el cielo: transparente (la barra lateral, con un velo de cristal sin desenfoque para que se vean las estrellas) */
html body main, html body .cb-settings main { background: transparent !important; }
html body > aside, html body .app > aside, html body aside.sidebar, html body .cb-settings aside, html body aside {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border-right: 1px solid rgba(255,255,255,.1) !important;
}

/* Tarjetas en cristal líquido */
html body .tile, html body .nv-frame, html body .summary, html body .tbl, html body section.cur, html body .cb-settings section,
html body main#auth.card, html body .card, html body .plan, html body .faq-item {
  background: var(--cb-glass), rgba(14,14,22,.35) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--cb-edge) !important;
  box-shadow: var(--cb-shine), 0 10px 30px rgba(0,0,0,.28) !important;
}

/* Estrellas fugaces (cb-sky.js crea .cb-meteors) */
.cb-meteors { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cb-meteors i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 3px 1px rgba(255,255,255,.95), 0 0 9px 2px rgba(170,195,255,.55);
  transform: rotate(var(--a, 150deg)) translateX(0);
  animation: cb-meteor var(--d, 12s) linear var(--w, 0s) infinite; will-change: transform, opacity;
}
.cb-meteors i::before {
  content: ''; position: absolute; top: 50%; right: 1px; width: var(--l, 140px); height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(150,175,255,.18) 45%, rgba(220,230,255,.6) 85%, rgba(255,255,255,.95)); border-radius: 1px;
}
@keyframes cb-meteor {
  0% { opacity: 0; transform: rotate(var(--a, 150deg)) translateX(0); }
  1% { opacity: 1; }
  6% { opacity: .85; }
  9% { opacity: 0; transform: rotate(var(--a, 150deg)) translateX(var(--dist, 480px)); }
  100% { opacity: 0; transform: rotate(var(--a, 150deg)) translateX(var(--dist, 480px)); }
}
/* Estrellas que titilan suavemente */
.cb-twinkle { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--cb-sky); background-position: 120px 90px; opacity: .5; animation: cb-twinkle 5s ease-in-out infinite alternate; will-change: opacity; }
@keyframes cb-twinkle { to { opacity: .1; } }

/* Equipos modestos: menos animación (las estrellas quietas, 2 estrellas fugaces) */
html.cb-lite .cb-twinkle { animation: none; }
html.cb-lite .cb-meteors i:nth-child(n+3) { display: none; }
@media (prefers-reduced-motion: reduce) { .cb-meteors, .cb-twinkle { display: none !important; } }
@media (prefers-reduced-transparency: reduce) { html body .tile, html body .card, html body section.cur { -webkit-backdrop-filter: none; backdrop-filter: none; } }