/* Bright technology finish for public/auth screens and usage-log model badges. */
body:has(img[src='/rose-home-hero-v1.webp']):not(:has(.rose-home-hero))
  #root
  > div {
  background: linear-gradient(135deg, #f8fdff, #eff8ff 48%, #f5f3ff) !important;
}

body:has(img[src='/rose-home-hero-v1.webp']):not(:has(.rose-home-hero))
  #root
  > div::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(14 165 233 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(14 165 233 / 6%) 1px, transparent 1px);
  background-size: 42px 42px;
  content: '';
  mask-image: linear-gradient(110deg, black, transparent 78%);
  pointer-events: none;
}

body:has(img[src='/rose-home-hero-v1.webp']):not(:has(.rose-home-hero))
  img[src='/rose-home-hero-v1.webp'] {
  display: none !important;
}

.rose-home-hero {
  isolation: isolate;
  color: #f7fbff;
  background-color: #050c1b !important;
  background-image:
    linear-gradient(
      90deg,
      rgb(3 10 25 / 96%) 0%,
      rgb(4 13 32 / 88%) 37%,
      rgb(5 15 35 / 52%) 58%,
      rgb(5 15 35 / 12%) 100%
    ),
    url('/assets/cyber-city-20261020-hero.webp') !important;
  background-position:
    center,
    58% 48%;
  background-size: cover, cover;
}

.rose-home-hero-art {
  display: none !important;
}

.rose-home-hero-sparkles {
  position: absolute;
  inset: 0;
  z-index: 0 !important;
  overflow: hidden;
  background-image:
    linear-gradient(rgb(80 220 255 / 13%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(80 220 255 / 13%) 1px, transparent 1px),
    radial-gradient(circle at 75% 28%, rgb(34 211 238 / 24%), transparent 33%),
    linear-gradient(
      115deg,
      transparent 35%,
      rgb(34 211 238 / 7%) 50%,
      transparent 68%
    ) !important;
  background-size:
    42px 42px,
    42px 42px,
    100% 100%,
    100% 100% !important;
  opacity: 0.82 !important;
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 46%), black 42%, black);
}

.rose-home-hero-sparkles::before,
.rose-home-hero-sparkles::after {
  position: absolute;
  top: 1%;
  right: -5%;
  width: min(47rem, 61vw);
  aspect-ratio: 1;
  border: 1px solid rgb(79 226 255 / 42%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0 31px,
      rgb(56 220 255 / 17%) 32px 33px,
      transparent 34px 72px
    ),
    conic-gradient(
      from 24deg,
      transparent 0 18%,
      rgb(81 234 255 / 64%) 18.4% 18.7%,
      transparent 19.1% 42%,
      rgb(174 111 255 / 65%) 42.4% 42.7%,
      transparent 43.1% 71%,
      rgb(81 234 255 / 48%) 71.4% 71.7%,
      transparent 72.1%
    );
  box-shadow:
    inset 0 0 70px rgb(34 211 238 / 22%),
    0 0 45px rgb(14 165 233 / 32%),
    0 0 130px rgb(99 102 241 / 19%);
  opacity: 0.76;
  transform: rotate(-8deg);
  animation: bright-tech-orbit 32s linear infinite;
  content: '';
}

.rose-home-hero-sparkles::after {
  top: 7%;
  right: 0;
  width: min(34rem, 43vw);
  border-color: rgb(183 127 255 / 48%);
  background: repeating-radial-gradient(
    ellipse at center,
    transparent 0 42px,
    rgb(181 119 255 / 18%) 43px 44px,
    transparent 45px 88px
  );
  box-shadow:
    inset 0 0 55px rgb(167 139 250 / 18%),
    0 0 36px rgb(139 92 246 / 22%);
  animation-direction: reverse;
  animation-duration: 24s;
  animation-delay: -4s;
}

.rose-home-hero-sparkles::before {
  top: 1%;
  right: -5%;
  width: min(47rem, 61vw);
  border-radius: 50%;
}

.rose-home-hero > .mx-auto {
  position: relative;
  z-index: 1;
}

.rose-home-hero h1 {
  color: #f8fbff;
  text-shadow: 0 2px 26px rgb(4 12 31 / 32%);
}

