/* src/styles/login-entry.css */
/* src/styles/tokens.css */
:root {
  --beta-bg: #02030a;
  --beta-bg-elevated: #070b17;
  --beta-bg-soft: #0d1425;
  --beta-surface: rgba(18, 19, 43, 0.68);
  --beta-surface-strong: rgba(25, 27, 58, 0.86);
  --beta-surface-muted: rgba(12, 14, 31, 0.76);
  --beta-ink: #f6f3ff;
  --beta-muted: #a7a8bb;
  --beta-subtle: #777a94;
  --beta-line: rgba(255, 255, 255, 0.11);
  --beta-line-strong: rgba(255, 255, 255, 0.19);
  --beta-accent: #2f7dff;
  --beta-accent-strong: #9bd6ff;
  --beta-accent-soft: rgba(47, 125, 255, 0.18);
  --beta-cyan: #32dcff;
  --beta-blue: #5aa0ff;
  --beta-indigo: #4f8dff;

  --beta-font-sans:
    "Familjen Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --beta-font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;

  --beta-text-xs: 0.78rem;
  --beta-text-sm: 0.88rem;
  --beta-text-md: 1rem;
  --beta-text-lg: 1.125rem;
  --beta-text-xl: 1.3125rem;
  --beta-display-size: clamp(4.25rem, 10vw, 9rem);
  --beta-display-leading: 0.9;
  --beta-leading-tight: 1.1;
  --beta-leading-body: 1.62;

  --beta-space-1: 0.25rem;
  --beta-space-2: 0.5rem;
  --beta-space-3: 0.75rem;
  --beta-space-4: 1rem;
  --beta-space-5: 1.25rem;
  --beta-space-6: 1.5rem;
  --beta-space-8: 2rem;
  --beta-space-10: 2.5rem;
  --beta-space-12: 3rem;
  --beta-space-16: 4rem;
  --beta-space-20: 5rem;

  --beta-radius-xs: 8px;
  --beta-radius-sm: 12px;
  --beta-radius-md: 18px;
  --beta-radius-lg: 24px;
  --beta-radius-xl: 30px;
  --beta-radius-pill: 999px;

  --beta-shadow-sm: 0 16px 34px rgba(0, 0, 0, 0.26);
  --beta-shadow-md: 0 24px 60px rgba(0, 0, 0, 0.34);
  --beta-shadow-lg: 0 42px 120px rgba(0, 0, 0, 0.46);
  --beta-shadow-glow: 0 0 44px rgba(47, 125, 255, 0.28);
  --beta-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --beta-button-shadow-pressed:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 2px 8px rgba(8, 14, 34, 0.34);

  --beta-ring: 0 0 0 3px rgba(47, 125, 255, 0.36);
  --beta-border-width: 1px;
  --beta-control-sm: 38px;
  --beta-control-md: 44px;
  --beta-control-lg: 52px;
  --beta-button-padding-sm: 0.9rem;
  --beta-button-padding-md: 1.18rem;
  --beta-button-padding-lg: 1.45rem;
  --beta-button-font-sm: 0.82rem;
  --beta-button-font-md: 0.9rem;
  --beta-button-font-lg: 0.96rem;
  --beta-button-letter-spacing: 0.01em;
  --beta-icon-sm: 16px;
  --beta-icon-md: 20px;
  --beta-icon-lg: 24px;

  --beta-container-width: 1180px;
  --beta-container-gutter: 1.5rem;
  --beta-mobile-shell-width: 560px;
  --beta-mobile-shell-edge-gap: 2rem;
  --beta-section-y: clamp(72px, 9vw, 132px);
  --beta-grid-gap: clamp(18px, 2vw, 28px);

  --beta-transition-fast: 140ms ease;
  --beta-transition-base: 180ms ease;
  --beta-transition-slow: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --beta-spring-snap: 180ms cubic-bezier(0.2, 0.9, 0.25, 1.22);
  --beta-spring-bounce: 320ms cubic-bezier(0.2, 0.9, 0.24, 1.28);
  --beta-spring-soft: 520ms cubic-bezier(0.16, 1, 0.3, 1);
  --beta-page-enter-distance: 20px;
  --beta-pop-scale-start: 0.94;

  --bs-body-font-family: var(--beta-font-sans);
  --bs-body-bg: var(--beta-bg);
  --bs-body-color: var(--beta-ink);
  --bs-primary: var(--beta-accent);
  --bs-secondary: var(--beta-muted);
  --bs-border-color: var(--beta-line);
  --bs-border-radius: var(--beta-radius-md);
  --bs-border-radius-lg: var(--beta-radius-lg);
  --bs-border-radius-sm: var(--beta-radius-sm);
  --bs-focus-ring-color: rgba(47, 125, 255, 0.36);
  --bs-focus-ring-width: 0.2rem;
}

@media (max-width: 575.98px) {
  :root {
    --beta-container-gutter: 2.4rem;
    --beta-display-size: clamp(3.45rem, 16vw, 5.25rem);
    --beta-mobile-shell-width: 360px;
    --beta-section-y: clamp(56px, 12vw, 96px);
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  :root {
    --beta-container-gutter: 1.9rem;
  }
}
/* src/styles/base.css */
@property --beta-border-sweep-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--beta-bg);
  background-image:
    radial-gradient(circle at 50% -12%, rgba(18, 50, 104, 0.12), transparent 30rem),
    radial-gradient(circle at 15% 8%, rgba(12, 86, 112, 0.028), transparent 20rem),
    radial-gradient(circle at 82% 16%, rgba(75, 192, 255, 0.045), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
  color: var(--beta-ink);
  font-family: var(--beta-font-sans);
  font-size: var(--beta-text-md);
  line-height: var(--beta-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}

::selection {
  background: rgba(47, 125, 255, 0.38);
  color: var(--beta-ink);
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

input:not([type="checkbox"]):not([type="radio"]):required:user-invalid,
textarea:required:user-invalid,
select:required:user-invalid,
input:not([type="checkbox"]):not([type="radio"])[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
input:not([type="checkbox"]):not([type="radio"]).is-required-missing,
textarea.is-required-missing,
select.is-required-missing {
  border-color: rgba(255, 93, 116, 0.92);
  box-shadow:
    0 0 0 3px rgba(255, 93, 116, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

svg {
  flex: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--beta-ring);
}

main {
  display: block;
}

.site-shell {
  min-height: 100vh;
  overflow-x: clip;
}

.site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 12%, rgba(63, 124, 255, 0.12), transparent 24rem),
    radial-gradient(circle at 86% 8%, rgba(73, 221, 200, 0.08), transparent 18rem),
    radial-gradient(circle at 50% 100%, rgba(255, 153, 95, 0.05), transparent 28rem);
}

.site-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.92), transparent 94%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.92), transparent 94%);
}

.container-beta {
  width: min(calc(100% - var(--beta-container-gutter)), var(--beta-container-width));
  margin-inline: auto;
}

.site-love-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 3.8vw, 44px) 0 calc(34px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}

.site-love-footer::before {
  content: none;
}

.site-love-footer::after {
  content: none;
}

.site-love-footer-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 16px);
  width: min(100%, 760px);
  margin-inline: auto;
  padding: 18px 24px;
  border: 1px solid rgba(132, 201, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 0%, rgba(65, 255, 187, 0.16), transparent 48%),
    radial-gradient(circle at 78% 16%, rgba(56, 164, 255, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(13, 23, 42, 0.88), rgba(8, 14, 28, 0.76));
  box-shadow:
    0 22px 70px rgba(20, 190, 160, 0.16),
    0 18px 58px rgba(30, 128, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-love-footer-copy {
  margin: 0;
  color: rgba(231, 240, 255, 0.84);
  font-size: clamp(0.95rem, 1.2vw, 1.02rem);
  line-height: 1.5;
  text-align: center;
}

.site-love-footer-copy strong {
  color: #f6fbff;
  font-weight: 700;
}

.site-love-footer-heart {
  display: inline-block;
  margin-inline: 0.14em;
  font-size: 1.48em;
  line-height: 0.8;
  color: #ff7da3;
  text-shadow:
    0 0 16px rgba(255, 125, 163, 0.34),
    0 0 28px rgba(255, 125, 163, 0.18);
  transform: translateY(0.08em);
}

.site-love-footer-mark {
  width: clamp(42px, 4.8vw, 58px);
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 22px rgba(255, 153, 77, 0.18));
}

.beta-surface-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.beta-animated-border::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(
      from var(--beta-border-sweep-angle),
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0) 250deg,
      rgba(132, 201, 255, 0.04) 286deg,
      rgba(132, 201, 255, 0.34) 318deg,
      rgba(255, 255, 255, 0.14) 336deg,
      rgba(255, 255, 255, 0) 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.82;
  content: "";
  pointer-events: none;
  animation: betaBorderSweep 9.6s linear infinite;
}

.beta-animated-border.is-warm-border::after {
  background:
    conic-gradient(
      from var(--beta-border-sweep-angle),
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0) 248deg,
      rgba(255, 191, 104, 0.04) 286deg,
      rgba(126, 196, 255, 0.22) 314deg,
      rgba(255, 191, 104, 0.22) 334deg,
      rgba(255, 255, 255, 0) 360deg
    );
}

@keyframes betaBorderSweep {
  to {
    --beta-border-sweep-angle: 1turn;
  }
}

@media (max-width: 640px) {
  .site-love-footer {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .site-love-footer-shell {
    flex-direction: column-reverse;
    padding: 18px 18px 20px;
  }
}

.beta-screen-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 16, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.surface {
  border: var(--beta-border-width) solid var(--beta-line);
  border-radius: var(--beta-radius-lg);
  background: var(--beta-surface);
  box-shadow: var(--beta-shadow-sm);
  transition:
    transform var(--beta-spring-bounce),
    box-shadow var(--beta-transition-slow),
    border-color var(--beta-transition-slow),
    background-color var(--beta-transition-slow);
}

.surface-strong {
  border-color: var(--beta-line-strong);
  background: var(--beta-surface-strong);
  box-shadow: var(--beta-shadow-md);
}

.surface-pad {
  padding: var(--beta-space-6);
}

.text-muted {
  color: var(--beta-muted);
}

.text-subtle {
  color: var(--beta-subtle);
}

.icon-12 {
  inline-size: var(--beta-icon-sm);
  block-size: var(--beta-icon-sm);
}

.icon-16 {
  inline-size: 1rem;
  block-size: 1rem;
}

.icon-20 {
  inline-size: var(--beta-icon-md);
  block-size: var(--beta-icon-md);
}

.icon-24 {
  inline-size: var(--beta-icon-lg);
  block-size: var(--beta-icon-lg);
}

.noctra-page-stage,
.noctra-section-stage,
.money-panel-stage,
.recovery-panel-stage {
  animation: noctraPageEnter var(--beta-spring-soft) both;
  transform-origin: 50% 0;
}

.noctra-page-stage {
  display: grid;
  gap: inherit;
}

.noctra-section-stage {
  display: grid;
  gap: var(--beta-grid-gap);
}

.money-panel-stage,
.recovery-panel-stage {
  display: grid;
  gap: var(--beta-space-4);
}

[data-noctra-pop="true"],
.beta-pop-surface,
.user-notifications-dropdown.is-open,
.user-social-dropdown.is-open,
.user-profile-dropdown.is-open,
.suite-switcher-menu,
.mailbox-settings-panel,
.mailbox-compose-panel,
.global-call-frame-shell,
.shard-authority-dock.is-open .shard-authority-panel {
  animation: noctraPopIn var(--beta-spring-bounce) both;
  animation-delay: var(--noctra-pop-delay, 0ms);
  transform-origin: 50% 0;
}

.track-page-shell > .track-summary-grid,
.track-page-shell > .track-subnav,
.track-page-shell > .track-layout,
.files-page-shell > .files-page-hero,
.files-page-shell > .files-page-grid,
.files-page-shell > .files-toolbar,
.files-page-shell > .files-feature-strip,
.events-landing-stack > *,
.messaging-page-shell > *,
.shop-page > .shop-hero,
.shop-page > .shop-xp-section,
.shop-page > .prestige-vault-section,
.shop-page > .shop-catalog-section,
.watch-page-shell > .watch-room-shell,
.watch-page-shell > .watch-layout {
  animation: noctraPopIn var(--beta-spring-bounce) both;
  animation-delay: var(--noctra-pop-delay, 0ms);
  transform-origin: 50% 0;
}

.track-page-shell > .track-summary-grid {
  --noctra-pop-delay: 0ms;
}

.track-page-shell > .track-subnav {
  --noctra-pop-delay: 70ms;
}

.track-page-shell > .track-layout {
  --noctra-pop-delay: 140ms;
}

.files-page-shell > .files-page-hero {
  --noctra-pop-delay: 0ms;
}

.files-page-shell > .files-page-grid {
  --noctra-pop-delay: 90ms;
}

.files-page-shell > .files-toolbar {
  --noctra-pop-delay: 160ms;
}

.files-page-shell > .files-feature-strip {
  --noctra-pop-delay: 230ms;
}

.events-landing-stack > :nth-child(1) {
  --noctra-pop-delay: 0ms;
}

.events-landing-stack > :nth-child(2) {
  --noctra-pop-delay: 80ms;
}

.events-landing-stack > :nth-child(3) {
  --noctra-pop-delay: 160ms;
}

.events-landing-stack > :nth-child(4) {
  --noctra-pop-delay: 240ms;
}

.messaging-page-shell > :nth-child(1) {
  --noctra-pop-delay: 0ms;
}

.messaging-page-shell > :nth-child(2) {
  --noctra-pop-delay: 80ms;
}

.messaging-page-shell > :nth-child(3) {
  --noctra-pop-delay: 160ms;
}

.shop-page > .shop-hero {
  --noctra-pop-delay: 0ms;
}

.shop-page > .shop-xp-section {
  --noctra-pop-delay: 90ms;
}

.shop-page > .prestige-vault-section {
  --noctra-pop-delay: 170ms;
}

.shop-page > .shop-catalog-section {
  --noctra-pop-delay: 250ms;
}

.shop-page > .shop-hero,
.shop-page > .shop-xp-section,
.shop-page > .prestige-vault-section,
.shop-page > .shop-catalog-section {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

.watch-page-shell > .watch-room-shell {
  --noctra-pop-delay: 0ms;
}

.watch-page-shell > .watch-layout {
  --noctra-pop-delay: 100ms;
}


:is(button, [role="button"], div)[class*="-close"],
:is(button, [role="button"], div)[class*="-arrow"] {
  line-height: 1;
}

:is(button, [role="button"], div)[class*="-close"] > :is(i, svg),
:is(button, [role="button"], div)[class*="-arrow"] > :is(i, svg) {
  display: block;
  flex: 0 0 auto;
  line-height: 1;
  width: 1em;
  text-align: center;
  pointer-events: none;
}

@keyframes noctraPageEnter {
  0% {
    opacity: 0;
    transform: translateY(var(--beta-page-enter-distance)) scale(0.985);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes noctraPopIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(var(--beta-pop-scale-start));
    filter: blur(8px);
  }

  72% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 575.98px) {
  .surface-pad {
    padding: var(--beta-space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .beta-surface-frame::after,
  .beta-animated-border::after,
  .noctra-page-stage,
  .noctra-section-stage,
  .money-panel-stage,
  .recovery-panel-stage,
  [data-noctra-pop="true"],
  .beta-pop-surface,
  .track-page-shell > .track-summary-grid,
  .track-page-shell > .track-subnav,
  .track-page-shell > .track-layout,
  .files-page-shell > .files-page-hero,
  .files-page-shell > .files-page-grid,
  .files-page-shell > .files-toolbar,
  .files-page-shell > .files-feature-strip,
  .events-landing-stack > *,
  .messaging-page-shell > *,
  .shop-page > .shop-hero,
  .shop-page > .shop-xp-section,
  .shop-page > .prestige-vault-section,
  .shop-page > .shop-catalog-section,
  .watch-page-shell > .watch-room-shell,
  .watch-page-shell > .watch-layout,
  .user-notifications-dropdown.is-open,
  .user-social-dropdown.is-open,
  .user-profile-dropdown.is-open,
  .suite-switcher-menu,
  .mailbox-settings-panel,
  .mailbox-compose-panel,
  .global-call-frame-shell,
  .shard-authority-dock.is-open .shard-authority-panel {
    animation: none;
  }
}
/* src/styles/components.css */
/* The sticky header is a sibling of <main>, so page-specific header ambience must be themed on .site-shell[data-page="..."]. */
.site-header {
  --site-header-backdrop-height: calc(100% + 24px);
  --site-header-backdrop-background: linear-gradient(180deg, rgba(5, 9, 22, 0.78), rgba(5, 9, 22, 0.42) 68%, rgba(5, 9, 22, 0));
  --site-header-backdrop-filter: none;
  --site-header-backdrop-transform: none;
  --site-header-backdrop-opacity: 1;
  --site-header-padding-top: var(--beta-space-4);
  --site-header-padding-bottom: var(--beta-space-3);
  --site-header-nav-min-height: 72px;

  position: sticky;
  top: 0;
  z-index: 160;
  isolation: isolate;
  padding: var(--site-header-padding-top) 0 var(--site-header-padding-bottom);
  transition:
    transform var(--beta-spring-soft),
    opacity var(--beta-transition-slow),
    padding var(--beta-transition-slow);
}

.site-header::after {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: var(--site-header-backdrop-height);
  background: var(--site-header-backdrop-background);
  content: "";
  filter: var(--site-header-backdrop-filter);
  transform: var(--site-header-backdrop-transform);
  opacity: var(--site-header-backdrop-opacity);
  pointer-events: none;
}

.mobile-app-banner {
  position: relative;
  z-index: 3;
  margin: calc(var(--site-header-padding-top) * -1) 0 var(--beta-space-3);
  padding: 8px 0;
  border-bottom: var(--beta-border-width) solid rgba(115, 244, 214, 0.22);
  background:
    linear-gradient(90deg, rgba(23, 240, 199, 0.13), rgba(52, 142, 255, 0.16) 48%, rgba(9, 15, 35, 0.86)),
    rgba(5, 10, 24, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.mobile-app-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
}

.mobile-app-banner-copy,
.mobile-app-banner-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.mobile-app-banner-copy {
  gap: 10px;
}

.mobile-app-banner-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border: var(--beta-border-width) solid rgba(127, 238, 221, 0.38);
  border-radius: 999px;
  background: rgba(18, 245, 205, 0.13);
  color: #75f5df;
  box-shadow: 0 0 22px rgba(30, 225, 200, 0.22);
}

.mobile-app-banner-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-app-banner-text strong,
.mobile-app-banner-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-app-banner-text strong {
  color: #f5fbff;
  font-size: 0.88rem;
  font-weight: 850;
}

.mobile-app-banner-text span {
  color: rgba(226, 236, 255, 0.78);
  font-size: 0.78rem;
}

.mobile-app-banner-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.mobile-app-banner-primary,
.mobile-app-banner-copy-button,
.mobile-app-banner-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--beta-transition-fast),
    border-color var(--beta-transition-fast),
    background var(--beta-transition-fast),
    color var(--beta-transition-fast);
}

.mobile-app-banner-primary {
  padding: 0 14px;
  border: var(--beta-border-width) solid rgba(127, 238, 221, 0.48);
  background: linear-gradient(135deg, rgba(64, 244, 211, 0.24), rgba(77, 140, 255, 0.28));
  color: #ffffff;
}

.mobile-app-banner-copy-button {
  padding: 0 12px;
  border: var(--beta-border-width) solid rgba(128, 158, 218, 0.34);
  background: rgba(10, 16, 35, 0.72);
  color: rgba(234, 241, 255, 0.9);
  cursor: pointer;
}

.mobile-app-banner-dismiss {
  inline-size: 34px;
  padding: 0;
  border: var(--beta-border-width) solid rgba(128, 158, 218, 0.28);
  background: rgba(10, 16, 35, 0.58);
  color: rgba(234, 241, 255, 0.82);
  cursor: pointer;
}

.mobile-app-banner-primary:hover,
.mobile-app-banner-copy-button:hover,
.mobile-app-banner-dismiss:hover {
  transform: translateY(-1px);
}

.mobile-app-banner-primary:hover {
  border-color: rgba(145, 255, 232, 0.7);
  color: #ffffff;
}

.mobile-app-banner-copy-button:hover,
.mobile-app-banner-copy-button.is-copied {
  border-color: rgba(117, 245, 223, 0.56);
  background: rgba(21, 78, 74, 0.5);
  color: #ffffff;
}

.mobile-app-banner-dismiss:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

body.watch-theatre-nav-hidden .site-header {
  transform: translateY(calc(-100% + 12px));
  opacity: 0.18;
}

body.watch-theatre-nav-hidden .site-header:hover,
body.watch-theatre-nav-hidden .site-header:focus-within {
  transform: translateY(0);
  opacity: 1;
}

.site-header.is-music-page {
  --site-header-backdrop-height: calc(100% + 28px);
  --site-header-backdrop-background: linear-gradient(180deg, rgba(5, 9, 22, 0.92), rgba(5, 9, 22, 0.66) 70%, rgba(5, 9, 22, 0));
}

.site-header.is-suite-home {
  --site-header-backdrop-height: calc(100% + 44px);
  --site-header-backdrop-background:
    radial-gradient(circle at 50% -18%, rgba(87, 159, 255, 0.14), transparent 22rem),
    linear-gradient(180deg, rgba(4, 8, 20, 0.92) 0%, rgba(4, 8, 20, 0.7) 34%, rgba(4, 8, 20, 0.32) 76%, rgba(4, 8, 20, 0) 100%);
  --site-header-backdrop-filter: blur(10px);
  --site-header-backdrop-transform: translateY(6px);
  --site-header-backdrop-opacity: 0.92;

  padding: clamp(12px, 1.4vw, 16px) 0 0;
}

.site-header-below {
  position: absolute;
  right: 0;
  bottom: calc(var(--beta-space-3) - 24px);
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 0;
  pointer-events: none;
}

.site-header.is-suite-home .site-header-below {
  bottom: -24px;
}

.site-header-below > * {
  pointer-events: auto;
}

.beta-navbar {
  padding: 0;
}

.nav-header-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
}

.nav-header-row > .beta-navbar {
  flex: 1 1 auto;
  min-width: 0;
}

.site-header-portal {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
}

.nav-inner,
.beta-nav-mobile-inner,
.user-bar {
  border: var(--beta-border-width) solid var(--beta-line);
  box-shadow: var(--beta-shadow-md);
  backdrop-filter: blur(var(--beta-shell-blur, 18px));
}

.mobile-profile-avatar,
.user-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, #93d6ff 30%, #2f7dff 68%, #113a9b);
  color: #ffffff;
  font-weight: 900;
  overflow: hidden;
}

.identity-avatar-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 100%;
  min-block-size: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.user-avatar.has-image,
.mobile-profile-avatar.has-image,
.user-profile-dropdown-avatar.has-image,
.user-social-avatar.has-image,
.global-call-avatar.has-image,
.public-profile-avatar.has-image {
  background: transparent;
  box-shadow: none;
}

.user-social-avatar.has-image,
.public-profile-avatar.has-image {
  border: 0;
}

.noctra-name {
  display: inline-block;
  max-width: 100%;
}

.noctra-name-font-sans {
  font-family: var(--beta-font-sans);
}

.noctra-name-font-display {
  font-family: "Aptos Display", "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.noctra-name-font-serif {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
}

.noctra-name-font-mono {
  font-family: var(--beta-font-mono);
  font-size: 0.95em;
  letter-spacing: 0.04em;
}

.noctra-name-effect-none {
  color: inherit;
}

.noctra-name-effect-glow {
  color: #f5fbff;
  text-shadow:
    0 0 16px rgba(120, 199, 255, 0.42),
    0 0 34px rgba(78, 122, 255, 0.2);
}

.noctra-name-effect-hologram {
  background: linear-gradient(120deg, #ffffff 0%, #8fd7ff 28%, #95ffd8 52%, #f4b4ff 74%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
}

.noctra-name-effect-sunset {
  background: linear-gradient(135deg, #fff6df 0%, #ffd18e 28%, #ff8ea8 62%, #fff1f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(255, 169, 138, 0.12);
}

.mobile-profile-pulse,
.notification-count {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  min-inline-size: 17px;
  block-size: 17px;
  border-radius: var(--beta-radius-pill);
  background: var(--beta-cyan);
  color: #040413;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
}

.beta-nav-toggle,
.user-icon-button {
  --beta-icon-button-size: var(--beta-control-sm);

  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: var(--beta-icon-button-size);
  block-size: var(--beta-icon-button-size);
  border: 0;
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  text-decoration: none;
  transition:
    background-color var(--beta-transition-base),
    color var(--beta-transition-base),
    box-shadow var(--beta-transition-slow),
    transform var(--beta-spring-bounce);
}

.beta-nav-toggle:hover,
.beta-nav-toggle:focus-visible,
.user-icon-button:hover,
.user-icon-button:focus-visible {
  background: rgba(47, 125, 255, 0.18);
  color: #ffffff;
  box-shadow:
    0 14px 24px rgba(16, 46, 114, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: none;
}

.nav-inner {
  display: grid;
  --beta-shell-blur: 22px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: var(--site-header-nav-min-height);
  border-radius: var(--beta-radius-pill);
  background: rgba(7, 8, 27, 0.74);
  padding: 0.5rem 0.75rem 0.5rem 0.9rem;
  gap: var(--beta-space-4);
  transition:
    transform var(--beta-spring-soft),
    background-color var(--beta-transition-slow),
    box-shadow var(--beta-transition-slow),
    border-color var(--beta-transition-slow);
}

.nav-inner:has(.user-notifications-dropdown.is-open),
.nav-inner:has(.user-social-dropdown.is-open),
.nav-inner:has(.user-profile-dropdown.is-open) {
  position: relative;
  z-index: 6;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--beta-space-3);
  min-inline-size: 0;
  justify-self: start;
  text-decoration: none;
}

.brand-icon-image {
  inline-size: 54px;
  block-size: 54px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(47, 125, 255, 0.34));
}

.nav-center-zone {
  justify-self: center;
}

.nav-account-zone {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.nav-user-bar {
  width: min(100%, 308px);
  padding-right: 0.5rem;
}

.nav-inner > .nav-account {
  justify-self: end;
}

/* Noctra Suite: switcher row under the primary navbar (responsive-first). */
:is(.noctra-suite-switcher-row, .suite-switcher-row, [data-suite-switcher-row]) {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 0;
  margin-top: 0;
}

.suite-switcher-row-inner {
  display: flex;
  justify-content: center;
}

:is(.suite-switcher-anchor, [data-suite-switcher-anchor]) {
  --suite-switcher-border: rgba(255, 255, 255, 0.12);
  --suite-switcher-border-strong: rgba(147, 214, 255, 0.24);
  --suite-switcher-background: rgba(7, 8, 27, 0.66);
  --suite-switcher-background-hover: rgba(47, 125, 255, 0.12);
  --suite-switcher-shadow-glow: rgba(47, 125, 255, 0.14);
  --suite-switcher-dot-start: var(--beta-cyan);
  --suite-switcher-dot-end: var(--beta-blue);
  --suite-switcher-dot-glow: rgba(50, 220, 255, 0.2);
  --suite-switcher-menu-border: rgba(255, 255, 255, 0.12);
  --suite-switcher-item-border-active: rgba(155, 214, 255, 0.22);
  --suite-switcher-item-background: rgba(255, 255, 255, 0.03);
  --suite-switcher-item-background-hover: rgba(255, 255, 255, 0.06);
  --suite-switcher-item-background-active: rgba(47, 125, 255, 0.14);
  --suite-switcher-item-title: rgba(244, 248, 255, 0.88);
  --suite-switcher-item-subtitle: rgba(235, 242, 255, 0.6);

  position: relative;
  display: inline-flex;
  justify-content: center;
}

:is(.suite-switcher-anchor, [data-suite-switcher-anchor])[data-suite-id="fun"],
:is(.suite-switcher-anchor, [data-suite-switcher-anchor])[data-suite-tone="nova"] {
  --suite-switcher-border: rgba(255, 163, 208, 0.24);
  --suite-switcher-border-strong: rgba(255, 188, 220, 0.36);
  --suite-switcher-background: linear-gradient(180deg, rgba(43, 18, 55, 0.82) 0%, rgba(22, 10, 34, 0.88) 100%);
  --suite-switcher-background-hover: rgba(255, 95, 164, 0.14);
  --suite-switcher-shadow-glow: rgba(255, 112, 174, 0.18);
  --suite-switcher-dot-start: #ff88b6;
  --suite-switcher-dot-end: #9f62ff;
  --suite-switcher-dot-glow: rgba(255, 136, 192, 0.28);
  --suite-switcher-menu-border: rgba(255, 176, 215, 0.22);
}

:is(.suite-switcher-anchor, [data-suite-switcher-anchor])[data-suite-id="life-admin"],
:is(.suite-switcher-anchor, [data-suite-switcher-anchor])[data-suite-tone="signal"] {
  --suite-switcher-border: rgba(136, 176, 238, 0.2);
  --suite-switcher-border-strong: rgba(147, 214, 255, 0.24);
  --suite-switcher-background: linear-gradient(180deg, rgba(12, 24, 59, 0.8) 0%, rgba(7, 13, 31, 0.86) 100%);
  --suite-switcher-background-hover: rgba(47, 125, 255, 0.12);
  --suite-switcher-shadow-glow: rgba(47, 125, 255, 0.14);
  --suite-switcher-dot-start: #32dcff;
  --suite-switcher-dot-end: #5aa0ff;
  --suite-switcher-dot-glow: rgba(50, 220, 255, 0.22);
  --suite-switcher-menu-border: rgba(147, 214, 255, 0.2);
}

:is(.suite-switcher-anchor, [data-suite-switcher-anchor])[data-suite-id="recovery"],
:is(.suite-switcher-anchor, [data-suite-switcher-anchor])[data-suite-tone="renewal"] {
  --suite-switcher-border: rgba(150, 234, 221, 0.22);
  --suite-switcher-border-strong: rgba(173, 243, 231, 0.34);
  --suite-switcher-background: linear-gradient(180deg, rgba(13, 39, 46, 0.82) 0%, rgba(8, 20, 28, 0.88) 100%);
  --suite-switcher-background-hover: rgba(64, 196, 169, 0.14);
  --suite-switcher-shadow-glow: rgba(92, 224, 198, 0.16);
  --suite-switcher-dot-start: #77f1cf;
  --suite-switcher-dot-end: #40a6ec;
  --suite-switcher-dot-glow: rgba(119, 241, 207, 0.26);
  --suite-switcher-menu-border: rgba(166, 241, 228, 0.22);
}

:is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) {
  --suite-switcher-min-h: 36px;

  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--suite-switcher-min-h);
  max-width: min(680px, 100%);
  padding: 0.42rem 1.05rem;
  border: 1px solid var(--suite-switcher-border);
  border-radius: var(--beta-radius-pill);
  background: var(--suite-switcher-background);
  box-shadow: var(--beta-shadow-md);
  backdrop-filter: blur(var(--beta-shell-blur, 18px));
  color: #ffffff;
  text-decoration: none;
}

:is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]):hover,
:is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]):focus-visible {
  border-color: var(--suite-switcher-border-strong);
  background: var(--suite-switcher-background-hover);
}

:is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) :is(.suite-switcher-dot, .suite-dot) {
  display: inline-block;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--suite-switcher-dot-start), var(--suite-switcher-dot-end));
  box-shadow: 0 0 16px var(--suite-switcher-dot-glow);
  flex: 0 0 auto;
}

:is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) :is(.suite-switcher-label, .suite-label) {
  color: rgba(224, 240, 255, 0.72);
  font-size: 0.84rem;
  font-weight: 760;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex: 0 0 auto;
}

:is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) :is(.suite-switcher-current, .suite-current) {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 820;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) :is(.suite-switcher-chevron, .suite-chevron) {
  flex: 0 0 auto;
  opacity: 0.8;
  transition: transform var(--beta-transition-base);
}

:is(.suite-switcher-anchor, [data-suite-switcher-anchor]).is-open :is(.suite-switcher-chevron, .suite-chevron) {
  transform: rotate(180deg);
}

.suite-switcher-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 24px));
  border: 1px solid var(--suite-switcher-menu-border);
  border-radius: var(--beta-radius-lg);
  background: color-mix(in srgb, var(--suite-switcher-background) 82%, rgba(7, 8, 27, 0.88));
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.5),
    0 0 46px var(--suite-switcher-shadow-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px);
  padding: 0.5rem;
  display: grid;
  gap: 0.4rem;
  z-index: 40;
}

.suite-switcher-item {
  --suite-switcher-item-border: transparent;
  --suite-switcher-item-border-hover: rgba(255, 255, 255, 0.12);
  --suite-switcher-item-border-active: rgba(155, 214, 255, 0.22);
  --suite-switcher-item-background: rgba(255, 255, 255, 0.03);
  --suite-switcher-item-background-hover: rgba(255, 255, 255, 0.06);
  --suite-switcher-item-background-active: rgba(47, 125, 255, 0.14);
  --suite-switcher-item-title: rgba(244, 248, 255, 0.88);
  --suite-switcher-item-subtitle: rgba(235, 242, 255, 0.6);

  display: grid;
  gap: 0.1rem;
  text-align: left;
  border: 1px solid var(--suite-switcher-item-border);
  border-radius: 18px;
  background: var(--suite-switcher-item-background);
  color: var(--suite-switcher-item-title);
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  transition:
    background-color var(--beta-transition-base),
    border-color var(--beta-transition-base),
    box-shadow var(--beta-transition-slow),
    transform var(--beta-spring-bounce);
}

.suite-switcher-item[data-suite-id="fun"],
.suite-switcher-item[data-suite-tone="nova"] {
  --suite-switcher-item-border-hover: rgba(255, 188, 220, 0.18);
  --suite-switcher-item-border-active: rgba(255, 189, 221, 0.34);
  --suite-switcher-item-background: linear-gradient(180deg, rgba(39, 18, 52, 0.84) 0%, rgba(20, 10, 31, 0.92) 100%);
  --suite-switcher-item-background-hover: linear-gradient(180deg, rgba(55, 24, 69, 0.92) 0%, rgba(27, 12, 40, 0.96) 100%);
  --suite-switcher-item-background-active: linear-gradient(180deg, rgba(83, 31, 98, 0.94) 0%, rgba(42, 18, 58, 0.98) 100%);
  --suite-switcher-item-title: rgba(255, 239, 246, 0.96);
  --suite-switcher-item-subtitle: rgba(255, 211, 229, 0.74);
}

.suite-switcher-item[data-suite-id="life-admin"],
.suite-switcher-item[data-suite-tone="signal"] {
  --suite-switcher-item-border-hover: rgba(151, 212, 255, 0.18);
  --suite-switcher-item-border-active: rgba(151, 212, 255, 0.3);
  --suite-switcher-item-background: linear-gradient(180deg, rgba(18, 35, 78, 0.84) 0%, rgba(9, 18, 42, 0.92) 100%);
  --suite-switcher-item-background-hover: linear-gradient(180deg, rgba(25, 49, 105, 0.92) 0%, rgba(11, 25, 56, 0.96) 100%);
  --suite-switcher-item-background-active: linear-gradient(180deg, rgba(31, 62, 130, 0.94) 0%, rgba(14, 35, 85, 0.98) 100%);
  --suite-switcher-item-title: rgba(240, 248, 255, 0.98);
  --suite-switcher-item-subtitle: rgba(204, 223, 246, 0.78);
}

.suite-switcher-item[data-suite-id="recovery"],
.suite-switcher-item[data-suite-tone="renewal"] {
  --suite-switcher-item-border-hover: rgba(174, 243, 233, 0.18);
  --suite-switcher-item-border-active: rgba(174, 243, 233, 0.3);
  --suite-switcher-item-background: linear-gradient(180deg, rgba(15, 42, 48, 0.84) 0%, rgba(8, 22, 29, 0.92) 100%);
  --suite-switcher-item-background-hover: linear-gradient(180deg, rgba(20, 58, 65, 0.92) 0%, rgba(10, 30, 37, 0.96) 100%);
  --suite-switcher-item-background-active: linear-gradient(180deg, rgba(25, 85, 89, 0.94) 0%, rgba(12, 46, 52, 0.98) 100%);
  --suite-switcher-item-title: rgba(238, 255, 250, 0.96);
  --suite-switcher-item-subtitle: rgba(202, 239, 230, 0.76);
}

.suite-switcher-item:hover,
.suite-switcher-item:focus-visible {
  border-color: var(--suite-switcher-item-border-hover);
  background: var(--suite-switcher-item-background-hover);
  box-shadow: 0 16px 28px rgba(7, 18, 42, 0.22);
  transform: none;
}

.suite-switcher-item.is-active {
  border-color: var(--suite-switcher-item-border-active);
  background: var(--suite-switcher-item-background-active);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.suite-switcher-item-title {
  font-weight: 860;
  letter-spacing: -0.01em;
}

.suite-switcher-item-subtitle {
  color: var(--suite-switcher-item-subtitle);
  font-size: var(--beta-text-sm);
  line-height: 1.35;
}

/* Suite compass: expanded menu, cards, and phase-gate transitions. */
:is(.suite-switcher-anchor, [data-suite-switcher-anchor]) {
  max-width: min(316px, calc(100vw - 32px));
}

:is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) {
  width: auto;
  transition:
    border-color var(--beta-transition-base),
    background var(--beta-transition-base),
    box-shadow var(--beta-transition-base),
    transform var(--beta-transition-base);
}

:is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]):hover,
:is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]):focus-visible {
  box-shadow: var(--beta-shadow-md);
  transform: none;
}

.suite-switcher-icon,
.suite-switcher-item-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--suite-switcher-border-strong) 74%, transparent);
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.13), transparent 32%),
    rgba(3, 9, 26, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 22px var(--suite-switcher-shadow-glow);
}

.suite-switcher-icon {
  inline-size: 39px;
  block-size: 39px;
  border-radius: 13px;
}

.suite-switcher-icon .suite-card-glyph,
.suite-switcher-item-icon .suite-card-glyph {
  max-width: 100%;
  filter: drop-shadow(0 0 10px var(--suite-switcher-dot-glow));
}

.suite-switcher-item-copy {
  display: grid;
  min-width: 0;
}

.suite-switcher-menu {
  top: calc(100% + 12px);
  width: min(410px, calc(100vw - 24px));
  gap: 0.5rem;
  padding: 0.68rem;
  border-radius: 24px;
  overflow: hidden;
  animation: suiteCompassMenuIn 240ms cubic-bezier(0.2, 0.78, 0.22, 1) both;
}

.suite-switcher-menu::before {
  position: absolute;
  inset: -45% -20% auto;
  height: 180px;
  background: radial-gradient(ellipse, var(--suite-switcher-shadow-glow), transparent 68%);
  content: "";
  pointer-events: none;
}

.suite-switcher-menu-kicker {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.2rem 0.42rem 0.12rem;
  color: rgba(220, 236, 255, 0.54);
  font-size: 0.59rem;
  font-weight: 820;
  letter-spacing: 0.2em;
}

.suite-switcher-item {
  position: relative;
  z-index: 1;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  min-height: 68px;
  padding: 0.52rem 0.66rem;
  border-radius: 19px;
}

.suite-switcher-item:hover,
.suite-switcher-item:focus-visible {
  transform: translateX(2px);
}

.suite-switcher-item-icon {
  inline-size: 46px;
  block-size: 46px;
  border-radius: 15px;
}

.suite-switcher-item-copy {
  gap: 0.15rem;
}

.suite-switcher-item-title {
  font-size: 0.93rem;
}

.suite-switcher-item-subtitle {
  font-size: 0.72rem;
}

.suite-switcher-item-state {
  min-width: 44px;
  color: rgba(235, 245, 255, 0.58);
  font-size: 0.66rem;
  font-weight: 840;
  letter-spacing: 0.12em;
  text-align: right;
}

.suite-switcher-item:not(.is-active) .suite-switcher-item-state {
  font-size: 1.1rem;
  letter-spacing: 0;
  transition: transform var(--beta-transition-base), color var(--beta-transition-base);
}

.suite-switcher-item:not(.is-active):hover .suite-switcher-item-state,
.suite-switcher-item:not(.is-active):focus-visible .suite-switcher-item-state {
  color: var(--suite-switcher-item-title);
  transform: translateX(3px);
}

.suite-card-glyph {
  transform-box: fill-box;
  transform-origin: center;
}

.suite-glyph-motion,
.suite-glyph-core-mark {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 520ms cubic-bezier(0.2, 0.78, 0.22, 1);
}

.suite-switcher-item:hover .suite-glyph-motion-orbit,
.suite-switcher-item:focus-visible .suite-glyph-motion-orbit,
.suite-home-card:hover .suite-glyph-motion-orbit,
.suite-home-card:focus-visible .suite-glyph-motion-orbit {
  transform: rotate(16deg);
}

.suite-switcher-item:hover .suite-glyph-core-mark,
.suite-switcher-item:focus-visible .suite-glyph-core-mark,
.suite-home-card:hover .suite-glyph-core-mark,
.suite-home-card:focus-visible .suite-glyph-core-mark {
  transform: scale(1.08);
}

@keyframes suiteCompassMenuIn {
  from {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* Full-screen suite switch: the destination commits only while this phase gate is closed. */
.suite-phase-gate {
  --suite-gate-primary: #32dcff;
  --suite-gate-secondary: #5a7dff;
  --suite-gate-ink: #061126;

  position: fixed;
  inset: 0;
  z-index: 720;
  display: grid;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  pointer-events: all;
  color: #f8fbff;
  animation: suiteGateShell 1480ms linear both;
}

.suite-phase-gate[data-suite-id="fun"] {
  --suite-gate-primary: #ff76b5;
  --suite-gate-secondary: #8a6cff;
  --suite-gate-ink: #170a24;
}

.suite-phase-gate[data-suite-id="life-admin"] {
  --suite-gate-primary: #32dcff;
  --suite-gate-secondary: #4d70ff;
  --suite-gate-ink: #061126;
}

.suite-phase-gate[data-suite-id="recovery"] {
  --suite-gate-primary: #77f1cf;
  --suite-gate-secondary: #32aee9;
  --suite-gate-ink: #061b22;
}

.suite-phase-gate-veil {
  position: absolute;
  inset: -2px;
  z-index: -3;
  background:
    radial-gradient(circle at 50% 43%, color-mix(in srgb, var(--suite-gate-primary) 22%, transparent), transparent 32%),
    radial-gradient(circle at 20% 78%, color-mix(in srgb, var(--suite-gate-secondary) 18%, transparent), transparent 38%),
    linear-gradient(142deg, #020712 0%, var(--suite-gate-ink) 48%, #01040c 100%);
  clip-path: circle(0 at var(--suite-switch-origin-x) var(--suite-switch-origin-y));
  animation: suiteGateVeil 1480ms cubic-bezier(0.72, 0, 0.2, 1) both;
}

.suite-phase-gate-veil::before,
.suite-phase-gate-veil::after {
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 8deg, color-mix(in srgb, var(--suite-gate-primary) 7%, transparent) 8.5deg 9deg);
  content: "";
  opacity: 0.52;
  animation: suiteGateFieldSpin 9s linear infinite;
}

.suite-phase-gate-veil::after {
  background: repeating-radial-gradient(circle, transparent 0 42px, color-mix(in srgb, var(--suite-gate-secondary) 12%, transparent) 43px 44px);
  opacity: 0.36;
  transform: perspective(700px) rotateX(66deg) scale(1.3);
}

.suite-phase-gate-shutter {
  position: absolute;
  inset-block: 0;
  z-index: -2;
  width: 58vw;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--suite-gate-primary) 12%, transparent)),
    var(--suite-gate-ink);
  opacity: 0;
  filter: saturate(1.25);
}

.suite-phase-gate-shutter.is-left {
  left: 0;
  clip-path: polygon(0 0, 83% 0, 100% 50%, 83% 100%, 0 100%);
  transform: translateX(-105%);
  animation: suiteGateShutterLeft 1480ms cubic-bezier(0.62, 0, 0.25, 1) both;
}

.suite-phase-gate-shutter.is-right {
  right: 0;
  clip-path: polygon(17% 0, 100% 0, 100% 100%, 17% 100%, 0 50%);
  transform: translateX(105%);
  animation: suiteGateShutterRight 1480ms cubic-bezier(0.62, 0, 0.25, 1) both;
}

.suite-phase-gate-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(76vw, 820px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: suiteGateOrbitIn 1480ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

.suite-phase-gate-ring,
.suite-phase-gate-scan {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--suite-gate-primary) 62%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 42px color-mix(in srgb, var(--suite-gate-primary) 18%, transparent);
}

.suite-phase-gate-ring.is-outer {
  border-style: dashed;
  animation: suiteGateRingSpin 7s linear infinite;
}

.suite-phase-gate-ring.is-middle {
  inset: 12%;
  border-color: color-mix(in srgb, var(--suite-gate-secondary) 52%, transparent);
  border-style: dotted;
  animation: suiteGateRingSpinReverse 5s linear infinite;
}

.suite-phase-gate-ring.is-inner {
  inset: 27%;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--suite-gate-primary) 48%, transparent);
}

.suite-phase-gate-scan {
  inset: 7%;
  border-color: transparent;
  background: conic-gradient(from 0deg, transparent 0 75%, color-mix(in srgb, var(--suite-gate-primary) 42%, transparent) 88%, transparent 100%);
  filter: blur(1px);
  animation: suiteGateRingSpin 1.9s linear infinite;
}

.suite-phase-gate-content {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(92vw, 680px);
  justify-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  text-align: center;
  opacity: 0;
  animation: suiteGateContent 1480ms cubic-bezier(0.2, 0.78, 0.22, 1) both;
}

.suite-phase-gate-kicker,
.suite-phase-gate-action {
  margin: 0;
  color: color-mix(in srgb, var(--suite-gate-primary) 84%, white);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.34em;
}

.suite-phase-gate-kicker {
  margin-bottom: clamp(22px, 4vh, 40px);
  opacity: 0.76;
}

.suite-phase-gate-sigil {
  position: relative;
  display: grid;
  width: clamp(128px, 20vw, 178px);
  aspect-ratio: 1;
  place-items: center;
  margin-bottom: clamp(18px, 3vh, 30px);
}

.suite-phase-gate-sigil-halo {
  position: absolute;
  inset: -18%;
  border: 1px solid color-mix(in srgb, var(--suite-gate-primary) 48%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--suite-gate-primary) 24%, transparent), transparent 66%);
  box-shadow:
    0 0 54px color-mix(in srgb, var(--suite-gate-primary) 36%, transparent),
    inset 0 0 46px color-mix(in srgb, var(--suite-gate-secondary) 18%, transparent);
  animation: suiteGateHalo 900ms ease-in-out infinite alternate;
}

.suite-phase-gate-sigil .suite-card-glyph {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--suite-gate-primary) 56%, transparent));
  animation: suiteGateSigil 1480ms cubic-bezier(0.18, 0.82, 0.18, 1) both;
}

.suite-phase-gate-action {
  margin-bottom: 0.42rem;
  font-size: 0.6rem;
  opacity: 0.7;
}

.suite-phase-gate-title {
  margin: 0;
  font-size: clamp(2rem, 6vw, 4.7rem);
  font-weight: 520;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-shadow: 0 0 38px color-mix(in srgb, var(--suite-gate-primary) 35%, transparent);
}

.suite-phase-gate-route {
  display: flex;
  width: min(84vw, 450px);
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
  margin-top: clamp(22px, 4vh, 34px);
  color: rgba(225, 238, 255, 0.54);
  font-size: 0.68rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.suite-phase-gate-route-line {
  position: relative;
  height: 1px;
  flex: 1 1 80px;
  background: linear-gradient(90deg, transparent, var(--suite-gate-primary), transparent);
}

.suite-phase-gate-route-line::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 14px var(--suite-gate-primary);
  content: "";
  transform: translateY(-50%);
  animation: suiteGateRoutePulse 820ms ease-in-out both;
}

.suite-phase-gate-progress {
  width: min(74vw, 360px);
  height: 2px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
}

.suite-phase-gate-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--suite-gate-secondary), white, var(--suite-gate-primary));
  box-shadow: 0 0 16px var(--suite-gate-primary);
  transform: scaleX(0);
  transform-origin: left;
  animation: suiteGateProgress 980ms cubic-bezier(0.2, 0.72, 0.2, 1) 180ms both;
}

@keyframes suiteGateShell {
  0%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes suiteGateVeil {
  0% { clip-path: circle(0 at var(--suite-switch-origin-x) var(--suite-switch-origin-y)); }
  44%, 70% { clip-path: circle(160vmax at var(--suite-switch-origin-x) var(--suite-switch-origin-y)); }
  100% { clip-path: circle(0 at 50% 50%); }
}

@keyframes suiteGateShutterLeft {
  0% { opacity: 0; transform: translateX(-105%); }
  15%, 62% { opacity: 0.9; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-105%); }
}

@keyframes suiteGateShutterRight {
  0% { opacity: 0; transform: translateX(105%); }
  15%, 62% { opacity: 0.9; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(105%); }
}

@keyframes suiteGateOrbitIn {
  0%, 10% { opacity: 0; transform: translate(-50%, -50%) scale(0.38) rotate(-18deg); }
  32%, 72% { opacity: 0.72; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.34) rotate(12deg); }
}

@keyframes suiteGateContent {
  0%, 16% { opacity: 0; transform: scale(0.84) translateY(24px); filter: blur(12px); }
  36%, 72% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.08) translateY(-12px); filter: blur(8px); }
}

@keyframes suiteGateSigil {
  0%, 18% { opacity: 0; transform: scale(0.56) rotate(-22deg); }
  44%, 72% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.22) rotate(8deg); }
}

@keyframes suiteGateHalo {
  from { opacity: 0.58; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.06); }
}

@keyframes suiteGateFieldSpin {
  to { transform: rotate(360deg); }
}

@keyframes suiteGateRingSpin {
  to { transform: rotate(360deg); }
}

@keyframes suiteGateRingSpinReverse {
  to { transform: rotate(-360deg); }
}

@keyframes suiteGateRoutePulse {
  to { left: calc(100% - 6px); }
}

@keyframes suiteGateProgress {
  to { transform: scaleX(1); }
}

@media (max-width: 640px) {
  :is(.suite-switcher-anchor, [data-suite-switcher-anchor]) {
    width: min(286px, calc(100vw - 24px));
  }

  .suite-switcher-menu {
    width: min(94vw, 390px);
    max-height: min(72dvh, 520px);
    overflow-y: auto;
    padding-bottom: max(0.68rem, env(safe-area-inset-bottom));
  }

  .suite-switcher-item {
    min-height: 62px;
  }

  .suite-phase-gate-orbit {
    width: 116vw;
  }

  .suite-phase-gate-route {
    font-size: 0.57rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suite-phase-gate,
  .suite-phase-gate-veil,
  .suite-phase-gate-shutter,
  .suite-phase-gate-orbit,
  .suite-phase-gate-content,
  .suite-phase-gate-sigil .suite-card-glyph,
  .suite-phase-gate-progress > span {
    animation-duration: 220ms !important;
    animation-timing-function: ease-out !important;
  }

  .suite-phase-gate-veil {
    clip-path: none;
    opacity: 0.96;
  }

  .suite-phase-gate-shutter,
  .suite-phase-gate-orbit,
  .suite-phase-gate-route,
  .suite-phase-gate-progress {
    display: none;
  }

  .suite-phase-gate-content {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .suite-phase-gate-sigil-halo,
  .suite-glyph-motion,
  .suite-glyph-core-mark {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .suite-switcher-icon,
  .suite-switcher-item-icon,
  .suite-phase-gate-ring,
  .suite-phase-gate-sigil-halo {
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  .suite-phase-gate-veil,
  .suite-phase-gate-shutter {
    background: Canvas;
  }
}

.mobile-profile-chip {
  position: relative;
  display: none;
  flex: 0 0 auto;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  padding: 0.2rem;
}

.mobile-profile-chip.is-active {
  border-color: rgba(147, 214, 255, 0.28);
  background: rgba(47, 125, 255, 0.18);
}

.mobile-profile-avatar {
  inline-size: 36px;
  block-size: 36px;
  font-size: 0.68rem;
  box-shadow: 0 0 18px rgba(47, 125, 255, 0.3);
}

.beta-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--beta-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.beta-nav-links .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--beta-radius-pill);
  background: transparent;
  color: #eef3ff;
  font-size: var(--beta-text-sm);
  font-weight: 650;
  line-height: 1;
  padding: 0.38rem 0.8rem;
  text-decoration: none;
  transition:
    background-color var(--beta-transition-base),
    border-color var(--beta-transition-base),
    box-shadow var(--beta-transition-slow),
    color var(--beta-transition-base),
    transform var(--beta-spring-bounce);
}

.beta-nav-links .nav-link:hover,
.beta-nav-links .nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 18px rgba(47, 125, 255, 0.12);
  color: #ffffff;
  transform: none;
}

.beta-nav-links .nav-link.is-active {
  border-color: rgba(147, 214, 255, 0.28);
  background: rgba(47, 125, 255, 0.16);
  box-shadow: 0 0 18px rgba(47, 125, 255, 0.16);
  color: #ffffff;
}

.beta-mobile-controls {
  position: relative;
  z-index: 4;
  display: none;
  align-items: center;
  justify-self: end;
  gap: var(--beta-space-2);
  position: relative;
  z-index: 3;
}

.beta-mobile-profile-anchor {
  position: relative;
}

.beta-nav-toggle {
  --beta-icon-button-size: var(--beta-control-md);
}

.beta-nav-toggle-icon {
  position: relative;
  display: block;
  inline-size: 18px;
  block-size: 18px;
}

.beta-nav-toggle-line {
  position: absolute;
  display: block;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 18px;
  block-size: 2px;
  border-radius: var(--beta-radius-pill);
  background: currentColor;
  transform-origin: center;
  transition:
    transform var(--beta-transition-fast),
    opacity var(--beta-transition-fast);
}

.beta-nav-toggle-line:first-child {
  transform: translate(-50%, -50%) rotate(0deg);
}

.beta-nav-toggle-line + .beta-nav-toggle-line {
  transform: translate(-50%, -50%) rotate(90deg);
}

.beta-nav-toggle[aria-expanded="true"] .beta-nav-toggle-line:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.beta-nav-toggle[aria-expanded="true"] .beta-nav-toggle-line + .beta-nav-toggle-line {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.beta-nav-mobile-panel {
  position: relative;
  z-index: 3;
  display: none;
  margin-top: var(--beta-space-3);
  width: min(var(--beta-mobile-shell-width), calc(100vw - var(--beta-mobile-shell-edge-gap)));
  margin-inline: auto;
}

.beta-nav-mobile-panel.show,
.beta-nav-mobile-panel.collapsing {
  display: block;
}

.beta-nav-mobile-inner {
  display: grid;
  --beta-shell-blur: 22px;
  gap: var(--beta-space-4);
  border-radius: 28px;
  background: rgba(7, 8, 27, 0.94);
  padding: calc(var(--beta-space-4) * 1.2);
  max-block-size: min(70vh, 520px);
  overflow: auto;
}

.beta-nav-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  border: 0;
  background: rgba(4, 7, 18, 0);
  backdrop-filter: blur(0);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--beta-transition-base),
    background-color var(--beta-transition-base),
    backdrop-filter var(--beta-transition-base);
}

.beta-nav-mobile-backdrop.is-visible {
  background: rgba(4, 7, 18, 0.28);
  backdrop-filter: blur(8px);
  opacity: 1;
  pointer-events: auto;
}

.beta-nav-links-mobile {
  flex-direction: column;
  align-items: stretch;
  gap: var(--beta-space-2);
}

.beta-nav-links-mobile .nav-link {
  justify-content: flex-start;
  width: 100%;
  min-height: 46px;
  padding: 0.9rem 1.05rem;
}

@media (min-width: 1200px) {
  .beta-nav-mobile-panel {
    display: none !important;
  }
}

.nav-account {
  min-width: 0;
}

.nav-account-mobile {
  display: flex;
  width: 100%;
  padding-top: var(--beta-space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-account-mobile .user-bar {
  width: 100%;
  max-width: none;
}

.btn-beta {
  --btn-beta-height: var(--beta-control-md);
  --btn-beta-padding-inline: var(--beta-button-padding-md);
  --btn-beta-font-size: var(--beta-button-font-md);
  --btn-beta-background: linear-gradient(180deg, rgba(44, 55, 92, 0.96) 0%, rgba(19, 25, 53, 0.98) 100%);
  --btn-beta-background-hover: linear-gradient(180deg, rgba(51, 66, 110, 0.98) 0%, rgba(22, 30, 64, 1) 100%);
  --btn-beta-foreground: #ffffff;
  --btn-beta-glow-color: rgba(107, 160, 255, 0.56);
  --btn-beta-glow-opacity: 0.46;
  --btn-beta-glow-opacity-hover: 0.64;
  --btn-beta-shadow: none;
  --btn-beta-shadow-hover: none;
  --btn-beta-shadow-focus: var(--beta-ring);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--beta-space-2);
  min-height: var(--btn-beta-height);
  padding: 0.68rem var(--btn-beta-padding-inline);
  border: 0;
  border-radius: var(--beta-radius-pill);
  font-size: var(--btn-beta-font-size);
  font-weight: 780;
  letter-spacing: var(--beta-button-letter-spacing);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  background: var(--btn-beta-background);
  color: var(--btn-beta-foreground);
  box-shadow: var(--btn-beta-shadow);
  isolation: isolate;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  transition:
    color var(--beta-transition-base),
    background var(--beta-transition-base),
    box-shadow var(--beta-transition-slow),
    transform var(--beta-spring-bounce),
    filter var(--beta-transition-base);
}

.btn-beta::before {
  position: absolute;
  inset: -28% auto auto 50%;
  z-index: 0;
  width: min(56%, 370px);
  height: 68%;
  border-radius: 100%;
  background: var(--btn-beta-glow-color);
  content: "";
  opacity: var(--btn-beta-glow-opacity);
  filter: blur(18px);
  transform: translateX(-50%);
  transition:
    opacity 220ms ease,
    transform var(--beta-spring-soft);
  pointer-events: none;
}

.btn-beta-label,
.btn-beta-prefix,
.btn-beta-suffix {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1em;
}

.btn-beta-label {
  line-height: 1;
  text-align: center;
  text-shadow: none;
}

.btn-beta-prefix svg,
.btn-beta-suffix svg {
  inline-size: 1em;
  block-size: 1em;
}

.btn-beta-sm {
  --btn-beta-height: var(--beta-control-sm);
  --btn-beta-padding-inline: var(--beta-button-padding-sm);
  --btn-beta-font-size: var(--beta-button-font-sm);
}

.btn-beta-md {
  --btn-beta-height: var(--beta-control-md);
  --btn-beta-padding-inline: var(--beta-button-padding-md);
  --btn-beta-font-size: var(--beta-button-font-md);
}

.btn-beta-lg {
  --btn-beta-height: var(--beta-control-lg);
  --btn-beta-padding-inline: var(--beta-button-padding-lg);
  --btn-beta-font-size: 1.1875rem;
}

.btn-beta-primary {
  --btn-beta-background: linear-gradient(180deg, #2f7dff 0%, #113fae 100%);
  --btn-beta-background-hover: linear-gradient(180deg, #4e9bff 0%, #174bc3 100%);
  --btn-beta-glow-color: #7fc8ff;
  --btn-beta-glow-opacity: 0.72;
  --btn-beta-glow-opacity-hover: 0.86;
}

.btn-beta-secondary {
  --btn-beta-background: linear-gradient(180deg, rgba(42, 50, 84, 0.94) 0%, rgba(17, 22, 46, 0.98) 100%);
  --btn-beta-background-hover: linear-gradient(180deg, rgba(50, 62, 104, 0.98) 0%, rgba(22, 29, 60, 1) 100%);
  --btn-beta-glow-color: rgba(128, 184, 255, 0.48);
  --btn-beta-glow-opacity: 0.3;
  --btn-beta-glow-opacity-hover: 0.5;
}

.btn-beta-light,
.btn-beta-white {
  --btn-beta-background: linear-gradient(180deg, #ffffff 0%, #dbe9ff 100%);
  --btn-beta-background-hover: linear-gradient(180deg, #ffffff 0%, #cfe1ff 100%);
  --btn-beta-foreground: #061225;
  --btn-beta-glow-color: rgba(255, 255, 255, 0.62);
  --btn-beta-glow-opacity: 0.28;
  --btn-beta-glow-opacity-hover: 0.4;
  --btn-beta-shadow: 0 14px 32px rgba(132, 182, 255, 0.18);
  --btn-beta-shadow-hover: 0 18px 38px rgba(132, 182, 255, 0.24);
}

.btn-beta:hover,
.btn-beta:focus-visible {
  color: var(--btn-beta-foreground);
  background: var(--btn-beta-background-hover);
  transform: none;
}

.btn-beta:hover {
  box-shadow: var(--btn-beta-shadow-hover);
}

.btn-beta:hover::before,
.btn-beta:focus-visible::before {
  opacity: var(--btn-beta-glow-opacity-hover);
  transform: translateX(-50%) scale(1.04);
}

.btn-beta:focus-visible {
  box-shadow: var(--btn-beta-shadow-focus);
}

.btn-beta:active {
  color: var(--btn-beta-foreground);
  transform: translateY(0) scale(0.985);
}

.btn-beta-primary:active,
.btn-beta-secondary:active {
  box-shadow: none;
}

.btn-beta:focus-visible {
  outline: none;
}

.btn-beta:disabled,
.btn-beta[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--btn-beta-foreground);
  opacity: 0.56;
  box-shadow: none;
  filter: saturate(0.7);
  transform: none;
}

.btn-beta:disabled::before,
.btn-beta[aria-disabled="true"]::before {
  opacity: 0.24;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .btn-beta,
  .btn-beta::before {
    transition: none;
  }
}

.user-bar {
  display: grid;
  --beta-shell-blur: 18px;
  gap: 0.72rem;
  width: min(100%, 470px);
  border-radius: var(--beta-radius-xl);
  background: rgba(14, 15, 36, 0.72);
  padding: 0.8rem;
}

.user-bar-right {
  margin-left: auto;
}

.user-bar-stretch {
  width: 100%;
  margin-inline: 0;
}

.user-bar-preview {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "meta"
    "progress";
  align-items: start;
  gap: 0.6rem;
}

.user-preview-head {
  grid-area: head;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  width: 100%;
}

.user-top-rail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-width: fit-content;
}

.user-bar-preview .profile-badge-rail-inline {
  margin-left: 0;
  padding-left: 0;
}

.user-bar-preview .user-controls {
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.user-bar-cluster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: min(100%, 304px);
  border: var(--beta-border-width) solid var(--beta-line);
  border-radius: var(--beta-radius-pill);
  background: rgba(14, 15, 36, 0.56);
  box-shadow: var(--beta-shadow-md);
  backdrop-filter: blur(var(--beta-shell-blur, 18px));
  padding: 0.35rem 0.45rem 0.35rem 0.35rem;
}

.user-bar-menu.user-bar-cluster {
  width: 100%;
  padding: 0.55rem 0.65rem 0.55rem 0.55rem;
  background: linear-gradient(180deg, rgba(16, 18, 44, 0.84), rgba(12, 14, 35, 0.78));
}

.user-profile-trigger {
  color: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.nav-user-identity {
  flex: 1 1 auto;
  overflow: hidden;
}

.nav-user-controls {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.user-bar-menu .user-profile {
  min-width: 0;
}

.user-bar-menu .user-copy p {
  font-size: 0.98rem;
}

.user-bar-menu .user-copy span {
  color: rgba(215, 224, 245, 0.74);
}

.user-bar-menu .user-controls {
  flex-wrap: nowrap;
}

.user-profile,
.user-controls,
.user-action-row,
.user-icon-button,
.user-meta {
  display: flex;
  align-items: center;
}

.user-profile {
  gap: 0.75rem;
  min-width: 0;
}

.user-profile-identity {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.user-profile-identity:hover .user-copy p,
.user-profile-identity:focus-visible .user-copy p {
  color: #ffffff;
}

.user-profile-identity:focus-visible {
  outline: none;
}

.user-bar-preview .user-profile {
  width: 100%;
}

.user-avatar {
  inline-size: 38px;
  block-size: 38px;
  font-size: 0.72rem;
  box-shadow: 0 0 24px rgba(47, 125, 255, 0.26);
}

.user-copy {
  min-width: 0;
}

.user-copy p,
.user-copy span {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-copy p {
  color: var(--beta-ink);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: var(--beta-leading-tight);
}

.user-copy span {
  color: var(--beta-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.user-controls {
  justify-content: flex-end;
  gap: var(--beta-space-2);
}

.user-bar-preview .user-controls {
  align-self: start;
  justify-self: end;
}

.user-icon-button {
  justify-content: center;
}

.user-icon-button svg,
.user-action-icon svg {
  inline-size: 18px;
  block-size: 18px;
}

.user-meta {
  flex-wrap: wrap;
  gap: 0.45rem;
}

.user-bar-preview .user-meta {
  grid-area: meta;
}

.user-bar-preview .user-progress-summary {
  grid-area: progress;
  padding: 0.68rem 0.82rem;
  gap: 0.68rem;
  border-radius: 20px;
}

.user-bar-preview .user-progress-summary-icon {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 8px 16px rgba(35, 113, 255, 0.18));
}

.user-bar-preview .user-progress-summary-copy {
  gap: 0.45rem;
}

.user-bar-preview .user-progress-summary-head strong {
  font-size: 0.96rem;
}

.user-bar-preview .user-progress-summary-head span,
.user-bar-preview .user-progress-summary-tail {
  font-size: 0.74rem;
}

.user-bar-preview .user-progress-summary-bar {
  height: 7px;
}

.user-progress-summary {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-width: 0;
  border: var(--beta-border-width) solid rgba(94, 143, 255, 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 24%, rgba(92, 183, 255, 0.16), transparent 10rem),
    linear-gradient(155deg, rgba(22, 28, 64, 0.92), rgba(8, 10, 28, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 38px rgba(0, 0, 0, 0.2);
  color: var(--beta-ink);
  padding: 0.95rem 1rem;
  text-align: left;
}

.user-progress-summary.is-actionable {
  cursor: pointer;
  transition:
    transform var(--beta-transition-base),
    border-color var(--beta-transition-base),
    box-shadow var(--beta-transition-base),
    background-color var(--beta-transition-base);
}

.user-progress-summary.is-actionable:hover,
.user-progress-summary.is-actionable:focus-visible {
  border-color: rgba(120, 176, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 46px rgba(0, 0, 0, 0.24);
  outline: none;
  transform: translateY(-1px);
}

.user-progress-summary-icon {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  flex: 0 0 auto;
  filter: drop-shadow(0 12px 24px rgba(35, 113, 255, 0.24));
}

.user-progress-summary-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.user-progress-summary-copy {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.user-progress-summary-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.user-progress-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.user-progress-summary-head strong {
  color: var(--beta-ink);
  font-size: 1.2rem;
  font-weight: 820;
  line-height: 1;
}

.user-progress-summary-head span,
.user-progress-summary-tail {
  color: var(--beta-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.35;
}

.user-progress-summary-bar {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.user-progress-summary-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(102, 214, 255, 0.95), rgba(73, 128, 255, 0.98));
  box-shadow: 0 0 18px rgba(73, 128, 255, 0.32);
}

.user-progress-summary-tail {
  max-width: none;
  text-align: right;
  white-space: nowrap;
}

.user-progress-summary-tail.is-boosted {
  color: #eef5ff;
}

.profile-badge-rail {
  min-width: 0;
}

.profile-badge-rail-inline {
  display: grid;
  gap: 4px;
  margin-left: auto;
  padding-left: 0.5rem;
}

.profile-badge-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-badge-rail-head span:first-child {
  color: #f1f5ff;
  font-size: 0.8rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-badge-rail-head span:last-child,
.profile-badge-rail-copy {
  color: var(--beta-muted);
  font-size: 0.78rem;
}

.profile-badge-slot-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  gap: 10px;
}

.profile-badge-slot {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  aspect-ratio: 1;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%),
    linear-gradient(150deg, rgba(18, 22, 52, 0.9), rgba(10, 12, 30, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.profile-badge-slot[type="button"] {
  appearance: none;
  cursor: pointer;
}

.profile-badge-slot.is-filled {
  border-color: color-mix(in srgb, var(--profile-badge-accent) 38%, rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px color-mix(in srgb, var(--profile-badge-accent) 12%, transparent),
    0 18px 34px color-mix(in srgb, var(--profile-badge-accent) 12%, transparent);
}

.profile-badge-slot img {
  display: block;
  width: 108%;
  height: 108%;
  object-fit: contain;
  transform: translateY(var(--profile-badge-slot-offset-y, 0)) scale(var(--profile-badge-slot-scale, 1));
  transform-origin: center center;
  filter:
    drop-shadow(0 14px 24px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 16px color-mix(in srgb, var(--profile-badge-accent) 42%, transparent));
}

.profile-badge-slot-mark {
  color: rgba(226, 234, 252, 0.42);
  font-size: 0.92rem;
  font-weight: 820;
}

.profile-badge-inline-count {
  justify-self: end;
  color: rgba(216, 226, 248, 0.7);
  font-size: 0.67rem;
  font-weight: 780;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.profile-badge-rail-inline .profile-badge-slot-row {
  gap: 8px;
}

.profile-badge-rail-inline .profile-badge-slot {
  width: 34px;
  min-width: 34px;
  border-radius: 12px;
}

.profile-badge-rail-inline .profile-badge-slot:not(.is-filled) {
  background: rgba(255, 255, 255, 0.03);
}

.profile-badge-rail-inline .profile-badge-slot:hover,
.profile-badge-rail-inline .profile-badge-slot:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.2);
}

.profile-badge-rail-dropdown {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.profile-badge-rail-dropdown .profile-badge-slot-row {
  grid-template-columns: repeat(4, minmax(0, 52px));
  justify-content: start;
  gap: 8px;
}

.profile-badge-rail-dropdown .profile-badge-slot {
  width: 52px;
  min-width: 52px;
  border-radius: 14px;
}

.profile-badge-rail-dropdown .profile-badge-slot img {
  width: 102%;
  height: 102%;
}

.profile-badge-rail-profile {
  display: grid;
  gap: 8px;
}

.profile-badge-rail-profile .profile-badge-slot-row {
  grid-template-columns: repeat(4, minmax(0, 58px));
  justify-content: start;
  gap: 8px;
}

.profile-badge-rail-profile .profile-badge-slot {
  width: 58px;
  min-width: 58px;
  border-radius: 15px;
}

.profile-badge-rail-copy {
  margin: 0;
  line-height: 1.45;
}

.profile-badge-viewer {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 16px;
}

.profile-badge-viewer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 5, 16, 0.72);
  backdrop-filter: blur(20px);
}

.profile-badge-viewer-shell {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  border: var(--beta-border-width) solid rgba(128, 166, 255, 0.2);
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 32%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(155deg, rgba(18, 22, 54, 0.96), rgba(8, 10, 28, 0.96));
  box-shadow:
    0 40px 90px rgba(3, 7, 19, 0.56),
    0 0 0 1px rgba(62, 101, 182, 0.12);
  overflow: hidden;
  padding: 20px;
}

.profile-badge-viewer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(238, 244, 255, 0.88);
}

.profile-badge-viewer-close:hover,
.profile-badge-viewer-close:focus-visible {
  background: rgba(79, 128, 230, 0.22);
  color: #ffffff;
}

.profile-badge-viewer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.62fr);
  gap: 16px;
  align-items: center;
}

.profile-badge-viewer-stage {
  display: grid;
  place-items: center;
  min-height: 260px;
  overflow: hidden;
  perspective: 1100px;
}

.profile-badge-tilt-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 240px);
  aspect-ratio: 1;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--profile-badge-accent) 18%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  contain: layout paint;
  transform-style: preserve-3d;
  transform: rotateX(var(--badge-rotate-x)) rotateY(var(--badge-rotate-y));
  transition: transform 140ms ease-out;
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: transform;
}

.profile-badge-tilt-shell:active {
  cursor: grabbing;
}

.profile-badge-tilt-shell.is-dragging {
  transition: none;
}

.profile-badge-tilt-shell img,
.profile-badge-tilt-glow,
.profile-badge-tilt-shine {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.profile-badge-tilt-shell img {
  inset: 8%;
  width: auto;
  height: auto;
  max-width: 84%;
  max-height: 84%;
  margin: auto;
  object-fit: contain;
  transform: translateZ(18px);
  filter:
    drop-shadow(0 18px 30px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 14px color-mix(in srgb, var(--profile-badge-accent) 34%, transparent));
}

.profile-badge-tilt-glow {
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--profile-badge-accent) 28%, transparent), transparent 64%);
  transform: translateZ(6px) scale(0.88);
  filter: blur(10px);
}

.profile-badge-tilt-shine {
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.12) 68%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0.52;
  transform: translateZ(24px) scale(0.84);
}

.profile-badge-viewer-copy {
  display: grid;
  gap: 10px;
}

.profile-badge-viewer-copy h3 {
  margin: 0;
  color: var(--beta-ink);
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  font-weight: 840;
  line-height: 1;
}

.profile-badge-viewer-copy p {
  margin: 0;
}

.profile-badge-viewer-copy p:last-child {
  color: var(--beta-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.profile-badge-viewer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-badge-viewer-meta span {
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: #dce6fb;
  font-size: 0.76rem;
  font-weight: 780;
  padding: 0.48rem 0.7rem;
}

.public-profile-viewer {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: grid;
  place-items: center;
  padding: 24px;
}

.public-profile-viewer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(70, 199, 255, 0.16), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(77, 111, 255, 0.16), transparent 24%),
    rgba(3, 5, 17, 0.8);
  backdrop-filter: blur(24px);
}

.public-profile-viewer-shell {
  position: relative;
  z-index: 1;
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  border: var(--beta-border-width) solid rgba(122, 164, 255, 0.22);
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 18%, rgba(50, 220, 255, 0.16), transparent 22rem),
    radial-gradient(circle at 88% 8%, rgba(76, 123, 255, 0.2), transparent 18rem),
    radial-gradient(circle at 24% 100%, rgba(255, 94, 150, 0.1), transparent 20rem),
    linear-gradient(155deg, rgba(14, 18, 44, 0.98), rgba(6, 8, 22, 0.98));
  box-shadow:
    0 42px 96px rgba(4, 8, 20, 0.6),
    0 0 0 1px rgba(108, 149, 236, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden auto;
  padding: 30px 86px 30px 30px;
  isolation: isolate;
}

.public-profile-viewer-shell::before,
.public-profile-viewer-shell::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.public-profile-viewer-shell::before {
  inset: 0 auto auto 0;
  width: 58%;
  height: 54%;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 68%);
  opacity: 0.7;
}

.public-profile-viewer-shell::after {
  inset: auto 0 0 auto;
  width: 44%;
  height: 46%;
  background: radial-gradient(circle at bottom right, rgba(88, 140, 255, 0.12), transparent 70%);
  opacity: 0.8;
}

.public-profile-viewer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(238, 244, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition:
    background var(--beta-transition-base),
    transform var(--beta-transition-base),
    color var(--beta-transition-base);
}

.public-profile-viewer-close:hover,
.public-profile-viewer-close:focus-visible {
  background: rgba(79, 128, 230, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
  outline: none;
}

.public-profile-viewer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.82fr);
  gap: 22px;
}

.public-profile-hero-card,
.public-profile-side-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  background:
    linear-gradient(155deg, rgba(22, 28, 64, 0.88), rgba(8, 10, 28, 0.9)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 26px 56px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.public-profile-hero-card {
  position: relative;
  overflow: hidden;
  gap: 18px;
  padding: 24px;
}

.public-profile-hero-card::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(85, 154, 255, 0.16), transparent 16rem);
  content: "";
  pointer-events: none;
}

.public-profile-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.public-profile-side-card {
  padding: 18px;
}

.public-profile-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.public-profile-kicker-stack,
.public-profile-copy,
.public-profile-note-card,
.public-profile-snapshot-lead {
  display: grid;
  gap: 6px;
}

.public-profile-kicker,
.public-profile-side-label {
  color: #8fc7ff;
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.14em;
  margin: 0;
  text-transform: uppercase;
}

.public-profile-subkicker {
  color: rgba(212, 225, 255, 0.52);
  font-size: 0.76rem;
  font-weight: 680;
  letter-spacing: 0.06em;
}

.public-profile-status,
.public-profile-pill-row span,
.public-profile-marker-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 36px;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: #dce8ff;
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1;
  padding: 0.55rem 1rem;
}

.public-profile-status {
  min-width: 96px;
  padding: 0.55rem 1.02rem;
}

.public-profile-status-anchor {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.public-profile-status-button {
  appearance: none;
  cursor: pointer;
  transition:
    border-color var(--beta-transition-base),
    background-color var(--beta-transition-base),
    transform var(--beta-transition-base),
    box-shadow var(--beta-transition-base);
}

.public-profile-status-button:hover,
.public-profile-status-button:focus-visible,
.public-profile-status-button.is-open {
  border-color: rgba(146, 196, 255, 0.3);
  box-shadow: 0 10px 24px rgba(6, 12, 34, 0.24);
  outline: none;
  transform: translateY(-1px);
}

.public-profile-status-caret {
  font-size: 0.7rem;
  opacity: 0.86;
  transition: transform var(--beta-transition-base);
}

.public-profile-status-button.is-open .public-profile-status-caret {
  transform: rotate(180deg);
}

.public-profile-status.is-online {
  background: rgba(74, 194, 124, 0.12);
  border-color: rgba(74, 194, 124, 0.22);
}

.public-profile-status.is-away {
  background: rgba(255, 188, 84, 0.12);
  border-color: rgba(255, 188, 84, 0.2);
}

.public-profile-status.is-busy {
  background: rgba(255, 118, 118, 0.12);
  border-color: rgba(255, 118, 118, 0.2);
}

.public-profile-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.public-profile-status-dot.is-ready,
.public-profile-status-dot.is-online {
  color: #84d8ff;
}

.public-profile-status-dot.is-away {
  color: #ffc56c;
}

.public-profile-status-dot.is-busy {
  color: #ff8585;
}

.public-profile-status-dot.is-offline {
  color: rgba(205, 219, 255, 0.58);
}

.public-profile-status-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(220px, calc(100vw - 32px));
  display: grid;
  gap: 6px;
  padding: 8px;
  border: var(--beta-border-width) solid rgba(129, 167, 255, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(26, 31, 61, 0.98), rgba(12, 15, 34, 0.98)),
    var(--beta-surface);
  box-shadow: var(--beta-shadow-lg);
}

.public-profile-status-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 0.48rem 0.72rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--beta-muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 780;
  text-align: left;
  cursor: pointer;
}

.public-profile-status-option:hover,
.public-profile-status-option:focus-visible,
.public-profile-status-option.is-active {
  background: rgba(47, 125, 255, 0.18);
  color: #ffffff;
  outline: none;
}

.public-profile-avatar {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 108px;
  height: 108px;
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(135deg, #67d5ff, #2f7dff 52%, #132f8d);
  box-shadow:
    0 24px 44px rgba(5, 12, 32, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 860;
  overflow: hidden;
}

.public-profile-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.public-profile-meta-row,
.public-profile-pill-row,
.public-profile-marker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.public-profile-workspace-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(114, 171, 255, 0.16);
  border-radius: 999px;
  background: rgba(77, 125, 255, 0.12);
  color: #e8f1ff;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.public-profile-copy h2 {
  margin: 0;
  color: var(--beta-ink);
  font-size: clamp(2.1rem, 4.3vw, 3.35rem);
  font-weight: 840;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.public-profile-handle,
.public-profile-summary,
.public-profile-note-card p,
.public-profile-marker-empty,
.public-profile-snapshot-lead span {
  margin: 0;
  color: var(--beta-muted);
}

.public-profile-handle {
  align-self: center;
  color: rgba(222, 233, 255, 0.8);
  font-weight: 700;
}

.public-profile-summary,
.public-profile-note-card p,
.public-profile-marker-empty,
.public-profile-snapshot-lead span {
  line-height: 1.6;
}

.public-profile-summary {
  max-width: 34rem;
  font-size: 1rem;
}

.public-profile-note-card {
  position: relative;
  z-index: 1;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(8, 10, 27, 0.42);
}

.public-profile-side-card-snapshot {
  background:
    radial-gradient(circle at 84% 14%, rgba(66, 136, 255, 0.16), transparent 12rem),
    linear-gradient(155deg, rgba(22, 28, 64, 0.92), rgba(8, 10, 28, 0.92));
}

.public-profile-snapshot-lead strong {
  color: var(--beta-ink);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  font-weight: 820;
  line-height: 1;
}

.public-profile-side-card-progression {
  gap: 16px;
  background:
    radial-gradient(circle at 74% 12%, rgba(66, 136, 255, 0.2), transparent 12rem),
    linear-gradient(155deg, rgba(20, 26, 62, 0.94), rgba(8, 10, 28, 0.92));
}

.public-profile-progress-head,
.public-profile-progress-meter-copy,
.public-profile-progress-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.public-profile-progress-boost {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.42rem 0.78rem;
  border: 1px solid rgba(82, 145, 255, 0.18);
  border-radius: 999px;
  background: rgba(82, 145, 255, 0.14);
  color: #ecf4ff;
  font-size: 0.75rem;
  font-weight: 760;
  letter-spacing: 0.04em;
}

.public-profile-progress-boost.is-idle {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(228, 238, 255, 0.8);
}

.public-profile-progress-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.public-profile-progress-art-shell {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(98, 150, 255, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(160deg, rgba(24, 35, 84, 0.94), rgba(11, 15, 38, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 38px rgba(2, 8, 28, 0.28);
}

.public-profile-progress-art {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(22, 106, 255, 0.2));
}

.public-profile-progress-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.public-profile-progress-title {
  color: var(--beta-ink);
  font-size: 1.45rem;
  font-weight: 820;
  line-height: 1;
}

.public-profile-progress-subcopy,
.public-profile-progress-meter-copy span,
.public-profile-progress-stat span {
  color: var(--beta-muted);
}

.public-profile-progress-subcopy {
  font-size: 0.94rem;
  line-height: 1.45;
}

.public-profile-progress-stats {
  align-items: stretch;
}

.public-profile-progress-stat {
  flex: 1 1 0;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.public-profile-progress-stat span,
.public-profile-progress-meter-copy span {
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.3;
}

.public-profile-progress-stat strong {
  color: var(--beta-ink);
  font-size: 1.1rem;
  font-weight: 820;
  line-height: 1.1;
}

.public-profile-progress-meter {
  display: grid;
  gap: 10px;
}

.public-profile-progress-meter-track {
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.public-profile-progress-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(108, 214, 255, 0.95), rgba(73, 128, 255, 0.98));
  box-shadow: 0 0 22px rgba(78, 148, 255, 0.35);
}

.public-profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.public-profile-stat {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px 15px;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
}

.public-profile-stat span {
  color: var(--beta-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-profile-stat strong {
  color: var(--beta-ink);
  font-size: 1rem;
  font-weight: 800;
}

.public-profile-side-card-markers {
  align-content: start;
}

.public-profile-marker-empty {
  font-size: 0.92rem;
}

.public-profile-side-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.public-profile-side-foot span {
  color: var(--beta-muted);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.public-profile-side-foot strong {
  color: var(--beta-ink);
  font-size: 1rem;
  font-weight: 820;
}

.user-meta span,
.module-tags span,
.module-key {
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.06);
  border-radius: var(--beta-radius-pill);
  background: rgba(47, 125, 255, 0.14);
  color: #d7e9ff;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1;
  padding: 0.55rem 0.75rem;
}

.user-action-row {
  flex-wrap: wrap;
  gap: var(--beta-space-2);
}

.user-bar-preview .user-action-row {
  grid-area: actions;
  display: none;
}

.user-action {
  flex: 0 0 auto;
}

.user-status-action-anchor {
  position: relative;
  flex: 0 0 auto;
}

.user-status-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 170;
  width: min(220px, calc(100vw - 32px));
  display: grid;
  gap: 6px;
  padding: 8px;
  border: var(--beta-border-width) solid rgba(129, 167, 255, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(26, 31, 61, 0.98), rgba(12, 15, 34, 0.98)),
    var(--beta-surface);
  box-shadow: var(--beta-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity var(--beta-transition-base),
    transform var(--beta-transition-base);
}

.user-status-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.user-status-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--beta-muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 780;
  text-align: left;
  cursor: pointer;
}

.user-status-option:hover,
.user-status-option:focus-visible,
.user-status-option.is-active {
  background: rgba(47, 125, 255, 0.18);
  color: #ffffff;
  outline: none;
}

.user-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--beta-accent-strong);
  box-shadow: 0 0 14px rgba(78, 182, 255, 0.45);
}

.user-notification-anchor {
  position: relative;
}

.user-social-anchor {
  position: relative;
}

.user-profile-anchor {
  position: relative;
}

.user-notifications-trigger.is-active,
.user-social-trigger.is-active,
.user-profile-trigger.is-active {
  background: rgba(47, 125, 255, 0.22);
  color: #ffffff;
}

.user-notifications-dropdown,
.user-social-dropdown,
.user-profile-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 360;
  width: min(420px, calc(100vw - 24px));
  max-height: min(72vh, 620px);
  border: var(--beta-border-width) solid rgba(129, 167, 255, 0.2);
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 20%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(155deg, rgba(18, 22, 54, 0.96) 0%, rgba(9, 12, 31, 0.96) 100%);
  box-shadow:
    0 32px 68px rgba(3, 6, 18, 0.42),
    0 0 0 1px rgba(62, 101, 182, 0.14);
  backdrop-filter: blur(22px);
  pointer-events: none;
  overflow: hidden;
  outline: none;
  opacity: 0;
  transform: translateY(10px);
  transform-origin: top right;
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.user-social-dropdown {
  width: min(390px, calc(100vw - 24px));
}

.user-profile-dropdown {
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 24px));
}

.user-notifications-dropdown.is-open,
.user-social-dropdown.is-open,
.user-profile-dropdown.is-open {
  pointer-events: auto;
}

.user-notifications-dropdown.is-open,
.user-social-dropdown.is-open,
.user-profile-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
}

.noctra-notifications-head,
.user-social-head,
.user-profile-dropdown-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 12px;
}

.noctra-notifications-head-copy,
.user-social-head-copy,
.user-profile-dropdown-head-copy {
  min-width: 0;
}

.noctra-notifications-head-copy h2,
.user-social-head-copy h2,
.user-profile-dropdown-head-copy h2 {
  margin: 4px 0 0;
  color: var(--beta-ink);
  font-size: 1.3rem;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.noctra-notifications-head-copy p:last-child,
.user-social-head-copy p:last-child,
.user-profile-dropdown-head-copy p:last-child {
  margin: 8px 0 0;
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
  line-height: 1.45;
}

.noctra-notifications-kicker,
.noctra-notification-kicker,
.user-social-kicker,
.user-profile-dropdown-kicker {
  margin: 0;
  color: var(--beta-accent-strong);
  font-size: 0.71rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.noctra-notifications-close,
.user-social-close,
.user-profile-dropdown-close {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(238, 244, 255, 0.86);
  transition:
    background-color var(--beta-transition-fast),
    color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.noctra-notifications-close:hover,
.noctra-notifications-close:focus-visible,
.user-social-close:hover,
.user-social-close:focus-visible,
.user-profile-dropdown-close:hover,
.user-profile-dropdown-close:focus-visible {
  background: rgba(79, 128, 230, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
}

.noctra-notifications-close svg,
.user-social-close svg,
.user-profile-dropdown-close svg {
  width: 18px;
  height: 18px;
}

.user-profile-dropdown-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 18px 18px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.user-profile-dropdown-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(145deg, rgba(19, 24, 58, 0.94), rgba(11, 14, 35, 0.94));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.user-profile-dropdown-avatar {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, #93d6ff 30%, #2f7dff 68%, #113a9b);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(47, 125, 255, 0.24);
  overflow: hidden;
}

.user-profile-dropdown-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.user-profile-dropdown-copy strong,
.user-profile-dropdown-link strong {
  color: var(--beta-ink);
}

.user-profile-dropdown-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.98rem;
  font-weight: 820;
}

.user-profile-dropdown-copy span,
.user-profile-dropdown-link span {
  color: var(--beta-muted);
}

.user-profile-dropdown-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}

.user-profile-dropdown-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.35rem 0.65rem;
  border-radius: var(--beta-radius-pill);
  background: rgba(47, 125, 255, 0.18);
  color: #d7e9ff;
  font-size: 0.74rem;
  font-weight: 780;
  white-space: nowrap;
}

.user-profile-dropdown-meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.user-profile-dropdown-meta > span {
  flex: 0 0 auto;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.06);
  border-radius: var(--beta-radius-pill);
  background: rgba(47, 125, 255, 0.14);
  color: #d7e9ff;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1;
  padding: 0.55rem 0.75rem;
}

.user-profile-dropdown-meta-controls {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  gap: 6px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.user-profile-dropdown-mini-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0.28rem 0.52rem 0.28rem 0.42rem;
  border: var(--beta-border-width) solid rgba(122, 150, 214, 0.18);
  border-radius: 999px;
  background: rgba(15, 20, 38, 0.62);
  color: rgba(214, 225, 255, 0.74);
  cursor: pointer;
  transition:
    border-color var(--beta-transition-fast),
    background-color var(--beta-transition-fast),
    box-shadow var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-profile-dropdown-mini-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.user-profile-dropdown-mini-toggle-track {
  position: relative;
  width: 24px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    background-color var(--beta-transition-fast),
    box-shadow var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-profile-dropdown-mini-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(240, 246, 255, 0.92);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  transition: transform var(--beta-transition-fast), background-color var(--beta-transition-fast);
}

.user-profile-dropdown-mini-toggle-label {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

.user-profile-dropdown-mini-toggle:hover,
.user-profile-dropdown-mini-toggle:focus-within {
  border-color: rgba(120, 166, 255, 0.34);
  background: rgba(19, 28, 54, 0.78);
  box-shadow: 0 0 0 1px rgba(111, 177, 255, 0.08);
  transform: translateY(-1px);
}

.user-profile-dropdown-mini-toggle:focus-within {
  outline: none;
}

.user-profile-dropdown-mini-toggle.is-active {
  border-color: rgba(112, 216, 255, 0.34);
  background: rgba(21, 48, 71, 0.84);
  color: #ecf6ff;
}

.user-profile-dropdown-mini-toggle.is-active .user-profile-dropdown-mini-toggle-track {
  background: linear-gradient(90deg, rgba(74, 214, 255, 0.92), rgba(77, 141, 255, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 18px rgba(74, 214, 255, 0.18);
}

.user-profile-dropdown-mini-toggle.is-active .user-profile-dropdown-mini-toggle-track::after {
  transform: translateX(10px);
}

.user-profile-dropdown-links {
  display: grid;
  gap: 10px;
}

.user-profile-dropdown-link {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition:
    border-color var(--beta-transition-fast),
    background-color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-profile-dropdown-link:hover,
.user-profile-dropdown-link:focus-visible {
  border-color: rgba(120, 166, 255, 0.24);
  background: rgba(47, 125, 255, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.user-profile-dropdown-link strong {
  font-size: 0.92rem;
  font-weight: 800;
}

.user-profile-dropdown-link span {
  font-size: 0.79rem;
  line-height: 1.4;
}

.user-social-actions {
  padding: 0 18px 12px;
}

.user-social-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(85, 178, 255, 0.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(40, 216, 210, 0.18), rgba(20, 189, 246, 0.14) 56%, rgba(47, 125, 255, 0.18));
  color: var(--beta-ink);
  font-weight: 820;
  transition:
    background-color var(--beta-transition-fast),
    border-color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-social-primary:hover,
.user-social-primary:focus-visible {
  border-color: rgba(85, 178, 255, 0.42);
  background: linear-gradient(135deg, rgba(40, 216, 210, 0.24), rgba(20, 189, 246, 0.2) 56%, rgba(47, 125, 255, 0.24));
  outline: none;
  transform: translateY(-1px);
}

.user-social-list {
  display: grid;
  gap: 10px;
  max-height: min(46vh, 380px);
  overflow-y: auto;
  padding: 0 14px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(132, 168, 230, 0.74) rgba(19, 26, 58, 0.62);
}

.user-social-contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  padding: 11px;
}

.user-social-identity {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.user-social-identity:hover .user-social-title-row strong,
.user-social-identity:focus-visible .user-social-title-row strong {
  color: #ffffff;
}

.user-social-identity:focus-visible {
  outline: none;
}

.user-social-avatar-wrap {
  position: relative;
  display: inline-flex;
}

.user-social-avatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.26), transparent 34%),
    linear-gradient(135deg, var(--beta-blue), #12214d);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 860;
  line-height: 1;
  box-shadow: none;
}

.user-social-status-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border: 2px solid #12162e;
  border-radius: 50%;
  background: #7b819a;
}

.user-social-contact.is-online .user-social-status-dot {
  background: #38d996;
}

.user-social-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.user-social-title-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.user-social-title-row strong {
  overflow: hidden;
  color: var(--beta-ink);
  font-size: 0.94rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-social-title-row span,
.user-social-copy p {
  color: var(--beta-muted);
  font-size: 0.78rem;
}

.user-social-copy p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-social-contact-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-social-contact-actions button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(238, 244, 255, 0.86);
  transition:
    background-color var(--beta-transition-fast),
    color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-social-contact-actions button:hover,
.user-social-contact-actions button:focus-visible {
  background: rgba(47, 125, 255, 0.2);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.user-social-contact-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

.global-call-dock {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  width: min(408px, calc(100vw - 28px));
  border: var(--beta-border-width) solid rgba(103, 199, 255, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 18%, rgba(50, 220, 255, 0.18), transparent 12rem),
    radial-gradient(circle at 90% 0%, rgba(90, 160, 255, 0.18), transparent 9rem),
    linear-gradient(145deg, rgba(16, 20, 47, 0.96), rgba(8, 10, 27, 0.96));
  box-shadow:
    0 26px 62px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(92, 158, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 12px;
  backdrop-filter: blur(22px);
}

.global-call-dock.is-ringing {
  border-color: rgba(98, 172, 255, 0.3);
}

.global-call-dock.has-error {
  border-color: rgba(255, 133, 166, 0.34);
}

.global-call-dock.is-minimized {
  width: auto;
  min-height: 0;
  padding: 8px;
  border-radius: 999px;
}

.global-call-presence {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.global-call-presence::before {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(50, 220, 255, 0.34);
  border-radius: inherit;
  content: "";
  animation: globalCallPulse 1.9s ease-out infinite;
}

.global-call-dock-main {
  display: grid;
  gap: 10px;
}

.global-call-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}

.global-call-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(135deg, var(--beta-cyan), var(--beta-accent));
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 900;
}

.global-call-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

.global-call-wave {
  position: absolute;
  right: -6px;
  bottom: 3px;
  z-index: 2;
  display: inline-flex;
  align-items: end;
  gap: 2px;
  width: 24px;
  height: 20px;
  border-radius: 999px;
  background: rgba(4, 6, 18, 0.74);
  padding: 4px;
}

.global-call-wave span {
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: #9ef7ff;
  animation: globalCallWave 0.92s ease-in-out infinite;
}

.global-call-wave span:nth-child(2) {
  animation-delay: 100ms;
}

.global-call-wave span:nth-child(3) {
  animation-delay: 200ms;
}

.global-call-wave span:nth-child(4) {
  animation-delay: 300ms;
}

.global-call-wave span:nth-child(5) {
  animation-delay: 400ms;
}

.global-call-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.global-call-kicker {
  color: var(--beta-accent-strong);
  font-size: 0.7rem;
  font-weight: 840;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.global-call-copy strong {
  overflow: hidden;
  color: var(--beta-ink);
  font-size: 0.98rem;
  font-weight: 840;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-call-copy > span:last-child {
  color: var(--beta-muted);
  font-size: 0.78rem;
  font-weight: 680;
  line-height: 1.28;
}

.global-call-runtime-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-width: 70px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(122, 198, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--beta-ink);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.global-call-runtime-pill.is-danger {
  border-color: rgba(255, 133, 166, 0.24);
  color: #ffd1df;
}

.global-call-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.global-call-footer.is-actions-only {
  grid-template-columns: auto;
  justify-content: end;
}

.global-call-participants {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
}

.global-call-participant {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(122, 198, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--beta-muted);
  font-size: 0.74rem;
  font-weight: 760;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-call-participant.is-local {
  color: #d7edff;
}

.global-call-participant.is-speaking {
  border-color: rgba(50, 220, 255, 0.28);
  background: rgba(50, 220, 255, 0.08);
  color: var(--beta-ink);
}

.global-call-participant-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(143, 165, 193, 0.72);
}

.global-call-participant.is-speaking .global-call-participant-dot,
.global-call-participant.is-local .global-call-participant-dot {
  background: #7ee7ff;
}

.global-call-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.shard-authority-dock {
  --shard-authority-panel-gap: 14px;
  --shard-authority-dock-offset: 22px;
  --shard-authority-trigger-height: 64px;
  --shard-authority-panel-top-clearance: 20px;

  position: fixed;
  right: 24px;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 220;
  display: block;
  width: auto;
  pointer-events: none;
}

.shard-authority-dock > * {
  pointer-events: auto;
}

.shard-authority-dock.is-call-active {
  --shard-authority-dock-offset: 118px;

  bottom: 118px;
  bottom: calc(118px + env(safe-area-inset-bottom, 0px));
}

.shard-authority-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(356px, calc(100vw - 32px));
  min-height: 64px;
  border: 1px solid rgba(55, 109, 236, 0.34);
  border-radius: 24px;
  background:
    radial-gradient(circle at 14% 28%, rgba(57, 132, 255, 0.16), transparent 10rem),
    linear-gradient(180deg, rgba(12, 23, 72, 0.96), rgba(8, 17, 58, 0.98));
  box-shadow:
    0 18px 36px rgba(1, 8, 31, 0.38),
    0 0 0 1px rgba(43, 104, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f4f8ff;
  padding: 9px 16px 9px 12px;
  backdrop-filter: blur(18px);
  transition:
    transform var(--beta-transition-fast),
    box-shadow var(--beta-transition-fast),
    border-color var(--beta-transition-fast);
}

.shard-authority-trigger:hover,
.shard-authority-trigger:focus-visible,
.shard-authority-dock.is-open .shard-authority-trigger {
  border-color: rgba(92, 154, 255, 0.52);
  box-shadow:
    0 22px 40px rgba(1, 8, 31, 0.42),
    0 0 22px rgba(47, 125, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.shard-authority-trigger-badge {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 33, 98, 0.92), rgba(10, 21, 74, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 30px rgba(4, 13, 49, 0.34);
}

.shard-authority-trigger-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  color: #8fd8ff;
  background: radial-gradient(circle at 32% 24%, rgba(85, 188, 255, 0.14), rgba(19, 38, 118, 0.02) 58%, transparent 72%);
}

.shard-authority-sparkle {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 16px rgba(111, 196, 255, 0.3));
}

.shard-authority-sparkle-main {
  fill: #85d4ff;
}

.shard-authority-sparkle-mini {
  fill: rgba(230, 247, 255, 0.94);
}

.shard-authority-sparkle-dot {
  fill: rgba(180, 229, 255, 0.92);
}

.shard-authority-trigger-copy {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.shard-authority-trigger-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.shard-authority-trigger-row strong {
  color: #f4f8ff;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0;
}

.shard-authority-status-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #49dc8a;
  box-shadow:
    0 0 0 2px rgba(10, 21, 74, 0.9),
    0 0 18px rgba(73, 220, 138, 0.44);
}

.shard-authority-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--shard-authority-panel-gap));
  display: flex;
  flex-direction: column;
  width: min(388px, calc(100vw - 32px));
  height: min(740px, 70vh, calc(
    100dvh
    - var(--shard-authority-dock-offset)
    - var(--shard-authority-trigger-height)
    - var(--shard-authority-panel-gap)
    - var(--shard-authority-panel-top-clearance)
    - env(safe-area-inset-top, 0px)
    - env(safe-area-inset-bottom, 0px)
  ));
  max-height: min(740px, 70vh, calc(
    100dvh
    - var(--shard-authority-dock-offset)
    - var(--shard-authority-trigger-height)
    - var(--shard-authority-panel-gap)
    - var(--shard-authority-panel-top-clearance)
    - env(safe-area-inset-top, 0px)
    - env(safe-area-inset-bottom, 0px)
  ));
  border: 1px solid rgba(55, 109, 236, 0.34);
  border-radius: 30px;
  background:
    radial-gradient(circle at 16% 14%, rgba(57, 132, 255, 0.14), transparent 12rem),
    linear-gradient(180deg, rgba(11, 20, 63, 0.98), rgba(8, 15, 50, 0.99));
  box-shadow:
    0 26px 56px rgba(2, 7, 27, 0.46),
    0 0 0 1px rgba(43, 104, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0.85rem;
  pointer-events: none;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  backdrop-filter: blur(24px);
  transition:
    opacity var(--beta-transition-base),
    transform var(--beta-transition-base);
}

.shard-authority-dock.is-open .shard-authority-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.shard-authority-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 2px 2px 12px;
}

.shard-authority-panel-lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.shard-authority-trigger-badge-panel {
  width: 52px;
  height: 52px;
  border-radius: 20px;
}

.shard-authority-panel-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shard-authority-panel-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.shard-authority-panel-copy h2 {
  margin: 0;
  color: #f4f8ff;
  font-size: 1.2rem;
  font-weight: 800;
}

.shard-authority-panel-copy span {
  color: rgba(224, 236, 255, 0.74);
  font-size: 0.84rem;
  line-height: 1.45;
}

.shard-authority-panel-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(103, 199, 255, 0.14);
  background: rgba(66, 119, 255, 0.12);
  color: #a8d1ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shard-authority-close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #f4f8ff;
  transition:
    background-color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.shard-authority-close:hover,
.shard-authority-close:focus-visible {
  background: rgba(47, 125, 255, 0.18);
  outline: none;
  transform: translateY(-1px);
}

.shard-authority-quick-actions {
  display: grid;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  max-height: min(240px, 30vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0 2px 12px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.shard-authority-quick-actions::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.shard-authority-quick-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(132, 164, 255, 0.12);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.025);
  color: #eef4ff;
  font-size: 0.9rem;
  font-weight: 620;
  padding: 0.96rem 1rem;
  text-align: left;
  transition:
    border-color var(--beta-transition-fast),
    background-color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.shard-authority-quick-action-copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.shard-authority-quick-action-copy i {
  width: 18px;
  color: #85c5ff;
  text-align: center;
}

.shard-authority-quick-action:hover,
.shard-authority-quick-action:focus-visible {
  border-color: rgba(103, 199, 255, 0.22);
  background: rgba(47, 125, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.shard-authority-quick-action:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.shard-authority-log-section {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.shard-authority-log-kicker {
  color: rgba(154, 191, 255, 0.68);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shard-authority-log {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px 2px 10px;
  scrollbar-gutter: stable;
}

.shard-authority-message {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(132, 164, 255, 0.11);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 30, 82, 0.62), rgba(13, 22, 64, 0.84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 0.95rem 1rem;
}

.shard-authority-message.is-user {
  margin-left: 28px;
  border-color: rgba(103, 199, 255, 0.18);
  background: linear-gradient(145deg, rgba(21, 44, 97, 0.92), rgba(10, 20, 51, 0.92));
}

.shard-authority-message-copy {
  margin: 0;
  color: #edf4ff;
  font-size: 0.92rem;
  line-height: 1.55;
}

.shard-authority-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shard-authority-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid rgba(103, 199, 255, 0.16);
  border-radius: 999px;
  background: rgba(47, 125, 255, 0.14);
  color: #dff1ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0 10px;
  text-transform: uppercase;
}

.shard-authority-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(221, 235, 255, 0.76);
  font-size: 0.84rem;
  padding: 4px 2px 0;
}

.shard-authority-loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #67c7ff;
  box-shadow: 0 0 16px rgba(103, 199, 255, 0.46);
  animation: shardAuthorityPulse 1.1s ease-in-out infinite;
}

.shard-authority-composer {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
  border-top: 1px solid rgba(132, 164, 255, 0.14);
  margin-top: 4px;
  padding: 14px 2px 0;
  background: transparent;
  box-shadow: none;
}

.shard-authority-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(8, 11, 28, 0.98);
  color: #f4f8ff;
  padding: 0 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(4, 8, 22, 0.18);
}

.shard-authority-input::placeholder {
  color: rgba(221, 235, 255, 0.42);
}

.shard-authority-input:focus-visible {
  border-color: rgba(103, 199, 255, 0.24);
  box-shadow: 0 0 0 3px rgba(47, 125, 255, 0.16);
  outline: none;
}

.shard-authority-send {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(92, 158, 255, 0.92), rgba(47, 125, 255, 0.92));
  box-shadow: 0 16px 34px rgba(19, 49, 138, 0.3);
  color: #ffffff;
  transition:
    transform var(--beta-transition-fast),
    box-shadow var(--beta-transition-fast),
    opacity var(--beta-transition-fast);
}

.shard-authority-send:hover,
.shard-authority-send:focus-visible {
  box-shadow: 0 20px 38px rgba(19, 49, 138, 0.34);
  outline: none;
  transform: translateY(-1px);
}

.shard-authority-send:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}

.global-call-action {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(132, 194, 255, 0.18);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(36, 60, 112, 0.62), rgba(17, 27, 58, 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.18);
  color: #f2f7ff;
  transition:
    background-color var(--beta-transition-fast),
    border-color var(--beta-transition-fast),
    color var(--beta-transition-fast),
    box-shadow var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.global-call-action:hover,
.global-call-action:focus-visible,
.global-call-action.is-active {
  border-color: rgba(122, 198, 255, 0.4);
  background: linear-gradient(180deg, rgba(55, 118, 255, 0.78), rgba(34, 78, 179, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 24px rgba(20, 52, 132, 0.28);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.global-call-action.is-danger {
  border-color: rgba(255, 112, 140, 0.24);
  background: linear-gradient(180deg, rgba(132, 34, 66, 0.86), rgba(87, 19, 42, 0.96));
  color: #ffe1e7;
}

.global-call-action.is-danger:hover,
.global-call-action.is-danger:focus-visible {
  border-color: rgba(255, 142, 165, 0.42);
  background: linear-gradient(180deg, rgba(214, 66, 108, 0.94), rgba(158, 33, 69, 0.98));
  color: #ffffff;
}

.global-call-frame-shell {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 108px);
  z-index: 79;
  width: min(380px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
}

.global-call-frame-card {
  overflow: hidden;
  border: 1px solid rgba(126, 188, 255, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(8, 16, 26, 0.96), rgba(6, 12, 19, 0.98)),
    rgba(7, 13, 22, 0.98);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
}

.global-call-frame-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.global-call-frame-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.global-call-frame-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--beta-accent-strong);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.global-call-frame-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(225, 237, 255, 0.78);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
}

.global-call-frame-copy strong {
  color: var(--beta-ink);
  font-size: 0.96rem;
  font-weight: 820;
  line-height: 1.2;
}

.global-call-frame-copy span:last-child {
  color: var(--beta-muted);
  font-size: 0.78rem;
  font-weight: 640;
  line-height: 1.4;
}

.global-call-frame-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.global-call-frame-action {
  border: 1px solid rgba(122, 188, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--beta-ink);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 760;
  min-height: 34px;
  padding: 0 12px;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.global-call-frame-action:hover,
.global-call-frame-action:focus-visible {
  background: rgba(79, 148, 255, 0.14);
  border-color: rgba(122, 188, 255, 0.28);
  transform: translateY(-1px);
  outline: none;
}

.global-call-frame-action.is-danger {
  background: rgba(255, 85, 111, 0.12);
  border-color: rgba(255, 85, 111, 0.18);
  color: #ffd4dc;
}

.global-call-frame-body {
  padding: 10px;
}

.global-call-frame-embed {
  display: block;
  width: 100%;
  height: min(38vh, 280px);
  border: 0;
  border-radius: 18px;
  background: #050b12;
}

body.is-dragging-call-widget .global-call-frame-header {
  cursor: grabbing;
}

@keyframes globalCallPulse {
  0% {
    opacity: 0.8;
    transform: scale(0.95);
  }

  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes globalCallWave {
  0%, 100% {
    height: 6px;
  }

  50% {
    height: 13px;
  }
}

@keyframes shardAuthorityPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.noctra-notifications-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 18px 12px;
}

.noctra-notifications-list {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
  max-height: min(52vh, 470px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(98, 145, 227, 0.74) rgba(22, 31, 57, 0.72);
}

.noctra-notifications-list::-webkit-scrollbar {
  width: 8px;
}

.noctra-notifications-list::-webkit-scrollbar-track {
  background: rgba(18, 26, 46, 0.76);
  border-radius: 999px;
}

.noctra-notifications-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(117, 170, 255, 0.94) 0%, rgba(84, 136, 228, 0.92) 100%);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.noctra-notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: var(--beta-border-width) solid rgba(101, 138, 214, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 24%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(145deg, rgba(22, 28, 60, 0.92) 0%, rgba(14, 18, 42, 0.94) 100%);
  box-shadow: 0 10px 22px rgba(5, 8, 21, 0.22);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.noctra-notification-item.is-unread {
  border-color: rgba(109, 161, 255, 0.22);
  box-shadow:
    0 12px 24px rgba(5, 8, 21, 0.24),
    0 0 0 1px rgba(86, 127, 188, 0.08);
}

.noctra-notification-open {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.noctra-notification-avatar-shell {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 10px 20px rgba(8, 14, 36, 0.28);
  flex: 0 0 auto;
}

.noctra-notification-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 36% 30%, #ffffff, #93d6ff 30%, #2f7dff 68%, #113a9b);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
}

.noctra-notification-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.noctra-notification-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.noctra-notification-title {
  color: var(--beta-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.noctra-notification-meta {
  color: rgba(182, 200, 234, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.noctra-notification-body {
  margin: 0;
  color: var(--beta-muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.noctra-notification-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 0;
  background: rgba(58, 84, 138, 0.3);
  color: #b8d7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    color 140ms ease;
}

.noctra-notification-open:hover,
.noctra-notification-open:focus-visible,
.noctra-notification-mark:hover,
.noctra-notification-mark:focus-visible {
  outline: none;
}

.noctra-notification-item:hover,
.noctra-notification-item:focus-within {
  transform: translateY(-1px);
  border-color: rgba(120, 166, 255, 0.22);
  box-shadow: 0 14px 26px rgba(5, 8, 21, 0.26);
}

.noctra-notification-mark:hover,
.noctra-notification-mark:focus-visible {
  background: rgba(77, 116, 192, 0.38);
  color: #ffffff;
}

.noctra-notification-mark svg {
  width: 16px;
  height: 16px;
}

.noctra-notifications-empty {
  margin: 0 18px 18px;
  padding: 18px 16px;
  border-radius: 18px;
  border: var(--beta-border-width) solid rgba(95, 130, 198, 0.12);
  color: var(--beta-muted);
  background: rgba(17, 23, 47, 0.78);
  box-shadow: 0 12px 24px rgba(5, 8, 21, 0.18);
}

@media (max-width: 1024px) {
  .site-header-below {
    bottom: calc(var(--beta-space-3) - 24px);
  }

  :is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) {
    max-width: min(620px, 100%);
    padding: 0.4rem 0.95rem;
  }
}

@media (max-width: 1199.98px) {
  .site-header {
    position: fixed;
    right: 0;
    left: 0;
  }

  .mobile-app-banner {
    margin-bottom: 10px;
    padding: 7px 0;
  }

  .mobile-app-banner-inner {
    width: min(var(--beta-mobile-shell-width), calc(100vw - var(--beta-mobile-shell-edge-gap)));
    min-height: 48px;
    margin-inline: auto;
    padding-inline: 0;
  }

  .mobile-app-banner-copy {
    flex: 1 1 auto;
  }

  .mobile-app-banner-text strong,
  .mobile-app-banner-text span {
    white-space: normal;
  }

  .mobile-app-banner-text strong {
    font-size: 0.82rem;
  }

  .mobile-app-banner-text span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .mobile-app-banner-actions {
    gap: 6px;
  }

  .mobile-app-banner-primary,
  .mobile-app-banner-copy-button,
  .mobile-app-banner-dismiss {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 0.74rem;
  }

  .mobile-app-banner-dismiss {
    inline-size: 32px;
    padding-inline: 0;
  }

  .site-header-below {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    display: flex;
    z-index: 3;
    margin-top: 10px;
    pointer-events: auto;
  }

  .site-header-below:has(:is(.noctra-suite-switcher-row, .suite-switcher-row, [data-suite-switcher-row])) {
    display: none;
    margin-top: 0;
  }

  .site-header-below :is(.noctra-suite-switcher-row, .suite-switcher-row, [data-suite-switcher-row]) {
    display: none;
    width: 100%;
  }

  .site-header-below .suite-switcher-row-inner {
    width: min(var(--beta-mobile-shell-width), calc(100vw - var(--beta-mobile-shell-edge-gap)));
    margin-inline: auto;
    padding-inline: 0;
  }

  .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    width: min(var(--beta-mobile-shell-width), calc(100vw - var(--beta-mobile-shell-edge-gap)));
    min-height: 64px;
    margin-inline: auto;
    padding: 0.45rem 0.65rem 0.45rem 0.85rem;
  }

  .brand-icon-image {
    inline-size: 46px;
    block-size: 46px;
  }

  .beta-mobile-controls,
  .mobile-profile-chip {
    display: inline-flex;
  }

  .nav-header-row {
    display: block;
  }

  .beta-nav-mobile-panel {
    width: min(var(--beta-mobile-shell-width), calc(100vw - var(--beta-mobile-shell-edge-gap)));
  }

  .beta-nav-mobile-inner {
    padding: clamp(1.1rem, 0.95rem + 0.8vw, 1.45rem);
  }

  .nav-account-mobile .user-bar-cluster,
  .nav-account-mobile .user-bar-menu {
    width: 100%;
  }

  .user-notifications-dropdown,
  .user-social-dropdown,
  .user-profile-dropdown {
    position: fixed;
    top: 76px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: min(72vh, 560px);
  }

  .shard-authority-dock {
    --shard-authority-panel-gap: 12px;
    --shard-authority-dock-offset: 16px;
    --shard-authority-panel-top-clearance: 16px;

    right: 16px;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .shard-authority-dock.is-call-active {
    --shard-authority-dock-offset: 108px;

    bottom: 108px;
    bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }

  .shard-authority-panel {
    padding: 0.78rem;
  }
}

@media (max-height: 860px) {
  .shard-authority-panel {
    --shard-authority-panel-top-clearance: 12px;
    padding: 0.72rem;
  }

  .shard-authority-panel-head {
    padding-bottom: 10px;
  }

  .shard-authority-quick-actions {
    gap: 8px;
    max-height: min(176px, 22vh);
    padding-bottom: 8px;
  }

  .shard-authority-quick-action {
    min-height: 54px;
    padding: 0.82rem 0.9rem;
  }

  .shard-authority-log-section {
    gap: 8px;
  }

  .shard-authority-composer {
    margin-top: 2px;
    padding-top: 12px;
  }
}

@media (max-width: 767.98px) {
  :is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) {
    width: min(var(--beta-mobile-shell-width), calc(100vw - var(--beta-mobile-shell-edge-gap)));
    justify-content: space-between;
  }
}

@media (max-width: 575.98px) {
  .site-header {
    padding: var(--beta-space-3) 0 0;
  }

  .mobile-app-banner {
    margin-top: calc(var(--beta-space-3) * -1);
  }

  .mobile-app-banner-inner {
    align-items: stretch;
    gap: 8px;
  }

  .mobile-app-banner-icon {
    inline-size: 30px;
    block-size: 30px;
  }

  .mobile-app-banner-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-app-banner-primary,
  .mobile-app-banner-copy-button {
    min-width: 108px;
    min-height: 28px;
    gap: 6px;
    padding-inline: 8px;
    font-size: 0.68rem;
  }

  .mobile-app-banner-dismiss {
    align-self: flex-end;
    inline-size: 28px;
    min-height: 28px;
  }

  .nav-inner {
    width: min(var(--beta-mobile-shell-width), calc(100vw - var(--beta-mobile-shell-edge-gap)));
    max-width: 468px;
    min-height: 64px;
    padding: 0.35rem 0.5rem 0.35rem 0.55rem;
  }

  .beta-nav-mobile-panel {
    width: min(var(--beta-mobile-shell-width), calc(100vw - var(--beta-mobile-shell-edge-gap)));
  }

  .site-header-below {
    margin-top: 10px;
  }

  .site-header-below :is(.noctra-suite-switcher-row, .suite-switcher-row, [data-suite-switcher-row]) {
    width: 100%;
    padding-inline: 0.2rem;
  }

  .beta-nav-mobile-inner {
    padding: 1rem;
    max-block-size: min(68vh, 480px);
  }

  .nav-account-mobile .user-bar {
    border-radius: var(--beta-radius-lg);
  }

  .user-bar {
    width: 100%;
  }

  .user-profile-identity {
    gap: 0.6rem;
  }

  .user-avatar {
    inline-size: 34px;
    block-size: 34px;
  }

  .user-copy p {
    font-size: 0.84rem;
  }

  .user-copy span {
    font-size: 0.74rem;
  }

  .user-bar-preview {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "meta"
      "progress";
    gap: 0.72rem 0.8rem;
  }

  .user-preview-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
  }

  .user-top-rail {
    display: flex;
    width: auto;
    min-width: fit-content;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
  }

  .user-bar-cluster:not(.user-bar-menu) {
    grid-template-columns: 1fr;
  }

  .user-bar-menu.user-bar-cluster {
    grid-template-columns: 1fr;
    gap: var(--beta-space-3);
    padding: 0.8rem;
  }

  .user-controls,
  .user-bar-menu .user-controls {
    justify-content: flex-start;
  }

  .user-bar-preview .user-controls {
    justify-self: end;
    justify-content: flex-end;
    align-self: center;
    flex-wrap: nowrap;
  }

  .user-bar-preview .profile-badge-rail-inline {
    width: 100%;
    padding-top: 0;
  }

  .user-bar-preview .profile-badge-rail-inline .profile-badge-slot-row {
    gap: 6px;
  }

  .user-bar-preview .profile-badge-rail-inline .profile-badge-slot {
    width: 30px;
    min-width: 30px;
    border-radius: 10px;
  }

  .user-bar-preview .user-meta {
    gap: 0.35rem;
  }

  .user-bar-preview .user-meta span {
    padding: 0.48rem 0.62rem;
    font-size: 0.72rem;
  }

  .user-bar-preview .user-progress-summary {
    grid-area: progress;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: 0.72rem 0.78rem;
    gap: 0.55rem;
    border-radius: 18px;
  }

  .user-bar-preview .user-progress-summary-icon {
    width: 42px;
    height: 42px;
  }

  .user-bar-preview .user-progress-summary-copy {
    min-width: 0;
    gap: 0.35rem;
  }

  .user-bar-preview .user-progress-summary-head {
    gap: 0.35rem 0.55rem;
  }

  .user-bar-preview .user-progress-summary-meter {
    gap: 0.5rem;
  }

  .user-bar-preview .user-progress-summary-head strong {
    font-size: 0.96rem;
  }

  .user-bar-preview .user-progress-summary-head span,
  .user-bar-preview .user-progress-summary-tail {
    font-size: 0.7rem;
  }

  .user-bar-preview .user-progress-summary-bar {
    height: 6px;
  }

  .user-bar-preview .user-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .user-bar-preview .user-action,
  .user-bar-preview .user-status-action-anchor {
    min-width: 0;
  }

  .user-bar-preview .user-action .btn-beta,
  .user-bar-preview .user-status-action-anchor .btn-beta {
    width: 100%;
  }

  .user-progress-summary-tail {
    max-width: none;
    text-align: right;
    white-space: nowrap;
  }

  :is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) {
    width: min(calc(100vw - 32px), var(--beta-mobile-shell-width));
    max-width: 100%;
    min-height: 42px;
    padding: 0.5rem 0.9rem;
    gap: 0.55rem;
  }

  :is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) :is(.suite-switcher-label, .suite-label) {
    display: none;
  }

  .noctra-notification-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .user-social-contact {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .user-profile-dropdown-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .user-profile-dropdown-badge {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

  .user-social-contact-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .profile-badge-rail-inline {
    margin-left: 0;
    padding-left: 0;
    padding-top: 0.4rem;
  }

  .profile-badge-viewer-grid {
    grid-template-columns: 1fr;
  }

  .profile-badge-viewer-shell {
    padding: 18px;
  }

  .public-profile-viewer-shell {
    padding: 64px 18px 18px;
  }

  .public-profile-viewer-grid {
    grid-template-columns: 1fr;
  }

  .public-profile-header {
    align-items: flex-start;
  }

  .public-profile-identity {
    grid-template-columns: 1fr;
  }

  .public-profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
  }

  .public-profile-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .public-profile-progress-head,
  .public-profile-progress-meter-copy,
  .public-profile-progress-stats {
    flex-direction: column;
    align-items: flex-start;
  }

  .public-profile-progress-identity {
    grid-template-columns: 1fr;
  }

  .public-profile-progress-art-shell {
    width: 96px;
    height: 96px;
    border-radius: 24px;
  }

  .public-profile-progress-art {
    width: 74px;
    height: 74px;
  }

  .profile-badge-viewer-stage {
    min-height: 220px;
  }

  .profile-badge-tilt-shell {
    width: min(100%, 210px);
  }

  .public-profile-stat-grid {
    grid-template-columns: 1fr;
  }

  .global-call-dock {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
  }

  .global-call-dock.is-minimized {
    left: auto;
  }

  .global-call-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .global-call-runtime-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .global-call-frame-shell {
    right: 10px;
    left: 10px;
    bottom: 112px;
    width: auto;
  }

  .global-call-frame-header {
    flex-direction: column;
    align-items: stretch;
  }

  .global-call-frame-actions {
    justify-content: flex-start;
  }

  .global-call-frame-embed {
    height: 34vh;
  }

  .global-call-footer {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .global-call-actions {
    justify-content: flex-start;
  }

  .global-call-participants {
    flex-wrap: wrap;
    overflow: visible;
    gap: 6px;
  }

  .shard-authority-dock {
    --shard-authority-dock-offset: 12px;
    --shard-authority-trigger-height: 70px;
    --shard-authority-panel-top-clearance: 12px;

    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }

  .shard-authority-dock.is-call-active {
    --shard-authority-dock-offset: 114px;

    bottom: 114px;
  }

  .shard-authority-trigger,
  .shard-authority-panel {
    width: 100%;
  }

  .shard-authority-panel {
    right: 0;
  }

  .shard-authority-trigger {
    min-height: 58px;
    border-radius: 22px;
  }

  .shard-authority-panel {
    border-radius: 26px;
    padding: 0.72rem;
  }

  .shard-authority-log {
    padding-right: 0;
  }

  .shard-authority-quick-actions {
    grid-template-columns: 1fr;
    max-height: min(196px, 26vh);
  }

  .shard-authority-composer {
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
  }

  .shard-authority-message.is-user {
    margin-left: 12px;
  }
}

@media (max-width: 575.98px) and (max-height: 860px) {
  .shard-authority-quick-actions {
    max-height: min(148px, 19vh);
  }

  .shard-authority-quick-action {
    min-height: 52px;
    padding: 0.76rem 0.86rem;
  }
}

@media (max-width: 479.98px) {
  :is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) {
    gap: 0.6rem;
    padding: 0.38rem 0.85rem;
  }

  :is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) :is(.suite-switcher-label, .suite-label) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-notifications-dropdown,
  .user-social-dropdown,
  .user-profile-dropdown,
  .noctra-notification-item,
  .noctra-notification-mark,
  .noctra-notifications-close,
  .user-social-close,
  .user-profile-dropdown-close,
  .user-social-primary,
  .public-profile-viewer-close,
  .user-social-contact-actions button,
  .user-profile-dropdown-link,
  .user-profile-dropdown-mini-toggle,
  .user-profile-dropdown-mini-toggle-track,
  .user-profile-dropdown-mini-toggle-track::after,
  .global-call-action,
  .shard-authority-panel,
  .shard-authority-trigger,
  .shard-authority-quick-action,
  .shard-authority-send {
    transition: none;
  }

  .global-call-presence::before,
  .global-call-wave span,
  .shard-authority-loading-dot {
    animation: none;
  }
}
/* src/styles/home.css */
@font-face {
  font-family: "Noctra Tileboard Segoe";
  src: url("/assets/fonts/segoe-ui/SegoeUI.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 300 500;
}

@font-face {
  font-family: "Noctra Tileboard Segoe";
  src: url("/assets/fonts/segoe-ui/SegoeUI-Italic.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 300 500;
}

@font-face {
  font-family: "Noctra Tileboard Segoe";
  src: url("/assets/fonts/segoe-ui/SegoeUI-Bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 600 800;
}

@font-face {
  font-family: "Noctra Tileboard Segoe";
  src: url("/assets/fonts/segoe-ui/SegoeUI-BoldItalic.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 600 800;
}

.homepage {
  --home-heading-ink: #eef4ff;
  --home-heading-ink-strong: #f7fbff;
  --home-backdrop-glow-primary: rgba(22, 64, 132, 0.08);
  --home-backdrop-glow-secondary: rgba(18, 108, 140, 0.02);
  --home-hero-halo-primary: rgba(14, 31, 70, 0.12);
  --home-hero-halo-secondary: rgba(24, 132, 166, 0.018);
  --home-orbit-core-glow: rgba(26, 74, 146, 0.045);
  --home-orbit-ring-glow: rgba(26, 74, 146, 0.05);
  --home-orbit-dot-shadow: rgba(26, 148, 186, 0.08);

  position: relative;
}

.homepage-view-toolbar {
  position: relative;
  z-index: 6;
  padding: clamp(14px, 2vw, 20px) 0 0;
}

.homepage-view-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.homepage-view-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.homepage-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  border: 1px solid rgba(129, 188, 255, 0.18);
  border-radius: 6px;
  background: rgba(7, 10, 24, 0.72);
  padding: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.homepage-view-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: rgba(221, 232, 255, 0.7);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 780;
  padding: 0.48rem 0.7rem;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.homepage-view-option:hover,
.homepage-view-option:focus-visible {
  border-color: rgba(126, 209, 255, 0.34);
  background: rgba(126, 209, 255, 0.1);
  color: #f4f9ff;
  outline: none;
}

.homepage-view-option:focus-visible {
  box-shadow: 0 0 0 3px rgba(126, 209, 255, 0.2);
}

.homepage-view-option.is-active {
  border-color: rgba(103, 198, 244, 0.46);
  background: linear-gradient(135deg, rgba(33, 109, 215, 0.8), rgba(72, 50, 171, 0.82));
  color: #ffffff;
}

.homepage-view-status {
  color: rgba(185, 205, 235, 0.72);
  font-size: 0.78rem;
  font-weight: 720;
}

.homepage-tileboard-root {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  padding: 0;
  overflow-x: clip;
}

.homepage-tileboard-root,
.tileboard-homepage {
  font-family: "Noctra Tileboard Segoe", "Segoe UI", system-ui, sans-serif;
  font-weight: 300;
}

.homepage-tileboard-root::before {
  inset: 0;
  height: 100%;
  background:
    radial-gradient(circle at 8% 22%, rgba(78, 193, 255, 0.12), transparent 18rem),
    radial-gradient(circle at 84% 10%, rgba(74, 63, 185, 0.18), transparent 24rem),
    linear-gradient(180deg, #071324 0%, #0a1025 48%, #03050d 100%);
}

.homepage-tileboard-root .noctra-page-stage {
  min-height: 100svh;
}

.tileboard-homepage {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100svh;
  overflow: visible;
  padding: clamp(12px, 1.4vw, 24px) 0;
}

.tileboard-homepage::before {
  position: absolute;
  inset: -90px 0 auto;
  z-index: -1;
  height: min(78vh, 760px);
  background:
    radial-gradient(circle at 72% 0%, rgba(90, 56, 194, 0.18), transparent 26rem),
    radial-gradient(circle at 20% 24%, rgba(27, 119, 214, 0.2), transparent 24rem),
    linear-gradient(180deg, rgba(6, 7, 18, 0.2), rgba(6, 7, 18, 0));
  content: "";
  pointer-events: none;
}

.tileboard-homepage.has-wallpaper {
  background-color: var(--tileboard-wallpaper-color, #081328);
  background-image:
    linear-gradient(90deg, rgba(3, 7, 18, 0.64) 0%, rgba(5, 10, 25, 0.5) 42%, rgba(4, 6, 17, 0.64) 100%),
    var(--tileboard-wallpaper-image);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.tileboard-homepage.has-wallpaper::before {
  inset: 0;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0.18) 0%, rgba(3, 7, 18, 0.08) 42%, rgba(3, 7, 18, 0.22) 100%),
    radial-gradient(circle at 28% 16%, rgba(74, 205, 255, 0.08), transparent 24rem),
    radial-gradient(circle at 70% 8%, rgba(91, 58, 190, 0.1), transparent 26rem);
}

html.tileboard-document-wallpaper-root {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scrollbar-gutter: auto;
  background-color: var(--tileboard-wallpaper-color, #081328);
  background-image:
    linear-gradient(90deg, rgba(3, 7, 18, 0.64), rgba(5, 10, 25, 0.5), rgba(4, 6, 17, 0.64)),
    var(--tileboard-wallpaper-image);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body.tileboard-document-wallpaper {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scrollbar-gutter: auto;
  background-color: var(--tileboard-wallpaper-color, #081328);
  background-image:
    linear-gradient(90deg, rgba(3, 7, 18, 0.64), rgba(5, 10, 25, 0.5), rgba(4, 6, 17, 0.64)),
    var(--tileboard-wallpaper-image);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body.tileboard-document-wallpaper .site-shell,
body.tileboard-document-wallpaper .homepage-tileboard-root,
body.tileboard-document-wallpaper .homepage-tileboard-root .noctra-page-stage {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  background-color: transparent;
}

body.tileboard-document-wallpaper .site-shell::before,
body.tileboard-document-wallpaper .site-shell::after,
body.tileboard-document-wallpaper .homepage-tileboard-root::before {
  content: none;
}

body.tileboard-document-wallpaper .homepage-tileboard-root {
  min-height: max(100svh, 100%);
  background-color: var(--tileboard-wallpaper-color, #081328);
  background-image:
    linear-gradient(90deg, rgba(3, 7, 18, 0.64), rgba(5, 10, 25, 0.5), rgba(4, 6, 17, 0.64)),
    var(--tileboard-wallpaper-image);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

html.tileboard-document-wallpaper-root::-webkit-scrollbar:horizontal,
body.tileboard-document-wallpaper::-webkit-scrollbar:horizontal,
body.tileboard-document-wallpaper .site-shell::-webkit-scrollbar:horizontal,
body.tileboard-document-wallpaper .homepage-tileboard-root::-webkit-scrollbar:horizontal {
  width: 0;
  height: 0;
}

.tileboard-shell {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  max-width: none;
  width: 100%;
}

.tileboard-shell.container-beta {
  max-width: none;
  padding-inline: clamp(12px, 2vw, 30px);
}

.tileboard-nav-rail {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  min-height: 0;
  border: 1px solid rgba(118, 170, 255, 0.12);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(13, 13, 32, 0.86), rgba(8, 8, 20, 0.9));
  overflow: visible;
  padding: 6px;
}

.tileboard-nav-main {
  display: grid;
  align-content: start;
  gap: 6px;
}

.tileboard-nav-button {
  --tileboard-nav-accent: #2f7dff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  color: rgba(232, 241, 255, 0.76);
  font-size: 1.08rem;
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.tileboard-nav-button span {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  z-index: 40;
  min-width: max-content;
  border: 1px solid rgba(126, 209, 255, 0.22);
  border-radius: 4px;
  background: rgba(8, 12, 28, 0.96);
  color: #f2f7ff;
  font-size: 0.86rem;
  font-weight: 500;
  opacity: 0;
  padding: 0.35rem 0.55rem;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity 140ms ease, transform 140ms ease;
}

.tileboard-nav-button:hover span,
.tileboard-nav-button:focus-visible span {
  opacity: 1;
  transform: translate(0, -50%);
}

.tileboard-nav-button:hover,
.tileboard-nav-button:focus-visible,
.tileboard-nav-button.is-active {
  border-color: color-mix(in srgb, var(--tileboard-nav-accent), white 18%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--tileboard-nav-accent), transparent 8%), rgba(5, 9, 22, 0.72));
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.tileboard-nav-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(126, 209, 255, 0.22);
}

.tileboard-nav-button.is-blue { --tileboard-nav-accent: #0b79d0; }
.tileboard-nav-button.is-indigo { --tileboard-nav-accent: #3f44b8; }
.tileboard-nav-button.is-cyan { --tileboard-nav-accent: #008fba; }
.tileboard-nav-button.is-amber { --tileboard-nav-accent: #be8120; }
.tileboard-nav-button.is-rose { --tileboard-nav-accent: #a43d78; }
.tileboard-nav-button.is-green { --tileboard-nav-accent: #2f8f68; }
.tileboard-nav-button.is-violet { --tileboard-nav-accent: #5e43b9; }
.tileboard-nav-button.is-gold { --tileboard-nav-accent: #b77a18; }

.tileboard-wallpaper-rail-button {
  align-self: end;
  inline-size: 100%;
}

.tileboard-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

.tileboard-route-page {
  padding-block: clamp(8px, 1.2vw, 18px);
}

.tileboard-route-shell {
  min-height: calc(100svh - clamp(16px, 2.4vw, 36px));
}

.tileboard-route-main {
  grid-template-rows: auto minmax(0, 1fr);
}

.tileboard-route-heading {
  align-items: start;
  padding-inline: 2px;
}

.tileboard-route-content {
  min-width: 0;
}

.tileboard-route-content > .money-page,
.tileboard-route-content > .track-page,
.tileboard-route-content > .recovery-page,
.tileboard-route-content > .files-page,
.tileboard-route-content > .messaging-page,
.tileboard-route-content > .user-settings-page {
  min-height: 0;
}

.tileboard-route-content .container-beta {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.tileboard-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.tileboard-brand,
.tileboard-heading h1 {
  margin: 0;
}

.tileboard-brand {
  color: #f5f8ff;
  font-size: clamp(1.35rem, 1.3vw, 1.75rem);
  font-weight: 600;
}

.tileboard-heading h1 {
  color: #f5f8ff;
  font-size: clamp(2.9rem, 4.2vw, 4.9rem);
  font-weight: 300;
  line-height: 1.08;
}

.tileboard-suite-anchor {
  position: relative;
  z-index: 35;
  width: max-content;
  max-width: min(260px, 72vw);
}

.tileboard-suite-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: rgba(190, 210, 244, 0.86);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 350;
  line-height: 1.2;
  padding: 0;
  text-align: left;
}

.tileboard-suite-trigger i {
  color: rgba(218, 233, 255, 0.72);
  font-size: 0.62rem;
  transform: translateY(1px);
  transition: transform 150ms ease, color 150ms ease;
}

.tileboard-suite-trigger:hover,
.tileboard-suite-trigger:focus-visible {
  color: #ffffff;
  outline: none;
}

.tileboard-suite-trigger:focus-visible {
  text-decoration: underline;
  text-decoration-color: rgba(111, 197, 255, 0.7);
  text-underline-offset: 4px;
}

.tileboard-suite-anchor.is-open .tileboard-suite-trigger i {
  color: #ffffff;
  transform: translateY(1px) rotate(180deg);
}

.tileboard-suite-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  display: grid;
  gap: 5px;
  min-width: 254px;
  border: 1px solid rgba(126, 209, 255, 0.18);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(11, 17, 39, 0.97), rgba(5, 9, 23, 0.98)),
    rgba(8, 11, 26, 0.98);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 6px;
}

body.tileboard-modal-open .tileboard-suite-anchor,
body.tileboard-modal-open .tileboard-heading,
body.tileboard-modal-open .tileboard-heading-actions {
  z-index: 1;
}

.tileboard-suite-option {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(239, 246, 255, 0.9);
  cursor: pointer;
  font: inherit;
  padding: 0.7rem 0.78rem;
  text-align: left;
}

.tileboard-suite-option:hover,
.tileboard-suite-option:focus-visible {
  border-color: rgba(126, 209, 255, 0.2);
  background: rgba(47, 125, 255, 0.12);
  outline: none;
}

.tileboard-suite-option.is-active {
  border-color: rgba(126, 209, 255, 0.34);
  background: linear-gradient(145deg, rgba(18, 112, 207, 0.42), rgba(38, 28, 101, 0.52));
}

.tileboard-suite-option-mark {
  inline-size: 7px;
  block-size: 100%;
  min-height: 32px;
  border-radius: 2px;
  background: linear-gradient(180deg, #32dcff, #5aa0ff);
  opacity: 0.38;
}

.tileboard-suite-option[data-suite-id="fun"] .tileboard-suite-option-mark {
  background: linear-gradient(180deg, #ff88b6, #9f62ff);
}

.tileboard-suite-option[data-suite-id="recovery"] .tileboard-suite-option-mark {
  background: linear-gradient(180deg, #77f1cf, #40a6ec);
}

.tileboard-suite-option.is-active .tileboard-suite-option-mark {
  opacity: 1;
}

.tileboard-suite-option-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.tileboard-suite-option-title {
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.15;
}

.tileboard-suite-option-subtitle {
  color: rgba(206, 224, 250, 0.68);
  font-size: 0.78rem;
  font-weight: 350;
  line-height: 1.2;
}

.tileboard-suite-option > i {
  color: rgba(226, 239, 255, 0.68);
  font-size: 0.86rem;
}

.tileboard-heading-actions {
  position: fixed;
  top: clamp(14px, 1.4vw, 24px);
  right: clamp(16px, 2.2vw, 34px);
  z-index: 32;
  display: flex;
  align-items: start;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
}

.tileboard-heading-actions .homepage-view-switcher {
  background: rgba(7, 10, 24, 0.88);
}

.tileboard-heading-actions .homepage-view-status {
  white-space: nowrap;
}

.tileboard-user-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.tileboard-control-anchor {
  position: relative;
}

.tileboard-top-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid rgba(132, 190, 255, 0.18);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(9, 14, 34, 0.72);
  color: rgba(236, 245, 255, 0.9);
  font-size: 1.08rem;
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.tileboard-top-icon-button:hover,
.tileboard-top-icon-button:focus-visible,
.tileboard-top-icon-button.is-active {
  border-color: rgba(126, 209, 255, 0.42);
  background:
    linear-gradient(145deg, rgba(37, 127, 236, 0.56), rgba(17, 25, 58, 0.82)),
    rgba(9, 14, 34, 0.86);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.tileboard-top-icon-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(126, 209, 255, 0.22);
}

.tileboard-top-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: #35b4ff;
  color: #031123;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 4px;
}

.tileboard-profile-chip {
  display: inline-grid;
  grid-template-columns: 36px minmax(0, auto);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #f2f7ff;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.tileboard-profile-chip:hover,
.tileboard-profile-chip:focus-visible,
.tileboard-profile-chip.is-active {
  border-color: rgba(126, 209, 255, 0.28);
  background: rgba(126, 209, 255, 0.08);
  outline: none;
}

.tileboard-profile-chip > span:last-child {
  display: grid;
  gap: 1px;
}

.tileboard-profile-chip strong,
.tileboard-profile-chip span span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tileboard-profile-chip strong {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
}

.tileboard-profile-chip span span {
  color: rgba(185, 205, 235, 0.74);
  font-size: 0.84rem;
  font-weight: 350;
}

.tileboard-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2c7be5, #6d46db);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 850;
  object-fit: cover;
}

.tileboard-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: none;
  width: min(360px, calc(100vw - 32px));
  border: 1px solid rgba(126, 209, 255, 0.2);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(10, 17, 39, 0.98), rgba(4, 8, 21, 0.98)),
    rgba(7, 10, 24, 0.98);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #eef6ff;
  padding: 10px;
}

.tileboard-menu-panel.is-open {
  display: grid;
  gap: 10px;
}

.tileboard-menu-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.tileboard-menu-head > span {
  display: grid;
  gap: 2px;
}

.tileboard-menu-head strong {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 500;
}

.tileboard-menu-head span span {
  color: rgba(205, 224, 250, 0.72);
  font-size: 0.85rem;
}

.tileboard-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border: 1px solid rgba(126, 209, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(236, 245, 255, 0.86);
  cursor: pointer;
}

.tileboard-menu-close:hover,
.tileboard-menu-close:focus-visible {
  border-color: rgba(126, 209, 255, 0.34);
  color: #ffffff;
  outline: none;
}

.tileboard-menu-primary,
.tileboard-menu-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(126, 209, 255, 0.22);
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.62rem 0.84rem;
}

.tileboard-menu-primary {
  background: linear-gradient(145deg, rgba(24, 131, 229, 0.78), rgba(37, 204, 193, 0.68));
  color: #ffffff;
}

.tileboard-menu-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 243, 255, 0.86);
}

.tileboard-menu-wide {
  width: 100%;
}

.tileboard-notification-list,
.tileboard-profile-menu-links {
  display: grid;
  gap: 6px;
  max-height: min(420px, 58vh);
  overflow: auto;
}

.tileboard-notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
  padding: 8px;
}

.tileboard-notification-item.is-unread {
  border-color: rgba(126, 209, 255, 0.24);
  background: rgba(47, 125, 255, 0.1);
}

.tileboard-notification-open {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.tileboard-notification-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1678e6, #36d7ff);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
}

.tileboard-notification-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.tileboard-notification-copy strong,
.tileboard-notification-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tileboard-notification-copy strong {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
}

.tileboard-notification-copy span {
  color: rgba(213, 228, 250, 0.72);
  font-size: 0.8rem;
}

.tileboard-notification-read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border: 1px solid rgba(126, 209, 255, 0.16);
  border-radius: 50%;
  background: rgba(122, 240, 203, 0.1);
  color: #a9ffe9;
  cursor: pointer;
}

.tileboard-menu-empty {
  margin: 0;
  color: rgba(213, 228, 250, 0.72);
  font-size: 0.9rem;
}

.tileboard-profile-menu-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(126, 209, 255, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 10px;
  text-align: left;
}

.tileboard-profile-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2c7be5, #6d46db);
  color: #ffffff;
  font-weight: 700;
  overflow: hidden;
}

.tileboard-profile-menu-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.tileboard-profile-menu-copy strong {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
}

.tileboard-profile-menu-copy span,
.tileboard-profile-menu-status {
  color: rgba(213, 228, 250, 0.72);
  font-size: 0.82rem;
}

.tileboard-profile-menu-status {
  border: 1px solid rgba(122, 240, 203, 0.18);
  border-radius: 999px;
  background: rgba(122, 240, 203, 0.08);
  color: #bdffe9;
  padding: 0.32rem 0.54rem;
}

.tileboard-profile-menu-links button {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0.72rem 0.78rem;
  text-align: left;
}

.tileboard-profile-menu-links button:hover,
.tileboard-profile-menu-links button:focus-visible {
  border-color: rgba(126, 209, 255, 0.2);
  background: rgba(47, 125, 255, 0.12);
  outline: none;
}

.tileboard-profile-menu-links strong {
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 500;
}

.tileboard-profile-menu-links span {
  color: rgba(213, 228, 250, 0.68);
  font-size: 0.78rem;
}

.tileboard-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: start center;
  background: rgba(2, 6, 16, 0.52);
  padding: min(16vh, 130px) 18px 18px;
}

.tileboard-task-composer {
  position: relative;
  z-index: 10021;
  display: grid;
  gap: 12px;
  width: min(640px, 100%);
  max-height: min(820px, calc(100svh - 36px));
  border: 1px solid rgba(126, 209, 255, 0.22);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(10, 17, 39, 0.98), rgba(4, 8, 21, 0.98)),
    rgba(7, 10, 24, 0.98);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding: 16px;
  overflow: auto;
  scrollbar-color: rgba(126, 209, 255, 0.44) rgba(255, 255, 255, 0.045);
  scrollbar-width: thin;
}

.tileboard-task-composer::-webkit-scrollbar,
.tileboard-wallpaper-results::-webkit-scrollbar,
.tileboard-notification-list::-webkit-scrollbar,
.tileboard-profile-menu-links::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.tileboard-task-composer::-webkit-scrollbar-track,
.tileboard-wallpaper-results::-webkit-scrollbar-track,
.tileboard-notification-list::-webkit-scrollbar-track,
.tileboard-profile-menu-links::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.035);
  border-radius: 999px;
}

.tileboard-task-composer::-webkit-scrollbar-thumb,
.tileboard-wallpaper-results::-webkit-scrollbar-thumb,
.tileboard-notification-list::-webkit-scrollbar-thumb,
.tileboard-profile-menu-links::-webkit-scrollbar-thumb {
  border: 2px solid rgba(5, 10, 25, 0.96);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(126, 209, 255, 0.72), rgba(55, 125, 255, 0.52));
}

.tileboard-task-composer-head,
.tileboard-task-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tileboard-task-composer-head > span {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 500;
}

.tileboard-field {
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(126, 209, 255, 0.18);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
  font: inherit;
  padding: 0.72rem 0.84rem;
}

.tileboard-field:focus {
  border-color: rgba(126, 209, 255, 0.42);
  outline: none;
  box-shadow: 0 0 0 3px rgba(126, 209, 255, 0.18);
}

.tileboard-field.is-required-missing {
  border-color: rgba(255, 135, 135, 0.66);
}

.tileboard-note-field {
  min-height: 132px;
  resize: vertical;
}

.tileboard-task-composer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.tileboard-advanced-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  border: 1px solid rgba(126, 209, 255, 0.16);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(234, 244, 255, 0.9);
  cursor: pointer;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 450;
  padding: 0.62rem 0.78rem;
  text-align: left;
}

.tileboard-advanced-toggle:hover,
.tileboard-advanced-toggle:focus-visible,
.tileboard-advanced-toggle.is-open {
  border-color: rgba(126, 209, 255, 0.34);
  background: rgba(47, 125, 255, 0.11);
  color: #ffffff;
  outline: none;
}

.tileboard-advanced-task-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid rgba(126, 209, 255, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  padding: 10px;
}

.tileboard-advanced-task-panel label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.tileboard-advanced-task-panel label > span {
  color: rgba(215, 231, 252, 0.72);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
}

.tileboard-custom-select {
  position: relative;
  z-index: 8;
}

.tileboard-custom-select.is-open {
  z-index: 30;
}

.tileboard-custom-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(126, 209, 255, 0.18);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  padding: 0.72rem 0.84rem;
  text-align: left;
}

.tileboard-custom-select-trigger:hover,
.tileboard-custom-select-trigger:focus-visible,
.tileboard-custom-select.is-open .tileboard-custom-select-trigger {
  border-color: rgba(126, 209, 255, 0.42);
  outline: none;
  box-shadow: 0 0 0 3px rgba(126, 209, 255, 0.16);
}

.tileboard-custom-select-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tileboard-custom-select-trigger i {
  color: rgba(214, 232, 255, 0.88);
  font-size: 0.8rem;
}

.tileboard-custom-select-menu {
  position: absolute;
  inset: calc(100% + 5px) 0 auto;
  z-index: 80;
  display: grid;
  max-height: 210px;
  border: 1px solid rgba(126, 209, 255, 0.24);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(12, 20, 45, 0.99), rgba(5, 10, 24, 0.99)),
    rgba(7, 12, 28, 0.99);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: auto;
  padding: 5px;
  scrollbar-color: rgba(126, 209, 255, 0.44) transparent;
  scrollbar-width: thin;
}

.tileboard-custom-select-menu::-webkit-scrollbar {
  width: 6px;
}

.tileboard-custom-select-menu::-webkit-scrollbar-track {
  background: transparent;
}

.tileboard-custom-select-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(126, 209, 255, 0.52);
}

.tileboard-custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: rgba(235, 245, 255, 0.9);
  cursor: pointer;
  font: inherit;
  padding: 0.58rem 0.66rem;
  text-align: left;
}

.tileboard-custom-select-option:hover,
.tileboard-custom-select-option:focus-visible,
.tileboard-custom-select-option.is-selected {
  border-color: rgba(126, 209, 255, 0.24);
  background: rgba(47, 125, 255, 0.18);
  color: #ffffff;
  outline: none;
}

.tileboard-custom-select-option i {
  color: #8ef4ff;
  font-size: 0.78rem;
}

.tileboard-advanced-wide {
  grid-column: 1 / -1;
}

.tileboard-advanced-textarea {
  min-height: 96px;
  resize: vertical;
}

.tileboard-wallpaper-backdrop {
  place-items: center;
  padding: 28px 18px;
}

.tileboard-wallpaper-picker {
  width: min(980px, calc(100vw - 36px));
  height: min(700px, calc(100svh - 96px));
  max-height: calc(100svh - 96px);
  grid-template-rows: auto auto auto minmax(0, 1fr) minmax(58px, auto);
  overflow: hidden;
  padding-bottom: 18px;
}

.tileboard-wallpaper-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.tileboard-wallpaper-error {
  margin: 0;
  border: 1px solid rgba(255, 145, 145, 0.26);
  border-radius: 4px;
  background: rgba(255, 80, 80, 0.1);
  color: #ffd4d4;
  font-size: 0.9rem;
  padding: 0.68rem 0.78rem;
}

.tileboard-wallpaper-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 240px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0 8px 16px 0;
  scrollbar-color: rgba(126, 209, 255, 0.44) rgba(255, 255, 255, 0.045);
  scrollbar-width: thin;
}

.tileboard-wallpaper-card {
  position: relative;
  display: grid;
  min-height: 160px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.tileboard-wallpaper-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, 0.66));
  content: "";
  pointer-events: none;
}

.tileboard-wallpaper-card:hover,
.tileboard-wallpaper-card:focus-visible {
  border-color: rgba(126, 209, 255, 0.48);
  outline: none;
  transform: translateY(-1px);
}

.tileboard-wallpaper-card.is-selected {
  border-color: rgba(126, 255, 229, 0.62);
  box-shadow:
    0 0 0 2px rgba(126, 255, 229, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.tileboard-wallpaper-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tileboard-wallpaper-card-copy {
  position: relative;
  z-index: 1;
  align-self: end;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
}

.tileboard-wallpaper-card-copy strong,
.tileboard-wallpaper-card-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tileboard-wallpaper-card-copy strong {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
}

.tileboard-wallpaper-card-copy span {
  color: rgba(231, 242, 255, 0.78);
  font-size: 0.78rem;
}

.tileboard-wallpaper-selected-mark {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(126, 255, 229, 0.42);
  border-radius: 999px;
  background: rgba(4, 17, 24, 0.78);
  color: #c3fff2;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.28rem 0.46rem;
}

.tileboard-wallpaper-actions > span {
  display: inline-flex;
  gap: 8px;
}

.tileboard-wallpaper-actions {
  flex: 0 0 auto;
  align-items: center;
  min-height: 58px;
  margin-top: 0;
  padding: 10px 0 0;
}

.tileboard-wallpaper-actions .tileboard-menu-secondary {
  min-height: 42px;
}

.tileboard-wallpaper-attribution {
  align-self: center;
  color: rgba(205, 224, 250, 0.72);
  font-size: 0.84rem;
  text-decoration: none;
}

.tileboard-wallpaper-attribution:hover,
.tileboard-wallpaper-attribution:focus-visible {
  color: #ffffff;
  outline: none;
  text-decoration: underline;
}

.tileboard-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(210px, 1fr);
  gap: 8px;
  min-height: min(780px, calc(100svh - 126px));
  min-width: 0;
}

.tileboard-tile {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 152px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #ffffff;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, filter 150ms ease;
}

.tileboard-tile:hover,
.tileboard-tile:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  filter: brightness(1.07);
  outline: none;
  transform: translateY(-2px);
}

.tileboard-tile:focus-visible {
  box-shadow: 0 0 0 3px rgba(126, 209, 255, 0.24);
}

.tileboard-summary-tile {
  align-content: space-between;
  padding: 28px 24px 22px;
}

.tileboard-summary-tile.is-blue {
  background: linear-gradient(145deg, #0a8ad4, #083c9e 88%);
}

.tileboard-summary-tile.is-violet {
  background: linear-gradient(145deg, #6d41cc, #2a176f 88%);
}

.tileboard-summary-tile.is-teal {
  background: linear-gradient(145deg, #049e9d, #045060 88%);
}

.tileboard-summary-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.tileboard-summary-top strong {
  font-size: clamp(3.1rem, 5vw, 5.3rem);
  font-weight: 300;
  line-height: 0.95;
}

.tileboard-summary-top i {
  color: rgba(240, 248, 255, 0.78);
  font-size: clamp(3.2rem, 4.2vw, 5.2rem);
  line-height: 1;
}

.tileboard-summary-label {
  max-width: 12rem;
  color: rgba(250, 253, 255, 0.94);
  font-size: clamp(1rem, 1vw, 1.22rem);
  font-weight: 500;
  line-height: 1.35;
}

.tileboard-progress-stack {
  grid-column: span 3;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.tileboard-xp-tile {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  background:
    radial-gradient(circle at 18% 26%, rgba(43, 157, 255, 0.28), transparent 18rem),
    linear-gradient(145deg, #09274d, #07162f 72%, #050b1d);
  min-height: 0;
  padding: 20px 24px;
}

.tileboard-xp-art-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 76px;
  block-size: 76px;
}

.tileboard-xp-art {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(20, 146, 255, 0.32));
}

.tileboard-xp-copy,
.tileboard-xp-head {
  display: grid;
  min-width: 0;
}

.tileboard-xp-copy {
  gap: 8px;
}

.tileboard-xp-head {
  grid-template-columns: minmax(0, auto) auto;
  align-items: baseline;
  gap: 10px;
}

.tileboard-xp-head strong {
  color: #f7fbff;
  font-size: clamp(1.45rem, 1.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.1;
}

.tileboard-xp-head span,
.tileboard-xp-next,
.tileboard-xp-percent {
  color: rgba(213, 228, 250, 0.78);
  font-size: 0.95rem;
  font-weight: 400;
}

.tileboard-xp-meter {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.tileboard-xp-fill {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #36a5ff, #77e6ff);
}

.tileboard-momentum-tile {
  align-content: space-between;
  gap: 12px;
  background:
    radial-gradient(circle at 92% 14%, rgba(122, 240, 203, 0.22), transparent 14rem),
    linear-gradient(145deg, #086a83, #064150 58%, #06172d);
  min-height: 0;
  padding: 20px 24px;
}

.tileboard-momentum-head,
.tileboard-momentum-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 14px;
}

.tileboard-momentum-head {
  color: rgba(244, 251, 255, 0.82);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
}

.tileboard-momentum-head i {
  color: rgba(231, 255, 248, 0.82);
  font-size: clamp(2.4rem, 3.1vw, 4rem);
  line-height: 1;
}

.tileboard-momentum-copy strong {
  color: #ffffff;
  font-size: clamp(1.8rem, 2.1vw, 2.55rem);
  font-weight: 300;
  line-height: 1;
}

.tileboard-momentum-copy span {
  color: rgba(230, 244, 255, 0.8);
  font-size: 0.98rem;
  font-weight: 400;
  text-align: right;
}

.tileboard-momentum-meter {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 20px;
  border: 1px solid rgba(198, 246, 255, 0.18);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(3, 12, 26, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.tileboard-momentum-fill {
  position: relative;
  display: block;
  inline-size: var(--tileboard-momentum-fill, 0%);
  block-size: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.34) 0 7px,
      rgba(255, 255, 255, 0.06) 7px 14px
    ),
    linear-gradient(90deg, #0db7ff 0%, #20e5c2 56%, #b4ff57 100%);
  box-shadow:
    0 0 18px rgba(39, 229, 194, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.tileboard-action-tile {
  grid-column: span 2;
  align-content: space-between;
  border: 0;
  background: linear-gradient(145deg, #064bd5, #09258e 74%, #061044);
  cursor: pointer;
  font: inherit;
  padding: 34px 28px 24px;
}

.tileboard-action-icon {
  display: inline-grid;
  place-items: center;
  inline-size: max-content;
  color: rgba(236, 247, 255, 0.9);
  font-size: clamp(3.8rem, 5vw, 6.25rem);
  line-height: 1;
}

.tileboard-action-tile strong {
  max-width: 18rem;
  color: #ffffff;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.28;
}

.tileboard-action-arrow,
.tileboard-task-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tileboard-action-arrow {
  justify-self: end;
  font-size: 1.35rem;
  transition: transform 150ms ease;
}

.tileboard-action-tile:hover .tileboard-action-arrow,
.tileboard-action-tile:focus-visible .tileboard-action-arrow {
  transform: translateX(2px);
}

.tileboard-task-tile {
  align-content: space-between;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 22px 18px 18px;
}

.tileboard-task-tile.is-green {
  background: linear-gradient(145deg, #5aaa27, #286014 88%);
}

.tileboard-task-tile.is-purple {
  background: linear-gradient(145deg, #653bc7, #2f176d 88%);
}

.tileboard-task-tile.is-amber {
  background: linear-gradient(145deg, #db8500, #7b3000 88%);
}

.tileboard-task-tile.is-teal {
  background: linear-gradient(145deg, #079f9d, #04505c 88%);
}

.tileboard-task-tile.is-blue {
  background: linear-gradient(145deg, #1669c9, #07346d 88%);
}

.tileboard-task-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(244, 251, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.tileboard-task-kicker i {
  font-size: clamp(2.4rem, 3vw, 3.8rem);
  line-height: 1;
}

.tileboard-task-tile strong {
  color: #ffffff;
  font-size: clamp(1.25rem, 1.5vw, 1.65rem);
  font-weight: 500;
  line-height: 1.12;
}

.tileboard-task-description {
  color: rgba(252, 254, 255, 0.88);
  font-size: clamp(0.95rem, 1vw, 1.08rem);
  font-weight: 350;
  line-height: 1.35;
}

.tileboard-task-foot {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
}

.tileboard-task-foot i {
  font-size: clamp(1.8rem, 2.2vw, 2.8rem);
  line-height: 1;
}

.tileboard-empty {
  align-content: center;
  justify-items: start;
  gap: 10px;
  background: linear-gradient(145deg, rgba(22, 31, 58, 0.9), rgba(9, 12, 28, 0.96));
  padding: 18px;
}

.tileboard-empty i {
  color: #86f0ce;
  font-size: 1.5rem;
}

.tileboard-empty strong {
  color: #f4f9ff;
}

.tileboard-empty span {
  color: rgba(198, 216, 244, 0.76);
  font-size: 0.82rem;
}

@media (max-width: 1120px) {
  .tileboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tileboard-progress-stack {
    grid-column: span 3;
  }
}

@media (max-width: 820px) {
  .homepage-view-toolbar-inner {
    align-items: stretch;
    justify-content: space-between;
  }

  .homepage-view-status {
    display: none;
  }

  .tileboard-shell {
    grid-template-columns: 1fr;
  }

  .tileboard-nav-rail {
    grid-template-rows: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(44px, 1fr);
    min-height: 0;
    overflow-x: auto;
    padding: 5px;
    scrollbar-width: none;
  }

  .tileboard-nav-main {
    display: contents;
  }

  .tileboard-wallpaper-rail-button {
    align-self: auto;
  }

  .tileboard-nav-button span {
    display: none;
  }

  .tileboard-heading {
    align-items: start;
  }

  .tileboard-heading-actions {
    position: static;
    justify-content: start;
    flex-wrap: wrap;
  }

  .tileboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tileboard-wallpaper-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tileboard-progress-stack {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .homepage-view-toolbar-inner,
  .tileboard-heading {
    display: grid;
    gap: 10px;
  }

  .homepage-view-switcher {
    width: 100%;
  }

  .homepage-view-option {
    flex: 1 1 0;
    min-width: 0;
  }

  .tileboard-grid {
    grid-template-columns: 1fr;
  }

  .tileboard-wallpaper-picker {
    width: calc(100vw - 24px);
  }

  .tileboard-wallpaper-search,
  .tileboard-wallpaper-results,
  .tileboard-wallpaper-actions,
  .tileboard-advanced-task-panel {
    grid-template-columns: 1fr;
  }

  .tileboard-wallpaper-actions,
  .tileboard-wallpaper-actions > span {
    align-items: stretch;
    display: grid;
  }

  .tileboard-progress-stack {
    grid-column: auto;
  }

  .tileboard-xp-tile {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .tileboard-action-tile {
    grid-column: auto;
  }

  .tileboard-profile-chip {
    justify-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-view-option,
  .tileboard-nav-button,
  .tileboard-nav-button span,
  .tileboard-tile,
  .tileboard-action-arrow {
    transition: none;
  }

  .tileboard-tile:hover,
  .tileboard-tile:focus-visible,
  .tileboard-nav-button:hover,
  .tileboard-nav-button:focus-visible,
  .tileboard-nav-button.is-active {
    transform: none;
  }
}

.homepage::before {
  position: absolute;
  inset: -110px 0 auto;
  z-index: -1;
  height: 820px;
  background:
    radial-gradient(circle at 50% 20%, var(--home-backdrop-glow-primary), transparent 32rem),
    radial-gradient(circle at 50% 4%, var(--home-backdrop-glow-secondary), transparent 24rem);
  content: "";
  pointer-events: none;
}

.live-presence-band {
  position: relative;
  z-index: 5;
  padding: clamp(12px, 2vw, 18px) 0 0;
}

.suite-home-page-root > .live-presence-band {
  position: relative;
  z-index: 8;
}

.live-presence-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--beta-space-4);
  width: min(100%, 1100px);
  margin: 0 auto;
  border: var(--beta-border-width) solid rgba(126, 209, 255, 0.28);
  border-radius: var(--beta-radius-lg);
  background:
    linear-gradient(135deg, rgba(8, 13, 28, 0.9), rgba(16, 26, 48, 0.82)),
    radial-gradient(circle at 0 50%, rgba(50, 220, 255, 0.14), transparent 20rem);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: clamp(12px, 1.8vw, 16px);
  backdrop-filter: blur(18px);
}

.live-presence-copy {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--beta-space-4);
}

.live-presence-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--beta-space-2);
  border: var(--beta-border-width) solid rgba(122, 240, 203, 0.26);
  border-radius: var(--beta-radius-pill);
  background: rgba(122, 240, 203, 0.1);
  color: #b9ffe9;
  font-size: var(--beta-text-xs);
  font-weight: 850;
  line-height: 1;
  padding: 0.5rem 0.72rem;
  text-transform: uppercase;
}

.live-presence-dot {
  width: 0.55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #7af0cb;
  box-shadow: 0 0 14px rgba(122, 240, 203, 0.62);
}

.live-presence-text {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.live-presence-text strong {
  color: var(--home-heading-ink-strong);
  font-size: clamp(1rem, 1.1vw, 1.18rem);
  line-height: 1.15;
}

.live-presence-text span {
  color: rgba(225, 236, 255, 0.78);
  font-size: var(--beta-text-sm);
  line-height: 1.35;
}

.live-presence-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--beta-space-2);
  white-space: nowrap;
}

.overview-notification-band {
  position: relative;
  z-index: 5;
}

.overview-notification-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--beta-space-4);
  width: min(100%, 1100px);
  margin: 0 auto;
  border: var(--beta-border-width) solid rgba(126, 209, 255, 0.28);
  border-radius: var(--beta-radius-lg);
  background:
    linear-gradient(135deg, rgba(8, 13, 28, 0.9), rgba(16, 26, 48, 0.82)),
    radial-gradient(circle at 0 50%, rgba(50, 220, 255, 0.14), transparent 20rem);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: clamp(12px, 1.8vw, 16px);
  backdrop-filter: blur(18px);
}

.overview-notification-copy {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--beta-space-4);
}

.overview-notification-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--beta-space-2);
  border: var(--beta-border-width) solid rgba(122, 240, 203, 0.26);
  border-radius: var(--beta-radius-pill);
  background: rgba(122, 240, 203, 0.1);
  color: #b9ffe9;
  font-size: var(--beta-text-xs);
  font-weight: 850;
  line-height: 1;
  padding: 0.5rem 0.72rem;
  text-transform: uppercase;
}

.overview-notification-pill-dot {
  width: 0.55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #7af0cb;
  box-shadow: 0 0 14px rgba(122, 240, 203, 0.62);
}

.overview-notification-text {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.overview-notification-text strong {
  color: var(--home-heading-ink-strong);
  font-size: clamp(1rem, 1.1vw, 1.18rem);
  line-height: 1.15;
}

.overview-notification-text span {
  color: rgba(225, 236, 255, 0.78);
  font-size: var(--beta-text-sm);
  line-height: 1.35;
}

.overview-notification-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--beta-space-3);
}

.overview-notification-action {
  display: inline-flex;
  align-items: center;
  gap: var(--beta-space-2);
  white-space: nowrap;
}

.overview-notification-dismiss {
  white-space: nowrap;
}

.hero-section {
  position: relative;
  padding: 0 0 clamp(28px, 4vw, 60px);
  overflow: visible;
}

.hero-top-composition {
  --hero-content-max: 1100px;
  --task-card-gap: clamp(16px, 1.8vw, 24px);
  --task-card-min: 238px;

  position: relative;
  isolation: isolate;
  padding-top: clamp(24px, 3vw, 40px);
}

.hero-top-composition::before {
  position: absolute;
  inset: clamp(44px, 8vw, 96px) 8% auto;
  z-index: 0;
  height: clamp(220px, 26vw, 340px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--home-hero-halo-primary), transparent 62%),
    radial-gradient(circle at 50% 50%, var(--home-hero-halo-secondary), transparent 78%);
  filter: blur(20px);
  content: "";
  pointer-events: none;
}

.hero-ambient-orbit {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  display: grid;
  place-items: start center;
  height: clamp(430px, 48vw, 720px);
  opacity: 0.62;
  pointer-events: none;
  transform: translateY(-20%);
}

.hero-flow {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}

.hero-orbit-shell {
  display: grid;
  place-items: center;
  width: 100%;
  padding-top: clamp(20px, 4vw, 42px);
  padding-inline: var(--beta-space-4);
}

.hero-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 920px);
  aspect-ratio: 1;
}

.hero-orbit::before,
.hero-orbit::after {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.hero-orbit::before {
  width: min(88vw, 900px);
  aspect-ratio: 1;
}

.hero-orbit::after {
  width: min(68vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, var(--home-orbit-core-glow), transparent 58%);
}

.orbit-rings {
  position: relative;
  width: min(72vw, 600px);
  max-width: 100%;
  aspect-ratio: 1;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 54%, var(--home-orbit-ring-glow), transparent 48%);
}

.orbit-rings::before {
  position: absolute;
  inset: 18%;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
}

.orbit-dot {
  position: absolute;
  z-index: 2;
  display: block;
  width: clamp(18px, 3vw, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--beta-cyan), var(--beta-blue));
  box-shadow: 0 0 24px var(--home-orbit-dot-shadow);
  pointer-events: none;
}

.dot-1 { top: 1%; left: 49%; }
.dot-2 { top: 4%; left: 62%; }
.dot-3 { top: 12%; left: 74%; }
.dot-4 { top: 25%; left: 84%; }
.dot-5 { top: 41%; left: 89%; opacity: 0.74; }
.dot-6 { top: 58%; left: 86%; opacity: 0.42; }
.dot-7 { top: 8%; left: 35%; }
.dot-8 { top: 18%; left: 24%; }
.dot-9 { top: 33%; left: 15%; opacity: 0.84; }
.dot-10 { top: 51%; left: 10%; opacity: 0.46; }
.dot-11 { top: 13%; left: 51%; width: clamp(14px, 2.5vw, 28px); opacity: 0.62; }
.dot-12 { top: 21%; left: 62%; width: clamp(14px, 2.5vw, 28px); opacity: 0.52; }

.hero-task-region {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.hero-task-deck {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--task-card-gap);
  width: min(100%, var(--hero-content-max));
  margin: 0 auto;
}

/* Noctra Suite homepage (suite cards + globe/space hero). Opt-in via class/data hooks. */
.homepage :is(.noctra-suite-cards, .suite-cards, [data-suite-cards]) {
  --suite-cards-gap: clamp(16px, 2.4vw, 26px);
  --suite-cards-max: 1060px;

  display: grid;
  gap: var(--suite-cards-gap);
  width: min(100%, var(--suite-cards-max));
  margin-inline: auto;
}

.homepage :is(.noctra-suite-cards-grid, .suite-cards-grid, [data-suite-cards-grid]) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--suite-cards-gap);
  align-items: stretch;
}

.homepage :is(.noctra-suite-card, .suite-card, [data-suite-card]) {
  min-width: 0;
}

.task-card {
  position: relative;
  display: flex;
  flex: 1 1 var(--task-card-min);
  flex-direction: column;
  min-width: min(100%, var(--task-card-min));
  max-width: calc((var(--hero-content-max) - (3 * var(--task-card-gap))) / 4);
  min-height: 216px;
  overflow: hidden;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.13);
  border-radius: var(--beta-radius-lg);
  background:
    linear-gradient(155deg, rgba(24, 28, 60, 0.88), rgba(8, 10, 26, 0.82)),
    radial-gradient(circle at 12% 0, rgba(50, 220, 255, 0.14), transparent 18rem);
  box-shadow:
    var(--beta-shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: var(--beta-space-5);
  backdrop-filter: blur(20px);
  transition:
    border-color var(--beta-transition-base),
    box-shadow var(--beta-transition-base),
    transform var(--beta-transition-base);
}

.task-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%);
  content: "";
  pointer-events: none;
}

.task-card:hover,
.task-card:focus-within {
  border-color: rgba(135, 185, 255, 0.28);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.4),
    0 0 36px rgba(47, 125, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.task-card-head,
.task-card-copy,
.task-card-footer {
  position: relative;
  z-index: 1;
}

.task-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--beta-space-3);
  margin-bottom: var(--beta-space-3);
}

.task-card-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.task-card h2 {
  margin: 0;
  color: var(--home-heading-ink);
  font-size: clamp(1.05rem, 1.1vw, 1.28rem);
  font-weight: 800;
  line-height: var(--beta-leading-tight);
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.task-eyebrow,
.task-summary {
  position: relative;
  z-index: 1;
}

.task-eyebrow {
  margin: 0 0 var(--beta-space-2);
  color: var(--beta-accent-strong);
  font-size: var(--beta-text-xs);
  font-weight: 820;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.task-time-pill {
  flex: 0 0 auto;
  border: var(--beta-border-width) solid rgba(255, 255, 255, 0.09);
  border-radius: var(--beta-radius-pill);
  background: rgba(47, 125, 255, 0.14);
  color: #dff0ff;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1;
  padding: 0.52rem 0.72rem;
  white-space: nowrap;
}

.task-summary {
  margin: 0;
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.task-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--beta-space-3);
  margin-top: auto;
  padding-top: var(--beta-space-5);
}

.task-card-action {
  align-self: flex-start;
}

.task-card-loading {
  gap: var(--beta-space-4);
}

.task-card-loading .task-card-copy {
  display: grid;
  gap: var(--beta-space-3);
}

.skeleton-line {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.08);
}

.skeleton-line::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  content: "";
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.25s ease-in-out infinite;
  animation-delay: var(--skeleton-delay, 0ms);
}

.skeleton-pill {
  inline-size: 116px;
  block-size: 16px;
}

.skeleton-short {
  inline-size: 102px;
}

.skeleton-time-pill {
  inline-size: 78px;
  block-size: 28px;
}

.skeleton-title {
  inline-size: min(76%, 260px);
  block-size: 26px;
  border-radius: var(--beta-radius-sm);
}

.skeleton-body {
  inline-size: 100%;
  block-size: 14px;
}

.skeleton-body-short {
  inline-size: 68%;
}

.skeleton-action {
  inline-size: 84px;
  block-size: 34px;
}

.hero-user-skeleton .user-copy,
.hero-user-skeleton .user-meta,
.hero-user-skeleton .user-action-row {
  width: 100%;
}

.hero-skeleton-copy {
  display: grid;
  gap: var(--beta-space-2);
}

.hero-skeleton-avatar {
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
}

.hero-skeleton-icon {
  inline-size: var(--beta-control-sm);
  block-size: var(--beta-control-sm);
  border-radius: var(--beta-radius-pill);
}

.hero-skeleton-tag {
  inline-size: 108px;
  block-size: 34px;
}

.hero-skeleton-button {
  inline-size: 136px;
  block-size: var(--beta-control-lg);
}

.hero-skeleton-button-short {
  inline-size: 104px;
}

.hero-skeleton-metric-value {
  inline-size: 48px;
  block-size: 30px;
  border-radius: var(--beta-radius-sm);
}

.hero-skeleton-copy-stack {
  display: grid;
  gap: var(--beta-space-3);
}

.hero-skeleton-momentum {
  inline-size: 100%;
  block-size: 22px;
  border-radius: 999px;
}

@keyframes skeleton-shimmer {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .orbit-dot {
    top: 50%;
    left: 50%;
    transform:
      translate(-50%, -50%)
      rotate(var(--orbit-angle))
      translateX(var(--orbit-radius));
    animation: orbit-spin var(--orbit-duration) linear infinite;
    will-change: transform;
  }

  .dot-1 {
    --orbit-angle: 22deg;
    --orbit-radius: clamp(118px, 19vw, 236px);
    --orbit-duration: 54s;
    animation-delay: -6s;
  }

  .dot-2 {
    --orbit-angle: 68deg;
    --orbit-radius: clamp(92px, 15.5vw, 198px);
    --orbit-duration: 46s;
    animation-delay: -18s;
    animation-direction: reverse;
  }

  .dot-3 {
    --orbit-angle: 118deg;
    --orbit-radius: clamp(132px, 21.5vw, 264px);
    --orbit-duration: 60s;
    animation-delay: -24s;
  }

  .dot-4 {
    --orbit-angle: 166deg;
    --orbit-radius: clamp(104px, 17vw, 214px);
    --orbit-duration: 50s;
    animation-delay: -12s;
    animation-direction: reverse;
  }

  .dot-5 {
    --orbit-angle: 214deg;
    --orbit-radius: clamp(84px, 13vw, 170px);
    --orbit-duration: 38s;
    opacity: 0.74;
    animation-delay: -8s;
  }

  .dot-6 {
    --orbit-angle: 258deg;
    --orbit-radius: clamp(126px, 20vw, 246px);
    --orbit-duration: 58s;
    opacity: 0.42;
    animation-delay: -30s;
    animation-direction: reverse;
  }

  .dot-7 {
    --orbit-angle: 304deg;
    --orbit-radius: clamp(90px, 14.5vw, 188px);
    --orbit-duration: 42s;
    animation-delay: -14s;
  }

  .dot-8 {
    --orbit-angle: 348deg;
    --orbit-radius: clamp(140px, 23vw, 282px);
    --orbit-duration: 64s;
    animation-delay: -20s;
    animation-direction: reverse;
  }

  .dot-9 {
    --orbit-angle: 34deg;
    --orbit-radius: clamp(78px, 12vw, 154px);
    --orbit-duration: 36s;
    opacity: 0.84;
    animation-delay: -10s;
  }

  .dot-10 {
    --orbit-angle: 82deg;
    --orbit-radius: clamp(120px, 19.5vw, 240px);
    --orbit-duration: 52s;
    opacity: 0.46;
    animation-delay: -26s;
    animation-direction: reverse;
  }

  .dot-11 {
    --orbit-angle: 142deg;
    --orbit-radius: clamp(86px, 13.5vw, 176px);
    --orbit-duration: 40s;
    width: clamp(14px, 2.5vw, 28px);
    opacity: 0.62;
    animation-delay: -16s;
  }

  .dot-12 {
    --orbit-angle: 196deg;
    --orbit-radius: clamp(102px, 16.5vw, 210px);
    --orbit-duration: 48s;
    width: clamp(14px, 2.5vw, 28px);
    opacity: 0.52;
    animation-delay: -22s;
    animation-direction: reverse;
  }

  @keyframes orbit-spin {
    from {
      transform:
        translate(-50%, -50%)
        rotate(var(--orbit-angle))
        translateX(var(--orbit-radius));
    }

    to {
      transform:
        translate(-50%, -50%)
        rotate(calc(var(--orbit-angle) + 1turn))
        translateX(var(--orbit-radius));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-dot {
    animation: none;
  }

  .skeleton-line::after {
    animation: none;
  }

  .task-card,
  .task-card-action {
    transition: none;
  }
}

.hero-copy {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

.section-kicker {
  margin: 0 0 var(--beta-space-4);
  color: var(--beta-accent-strong);
  font-size: var(--beta-text-xs);
  font-weight: 820;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-kicker,
.section-heading > div > p,
.section-heading > p,
.dashboard-panel-head > p,
.dashboard-panel-head > div > p,
.user-settings-view-head > p,
.user-settings-sidebar-copy p,
.user-settings-sidebar-status,
.user-settings-hero-meta,
.user-settings-status-chips,
.account-settings-stats {
  display: none;
}

.hero-copy h1,
.section-heading h2 {
  margin: 0;
  color: var(--home-heading-ink-strong);
  font-weight: 800;
  letter-spacing: 0;
}

.hero-copy h1 {
  max-width: 1100px;
  margin: var(--beta-space-8) auto 0;
  font-size: var(--beta-display-size);
  line-height: var(--beta-display-leading);
}

.hero-intro-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 8vw, 180px);
  max-width: 840px;
  margin: 0 auto;
}

.hero-intro-row p,
.hero-lede,
.section-heading p,
.card-copy,
.preview-card p {
  color: var(--beta-muted);
  line-height: var(--beta-leading-body);
}

.hero-intro-row p,
.hero-lede {
  margin-bottom: 0;
  font-size: var(--beta-text-lg);
}

.hero-lede {
  max-width: 760px;
  margin: var(--beta-space-6) auto 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--beta-space-3);
  margin-top: var(--beta-space-8);
}

.hero-system-row {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1fr);
  gap: var(--beta-space-5);
  align-items: start;
  width: min(100%, var(--hero-content-max));
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--beta-space-4);
  align-items: start;
  align-self: start;
}

.preview-card,
.beta-card {
  border: var(--beta-border-width) solid var(--beta-line);
  border-radius: var(--beta-radius-lg);
  background:
    linear-gradient(180deg, rgba(23, 26, 57, 0.78), rgba(11, 13, 31, 0.74)),
    var(--beta-surface);
  box-shadow: var(--beta-shadow-sm);
  backdrop-filter: blur(18px);
  transition:
    border-color var(--beta-transition-base),
    box-shadow var(--beta-transition-base),
    transform var(--beta-transition-base);
}

.preview-card:hover,
.preview-card:focus-within,
.beta-card:hover,
.beta-card:focus-within {
  border-color: rgba(149, 188, 255, 0.22);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(64, 110, 255, 0.08);
  transform: translateY(-1px);
}

.preview-card {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 0.8rem;
  min-height: 0;
  padding: var(--beta-space-5);
}

.preview-card-link {
  color: inherit;
  text-decoration: none;
}

.preview-card-link *,
.preview-card-link:visited,
.preview-card-link:hover,
.preview-card-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.preview-card p,
.preview-card .section-kicker,
.preview-card strong {
  margin: 0;
}

.preview-card strong {
  display: block;
  color: var(--home-heading-ink);
  font-size: var(--beta-text-xl);
  line-height: var(--beta-leading-tight);
}

.page-section {
  padding: var(--beta-section-y) 0;
}

.page-section-soft {
  background:
    radial-gradient(circle at 50% 0, rgba(47, 125, 255, 0.16), transparent 34rem),
    linear-gradient(180deg, transparent, rgba(13, 16, 39, 0.88), transparent);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--beta-space-6);
  margin-bottom: var(--beta-space-5);
}

.section-heading > div {
  max-width: 760px;
}

.section-heading h2 {
  font-size: clamp(2.35rem, 4.8vw, 5.3rem);
  line-height: 0.96;
}

.card-grid {
  display: grid;
  gap: var(--beta-space-5);
}

.support-grid,
.module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.beta-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--beta-space-6);
}

.card-copy {
  margin: 0 0 var(--beta-space-5);
}

.support-list {
  display: grid;
  gap: var(--beta-space-3);
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.support-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--beta-space-3);
  color: #d9d8e8;
}

.support-list span {
  flex: 0 0 8px;
  inline-size: 8px;
  block-size: 8px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--beta-cyan);
  box-shadow: 0 0 12px rgba(50, 220, 255, 0.56);
}

.module-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--beta-space-4);
  margin-bottom: var(--beta-space-4);
}

.module-card h3 {
  margin: 0;
  color: var(--home-heading-ink);
  font-size: var(--beta-text-xl);
  line-height: var(--beta-leading-tight);
}

.module-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--beta-space-2);
  margin-top: auto;
}

.cta-card {
  padding: var(--beta-space-8);
}

.cta-card .btn-beta {
  align-self: flex-start;
  margin-top: auto;
}

.hero-flow-dashboard {
  gap: clamp(14px, 2vw, 24px);
}

.hero-top-composition .suite-switcher-row {
  --hero-suite-switcher-lift: 24px;

  width: min(100%, var(--hero-content-max));
  margin: calc(var(--hero-suite-switcher-lift) * -1) auto calc(12px + var(--hero-suite-switcher-lift));
  justify-content: center;
  position: relative;
  z-index: 6;
}

.hero-top-composition .suite-switcher-row-inner {
  width: 100%;
  justify-content: center;
}

.hero-top-composition .suite-switcher-anchor {
  max-width: min(100%, 420px);
}

@media (max-width: 1180px) {
  .hero-top-composition .suite-switcher-row {
    --hero-suite-switcher-lift: 28px;
  }

  .hero-system-row {
    grid-template-columns: 1fr;
    gap: var(--beta-space-4);
  }

  .hero-system-row > .user-bar-preview {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .preview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.preview-card-detail {
  margin-top: 0;
  font-size: var(--beta-text-sm);
}

.beta-dashboard-section {
  padding-top: clamp(0px, 1.5vw, 14px);
}

.overview-live-event-section {
  padding-top: clamp(4px, 1vw, 14px);
}

.overview-live-event-head {
  display: grid;
  gap: 0.35rem;
  margin-bottom: var(--beta-space-4);
}

.overview-live-event-head h2 {
  margin: 0;
  color: var(--home-heading-ink-strong);
  font-size: clamp(1.5rem, 1.1rem + 1.25vw, 2.35rem);
  line-height: 0.98;
}

.overview-live-event-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(1rem, 1.8vw, 1.4rem);
  width: 100%;
  padding: clamp(18px, 2vw, 24px);
  align-items: stretch;
}

.overview-live-event-card-loading {
  min-height: clamp(320px, 36vw, 420px);
}

.overview-live-event-banner {
  --overview-event-font-size: 64px;
  --overview-event-overlay: 0.56;

  position: relative;
  width: 100%;
  min-height: clamp(260px, 28vw, 360px);
  justify-self: stretch;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(114, 167, 255, 0.28), transparent 24rem),
    linear-gradient(145deg, #081130 0%, #18133f 48%, #050811 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 48px rgba(0, 0, 0, 0.2);
}

.overview-live-event-banner[data-theme="afterglow"] {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 188, 133, 0.28), transparent 22rem),
    linear-gradient(145deg, #361520 0%, #7c463d 48%, #17111f 100%);
}

.overview-live-event-banner[data-theme="gallery"] {
  background:
    radial-gradient(circle at 80% 18%, rgba(164, 216, 255, 0.24), transparent 22rem),
    linear-gradient(145deg, #12202a 0%, #233f49 48%, #090e12 100%);
}

.overview-live-event-banner-skeleton {
  background:
    linear-gradient(135deg, rgba(11, 19, 42, 0.92), rgba(16, 36, 74, 0.82) 54%, rgba(8, 14, 30, 0.96)),
    radial-gradient(circle at 18% 20%, rgba(106, 164, 255, 0.18), transparent 28rem);
}

.overview-live-event-banner-image,
.overview-live-event-banner-overlay {
  position: absolute;
  inset: 0;
}

.overview-live-event-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overview-live-event-banner-overlay {
  background:
    linear-gradient(180deg, rgba(4, 7, 18, 0.08) 0%, rgba(5, 8, 20, calc(var(--overview-event-overlay) * 0.7)) 58%, rgba(5, 8, 20, 0.96) 100%);
}

.overview-live-event-banner-content,
.overview-live-event-meta {
  position: relative;
}

.overview-live-event-banner-content {
  display: grid;
  align-content: end;
  height: 100%;
  padding: clamp(1rem, 2vw, 1.35rem);
  gap: 0.55rem;
}

.overview-live-event-banner-topline {
  position: absolute;
  top: clamp(20px, 2.6vw, 30px);
  left: clamp(20px, 2.6vw, 30px);
  right: clamp(20px, 2.6vw, 30px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
}

.overview-live-event-banner[data-align="center"] .overview-live-event-banner-content {
  align-items: center;
  text-align: center;
}

.overview-live-event-banner[data-align="right"] .overview-live-event-banner-content {
  align-items: flex-end;
  text-align: right;
}

.overview-live-event-banner[data-align="center"] .overview-live-event-banner-topline {
  justify-content: center;
}

.overview-live-event-banner[data-align="right"] .overview-live-event-banner-topline {
  justify-content: flex-end;
}

.overview-live-event-eyebrow {
  color: rgba(223, 241, 255, 0.76);
  font-size: var(--beta-text-xs);
  font-weight: 820;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.overview-live-event-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
  border: 1px solid rgba(255, 111, 128, 0.34);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(127, 18, 32, 0.4), rgba(80, 10, 18, 0.52));
  color: #ffe5e8;
  font-size: 0.68rem;
  font-weight: 860;
  letter-spacing: 0.16em;
  padding: 0.42rem 0.78rem;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 24px rgba(255, 72, 92, 0.16);
}

.overview-live-event-live-dot {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 999px;
  background: #ff5267;
  box-shadow: 0 0 0 0 rgba(255, 82, 103, 0.52);
  animation: overviewEventPulse 1.8s ease-out infinite;
}

.overview-live-event-banner h3 {
  margin: 0;
  max-width: 18ch;
  color: #f7fbff;
  font-size: clamp(1.4rem, calc(var(--overview-event-font-size) * 0.44), 2.4rem);
  font-weight: 860;
  line-height: 0.96;
  letter-spacing: 0;
  text-wrap: balance;
}

.overview-live-event-banner p {
  margin: 0;
  max-width: 42ch;
  color: rgba(232, 240, 255, 0.84);
  font-size: 0.86rem;
  line-height: 1.4;
}

.overview-live-event-meta {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--beta-space-4);
  align-content: stretch;
  min-height: 100%;
}

.overview-live-event-meta-skeleton {
  align-content: stretch;
}

.overview-live-event-meta-copy {
  display: grid;
  gap: var(--beta-space-2);
}

.overview-live-event-meta-copy h3 {
  color: var(--home-heading-ink);
}

.overview-live-event-meta .dashboard-panel-head {
  margin-bottom: 0;
}

.overview-live-event-skeleton-pill {
  min-width: 88px;
}

.overview-live-event-skeleton-title {
  max-width: min(72%, 280px);
  height: 30px;
}

.overview-live-event-skeleton-title-short {
  max-width: min(48%, 180px);
}

.overview-live-event-skeleton-body {
  max-width: min(58%, 240px);
}

.overview-live-event-skeleton-meta-title {
  max-width: min(82%, 320px);
}

.overview-live-event-skeleton-chip {
  width: 116px;
}

.overview-live-event-skeleton-status {
  width: 220px;
}

.overview-live-event-skeleton-cta {
  width: 154px;
}

.overview-live-event-chip-row,
.overview-live-event-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--beta-space-2);
}

.overview-live-event-chip,
.overview-live-event-status {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: #dce9ff;
  font-size: 0.81rem;
  font-weight: 720;
  padding: 0.55rem 0.9rem;
}

.overview-live-event-status {
  background: rgba(47, 125, 255, 0.1);
}

.overview-live-event-status.is-ready {
  background: rgba(74, 216, 167, 0.16);
  color: #d9fff0;
}

.overview-live-event-status-row {
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: auto;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(18, 28, 58, 0.58), rgba(11, 18, 36, 0.72)),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.overview-live-event-cta {
  min-height: 54px;
  border-color: rgba(166, 212, 255, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, #2f7dff 0%, #1445ba 100%);
  box-shadow: 0 14px 30px rgba(18, 76, 201, 0.18);
}

.overview-live-event-cta:hover,
.overview-live-event-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(18, 76, 201, 0.24);
}

.overview-live-event-cta .btn-beta-label {
  position: relative;
  z-index: 1;
}

.overview-live-event-status-row .overview-live-event-status {
  flex: 1 1 220px;
  min-width: 0;
}

@keyframes overviewEventPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 82, 103, 0.5);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(255, 82, 103, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 82, 103, 0);
  }
}

.beta-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--beta-space-5);
  align-items: start;
}

#workspace {
  scroll-margin-top: 140px;
}

.dashboard-main-card,
.dashboard-side-card {
  padding: clamp(20px, 2.2vw, 28px);
}

.dashboard-side-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--beta-space-5);
  align-items: start;
}

.dashboard-panel-head {
  display: grid;
  gap: 0;
  margin-bottom: var(--beta-space-4);
}

.dashboard-panel-head h2,
.dashboard-panel-head h3 {
  margin: 0;
  color: var(--home-heading-ink);
  line-height: var(--beta-leading-tight);
}

.task-lane-head p,
.task-collapsible-sub,
.workspace-task-copy p,
.workspace-task-detail p,
.activity-feed-copy p,
.quick-note-copy span,
.task-modal-beta-subtitle,
.task-modal-beta-status {
  color: var(--beta-muted);
}

.dashboard-panel-head-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--beta-space-4);
}

.dashboard-panel-head-compact {
  margin-bottom: var(--beta-space-3);
}

.task-owner-chip,
.task-stats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: #dce8ff;
  font-size: 0.82rem;
  font-weight: 720;
  letter-spacing: 0.01em;
  padding: 0.55rem 0.85rem;
  white-space: nowrap;
}

.task-tools-row,
.task-compose-grid,
.task-compose-actions,
.workspace-task-head,
.workspace-task-meta,
.workspace-task-actions,
.activity-feed-row,
.quick-note-item,
.quick-notes-actions,
.task-modal-beta-head,
.task-modal-beta-actions,
.task-modal-beta-buttons {
  display: flex;
}

.task-tools-row,
.task-compose-grid {
  gap: var(--beta-space-3);
}

.task-tools-row {
  align-items: center;
  margin-bottom: var(--beta-space-4);
}

.task-compose-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) minmax(150px, 0.55fr) minmax(120px, 0.4fr) minmax(180px, 0.7fr) auto;
  align-items: stretch;
  margin-bottom: var(--beta-space-4);
}

.task-compose-actions,
.workspace-task-actions,
.task-modal-beta-buttons {
  flex-wrap: wrap;
  gap: var(--beta-space-2);
}

.task-compose-actions {
  align-items: center;
  flex-wrap: nowrap;
}

.collab-board-launcher {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--beta-space-3);
  width: 100%;
  margin-bottom: var(--beta-space-4);
  border: 1px solid rgba(103, 198, 244, 0.18);
  border-radius: var(--beta-radius-lg);
  background:
    linear-gradient(135deg, rgba(103, 198, 244, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(8, 11, 26, 0.72);
  color: var(--home-heading-ink);
  cursor: pointer;
  padding: var(--beta-space-3);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.collab-board-launcher:hover,
.collab-board-launcher:focus-visible {
  border-color: rgba(103, 198, 244, 0.42);
  background:
    linear-gradient(135deg, rgba(103, 198, 244, 0.14), rgba(178, 156, 255, 0.06)),
    rgba(9, 13, 30, 0.9);
  outline: none;
  transform: translateY(-1px);
}

.collab-board-launcher-icon,
.collab-board-launcher-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.collab-board-launcher-icon {
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid rgba(103, 198, 244, 0.2);
  border-radius: 50%;
  background: rgba(103, 198, 244, 0.12);
  color: #9bdcff;
}

.collab-board-launcher-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.collab-board-launcher-copy strong {
  color: var(--home-heading-ink);
  font-size: 0.98rem;
  line-height: 1.15;
}

.collab-board-launcher-copy span {
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
  overflow-wrap: anywhere;
}

.collab-board-launcher-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--beta-space-2);
}

.collab-board-launcher-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.045);
  color: #dce8ff;
  font-size: 0.76rem;
  font-weight: 760;
  padding: 0.38rem 0.65rem;
  white-space: nowrap;
}

.collab-board-launcher-action {
  gap: 0.45rem;
  min-height: 34px;
  border-radius: var(--beta-radius-pill);
  background: rgba(103, 198, 244, 0.12);
  color: #b9eaff;
  font-size: 0.8rem;
  font-weight: 780;
  padding: 0.48rem 0.78rem;
  white-space: nowrap;
}

.collab-board-card {
  display: grid;
  gap: var(--beta-space-4);
  margin-bottom: var(--beta-space-5);
}

.collab-board-head {
  margin-bottom: 0;
}

.collab-board-head p:not(.section-kicker) {
  margin: 0;
  color: var(--beta-muted);
}

.collab-board-metrics,
.collab-person-stats,
.collab-person-head,
.collab-task-preview-head,
.collab-planner-strip-head,
.collab-planner-item,
.collab-task-line {
  display: flex;
}

.collab-board-metrics {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--beta-space-2);
}

.collab-board-metrics span,
.collab-load-pill,
.collab-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.045);
  color: #dce8ff;
  font-size: 0.76rem;
  font-weight: 760;
  padding: 0.45rem 0.72rem;
  white-space: nowrap;
}

.collab-person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--beta-space-3);
}

.collab-person-card {
  display: grid;
  gap: var(--beta-space-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--beta-radius-lg) - 4px);
  background:
    linear-gradient(180deg, rgba(18, 24, 48, 0.82), rgba(8, 10, 24, 0.9));
  padding: var(--beta-space-4);
}

.collab-person-card.is-current-user {
  border-color: rgba(103, 198, 244, 0.24);
  box-shadow: inset 0 0 0 1px rgba(103, 198, 244, 0.08);
}

.collab-person-head {
  align-items: center;
  gap: var(--beta-space-3);
}

.collab-person-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(103, 198, 244, 0.22), rgba(178, 156, 255, 0.18));
  color: #f3f8ff;
  font-size: 0.86rem;
  font-weight: 820;
}

.collab-person-avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.collab-person-title {
  min-width: 0;
  flex: 1 1 auto;
}

.collab-person-title .section-kicker,
.collab-person-title h3,
.collab-person-title span,
.collab-task-preview-head span,
.collab-planner-strip-head span,
.collab-task-line span,
.collab-task-line strong,
.collab-planner-copy strong,
.collab-planner-copy span {
  overflow-wrap: anywhere;
}

.collab-person-title .section-kicker {
  margin: 0 0 0.18rem;
}

.collab-person-title h3 {
  margin: 0;
  color: var(--home-heading-ink);
  font-size: 1rem;
  line-height: 1.15;
}

.collab-person-title span {
  display: block;
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
}

.collab-load-pill {
  align-self: flex-start;
}

.collab-person-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--beta-space-2);
}

.collab-person-stats div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--beta-radius-md);
  background: rgba(255, 255, 255, 0.035);
  padding: 0.65rem 0.55rem;
  text-align: center;
}

.collab-person-stats strong {
  color: var(--home-heading-ink);
  font-size: 1.04rem;
  line-height: 1;
}

.collab-person-stats span,
.collab-empty-copy,
.collab-planner-empty,
.collab-handoff-copy {
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
}

.collab-task-preview,
.collab-planner-strip {
  display: grid;
  gap: var(--beta-space-2);
}

.collab-task-preview-head,
.collab-planner-strip-head {
  align-items: center;
  justify-content: space-between;
  gap: var(--beta-space-2);
}

.collab-task-preview-head span,
.collab-planner-strip-head span {
  color: rgba(235, 242, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 780;
  text-transform: uppercase;
}

.collab-planner-strip-head strong {
  color: var(--beta-accent-strong);
  font-size: 0.76rem;
}

.collab-filter-button {
  min-height: 30px;
  cursor: pointer;
}

.collab-filter-button:hover,
.collab-filter-button:focus-visible {
  border-color: rgba(103, 198, 244, 0.32);
  background: rgba(103, 198, 244, 0.12);
  outline: none;
}

.collab-task-line,
.collab-planner-item {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--beta-space-2);
  border-radius: var(--beta-radius-md);
  background: rgba(255, 255, 255, 0.035);
  padding: 0.68rem 0.72rem;
}

.collab-task-line span,
.collab-planner-copy strong {
  color: #e9f1ff;
  font-size: var(--beta-text-sm);
  font-weight: 720;
}

.collab-task-line strong,
.collab-planner-date,
.collab-planner-copy span {
  color: rgba(214, 224, 242, 0.84);
  font-size: 0.76rem;
  white-space: nowrap;
}

.collab-planner-items {
  display: grid;
  gap: var(--beta-space-2);
}

.collab-planner-item.is-attended {
  background: rgba(105, 229, 162, 0.09);
}

.collab-planner-date {
  min-width: 4.8rem;
  color: var(--beta-accent-strong);
  font-weight: 780;
}

.collab-planner-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.collab-empty-copy,
.collab-planner-empty,
.collab-handoff-copy {
  margin: 0;
}

.collab-handoff-copy {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: var(--beta-space-2);
}

.collab-board-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 390;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.collab-board-modal-backdrop {
  z-index: 0;
}

.collab-board-modal-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: start center;
  min-block-size: 100dvh;
  padding:
    clamp(28px, 5dvh, 52px)
    clamp(12px, 2.5vw, 28px)
    clamp(12px, 2.5vw, 28px);
}

.collab-board-modal-card {
  display: grid;
  align-content: start;
  gap: var(--beta-space-4);
  inline-size: min(1120px, 100%);
  max-block-size: calc(100dvh - clamp(40px, 8dvh, 72px));
  padding: clamp(18px, 2.3vw, 28px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background:
    radial-gradient(circle at top left, rgba(103, 198, 244, 0.12), rgba(255, 255, 255, 0) 22rem),
    linear-gradient(180deg, rgba(14, 18, 39, 0.98), rgba(7, 10, 24, 0.98));
}

.collab-board-modal-card::-webkit-scrollbar {
  display: none;
}

.collab-board-modal-tools {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.collab-board-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  color: #eaf2ff;
  cursor: pointer;
}

.collab-board-modal-close:hover,
.collab-board-modal-close:focus-visible {
  border-color: rgba(103, 198, 244, 0.34);
  background: rgba(103, 198, 244, 0.12);
  outline: none;
}

.collab-board-modal-card .collab-board-card {
  margin-bottom: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.collab-board-modal-card .collab-person-grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  overflow: visible;
  padding-bottom: 0;
  scrollbar-width: auto;
}

.task-lane-grid,
.task-collapsible-grid,
.task-modal-beta-grid {
  display: grid;
  gap: var(--beta-space-4);
  min-width: 0;
}

.task-lane-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--beta-space-3);
}

.task-collapsible-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--beta-space-3);
}

.task-lane-panel,
.task-collapsible-card {
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--beta-radius-md);
  background: rgba(6, 9, 20, 0.38);
  padding: var(--beta-space-3);
}

.task-lane-panel.is-empty {
  align-self: start;
}

.task-lane-panel.is-empty .task-lane-head {
  margin-bottom: var(--beta-space-2);
}

.task-lane-panel.is-empty .task-lane-empty {
  border: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: var(--beta-space-3) 0 0;
}

.task-lane-head {
  margin-bottom: var(--beta-space-3);
}

.task-lane-head h3,
.task-collapsible-card summary span:first-child {
  margin: 0 0 var(--beta-space-1);
  color: var(--home-heading-ink);
  font-size: 1rem;
  font-weight: 760;
}

.task-lane-head p,
.task-collapsible-sub {
  margin: 0;
  font-size: var(--beta-text-sm);
}

.task-lane-list,
.quick-note-list,
.activity-feed-list {
  display: grid;
  gap: var(--beta-space-3);
  min-width: 0;
  max-width: 100%;
}

.task-lane-list.is-scrollable-lane {
  height: min(30rem, calc(100vh - 26rem));
  max-height: min(30rem, calc(100vh - 26rem));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding-right: 0.2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 166, 255, 0.72) rgba(255, 255, 255, 0.04);
}

.task-lane-list.is-scrollable-lane::-webkit-scrollbar {
  width: 8px;
}

.task-lane-list.is-scrollable-lane::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.task-lane-list.is-scrollable-lane::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(89, 199, 255, 0.9), rgba(76, 111, 255, 0.9));
}

.task-lane-empty {
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-md);
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
  padding: var(--beta-space-4);
}

.workspace-task-card,
.quick-note-item,
.activity-feed-item {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--beta-radius-md);
  background: rgba(255, 255, 255, 0.03);
}

.workspace-task-card {
  display: grid;
  gap: var(--beta-space-2);
  padding: var(--beta-space-3);
}

.workspace-task-card.is-complete {
  opacity: 0.9;
}

.workspace-task-card.is-archived {
  opacity: 0.7;
}

.workspace-task-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--beta-space-3);
}

.workspace-task-copy {
  min-width: 0;
}

.workspace-task-copy h3 {
  margin: 0 0 0.35rem;
  color: var(--home-heading-ink);
  font-size: 0.96rem;
  line-height: 1.22;
}

.workspace-task-copy p,
.workspace-task-detail p,
.quick-note-copy p,
.activity-feed-copy p {
  margin: 0;
}

.workspace-task-copy p,
.workspace-task-detail p {
  font-size: var(--beta-text-sm);
}

.workspace-task-meta {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--beta-space-2);
}

.task-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: var(--beta-radius-pill);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.38rem 0.58rem;
  text-transform: uppercase;
}

.task-meta-pill-overdue {
  background: rgba(255, 108, 108, 0.14);
  color: #ffb7b7;
}

.task-meta-pill-today {
  background: rgba(87, 125, 255, 0.16);
  color: #dfe6ff;
}

.task-meta-pill-later,
.task-meta-pill-floating {
  background: rgba(255, 255, 255, 0.06);
  color: #ced7ea;
}

.task-priority-pill {
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.task-recurrence-pill {
  border: 1px solid rgba(105, 229, 162, 0.16);
  background: rgba(105, 229, 162, 0.1);
  color: #bdf8d5;
}

.task-priority-low {
  color: #b9d6ff;
}

.task-priority-high {
  color: #ffd79f;
}

.task-priority-urgent {
  color: #ffb2ce;
}

.workspace-task-detail {
  display: grid;
  gap: 0.45rem;
}

.workspace-task-checklist {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace-task-checklist li {
  position: relative;
  padding-left: 1rem;
  color: #d7dced;
  font-size: var(--beta-text-sm);
}

.workspace-task-checklist li::before {
  position: absolute;
  top: 0.45rem;
  left: 0;
  inline-size: 0.42rem;
  block-size: 0.42rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--beta-cyan), #74a3ff);
  box-shadow: 0 0 10px rgba(80, 135, 255, 0.4);
  content: "";
}

.workspace-task-actions {
  align-items: center;
  justify-content: flex-start;
}

.task-collapsible-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--beta-space-3);
  cursor: pointer;
  list-style: none;
}

.task-collapsible-card summary::-webkit-details-marker {
  display: none;
}

.task-collapsible-count {
  color: var(--beta-accent-strong);
  font-size: 0.78rem;
  font-weight: 760;
}

.task-collapsible-sub {
  margin-top: var(--beta-space-2);
  margin-bottom: var(--beta-space-4);
}

.activity-feed-item,
.quick-note-item {
  padding: var(--beta-space-4);
}

.activity-feed-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--beta-space-3);
  align-items: start;
}

.activity-feed-icon {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--beta-cyan), #6f8bff);
  box-shadow: 0 0 14px rgba(95, 147, 255, 0.42);
  margin-top: 0.5rem;
}

.activity-feed-row {
  align-items: center;
  justify-content: space-between;
  gap: var(--beta-space-3);
  margin-bottom: 0.45rem;
}

.activity-feed-row strong,
.quick-note-copy p {
  color: var(--home-heading-ink);
}

.activity-feed-row span,
.quick-note-copy span {
  color: rgba(235, 242, 255, 0.9);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  white-space: nowrap;
}

.activity-feed-copy p {
  color: rgba(214, 224, 242, 0.84);
}

.dashboard-divider {
  block-size: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: var(--beta-space-5) 0 var(--beta-space-4);
}

.quick-note-item {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--beta-space-3);
}

.quick-note-copy {
  display: grid;
  gap: 0.45rem;
}

.quick-notes-actions {
  margin-top: var(--beta-space-3);
}

.quick-note-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  min-inline-size: 2rem;
  min-block-size: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f2a6b7;
  box-shadow: none;
  flex: 0 0 auto;
  transition:
    color var(--beta-transition-base),
    transform var(--beta-transition-fast),
    opacity var(--beta-transition-base);
}

.quick-note-delete-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.quick-note-delete:hover,
.quick-note-delete:focus-visible {
  color: #ffbdca;
  transform: translateY(-1px) scale(1.03);
}

.quick-note-delete:focus-visible {
  outline: none;
  text-shadow: 0 0 14px rgba(255, 182, 199, 0.34);
}

.quick-note-delete:active {
  transform: translateY(0);
}

.beta-form-group,
.beta-label {
  display: grid;
}

.beta-form-group {
  gap: 0.55rem;
}

.beta-form-group-wide {
  grid-column: span 2;
}

.beta-label {
  color: #dce7ff;
  font-size: 0.82rem;
  font-weight: 720;
  letter-spacing: 0.02em;
}

.beta-field {
  inline-size: 100%;
  min-block-size: var(--beta-control-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--beta-radius-md);
  background: rgba(7, 9, 22, 0.78);
  color: var(--beta-ink);
  padding: 0.82rem 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color var(--beta-transition-base),
    box-shadow var(--beta-transition-base),
    background-color var(--beta-transition-base);
}

.beta-field::placeholder {
  color: #6f758f;
}

.beta-field:focus {
  outline: none;
  border-color: rgba(100, 139, 255, 0.44);
  box-shadow:
    0 0 0 3px rgba(88, 122, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.beta-field:required:user-invalid,
.beta-field[aria-invalid="true"],
.beta-field.is-required-missing {
  border-color: rgba(255, 93, 116, 0.92);
  box-shadow:
    0 0 0 3px rgba(255, 93, 116, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.beta-field:required:user-invalid:focus,
.beta-field[aria-invalid="true"]:focus,
.beta-field.is-required-missing:focus {
  border-color: #ff6f84;
  box-shadow:
    0 0 0 3px rgba(255, 93, 116, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.beta-select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #a9c0ff 50%),
    linear-gradient(135deg, #a9c0ff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.home-select {
  position: relative;
  min-width: 0;
}

.home-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.home-select-trigger:disabled,
.home-select.is-disabled .home-select-trigger {
  cursor: not-allowed;
  opacity: 0.7;
}

.home-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-select-value.is-placeholder {
  color: rgba(216, 229, 255, 0.52);
}

.home-select-caret {
  flex: 0 0 auto;
  color: rgba(182, 205, 255, 0.8);
  font-size: 0.82rem;
  transition: transform 160ms ease;
}

.home-select.is-open .home-select-caret {
  transform: rotate(180deg);
}

.home-select-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 26;
  display: grid;
  gap: 0.3rem;
  min-width: 100%;
  padding: 0.45rem;
  border: 1px solid rgba(136, 170, 255, 0.22);
  border-radius: calc(var(--beta-radius-lg) - 6px);
  background:
    linear-gradient(180deg, rgba(19, 24, 48, 0.98), rgba(10, 13, 30, 0.98));
  box-shadow:
    0 20px 48px rgba(3, 8, 22, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-select-menu.is-right {
  right: 0;
  left: auto;
}

.home-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.72rem 0.8rem;
  border: 0;
  border-radius: calc(var(--beta-radius-md) - 4px);
  background: transparent;
  color: #eef4ff;
  cursor: pointer;
  text-align: left;
  transition:
    background 160ms ease,
    transform 160ms ease,
    color 160ms ease;
}

.home-select-option:hover,
.home-select-option:focus-visible,
.home-select-option.is-selected {
  background: rgba(108, 156, 255, 0.16);
  color: #ffffff;
  outline: none;
}

.home-select-option-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.home-select-option-copy strong,
.home-select-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-select-option-copy strong {
  font-size: 0.95rem;
  font-weight: 720;
}

.home-select-option-copy small {
  color: rgba(204, 220, 255, 0.62);
  font-size: 0.78rem;
}

.beta-textarea {
  resize: vertical;
  min-block-size: 120px;
}

.task-modal-beta-shell {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.task-modal-beta-backdrop {
  z-index: 0;
}

.task-modal-beta-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-block-size: 100dvh;
  padding:
    clamp(88px, 10dvh, 116px)
    clamp(16px, 3vw, 28px)
    clamp(16px, 3vw, 28px);
}

.task-modal-beta-card {
  inline-size: min(960px, 100%);
  max-block-size: calc(100dvh - clamp(104px, 12dvh, 132px));
  padding: clamp(20px, 2.4vw, 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.task-modal-beta-card::-webkit-scrollbar {
  display: none;
  width: 0;
}

.task-modal-beta-head {
  align-items: start;
  justify-content: space-between;
  gap: var(--beta-space-4);
}

.task-modal-beta-head h2 {
  margin: 0;
  color: var(--beta-ink);
}

.task-modal-beta-subtitle {
  margin: var(--beta-space-2) 0 0;
}

.task-modal-beta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--beta-space-2);
  margin: var(--beta-space-5) 0;
}

.task-modal-beta-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: #cfd9ee;
  font-size: 0.76rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.72rem;
  text-transform: uppercase;
}

.task-modal-beta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-modal-beta-actions {
  align-items: center;
  justify-content: space-between;
  gap: var(--beta-space-4);
  margin-top: var(--beta-space-6);
}

.task-modal-beta-status {
  margin: 0;
  font-size: var(--beta-text-sm);
}

.workspace-task-card.is-meeting-checkin {
  border-color: rgba(111, 226, 205, 0.26);
  background:
    radial-gradient(circle at top right, rgba(102, 229, 199, 0.12), rgba(255, 255, 255, 0) 13rem),
    linear-gradient(155deg, rgba(17, 28, 56, 0.94), rgba(9, 15, 30, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 34px rgba(4, 12, 28, 0.22);
}

.meeting-checkin-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 420;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.meeting-checkin-modal-backdrop {
  z-index: 0;
}

.meeting-checkin-modal-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: start center;
  min-block-size: 100dvh;
  padding:
    clamp(18px, 3dvh, 28px)
    clamp(12px, 2.4vw, 24px)
    clamp(12px, 2.4vw, 24px);
}

.meeting-checkin-modal-card {
  display: grid;
  align-content: start;
  inline-size: min(980px, 100%);
  min-height: 0;
  max-block-size: calc(100dvh - 24px);
  padding: clamp(16px, 2vw, 24px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background:
    radial-gradient(circle at top left, rgba(118, 226, 246, 0.12), rgba(255, 255, 255, 0) 22rem),
    linear-gradient(180deg, rgba(14, 22, 43, 0.98), rgba(8, 14, 28, 0.98));
}

.meeting-checkin-modal-card::-webkit-scrollbar {
  display: none;
}

.meeting-checkin-hero,
.meeting-checkin-body,
.meeting-checkin-sidepanel-actions {
  display: grid;
}

.meeting-checkin-hero {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 16px;
  align-items: stretch;
}

.meeting-checkin-hero-copy h2,
.meeting-checkin-sidepanel-copy h3 {
  margin: 0;
  color: var(--beta-ink);
}

.meeting-checkin-status-card p,
.meeting-checkin-sidepanel-copy p {
  margin: 0;
  color: rgba(222, 233, 252, 0.74);
  line-height: 1.55;
}

.meeting-checkin-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.meeting-checkin-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: #eef6ff;
  font-size: 0.82rem;
  font-weight: 760;
}

.meeting-checkin-status-card,
.meeting-checkin-sidepanel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.meeting-checkin-status-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 20px;
}

.meeting-checkin-status-card.is-ready {
  border-color: rgba(113, 234, 197, 0.28);
  background: linear-gradient(160deg, rgba(31, 78, 71, 0.42), rgba(255, 255, 255, 0.04));
}

.meeting-checkin-status-card.is-success {
  border-color: rgba(114, 221, 184, 0.34);
  background: linear-gradient(160deg, rgba(32, 96, 74, 0.5), rgba(255, 255, 255, 0.04));
}

.meeting-checkin-status-card.is-danger {
  border-color: rgba(255, 101, 101, 0.58);
  background: linear-gradient(160deg, rgba(114, 28, 42, 0.58), rgba(255, 255, 255, 0.04));
  box-shadow:
    0 0 0 1px rgba(255, 83, 83, 0.16),
    0 18px 42px rgba(150, 26, 43, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.meeting-checkin-status-label,
.meeting-checkin-side-kicker,
.meeting-checkin-info-card span {
  color: rgba(176, 197, 228, 0.78);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meeting-checkin-status-card strong {
  color: #f4f8ff;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.08;
}

.meeting-checkin-status-copy.is-danger {
  color: #ff8f8f;
  font-weight: 760;
}

.meeting-checkin-status-meta {
  color: rgba(191, 223, 255, 0.78);
  font-size: 0.82rem;
  font-weight: 700;
}

.meeting-checkin-password {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  padding: 0.38rem 0.65rem;
  border: 1px solid rgba(124, 224, 207, 0.24);
  border-radius: 999px;
  background: rgba(124, 224, 207, 0.1);
  color: #e9fff9;
  font-size: 0.86rem;
  font-weight: 780;
  overflow-wrap: anywhere;
}

.meeting-checkin-body {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  margin-top: 18px;
}

.meeting-checkin-body-main {
  display: grid;
  gap: 16px;
}

.meeting-checkin-map-frame {
  position: relative;
  min-block-size: clamp(240px, 34vh, 340px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(109, 185, 255, 0.16), rgba(255, 255, 255, 0) 14rem),
    rgba(8, 14, 28, 0.94);
}

.meeting-checkin-map,
.meeting-checkin-map-fallback {
  inline-size: 100%;
  block-size: 100%;
}

.meeting-checkin-map {
  border: 0;
}

.meeting-checkin-map-fallback {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: clamp(18px, 3vw, 28px);
  text-align: center;
  color: rgba(214, 228, 251, 0.78);
}

.meeting-checkin-map-fallback i {
  color: #7ce0cf;
  font-size: 1.5rem;
}

.meeting-checkin-choice-board {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-block-size: 100%;
  padding: clamp(18px, 3vw, 28px);
  text-align: center;
  color: rgba(214, 228, 251, 0.78);
}

.meeting-checkin-choice-board i {
  color: #7ce0cf;
  font-size: 1.7rem;
}

.meeting-checkin-choice-board strong {
  color: #f4f8ff;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
}

.meeting-checkin-choice-board p {
  max-width: 30rem;
  margin: 0;
}

.meeting-checkin-map-frame.is-online {
  background:
    radial-gradient(circle at top left, rgba(109, 185, 255, 0.18), rgba(255, 255, 255, 0) 16rem),
    radial-gradient(circle at 80% 18%, rgba(124, 224, 207, 0.16), rgba(255, 255, 255, 0) 12rem),
    linear-gradient(155deg, rgba(10, 19, 39, 0.96), rgba(7, 13, 26, 0.98));
}

.meeting-checkin-remote-card {
  align-content: center;
}

.meeting-checkin-remote-card strong {
  color: #f4f8ff;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.15;
}

.meeting-checkin-remote-card p {
  max-width: 32rem;
  margin: 0 auto;
  word-break: break-word;
}

.meeting-checkin-sidepanel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 174, 123, 0.12), rgba(255, 255, 255, 0) 12rem),
    rgba(255, 255, 255, 0.04);
}

.meeting-checkin-sidepanel-copy {
  display: grid;
  gap: 10px;
}

.meeting-checkin-sidepanel-actions {
  gap: 12px;
}

.meeting-checkin-choice-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-block-size: 70px;
  padding: 0 18px;
  border: 1px solid rgba(127, 184, 255, 0.22);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(124, 224, 207, 0.14), rgba(255, 255, 255, 0) 9rem),
    linear-gradient(160deg, rgba(39, 94, 201, 0.34), rgba(24, 35, 78, 0.78));
  color: #f4f8ff;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 820;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 16px 28px rgba(5, 13, 32, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.meeting-checkin-choice-tile:hover,
.meeting-checkin-choice-tile:focus-visible {
  border-color: rgba(124, 224, 207, 0.46);
  transform: translateY(-1px);
  outline: none;
}

.meeting-checkin-choice-tile i {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #7ce0cf;
}

.meeting-checkin-primary {
  min-block-size: 62px;
  font-size: 1rem;
  font-weight: 820;
}

.hero-guide-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0.5rem;
}

.echo-walkthrough-launch {
  --btn-beta-height: 52px;
  --btn-beta-padding-inline: 1.18rem;
  --btn-beta-glow-opacity: 0.76;
  --btn-beta-shadow: 0 18px 40px rgba(38, 119, 255, 0.22);
  --btn-beta-shadow-hover: 0 24px 48px rgba(69, 155, 255, 0.3);
}

.echo-walkthrough-shell {
  position: fixed;
  left: clamp(14px, var(--echo-walkthrough-left, 24px), calc(100vw - 294px));
  top: clamp(14px, var(--echo-walkthrough-top, 24px), calc(100vh - 148px));
  z-index: 70;
  width: min(420px, calc(100vw - 28px));
  pointer-events: none;
}

.echo-walkthrough-panel {
  display: grid;
  gap: var(--beta-space-4);
  border: 1px solid rgba(126, 209, 255, 0.24);
  border-radius: var(--beta-radius-lg);
  background:
    linear-gradient(155deg, rgba(11, 17, 36, 0.94), rgba(7, 11, 25, 0.94)),
    radial-gradient(circle at 14% 0, rgba(58, 169, 255, 0.18), transparent 17rem);
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.48),
    0 0 44px rgba(44, 135, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: clamp(16px, 2.2vw, 22px);
  pointer-events: auto;
  backdrop-filter: blur(22px);
}

.echo-walkthrough-head,
.echo-walkthrough-actions,
.echo-message {
  display: flex;
}

.echo-walkthrough-head {
  align-items: center;
  justify-content: space-between;
  gap: var(--beta-space-3);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.echo-walkthrough-shell.is-dragging .echo-walkthrough-head {
  cursor: grabbing;
}

.echo-walkthrough-pill,
.echo-walkthrough-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(149, 204, 255, 0.18);
  border-radius: var(--beta-radius-pill);
  color: rgba(222, 238, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1;
  padding: 0.42rem 0.62rem;
}

.echo-walkthrough-pill {
  background: rgba(61, 153, 255, 0.15);
  color: #dff1ff;
  text-transform: uppercase;
}

.echo-walkthrough-step {
  background: rgba(255, 255, 255, 0.055);
}

.echo-message {
  align-items: flex-start;
  gap: var(--beta-space-3);
}

.echo-message-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid rgba(136, 204, 255, 0.38);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(44, 131, 255, 0.42), rgba(24, 46, 108, 0.74));
  box-shadow: 0 0 24px rgba(69, 155, 255, 0.28);
  color: #f4fbff;
  font-weight: 850;
}

.echo-message-copy {
  display: grid;
  min-width: 0;
  gap: 0.45rem;
}

.echo-message-name {
  color: #9fdfff;
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.echo-message-copy p {
  margin: 0;
  color: rgba(239, 247, 255, 0.96);
  font-size: 1rem;
  line-height: 1.45;
}

.echo-walkthrough-actions {
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--beta-space-2);
}

.echo-walkthrough-actions .btn-beta {
  white-space: nowrap;
}

.echo-walkthrough-end-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 117, 117, 0.4);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(105, 25, 37, 0.86), rgba(68, 16, 26, 0.92));
  box-shadow:
    0 14px 26px rgba(99, 20, 30, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #ffd7d7;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.echo-walkthrough-end-icon:hover,
.echo-walkthrough-end-icon:focus-visible {
  border-color: rgba(255, 142, 142, 0.72);
  background:
    linear-gradient(180deg, rgba(139, 32, 47, 0.92), rgba(86, 18, 30, 0.96));
  color: #fff5f5;
  outline: 0;
  transform: translateY(-1px);
}

.is-echo-highlighted {
  position: relative;
  border-color: rgba(126, 209, 255, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(126, 209, 255, 0.26),
    0 0 38px rgba(49, 148, 255, 0.34),
    var(--beta-shadow-sm) !important;
}

.is-echo-highlighted::after {
  position: absolute;
  inset: -6px;
  z-index: -1;
  border: 1px solid rgba(126, 209, 255, 0.34);
  border-radius: inherit;
  box-shadow: 0 0 30px rgba(49, 148, 255, 0.22);
  content: "";
  pointer-events: none;
}

.user-settings-page-root,
.account-settings-page-root {
  position: relative;
}

.user-settings-page,
.account-settings-page {
  padding-top: clamp(22px, 3vw, 44px);
}

.user-settings-page {
  padding-top: clamp(12px, 2vw, 24px);
}

.user-settings-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--beta-space-4);
  align-items: end;
  margin-bottom: var(--beta-space-6);
}

.user-settings-heading h1 {
  margin: 0;
  color: var(--beta-ink);
  font-size: clamp(2rem, 3vw, 3.15rem);
  font-weight: 820;
  line-height: 0.96;
}

.user-settings-heading p:last-child {
  margin: 0;
  max-width: 62ch;
  color: var(--beta-muted);
}

.user-settings-hero-meta,
.user-settings-sidebar-status,
.user-settings-status-chips,
.user-settings-recommendations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--beta-space-2);
}

.user-settings-hero-meta {
  justify-content: flex-end;
}

.user-settings-status-chips {
  margin-bottom: var(--beta-space-3);
}

.user-settings-recommendations {
  margin-bottom: var(--beta-space-4);
}

.user-settings-hero-meta span,
.user-settings-sidebar-status span,
.user-settings-status-chips span,
.user-settings-recommendations span,
.user-settings-inline-badge,
.user-settings-nav-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: #dce8ff;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1;
  padding: 0.45rem 0.72rem;
  white-space: nowrap;
}

.user-settings-shell {
  display: grid;
  gap: var(--beta-grid-gap);
}

.user-settings-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--beta-grid-gap);
  align-items: start;
}

.user-settings-sidebar,
.user-settings-content,
.user-settings-topbar,
.user-settings-view-main,
.user-settings-view-side,
.user-settings-view-head,
.user-settings-nav,
.user-settings-nav-copy,
.user-settings-avatar-studio,
.user-settings-avatar-stage,
.user-settings-avatar-stage-primary,
.user-settings-avatar-stage-secondary,
.user-settings-identity-hero,
.user-settings-identity-summary,
.user-settings-form,
.user-settings-avatar-builder-grid,
.user-settings-section-stack,
.user-settings-subpanel,
.user-settings-row-copy,
.user-settings-inventory-primary,
.user-settings-inventory-meta,
.user-settings-appearance-preview-card {
  display: grid;
}

.user-settings-sidebar,
.user-settings-content,
.user-settings-topbar,
.user-settings-view-main {
  gap: var(--beta-grid-gap);
}

.user-settings-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.user-settings-nav-button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 96px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 14rem),
    rgba(255, 255, 255, 0.035);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--beta-transition-base),
    background-color var(--beta-transition-base),
    box-shadow var(--beta-transition-slow),
    transform var(--beta-spring-bounce);
}

.user-settings-nav-button:hover,
.user-settings-nav-button:focus-visible {
  border-color: rgba(117, 194, 255, 0.3);
  background:
    radial-gradient(circle at top left, rgba(94, 227, 199, 0.12), rgba(255, 255, 255, 0) 13rem),
    rgba(28, 43, 86, 0.54);
  box-shadow: 0 18px 34px rgba(7, 18, 42, 0.26);
  transform: translateY(-3px) scale(1.01);
}

.user-settings-nav-button.is-active {
  border-color: rgba(109, 216, 232, 0.34);
  background:
    radial-gradient(circle at top left, rgba(91, 233, 210, 0.18), rgba(255, 255, 255, 0) 16rem),
    linear-gradient(145deg, rgba(22, 34, 72, 0.94), rgba(12, 20, 42, 0.96));
  box-shadow:
    0 20px 40px rgba(7, 18, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.user-settings-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: rgba(191, 224, 255, 0.9);
  font-size: 1.15rem;
  line-height: 1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.user-settings-nav-icon.is-profile {
  color: #9fe3ff;
}

.user-settings-nav-icon.is-appearance {
  color: #70ffd7;
}

.user-settings-nav-icon.is-security {
  color: #ffcb8b;
}

.user-settings-nav-icon.is-connections {
  color: #8cb5ff;
}

.user-settings-nav-label {
  color: var(--beta-ink);
  font-size: 0.98rem;
  font-weight: 800;
}

.user-settings-nav-copy {
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.user-settings-nav-description {
  color: var(--beta-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.user-settings-view-head {
  gap: 0;
}

.user-settings-tabs-panel {
  position: sticky;
  top: 108px;
}

.user-settings-section-stage {
  min-width: 0;
}

.user-settings-view-head h2 {
  margin: 0;
  color: var(--beta-ink);
  font-size: clamp(1.7rem, 2.6vw, 2.45rem);
  font-weight: 820;
  line-height: 0.98;
}

.user-settings-view-grid {
  display: grid;
  gap: var(--beta-space-4);
  align-items: start;
}

.user-settings-view-grid-profile,
.user-settings-view-grid-appearance {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
}

.user-settings-view-side.user-settings-view-side-appearance {
  position: static;
  top: auto;
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
}

.user-settings-appearance-controls-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 2;
}

.user-settings-panel.user-settings-appearance-controls-panel.beta-surface-frame {
  overflow: visible;
}

.user-settings-view-side {
  position: sticky;
  top: 108px;
  gap: var(--beta-space-4);
}

.user-settings-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--beta-space-3);
  align-items: start;
}

.user-settings-profile-form .beta-form-group-wide,
.user-settings-security-form .beta-form-group-wide {
  grid-column: 1 / -1;
}

.user-settings-appearance-form {
  --user-settings-accent: #67def5;
  --user-settings-accent-soft: rgba(103, 222, 245, 0.18);
  --user-settings-accent-strong: #63efd7;
  --user-settings-ember: #ffab82;
}

.user-settings-identity-hero {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: var(--beta-space-4);
  align-items: start;
  margin-bottom: var(--beta-space-4);
}

.user-settings-identity-summary {
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  gap: var(--beta-space-2);
  align-content: start;
}

.user-settings-identity-summary,
.user-settings-preview-head,
.user-settings-preview-tags {
  display: none;
}

.user-settings-identity-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.55rem 0.8rem;
  border-radius: var(--beta-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #dce8ff;
  font-size: 0.78rem;
  font-weight: 760;
}

.user-settings-avatar-studio {
  gap: var(--beta-space-4);
}

.user-settings-avatar-stage {
  grid-template-columns: minmax(0, 1.05fr) minmax(200px, 0.95fr);
  gap: var(--beta-space-3);
  align-items: stretch;
}

.user-settings-avatar-stage-compact {
  grid-template-columns: minmax(0, 1fr);
}

.user-settings-avatar-stage-primary,
.user-settings-avatar-stage-secondary {
  gap: 10px;
  justify-items: center;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-lg);
  background:
    radial-gradient(circle at top left, rgba(116, 173, 255, 0.12), rgba(255, 255, 255, 0) 16rem),
    rgba(255, 255, 255, 0.03);
  text-align: center;
}

.user-settings-avatar-stage-primary {
  padding-block: 22px;
}

.user-settings-avatar-preview-builder {
  width: 148px;
  height: 148px;
  box-shadow: 0 18px 42px rgba(16, 35, 76, 0.24);
}

.user-settings-avatar-mini-preview {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 36% 30%, #ffffff, #b3dbff 35%, #5a8cff 78%, #1c2f75);
  box-shadow: 0 12px 28px rgba(9, 17, 39, 0.24);
}

.user-settings-avatar-stage-title {
  color: var(--beta-ink);
  font-size: 0.95rem;
  font-weight: 800;
}

.user-settings-avatar-stage-copy,
.user-settings-avatar-mode-note {
  margin: 0;
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
  line-height: 1.55;
}

.user-settings-avatar-mode-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.user-settings-avatar-mode-button {
  min-width: 124px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(236, 242, 255, 0.86);
  font-size: 0.86rem;
  font-weight: 780;
  cursor: pointer;
  transition:
    background-color var(--beta-transition-fast),
    color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-settings-avatar-mode-button:hover,
.user-settings-avatar-mode-button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateY(-1px);
}

.user-settings-avatar-mode-button.is-active {
  background: linear-gradient(135deg, rgba(94, 143, 255, 0.8), rgba(93, 194, 255, 0.9));
  color: #08111d;
  box-shadow: 0 10px 24px rgba(76, 145, 255, 0.24);
}

.user-settings-avatar-launch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--beta-transition-fast),
    background-color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-settings-avatar-launch-card:hover,
.user-settings-avatar-launch-card:focus-visible {
  border-color: rgba(128, 182, 255, 0.28);
  background: rgba(255, 255, 255, 0.055);
  transform: translateY(-1px);
}

.user-settings-avatar-launch-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.user-settings-avatar-launch-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: rgba(86, 148, 255, 0.16);
  color: #f5fbff;
  font-size: 0.78rem;
  font-weight: 780;
  white-space: nowrap;
}

.avatar-picker-modal-shell {
  --avatar-picker-modal-gap-inline: clamp(16px, 3vw, 28px);
  --avatar-picker-modal-gap-top: clamp(92px, 13vh, 132px);
  --avatar-picker-modal-gap-bottom: clamp(14px, 2.4vh, 26px);
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--avatar-picker-modal-gap-top) var(--avatar-picker-modal-gap-inline) var(--avatar-picker-modal-gap-bottom);
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.avatar-picker-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.avatar-picker-modal-dialog {
  position: relative;
  z-index: 1;
  inline-size: min(920px, 100%);
  max-inline-size: 100%;
  max-block-size: calc(100dvh - (var(--avatar-picker-modal-gap-top) + var(--avatar-picker-modal-gap-bottom)));
}

.avatar-picker-modal-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(12px, 1.8vw, 18px);
  inline-size: 100%;
  max-block-size: calc(100dvh - (var(--avatar-picker-modal-gap-top) + var(--avatar-picker-modal-gap-bottom)));
  padding: clamp(18px, 2vw, 24px);
  overflow: hidden;
}

.avatar-picker-modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--beta-space-4);
}

.avatar-picker-modal-head h2 {
  margin: 0;
  color: var(--beta-ink);
}

.avatar-picker-modal-subtitle {
  margin: var(--beta-space-2) 0 0;
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
}

.avatar-picker-modal-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 360px);
  justify-content: end;
  margin-top: var(--beta-space-4);
}

.avatar-picker-modal-scroll {
  min-block-size: 0;
  block-size: 100%;
  margin-top: 0;
  padding-top: 4px;
  padding-right: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(113, 176, 255, 0.86) rgba(255, 255, 255, 0.05);
}

.avatar-picker-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 16px;
  align-content: start;
}

.avatar-picker-modal-option {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform var(--beta-transition-fast);
}

.avatar-picker-modal-option:hover,
.avatar-picker-modal-option:focus-visible {
  transform: translateY(-2px) scale(1.02);
}

.avatar-picker-modal-image {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 0 0 1px transparent;
  transition:
    box-shadow var(--beta-transition-fast),
    filter var(--beta-transition-fast);
}

.avatar-picker-modal-option:hover .avatar-picker-modal-image,
.avatar-picker-modal-option:focus-visible .avatar-picker-modal-image {
  box-shadow: 0 0 0 2px rgba(142, 196, 255, 0.34);
  filter: brightness(1.03);
}

.avatar-picker-modal-option.is-active .avatar-picker-modal-image {
  box-shadow:
    0 0 0 3px rgba(124, 184, 255, 0.82),
    0 12px 28px rgba(10, 18, 42, 0.22);
}

.avatar-picker-modal-image.is-classic {
  image-rendering: pixelated;
}

.avatar-picker-modal-scroll::-webkit-scrollbar {
  width: 10px;
}

.avatar-picker-modal-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.avatar-picker-modal-scroll::-webkit-scrollbar-thumb {
  border: 2px solid rgba(9, 14, 32, 0.94);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(132, 203, 255, 0.92), rgba(84, 127, 255, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.avatar-picker-modal-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(151, 217, 255, 0.96), rgba(99, 142, 255, 0.9));
}

.avatar-picker-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(238, 244, 255, 0.92);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--beta-transition-fast),
    background-color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.avatar-picker-modal-close:hover,
.avatar-picker-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: scale(1.04);
}

.user-settings-avatar-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.user-settings-avatar-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.5rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.045);
  color: #dce8ff;
  font-size: 0.76rem;
  font-weight: 760;
}

.user-settings-avatar-actions-builder {
  justify-content: flex-start;
}

.user-settings-avatar-library-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: var(--beta-space-3);
  align-items: end;
}

.user-settings-avatar-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.user-settings-avatar-library-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(236, 242, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 780;
  cursor: pointer;
  transition:
    border-color var(--beta-transition-fast),
    background-color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-settings-avatar-library-tab:hover,
.user-settings-avatar-library-tab:focus-visible {
  border-color: rgba(147, 202, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.user-settings-avatar-library-tab.is-active {
  border-color: rgba(112, 168, 255, 0.34);
  background: linear-gradient(135deg, rgba(67, 112, 217, 0.34), rgba(50, 168, 255, 0.22));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.user-settings-avatar-library-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
  padding-inline: 8px;
  border-radius: 999px;
  background: rgba(7, 15, 35, 0.42);
  color: #dce8ff;
  font-size: 0.72rem;
  font-weight: 760;
}

.user-settings-avatar-search {
  gap: 8px;
}

.user-settings-avatar-search .beta-label {
  margin: 0;
}

.user-settings-avatar-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 14px;
}

.user-settings-avatar-option {
  display: grid;
  gap: 12px;
  justify-items: center;
  align-content: start;
  min-height: 100%;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at top, rgba(124, 184, 255, 0.16), rgba(255, 255, 255, 0) 70%),
    rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--beta-transition-fast),
    border-color var(--beta-transition-fast),
    background-color var(--beta-transition-fast),
    box-shadow var(--beta-transition-fast);
}

.user-settings-avatar-option:hover,
.user-settings-avatar-option:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(128, 182, 255, 0.28);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 34px rgba(4, 10, 24, 0.22);
}

.user-settings-avatar-option.is-active {
  border-color: rgba(112, 168, 255, 0.42);
  background:
    radial-gradient(circle at top, rgba(127, 181, 255, 0.26), rgba(255, 255, 255, 0) 72%),
    rgba(64, 102, 196, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 34px rgba(8, 17, 40, 0.22);
}

.user-settings-avatar-option-art {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  padding: 10px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.96), rgba(181, 222, 255, 0.96) 34%, rgba(65, 122, 255, 0.94) 72%, rgba(9, 18, 44, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 26px rgba(8, 18, 44, 0.24);
}

.user-settings-avatar-option-art.is-classic {
  background:
    linear-gradient(180deg, rgba(18, 30, 61, 0.95), rgba(9, 16, 36, 0.95)),
    linear-gradient(135deg, rgba(112, 168, 255, 0.18), rgba(255, 255, 255, 0));
}

.user-settings-avatar-option.is-classic .identity-avatar-image {
  image-rendering: pixelated;
}

.user-settings-avatar-option-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.user-settings-avatar-option-copy strong {
  color: #f5f9ff;
  font-size: 0.86rem;
  line-height: 1.2;
}

.user-settings-avatar-option-copy span {
  color: var(--beta-muted);
  font-size: 0.73rem;
  line-height: 1.35;
}

.user-settings-avatar-library-empty {
  padding: 18px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
}

.user-settings-avatar-builder-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--beta-space-3);
  align-items: stretch;
}

.user-settings-avatar-builder-grid input[type="color"] {
  block-size: 52px;
}

.user-settings-avatar-toggle {
  min-height: 100%;
}

.user-settings-section-stack {
  gap: var(--beta-space-4);
}

.user-settings-subpanel {
  gap: var(--beta-space-3);
  padding-top: var(--beta-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.user-settings-subpanel:first-child {
  padding-top: 0;
  border-top: 0;
}

.user-settings-inline-actions {
  display: grid;
  gap: var(--beta-space-2);
}

.user-settings-row-summary {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--beta-space-3);
  flex-wrap: wrap;
}

.user-settings-row-copy {
  gap: 6px;
  min-width: 0;
}

.user-settings-row-copy strong {
  color: var(--beta-ink);
  font-size: 0.96rem;
}

.user-settings-row-copy span {
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
  line-height: 1.5;
}

.user-settings-inventory-list {
  display: grid;
  gap: 12px;
}

.user-settings-inventory-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.3fr) auto;
  gap: var(--beta-space-3);
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-md);
  background: rgba(255, 255, 255, 0.035);
}

.user-settings-inventory-row.is-current {
  border-color: rgba(120, 166, 255, 0.3);
  background: rgba(47, 125, 255, 0.08);
}

.user-settings-inventory-primary,
.user-settings-inventory-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.user-settings-device-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.user-settings-inventory-icon,
.user-settings-device-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--beta-radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: #e9f1ff;
  font-size: 1rem;
}

.user-settings-device-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.user-settings-inventory-primary strong {
  color: var(--beta-ink);
  font-size: 0.96rem;
}

.user-settings-inventory-primary span,
.user-settings-inventory-meta span {
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.user-settings-inventory-actions {
  display: flex;
  justify-content: flex-end;
}

.user-settings-inline-badge.is-current {
  border-color: rgba(120, 166, 255, 0.34);
  background: rgba(47, 125, 255, 0.14);
}

.user-settings-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.06fr) minmax(300px, 0.94fr);
  gap: var(--beta-space-5);
  align-items: start;
}

.user-settings-column {
  display: grid;
  gap: var(--beta-space-5);
}

.user-settings-panel {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(95, 156, 255, 0.12), rgba(255, 255, 255, 0) 18rem),
    linear-gradient(180deg, rgba(16, 22, 49, 0.88), rgba(8, 12, 29, 0.92));
  box-shadow:
    0 26px 56px rgba(4, 8, 20, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.user-settings-panel .dashboard-panel-head h2,
.user-settings-panel .dashboard-panel-head h3,
.user-settings-panel .dashboard-panel-head h4 {
  color: #f5f9ff;
  margin: 0;
}

.user-settings-panel .task-owner-chip {
  display: none;
}

.user-settings-panel .dashboard-panel-head p:last-child,
.user-settings-panel .dashboard-panel-head > p:not(.section-kicker) {
  color: rgba(236, 242, 255, 0.92);
}

.user-settings-identity-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.58fr);
  gap: var(--beta-space-4);
  align-items: start;
}

.user-settings-avatar-card,
.user-settings-name-preview,
.user-settings-preview-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-lg);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 14rem),
    rgba(255, 255, 255, 0.035);
}

.user-settings-avatar-card,
.user-settings-name-preview,
.user-settings-preview-card,
.user-settings-toggle {
  display: grid;
  gap: var(--beta-space-3);
}

.user-settings-avatar-card {
  padding: var(--beta-space-4);
  justify-items: center;
  text-align: center;
}

.user-settings-avatar-preview,
.user-settings-preview-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, #93d6ff 30%, #2f7dff 68%, #113a9b);
  color: #ffffff;
  font-weight: 900;
  overflow: hidden;
}

.user-settings-avatar-preview {
  width: 128px;
  height: 128px;
  font-size: 2.2rem;
  box-shadow: 0 0 28px rgba(47, 125, 255, 0.24);
}

.user-settings-preview-avatar {
  width: 72px;
  height: 72px;
  font-size: 1.2rem;
  box-shadow: 0 18px 36px rgba(5, 12, 32, 0.34);
}

.user-settings-avatar-copy,
.user-settings-preview-copy {
  display: grid;
  gap: 4px;
}

.user-settings-avatar-copy strong,
.user-settings-preview-name {
  color: var(--beta-ink);
}

.user-settings-avatar-copy p,
.user-settings-preview-copy span,
.user-settings-preview-copy p,
.user-settings-security-note,
.user-settings-upload-message,
.user-settings-name-preview span,
.user-settings-name-meta span,
.user-settings-preview-meta span {
  margin: 0;
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
}

.user-settings-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--beta-space-2);
}

.user-settings-upload-label {
  cursor: pointer;
}

.user-settings-file-input {
  display: none;
}

.user-settings-form-grid,
.user-settings-appearance-grid {
  align-items: start;
}

.user-settings-security-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--beta-space-3);
}

.user-settings-security-form .beta-form-group:last-child {
  grid-column: 1 / -1;
}

.user-settings-appearance-grid {
  gap: var(--beta-space-4);
}

.user-settings-textarea {
  min-block-size: 104px;
}

.user-settings-name-preview {
  gap: 12px;
  padding: clamp(18px, 2vw, 24px);
}

.user-settings-appearance-preview {
  margin-top: var(--beta-space-2);
}

.user-settings-preview-name {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 850;
  line-height: 1.08;
}

.user-settings-preview-card {
  padding: var(--beta-space-4);
}

.user-settings-appearance-preview-card {
  gap: var(--beta-space-3);
}

.user-settings-name-meta,
.user-settings-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-settings-name-meta span,
.user-settings-preview-meta span,
.user-settings-control-value,
.user-settings-palette-selection {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.4rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #dce8ff;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.02em;
}

.user-settings-preview-identity,
.user-settings-toggle-grid {
  display: grid;
}

.user-settings-preview-head {
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  gap: var(--beta-space-2);
}

.user-settings-preview-head span,
.user-settings-preview-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: #dce8ff;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1;
  padding: 0.45rem 0.72rem;
  white-space: nowrap;
}

.user-settings-preview-identity {
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--beta-space-3);
  align-items: center;
}

.user-settings-preview-copy strong {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 840;
  line-height: 1.08;
}

.user-settings-preview-summary {
  margin: 0;
  color: var(--beta-ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

.user-settings-preview-tags {
  grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
  gap: var(--beta-space-2);
}

.user-settings-toggle-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--beta-space-3);
  margin-top: var(--beta-space-4);
}

.user-settings-control-head,
.user-settings-choice-trigger-copy,
.user-settings-choice-trigger-text,
.user-settings-choice-option-copy,
.user-settings-palette-group {
  display: grid;
}

.user-settings-control-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.user-settings-control-value {
  justify-self: end;
}

.user-settings-choice-group,
.user-settings-palette-group,
.user-settings-range-group {
  gap: 10px;
}

.user-settings-choice-group {
  position: relative;
  z-index: 1;
}

.user-settings-choice-group.is-open {
  z-index: 6;
}

.user-settings-choice-trigger,
.user-settings-choice-option,
.user-settings-palette-swatch {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  transition:
    border-color var(--beta-transition-fast),
    background-color var(--beta-transition-fast),
    box-shadow var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-settings-choice-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(103, 222, 245, 0.12), rgba(255, 255, 255, 0) 14rem),
    rgba(12, 19, 42, 0.92);
}

.user-settings-choice-group.is-open .user-settings-choice-trigger,
.user-settings-choice-trigger:hover,
.user-settings-choice-trigger:focus-visible {
  border-color: rgba(103, 222, 245, 0.34);
  box-shadow:
    0 16px 36px rgba(5, 12, 32, 0.28),
    0 0 0 1px rgba(103, 222, 245, 0.08);
  transform: translateY(-1px);
}

.user-settings-choice-trigger-copy {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.user-settings-choice-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--user-settings-accent);
  font-size: 1rem;
  line-height: 1;
}

.user-settings-choice-trigger-text,
.user-settings-choice-option-copy {
  gap: 4px;
  text-align: left;
}

.user-settings-choice-trigger-text strong,
.user-settings-choice-option strong {
  color: var(--beta-ink);
  font-size: 0.96rem;
  font-weight: 800;
}

.user-settings-choice-trigger-text small,
.user-settings-choice-option small {
  color: var(--beta-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.user-settings-choice-trigger > i {
  color: rgba(220, 232, 255, 0.82);
  font-size: 0.85rem;
}

.user-settings-choice-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 8;
  display: grid;
  gap: 8px;
  max-height: min(320px, 42vh);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(103, 222, 245, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(103, 222, 245, 0.12), rgba(255, 255, 255, 0) 14rem),
    rgba(8, 13, 30, 0.97);
  box-shadow: 0 26px 48px rgba(4, 10, 26, 0.44);
}

.user-settings-choice-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.user-settings-choice-option:hover,
.user-settings-choice-option:focus-visible,
.user-settings-choice-option.is-active {
  border-color: rgba(103, 222, 245, 0.26);
  background: rgba(20, 34, 72, 0.86);
  transform: translateY(-1px);
}

.user-settings-choice-option.is-active i {
  color: var(--user-settings-accent-strong);
}

.user-settings-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 44px));
  gap: 12px;
  justify-content: start;
}

.user-settings-palette-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 14px;
  background: transparent;
}

.user-settings-palette-swatch:hover,
.user-settings-palette-swatch:focus-visible,
.user-settings-palette-swatch.is-active {
  border-color: rgba(103, 222, 245, 0.28);
  background: rgba(18, 30, 61, 0.56);
  transform: translateY(-1px);
}

.user-settings-palette-swatch-chip {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.26),
    0 10px 22px rgba(4, 10, 26, 0.24);
}

.user-settings-range-input {
  width: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  height: 0.6rem;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--user-settings-accent) 0%,
      var(--user-settings-accent-strong) var(--user-settings-range-percent),
      rgba(255, 255, 255, 0.12) var(--user-settings-range-percent),
      rgba(255, 255, 255, 0.12) 100%
    );
  outline: none;
}

.user-settings-range-input::-webkit-slider-runnable-track {
  height: 0.6rem;
  border-radius: 999px;
  background: transparent;
}

.user-settings-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -5px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 34%, #ffffff, #c8f9ff 42%, #63efd7 100%);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.26),
    0 0 0 5px rgba(103, 222, 245, 0.14);
  cursor: pointer;
}

.user-settings-range-input::-moz-range-track {
  height: 0.6rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.user-settings-range-input::-moz-range-progress {
  height: 0.6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--user-settings-accent), var(--user-settings-accent-strong));
}

.user-settings-range-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 34%, #ffffff, #c8f9ff 42%, #63efd7 100%);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.26),
    0 0 0 5px rgba(103, 222, 245, 0.14);
  cursor: pointer;
}

.user-settings-security-shell {
  margin-top: var(--beta-space-5);
}

.user-settings-security-head {
  margin-bottom: var(--beta-space-4);
}

.user-settings-security-title,
.user-settings-security-title-copy,
.user-settings-security-layout,
.user-settings-security-block {
  display: grid;
}

.user-settings-security-title {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--beta-space-3);
}

.user-settings-security-title-copy {
  gap: var(--beta-space-2);
}

.user-settings-security-icon {
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(120, 166, 255, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 58%),
    linear-gradient(160deg, rgba(28, 44, 96, 0.96), rgba(14, 21, 48, 0.96));
  box-shadow: 0 18px 38px rgba(5, 12, 32, 0.28);
}

.user-settings-security-icon i {
  color: #dce8ff;
  font-size: 1.1rem;
}

.user-settings-security-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--beta-space-4);
  align-items: start;
}

.user-settings-security-block {
  gap: var(--beta-space-3);
  min-width: 0;
  padding: clamp(18px, 1.7vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-lg);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 15rem),
    rgba(255, 255, 255, 0.03);
}

.user-settings-security-block-wide {
  grid-column: 1 / -1;
}

.user-settings-security-block .dashboard-panel-head,
.user-settings-security-block .user-settings-security-stack,
.user-settings-security-block .user-settings-device-section {
  margin-top: 0;
  margin-bottom: 0;
}

.user-settings-security-block .user-settings-toggle-grid,
.user-settings-security-block .user-settings-recovery-codes {
  margin-top: 0;
}

.user-settings-toggle {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 78px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(103, 222, 245, 0.12), rgba(255, 255, 255, 0) 14rem),
    rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition:
    border-color var(--beta-transition-fast),
    background-color var(--beta-transition-fast),
    box-shadow var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-settings-toggle:hover,
.user-settings-toggle:focus-within {
  border-color: rgba(103, 222, 245, 0.26);
  background:
    radial-gradient(circle at top left, rgba(103, 222, 245, 0.16), rgba(255, 255, 255, 0) 14rem),
    rgba(20, 34, 72, 0.9);
  box-shadow: 0 14px 30px rgba(5, 12, 32, 0.24);
  transform: translateY(-1px);
}

.user-settings-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.user-settings-toggle-indicator {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    background-color var(--beta-transition-fast),
    box-shadow var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.user-settings-toggle-indicator::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(240, 246, 255, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform var(--beta-transition-fast), background-color var(--beta-transition-fast);
}

.user-settings-toggle input:checked + .user-settings-toggle-indicator {
  background: linear-gradient(90deg, rgba(103, 222, 245, 0.86), rgba(99, 239, 215, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 0 5px rgba(103, 222, 245, 0.1);
}

.user-settings-toggle input:checked + .user-settings-toggle-indicator::after {
  transform: translateX(18px);
  background: #ffffff;
}

.user-settings-toggle-content {
  display: grid;
  gap: 6px;
}

.user-settings-toggle-content i {
  color: rgba(160, 228, 255, 0.86);
  font-size: 0.9rem;
}

.user-settings-toggle strong {
  color: var(--beta-ink);
  font-size: 0.92rem;
  font-weight: 800;
}

.user-settings-toggle-content small {
  color: var(--beta-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.user-settings-discord-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--beta-space-2);
  margin-top: var(--beta-space-3);
}

.user-settings-discord-actions .beta-field {
  max-width: 160px;
}

.user-settings-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--beta-space-2);
}

.user-settings-security-stack,
.user-settings-device-section,
.user-settings-device-list,
.user-settings-device-copy,
.user-settings-device-badges {
  display: grid;
  gap: var(--beta-space-3);
}

.user-settings-security-stack {
  margin-top: var(--beta-space-4);
}

.user-settings-security-note.is-success {
  color: #a9f5c8;
}

.user-settings-security-note.is-danger {
  color: #ffb4c2;
}

.user-settings-security-note.is-info {
  color: #9ed9ff;
}

.user-settings-device-section {
  margin-top: var(--beta-space-5);
}

.user-settings-device-list {
  gap: var(--beta-space-2);
}

.user-settings-device-card {
  display: grid;
  gap: var(--beta-space-3);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-md);
  background: rgba(255, 255, 255, 0.04);
}

.user-settings-device-card.is-current {
  border-color: rgba(120, 166, 255, 0.28);
  background: rgba(47, 125, 255, 0.08);
}

.user-settings-device-head,
.user-settings-device-meta,
.user-settings-device-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--beta-space-2);
  flex-wrap: wrap;
}

.user-settings-device-copy strong {
  color: var(--beta-ink);
}

.user-settings-device-copy p,
.user-settings-device-meta span,
.user-settings-device-empty {
  margin: 0;
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
}

.user-settings-device-badges {
  grid-auto-flow: column;
  gap: 8px;
}

.user-settings-device-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.4rem 0.7rem;
  border-radius: var(--beta-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: #dce8ff;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1;
}

.user-settings-device-badge.is-current {
  border-color: rgba(120, 166, 255, 0.3);
  background: rgba(47, 125, 255, 0.16);
}

.user-settings-device-empty {
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--beta-radius-md);
}

.user-settings-recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--beta-space-2);
  margin-top: var(--beta-space-4);
}

.user-settings-recovery-code {
  display: block;
  padding: 0.82rem 0.9rem;
  border: 1px solid rgba(120, 166, 255, 0.2);
  border-radius: var(--beta-radius-md);
  background: rgba(47, 125, 255, 0.08);
  color: #f0f7ff;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-settings-heading h1 {
  margin: 0;
  color: var(--beta-ink);
  font-size: clamp(2rem, 3.8vw, 4.35rem);
  font-weight: 800;
  line-height: 1;
}

.account-settings-stats,
.account-admin-actions,
.account-user-footer,
.account-user-card-head,
.account-user-title-row,
.account-user-controls {
  display: flex;
}

.account-settings-stats {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--beta-space-2);
}

.account-settings-stats span,
.account-user-title-row span,
.account-user-footer span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: #dce8ff;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1;
  padding: 0.45rem 0.72rem;
  white-space: nowrap;
}

.account-admin-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.28fr);
  gap: var(--beta-space-5);
  align-items: start;
}

.account-admin-panel {
  padding: clamp(20px, 2.2vw, 28px);
}

.account-user-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--beta-space-3);
}

.account-privilege-fieldset {
  display: grid;
  gap: var(--beta-space-3);
  margin: var(--beta-space-5) 0 0;
  padding: 0;
  border: 0;
}

.account-privilege-fieldset legend {
  margin: 0;
  color: #dce7ff;
  font-size: 0.82rem;
  font-weight: 760;
}

.account-privilege-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--beta-space-3);
}

.account-privilege-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  min-height: 74px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--beta-ink);
  cursor: pointer;
  padding: 12px;
  transition:
    border-color var(--beta-transition-fast),
    background-color var(--beta-transition-fast),
    transform var(--beta-transition-fast);
}

.account-privilege-toggle:hover,
.account-privilege-toggle:focus-within {
  border-color: rgba(120, 166, 255, 0.26);
  background: rgba(47, 125, 255, 0.1);
  transform: translateY(-1px);
}

.account-privilege-toggle input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--beta-blue);
}

.account-privilege-toggle span,
.account-user-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.account-privilege-toggle strong {
  color: var(--beta-ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: var(--beta-leading-tight);
}

.account-privilege-toggle small {
  color: var(--beta-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.account-privilege-toggle-compact {
  min-height: 48px;
  align-items: center;
  padding: 10px 12px;
}

.account-privilege-toggle-compact strong {
  font-size: 0.82rem;
}

.account-admin-actions {
  justify-content: flex-end;
  margin-top: var(--beta-space-5);
}

.account-user-list {
  display: grid;
  gap: var(--beta-space-4);
}

.account-user-card {
  display: grid;
  gap: var(--beta-space-4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--beta-radius-lg);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 15rem),
    rgba(255, 255, 255, 0.035);
  padding: var(--beta-space-4);
}

.account-user-card.is-suspended {
  opacity: 0.72;
}

.account-user-card-head {
  align-items: center;
  gap: var(--beta-space-3);
  min-width: 0;
}

.account-user-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, #93d6ff 30%, #2f7dff 68%, #113a9b);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(47, 125, 255, 0.22);
}

.account-user-avatar.has-image {
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.account-user-copy {
  flex: 1 1 auto;
}

.account-user-title-row {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--beta-space-2);
}

.account-user-title-row h3 {
  margin: 0;
  color: var(--beta-ink);
  font-size: 1.05rem;
  font-weight: 820;
  line-height: var(--beta-leading-tight);
  overflow-wrap: anywhere;
}

.account-user-copy p {
  margin: 0;
  color: var(--beta-muted);
  font-size: var(--beta-text-sm);
  overflow-wrap: anywhere;
}

.account-user-controls {
  flex: 1 1 min(360px, 42%);
  flex-wrap: wrap;
  gap: var(--beta-space-3);
  justify-content: flex-end;
  min-width: 0;
}

.account-user-select {
  flex: 1 1 150px;
  min-width: min(150px, 100%);
}

.account-user-privileges {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-user-footer {
  align-items: center;
  justify-content: space-between;
  gap: var(--beta-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .user-settings-toggle,
  .account-privilege-toggle {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .homepage :is(.noctra-suite-cards, .suite-cards, [data-suite-cards]) {
    --suite-cards-max: 980px;
  }

  .homepage :is(.noctra-suite-cards-grid, .suite-cards-grid, [data-suite-cards-grid]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .task-lane-list {
    display: grid;
    width: 100%;
    grid-auto-flow: column;
    grid-auto-columns: min(70vw, 20rem);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--beta-space-3);
    scrollbar-width: none;
    padding-bottom: var(--beta-space-2);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .task-lane-list.is-draggable-lane {
    cursor: grab;
  }

  .task-lane-list.is-draggable-lane.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }

  .task-lane-list.is-scrollable-lane {
    height: auto;
    max-height: none;
    overflow-y: hidden;
    padding-right: 0;
  }

  .task-lane-list::-webkit-scrollbar {
    display: none;
  }

  .collab-person-grid {
    grid-auto-flow: column;
    grid-auto-columns: min(76vw, 22rem);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--beta-space-2);
    -webkit-overflow-scrolling: touch;
  }

  .collab-person-grid::-webkit-scrollbar {
    display: none;
  }

  .collab-person-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .workspace-task-card {
    min-block-size: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .user-settings-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-settings-topbar {
    grid-template-columns: 1fr;
  }

  .user-settings-nav-button {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 88px;
    padding: 14px 16px;
  }

  .user-settings-nav-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .user-settings-tabs-panel {
    position: static;
    top: auto;
  }

  .user-settings-avatar-stage {
    grid-template-columns: 1fr;
  }

  .user-settings-view-grid-profile,
  .user-settings-view-grid-appearance {
    grid-template-columns: 1fr;
  }

  .user-settings-view-side {
    position: static;
  }

  .user-settings-appearance-controls-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .user-settings-view-side.user-settings-view-side-appearance {
    grid-column: auto;
    grid-row: auto;
  }

  .user-settings-security-layout {
    grid-template-columns: 1fr;
  }

  .user-settings-security-block-wide {
    grid-column: auto;
  }
}

@media (max-width: 991.98px) {
  .user-settings-page-root,
  .account-settings-page-root {
    padding-top: 100px;
  }

  .user-settings-heading,
  .user-settings-topbar,
  .user-settings-shell,
  .user-settings-identity-hero,
  .user-settings-grid,
  .user-settings-identity-grid,
  .account-admin-grid,
  .account-user-form {
    grid-template-columns: 1fr;
  }

  .user-settings-hero-meta {
    justify-content: flex-start;
  }

  .user-settings-security-form .beta-form-group:last-child {
    grid-column: auto;
  }

  .dashboard-panel-head-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .account-settings-stats {
    justify-content: flex-start;
  }

  .account-user-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .user-settings-toggle-grid {
    grid-template-columns: 1fr;
  }

  .user-settings-form,
  .user-settings-avatar-builder-grid,
  .user-settings-inventory-row {
    grid-template-columns: 1fr;
  }

  .user-settings-avatar-library-toolbar {
    grid-template-columns: 1fr;
  }

  .user-settings-avatar-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .user-settings-inventory-actions {
    justify-content: flex-start;
  }

  .user-settings-security-title {
    grid-template-columns: 1fr;
  }

  .account-user-controls {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .account-user-privileges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homepage {
    padding-top: 72px;
  }

  .hero-section {
    padding-top: 0;
  }

  .hero-top-composition {
    --task-card-min: 280px;
    padding-top: clamp(20px, 3vw, 32px);
  }

  .hero-top-composition::before {
    inset: clamp(34px, 8vw, 72px) 4% auto;
  }

  .hero-ambient-orbit {
    height: clamp(360px, 58vw, 560px);
  }

  .hero-orbit-shell {
    padding-inline: 0;
  }

  .hero-orbit::before {
    width: min(82vw, 720px);
  }

  .hero-orbit::after {
    width: min(64vw, 520px);
  }

  .orbit-rings {
    width: min(70vw, 500px);
  }

  .task-card {
    max-width: calc((100% - var(--task-card-gap)) / 2);
  }

  .overview-live-event-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(1rem, 1.8vw, 1.4rem);
  width: 100%;
  padding: clamp(18px, 2vw, 24px);
  align-items: stretch;
}

  .overview-live-event-banner {
  --overview-event-font-size: 64px;
  --overview-event-overlay: 0.56;

  position: relative;
  width: 100%;
  min-height: clamp(260px, 28vw, 360px);
  justify-self: stretch;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(114, 167, 255, 0.28), transparent 24rem),
    linear-gradient(145deg, #081130 0%, #18133f 48%, #050811 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 48px rgba(0, 0, 0, 0.2);
}

  .overview-live-event-status-row {
    align-items: stretch;
  }

  .overview-live-event-cta {
    width: 100%;
  }

  .overview-live-event-status-row .overview-live-event-status {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    flex: 0 1 auto;
  }

  .hero-intro-row,
  .hero-system-row,
  .beta-dashboard-grid,
  .task-compose-grid,
  .support-grid,
  .module-grid,
  .cta-grid {
    grid-template-columns: 1fr;
  }

  .hero-system-row > .user-bar-preview {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .preview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-lane-grid,
  .task-collapsible-grid,
  .task-modal-beta-grid {
    grid-template-columns: 1fr;
  }

  .beta-form-group-wide {
    grid-column: auto;
  }

  .task-modal-beta-actions,
  .task-modal-beta-head,
  .meeting-checkin-hero,
  .meeting-checkin-body,
  .dashboard-panel-head-row,
  .collab-person-head,
  .workspace-task-head,
  .quick-note-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .meeting-checkin-hero,
  .meeting-checkin-body {
    grid-template-columns: 1fr;
  }

  .meeting-checkin-modal-card {
    padding: clamp(16px, 4vw, 22px);
  }

  .meeting-checkin-map-frame {
    min-block-size: 220px;
  }

  .meeting-checkin-sidepanel {
    order: -1;
  }

  .workspace-task-meta {
    justify-content: flex-start;
  }

  .collab-board-metrics {
    justify-content: flex-start;
  }

  .collab-board-launcher {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dashboard-side-column {
    grid-template-columns: 1fr;
  }

  .collab-board-launcher-metrics,
  .collab-board-launcher-action {
    grid-column: 2;
    justify-self: start;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 860px) {
  .preview-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .workspace-task-actions {
    align-items: stretch;
  }

  .collab-person-grid {
    grid-auto-columns: min(86vw, 22rem);
  }

  .collab-board-launcher {
    grid-template-columns: 1fr;
  }

  .collab-board-launcher-icon,
  .collab-board-launcher-metrics,
  .collab-board-launcher-action {
    grid-column: auto;
    justify-self: start;
  }

  .collab-board-modal-dialog {
    padding:
      calc(env(safe-area-inset-top, 0px) + 8px)
      8px
      calc(env(safe-area-inset-bottom, 0px) + 8px);
  }

  .collab-board-modal-card {
    max-block-size: none;
    min-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    border-radius: 24px;
    padding: 14px;
  }

  .meeting-checkin-modal-dialog {
    padding:
      calc(env(safe-area-inset-top, 0px) + 8px)
      8px
      calc(env(safe-area-inset-bottom, 0px) + 8px);
  }

  .meeting-checkin-modal-card {
    max-block-size: none;
    min-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    border-radius: 24px;
    padding: 14px;
  }

  .meeting-checkin-status-card,
  .meeting-checkin-sidepanel,
  .meeting-checkin-map-frame {
    border-radius: 22px;
  }

  .meeting-checkin-hero {
    gap: 12px;
  }

  .meeting-checkin-pill-row {
    gap: 8px;
  }

  .meeting-checkin-pill {
    inline-size: 100%;
    justify-content: flex-start;
  }

  .meeting-checkin-sidepanel-copy h3 {
    font-size: 1.35rem;
  }

  .meeting-checkin-primary,
  .meeting-checkin-sidepanel-actions .btn-beta {
    width: 100%;
  }

  .user-settings-nav {
    grid-template-columns: 1fr;
  }

  .user-settings-heading h1 {
    font-size: clamp(1.85rem, 9vw, 2.6rem);
  }

  .user-settings-nav-button {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .user-settings-row-summary {
    flex-direction: column;
  }

  .homepage :is(.noctra-suite-cards-grid, .suite-cards-grid, [data-suite-cards-grid]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .hero-top-composition .suite-switcher-row {
    --hero-suite-switcher-lift: 0px;
    margin: 0 auto 10px;
  }

  .hero-top-composition :is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) {
    min-height: 46px;
    padding: 0.62rem 0.9rem 0.42rem;
  }

  .hero-top-composition :is(.noctra-suite-switcher, .suite-switcher, [data-suite-switcher]) :is(.suite-switcher-current, .suite-current) {
    line-height: 1.1;
  }

  .homepage :is(.noctra-suite-cards, .suite-cards, [data-suite-cards]) {
    --suite-cards-gap: 14px;
  }

  .homepage :is(.noctra-suite-cards-grid, .suite-cards-grid, [data-suite-cards-grid]) {
    grid-template-columns: 1fr;
  }

  .overview-live-event-banner h3 {
  margin: 0;
  max-width: 18ch;
  color: #f7fbff;
  font-size: clamp(1.4rem, calc(var(--overview-event-font-size) * 0.44), 2.4rem);
  font-weight: 860;
  line-height: 0.96;
  letter-spacing: 0;
  text-wrap: balance;
}

  .overview-live-event-status-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.8rem;
  }

  .overview-live-event-status-row .overview-live-event-status {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
  }

  .collab-person-grid {
    grid-auto-columns: 100%;
  }

  .collab-person-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collab-task-preview-head,
  .collab-planner-strip-head,
  .collab-task-line,
  .collab-planner-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .collab-planner-date,
  .collab-task-line strong,
  .collab-planner-copy span {
    white-space: normal;
  }

  .user-settings-page-root,
  .account-settings-page-root {
    padding-top: 92px;
  }

  .account-settings-heading h1 {
    font-size: clamp(2rem, 11vw, 3.1rem);
  }

  .user-settings-avatar-actions,
  .user-settings-preview-head,
  .user-settings-preview-identity,
  .account-user-controls,
  .account-user-footer,
  .account-admin-actions {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .account-privilege-grid,
  .account-user-privileges {
    grid-template-columns: 1fr;
  }

  .account-user-select,
  .user-settings-avatar-actions .btn-beta,
  .account-user-footer .btn-beta,
  .account-admin-actions .btn-beta {
    width: 100%;
  }

  .user-settings-avatar-mode-switch {
    width: 100%;
    border-radius: 18px;
  }

  .user-settings-avatar-mode-button {
    flex: 1 1 0;
    min-width: 0;
  }

  .user-settings-avatar-library-tabs {
    width: 100%;
  }

  .user-settings-avatar-library-tab {
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
  }

  .user-settings-avatar-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homepage {
    padding-top: 44px;
  }

  .homepage::before {
    inset: -80px 0 auto;
    height: 680px;
  }

  .hero-section {
    padding-top: 0;
  }

  .hero-top-composition {
    --task-card-min: 100%;
    padding-top: clamp(16px, 4vw, 24px);
  }

  .hero-top-composition::before {
    inset: 60px -10% auto;
    height: 260px;
  }

  .hero-ambient-orbit {
    inset: 0 -8% auto;
    height: 300px;
  }

  .hero-orbit-shell {
    padding-top: 0;
  }

  .hero-orbit::before {
    width: min(112vw, 430px);
  }

  .hero-orbit::after {
    width: min(90vw, 320px);
  }

  .orbit-rings {
    width: min(84vw, 320px);
  }

  .hero-task-deck {
    width: 100%;
  }

  .hero-flow {
    gap: var(--beta-space-6);
  }

  .task-card {
    max-width: 100%;
    min-height: 204px;
    padding: var(--beta-space-4);
  }

  .hero-copy {
    text-align: left;
  }

  .hero-copy h1 {
    margin-top: var(--beta-space-6);
  }

  .hero-intro-row {
    grid-template-columns: 1fr;
    gap: var(--beta-space-4);
    margin-inline: 0;
  }

  .hero-intro-row p,
  .hero-lede,
  .section-heading p {
    font-size: var(--beta-text-md);
  }

  .hero-lede {
    margin-inline: 0;
  }

  .hero-actions {
    justify-content: stretch;
  }

  .hero-actions .btn-beta,
  .section-heading .btn-beta,
  .cta-card .btn-beta {
    width: 100%;
  }

  .hero-system-row > .user-bar-preview {
    gap: 0.8rem;
    padding: 0.9rem;
  }

  .hero-top-composition .suite-switcher-row {
    margin: 0 auto 10px;
  }

  .hero-top-composition .suite-switcher-anchor {
    max-width: 100%;
  }

  .task-compose-actions,
  .task-compose-actions .btn-beta,
  .task-modal-beta-buttons,
  .task-modal-beta-buttons .btn-beta,
  .workspace-task-actions,
  .workspace-task-actions .btn-beta,
  .quick-notes-actions .btn-beta {
    width: 100%;
  }

  .preview-metrics {
    grid-template-columns: 1fr;
  }

  .preview-card,
  .beta-card,
  .cta-card {
    padding: var(--beta-space-5);
  }

  .dashboard-main-card,
  .dashboard-side-card,
  .task-lane-panel,
  .task-collapsible-card,
  .task-modal-beta-card {
    padding-inline: clamp(1.1rem, 5vw, 1.35rem);
  }

  .task-tools-row,
  .task-modal-beta-dialog {
    padding-inline: 0;
  }

  .task-modal-beta-dialog {
    padding-block:
      clamp(80px, 9dvh, 104px)
      12px;
  }

  .task-modal-beta-card {
    max-block-size: calc(100dvh - clamp(92px, 10dvh, 116px));
  }

  .task-tools-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Suite Home (Noctra Suite hub) */

.site-shell.is-suite-home-shell {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 0%, rgba(96, 164, 255, 0.18), transparent 34rem),
    radial-gradient(ellipse at 50% 22%, rgba(86, 148, 255, 0.12), transparent 42rem),
    linear-gradient(180deg, #07101f 0%, #051022 38%, #030814 100%);
}

.site-shell.is-suite-home-shell::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 12%, rgba(164, 210, 255, 0.08), transparent 24rem),
    radial-gradient(ellipse at 18% 18%, rgba(43, 90, 244, 0.18), transparent 30rem),
    radial-gradient(ellipse at 82% 18%, rgba(42, 141, 255, 0.14), transparent 30rem),
    radial-gradient(ellipse at 50% 42%, rgba(36, 90, 196, 0.12), transparent 42rem),
    linear-gradient(180deg, rgba(2, 5, 16, 0.76) 0%, rgba(3, 8, 20, 0.46) 34%, rgba(2, 5, 16, 0.92) 100%);
  content: "";
  pointer-events: none;
}

.site-shell.is-suite-home-shell::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.035), transparent 26rem),
    linear-gradient(180deg, rgba(6, 12, 28, 0.08) 0%, transparent 34%, rgba(2, 5, 16, 0.22) 100%);
  content: "";
  opacity: 0.78;
  pointer-events: none;
}

.suite-home-page-root {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  min-height: calc(100svh - 88px);
  background: transparent;
}

.suite-home-page-root::before {
  content: none;
}

.suite-home-page-root::after {
  content: none;
}

.suite-homepage {
  --suite-ink: #f4f8ff;
  --suite-muted: rgba(232, 240, 255, 0.72);
  --suite-line: rgba(154, 197, 255, 0.2);
  --suite-line-strong: rgba(165, 211, 255, 0.4);
  --suite-glow: rgba(52, 118, 255, 0.22);
  --suite-glow-strong: rgba(96, 198, 255, 0.18);

  position: relative;
  box-sizing: border-box;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 2.4vw, 34px) 0 clamp(24px, 3vw, 48px);
  min-height: calc(100svh - 88px);
  background: transparent;
}

.suite-home-backdrop {
  display: none;
}

.suite-home-backdrop::after {
  content: none;
}

.suite-home-stars,
.suite-home-orbits,
.suite-home-globe,
.suite-home-horizon {
  position: absolute;
  pointer-events: none;
}

.suite-home-stars {
  inset: 0;
  z-index: -5;
}

.suite-home-star {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  inline-size: var(--star-size);
  block-size: var(--star-size);
  border-radius: 50%;
  background: rgba(226, 243, 255, 0.96);
  opacity: var(--star-opacity);
  box-shadow: 0 0 12px rgba(117, 188, 255, 0.42);
  animation:
    suite-home-star-drift var(--star-duration, 18s) ease-in-out infinite alternate,
    suite-home-star-twinkle 3.6s ease-in-out infinite;
  animation-delay: var(--star-delay, 0s), var(--star-delay, 0s);
  will-change: transform, opacity;
}

.suite-home-star.is-glow {
  box-shadow:
    0 0 16px rgba(117, 188, 255, 0.84),
    0 0 28px rgba(74, 152, 255, 0.54);
}

.suite-home-star.is-glow::before,
.suite-home-star.is-glow::after {
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(221, 241, 255, 0.92);
  content: "";
  transform: translate(-50%, -50%);
}

.suite-home-star.is-glow::before {
  inline-size: calc(var(--star-size) * 4);
  block-size: 1px;
}

.suite-home-star.is-glow::after {
  inline-size: 1px;
  block-size: calc(var(--star-size) * 4);
}

.suite-home-orbits {
  inset: 0;
  z-index: -4;
  display: none;
}

.suite-home-orbit {
  position: absolute;
  left: var(--orbit-left);
  top: var(--orbit-top);
  inline-size: var(--orbit-size);
  aspect-ratio: 1 / 0.62;
  border-radius: 50%;
  border: 1px solid rgba(139, 190, 255, 0.18);
  box-shadow: 0 0 40px rgba(53, 109, 255, 0.08);
  content: "";
  opacity: var(--orbit-opacity);
  transform: translate(-50%, -50%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.74) 72%, transparent 100%);
}

.suite-home-globe {
  position: absolute;
  left: 50%;
  bottom: clamp(-18px, -1vw, -6px);
  z-index: 0;
  width: min(1344px, 70vw);
  height: clamp(126px, 16.8vw, 189px);
  transform: translateX(-50%);
  overflow: hidden;
  opacity: 0.98;
  filter: saturate(1.12) brightness(1.04);
}

.suite-home-globe-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 39%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.suite-home-globe::before {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 18%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(235, 247, 255, 0.94) 0%, rgba(158, 219, 255, 0.72) 16%, rgba(84, 161, 255, 0.38) 40%, transparent 78%);
  content: "";
  filter: blur(30px);
  opacity: 0.72;
}

.suite-home-globe::after {
  content: none;
}

.suite-home-horizon {
  display: none;
}

@keyframes suite-home-star-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(var(--star-drift-mid-x, 0px), var(--star-drift-mid-y, 0px), 0) scale(0.92);
  }

  100% {
    transform: translate3d(var(--star-drift-x, 0px), var(--star-drift-y, 0px), 0) scale(1.12);
  }
}

@keyframes suite-home-star-twinkle {
  0%,
  100% {
    opacity: var(--star-opacity-min, 0.28);
  }

  45% {
    opacity: var(--star-opacity, 0.52);
  }

  70% {
    opacity: var(--star-opacity-mid, 0.4);
  }
}

@keyframes suite-home-globe-border-sweep {
  from {
    background-position: -14% 50%;
  }

  to {
    background-position: 114% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suite-home-star {
    animation: none;
  }
}

.suite-home-hero {
  position: relative;
  z-index: 2;
  width: min(980px, 100%);
  margin: 0 auto clamp(18px, 2.2vw, 30px);
  padding-top: clamp(10px, 1.2vw, 16px);
  text-align: center;
}

.suite-home-kicker {
  margin: 0 0 1.15rem;
  color: rgba(98, 196, 255, 0.94);
  font-size: var(--beta-text-xs);
  font-weight: 760;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.suite-home-title {
  margin: 0;
  display: inline-block;
  max-width: calc(100% - 0.04em);
  padding-inline: 0.06em 0.18em;
  color: rgba(241, 247, 255, 0.98);
  font-size: clamp(2.45rem, 4.2vw, 4rem);
  font-weight: 320;
  letter-spacing: -0.036em;
  line-height: 1.04;
  text-wrap: balance;
  overflow: visible;
}

.suite-home-title-emphasis {
  display: inline-block;
  padding-inline: 0.01em 0.16em;
  background: linear-gradient(108deg, #f6fbff 0%, #b9dbff 34%, #77abff 76%, #669fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 42px rgba(53, 116, 255, 0.14);
}

.suite-home-subtitle {
  margin: 0.72rem auto 0;
  max-width: 36rem;
  color: rgba(214, 226, 245, 0.72);
  font-size: clamp(0.95rem, 1.02vw, 1.08rem);
  font-weight: 420;
  letter-spacing: 0.01em;
  line-height: 1.55;
}

.suite-home-card-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(230px, 0.88fr) minmax(320px, 1.08fr) minmax(230px, 0.88fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: end;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.suite-home-card-cell {
  display: grid;
  align-items: stretch;
}

.suite-home-card-cell.is-side {
  padding-bottom: clamp(4px, 0.8vw, 12px);
}

.suite-home-card {
  --suite-card-border: rgba(136, 176, 238, 0.2);
  --suite-card-border-hover: rgba(149, 206, 255, 0.34);
  --suite-card-border-active: rgba(132, 196, 255, 0.72);
  --suite-card-surface-top: rgba(13, 23, 55, 0.94);
  --suite-card-surface-bottom: rgba(7, 13, 31, 0.96);
  --suite-card-surface-glow: rgba(60, 129, 255, 0.22);
  --suite-card-overlay-top: rgba(62, 134, 255, 0.2);
  --suite-card-overlay-bottom: rgba(34, 84, 203, 0.12);
  --suite-card-active-top: rgba(14, 32, 82, 0.96);
  --suite-card-active-bottom: rgba(8, 18, 48, 0.98);
  --suite-card-active-glow: rgba(96, 176, 255, 0.28);
  --suite-card-halo: rgba(59, 118, 255, 0.12);
  --suite-card-halo-active: rgba(63, 132, 255, 0.24);
  --suite-card-shadow:
    0 28px 84px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --suite-card-shadow-hover:
    0 34px 96px rgba(0, 0, 0, 0.48),
    0 0 48px var(--suite-card-halo),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --suite-card-shadow-active:
    0 42px 116px rgba(0, 0, 0, 0.54),
    0 0 72px var(--suite-card-halo-active),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --suite-card-icon-border: rgba(123, 190, 255, 0.42);
  --suite-card-icon-core: rgba(56, 204, 255, 0.16);
  --suite-card-icon-base: rgba(8, 17, 42, 0.9);
  --suite-card-icon-halo: rgba(50, 148, 255, 0.12);
  --suite-card-icon-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    0 0 28px var(--suite-card-icon-halo),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --suite-card-icon-active-border: rgba(153, 213, 255, 0.9);
  --suite-card-icon-active-halo: rgba(78, 152, 255, 0.28);
  --suite-card-icon-active-shadow:
    0 24px 58px rgba(0, 0, 0, 0.42),
    0 0 38px var(--suite-card-icon-active-halo),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --suite-card-glyph-shadow: rgba(76, 168, 255, 0.26);
  --suite-card-status-border: rgba(111, 213, 220, 0.26);
  --suite-card-status-background: rgba(63, 125, 148, 0.18);
  --suite-card-status-glow: rgba(92, 207, 255, 0.12);
  --suite-card-status-dot: #59f0d5;
  --suite-card-status-dot-glow: rgba(89, 240, 213, 0.86);
  --suite-card-cta-background: linear-gradient(180deg, rgba(29, 43, 91, 0.96) 0%, rgba(15, 22, 54, 0.98) 100%);
  --suite-card-cta-background-hover: linear-gradient(180deg, rgba(38, 58, 120, 0.98) 0%, rgba(19, 32, 72, 1) 100%);
  --suite-card-cta-glow-color: rgba(128, 186, 255, 0.52);
  --suite-card-cta-glow-opacity: 0.34;
  --suite-card-cta-glow-opacity-hover: 0.5;
  --suite-card-cta-shadow: 0 14px 28px rgba(5, 12, 34, 0.28);
  --suite-card-cta-shadow-hover: 0 18px 34px rgba(5, 12, 34, 0.34);
  --suite-card-cta-border: rgba(101, 146, 227, 0.22);
  --suite-card-cta-active-background: linear-gradient(90deg, #1ea8ff 0%, #2b70ff 100%);
  --suite-card-cta-active-background-hover: linear-gradient(90deg, #46bbff 0%, #4784ff 100%);
  --suite-card-cta-active-glow-color: rgba(128, 214, 255, 0.98);
  --suite-card-cta-active-glow-opacity: 0.86;
  --suite-card-cta-active-glow-opacity-hover: 1;
  --suite-card-cta-active-shadow: 0 20px 42px rgba(26, 92, 255, 0.34);
  --suite-card-cta-active-shadow-hover: 0 24px 48px rgba(26, 92, 255, 0.42);
  --suite-card-cta-active-border: rgba(151, 212, 255, 0.38);
  --suite-card-cta-suffix-border: rgba(170, 210, 255, 0.22);
  --suite-card-cta-suffix-background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  --suite-card-cta-suffix-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 rgba(0, 0, 0, 0);
  --suite-card-cta-suffix-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 20px rgba(130, 194, 255, 0.24);
  --suite-card-cta-suffix-color: rgba(238, 246, 255, 0.98);
  --suite-card-cta-suffix-shift: 4px;

  position: relative;
  display: flex;
  min-height: clamp(228px, 25vw, 276px);
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 1.8vw, 24px) clamp(18px, 2vw, 24px);
  border: 1px solid var(--suite-card-border);
  border-radius: 28px;
  background:
    linear-gradient(180deg, var(--suite-card-surface-top) 0%, var(--suite-card-surface-bottom) 100%),
    radial-gradient(circle at 50% -8%, var(--suite-card-surface-glow), transparent 48%);
  box-shadow: var(--suite-card-shadow);
  text-align: center;
  backdrop-filter: blur(18px);
  cursor: pointer;
  transition:
    transform var(--beta-transition-base),
    border-color var(--beta-transition-base),
    box-shadow var(--beta-transition-base),
    background var(--beta-transition-base);
}

.suite-home-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 42%);
  content: "";
  pointer-events: none;
  opacity: 0.44;
}

.suite-home-card-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, var(--suite-card-overlay-top), transparent 54%),
    radial-gradient(circle at 50% 68%, var(--suite-card-overlay-bottom), transparent 64%);
  content: "";
  pointer-events: none;
  opacity: 0.86;
}

.suite-home-card:hover,
.suite-home-card:focus-visible {
  border-color: var(--suite-card-border-hover);
  box-shadow: var(--suite-card-shadow-hover);
  transform: translateY(-4px);
}

.suite-home-card.is-active {
  min-height: clamp(272px, 29vw, 320px);
  padding-top: clamp(22px, 2.5vw, 28px);
  padding-bottom: clamp(20px, 2.2vw, 24px);
  border-color: var(--suite-card-border-active);
  border-radius: 32px;
  background:
    linear-gradient(180deg, var(--suite-card-active-top) 0%, var(--suite-card-active-bottom) 100%),
    radial-gradient(circle at 50% 0%, var(--suite-card-active-glow), transparent 48%);
  box-shadow: var(--suite-card-shadow-active);
  transform: translateY(-8px);
}

/* Support likely future per-card hooks while preserving the current grid order fallback. */
.suite-home-card-grid > :nth-child(1) .suite-home-card,
.suite-home-card[data-suite-id="fun"],
.suite-home-card[data-suite-card="fun"],
.suite-home-card.is-fun,
.suite-home-card.suite-home-card-fun,
.suite-home-card-cell[data-suite-id="fun"] .suite-home-card,
.suite-home-card-cell[data-suite-card="fun"] .suite-home-card,
.suite-home-card-cell.is-fun .suite-home-card {
  --suite-card-border: rgba(238, 130, 186, 0.26);
  --suite-card-border-hover: rgba(255, 171, 204, 0.42);
  --suite-card-border-active: rgba(255, 184, 214, 0.78);
  --suite-card-surface-top: rgba(35, 16, 52, 0.94);
  --suite-card-surface-bottom: rgba(17, 10, 32, 0.97);
  --suite-card-surface-glow: rgba(255, 96, 160, 0.22);
  --suite-card-overlay-top: rgba(255, 118, 179, 0.24);
  --suite-card-overlay-bottom: rgba(138, 72, 255, 0.12);
  --suite-card-active-top: rgba(51, 20, 74, 0.96);
  --suite-card-active-bottom: rgba(23, 12, 42, 0.98);
  --suite-card-active-glow: rgba(255, 138, 190, 0.32);
  --suite-card-halo: rgba(255, 112, 174, 0.16);
  --suite-card-halo-active: rgba(255, 136, 192, 0.28);
  --suite-card-icon-border: rgba(255, 170, 215, 0.42);
  --suite-card-icon-core: rgba(255, 122, 197, 0.22);
  --suite-card-icon-base: rgba(24, 10, 38, 0.92);
  --suite-card-icon-halo: rgba(255, 120, 186, 0.14);
  --suite-card-icon-active-border: rgba(255, 204, 226, 0.88);
  --suite-card-icon-active-halo: rgba(255, 142, 198, 0.3);
  --suite-card-glyph-shadow: rgba(255, 132, 194, 0.28);
  --suite-card-status-border: rgba(255, 181, 214, 0.32);
  --suite-card-status-background: rgba(131, 45, 95, 0.26);
  --suite-card-status-glow: rgba(255, 134, 193, 0.2);
  --suite-card-status-dot: #ff8db8;
  --suite-card-status-dot-glow: rgba(255, 141, 184, 0.82);
  --suite-card-cta-background: linear-gradient(180deg, rgba(82, 32, 88, 0.96) 0%, rgba(45, 20, 58, 0.98) 100%);
  --suite-card-cta-background-hover: linear-gradient(180deg, rgba(104, 40, 110, 0.98) 0%, rgba(58, 24, 74, 1) 100%);
  --suite-card-cta-glow-color: rgba(255, 150, 206, 0.6);
  --suite-card-cta-shadow: 0 14px 28px rgba(28, 8, 34, 0.34);
  --suite-card-cta-shadow-hover: 0 18px 34px rgba(28, 8, 34, 0.4);
  --suite-card-cta-border: rgba(255, 153, 207, 0.28);
  --suite-card-cta-active-background: linear-gradient(90deg, #ff5d9f 0%, #9f62ff 100%);
  --suite-card-cta-active-background-hover: linear-gradient(90deg, #ff7db2 0%, #b182ff 100%);
  --suite-card-cta-active-glow-color: rgba(255, 177, 218, 0.98);
  --suite-card-cta-active-shadow: 0 20px 42px rgba(122, 44, 118, 0.36);
  --suite-card-cta-active-shadow-hover: 0 24px 48px rgba(122, 44, 118, 0.44);
  --suite-card-cta-active-border: rgba(255, 189, 221, 0.42);
  --suite-card-cta-suffix-border: rgba(255, 204, 229, 0.26);
  --suite-card-cta-suffix-background:
    linear-gradient(180deg, rgba(255, 224, 239, 0.22) 0%, rgba(255, 118, 179, 0.12) 100%);
  --suite-card-cta-suffix-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 20px rgba(255, 136, 193, 0.3);
}

.suite-home-card-grid > :nth-child(2) .suite-home-card,
.suite-home-card[data-suite-id="life"],
.suite-home-card[data-suite-id="life-admin"],
.suite-home-card[data-suite-card="life"],
.suite-home-card[data-suite-card="life-admin"],
.suite-home-card.is-life,
.suite-home-card.is-life-admin,
.suite-home-card.suite-home-card-life,
.suite-home-card.suite-home-card-life-admin,
.suite-home-card-cell[data-suite-id="life"] .suite-home-card,
.suite-home-card-cell[data-suite-id="life-admin"] .suite-home-card,
.suite-home-card-cell[data-suite-card="life"] .suite-home-card,
.suite-home-card-cell[data-suite-card="life-admin"] .suite-home-card,
.suite-home-card-cell.is-life .suite-home-card,
.suite-home-card-cell.is-life-admin .suite-home-card {
  --suite-card-border: rgba(136, 176, 238, 0.2);
  --suite-card-border-hover: rgba(149, 206, 255, 0.34);
  --suite-card-border-active: rgba(132, 196, 255, 0.72);
  --suite-card-surface-top: rgba(13, 23, 55, 0.94);
  --suite-card-surface-bottom: rgba(7, 13, 31, 0.96);
  --suite-card-surface-glow: rgba(60, 129, 255, 0.22);
  --suite-card-overlay-top: rgba(62, 134, 255, 0.2);
  --suite-card-overlay-bottom: rgba(34, 84, 203, 0.12);
  --suite-card-active-top: rgba(14, 32, 82, 0.96);
  --suite-card-active-bottom: rgba(8, 18, 48, 0.98);
  --suite-card-active-glow: rgba(96, 176, 255, 0.28);
  --suite-card-halo: rgba(59, 118, 255, 0.12);
  --suite-card-halo-active: rgba(63, 132, 255, 0.24);
  --suite-card-icon-border: rgba(123, 190, 255, 0.42);
  --suite-card-icon-core: rgba(56, 204, 255, 0.16);
  --suite-card-icon-base: rgba(8, 17, 42, 0.9);
  --suite-card-icon-halo: rgba(50, 148, 255, 0.12);
  --suite-card-icon-active-border: rgba(153, 213, 255, 0.9);
  --suite-card-icon-active-halo: rgba(78, 152, 255, 0.28);
  --suite-card-glyph-shadow: rgba(76, 168, 255, 0.26);
  --suite-card-status-border: rgba(111, 213, 220, 0.26);
  --suite-card-status-background: rgba(63, 125, 148, 0.18);
  --suite-card-status-glow: rgba(92, 207, 255, 0.12);
  --suite-card-status-dot: #59f0d5;
  --suite-card-status-dot-glow: rgba(89, 240, 213, 0.86);
  --suite-card-cta-background: linear-gradient(180deg, rgba(29, 43, 91, 0.96) 0%, rgba(15, 22, 54, 0.98) 100%);
  --suite-card-cta-background-hover: linear-gradient(180deg, rgba(38, 58, 120, 0.98) 0%, rgba(19, 32, 72, 1) 100%);
  --suite-card-cta-glow-color: rgba(128, 186, 255, 0.52);
  --suite-card-cta-shadow: 0 14px 28px rgba(5, 12, 34, 0.28);
  --suite-card-cta-shadow-hover: 0 18px 34px rgba(5, 12, 34, 0.34);
  --suite-card-cta-border: rgba(101, 146, 227, 0.22);
  --suite-card-cta-active-background: linear-gradient(90deg, #1ea8ff 0%, #2b70ff 100%);
  --suite-card-cta-active-background-hover: linear-gradient(90deg, #46bbff 0%, #4784ff 100%);
  --suite-card-cta-active-glow-color: rgba(128, 214, 255, 0.98);
  --suite-card-cta-active-shadow: 0 20px 42px rgba(26, 92, 255, 0.34);
  --suite-card-cta-active-shadow-hover: 0 24px 48px rgba(26, 92, 255, 0.42);
  --suite-card-cta-active-border: rgba(151, 212, 255, 0.38);
}

.suite-home-card-grid > :nth-child(3) .suite-home-card,
.suite-home-card[data-suite-id="recovery"],
.suite-home-card[data-suite-card="recovery"],
.suite-home-card.is-recovery,
.suite-home-card.suite-home-card-recovery,
.suite-home-card-cell[data-suite-id="recovery"] .suite-home-card,
.suite-home-card-cell[data-suite-card="recovery"] .suite-home-card,
.suite-home-card-cell.is-recovery .suite-home-card {
  --suite-card-border: rgba(130, 218, 204, 0.24);
  --suite-card-border-hover: rgba(164, 236, 224, 0.42);
  --suite-card-border-active: rgba(171, 243, 232, 0.74);
  --suite-card-surface-top: rgba(10, 30, 42, 0.94);
  --suite-card-surface-bottom: rgba(6, 16, 25, 0.97);
  --suite-card-surface-glow: rgba(72, 210, 177, 0.22);
  --suite-card-overlay-top: rgba(83, 220, 194, 0.22);
  --suite-card-overlay-bottom: rgba(35, 128, 148, 0.12);
  --suite-card-active-top: rgba(12, 41, 56, 0.96);
  --suite-card-active-bottom: rgba(8, 22, 33, 0.98);
  --suite-card-active-glow: rgba(100, 229, 200, 0.3);
  --suite-card-halo: rgba(84, 216, 184, 0.14);
  --suite-card-halo-active: rgba(108, 232, 206, 0.24);
  --suite-card-icon-border: rgba(151, 239, 226, 0.42);
  --suite-card-icon-core: rgba(90, 224, 197, 0.2);
  --suite-card-icon-base: rgba(7, 23, 31, 0.92);
  --suite-card-icon-halo: rgba(95, 223, 200, 0.14);
  --suite-card-icon-active-border: rgba(185, 247, 236, 0.88);
  --suite-card-icon-active-halo: rgba(118, 235, 214, 0.28);
  --suite-card-glyph-shadow: rgba(114, 229, 214, 0.26);
  --suite-card-status-border: rgba(154, 238, 218, 0.3);
  --suite-card-status-background: rgba(28, 99, 95, 0.24);
  --suite-card-status-glow: rgba(109, 236, 213, 0.16);
  --suite-card-status-dot: #77f1cf;
  --suite-card-status-dot-glow: rgba(119, 241, 207, 0.84);
  --suite-card-cta-background: linear-gradient(180deg, rgba(19, 64, 70, 0.96) 0%, rgba(10, 38, 44, 0.98) 100%);
  --suite-card-cta-background-hover: linear-gradient(180deg, rgba(26, 82, 89, 0.98) 0%, rgba(12, 48, 56, 1) 100%);
  --suite-card-cta-glow-color: rgba(130, 236, 214, 0.56);
  --suite-card-cta-shadow: 0 14px 28px rgba(4, 19, 22, 0.3);
  --suite-card-cta-shadow-hover: 0 18px 34px rgba(4, 19, 22, 0.36);
  --suite-card-cta-border: rgba(133, 224, 208, 0.26);
  --suite-card-cta-active-background: linear-gradient(90deg, #2fc9a5 0%, #1d8ed8 100%);
  --suite-card-cta-active-background-hover: linear-gradient(90deg, #56dfbb 0%, #40a6ec 100%);
  --suite-card-cta-active-glow-color: rgba(168, 247, 232, 0.98);
  --suite-card-cta-active-shadow: 0 20px 42px rgba(18, 108, 120, 0.32);
  --suite-card-cta-active-shadow-hover: 0 24px 48px rgba(18, 108, 120, 0.4);
  --suite-card-cta-active-border: rgba(174, 243, 233, 0.4);
  --suite-card-cta-suffix-border: rgba(177, 241, 229, 0.28);
  --suite-card-cta-suffix-background:
    linear-gradient(180deg, rgba(222, 255, 249, 0.18) 0%, rgba(80, 220, 194, 0.12) 100%);
  --suite-card-cta-suffix-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 20px rgba(109, 236, 213, 0.28);
}

.suite-home-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(72px, 7vw, 92px);
}

.suite-home-card-icon {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 70px;
  block-size: 70px;
  border-radius: 50%;
  border: 1px solid var(--suite-card-icon-border);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.14), transparent 28%),
    radial-gradient(circle at 50% 40%, var(--suite-card-icon-core), var(--suite-card-icon-base) 64%);
  box-shadow: var(--suite-card-icon-shadow);
}

.suite-home-card.is-active .suite-home-card-icon {
  inline-size: 94px;
  block-size: 94px;
  border-color: var(--suite-card-icon-active-border);
  box-shadow: var(--suite-card-icon-active-shadow);
}

.suite-card-glyph {
  filter: drop-shadow(0 0 20px var(--suite-card-glyph-shadow));
  opacity: 0.96;
  transition: transform var(--beta-transition-base), filter var(--beta-transition-base);
}

.suite-home-card.is-active .suite-card-glyph {
  transform: scale(1.16);
}

.suite-home-card-status {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.74rem;
  border-radius: var(--beta-radius-pill);
  border: 1px solid var(--suite-card-status-border);
  background: var(--suite-card-status-background);
  color: rgba(230, 248, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.12em;
}

.suite-home-card-status.is-active {
  box-shadow: 0 0 18px var(--suite-card-status-glow);
}

.suite-home-card-status.is-active::before {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--suite-card-status-dot);
  box-shadow: 0 0 12px var(--suite-card-status-dot-glow);
  content: "";
}

.suite-home-card-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(245, 249, 255, 0.98);
  font-size: clamp(1.22rem, 1.45vw, 1.54rem);
  font-weight: 540;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.suite-home-card-tagline {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 18rem;
  color: rgba(214, 227, 247, 0.7);
  font-size: 0.96rem;
  font-weight: 420;
  line-height: 1.5;
}

.suite-home-card.is-active .suite-home-card-title {
  font-size: clamp(1.5rem, 1.9vw, 1.82rem);
}

.suite-home-card.is-active .suite-home-card-tagline {
  max-width: 16rem;
  font-size: 1rem;
}

.suite-home-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: center;
  margin-top: auto;
  padding-top: 0.4rem;
}

.suite-home-card-cta {
  --btn-beta-height: 46px;
  --btn-beta-padding-inline: 1.5rem;
  --btn-beta-font-size: 0.98rem;
  --btn-beta-background: var(--suite-card-cta-background);
  --btn-beta-background-hover: var(--suite-card-cta-background-hover);
  --btn-beta-glow-color: var(--suite-card-cta-glow-color);
  --btn-beta-glow-opacity: var(--suite-card-cta-glow-opacity);
  --btn-beta-glow-opacity-hover: var(--suite-card-cta-glow-opacity-hover);
  --btn-beta-shadow: var(--suite-card-cta-shadow);
  --btn-beta-shadow-hover: var(--suite-card-cta-shadow-hover);

  width: min(100%, 250px);
  border: 1px solid var(--suite-card-cta-border);
  box-shadow: var(--btn-beta-shadow);
}

.suite-home-card.is-active .suite-home-card-cta {
  --btn-beta-height: 50px;
  --btn-beta-padding-inline: 1.8rem;
  --btn-beta-background: var(--suite-card-cta-active-background);
  --btn-beta-background-hover: var(--suite-card-cta-active-background-hover);
  --btn-beta-glow-color: var(--suite-card-cta-active-glow-color);
  --btn-beta-glow-opacity: var(--suite-card-cta-active-glow-opacity);
  --btn-beta-glow-opacity-hover: var(--suite-card-cta-active-glow-opacity-hover);
  --btn-beta-shadow: var(--suite-card-cta-active-shadow);
  --btn-beta-shadow-hover: var(--suite-card-cta-active-shadow-hover);

  width: min(100%, 284px);
  border-color: var(--suite-card-cta-active-border);
}

.suite-home-card-cta .btn-beta-label,
.suite-home-card-cta .btn-beta-suffix {
  font-weight: 700;
}

.suite-home-card-cta .btn-beta-label {
  letter-spacing: -0.01em;
}

.suite-home-card-cta .btn-beta-suffix {
  flex: 0 0 auto;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  margin-inline-start: 0.16rem;
  border: 1px solid var(--suite-card-cta-suffix-border);
  border-radius: 999px;
  background: var(--suite-card-cta-suffix-background);
  box-shadow: var(--suite-card-cta-suffix-shadow);
  color: var(--suite-card-cta-suffix-color);
  overflow: hidden;
  transition:
    transform var(--beta-transition-base),
    box-shadow var(--beta-transition-base),
    border-color var(--beta-transition-base),
    background var(--beta-transition-base);
}

.suite-home-card-cta .btn-beta-suffix > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  min-height: 1em;
  line-height: 1;
  transform: translateX(0);
  transition: transform var(--beta-transition-base), opacity var(--beta-transition-base);
}

.suite-home-card-cta .btn-beta-suffix :is(svg, i) {
  inline-size: 0.94rem;
  block-size: 0.94rem;
}

.suite-home-card-cta-arrow {
  font-size: 0.86em;
  letter-spacing: -0.08em;
}

.suite-home-card-cta:hover .btn-beta-suffix,
.suite-home-card-cta:focus-visible .btn-beta-suffix {
  box-shadow: var(--suite-card-cta-suffix-shadow-hover);
  transform: translateX(2px);
}

.suite-home-card-cta:hover .btn-beta-suffix > *,
.suite-home-card-cta:focus-visible .btn-beta-suffix > * {
  transform: translateX(var(--suite-card-cta-suffix-shift));
}

.suite-home-scroll-hint {
  display: none;
}

@media (max-width: 1100px) {
  .suite-home-card-grid {
    grid-template-columns: minmax(220px, 0.84fr) minmax(300px, 1.08fr) minmax(220px, 0.84fr);
    gap: 20px;
  }

  .suite-home-card.is-active {
    transform: translateY(-12px);
  }
}

@media (max-width: 900px) {
  .suite-home-page-root {
    min-height: calc(100svh - 104px);
  }

  .suite-homepage {
    min-height: calc(100svh - 104px);
    padding-top: 18px;
  }

  .suite-home-card-grid {
    grid-template-columns: 1fr;
    width: min(560px, 100%);
  }

  .suite-home-card-cell,
  .suite-home-card-cell.is-side {
    padding-bottom: 0;
  }

  .suite-home-card.is-active,
  .suite-home-card:hover,
  .suite-home-card:focus-visible {
    transform: none;
  }

  .suite-home-orbits {
    opacity: 0.55;
  }
}

@media (max-width: 720px) {
  .live-presence-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .live-presence-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--beta-space-3);
  }

  .live-presence-action {
    justify-content: center;
    width: 100%;
  }

  .overview-notification-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .overview-notification-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--beta-space-3);
  }

  .overview-notification-actions {
    flex-direction: column;
    width: 100%;
  }

  .overview-notification-action,
  .overview-notification-dismiss {
    justify-content: center;
    width: 100%;
  }

  .suite-home-card-grid {
    grid-template-columns: 1fr;
    width: min(560px, 100%);
  }

  .suite-home-globe {
    width: 197vw;
    height: 60vh;
  }

  .suite-home-horizon {
    display: none;
  }
}

@media (max-width: 640px) {
  .suite-homepage {
    min-height: unset;
  }

  .suite-home-title {
    font-size: clamp(2.2rem, 7.6vw, 3rem);
  }

  .suite-home-subtitle {
    font-size: 1rem;
  }

  .suite-home-card-icon {
    inline-size: 84px;
    block-size: 84px;
  }

  .suite-home-card.is-active .suite-home-card-icon {
    inline-size: 108px;
    block-size: 108px;
  }

  .suite-home-stars,
  .suite-home-orbits {
    opacity: 0.8;
  }

  .suite-home-globe {
    width: 216vw;
    height: 55vh;
  }
}

@media (max-width: 479.98px) {
  .homepage :is(.noctra-suite-cards, .suite-cards, [data-suite-cards]) {
    --suite-cards-gap: 12px;
  }
}

@media (max-width: 1180px) {
  .hero-top-composition .suite-switcher-row {
    display: none !important;
    margin: 0 !important;
  }
}

/* Keep event artwork usable when the overview card no longer has desktop space. */
@media (max-width: 1024px) {
  .overview-live-event-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-live-event-banner {
    width: 100%;
    min-width: 0;
    min-height: clamp(220px, 52vw, 420px);
    aspect-ratio: 16 / 9;
    justify-self: stretch;
  }

  .overview-live-event-meta {
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .overview-live-event-card {
    gap: var(--beta-space-4);
    padding: var(--beta-space-4);
  }

  .overview-live-event-banner {
    min-height: 210px;
  }
}

body.day-night-intro-open {
  overflow: hidden;
}

.day-night-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  color: #f7f4ea;
  background:
    linear-gradient(120deg, rgba(9, 12, 14, 0.96), rgba(21, 27, 30, 0.9) 48%, rgba(18, 24, 28, 0.98)),
    #0b0d0f;
  isolation: isolate;
}

.day-night-intro-day {
  color: #16201d;
  background:
    linear-gradient(130deg, rgba(250, 248, 239, 0.98), rgba(224, 242, 236, 0.94) 42%, rgba(250, 218, 174, 0.9)),
    #f6f1e5;
}

.day-night-intro-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.2));
}

.day-night-intro-day .day-night-intro-noise {
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(22, 32, 29, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 32, 29, 0.06) 1px, transparent 1px);
}

.day-night-intro-shell {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 28px;
  width: min(100%, 1500px);
  height: 100dvh;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 72px);
  overflow: auto;
}

.day-night-intro-header,
.day-night-intro-footer,
.day-night-intro-grid,
.day-night-intro-body,
.day-night-intro-task-list li {
  display: grid;
}

.day-night-intro-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
}

.day-night-intro-kicker {
  margin: 0 0 8px;
  color: rgba(247, 244, 234, 0.64);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.day-night-intro-day .day-night-intro-kicker {
  color: rgba(22, 32, 29, 0.62);
}

.day-night-intro h1 {
  margin: 0;
  max-width: 11ch;
  color: currentColor;
  font-size: 8rem;
  line-height: 0.88;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

.day-night-intro-close,
.day-night-intro-enter,
.day-night-intro-audio {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(247, 244, 234, 0.28);
  border-radius: 8px;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

.day-night-intro-day .day-night-intro-close,
.day-night-intro-day .day-night-intro-enter,
.day-night-intro-day .day-night-intro-audio {
  border-color: rgba(22, 32, 29, 0.18);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 18px 48px rgba(65, 53, 32, 0.16);
}

.day-night-intro-close {
  width: 64px;
  height: 64px;
  font-size: 1.35rem;
}

.day-night-intro-close:hover,
.day-night-intro-close:focus-visible,
.day-night-intro-enter:hover,
.day-night-intro-enter:focus-visible,
.day-night-intro-audio:hover,
.day-night-intro-audio:focus-visible {
  border-color: rgba(132, 235, 214, 0.78);
  outline: none;
  transform: translateY(-1px);
}

.day-night-intro-day .day-night-intro-close:hover,
.day-night-intro-day .day-night-intro-close:focus-visible,
.day-night-intro-day .day-night-intro-enter:hover,
.day-night-intro-day .day-night-intro-enter:focus-visible,
.day-night-intro-day .day-night-intro-audio:hover,
.day-night-intro-day .day-night-intro-audio:focus-visible {
  border-color: rgba(32, 127, 104, 0.54);
}

.day-night-intro-focus {
  display: grid;
  gap: 4px;
  max-width: 980px;
}

.day-night-intro-focus p,
.day-night-intro-focus strong {
  margin: 0;
}

.day-night-intro-focus p {
  color: rgba(247, 244, 234, 0.58);
  font-size: 1.2rem;
  font-weight: 760;
}

.day-night-intro-day .day-night-intro-focus p {
  color: rgba(22, 32, 29, 0.58);
}

.day-night-intro-focus strong {
  color: #84ebd6;
  font-size: 3.8rem;
  line-height: 0.98;
  font-weight: 920;
  letter-spacing: 0;
}

.day-night-intro-day .day-night-intro-focus strong {
  color: #1e7f68;
}

.day-night-intro-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.day-night-intro-stat {
  display: grid;
  gap: 4px;
  min-height: 132px;
  align-content: center;
  padding: 22px;
  border: 1px solid rgba(247, 244, 234, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.day-night-intro-day .day-night-intro-stat {
  border-color: rgba(22, 32, 29, 0.12);
  background: rgba(255, 255, 255, 0.5);
}

.day-night-intro-stat span {
  font-size: 3.9rem;
  line-height: 0.9;
  font-weight: 940;
}

.day-night-intro-stat small {
  color: rgba(247, 244, 234, 0.58);
  font-size: 0.88rem;
  font-weight: 820;
  text-transform: uppercase;
}

.day-night-intro-day .day-night-intro-stat small {
  color: rgba(22, 32, 29, 0.56);
}

.day-night-intro-body {
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: 20px;
  min-height: 0;
}

.day-night-intro-next {
  display: grid;
  align-content: end;
  gap: 16px;
  min-height: 320px;
  padding: 28px;
  border: 1px solid rgba(247, 244, 234, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(132, 235, 214, 0.18), rgba(255, 255, 255, 0.04) 58%, rgba(255, 194, 121, 0.14)),
    rgba(255, 255, 255, 0.07);
}

.day-night-intro-day .day-night-intro-next {
  border-color: rgba(22, 32, 29, 0.13);
  background:
    linear-gradient(160deg, rgba(30, 127, 104, 0.14), rgba(255, 255, 255, 0.5) 54%, rgba(231, 144, 67, 0.2)),
    rgba(255, 255, 255, 0.48);
}

.day-night-intro-next span {
  color: #ffc279;
  font-size: 0.95rem;
  font-weight: 880;
}

.day-night-intro-day .day-night-intro-next span {
  color: #9b4f1b;
}

.day-night-intro-next strong {
  max-width: 12ch;
  font-size: 4.5rem;
  line-height: 0.92;
  font-weight: 940;
  letter-spacing: 0;
}

.day-night-intro-next em {
  color: rgba(247, 244, 234, 0.66);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 780;
}

.day-night-intro-day .day-night-intro-next em {
  color: rgba(22, 32, 29, 0.62);
}

.day-night-intro-task-list {
  display: grid;
  gap: 10px;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.day-night-intro-task-list li {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  min-height: 86px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(247, 244, 234, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.065);
}

.day-night-intro-day .day-night-intro-task-list li {
  border-color: rgba(22, 32, 29, 0.1);
  background: rgba(255, 255, 255, 0.46);
}

.day-night-intro-task-list li > span {
  color: rgba(132, 235, 214, 0.78);
  font-size: 1rem;
  font-weight: 900;
}

.day-night-intro-day .day-night-intro-task-list li > span {
  color: rgba(30, 127, 104, 0.78);
}

.day-night-intro-task-list strong {
  display: block;
  overflow-wrap: anywhere;
  color: currentColor;
  font-size: 1.45rem;
  line-height: 1.05;
  font-weight: 860;
}

.day-night-intro-task-list small {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: rgba(247, 244, 234, 0.55);
  font-size: 0.9rem;
  font-weight: 680;
}

.day-night-intro-day .day-night-intro-task-list small {
  color: rgba(22, 32, 29, 0.55);
}

.day-night-intro-footer {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.day-night-intro-footer > span {
  color: rgba(247, 244, 234, 0.58);
  font-size: 0.92rem;
  font-weight: 760;
}

.day-night-intro-day .day-night-intro-footer > span {
  color: rgba(22, 32, 29, 0.58);
}

.day-night-intro-enter,
.day-night-intro-audio {
  min-height: 48px;
  padding: 0 20px;
  font-size: 0.9rem;
  font-weight: 860;
}

.day-night-intro-audio {
  grid-auto-flow: column;
  gap: 9px;
  justify-self: start;
}

@media (max-width: 980px) {
  .day-night-intro-shell {
    gap: 22px;
    padding: 28px;
  }

  .day-night-intro h1 {
    font-size: 5.4rem;
  }

  .day-night-intro-focus strong {
    font-size: 2.8rem;
  }

  .day-night-intro-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .day-night-intro-next {
    min-height: 220px;
  }

  .day-night-intro-next strong {
    max-width: 18ch;
    font-size: 3rem;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  .day-night-intro-shell {
    gap: 10px;
    padding: 22px 42px;
  }

  .day-night-intro h1 {
    font-size: 5.35rem;
  }

  .day-night-intro-focus strong {
    font-size: 2.45rem;
  }

  .day-night-intro-grid {
    gap: 10px;
  }

  .day-night-intro-stat {
    min-height: 84px;
    padding: 16px 22px;
  }

  .day-night-intro-stat span {
    font-size: 2.65rem;
  }

  .day-night-intro-body {
    gap: 16px;
  }

  .day-night-intro-next {
    min-height: 220px;
    padding: 22px;
  }

  .day-night-intro-next strong {
    font-size: 2.7rem;
  }

  .day-night-intro-task-list {
    gap: 6px;
  }

  .day-night-intro-task-list li {
    grid-template-columns: 60px minmax(0, 1fr);
    min-height: 46px;
    padding: 6px 14px;
  }

  .day-night-intro-task-list strong {
    font-size: 0.98rem;
  }

  .day-night-intro-task-list small {
    margin-top: 2px;
    font-size: 0.72rem;
  }
}

@media (max-width: 640px) {
  .day-night-intro-shell {
    display: block;
    gap: 18px;
    padding: 20px;
  }

  .day-night-intro-header,
  .day-night-intro-focus,
  .day-night-intro-grid,
  .day-night-intro-body,
  .day-night-intro-footer {
    margin-bottom: 18px;
  }

  .day-night-intro-footer {
    margin-bottom: 0;
  }

  .day-night-intro h1 {
    font-size: 4rem;
  }

  .day-night-intro-close {
    width: 52px;
    height: 52px;
  }

  .day-night-intro-focus strong {
    font-size: 2.1rem;
  }

  .day-night-intro-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .day-night-intro-stat {
    min-height: 92px;
    padding: 12px;
  }

  .day-night-intro-stat span {
    font-size: 2.1rem;
  }

  .day-night-intro-stat small {
    font-size: 0.72rem;
  }

  .day-night-intro-next {
    min-height: 180px;
    padding: 20px;
  }

  .day-night-intro-next strong {
    font-size: 2.25rem;
  }

  .day-night-intro-task-list li {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    min-height: 78px;
    padding: 14px;
  }

  .day-night-intro-task-list strong {
    font-size: 1.12rem;
  }

  .day-night-intro-body {
    display: grid;
    gap: 18px;
  }

  .day-night-intro-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .day-night-intro-enter,
  .day-night-intro-audio {
    width: 100%;
  }
}

/* Rebuilt first-login presentation. */
.day-night-intro {
  place-items: stretch;
  overflow: hidden;
  color: #f7f8ff;
  background:
    radial-gradient(circle at 24% 18%, rgba(34, 110, 102, 0.14), transparent 28rem),
    radial-gradient(circle at 78% 72%, rgba(86, 49, 36, 0.16), transparent 30rem),
    linear-gradient(145deg, #03070b 0%, #08101b 48%, #040507 100%);
  font-family: Inter, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
}

.day-night-intro-day {
  color: #111827;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 19rem),
    linear-gradient(145deg, #f8fbff 0%, #d9f0ec 48%, #fff0d6 100%);
}

.day-night-intro-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.day-night-intro-backdrop::before,
.day-night-intro-backdrop::after {
  content: "";
  position: absolute;
  width: 40vmax;
  height: 40vmax;
  border-radius: 50%;
  filter: blur(26px);
  opacity: 0.18;
  animation: dayNightIntroDrift 46s ease-in-out infinite alternate;
}

.day-night-intro-backdrop::before {
  top: -18vmax;
  left: -12vmax;
  background: radial-gradient(circle, rgba(72, 204, 187, 0.24), rgba(72, 204, 187, 0));
}

.day-night-intro-backdrop::after {
  right: -16vmax;
  bottom: -20vmax;
  background: radial-gradient(circle, rgba(255, 165, 94, 0.18), rgba(255, 165, 94, 0));
  animation-delay: -6s;
}

.day-night-intro-ship-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.day-night-intro-ship {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  color: #f7f8ff;
  font-size: var(--intro-ship-size, 1.8rem);
  line-height: 1;
  opacity: 0;
  filter:
    drop-shadow(0 0 8px rgba(123, 237, 221, 0.42))
    drop-shadow(0 0 18px rgba(74, 173, 255, 0.22));
  transform:
    translate3d(var(--intro-ship-start-x, -14vw), var(--intro-ship-start-y, 38vh), 0)
    rotate(var(--intro-ship-rotate, 42deg))
    scale(0.82);
  will-change: transform, opacity;
  animation: dayNightIntroRocketFlight var(--intro-ship-duration, 4200ms) linear forwards;
}

.day-night-intro-day .day-night-intro-ship {
  filter:
    drop-shadow(0 0 7px rgba(31, 140, 115, 0.34))
    drop-shadow(0 0 16px rgba(69, 198, 255, 0.16));
}

.day-night-intro-shell {
  position: relative;
  z-index: 2;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.8vh, 18px);
  width: min(100%, 1220px);
  min-height: 100dvh;
  height: 100dvh;
  padding: clamp(16px, 3.2vw, 34px);
  overflow: hidden;
}

.day-night-intro-header,
.day-night-intro-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}

.day-night-intro-brand {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.day-night-intro-brand::before {
  content: "";
  display: none;
}

.day-night-intro-brand img {
  display: block;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  filter:
    drop-shadow(0 0 10px rgba(76, 219, 255, 0.46))
    drop-shadow(0 0 24px rgba(76, 219, 255, 0.22))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.24));
}

.day-night-intro-day .day-night-intro-brand {
  background: transparent;
  box-shadow: none;
}

.day-night-intro-close,
.day-night-intro-enter,
.day-night-intro-audio,
.day-night-intro-mute,
.day-night-intro-progress button,
.day-night-intro-jump-card {
  transition:
    transform 320ms ease,
    border-color 320ms ease,
    background-color 320ms ease,
    box-shadow 320ms ease;
}

.day-night-intro-close,
.day-night-intro-enter,
.day-night-intro-audio,
.day-night-intro-mute {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: currentColor;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.17);
  backdrop-filter: blur(20px);
}

.day-night-intro-day .day-night-intro-close,
.day-night-intro-day .day-night-intro-enter,
.day-night-intro-day .day-night-intro-audio,
.day-night-intro-day .day-night-intro-mute {
  border-color: rgba(17, 24, 39, 0.12);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 16px 42px rgba(68, 64, 60, 0.12);
}

.day-night-intro-close {
  width: 48px;
  height: 48px;
  font-size: 1.05rem;
}

.day-night-intro-mute {
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 0.95rem;
}

.day-night-intro-enter,
.day-night-intro-audio {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.88rem;
  font-weight: 780;
}

.day-night-intro-enter,
.day-night-intro-day .day-night-intro-enter {
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  background: linear-gradient(180deg, #3f8cff 0%, #236cff 100%);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(38, 119, 255, 0.28);
  backdrop-filter: none;
}

.day-night-intro-audio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.day-night-intro-close:hover,
.day-night-intro-close:focus-visible,
.day-night-intro-enter:hover,
.day-night-intro-enter:focus-visible,
.day-night-intro-audio:hover,
.day-night-intro-audio:focus-visible,
.day-night-intro-mute:hover,
.day-night-intro-mute:focus-visible,
.day-night-intro-jump-card:hover,
.day-night-intro-jump-card:focus-visible {
  border-color: rgba(119, 237, 214, 0.62);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.day-night-intro-enter:hover,
.day-night-intro-enter:focus-visible,
.day-night-intro-day .day-night-intro-enter:hover,
.day-night-intro-day .day-night-intro-enter:focus-visible {
  border: 0;
  background: linear-gradient(180deg, #5aa2ff 0%, #2f78ff 100%);
  color: #ffffff;
  box-shadow: 0 20px 42px rgba(69, 155, 255, 0.36);
}

.day-night-intro-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(10px, 2.2vh, 24px) 0;
  overflow: hidden;
}

.day-night-intro-scene {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(10px, 1.7vh, 18px);
  width: min(100%, 980px);
  min-height: 0;
  max-height: 100%;
  text-align: center;
  isolation: isolate;
  animation: dayNightIntroSceneIn 2200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.day-night-intro-eyebrow,
.day-night-intro-subline,
.day-night-intro-mix-label {
  margin: 0;
  color: rgba(247, 248, 255, 0.66);
  font-weight: 680;
}

.day-night-intro-day .day-night-intro-eyebrow,
.day-night-intro-day .day-night-intro-subline,
.day-night-intro-day .day-night-intro-mix-label {
  color: rgba(17, 24, 39, 0.62);
}

.day-night-intro-eyebrow {
  font-size: clamp(0.76rem, 1.4vw, 0.94rem);
  letter-spacing: 0;
}

.day-night-intro h2 {
  margin: 0;
  max-width: 11ch;
  color: currentColor;
  font-size: clamp(4rem, 11vw, 8.8rem);
  font-weight: 820;
  letter-spacing: 0;
  line-height: 0.95;
  text-wrap: balance;
}

.day-night-intro-scene-hello {
  width: min(100%, 1160px);
  align-content: center;
}

.day-night-intro-hello-composition {
  display: grid;
  grid-template-columns: minmax(58px, 0.18fr) minmax(0, auto) minmax(58px, 0.18fr);
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.6vw, 38px);
  width: min(100%, 1160px);
}

.day-night-intro-hello-copy {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.7vh, 18px);
  min-width: 0;
}

.day-night-intro-scene-hello h2 {
  max-width: 12ch;
  font-size: clamp(4rem, min(8.2vw, 14vh), 7.7rem);
}

.day-night-intro-scene-tasks h2,
.day-night-intro-scene-weather h2,
.day-night-intro-scene-jump h2 {
  max-width: 13ch;
  font-size: clamp(3rem, min(6.4vw, 9.4vh), 5.9rem);
}

.day-night-intro-subline {
  max-width: 36rem;
  font-size: clamp(1rem, 2.1vw, 1.36rem);
  line-height: 1.45;
}

.day-night-intro-scene-tasks {
  position: relative;
  align-content: start;
  width: min(100%, 820px);
}

.day-night-intro-scene-tasks::before,
.day-night-intro-scene-tasks::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.day-night-intro-scene-tasks::before {
  inset: 24% -8% 10%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 32% 48%, rgba(72, 204, 187, 0.08), transparent 46%),
    radial-gradient(ellipse at 72% 50%, rgba(42, 94, 151, 0.07), transparent 44%);
  filter: blur(30px);
  opacity: 0.34;
}

.day-night-intro-scene-tasks::after {
  display: none;
}

.day-night-intro-day .day-night-intro-scene-tasks::before {
  inset: 17% -14% 6%;
  background:
    radial-gradient(ellipse at 28% 42%, rgba(123, 237, 221, 0.24), transparent 48%),
    radial-gradient(ellipse at 72% 38%, rgba(64, 160, 255, 0.18), transparent 46%),
    linear-gradient(90deg, transparent 0 18%, rgba(123, 237, 221, 0.22) 48%, transparent 82%);
  filter: blur(22px);
  opacity: 0.72;
}

.day-night-intro-day .day-night-intro-scene-tasks::after {
  display: block;
  inset: 30% 4% auto;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(123, 237, 221, 0.04), rgba(123, 237, 221, 0.72), rgba(123, 237, 221, 0.04), transparent);
  box-shadow:
    0 28px 44px rgba(123, 237, 221, 0.24),
    0 92px 70px rgba(74, 173, 255, 0.14);
  opacity: 0.68;
  animation: dayNightIntroElectricSweep 4.8s ease-in-out infinite;
}

.day-night-intro-scene-tasks .day-night-intro-subline {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  line-height: 1.28;
}

.day-night-intro-float {
  position: absolute;
  z-index: -1;
  display: grid;
  place-items: center;
  width: clamp(76px, 12vw, 132px);
  height: clamp(76px, 12vw, 132px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.1);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(22px);
  opacity: 0.7;
  animation: dayNightIntroFloat 12s ease-in-out infinite;
}

.day-night-intro-float-one {
  top: 6%;
  left: -2%;
  rotate: -8deg;
}

.day-night-intro-float-two {
  right: -2%;
  bottom: 6%;
  rotate: 7deg;
  animation-delay: -1.8s;
}

.day-night-intro-scene-hello .day-night-intro-float {
  position: static;
  z-index: 0;
  width: clamp(56px, 7vw, 106px);
  height: clamp(56px, 7vw, 106px);
  border-radius: clamp(20px, 2.4vw, 30px);
  font-size: clamp(1.7rem, 3.5vw, 3.4rem);
  opacity: 0.72;
  pointer-events: none;
}

.day-night-intro-scene-hello .day-night-intro-float-one {
  justify-self: end;
}

.day-night-intro-scene-hello .day-night-intro-float-two {
  justify-self: start;
}

.day-night-intro-task-stack {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(100%, 760px);
  margin: clamp(6px, 1.4vh, 12px) 0 0;
  padding: 0;
  list-style: none;
}

.day-night-intro-task-stack.is-expanded {
  max-height: min(43vh, 430px);
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding-right: 14px;
  scrollbar-color: rgba(132, 235, 214, 0.66) rgba(255, 255, 255, 0.08);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.day-night-intro-task-stack.is-expanded::-webkit-scrollbar {
  width: 12px;
}

.day-night-intro-task-stack.is-expanded::-webkit-scrollbar-track {
  border: 4px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)) padding-box;
}

.day-night-intro-task-stack.is-expanded::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(132, 235, 214, 0.84), rgba(71, 174, 152, 0.58)) padding-box;
  box-shadow: 0 0 18px rgba(75, 218, 189, 0.22);
}

.day-night-intro-task-stack li,
.day-night-intro-hour,
.day-night-intro-jump-card {
  opacity: 0;
  transform: translateY(22px) scale(0.94);
  animation: dayNightIntroPlop 1800ms cubic-bezier(0.18, 1.04, 0.28, 1) forwards;
  animation-delay: var(--intro-item-delay, 0ms);
}

.day-night-intro-task-stack li {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  text-align: left;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(24px);
  overflow: hidden;
}

.day-night-intro-task-stack li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 50%, rgba(123, 237, 221, 0.12), transparent 30%);
  opacity: 0;
}

.day-night-intro-task-stack li.is-first-task {
  border-color: rgba(123, 237, 221, 0.28);
  background:
    linear-gradient(145deg, rgba(74, 169, 158, 0.1), rgba(255, 255, 255, 0.07) 42%, rgba(45, 86, 141, 0.08)),
    rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(123, 237, 221, 0.08),
    0 0 18px rgba(72, 204, 187, 0.12),
    0 24px 78px rgba(0, 0, 0, 0.16);
}

.day-night-intro-task-stack li.is-first-task::before {
  opacity: 1;
}

.day-night-intro-task-stack li.is-first-task::after {
  content: "First up";
  position: absolute;
  top: 8px;
  right: 12px;
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  padding: 0 10px;
  border: 1px solid rgba(123, 237, 221, 0.36);
  border-radius: 999px;
  background: rgba(10, 28, 40, 0.28);
  color: rgba(231, 255, 250, 0.86);
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(123, 237, 221, 0.2);
  backdrop-filter: blur(16px);
}

.day-night-intro-task-stack .day-night-intro-more-task-row {
  grid-template-columns: minmax(0, 1fr);
  min-height: 46px;
  padding: 0;
  overflow: hidden;
}

.day-night-intro-more-task-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.08);
  color: rgba(247, 248, 255, 0.82);
  font-size: 0.84rem;
  font-weight: 780;
  cursor: pointer;
}

.day-night-intro-day .day-night-intro-more-task-button {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.4)),
    rgba(255, 255, 255, 0.42);
  color: rgba(17, 24, 39, 0.72);
}

.day-night-intro-more-task-button:hover,
.day-night-intro-more-task-button:focus-visible {
  outline: none;
  color: currentColor;
  background:
    linear-gradient(145deg, rgba(132, 235, 214, 0.16), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.11);
}

.day-night-intro-more-task-button i {
  font-size: 0.75rem;
  opacity: 0.72;
}

.day-night-intro-task-stack.is-expanded .day-night-intro-more-task-row.is-expanded-control {
  position: sticky;
  bottom: 0;
  z-index: 2;
  backdrop-filter: blur(18px);
}

.day-night-intro-day .day-night-intro-task-stack li,
.day-night-intro-day .day-night-intro-hour,
.day-night-intro-day .day-night-intro-jump-card {
  border-color: rgba(17, 24, 39, 0.1);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 22px 70px rgba(68, 64, 60, 0.1);
}

.day-night-intro-day .day-night-intro-task-stack li.is-first-task {
  border-color: rgba(31, 140, 115, 0.36);
  background:
    linear-gradient(145deg, rgba(123, 237, 221, 0.26), rgba(255, 255, 255, 0.7) 46%, rgba(54, 143, 255, 0.16)),
    rgba(255, 255, 255, 0.64);
  box-shadow:
    0 0 0 1px rgba(31, 140, 115, 0.1),
    0 0 36px rgba(56, 187, 161, 0.22),
    0 24px 72px rgba(68, 64, 60, 0.12);
}

.day-night-intro-day .day-night-intro-task-stack li.is-first-task::after {
  border-color: rgba(31, 140, 115, 0.24);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(18, 101, 86, 0.78);
  box-shadow: 0 0 18px rgba(56, 187, 161, 0.14);
}

.day-night-intro-task-icon,
.day-night-intro-jump-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.12);
  color: #eff7ff;
  font-size: 0.98rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 14px 28px rgba(0, 0, 0, 0.13);
  overflow: hidden;
}

.day-night-intro-task-icon::before,
.day-night-intro-jump-icon::before {
  content: "";
  position: absolute;
  inset: -30%;
  opacity: 0.58;
  background: radial-gradient(circle, var(--intro-icon-glow, rgba(126, 230, 255, 0.62)), transparent 58%);
}

.day-night-intro-task-icon i,
.day-night-intro-jump-icon i {
  position: relative;
  z-index: 1;
  transform: scale(1.08);
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.24))
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.24));
}

.day-night-intro-task-icon.is-reading,
.day-night-intro-jump-icon.is-reading {
  --intro-icon-glow: rgba(105, 164, 255, 0.66);
  background:
    linear-gradient(145deg, rgba(125, 182, 255, 0.28), rgba(109, 128, 255, 0.1)),
    rgba(255, 255, 255, 0.12);
  color: #9fd2ff;
}

.day-night-intro-task-icon.is-gratitude,
.day-night-intro-jump-icon.is-gratitude {
  --intro-icon-glow: rgba(255, 118, 163, 0.62);
  background:
    linear-gradient(145deg, rgba(255, 137, 176, 0.28), rgba(255, 200, 126, 0.1)),
    rgba(255, 255, 255, 0.12);
  color: #ff9abb;
}

.day-night-intro-task-icon.is-journal,
.day-night-intro-jump-icon.is-journal {
  --intro-icon-glow: rgba(178, 143, 255, 0.62);
  background:
    linear-gradient(145deg, rgba(178, 143, 255, 0.28), rgba(93, 231, 255, 0.1)),
    rgba(255, 255, 255, 0.12);
  color: #c8b4ff;
}

.day-night-intro-task-icon.is-clear,
.day-night-intro-jump-icon.is-clear {
  --intro-icon-glow: rgba(87, 226, 184, 0.62);
  background:
    linear-gradient(145deg, rgba(90, 232, 194, 0.28), rgba(157, 255, 214, 0.1)),
    rgba(255, 255, 255, 0.12);
  color: #70edca;
}

.day-night-intro-task-icon.is-achievement,
.day-night-intro-jump-icon.is-achievement {
  --intro-icon-glow: rgba(255, 203, 91, 0.66);
  background:
    linear-gradient(145deg, rgba(255, 205, 96, 0.3), rgba(255, 135, 97, 0.1)),
    rgba(255, 255, 255, 0.12);
  color: #ffd36d;
}

.day-night-intro-task-icon.is-track,
.day-night-intro-jump-icon.is-track {
  --intro-icon-glow: rgba(120, 237, 214, 0.64);
  background:
    linear-gradient(145deg, rgba(120, 237, 214, 0.28), rgba(109, 160, 255, 0.1)),
    rgba(255, 255, 255, 0.12);
  color: #84ebd6;
}

.day-night-intro-task-icon.is-meeting,
.day-night-intro-jump-icon.is-meeting {
  --intro-icon-glow: rgba(142, 190, 255, 0.64);
  background:
    linear-gradient(145deg, rgba(142, 190, 255, 0.28), rgba(255, 255, 255, 0.1)),
    rgba(255, 255, 255, 0.12);
  color: #b8d7ff;
}

.day-night-intro-task-icon.is-home,
.day-night-intro-jump-icon.is-home {
  --intro-icon-glow: rgba(69, 198, 255, 0.68);
  background:
    linear-gradient(145deg, rgba(68, 197, 255, 0.3), rgba(101, 98, 255, 0.12)),
    rgba(255, 255, 255, 0.12);
  color: #78dcff;
}

.day-night-intro-day .day-night-intro-task-icon,
.day-night-intro-day .day-night-intro-jump-icon {
  background-color: rgba(255, 255, 255, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 14px 28px rgba(68, 64, 60, 0.1);
}

.day-night-intro-day .day-night-intro-task-icon::before,
.day-night-intro-day .day-night-intro-jump-icon::before {
  opacity: 0.36;
}

.day-night-intro-day .day-night-intro-task-icon i,
.day-night-intro-day .day-night-intro-jump-icon i {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42))
    drop-shadow(0 4px 7px rgba(17, 24, 39, 0.18));
}

.day-night-intro-day .day-night-intro-task-icon.is-reading,
.day-night-intro-day .day-night-intro-jump-icon.is-reading {
  color: #3c82d8;
}

.day-night-intro-day .day-night-intro-task-icon.is-gratitude,
.day-night-intro-day .day-night-intro-jump-icon.is-gratitude {
  color: #e84d86;
}

.day-night-intro-day .day-night-intro-task-icon.is-journal,
.day-night-intro-day .day-night-intro-jump-icon.is-journal {
  color: #8759d8;
}

.day-night-intro-day .day-night-intro-task-icon.is-clear,
.day-night-intro-day .day-night-intro-jump-icon.is-clear {
  color: #0b9f7f;
}

.day-night-intro-day .day-night-intro-task-icon.is-achievement,
.day-night-intro-day .day-night-intro-jump-icon.is-achievement {
  color: #c88705;
}

.day-night-intro-day .day-night-intro-task-icon.is-track,
.day-night-intro-day .day-night-intro-jump-icon.is-track {
  color: #138b77;
}

.day-night-intro-day .day-night-intro-task-icon.is-meeting,
.day-night-intro-day .day-night-intro-jump-icon.is-meeting {
  color: #4d78c8;
}

.day-night-intro-day .day-night-intro-task-icon.is-home,
.day-night-intro-day .day-night-intro-jump-icon.is-home {
  color: #1284b3;
}

.day-night-intro-task-stack strong,
.day-night-intro-jump-card strong {
  display: block;
  overflow-wrap: anywhere;
  color: currentColor;
  font-size: clamp(0.94rem, 1.8vw, 1.08rem);
  font-weight: 780;
  line-height: 1.15;
}

.day-night-intro-task-stack small,
.day-night-intro-jump-card small,
.day-night-intro-hour small {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: rgba(247, 248, 255, 0.58);
  font-size: 0.76rem;
  font-weight: 620;
  line-height: 1.3;
}

.day-night-intro-day .day-night-intro-task-stack small,
.day-night-intro-day .day-night-intro-jump-card small,
.day-night-intro-day .day-night-intro-hour small {
  color: rgba(17, 24, 39, 0.56);
}

.day-night-intro-forecast {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 16px);
  width: min(100%, 980px);
  margin-top: clamp(12px, 2vh, 22px);
}

.day-night-intro-hour {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: clamp(168px, 19vh, 204px);
  padding: clamp(18px, 2.3vh, 24px) 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px);
}

.day-night-intro-hour span {
  color: rgba(247, 248, 255, 0.66);
  font-size: 0.82rem;
  font-weight: 720;
}

.day-night-intro-day .day-night-intro-hour span {
  color: rgba(17, 24, 39, 0.58);
}

.day-night-intro-hour strong {
  font-size: 2.15rem;
  line-height: 1;
}

.day-night-intro-hour b {
  color: currentColor;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1;
}

.day-night-intro-jump-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  width: min(100%, 1040px);
  margin-top: clamp(12px, 2vh, 22px);
}

.day-night-intro-jump-card {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 10px;
  min-height: clamp(190px, 22vh, 232px);
  padding: clamp(18px, 2.2vh, 24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.12);
  color: currentColor;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(24px);
}

.day-night-intro-jump-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 20px;
}

.day-night-intro-footer-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.day-night-intro-progress {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vh, 38px);
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.day-night-intro-progress button {
  width: 34px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.day-night-intro-day .day-night-intro-progress button {
  background: rgba(17, 24, 39, 0.18);
}

.day-night-intro-progress button.is-active {
  width: 58px;
  background: #7beddd;
}

.day-night-intro-day .day-night-intro-progress button.is-active {
  background: #1f8c73;
}

@keyframes dayNightIntroSceneIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    filter: blur(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes dayNightIntroPlop {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
  }

  70% {
    opacity: 1;
    transform: translateY(-3px) scale(1.018);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dayNightIntroFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

@keyframes dayNightIntroBadgeGlow {
  from {
    opacity: 0.58;
    transform: scale(0.96);
  }

  to {
    opacity: 0.96;
    transform: scale(1.08);
  }
}

@keyframes dayNightIntroDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(6vw, 4vh, 0) scale(1.08);
  }
}

@keyframes dayNightIntroRocketFlight {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--intro-ship-start-x, -14vw), var(--intro-ship-start-y, 38vh), 0)
      rotate(var(--intro-ship-rotate, 42deg))
      scale(0.84);
  }

  10% {
    opacity: var(--intro-ship-opacity, 0.74);
  }

  78% {
    opacity: var(--intro-ship-opacity, 0.74);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--intro-ship-end-x, 114vw), var(--intro-ship-end-y, 68vh), 0)
      rotate(var(--intro-ship-rotate, 42deg))
      scale(1);
  }
}

@keyframes dayNightIntroElectricSweep {
  0%,
  100% {
    opacity: 0.34;
    transform: translateX(-8%) scaleX(0.82);
  }

  42% {
    opacity: 0.82;
    transform: translateX(0) scaleX(1);
  }

  62% {
    opacity: 0.54;
    transform: translateX(8%) scaleX(0.92);
  }
}

@media (max-width: 900px) {
  .day-night-intro-shell {
    padding: 18px;
  }

  .day-night-intro-scene {
    min-height: 0;
  }

  .day-night-intro-forecast {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .day-night-intro-hour {
    min-height: 132px;
  }

  .day-night-intro-jump-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-height: 920px) {
  .day-night-intro-shell {
    gap: 6px;
    padding: 12px clamp(16px, 3vw, 28px);
  }

  .day-night-intro-header,
  .day-night-intro-footer {
    min-height: 46px;
  }

  .day-night-intro-brand {
    width: 58px;
    height: 58px;
  }

  .day-night-intro-brand img {
    width: 41px;
    height: 41px;
  }

  .day-night-intro-close,
  .day-night-intro-mute {
    width: 42px;
    height: 42px;
  }

  .day-night-intro-stage {
    place-items: center;
    padding-block: clamp(4px, 1.2vh, 12px) clamp(8px, 2vh, 18px);
  }

  .day-night-intro-stage:has(.day-night-intro-scene-hello) {
    align-items: center;
    padding-block: 0;
  }

  .day-night-intro-scene {
    align-content: center;
    gap: clamp(8px, 1.35vh, 14px);
    width: min(100%, 980px);
    padding-top: 0;
  }

  .day-night-intro-scene-hello {
    align-content: center;
    width: min(100%, 1080px);
    padding-top: 0;
  }

  .day-night-intro-hello-composition {
    grid-template-columns: minmax(52px, 0.14fr) minmax(0, auto) minmax(52px, 0.14fr);
    gap: clamp(10px, 2vw, 24px);
  }

  .day-night-intro-hello-copy {
    gap: 8px;
  }

  .day-night-intro-scene-hello h2 {
    max-width: 12ch;
    font-size: clamp(3.8rem, min(7.4vw, 13.5vh), 6.6rem);
    line-height: 0.94;
  }

  .day-night-intro-scene-hello .day-night-intro-float {
    width: clamp(52px, 6vw, 76px);
    height: clamp(52px, 6vw, 76px);
    border-radius: 20px;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
  }

  .day-night-intro-eyebrow {
    font-size: 0.78rem;
  }

  .day-night-intro-subline {
    font-size: 0.98rem;
    line-height: 1.25;
  }

  .day-night-intro-scene-tasks h2,
  .day-night-intro-scene-weather h2,
  .day-night-intro-scene-jump h2 {
    font-size: clamp(2.7rem, min(5.8vw, 8.8vh), 5.25rem);
    line-height: 0.95;
  }

  .day-night-intro-task-stack {
    gap: 8px;
    width: min(100%, 700px);
    margin-top: 6px;
  }

  .day-night-intro-task-stack li {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 54px;
    gap: 10px;
    padding: 7px 11px;
    border-radius: 17px;
  }

  .day-night-intro-task-icon {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    font-size: 0.82rem;
  }

  .day-night-intro-task-stack strong {
    font-size: 0.95rem;
  }

  .day-night-intro-task-stack small {
    margin-top: 2px;
    font-size: 0.72rem;
  }

  .day-night-intro-task-stack .day-night-intro-more-task-row,
  .day-night-intro-more-task-button {
    min-height: 38px;
  }

  .day-night-intro-progress {
    bottom: 26px;
  }
}

@media (max-height: 680px) {
  .day-night-intro-scene-tasks h2,
  .day-night-intro-scene-weather h2,
  .day-night-intro-scene-jump h2 {
    font-size: clamp(2rem, min(5vw, 7.8vh), 4rem);
  }

  .day-night-intro-subline {
    display: none;
  }

  .day-night-intro-task-stack {
    gap: 7px;
  }

  .day-night-intro-task-stack li {
    min-height: 52px;
    padding: 7px 10px;
  }
}

@media (max-width: 620px) {
  .day-night-intro-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100dvh;
    gap: 8px;
    padding: 12px;
  }

  .day-night-intro-header,
  .day-night-intro-footer {
    min-height: 48px;
  }

  .day-night-intro-stage {
    padding: 0 0 58px;
    overflow: hidden;
  }

  .day-night-intro-scene {
    gap: 12px;
    padding: 10px 0;
  }

  .day-night-intro h2,
  .day-night-intro-scene-tasks h2,
  .day-night-intro-scene-weather h2,
  .day-night-intro-scene-jump h2 {
    max-width: 12ch;
    font-size: clamp(3rem, 16vw, 4.5rem);
  }

  .day-night-intro-float {
    opacity: 0.8;
    width: 72px;
    height: 72px;
    border-radius: 24px;
    font-size: 2.2rem;
  }

  .day-night-intro-float-one {
    top: 5%;
    left: 0;
  }

  .day-night-intro-float-two {
    right: 0;
    bottom: 8%;
  }

  .day-night-intro-task-stack {
    gap: 9px;
  }

  .day-night-intro-task-stack li {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 68px;
    padding: 10px 12px;
    border-radius: 20px;
  }

  .day-night-intro-task-icon {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    font-size: 0.95rem;
  }

  .day-night-intro-forecast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 8px;
  }

  .day-night-intro-hour {
    min-height: 118px;
    border-radius: 22px;
    padding: 12px 10px;
  }

  .day-night-intro-jump-grid {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 8px;
  }

  .day-night-intro-jump-card {
    min-height: 104px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    border-radius: 22px;
    padding: 12px;
  }

  .day-night-intro-jump-card small {
    grid-column: 2;
  }

  .day-night-intro-footer {
    align-items: center;
    flex-direction: row;
    gap: 10px;
  }

  .day-night-intro-footer-actions {
    justify-content: center;
  }

  .day-night-intro-progress {
    bottom: 24px;
  }

  .day-night-intro-enter,
  .day-night-intro-audio {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .day-night-intro-backdrop::before,
  .day-night-intro-backdrop::after,
  .day-night-intro-brand::before,
  .day-night-intro-float,
  .day-night-intro-ship,
  .day-night-intro-scene,
  .day-night-intro-scene-tasks::after,
  .day-night-intro-task-stack li,
  .day-night-intro-task-stack li.is-first-task::before,
  .day-night-intro-hour,
  .day-night-intro-jump-card {
    animation: none;
  }

  .day-night-intro-task-stack li,
  .day-night-intro-hour,
  .day-night-intro-jump-card {
    opacity: 1;
    transform: none;
  }

  .day-night-intro-ship-field {
    display: none;
  }
}

main.homepage-tileboard-root {
  padding: 0;
}

.homepage-tileboard-root .tileboard-heading-actions {
  flex-wrap: wrap;
}

/* Profile settings tileboard view */
.homepage-tileboard-root .user-settings-page--tileboard {
  --settings-tile-line: rgba(133, 231, 255, 0.34);
  --settings-tile-copy: rgba(238, 248, 255, 0.82);
  min-height: 0;
  padding: 0;
  color: #ffffff;
  font-family: "Noctra Tileboard Segoe", "Segoe UI", system-ui, sans-serif;
}

.homepage-tileboard-root .user-settings-page--tileboard .container-beta {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: none;
  padding: 0;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-heading {
  display: none;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-shell,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-content,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-view-main,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-view-side {
  gap: 8px;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-tabs-panel,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-panel,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-subpanel,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-preview-card,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-appearance-preview-card,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-stage-primary,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-stage-secondary,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-launch-card,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-toggle,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-inventory-row,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-device-card,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-device-empty {
  border: 1px solid var(--settings-tile-line);
  border-radius: 2px;
  background: rgba(7, 18, 40, 0.94);
  box-shadow: none;
  backdrop-filter: none;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-tabs-panel {
  position: static;
  padding: 0;
  overflow: hidden;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-button {
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
  min-height: 132px;
  padding: 18px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: linear-gradient(160deg, rgba(24, 136, 216, 0.9), rgba(10, 83, 160, 0.98));
  box-shadow: none;
  transform: none;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-button:nth-child(2) {
  background: linear-gradient(160deg, rgba(105, 50, 189, 0.9), rgba(76, 36, 152, 0.98));
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-button:nth-child(3) {
  background: linear-gradient(160deg, rgba(195, 106, 0, 0.9), rgba(134, 70, 0, 0.98));
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-button:nth-child(4) {
  border-right-width: 0;
  background: linear-gradient(160deg, rgba(39, 133, 31, 0.9), rgba(27, 93, 21, 0.98));
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-button:hover,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-button:focus-visible,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-button.is-active {
  border-color: rgba(133, 231, 255, 0.52);
  box-shadow: inset 0 -5px 0 rgba(126, 233, 255, 0.92);
  transform: none;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-icon {
  width: 42px;
  height: 42px;
  border-radius: 2px;
  background: rgba(4, 12, 28, 0.36);
  color: #ffffff;
  font-size: 1.4rem;
  box-shadow: none;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-label,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-view-head h2,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-panel .dashboard-panel-head h2,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-panel .dashboard-panel-head h3,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-panel .dashboard-panel-head h4,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-preview-name,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-copy strong,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-row-copy strong,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-inventory-primary strong {
  color: #ffffff;
  font-weight: 400;
  letter-spacing: 0;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-description,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-view-head p,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-panel .dashboard-panel-head p:last-child,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-panel .dashboard-panel-head > p:not(.section-kicker),
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-copy p,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-row-copy span,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-inventory-primary span,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-inventory-meta span,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-security-note,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-preview-summary {
  color: var(--settings-tile-copy);
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-section-stage {
  display: grid;
  gap: 8px;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-view-grid-profile,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-view-grid-appearance,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-security-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 8px;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-panel {
  padding: 18px;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-view-head {
  padding: 18px;
  border: 1px solid var(--settings-tile-line);
  border-radius: 2px;
  background: linear-gradient(160deg, rgba(15, 150, 151, 0.9), rgba(7, 85, 94, 0.98));
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-view-head h2 {
  font-size: 2.35rem;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-form {
  gap: 8px;
}

.homepage-tileboard-root .user-settings-page--tileboard .beta-field,
.homepage-tileboard-root .user-settings-page--tileboard .beta-textarea,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-choice-trigger,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-choice-option,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-palette-swatch,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-upload-label,
.homepage-tileboard-root .user-settings-page--tileboard .btn-beta {
  border-radius: 2px;
  box-shadow: none;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-stage,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-builder-grid,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-toggle-grid,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-inventory-list,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-device-list {
  gap: 8px;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-stage-primary,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-stage-secondary,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-subpanel {
  padding: 16px;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-launch-card {
  overflow: hidden;
  padding: 0;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-launch-copy {
  padding: 16px;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-avatar-launch-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin: 0;
  border-top: 1px solid rgba(133, 231, 255, 0.38);
  background: linear-gradient(180deg, rgba(41, 174, 235, 0.76), rgba(12, 100, 166, 0.88));
  color: #ffffff;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-toggle {
  grid-template-columns: auto 1fr;
  min-height: 92px;
  padding: 16px;
  background: rgba(8, 21, 48, 0.88);
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-toggle input:checked + .user-settings-toggle-indicator {
  background: linear-gradient(180deg, #188bd2, #0d5c9f);
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-toggle-indicator,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-toggle-indicator::after {
  border-radius: 2px;
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-inventory-row,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-device-card {
  padding: 14px;
  background: rgba(8, 21, 48, 0.88);
}

.homepage-tileboard-root .user-settings-page--tileboard .user-settings-inline-badge,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-device-badge,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-status-chips span,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-recommendations span,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-preview-tags span,
.homepage-tileboard-root .user-settings-page--tileboard .user-settings-preview-meta span {
  border-radius: 2px;
  background: rgba(4, 12, 28, 0.48);
  color: #ffffff;
}

@media (max-width: 980px) {
  .homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav,
  .homepage-tileboard-root .user-settings-page--tileboard .user-settings-view-grid-profile,
  .homepage-tileboard-root .user-settings-page--tileboard .user-settings-view-grid-appearance,
  .homepage-tileboard-root .user-settings-page--tileboard .user-settings-security-layout {
    grid-template-columns: 1fr;
  }

  .homepage-tileboard-root .user-settings-page--tileboard .user-settings-nav-button {
    min-height: 96px;
    border-width: 0 0 1px;
  }
}
/* src/styles/login.css */
.login-page {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  isolation: isolate;
  touch-action: none;
}

.login-page-root {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.login-tubes-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

.login-tubes-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  cursor: crosshair;
}

.login-tubes-page::after {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 56%, rgba(0, 0, 0, 0.08), transparent 15rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.24));
  content: "";
  pointer-events: none;
}

.login-tubes-brand {
  position: fixed;
  top: clamp(18px, 3vw, 34px);
  left: clamp(18px, 3vw, 34px);
  z-index: 3;
  width: clamp(44px, 5vw, 58px);
  height: clamp(44px, 5vw, 58px);
  pointer-events: none;
}

.login-tubes-brand::before {
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(66, 221, 255, 0.28), rgba(27, 126, 255, 0.16) 42%, transparent 68%);
  content: "";
  filter: blur(6px);
  opacity: 0.66;
  transform: scale(0.96);
  animation: login-tubes-brand-halo 3.8s ease-in-out infinite;
}

.login-tubes-brand-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.92;
  filter:
    drop-shadow(0 0 8px rgba(66, 221, 255, 0.52))
    drop-shadow(0 0 14px rgba(28, 126, 255, 0.42));
  animation: login-tubes-brand-glow 3.8s ease-in-out infinite;
}

@keyframes login-tubes-brand-glow {
  0%,
  100% {
    opacity: 0.86;
    filter:
      drop-shadow(0 0 6px rgba(66, 221, 255, 0.42))
      drop-shadow(0 0 11px rgba(28, 126, 255, 0.32));
  }

  50% {
    opacity: 0.96;
    filter:
      drop-shadow(0 0 8px rgba(66, 221, 255, 0.52))
      drop-shadow(0 0 14px rgba(28, 126, 255, 0.42));
  }
}

@keyframes login-tubes-brand-halo {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.9);
  }

  50% {
    opacity: 0.68;
    transform: scale(1);
  }
}

.login-terminal-form {
  position: relative;
  z-index: 2;
  width: min(100%, 680px);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(22px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.96);
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.92);
}

.login-terminal-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-terminal-history {
  min-height: 58px;
  display: grid;
  align-content: end;
  gap: 7px;
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  line-height: 1.35;
}

.login-terminal-history-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-terminal-captcha,
.login-terminal-status {
  min-height: 22px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.82rem, 1.8vw, 1rem);
  line-height: 1.45;
}

.login-terminal-captcha {
  color: rgba(255, 255, 255, 0.88);
  -webkit-user-select: none;
  user-select: none;
}

.login-terminal-caps-warning {
  min-height: 20px;
  margin: -4px 0 0;
  color: #ffcf7a;
  font-size: clamp(0.78rem, 1.55vw, 0.92rem);
  line-height: 1.35;
}

.login-terminal-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 40px;
  font-size: clamp(1.22rem, 3vw, 2rem);
  line-height: 1.25;
  letter-spacing: 0;
}

.login-terminal-prompt {
  flex: 0 0 auto;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.login-terminal-input {
  min-width: 0;
  flex: 1 1 auto;
  appearance: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  outline: none;
  font: inherit;
  letter-spacing: 0;
  text-shadow: inherit;
  caret-color: #fff;
}

.login-terminal-line:focus-within {
  outline: 0 !important;
}

.login-terminal-input:focus,
.login-terminal-input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.login-terminal-input:-webkit-autofill,
.login-terminal-input:-webkit-autofill:hover,
.login-terminal-input:-webkit-autofill:focus {
  border: 0 !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 999999s ease-out 0s;
}

.login-terminal-input:disabled {
  opacity: 0.72;
}

.login-terminal-input::selection {
  color: #000;
  background: #fff;
}

.login-status-success {
  color: #b9ffcf;
}

.login-status-danger {
  color: #ff9bb1;
}

.login-status-info {
  color: #b9ecff;
}

.login-terminal-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-legal {
  position: fixed;
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 30px);
  z-index: 3;
  max-width: min(29rem, calc(100vw - clamp(18px, 3vw, 34px) * 2));
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(0.72rem, 1vw, 0.8rem);
  line-height: 1.45;
  text-align: right;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.94);
}

.login-legal-link {
  color: rgba(186, 229, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.login-legal-link:hover,
.login-legal-link:focus-visible {
  color: #fff;
}

@media (max-width: 575.98px) {
  .login-terminal-form {
    justify-content: flex-end;
    padding: 20px;
    gap: 11px;
  }

  .login-tubes-brand {
    top: 18px;
    left: 18px;
    width: 44px;
    height: 44px;
  }

  .login-terminal-history {
    min-height: 48px;
  }

  .login-terminal-line {
    gap: 8px;
    font-size: 1.15rem;
  }

  .login-terminal-prompt {
    max-width: 42vw;
  }

  .login-legal {
    left: 18px;
    right: 18px;
    bottom: 18px;
    max-width: none;
    text-align: left;
  }
}
/* src/styles/validation.css */
body .site-shell :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):required:user-invalid,
body .site-shell :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select)[aria-invalid="true"],
body .site-shell :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select).is-required-missing {
  border-color: rgba(255, 93, 116, 0.92);
  box-shadow:
    0 0 0 3px rgba(255, 93, 116, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body .site-shell :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):required:user-invalid:focus,
body .site-shell :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select)[aria-invalid="true"]:focus,
body .site-shell :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select).is-required-missing:focus {
  border-color: #ff6f84;
  box-shadow:
    0 0 0 3px rgba(255, 93, 116, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}