body:has(.rose-home-hero) header nav:not([class*='bg-background/60']) {
  height: 56px;
  margin-top: 5px;
  border: 1px solid rgb(112 219 255 / 30%);
  border-radius: 14px;
  padding-inline: 16px;
  color: #f4faff;
  background: rgb(3 11 28 / 66%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    0 9px 34px rgb(0 0 0 / 23%),
    0 0 24px rgb(34 211 238 / 9%);
  backdrop-filter: blur(18px);
}

body:has(.rose-home-hero) header nav:not([class*='bg-background/60']) a,
body:has(.rose-home-hero) header nav:not([class*='bg-background/60']) button {
  color: #eaf7ff !important;
}

.rose-home-hero .landing-animate-fade-up:last-child > * {
  opacity: 0.88 !important;
}

.rose-home-hero .landing-animate-fade-up:last-child > * > * {
  border-color: rgb(104 232 255 / 72%);
  box-shadow:
    0 22px 60px rgb(14 116 144 / 26%),
    0 0 25px rgb(34 211 238 / 16%);
  backdrop-filter: blur(12px);
}

.rose-home-hero .text-muted-foreground,
.rose-home-hero .text-muted-foreground\/80,
.rose-home-hero .text-muted-foreground\/60,
.rose-home-hero .text-muted-foreground\/50 {
  color: rgb(220 234 255 / 78%) !important;
}

.rose-home-hero > .mx-auto > div:first-child > div:first-child {
  border-color: rgb(93 226 255 / 44%);
  background: rgb(15 112 165 / 28%);
  color: #b8f4ff;
  box-shadow: 0 0 25px rgb(34 211 238 / 18%);
}

.rose-home-hero a,
.rose-home-hero .group {
  border-color: rgb(114 215 255 / 32%);
  color: #eaf7ff;
  background-color: rgb(8 22 48 / 52%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    0 4px 16px rgb(0 0 0 / 20%);
  backdrop-filter: blur(10px);
}

.rose-home-hero a:hover,
.rose-home-hero .group:hover {
  border-color: rgb(94 228 255 / 76%);
  background-color: rgb(11 57 87 / 68%);
  box-shadow: 0 0 22px rgb(34 211 238 / 22%);
}

body:has(.usage-log-model-badge) main {
  background-image:
    linear-gradient(rgb(14 165 233 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(14 165 233 / 5%) 1px, transparent 1px),
    radial-gradient(ellipse at 100% 0, rgb(34 211 238 / 13%), transparent 35%),
    radial-gradient(ellipse at 0 100%, rgb(139 92 246 / 8%), transparent 32%);
  background-size:
    44px 44px,
    44px 44px,
    100% 100%,
    100% 100%;
}

body:has(.usage-log-model-badge)
  main
  > div:nth-child(2)
  > div:has(.usage-log-model-badge) {
  border-color: rgb(14 165 233 / 34%) !important;
  background-image: linear-gradient(
    135deg,
    rgb(255 255 255 / 93%),
    rgb(238 250 255 / 90%) 54%,
    rgb(247 243 255 / 90%)
  ) !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 95%),
    0 0 0 1px rgb(34 211 238 / 8%),
    0 18px 50px -32px rgb(14 116 144 / 52%) !important;
}

body:has(.usage-log-model-badge)
  main
  > div:nth-child(2)
  > div:has(.usage-log-model-badge)::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #22d3ee 18%,
    #60a5fa 52%,
    #a78bfa 82%,
    transparent
  );
  background-size: 200% 100%;
  animation: bright-tech-data-flow 4.4s linear infinite;
  content: '';
  pointer-events: none;
}

body:has(.usage-log-model-badge)
  [class*='bg-card/50'][class*='rounded-lg'][class*='border'] {
  border-color: rgb(14 165 233 / 21%) !important;
  background-image: linear-gradient(
    115deg,
    rgb(240 253 255 / 76%),
    rgb(248 250 255 / 82%)
  ) !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 90%),
    0 4px 18px rgb(14 165 233 / 5%);
}

.usage-log-model-badge[data-slot='status-badge'] {
  --usage-tech-ink: hsl(var(--usage-model-hue) 50% 25%);
  --usage-tech-line: hsl(var(--usage-model-hue) 78% 64%);
  --usage-tech-accent: hsl(var(--usage-model-accent-hue) 84% 61%);

  gap: 8px !important;
  width: fit-content;
  max-width: min(100%, 340px);
  height: 32px !important;
  min-height: 32px !important;
  border: 1px solid hsl(var(--usage-model-hue) 68% 76% / 70%) !important;
  border-radius: 9999px !important;
  padding: 0 12px 0 7px !important;
  color: var(--usage-tech-ink) !important;
  background: linear-gradient(
    115deg,
    hsl(var(--usage-model-hue) 100% 98%),
    hsl(var(--usage-model-accent-hue) 100% 97%) 58%,
    white
  ) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 96%),
    0 2px 8px hsl(var(--usage-model-hue) 45% 30% / 9%),
    0 0 0 1px rgb(255 255 255 / 62%) !important;
  filter: none !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.usage-log-model-badge > span {
  display: flex !important;
  min-width: 0;
  align-items: center;
  gap: 8px !important;
}

.usage-log-model-badge:not(:has(.usage-log-model-portrait))
  > span
  > span:first-child {
  display: flex !important;
  flex: 0 0 21px !important;
  align-items: center;
  justify-content: center;
  width: 21px !important;
  height: 21px;
  border: 1px solid hsl(var(--usage-model-hue) 68% 78% / 55%);
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    hsl(var(--usage-model-hue) 100% 96%),
    hsl(var(--usage-model-accent-hue) 90% 94%)
  );
}

.usage-log-model-badge:not(:has(.usage-log-model-portrait))
  > span
  > span:first-child
  svg {
  width: 15px;
  height: 15px;
}

/* Compatibility with the live badge markup that predates the compact icon. */
.usage-log-model-badge .usage-log-model-portrait {
  display: flex !important;
  position: relative !important;
  flex: 0 0 22px !important;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  overflow: hidden;
  border: 1px solid hsl(var(--usage-model-hue) 68% 78% / 55%) !important;
  border-radius: 50% !important;
  background: linear-gradient(
    145deg,
    hsl(var(--usage-model-hue) 100% 96%),
    hsl(var(--usage-model-accent-hue) 90% 94%)
  ) !important;
  box-shadow: none !important;
}

.usage-log-model-badge .usage-log-model-portrait img {
  display: none !important;
}

.usage-log-model-badge .usage-log-model-provider {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--usage-tech-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.usage-log-model-badge
  .usage-log-model-portrait:not(:has(.usage-log-model-provider))::before {
  color: var(--usage-tech-ink);
  content: 'AI';
  font:
    800 8px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  letter-spacing: -0.04em;
}

.usage-log-model-badge .usage-log-model-body {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 0 !important;
  padding: 0 !important;
}

.usage-log-model-badge .usage-log-model-stars {
  display: none !important;
}

.usage-log-model-badge:has(.usage-log-model-portrait) {
  gap: 5px !important;
  padding: 0 9px 0 6px !important;
}

.usage-log-model-badge .usage-log-model-name {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 0;
  width: max-content;
  max-width: 220px;
  overflow: hidden;
  color: var(--usage-tech-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-log-model-badge[data-slot='status-badge']:focus-visible {
  outline: 2px solid var(--usage-tech-line) !important;
  outline-offset: 3px;
}

.dark .usage-log-model-badge[data-slot='status-badge'] {
  --usage-tech-ink: hsl(var(--usage-model-hue) 76% 88%);
  --usage-tech-line: hsl(var(--usage-model-hue) 85% 70%);
  --usage-tech-accent: hsl(var(--usage-model-accent-hue) 86% 72%);

  border-color: hsl(var(--usage-model-hue) 60% 58% / 54%) !important;
  background: linear-gradient(
    115deg,
    hsl(var(--usage-model-hue) 32% 15%),
    hsl(var(--usage-model-accent-hue) 28% 12%) 58%,
    hsl(var(--usage-model-hue) 24% 17%)
  ) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 2px 10px rgb(0 0 0 / 24%) !important;
}

.dark
  .usage-log-model-badge:not(:has(.usage-log-model-portrait))
  > span
  > span:first-child {
  border-color: hsl(var(--usage-model-hue) 55% 56% / 45%);
  background: linear-gradient(
    145deg,
    hsl(var(--usage-model-hue) 38% 23%),
    hsl(var(--usage-model-accent-hue) 31% 18%)
  );
}

.dark .usage-log-model-badge .usage-log-model-portrait {
  border-color: hsl(var(--usage-model-hue) 55% 56% / 45%) !important;
  background: linear-gradient(
    145deg,
    hsl(var(--usage-model-hue) 38% 23%),
    hsl(var(--usage-model-accent-hue) 31% 18%)
  ) !important;
}

body:has(.usage-log-model-badge) [data-slot='table-container'] {
  background-image:
    linear-gradient(rgb(14 165 233 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(14 165 233 / 6%) 1px, transparent 1px),
    radial-gradient(circle at 100% 0, rgb(34 211 238 / 11%), transparent 35%) !important;
  background-size:
    30px 30px,
    30px 30px,
    100% 100% !important;
}

body:has(.usage-log-model-badge) [data-slot='table'] thead {
  background: linear-gradient(
    90deg,
    rgb(207 250 254 / 92%),
    rgb(219 234 254 / 86%) 58%,
    rgb(237 233 254 / 82%)
  );
  box-shadow: inset 0 -1px 0 rgb(14 165 233 / 24%);
}

.dark body:has(.usage-log-model-badge) [data-slot='table-container'] {
  background-image:
    linear-gradient(rgb(56 189 248 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(56 189 248 / 4%) 1px, transparent 1px),
    radial-gradient(circle at 100% 0, rgb(34 211 238 / 8%), transparent 35%) !important;
}

.dark body:has(.usage-log-model-badge) [data-slot='table'] thead {
  background: linear-gradient(90deg, rgb(8 47 73 / 58%), rgb(46 16 101 / 28%));
}

.dark
  body:has(.usage-log-model-badge)
  main
  > div:nth-child(2)
  > div:has(.usage-log-model-badge) {
  border-color: rgb(56 189 248 / 34%) !important;
  background-image: linear-gradient(
    135deg,
    rgb(8 20 38 / 92%),
    rgb(8 35 52 / 82%) 54%,
    rgb(31 23 54 / 86%)
  ) !important;
}

.dark
  body:has(.usage-log-model-badge)
  [class*='bg-card/50'][class*='rounded-lg'][class*='border'] {
  border-color: rgb(56 189 248 / 26%) !important;
  background-image: linear-gradient(
    115deg,
    rgb(7 34 52 / 78%),
    rgb(23 26 52 / 84%)
  ) !important;
}

@media (hover: hover) {
  .usage-log-model-badge[data-slot='status-badge']:hover {
    border-color: hsl(var(--usage-model-hue) 80% 62% / 72%) !important;
    box-shadow:
      0 0 0 2px hsl(var(--usage-model-hue) 86% 57% / 15%),
      0 5px 16px hsl(var(--usage-model-hue) 86% 57% / 15%) !important;
    transform: translateY(-1px);
  }
}

@media (max-width: 639px) {
  .usage-log-model-badge[data-slot='status-badge'] {
    max-width: min(100%, 300px);
  }
}

@media (max-width: 767px) {
  .rose-home-hero {
    background-image:
      linear-gradient(
        90deg,
        rgb(3 10 25 / 94%) 0%,
        rgb(4 13 32 / 82%) 47%,
        rgb(5 15 35 / 48%) 100%
      ),
      url('/assets/cyber-city-20261020-hero.webp') !important;
    background-position:
      center,
      68% center;
    background-size:
      cover,
      auto 100%;
  }

  .rose-home-hero-sparkles::before {
    top: 5%;
    right: -75%;
    width: 29rem;
    opacity: 0.74;
  }

  .rose-home-hero-sparkles::after {
    top: 10%;
    right: -56%;
    width: 23rem;
  }

  .rose-home-hero h1 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .usage-log-model-badge:hover::before,
  .usage-log-model-badge:focus-visible::before {
    animation: bright-tech-scan 700ms ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rose-home-hero-sparkles::before,
  .rose-home-hero-sparkles::after,
  body:has(.usage-log-model-badge)
    main
    > div:nth-child(2)
    > div:has(.usage-log-model-badge)::before,
  .usage-log-model-badge[data-slot='status-badge'] {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes bright-tech-pulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@keyframes bright-tech-orbit {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(352deg);
  }
}

@keyframes bright-tech-data-flow {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@keyframes bright-tech-scan {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}