/* ============================================================================
   COSMIC NAVIGATION
   Mobile-first glassmorphic navigation matching LifeImprover aesthetic
   ========================================================================= */

/* ============================================================================
   MOBILE DOCK - Floating glassmorphic dock at bottom
   ========================================================================= */

.cosmic-dock {
  display: block;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--container-max-width));
  z-index: 95;
}

.cosmic-dock__bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.4rem var(--space-md) calc(0.55rem + var(--space-xs));
  border-radius: 1.5rem 1.5rem 0 0;
  border: 1px solid rgba(118, 64, 217, 0.35);
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 64, 217, 0.15), transparent 70%),
    linear-gradient(180deg, rgba(10, 16, 42, 0.95), rgba(6, 6, 28, 0.98));
  box-shadow:
    0 -28px 55px -32px rgba(118, 64, 217, 0.65),
    0 -18px 35px -22px rgba(8, 6, 28, 0.85);
  backdrop-filter: blur(20px);
}

@supports (padding: max(0px)) {
  .cosmic-dock__bar {
    padding-left: max(var(--space-md), env(safe-area-inset-left));
    padding-right: max(var(--space-md), env(safe-area-inset-right));
    padding-bottom: calc(0.55rem + max(0.75rem, env(safe-area-inset-bottom)));
  }
}

.cosmic-dock__item {
  font: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 2.2rem;
  padding: 0.4rem 0.35rem;
  border-radius: 1rem;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background: rgba(16, 20, 60, 0.75);
  color: rgba(228, 235, 255, 0.88);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.cosmic-dock__item:hover,
.cosmic-dock__item:focus-visible {
  border-color: rgba(118, 64, 217, 0.55);
  background: rgba(26, 32, 82, 0.95);
  color: #ffffff;
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -15px rgba(118, 64, 217, 0.7);
}

.cosmic-dock__item.is-active {
  border-color: rgba(118, 64, 217, 0.8);
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 64, 217, 0.35), transparent 80%),
    linear-gradient(150deg, rgba(118, 64, 217, 0.4), rgba(91, 50, 150, 0.5));
  color: #ffffff;
  box-shadow:
    0 16px 35px -18px rgba(118, 64, 217, 0.85),
    inset 0 1px 2px rgba(246, 220, 255, 0.3);
}

.cosmic-dock__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.cosmic-dock__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================================================
   MOBILE SHEET - Full navigation overlay
   ========================================================================= */

.cosmic-sheet-scrim {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 100%, rgba(118, 64, 217, 0.15), transparent 70%),
    rgba(4, 5, 24, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 90;
  backdrop-filter: blur(2px);
}

.cosmic-sheet-scrim:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

.cosmic-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: min(100%, var(--container-max-width));
  border-radius: 2.5rem 2.5rem 0 0;
  border: 1px solid rgba(118, 64, 217, 0.4);
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 64, 217, 0.12), transparent 65%),
    linear-gradient(180deg, rgba(10, 16, 42, 0.98), rgba(16, 20, 58, 0.96));
  box-shadow:
    0 -35px 75px -35px rgba(118, 64, 217, 0.75),
    0 -25px 55px -28px rgba(8, 6, 28, 0.9);
  backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-md) var(--space-md) calc(var(--space-lg) + var(--space-md));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 96;
}

.cosmic-sheet:not([hidden]) {
  transform: translate(-50%, 0);
}

@supports (padding: max(0px)) {
  .cosmic-sheet {
    padding-left: max(var(--space-md), env(safe-area-inset-left));
    padding-right: max(var(--space-md), env(safe-area-inset-right));
    padding-top: calc(var(--space-md) + max(var(--space-xs), env(safe-area-inset-top)));
    padding-bottom: calc(var(--space-lg) + max(var(--space-md), env(safe-area-inset-bottom)));
  }
}

.cosmic-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid rgba(118, 64, 217, 0.2);
}

.cosmic-sheet__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(212, 223, 255, 0.65);
}

.cosmic-sheet__title {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.cosmic-sheet__close {
  font: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(118, 64, 217, 0.35);
  background: rgba(16, 20, 60, 0.85);
  color: rgba(228, 235, 255, 0.9);
  font-size: 1.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.cosmic-sheet__close:hover,
.cosmic-sheet__close:focus-visible {
  border-color: rgba(118, 64, 217, 0.7);
  background: rgba(118, 64, 217, 0.3);
  color: #ffffff;
  outline: none;
  transform: rotate(90deg);
}

.cosmic-sheet__body {
  display: grid;
  gap: var(--space-md);
}

.cosmic-sheet__section {
  display: grid;
  gap: 0.75rem;
}

.cosmic-sheet__section--auth {
  border-top: 1px solid rgba(118, 64, 217, 0.25);
  padding-top: var(--space-sm);
  margin-top: var(--space-xs);
}

.cosmic-sheet__section-heading {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(212, 223, 255, 0.75);
}

.cosmic-sheet__section-icon {
  font-size: 1rem;
}

.cosmic-sheet__section-label {
  font-weight: 600;
}

.cosmic-sheet__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.cosmic-sheet__link,
.cosmic-sheet__signout-button {
  font: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border-radius: 1.3rem;
  border: 1px solid rgba(118, 64, 217, 0.28);
  background: rgba(16, 20, 60, 0.75);
  color: rgba(228, 235, 255, 0.9);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.cosmic-sheet__link:hover,
.cosmic-sheet__link:focus-visible,
.cosmic-sheet__signout-button:hover,
.cosmic-sheet__signout-button:focus-visible {
  border-color: rgba(118, 64, 217, 0.6);
  background: rgba(26, 32, 82, 0.95);
  color: #ffffff;
  outline: none;
  transform: translateX(4px);
}

.cosmic-sheet__link.is-active {
  border-color: rgba(118, 64, 217, 0.75);
  background:
    radial-gradient(circle at 0% 50%, rgba(118, 64, 217, 0.3), transparent 75%),
    linear-gradient(150deg, rgba(118, 64, 217, 0.35), rgba(91, 50, 150, 0.4));
  color: #ffffff;
  box-shadow:
    0 18px 38px -22px rgba(118, 64, 217, 0.75),
    inset 0 1px 2px rgba(246, 220, 255, 0.25);
}

.cosmic-sheet__link-icon {
  font-size: 1.45rem;
  line-height: 1;
  flex-shrink: 0;
}

.cosmic-sheet__link-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.cosmic-sheet__link-label {
  font-weight: 600;
  font-size: 1rem;
}

.cosmic-sheet__link-desc {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(212, 223, 255, 0.68);
}

.cosmic-sheet__link.is-active .cosmic-sheet__link-desc {
  color: rgba(246, 220, 255, 0.85);
}

.cosmic-sheet__signout {
  margin: 0;
}

.cosmic-sheet__signout-button {
  width: 100%;
  border-color: rgba(255, 164, 164, 0.45);
  background: rgba(52, 20, 46, 0.75);
  color: rgba(255, 214, 227, 0.94);
}

.cosmic-sheet__signout-button:hover,
.cosmic-sheet__signout-button:focus-visible {
  border-color: rgba(255, 164, 164, 0.7);
  background: rgba(78, 26, 62, 0.9);
}

/* ============================================================================
   DESKTOP SIDEBAR - Persistent collapsible sidebar
   ========================================================================= */

/* Hide sidebar on mobile by default */

.cosmic-sidebar {
  display: none;
}

@media (min-width: 48rem) {
  /* Hide mobile dock and sheet on desktop */
  .cosmic-dock,
  .cosmic-sheet,
  .cosmic-sheet-scrim {
    display: none;
  }

  /* Show and position sidebar */
  .cosmic-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    border-right: 1px solid rgba(118, 64, 217, 0.35);
    background:
      radial-gradient(circle at 100% 50%, rgba(118, 64, 217, 0.08), transparent 65%),
      linear-gradient(135deg, rgba(10, 16, 42, 0.96), rgba(16, 20, 58, 0.94));
    box-shadow:
      4px 0 35px -15px rgba(118, 64, 217, 0.55),
      2px 0 20px -10px rgba(8, 6, 28, 0.75);
    backdrop-filter: blur(18px);
    z-index: 100;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cosmic-sidebar[data-collapsed="true"] {
    width: 72px;
  }

  /* Sidebar header with logo and toggle */
  .cosmic-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border-bottom: 1px solid rgba(118, 64, 217, 0.2);
  }

  .cosmic-sidebar__brand {
    flex: 1;
    min-width: 0;
  }

  .cosmic-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    transition: opacity 0.2s ease;
  }

  .cosmic-sidebar__logo:hover {
    opacity: 0.85;
  }

  .cosmic-sidebar__logo-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }

  .cosmic-sidebar__logo-text {
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.25s ease;
  }

  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__logo-text {
    opacity: 0;
    width: 0;
  }

  .cosmic-sidebar__toggle {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.5rem;
    border: 1px solid rgba(118, 64, 217, 0.3);
    background: rgba(16, 20, 60, 0.75);
    color: rgba(228, 235, 255, 0.85);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
  }

  .cosmic-sidebar__toggle:hover,
  .cosmic-sidebar__toggle:focus-visible {
    border-color: rgba(118, 64, 217, 0.6);
    background: rgba(118, 64, 217, 0.25);
    color: #ffffff;
    outline: none;
  }

  .cosmic-sidebar__toggle-icon {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__toggle-icon {
    transform: rotate(180deg);
  }

  /* Sidebar body with scrollable sections */
  .cosmic-sidebar__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-sm) 0;
  }

  .cosmic-sidebar__section {
    padding: 0 var(--space-sm) var(--space-md);
  }

  .cosmic-sidebar__section + .cosmic-sidebar__section {
    border-top: 1px solid rgba(118, 64, 217, 0.15);
    padding-top: var(--space-md);
  }

  .cosmic-sidebar__section-heading {
    margin: 0 0 0.65rem;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(212, 223, 255, 0.65);
  }

  .cosmic-sidebar__section-icon {
    font-size: 1rem;
    flex-shrink: 0;
  }

  .cosmic-sidebar__section-label {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.25s ease;
  }

  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__section-label {
    opacity: 0;
    width: 0;
  }

  .cosmic-sidebar__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
  }

  .cosmic-sidebar__link,
  .cosmic-sidebar__signout-button {
    font: inherit;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 1rem;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(228, 235, 255, 0.88);
    text-decoration: none;
    cursor: pointer;
    transition:
      border-color 0.2s ease,
      background 0.2s ease,
      color 0.2s ease,
      transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cosmic-sidebar__link:hover,
  .cosmic-sidebar__link:focus-visible,
  .cosmic-sidebar__signout-button:hover,
  .cosmic-sidebar__signout-button:focus-visible {
    border-color: rgba(118, 64, 217, 0.35);
    background: rgba(26, 32, 82, 0.75);
    color: #ffffff;
    outline: none;
    transform: translateX(3px);
  }

  .cosmic-sidebar__link.is-active {
    border-color: rgba(118, 64, 217, 0.6);
    background:
      radial-gradient(circle at 0% 50%, rgba(118, 64, 217, 0.25), transparent 75%),
      rgba(118, 64, 217, 0.2);
    color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(246, 220, 255, 0.2);
  }

  .cosmic-sidebar__link-icon {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .cosmic-sidebar__link-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.25s ease;
  }

  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__link-text {
    opacity: 0;
    width: 0;
  }

  .cosmic-sidebar__link-label {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cosmic-sidebar__link-desc {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(212, 223, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cosmic-sidebar__link.is-active .cosmic-sidebar__link-desc {
    color: rgba(246, 220, 255, 0.8);
  }

  /* Sidebar footer with sign out */
  .cosmic-sidebar__footer {
    padding: var(--space-sm);
  }

  .cosmic-sidebar__divider {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(118, 64, 217, 0.3) 50%,
      transparent
    );
    margin-bottom: var(--space-sm);
  }

  .cosmic-sidebar__signout {
    margin: 0;
  }

  .cosmic-sidebar__signout-button {
    width: 100%;
    justify-content: flex-start;
    border-color: rgba(255, 164, 164, 0.35);
    background: rgba(52, 20, 46, 0.65);
    color: rgba(255, 214, 227, 0.92);
  }

  .cosmic-sidebar__signout-button:hover,
  .cosmic-sidebar__signout-button:focus-visible {
    border-color: rgba(255, 164, 164, 0.6);
    background: rgba(78, 26, 62, 0.85);
    color: #ffffff;
  }

  /* Adjust main content to account for sidebar */
  .site-shell {
    margin-left: 280px;
    transition: margin-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cosmic-sidebar[data-collapsed="true"] ~ .site-shell {
    margin-left: 72px;
  }

  /* Adjust header for sidebar layout */
  .site-header {
    padding-block: var(--space-sm);
  }

  .site-header .container {
    max-width: 100%;
  }

  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* ============================================================================
     MILESTONE 13.4 — CSS ENHANCEMENTS
     Active section highlighting, notification badges, glassmorphic improvements
     ========================================================================= */

  /* Active section highlight with gradient left border */
  .cosmic-sidebar__section.is-active {
    position: relative;
    padding-left: calc(var(--space-sm) + 3px);
  }

  .cosmic-sidebar__section.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
      180deg,
      transparent 5%,
      rgba(118, 64, 217, 0.85) 25%,
      rgba(91, 50, 150, 0.95) 50%,
      rgba(118, 64, 217, 0.85) 75%,
      transparent 95%
    );
    border-radius: 0 2px 2px 0;
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__section.is-active::before {
    opacity: 0.75;
    width: 2px;
  }

  /* Enhanced active section heading */
  .cosmic-sidebar__section.is-active .cosmic-sidebar__section-heading {
    color: rgba(246, 220, 255, 0.95);
  }

  /* Notification badge system using CSS ::after pseudo-elements */
  .cosmic-sidebar__link[data-badge]::after,
  .cosmic-dock__item[data-badge]::after {
    content: attr(data-badge);
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 1rem;
    border: 1.5px solid rgba(10, 16, 42, 0.95);
    background: linear-gradient(
      135deg,
      rgba(255, 85, 170, 0.95),
      rgba(255, 64, 129, 0.95)
    );
    color: #ffffff;
    box-shadow:
      0 2px 8px -2px rgba(255, 64, 129, 0.75),
      inset 0 1px 1px rgba(255, 255, 255, 0.35);
    animation: badge-pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__link[data-badge]::after {
    top: 0.5rem;
    right: 0.5rem;
    transform: scale(0.9);
  }

  .cosmic-sidebar__link {
    position: relative;
  }

  .cosmic-dock__item {
    position: relative;
  }

  @keyframes badge-pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.08);
      opacity: 0.92;
    }
  }

  /* Glassmorphic noise texture overlay */
  .cosmic-sidebar::after,
  .cosmic-dock__bar::after,
  .cosmic-sheet::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.045'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: overlay;
    z-index: 1;
  }

  .cosmic-sidebar::after {
    border-radius: inherit;
  }

  .cosmic-dock__bar::after {
    border-radius: 2rem 2rem 0 0;
  }

  .cosmic-sheet::after {
    border-radius: 2.5rem 2.5rem 0 0;
  }

  /* Ensure content stays above noise overlay */
  .cosmic-sidebar > * {
    position: relative;
    z-index: 2;
  }

  /* Improved collapse transitions with staggered timing */
  .cosmic-sidebar__logo-text,
  .cosmic-sidebar__section-label,
  .cosmic-sidebar__link-text {
    transition:
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__logo-text,
  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__section-label,
  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__link-text {
    opacity: 0;
    transform: translateX(-8px);
  }

  /* Smooth icon scaling on collapse */
  .cosmic-sidebar__link-icon,
  .cosmic-sidebar__section-icon {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__link-icon,
  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__section-icon {
    transform: scale(1.1);
  }

  /* Enhanced hover effects with smooth glow */
  .cosmic-sidebar__link:hover::before,
  .cosmic-sidebar__link:focus-visible::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(
      circle at 0% 50%,
      rgba(118, 64, 217, 0.15),
      transparent 70%
    );
    opacity: 0;
    animation: glow-pulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }

  @keyframes glow-pulse {
    0%, 100% {
      opacity: 0.3;
    }
    50% {
      opacity: 0.6;
    }
  }

  /* Collapsed sidebar centered icons */
  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__link,
  .cosmic-sidebar[data-collapsed="true"] .cosmic-sidebar__signout-button {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Focus-visible enhancements for keyboard navigation */
  .cosmic-sidebar__link:focus-visible,
  .cosmic-sidebar__toggle:focus-visible,
  .cosmic-sidebar__signout-button:focus-visible {
    outline: 2px solid rgba(118, 64, 217, 0.75);
    outline-offset: 2px;
  }

  .cosmic-dock__item:focus-visible,
  .cosmic-sheet__link:focus-visible,
  .cosmic-sheet__close:focus-visible {
    outline: 2px solid rgba(118, 64, 217, 0.75);
    outline-offset: 2px;
  }
}

/* ============================================================================
   COSMIC DASHBOARD
   Glassmorphic design system for dashboard components
   Matches cosmic-nav.css aesthetic with 4-level hierarchy
   ========================================================================= */

/* ============================================================================
   LEVEL 1 - PRIMARY CONTAINERS (Today Card)
   Strongest glassmorphism, highest prominence
   ========================================================================= */

.today-card {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 64, 217, 0.12), transparent 65%),
    linear-gradient(145deg, rgba(10, 16, 42, 0.95), rgba(16, 20, 58, 0.92));
  backdrop-filter: blur(22px);
  box-shadow:
    0 32px 64px -40px rgba(118, 64, 217, 0.7),
    0 18px 35px -25px rgba(8, 6, 28, 0.85);
  transition:
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Premium luxury treatment for dashboard Today Card */

.page-canvas--dashboard .today-card.panel--solid {
  border: 1px solid rgba(118, 64, 217, 0.5); /* Stronger iris border */
  background: linear-gradient(140deg, rgba(6, 8, 24, 0.99), rgba(8, 10, 28, 1)),
    radial-gradient(circle at 50% 0%, rgba(118, 64, 217, 0.08), transparent 70%);
  backdrop-filter: blur(8px);
  padding: 2.25rem; /* Generous padding for premium feel */
  box-shadow:
    0 32px 64px -40px rgba(118, 64, 217, 0.75),
    inset 0 1px 0 rgba(118, 64, 217, 0.2);
}

/* ============================================================================
   LEVEL 2 - DASHBOARD SEGMENTS
   Medium depth glassmorphism for collapsible sections
   ========================================================================= */

.dashboard-segment {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.32);
  background:
    radial-gradient(circle at 30% 50%, rgba(118, 64, 217, 0.08), transparent 70%),
    linear-gradient(145deg, rgba(12, 16, 48, 0.92), rgba(16, 12, 42, 0.88));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -36px rgba(8, 5, 28, 0.8);
  padding: 1.25rem;
  transition:
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
}

.dashboard-segment[open] {
  border-color: rgba(118, 64, 217, 0.4);
}

/* Monthly Report Widget - Premium luxury treatment with gold accents */

.monthly-report-widget {
  margin-bottom: 2rem;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(251, 191, 36, 0.45); /* Gold border for luxury */
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.15), /* Inner top glow */
    inset 0 0 20px rgba(251, 191, 36, 0.04); /* Inner soft glow */
  color: white;
  border-radius: 22px;
  padding: 2.5rem 3rem; /* Generous padding for premium feel */
  transition:
    box-shadow 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
}

.monthly-report-widget:hover {
  transform: translateY(-2px);
  border-color: rgba(251, 191, 36, 0.65); /* Brighter gold on hover */
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.25), /* Brighter inner glow */
    inset 0 0 24px rgba(251, 191, 36, 0.08), /* Enhanced soft glow */
    0 0 20px rgba(251, 191, 36, 0.15); /* Outer gold glow */
}

.monthly-report-widget .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid rgba(251, 191, 36, 0.2); /* Gold divider */
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
}

.monthly-report-widget .card-header h3 {
  margin: 0;
  font-size: 1.35rem; /* Slightly larger for premium feel */
  font-weight: 600;
}

.monthly-report-widget .card-body {
  padding: 0; /* Padding handled by parent */
}

.monthly-report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.metric-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.metric-highlight strong {
  font-size: 2rem;
  font-weight: 700;
  display: block;
}

.metric-highlight span {
  font-size: 0.875rem;
  opacity: 0.9;
}

.monthly-report-widget .button-primary {
  background: white;
  color: #667eea;
  border: none;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  transition:
    background 0.3s ease,
    transform 0.2s ease;
}

.monthly-report-widget .button-primary:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.02);
}

.monthly-report-widget .text-muted {
  color: rgba(255, 255, 255, 0.8);
}

/* Tool Strip - Featured content with Level 2 treatment */

.tool-strip {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.32);
  background:
    radial-gradient(circle at 20% 50%, rgba(118, 64, 217, 0.08), transparent 70%),
    linear-gradient(145deg, rgba(12, 16, 48, 0.92), rgba(16, 12, 42, 0.88));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -36px rgba(8, 5, 28, 0.8);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* ============================================================================
   LEVEL 3 - NESTED CARDS
   Subtle glassmorphism for hub cards and creative actions
   ========================================================================= */

.hub-card {
  padding: 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background:
    radial-gradient(circle at 0% 50%, rgba(118, 64, 217, 0.06), transparent 80%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.85), rgba(20, 24, 68, 0.8));
  backdrop-filter: blur(14px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.hub-card:hover,
.hub-card:focus-visible {
  border-color: rgba(118, 64, 217, 0.6);
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.15), transparent 70%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.9), rgba(20, 24, 68, 0.85));
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(118, 64, 217, 0.8);
  outline: none;
}

.creative-action-card {
  padding: 1.5rem;
  border-radius: 0.875rem;
  border: 1px solid rgba(118, 64, 217, 0.28);
  background:
    radial-gradient(circle at 10% 30%, rgba(118, 64, 217, 0.06), transparent 75%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.85), rgba(20, 24, 68, 0.8));
  backdrop-filter: blur(14px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.creative-action-card:hover,
.creative-action-card:focus-visible {
  border-color: rgba(118, 64, 217, 0.6);
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.15), transparent 70%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.9), rgba(20, 24, 68, 0.85));
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(118, 64, 217, 0.8);
  outline: none;
}

/* Creative Actions Panel */

.creative-actions {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.3);
  background:
    radial-gradient(circle at 40% 20%, rgba(118, 64, 217, 0.08), transparent 70%),
    linear-gradient(145deg, rgba(12, 16, 48, 0.92), rgba(16, 12, 42, 0.88));
  backdrop-filter: blur(18px);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* ============================================================================
   LEVEL 4 - STATUS CHIPS & SMALL COMPONENTS
   Minimal depth for compact information display
   ========================================================================= */

.status-chip {
  min-width: 170px;
  padding: 0.55rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(118, 64, 217, 0.22);
  background: rgba(16, 20, 60, 0.8);
  backdrop-filter: blur(10px);
  transition:
    border-color 0.3s ease,
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.status-chip:hover {
  border-color: rgba(118, 64, 217, 0.4);
  background: rgba(26, 32, 82, 0.85);
}

/* ============================================================================
   BADGE SYSTEM - Aligned with cosmic palette
   ========================================================================= */

.badge-focus {
  background: rgba(199, 255, 95, 0.18);
  border: 1px solid rgba(199, 255, 95, 0.35);
  color: #c7ff5f;
  box-shadow: 0 4px 12px -6px rgba(199, 255, 95, 0.5);
}

.badge-life-tool {
  background: rgba(118, 64, 217, 0.3);
  border: 1px solid rgba(118, 64, 217, 0.5);
  color: #b89aff;
  box-shadow: 0 4px 12px -6px rgba(118, 64, 217, 0.6);
}

.badge-status {
  background: rgba(16, 20, 60, 0.8);
  border: 1px solid rgba(118, 64, 217, 0.3);
  color: rgba(228, 235, 255, 0.88);
  backdrop-filter: blur(8px);
}

.badge-streak {
  background: rgba(118, 64, 217, 0.2);
  border: 1px solid rgba(118, 64, 217, 0.4);
  color: #d5b3ff;
  box-shadow: inset 0 1px 2px rgba(246, 220, 255, 0.15);
}

/* ============================================================================
   QUICK ACTIONS BAR - Match cosmic dock pattern
   ========================================================================= */

.quick-actions-bar {
  display: flex;
  gap: 0.65rem;
  padding: 0.75rem var(--space-md) calc(1rem + var(--space-xs));
  border-radius: 2rem 2rem 0 0;
  border: 1px solid rgba(118, 64, 217, 0.35);
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 64, 217, 0.15), transparent 70%),
    linear-gradient(180deg, rgba(10, 16, 42, 0.95), rgba(6, 6, 28, 0.98));
  box-shadow:
    0 -28px 55px -32px rgba(118, 64, 217, 0.65),
    0 -18px 35px -22px rgba(8, 6, 28, 0.85);
  backdrop-filter: blur(20px);
}

.quick-actions-bar__link {
  flex: 1;
  padding: 0.75rem 0.5rem;
  border-radius: 1.4rem;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background: rgba(16, 20, 60, 0.75);
  color: rgba(228, 235, 255, 0.88);
  text-decoration: none;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  transition:
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.quick-actions-bar__link:hover,
.quick-actions-bar__link:focus-visible {
  border-color: rgba(118, 64, 217, 0.55);
  background: rgba(26, 32, 82, 0.95);
  color: #ffffff;
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -15px rgba(118, 64, 217, 0.7);
}

/* ============================================================================
   ASSESSMENT STATUS CARDS - Enhanced with cosmic treatment
   ========================================================================= */

.assessment-status-card,
.assessment-status-empty {
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background:
    radial-gradient(circle at 20% 30%, rgba(118, 64, 217, 0.06), transparent 80%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.85), rgba(20, 24, 68, 0.8));
  backdrop-filter: blur(14px);
  padding: 1.25rem;
}

/* ============================================================================
   TODAY CARD INTEL SIDEBAR - Subtle depth
   ========================================================================= */

.today-card__intel {
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background:
    radial-gradient(circle at 80% 20%, rgba(118, 64, 217, 0.06), transparent 80%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.85), rgba(20, 24, 68, 0.8));
  backdrop-filter: blur(14px);
  padding: 1rem;
}

/* ============================================================================
   INSIGHT DIGEST & NEXT ACTIONS - Enhanced hierarchy
   ========================================================================= */

.insight-digest,
.next-actions,
.insight-history {
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background:
    radial-gradient(circle at 15% 30%, rgba(118, 64, 217, 0.06), transparent 80%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.85), rgba(20, 24, 68, 0.8));
  backdrop-filter: blur(14px);
  padding: 1.25rem;
  margin-bottom: var(--space-md);
}

/* Premium luxury treatment for dashboard insight digest */

.page-canvas--dashboard .insight-digest.panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.45); /* Gold accent border */
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.15), /* Inner top glow */
    inset 0 0 20px rgba(251, 191, 36, 0.04); /* Inner soft glow */
  padding: 2.5rem 3rem; /* Generous whitespace for luxury */
  background: linear-gradient(140deg, rgba(6, 8, 24, 0.99), rgba(8, 10, 28, 1)),
    radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.06), transparent 70%);
  backdrop-filter: blur(6px);
}

/* ============================================================================
   INTERACTION STATES - Universal hover/focus/active patterns
   ========================================================================= */

/* Active state for clickable elements */

.hub-card.is-active,
.creative-action-card.is-active,
.status-chip.is-active {
  border-color: rgba(118, 64, 217, 0.8);
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.25), transparent 75%),
    linear-gradient(150deg, rgba(118, 64, 217, 0.35), rgba(91, 50, 150, 0.4));
  box-shadow:
    0 20px 42px -24px rgba(118, 64, 217, 0.9),
    inset 0 1px 2px rgba(246, 220, 255, 0.25);
}

/* Focus-visible for keyboard navigation */

.hub-card:focus-visible,
.creative-action-card:focus-visible,
.status-chip:focus-visible,
.quick-actions-bar__link:focus-visible {
  outline: 2px solid rgba(118, 64, 217, 0.8);
  outline-offset: 2px;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================= */

@media (max-width: 768px) {
  .today-card,
  .dashboard-segment,
  .tool-strip,
  .creative-actions {
    border-radius: 18px;
  }

  .quick-actions-bar {
    gap: 0.5rem;
    padding: 0.65rem var(--space-sm) calc(0.85rem + var(--space-xs));
  }

  .quick-actions-bar__link {
    padding: 0.65rem 0.4rem;
    font-size: 0.8125rem;
  }
}

/* ============================================================================
   ASSESSMENTS PAGE - Cosmic treatment for list and detail views
   ========================================================================= */

/* Panel Hero - Level 1 (Primary Container) */

.panel--hero {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 64, 217, 0.12), transparent 65%),
    linear-gradient(145deg, rgba(10, 16, 42, 0.95), rgba(16, 20, 58, 0.92));
  backdrop-filter: blur(22px);
  box-shadow:
    0 32px 64px -40px rgba(118, 64, 217, 0.7),
    0 18px 35px -25px rgba(8, 6, 28, 0.85);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Panel History - Level 2 (Segments) */

.panel--history {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.32);
  background:
    radial-gradient(circle at 30% 50%, rgba(118, 64, 217, 0.08), transparent 70%),
    linear-gradient(145deg, rgba(12, 16, 48, 0.92), rgba(16, 12, 42, 0.88));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -36px rgba(8, 5, 28, 0.8);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Enhanced Length Picker - Larger cards with icons */

.length-picker {
  border: none;
  padding: 0;
  margin: var(--space-sm) 0;
  display: block;
}

.length-picker legend {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(199, 255, 95, 0.85);
  margin-bottom: 0.75rem;
  padding: 0;
  float: none;
  width: auto;
}

.length-picker__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.length-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.28);
  background:
    radial-gradient(circle at 50% 20%, rgba(118, 64, 217, 0.06), transparent 75%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.85), rgba(20, 24, 68, 0.8));
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.length-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.length-option__icon {
  font-size: 2.5rem;
  line-height: 1;
  filter: grayscale(0.5) opacity(0.8);
  transition: filter 0.3s ease;
}

.length-option__label {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgba(228, 235, 255, 0.95);
}

.length-option__description {
  font-size: 0.875rem;
  color: rgba(228, 235, 255, 0.65);
  text-align: center;
}

.length-option:hover {
  border-color: rgba(118, 64, 217, 0.55);
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.12), transparent 70%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.9), rgba(20, 24, 68, 0.85));
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -22px rgba(118, 64, 217, 0.8);
}

.length-option:hover .length-option__icon {
  filter: grayscale(0) opacity(1);
}

.length-option input[type="radio"]:checked + .length-option__label {
  color: #ffffff;
}

.length-option:has(input[type="radio"]:checked) {
  border-color: rgba(118, 64, 217, 0.8);
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.25), transparent 75%),
    linear-gradient(150deg, rgba(118, 64, 217, 0.35), rgba(91, 50, 150, 0.4));
  box-shadow:
    0 20px 42px -24px rgba(118, 64, 217, 0.9),
    inset 0 1px 2px rgba(246, 220, 255, 0.25);
  transform: translateY(-2px);
}

.length-option:has(input[type="radio"]:checked) .length-option__icon {
  filter: grayscale(0) opacity(1) drop-shadow(0 0 12px rgba(199, 255, 95, 0.5));
}

/* Loading state when option is clicked */

.length-option.is-loading {
  border-color: rgba(199, 255, 95, 0.7);
  background:
    radial-gradient(circle at 50% 50%, rgba(199, 255, 95, 0.15), transparent 70%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.95), rgba(20, 24, 68, 0.9));
  animation: pulse-glow 1.5s ease-in-out infinite;
  pointer-events: none;
}

.length-option.is-loading .length-option__icon {
  filter: grayscale(0) opacity(1);
  animation: pulse-scale 1s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(199, 255, 95, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(199, 255, 95, 0.7);
  }
}

@keyframes pulse-scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Assessment Orchestrator Panel - Level 3 Accent */

.assessment-orchestrator {
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.35);
  background:
    radial-gradient(circle at 15% 30%, rgba(118, 64, 217, 0.1), transparent 75%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.88), rgba(20, 24, 68, 0.82));
  backdrop-filter: blur(14px);
  padding: 1.25rem;
  margin-top: var(--space-sm);
}

/* Result Cards - Level 3 */

.result-card {
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background:
    radial-gradient(circle at 0% 50%, rgba(118, 64, 217, 0.06), transparent 80%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.85), rgba(20, 24, 68, 0.8));
  backdrop-filter: blur(14px);
  padding: 1.25rem;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.result-card:hover,
.result-card:focus-within {
  border-color: rgba(118, 64, 217, 0.6);
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.15), transparent 70%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.9), rgba(20, 24, 68, 0.85));
  transform: translateY(-3px);
  box-shadow: 0 20px 42px -24px rgba(118, 64, 217, 0.85);
}

/* Assessment Detail Page - Level 1 Hero */

.panel--detail {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 64, 217, 0.12), transparent 65%),
    linear-gradient(145deg, rgba(10, 16, 42, 0.95), rgba(16, 20, 58, 0.92));
  backdrop-filter: blur(22px);
  box-shadow:
    0 32px 64px -40px rgba(118, 64, 217, 0.7),
    0 18px 35px -25px rgba(8, 6, 28, 0.85);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Analysis Panel - Level 2 */

.analysis-panel {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.32);
  background:
    radial-gradient(circle at 30% 50%, rgba(118, 64, 217, 0.08), transparent 70%),
    linear-gradient(145deg, rgba(12, 16, 48, 0.92), rgba(16, 12, 42, 0.88));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -36px rgba(8, 5, 28, 0.8);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Analysis Cards - Level 3 */

.analysis-card {
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background:
    radial-gradient(circle at 20% 30%, rgba(118, 64, 217, 0.06), transparent 80%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.85), rgba(20, 24, 68, 0.8));
  backdrop-filter: blur(14px);
  padding: 1.25rem;
  transition:
    border-color 0.3s ease,
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.analysis-card:hover {
  border-color: rgba(118, 64, 217, 0.45);
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.1), transparent 75%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.88), rgba(20, 24, 68, 0.83));
}

/* Responses Section - Level 2 */

.responses {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.32);
  background:
    radial-gradient(circle at 30% 50%, rgba(118, 64, 217, 0.08), transparent 70%),
    linear-gradient(145deg, rgba(12, 16, 48, 0.92), rgba(16, 12, 42, 0.88));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -36px rgba(8, 5, 28, 0.8);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Response Items - Level 3 nested */

.response-item {
  border-radius: 16px;
  border: 1px solid rgba(118, 64, 217, 0.2);
  background: rgba(16, 20, 60, 0.75);
  backdrop-filter: blur(10px);
  padding: 1rem;
  margin-bottom: 0.75rem;
}

/* Celebration Banner - Special cosmic treatment */

.celebration-banner {
  border-radius: 18px;
  border: 1px solid rgba(199, 255, 95, 0.45);
  background:
    radial-gradient(circle at 50% 50%, rgba(199, 255, 95, 0.15), transparent 70%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.9), rgba(20, 24, 68, 0.85));
  backdrop-filter: blur(16px);
  box-shadow:
    0 24px 48px -28px rgba(199, 255, 95, 0.7),
    0 12px 24px -18px rgba(118, 64, 217, 0.5);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* ============================================================================
   MOTION PREFERENCES
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .today-card,
  .dashboard-segment,
  .hub-card,
  .creative-action-card,
  .status-chip,
  .quick-actions-bar__link,
  .length-option,
  .result-card,
  .analysis-card,
  .next-step-card,
  .cadence-phase-card,
  .cadence-stat,
  .cadence-phase-card__status {
    transition: none;
  }

  .cadence-phase-card__status--active {
    animation: none;
  }
}

/* ============================================================================
   DAILY CADENCE HUB - Cosmic glassmorphism treatment
   ========================================================================= */

/* Page Hero - Level 1 (Primary Container) */

.page-hero--daily-cadence {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 64, 217, 0.12), transparent 65%),
    linear-gradient(145deg, rgba(10, 16, 42, 0.95), rgba(16, 20, 58, 0.92));
  backdrop-filter: blur(22px);
  box-shadow:
    0 32px 64px -40px rgba(118, 64, 217, 0.7),
    0 18px 35px -25px rgba(8, 6, 28, 0.85);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Page Hero Metrics - Level 4 chip treatment */

.page-hero__metric {
  min-width: 140px;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(118, 64, 217, 0.28);
  background: rgba(16, 20, 60, 0.8);
  backdrop-filter: blur(10px);
  transition:
    border-color 0.3s ease,
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-hero__metric:hover {
  border-color: rgba(118, 64, 217, 0.45);
  background: rgba(26, 32, 82, 0.9);
}

/* Next Step Section - Level 2 container */

.page-section--next-step {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.32);
  background:
    radial-gradient(circle at 30% 50%, rgba(118, 64, 217, 0.08), transparent 70%),
    linear-gradient(145deg, rgba(12, 16, 48, 0.92), rgba(16, 12, 42, 0.88));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -36px rgba(8, 5, 28, 0.8);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Next Step Card - Level 3 */

.next-step-card {
  padding: 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background:
    radial-gradient(circle at 0% 50%, rgba(118, 64, 217, 0.06), transparent 80%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.85), rgba(20, 24, 68, 0.8));
  backdrop-filter: blur(14px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.next-step-card:hover {
  border-color: rgba(118, 64, 217, 0.6);
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.15), transparent 70%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.9), rgba(20, 24, 68, 0.85));
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(118, 64, 217, 0.8);
}

/* Cadence Timeline Container - Level 2 wrapper */

.cadence-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Phase Cards - Level 3 with state variations */

.cadence-phase-card {
  padding: var(--space-md);
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background:
    radial-gradient(circle at 0% 50%, rgba(118, 64, 217, 0.06), transparent 80%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.85), rgba(20, 24, 68, 0.8));
  backdrop-filter: blur(14px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.cadence-phase-card:hover {
  border-color: rgba(118, 64, 217, 0.6);
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.15), transparent 70%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.9), rgba(20, 24, 68, 0.85));
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(118, 64, 217, 0.8);
}

/* Current phase - Enhanced cosmic accent with chartreuse glow */

.cadence-phase-card--current {
  border-color: rgba(199, 255, 95, 0.5);
  background:
    radial-gradient(circle at 20% 30%, rgba(199, 255, 95, 0.08), transparent 70%),
    radial-gradient(circle at 80% 70%, rgba(118, 64, 217, 0.1), transparent 70%),
    linear-gradient(150deg, rgba(16, 20, 60, 0.9), rgba(20, 24, 68, 0.85));
  box-shadow:
    0 18px 38px -22px rgba(199, 255, 95, 0.6),
    0 8px 20px -12px rgba(118, 64, 217, 0.5);
}

.cadence-phase-card--current:hover {
  border-color: rgba(199, 255, 95, 0.7);
  box-shadow:
    0 24px 48px -24px rgba(199, 255, 95, 0.8),
    0 12px 28px -14px rgba(118, 64, 217, 0.7);
}

/* Completed phase - Subtle cosmic with completion indicator */

.cadence-phase-card--completed {
  border-color: rgba(118, 64, 217, 0.2);
  opacity: 0.85;
}

.cadence-phase-card--completed:hover {
  opacity: 1;
  border-color: rgba(118, 64, 217, 0.35);
}

/* Status Indicators - Level 4 badges */

.cadence-phase-card__status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  transition: all 0.3s ease;
}

.cadence-phase-card__status--completed {
  color: rgba(52, 211, 153, 0.9);
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  box-shadow: 0 4px 12px -6px rgba(52, 211, 153, 0.5);
}

.cadence-phase-card__status--active {
  color: rgba(199, 255, 95, 0.95);
  background: rgba(199, 255, 95, 0.15);
  border: 1px solid rgba(199, 255, 95, 0.4);
  box-shadow: 0 4px 12px -6px rgba(199, 255, 95, 0.6);
  animation: pulse-cosmic-glow 2s ease-in-out infinite;
}

@keyframes pulse-cosmic-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 4px 12px -6px rgba(199, 255, 95, 0.6);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 6px 18px -4px rgba(199, 255, 95, 0.8);
  }
}

.cadence-phase-card__status--pending {
  color: rgba(118, 64, 217, 0.5);
  background: rgba(118, 64, 217, 0.08);
  border: 1px solid rgba(118, 64, 217, 0.2);
}

/* Stats Section - Level 4 badges in container */

.cadence-phase-card__stats {
  display: flex;
  gap: var(--space-md);
  margin: var(--space-sm) 0;
  padding: var(--space-sm) 0;
  border-top: 1px solid rgba(118, 64, 217, 0.18);
  border-bottom: 1px solid rgba(118, 64, 217, 0.18);
}

.cadence-stat {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: rgba(16, 20, 60, 0.6);
  border: 1px solid rgba(118, 64, 217, 0.15);
  backdrop-filter: blur(8px);
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}

.cadence-stat:hover {
  border-color: rgba(118, 64, 217, 0.3);
  background: rgba(26, 32, 82, 0.7);
}

.cadence-stat__label {
  font-size: 0.75rem;
  color: rgba(228, 235, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.cadence-stat__value {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgba(228, 235, 255, 0.95);
}

/* ============================================================================
   COSMIC FORM SYSTEM
   Unified form styling for all apps (Creative, UI, Planning, etc.)
   ========================================================================= */

.cosmic-form-field,
.cosmic-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.cosmic-form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(228, 235, 255, 0.85);
  letter-spacing: 0.02em;
}

.cosmic-form-input,
.cosmic-form-textarea,
.cosmic-form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background: rgba(16, 20, 60, 0.6);
  backdrop-filter: blur(8px);
  color: rgba(228, 235, 255, 0.95);
  font-size: 0.9375rem;
  font-family: inherit;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.cosmic-form-input::-moz-placeholder, .cosmic-form-textarea::-moz-placeholder, .cosmic-form-control::-moz-placeholder {
  color: rgba(228, 235, 255, 0.45);
}

.cosmic-form-input::placeholder,
.cosmic-form-textarea::placeholder,
.cosmic-form-control::placeholder {
  color: rgba(228, 235, 255, 0.45);
}

.cosmic-form-input:focus,
.cosmic-form-textarea:focus,
.cosmic-form-control:focus {
  outline: none;
  border-color: rgba(118, 64, 217, 0.6);
  background: rgba(26, 32, 82, 0.7);
  box-shadow: 0 0 0 3px rgba(118, 64, 217, 0.15);
}

.cosmic-form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.cosmic-form-help {
  font-size: 0.8125rem;
  color: rgba(228, 235, 255, 0.6);
  line-height: 1.5;
}

.cosmic-form-error {
  font-size: 0.8125rem;
  color: rgba(255, 120, 120, 0.9);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cosmic-form-error::before {
  content: "⚠";
  font-size: 1rem;
}

.cosmic-form-input.is-invalid,
.cosmic-form-textarea.is-invalid {
  border-color: rgba(255, 120, 120, 0.6);
  background: rgba(60, 20, 30, 0.6);
}

.cosmic-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cosmic-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(118, 64, 217, 0.4);
  background: rgba(16, 20, 60, 0.6);
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.cosmic-checkbox input[type="checkbox"]:checked {
  background: rgba(118, 64, 217, 0.8);
  border-color: rgba(118, 64, 217, 0.9);
}

.cosmic-checkbox input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.cosmic-checkbox input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(118, 64, 217, 0.2);
}

.cosmic-checkbox label {
  font-size: 0.9375rem;
  color: rgba(228, 235, 255, 0.85);
  cursor: pointer;
}

.cosmic-form-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  justify-content: flex-start;
}

/* ============================================================================
   COSMIC LOADING OVERLAY
   Full-screen loading with orbital animation
   ========================================================================= */

.cosmic-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.cosmic-loading-overlay:not([hidden]) {
  display: flex;
}

.cosmic-loading-content {
  text-align: center;
}

.cosmic-loading-animation {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 2rem;
}

.cosmic-loading-orb {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  opacity: 0.8;
  filter: blur(2px) drop-shadow(0 0 20px rgba(118, 64, 217, 0.6));
}

.cosmic-loading-orb-1 {
  background: radial-gradient(circle at 30% 30%, #a8edea 0%, #667eea 100%);
  animation: orbFloat1 3s ease-in-out infinite;
}

.cosmic-loading-orb-2 {
  background: radial-gradient(circle at 30% 30%, #fbc2eb 0%, #a6c1ee 100%);
  animation: orbFloat2 3s ease-in-out infinite 0.5s;
}

.cosmic-loading-orb-3 {
  background: radial-gradient(circle at 30% 30%, #f093fb 0%, #f5576c 100%);
  animation: orbFloat3 3s ease-in-out infinite 1s;
}

.cosmic-sparkle {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  animation: sparkle 2s ease-in-out infinite;
}

.cosmic-sparkle-1 {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.cosmic-sparkle-2 {
  top: 30%;
  right: 20%;
  animation-delay: 0.7s;
}

.cosmic-sparkle-3 {
  bottom: 30%;
  left: 30%;
  animation-delay: 1.4s;
}

.cosmic-loading-message {
  font-size: 1.25rem;
  color: white;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-30px, 30px) scale(0.9);
  }
}

@keyframes orbFloat2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-35px, -25px) scale(0.9);
  }
  66% {
    transform: translate(35px, 25px) scale(1.1);
  }
}

@keyframes orbFloat3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(25px, 35px) scale(1.1);
  }
  66% {
    transform: translate(-25px, -35px) scale(0.9);
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
}

/* ============================================================================
   COSMIC FILTER GROUP
   Filter controls for lists and grids
   ========================================================================= */

.cosmic-filter-group {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.cosmic-filter-group__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(212, 223, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cosmic-filter-group__buttons {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* ============================================================================
   COSMIC CARD GRID SYSTEM
   Grid layouts for cards (not full panels)
   ========================================================================= */

.cosmic-card-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cosmic-card {
  background: rgba(10, 16, 42, 0.85);
  border: 1px solid rgba(155, 118, 255, 0.32);
  border-radius: 18px;
  padding: var(--space-md);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  backdrop-filter: blur(12px);
}

.cosmic-card:hover {
  transform: translateY(-2px);
  border-color: rgba(118, 64, 217, 0.6);
  box-shadow: 0 12px 24px -12px rgba(118, 64, 217, 0.4);
}

.cosmic-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.cosmic-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(228, 235, 255, 0.95);
  margin: 0;
}

.cosmic-card__body {
  color: rgba(228, 235, 255, 0.75);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.cosmic-card__footer {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(118, 64, 217, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

/* ============================================================================
   UTILITY CLASSES
   ========================================================================= */

.body-scroll-locked {
  overflow: hidden;
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .page-hero--daily-cadence,
  .page-section--next-step {
    border-radius: 18px;
  }

  .cadence-phase-card {
    border-radius: 16px;
  }

  .cadence-phase-card__stats {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .cosmic-card-grid {
    grid-template-columns: 1fr;
  }

  .cosmic-form-actions {
    flex-direction: column;
  }

  .cosmic-filter-group {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================================
   DEEP RESEARCH LAB - Intelligence Center
   Premium glassmorphic treatment with cyan accent
   ========================================================================= */

/* Page Hero - Research variant with electric cyan */

.page-hero--research {
  border-color: rgba(0, 212, 255, 0.4);
  background:
    linear-gradient(140deg, rgba(8, 12, 32, 0.95), rgba(10, 30, 60, 0.85)),
    radial-gradient(circle at 75% 15%, rgba(0, 212, 255, 0.25), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(118, 64, 217, 0.15), transparent 50%);
  box-shadow:
    0 32px 64px -40px rgba(0, 212, 255, 0.5),
    0 18px 35px -25px rgba(8, 6, 28, 0.85),
    inset 0 1px 0 rgba(0, 212, 255, 0.2);
}

.page-hero--research .page-hero__metrics {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-hero--research .page-hero__metric {
  flex: 1;
  min-width: 120px;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 212, 255, 0.25);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.08), transparent 70%),
    rgba(8, 16, 36, 0.85);
  backdrop-filter: blur(12px);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.page-hero--research .page-hero__metric:hover {
  border-color: rgba(0, 212, 255, 0.45);
  transform: translateY(-2px);
}

/* Active job indicator with pulse */

.page-hero--research .page-hero__metric--active {
  border-color: rgba(199, 255, 95, 0.5);
  box-shadow: 0 0 20px -8px rgba(199, 255, 95, 0.6);
  animation: research-pulse 2s ease-in-out infinite;
}

@keyframes research-pulse {
  0%, 100% { box-shadow: 0 0 20px -8px rgba(199, 255, 95, 0.6); }
  50% { box-shadow: 0 0 30px -6px rgba(199, 255, 95, 0.8); }
}

/* Large metric value with gradient text */

.page-hero--research .page-hero__metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ffffff, rgba(0, 212, 255, 0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================================
   RESEARCH COMPOSE PANEL
   Premium form styling for deep research
   ========================================================================= */

.research-compose-panel {
  border-radius: 22px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.06), transparent 60%),
    linear-gradient(145deg, rgba(10, 16, 42, 0.96), rgba(12, 20, 50, 0.92));
  backdrop-filter: blur(20px);
  box-shadow:
    0 28px 60px -40px rgba(0, 212, 255, 0.5),
    0 16px 32px -28px rgba(8, 6, 28, 0.8);
  padding: 2rem;
  transition: border-color 0.3s ease;
}

.research-compose-panel:focus-within {
  border-color: rgba(0, 212, 255, 0.5);
}

/* Research prompt textarea - larger, more prominent */

.research-prompt-field textarea {
  min-height: 150px;
  font-size: 1.0625rem;
  line-height: 1.65;
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 212, 255, 0.25);
  background: rgba(6, 12, 32, 0.8);
  color: rgba(228, 235, 255, 0.95);
  resize: vertical;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.research-prompt-field textarea:focus {
  outline: none;
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}

.research-prompt-field textarea::-moz-placeholder {
  color: rgba(0, 212, 255, 0.4);
}

.research-prompt-field textarea::placeholder {
  color: rgba(0, 212, 255, 0.4);
}

/* Option pills for checkboxes */

.research-options-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.research-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(118, 64, 217, 0.3);
  background: rgba(16, 20, 60, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
}

.research-option:hover {
  border-color: rgba(0, 212, 255, 0.5);
  background: rgba(26, 32, 82, 0.85);
}

.research-option:has(input:checked) {
  border-color: rgba(0, 212, 255, 0.7);
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.15), transparent 80%),
    rgba(26, 36, 92, 0.9);
  box-shadow: 0 4px 16px -8px rgba(0, 212, 255, 0.5);
}

.research-option label {
  cursor: pointer;
  font-size: 0.875rem;
  color: rgba(228, 235, 255, 0.9);
}

/* Preflight preview callout - special treatment */

.research-preflight-preview {
  border-radius: 18px;
  border: 1px solid rgba(199, 255, 95, 0.4);
  background:
    radial-gradient(circle at 10% 50%, rgba(199, 255, 95, 0.1), transparent 60%),
    linear-gradient(150deg, rgba(12, 20, 40, 0.95), rgba(18, 32, 54, 0.9));
  padding: 1.5rem;
  margin-top: 1rem;
}

.research-preflight-preview .code-block {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  max-height: 300px;
  overflow-y: auto;
  color: rgba(199, 255, 95, 0.9);
}

/* Primary action button with research accent */

.research-compose-panel .button-primary,
.research-compose-panel .button.primary {
  background: linear-gradient(120deg, rgba(0, 150, 200, 0.9), rgba(0, 212, 255, 0.8));
  box-shadow:
    0 18px 35px -20px rgba(0, 212, 255, 0.8),
    0 8px 20px -15px rgba(118, 64, 217, 0.5);
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.research-compose-panel .button-primary:hover,
.research-compose-panel .button.primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 42px -18px rgba(0, 212, 255, 0.9),
    0 12px 28px -14px rgba(118, 64, 217, 0.6);
}

/* ============================================================================
   RESEARCH JOB CARDS
   Status-aware card styling for research queue
   ========================================================================= */

.research-job-card {
  border-radius: 18px;
  border: 1px solid rgba(118, 64, 217, 0.28);
  background:
    radial-gradient(circle at 10% 20%, rgba(0, 212, 255, 0.05), transparent 60%),
    linear-gradient(150deg, rgba(12, 18, 48, 0.9), rgba(16, 22, 56, 0.85));
  backdrop-filter: blur(16px);
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.research-job-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 0 20px 45px -25px rgba(0, 212, 255, 0.5);
}

/* Status variants */

.research-job-card--pending {
  border-color: rgba(118, 64, 217, 0.35);
}

.research-job-card--started {
  border-color: rgba(0, 212, 255, 0.5);
  background:
    radial-gradient(circle at 5% 50%, rgba(0, 212, 255, 0.1), transparent 50%),
    linear-gradient(150deg, rgba(12, 18, 48, 0.92), rgba(16, 28, 62, 0.88));
  animation: research-card-glow 3s ease-in-out infinite;
}

@keyframes research-card-glow {
  0%, 100% { box-shadow: 0 0 20px -12px rgba(0, 212, 255, 0.6); }
  50% { box-shadow: 0 0 35px -10px rgba(0, 212, 255, 0.8); }
}

.research-job-card--success {
  border-color: rgba(52, 211, 153, 0.4);
  background:
    radial-gradient(circle at 95% 10%, rgba(52, 211, 153, 0.08), transparent 50%),
    linear-gradient(150deg, rgba(12, 18, 48, 0.9), rgba(14, 26, 50, 0.85));
}

.research-job-card--failure {
  border-color: rgba(255, 120, 120, 0.4);
  background:
    radial-gradient(circle at 95% 10%, rgba(255, 120, 120, 0.08), transparent 50%),
    linear-gradient(150deg, rgba(20, 14, 48, 0.9), rgba(28, 16, 50, 0.85));
}

/* Card header with status badge */

.research-job-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
}

.research-job-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(228, 235, 255, 0.95);
  line-height: 1.4;
}

.research-job-card__time {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: rgba(228, 235, 255, 0.6);
}

/* Status badges */

.research-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.research-status-badge--pending {
  background: rgba(118, 64, 217, 0.25);
  border: 1px solid rgba(118, 64, 217, 0.5);
  color: rgba(183, 148, 255, 0.95);
}

.research-status-badge--started {
  background: rgba(0, 212, 255, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.5);
  color: rgba(100, 230, 255, 0.95);
  animation: badge-pulse-cyan 2s ease-in-out infinite;
}

@keyframes badge-pulse-cyan {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.research-status-badge--success {
  background: rgba(52, 211, 153, 0.2);
  border: 1px solid rgba(52, 211, 153, 0.5);
  color: rgba(134, 239, 172, 0.95);
}

.research-status-badge--failure {
  background: rgba(255, 120, 120, 0.2);
  border: 1px solid rgba(255, 120, 120, 0.5);
  color: rgba(255, 180, 180, 0.95);
}

/* Metrics row within card */

.research-job-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.research-job-metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(118, 64, 217, 0.15);
}

.research-job-metric__label {
  font-size: 0.6875rem;
  color: rgba(0, 212, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.research-job-metric__value {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(228, 235, 255, 0.9);
}

/* Tool calls chips */

.research-tool-calls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
  list-style: none;
  padding: 0;
}

.research-tool-chip {
  padding: 0.375rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(0, 212, 255, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: rgba(100, 230, 255, 0.95);
}

/* Report output section */

.research-report {
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.research-report__heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(0, 212, 255, 0.8);
  margin: 0 0 0.75rem;
}

/* ============================================================================
   RESEARCH QUEUE PANEL
   ========================================================================= */

.research-queue-panel {
  border-radius: 22px;
  border: 1px solid rgba(0, 212, 255, 0.32);
  background:
    radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.08), transparent 60%),
    linear-gradient(145deg, rgba(10, 16, 42, 0.94), rgba(12, 20, 50, 0.9));
  backdrop-filter: blur(20px);
  box-shadow: 0 28px 60px -40px rgba(8, 5, 28, 0.8);
}

/* Live indicator */

.research-live-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(199, 255, 95, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.research-live-indicator::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(199, 255, 95, 0.9);
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* ============================================================================
   RESEARCH RUNBOOK SIDEBAR
   ========================================================================= */

.research-runbook {
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.25);
  background:
    radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.04), transparent 50%),
    linear-gradient(145deg, rgba(12, 16, 48, 0.88), rgba(16, 20, 54, 0.82));
  backdrop-filter: blur(14px);
  padding: 1.5rem;
}

.research-runbook .checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.research-runbook .checklist li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: rgba(228, 235, 255, 0.85);
  line-height: 1.5;
}

.research-runbook .checklist li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: rgba(0, 212, 255, 0.7);
  font-weight: 600;
}

/* Mobile adjustments */

@media (max-width: 768px) {
  .research-job-card {
    padding: 1.25rem;
  }

  .research-job-card__metrics {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .research-job-metric {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .research-compose-panel {
    padding: 1.25rem;
  }

  .research-options-row {
    flex-direction: column;
  }

  .page-hero--research .page-hero__metrics {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .research-job-card--started,
  .page-hero--research .page-hero__metric--active,
  .research-status-badge--started,
  .research-live-indicator::before {
    animation: none;
  }
}

/* ============================================================================
   RESEARCH FLOW MODAL
   AJAX-driven modal for deep research preflight and submission
   ========================================================================= */

.research-flow-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.research-flow-modal[hidden] {
  display: none;
}

.research-flow-modal .modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 24, 0.85);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.research-flow-modal__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem 2.5rem;
  border-radius: 22px;
  border: 1px solid rgba(118, 64, 217, 0.45);
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 64, 217, 0.15), transparent 60%),
    linear-gradient(145deg, rgba(10, 16, 42, 0.98), rgba(16, 20, 58, 0.96));
  backdrop-filter: blur(24px);
  box-shadow:
    0 40px 80px -40px rgba(118, 64, 217, 0.6),
    0 24px 48px -30px rgba(8, 6, 28, 0.9),
    inset 0 1px 0 rgba(118, 64, 217, 0.25);
}

.research-flow-modal .modal__header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(118, 64, 217, 0.2);
}

.research-flow-modal .modal__header h3 {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  color: var(--text-light, #e4ebff);
}

/* Flow steps */

.research-flow-step {
  text-align: center;
}

.research-flow-step[hidden] {
  display: none;
}

.research-flow-message {
  font-size: 0.95rem;
  color: rgba(228, 235, 255, 0.8);
  margin: 1rem 0 0;
}

.research-flow-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Clarification questions display */

.research-clarifications__content {
  text-align: left;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  background: rgba(118, 64, 217, 0.08);
  border: 1px solid rgba(118, 64, 217, 0.2);
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(228, 235, 255, 0.9);
  max-height: 200px;
  overflow-y: auto;
}

.research-clarifications__input-wrapper {
  text-align: left;
}

.research-clarifications__input {
  width: 100%;
  min-height: 100px;
  padding: 0.875rem;
  border-radius: 10px;
  border: 1px solid rgba(118, 64, 217, 0.35);
  background: rgba(10, 16, 42, 0.9);
  color: var(--text-light, #e4ebff);
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.research-clarifications__input:focus {
  outline: none;
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

.research-clarifications__input::-moz-placeholder {
  color: rgba(228, 235, 255, 0.4);
}

.research-clarifications__input::placeholder {
  color: rgba(228, 235, 255, 0.4);
}

/* Success state */

.research-success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.25rem;
  color: #4ade80;
}

.research-success-icon svg {
  width: 100%;
  height: 100%;
}

.research-flow-step[data-step="success"] h4 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  color: #4ade80;
}

/* Error state */

.research-error-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.25rem;
  color: #f87171;
}

.research-error-icon svg {
  width: 100%;
  height: 100%;
}

.research-flow-step[data-step="error"] h4 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  color: #f87171;
}

.research-error-message {
  font-size: 0.9rem;
  color: rgba(248, 113, 113, 0.9);
  max-width: 90%;
  margin: 0 auto;
}

/* ============================================================================
   COSMIC LOADER
   Animated orbs with floating motion and sparkle effects
   ========================================================================= */

.research-cosmic-loader {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 1.5rem;
}

.research-cosmic-loader--compact {
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem;
}

/* Orbs - floating spheres */

.research-cosmic-loader__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.5px);
  box-shadow:
    0 0 30px currentColor,
    inset 0 0 20px rgba(255, 255, 255, 0.15);
}

.research-cosmic-loader__orb--1 {
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  background: radial-gradient(circle at 30% 30%, #6dd5ff, #00d4ff 50%, #0096c8);
  color: rgba(0, 212, 255, 0.6);
  animation: research-orb-float-1 3s ease-in-out infinite;
}

.research-cosmic-loader__orb--2 {
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  background: radial-gradient(circle at 30% 30%, #c4b5fd, #a78bfa 50%, #7640d9);
  color: rgba(167, 139, 250, 0.6);
  animation: research-orb-float-2 3.5s ease-in-out infinite;
}

.research-cosmic-loader__orb--3 {
  width: 35px;
  height: 35px;
  top: 50%;
  left: 50%;
  background: radial-gradient(circle at 30% 30%, #d4ff70, #c7ff5f 50%, #7cb342);
  color: rgba(199, 255, 95, 0.5);
  animation: research-orb-float-3 2.8s ease-in-out infinite;
}

.research-cosmic-loader--compact .research-cosmic-loader__orb--1 {
  width: 35px;
  height: 35px;
}

.research-cosmic-loader--compact .research-cosmic-loader__orb--2 {
  width: 28px;
  height: 28px;
}

.research-cosmic-loader--compact .research-cosmic-loader__orb--3 {
  width: 24px;
  height: 24px;
}

/* Sparkles */

.research-cosmic-loader__sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px white;
}

.research-cosmic-loader__sparkle--1 {
  top: 20%;
  left: 15%;
  animation: research-sparkle 2s ease-in-out infinite;
}

.research-cosmic-loader__sparkle--2 {
  top: 75%;
  left: 80%;
  animation: research-sparkle 2.3s ease-in-out infinite 0.5s;
}

.research-cosmic-loader__sparkle--3 {
  top: 35%;
  left: 85%;
  animation: research-sparkle 1.8s ease-in-out infinite 1s;
}

/* Orb floating animations */

@keyframes research-orb-float-1 {
  0%, 100% {
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-50%, -50%) translate(35px, -45px) scale(1.05);
  }
  66% {
    transform: translate(-50%, -50%) translate(-40px, 20px) scale(0.95);
  }
}

@keyframes research-orb-float-2 {
  0%, 100% {
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-50%, -50%) translate(-45px, -20px) scale(1.08);
  }
  50% {
    transform: translate(-50%, -50%) translate(15px, 40px) scale(0.92);
  }
  75% {
    transform: translate(-50%, -50%) translate(50px, -10px) scale(1.03);
  }
}

@keyframes research-orb-float-3 {
  0%, 100% {
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  20% {
    transform: translate(-50%, -50%) translate(20px, 35px) scale(1.1);
  }
  40% {
    transform: translate(-50%, -50%) translate(-50px, 15px) scale(0.9);
  }
  60% {
    transform: translate(-50%, -50%) translate(-25px, -40px) scale(1.05);
  }
  80% {
    transform: translate(-50%, -50%) translate(40px, -25px) scale(0.95);
  }
}

@keyframes research-sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .research-cosmic-loader__orb,
  .research-cosmic-loader__sparkle {
    animation: none;
  }

  .research-cosmic-loader__orb--1 {
    transform: translate(-50%, -50%) translate(-30px, -20px);
  }

  .research-cosmic-loader__orb--2 {
    transform: translate(-50%, -50%) translate(25px, -25px);
  }

  .research-cosmic-loader__orb--3 {
    transform: translate(-50%, -50%) translate(0, 30px);
  }

  .research-cosmic-loader__sparkle {
    opacity: 0.6;
  }
}

/* Modal mobile adjustments */

@media (max-width: 600px) {
  .research-flow-modal__content {
    padding: 1.5rem;
    max-width: 100%;
  }

  .research-cosmic-loader {
    width: 140px;
    height: 140px;
  }

  .research-cosmic-loader__orb--1 {
    width: 40px;
    height: 40px;
  }

  .research-cosmic-loader__orb--2 {
    width: 32px;
    height: 32px;
  }

  .research-cosmic-loader__orb--3 {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================================
   REUSABLE COMPONENTS
   Styles for shared component templates
   ========================================================================= */

/* ============================================================================
   PILL / TAG COMPONENT
   Small inline badges for metadata display
   ========================================================================= */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, rgba(118, 64, 217, 0.4), rgba(88, 28, 135, 0.3));
  border: 1px solid rgba(147, 112, 219, 0.3);
  border-radius: 9999px;
  white-space: nowrap;
}

.pill--muted {
  color: rgba(212, 223, 255, 0.7);
  background: rgba(30, 20, 50, 0.5);
  border-color: rgba(147, 112, 219, 0.2);
}

.pill--cyan {
  color: rgba(34, 211, 238, 0.95);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(34, 211, 238, 0.15));
  border-color: rgba(34, 211, 238, 0.3);
}

/* ============================================================================
   PAGE HEADER COMPONENT
   ========================================================================= */

.page-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(118, 64, 217, 0.15);
}

.page-header__eyebrow {
  margin: 0 0 var(--space-xs);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(212, 223, 255, 0.7);
}

.page-header__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.page-header__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.page-header__description {
  margin: var(--space-sm) 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(228, 235, 255, 0.85);
  max-width: 65ch;
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

@media (max-width: 48rem) {
  .page-header__title {
    font-size: 1.5rem;
  }

  .page-header__title-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================================
   LOADING STATE COMPONENT
   ========================================================================= */

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  min-height: 200px;
}

/* Spinner variant */

.loading-state__spinner {
  width: 48px;
  height: 48px;
}

.loading-state--sm .loading-state__spinner {
  width: 32px;
  height: 32px;
}

.loading-state--lg .loading-state__spinner {
  width: 64px;
  height: 64px;
}

.spinner-icon {
  animation: spinner-rotate 2s linear infinite;
}

.spinner-path {
  stroke: rgba(118, 64, 217, 0.85);
  stroke-linecap: round;
  animation: spinner-dash 1.5s ease-in-out infinite;
}

@keyframes spinner-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.loading-state__message {
  margin: var(--space-md) 0 0;
  font-size: 0.9rem;
  color: rgba(228, 235, 255, 0.75);
  text-align: center;
}

/* Skeleton variant */

.loading-state__skeleton {
  width: 100%;
  max-width: 600px;
  padding: var(--space-md);
}

.skeleton-line {
  height: 1rem;
  margin-bottom: var(--space-sm);
  border-radius: 0.25rem;
  background: linear-gradient(
    90deg,
    rgba(118, 64, 217, 0.15) 0%,
    rgba(118, 64, 217, 0.25) 50%,
    rgba(118, 64, 217, 0.15) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-line--title {
  height: 1.5rem;
  width: 60%;
  margin-bottom: var(--space-md);
}

.skeleton-line--text {
  width: 100%;
}

.skeleton-line--short {
  width: 75%;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Pulse variant */

.loading-state--pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ============================================================================
   EMPTY STATE COMPONENT
   ========================================================================= */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  min-height: 320px;
}

.empty-state__icon {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: var(--space-md);
  opacity: 0.75;
}

.empty-state__heading {
  margin: 0 0 var(--space-sm);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

.empty-state__message {
  margin: 0 0 var(--space-lg);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(228, 235, 255, 0.8);
  max-width: 48ch;
}

.empty-state__cta {
  display: flex;
  gap: var(--space-sm);
}

@media (max-width: 48rem) {
  .empty-state {
    padding: var(--space-xl) var(--space-md);
    min-height: 280px;
  }

  .empty-state__icon {
    font-size: 3rem;
  }

  .empty-state__heading {
    font-size: 1.25rem;
  }
}

/* ============================================================================
   CREATIVE GENERATE PROMPT - LOADING OVERLAY
   ========================================================================= */

/* Full-screen loading overlay */

.generate-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.generate-loading-overlay:not([hidden]) {
  display: flex; /* Show when hidden attribute is removed */
}

.generate-loading-content {
  text-align: center;
}

.loading-animation {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 2rem;
}

/* Animated orbs */

.loading-orb {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  opacity: 0.8;
  filter: blur(2px);
}

.loading-orb-1 {
  background: radial-gradient(circle at 30% 30%, #a8edea 0%, #667eea 100%);
  animation: orbFloat1 3s ease-in-out infinite;
}

.loading-orb-2 {
  background: radial-gradient(circle at 30% 30%, #fbc2eb 0%, #a6c1ee 100%);
  animation: orbFloat2 3s ease-in-out infinite 0.5s;
}

.loading-orb-3 {
  background: radial-gradient(circle at 30% 30%, #f093fb 0%, #f5576c 100%);
  animation: orbFloat3 3s ease-in-out infinite 1s;
}

/* Sparkles */

.loading-sparkle {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  animation: sparkle 2s ease-in-out infinite;
}

.loading-sparkle-1 {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.loading-sparkle-2 {
  top: 30%;
  right: 20%;
  animation-delay: 0.7s;
}

.loading-sparkle-3 {
  bottom: 30%;
  left: 30%;
  animation-delay: 1.4s;
}

.loading-message {
  font-size: 1.25rem;
  color: white;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

/* Animations */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes orbFloat1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-30px, 30px) scale(0.9);
  }
}

@keyframes orbFloat2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-35px, -25px) scale(0.9);
  }
  66% {
    transform: translate(35px, 25px) scale(1.1);
  }
}

@keyframes orbFloat3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(25px, 35px) scale(1.1);
  }
  66% {
    transform: translate(-25px, -35px) scale(0.9);
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
}

/* ============================================================================
   EXPANDABLE PANEL COMPONENT
   ========================================================================= */

.panel-expandable {
  border: none;
}

.panel-expandable__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  cursor: pointer;
  list-style: none;
  padding: var(--space-md);
  margin: 0;
  transition: background-color 0.2s ease;
  border-radius: 0.5rem;
}

.panel-expandable__header:hover {
  background: rgba(118, 64, 217, 0.08);
}

.panel-expandable__header::marker,
.panel-expandable__header::-webkit-details-marker {
  display: none;
}

.panel-expandable__header::after {
  content: '›';
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(118, 64, 217, 0.7);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.panel-expandable[open] .panel-expandable__header::after {
  transform: rotate(270deg);
}

.panel-expandable__header h3 {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}

.panel-expandable__header .muted {
  margin: 0;
  font-size: 0.875rem;
}

.panel-expandable__header .badge {
  margin-left: auto;
}

.panel-expandable__content {
  padding: 0 var(--space-md) var(--space-md);
  animation: expandContent 0.2s ease-out;
}

@keyframes expandContent {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 48rem) {
  .panel-expandable__header {
    padding: var(--space-sm);
    flex-wrap: wrap;
  }

  .panel-expandable__header h3 {
    font-size: 1rem;
  }

  .panel-expandable__header .muted {
    font-size: 0.8125rem;
  }

  .panel-expandable__header::after {
    order: -1;
    margin-right: var(--space-sm);
  }

  .panel-expandable__content {
    padding: 0 var(--space-sm) var(--space-sm);
  }
}

/* ============================================================================
   UTILITY CLASSES
   ========================================================================= */

/* Inline form display helper */

.form-inline {
  display: inline;
}

/* Hidden by default - use with data attributes for JS control */

.is-hidden {
  display: none !important;
}

/* Spacing utilities */

.mt-xs {
  margin-top: 0.25rem;
}

.mt-sm {
  margin-top: 0.5rem;
}

.mb-xs {
  margin-bottom: 0.25rem;
}

.mb-md {
  margin-bottom: 1rem;
}

/* List reset */

.list-reset {
  list-style: none;
  padding-left: 0;
}

/* Font size small */

.text-xs {
  font-size: 0.75rem;
}

/* Font utilities */

.font-weight-normal {
  font-weight: normal;
}

.text-sm {
  font-size: 0.8125rem;
}

/* List utilities */

.list-style-inside {
  padding-left: 1.5rem;
}

/* ============================================================================
   RESEARCH OUTPUT COMPONENT
   Collapsible sections for long research reports
   ========================================================================= */

.research-output {
  margin-top: var(--space-md);
}

.research-output__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
}

.research-output__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(0, 212, 255, 0.8);
}

.research-output__controls {
  display: flex;
  gap: var(--space-xs);
}

.research-output__btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(228, 235, 255, 0.7);
  background: transparent;
  border: 1px solid rgba(118, 64, 217, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.research-output__btn:hover {
  color: rgba(228, 235, 255, 0.95);
  border-color: rgba(0, 212, 255, 0.5);
  background: rgba(0, 212, 255, 0.1);
}

.research-output__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Individual section */

.research-section {
  border-radius: 12px;
  border: 1px solid rgba(118, 64, 217, 0.2);
  background: rgba(16, 20, 60, 0.6);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.research-section:hover,
.research-section[open] {
  border-color: rgba(118, 64, 217, 0.35);
}

.research-section--intro {
  border-color: rgba(199, 255, 95, 0.25);
}

.research-section--intro:hover,
.research-section--intro[open] {
  border-color: rgba(199, 255, 95, 0.4);
}

/* Section header (summary) */

.research-section__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.research-section__summary::-webkit-details-marker {
  display: none;
}

.research-section__summary:hover {
  background: rgba(118, 64, 217, 0.08);
}

.research-section__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(228, 235, 255, 0.95);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Expand/collapse indicator */

.research-section__indicator {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(118, 64, 217, 0.7);
  transition: transform 0.2s ease;
}

.research-section__indicator::before {
  content: '\203A';
  font-size: 1.25rem;
  font-weight: 700;
  transform: rotate(90deg);
  display: block;
}

.research-section[open] .research-section__indicator::before {
  transform: rotate(270deg);
}

/* Section content */

.research-section__content {
  padding: 0 var(--space-md) var(--space-md);
  animation: research-section-expand 0.2s ease-out;
}

@keyframes research-section-expand {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pre-formatted text inside sections */

.research-section__text {
  margin: 0;
  padding: var(--space-sm);
  border-radius: 8px;
  background: rgba(8, 12, 42, 0.8);
  color: rgba(228, 235, 255, 0.9);
  font-family: "Fira Code", "SFMono-Regular", ui-monospace, "Menlo", monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 60vh;
  overflow-y: auto;
}

/* Simple/fallback display */

.research-output__simple .research-section__text {
  max-height: 80vh;
}

/* ============================================================================
   RESEARCH FILTERS COMPONENT
   ========================================================================= */

.research-filters {
  padding: var(--space-md);
  border-bottom: 1px solid rgba(118, 64, 217, 0.15);
}

.research-filters__row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.research-filters__search {
  flex: 1 1 200px;
  min-width: 0;
}

.research-filters__status {
  flex: 0 0 auto;
  min-width: 140px;
}

.research-filters__input,
.research-filters__select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: rgba(10, 10, 30, 0.5);
  border: 1px solid rgba(118, 64, 217, 0.25);
  border-radius: 0.5rem;
  color: rgba(228, 235, 255, 0.95);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.research-filters__input:focus,
.research-filters__select:focus {
  outline: none;
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.15);
}

.research-filters__input::-moz-placeholder {
  color: rgba(228, 235, 255, 0.4);
}

.research-filters__input::placeholder {
  color: rgba(228, 235, 255, 0.4);
}

.research-filters__toggle {
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: rgba(228, 235, 255, 0.75);
  background: transparent;
  border: 1px solid rgba(118, 64, 217, 0.25);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.research-filters__toggle:hover {
  color: rgba(228, 235, 255, 0.95);
  border-color: rgba(0, 212, 255, 0.5);
  background: rgba(0, 212, 255, 0.08);
}

.research-filters__advanced {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(118, 64, 217, 0.1);
  display: flex;
  gap: var(--space-md);
  align-items: flex-end;
  flex-wrap: wrap;
}

.research-filters__dates {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.research-filters__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: rgba(228, 235, 255, 0.7);
}

.research-filters__clear {
  margin-left: auto;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: rgba(255, 120, 120, 0.85);
  background: transparent;
  border: 1px solid rgba(255, 120, 120, 0.3);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.research-filters__clear:hover {
  color: rgba(255, 120, 120, 1);
  border-color: rgba(255, 120, 120, 0.6);
  background: rgba(255, 120, 120, 0.1);
}

/* Load more button */

.research-load-more {
  padding: var(--space-md);
  text-align: center;
}

.research-load-more__btn {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(228, 235, 255, 0.85);
  background: rgba(118, 64, 217, 0.15);
  border: 1px solid rgba(118, 64, 217, 0.35);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.research-load-more__btn:hover {
  background: rgba(0, 212, 255, 0.15);
  border-color: rgba(0, 212, 255, 0.5);
  color: rgba(228, 235, 255, 0.95);
}

.research-load-more__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Filter active indicator */

.research-filters__row[data-has-filters="true"]::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.8);
  flex-shrink: 0;
}

/* Mobile responsive */

@media (max-width: 48rem) {
  .research-filters__row {
    flex-direction: column;
    align-items: stretch;
  }

  .research-filters__search,
  .research-filters__status {
    flex: 1 1 auto;
    min-width: 100%;
  }

  .research-filters__dates {
    flex-direction: column;
  }

  .research-filters__advanced {
    flex-direction: column;
    align-items: stretch;
  }

  .research-filters__clear {
    margin-left: 0;
  }

  .research-section__summary {
    padding: var(--space-xs) var(--space-sm);
  }

  .research-section__content {
    padding: 0 var(--space-sm) var(--space-sm);
  }

  .research-section__text {
    font-size: 0.8rem;
    max-height: 50vh;
  }

  .research-output__controls {
    flex-wrap: wrap;
  }
}

/* Reduced motion preference */

@media (prefers-reduced-motion: reduce) {
  .research-section,
  .research-section__indicator {
    transition: none;
  }

  .research-section__content {
    animation: none;
  }
}

/* ============================================================================
   OFFLINE INDICATOR COMPONENT
   Visual feedback for network status and pending sync items
   ========================================================================= */

.offline-indicator {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem var(--space-md);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.95), rgba(217, 119, 6, 0.95));
  color: #1a1a1a;
  text-align: center;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.offline-indicator--offline {
  transform: translateY(0);
}

.offline-indicator[hidden] {
  display: none;
}

.offline-indicator__icon {
  font-size: 1.125rem;
  line-height: 1;
}

.offline-indicator__text {
  flex: 0 1 auto;
}

.offline-indicator__badge {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 9999px;
}

.offline-indicator__badge[hidden] {
  display: none;
}

/* Syncing state */

.offline-indicator--syncing {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
  color: #ffffff;
}

.offline-indicator--syncing .offline-indicator__icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mobile safe area padding */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .offline-indicator {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
}

/* ============================================================================
   SWIPE GESTURE FEEDBACK
   Visual indicators during swipe interactions
   ========================================================================= */

.swipe-target {
  position: relative;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.swipe-target--swiping {
  transition: none;
}

.swipe-target__content {
  position: relative;
  z-index: 1;
  background: inherit;
  transition: transform 0.2s ease-out;
}

.swipe-target--swiping .swipe-target__content {
  transition: none;
}

/* Swipe action backgrounds revealed during swipe */

.swipe-action {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.swipe-action--left {
  left: 0;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.9), rgba(239, 68, 68, 0.7));
  color: #ffffff;
  padding-left: var(--space-sm);
}

.swipe-action--right {
  right: 0;
  background: linear-gradient(270deg, rgba(34, 197, 94, 0.9), rgba(34, 197, 94, 0.7));
  color: #ffffff;
  padding-right: var(--space-sm);
}

.swipe-target--swiping .swipe-action {
  opacity: 1;
}

/* Threshold reached state */

.swipe-action--triggered {
  font-weight: 700;
}

.swipe-action--left.swipe-action--triggered {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.95), rgba(220, 38, 38, 0.8));
}

.swipe-action--right.swipe-action--triggered {
  background: linear-gradient(270deg, rgba(22, 163, 74, 0.95), rgba(22, 163, 74, 0.8));
}

/* Touch target minimum size (48px) */

.touch-target {
  min-height: 48px;
  min-width: 48px;
}

/* Activity card touch enhancements */

.activity-card {
  min-height: 48px;
}

.activity-card__checkbox {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reduced motion - disable swipe animations */

@media (prefers-reduced-motion: reduce) {
  .offline-indicator {
    transition: none;
  }

  .swipe-target__content {
    transition: none;
  }

  .swipe-action {
    transition: none;
  }

  .offline-indicator--syncing .offline-indicator__icon {
    animation: none;
  }
}

/* ============================================================
   Voice Button Component - Inline variant
   ============================================================ */

.voice-capture--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.voice-capture--inline .voice-capture__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.voice-capture--inline .voice-capture__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.voice-capture--inline .voice-capture__icon {
  display: flex;
  width: 1rem;
  height: 1rem;
}

.voice-capture--inline .voice-capture__icon svg {
  width: 100%;
  height: 100%;
}

.voice-capture--inline .voice-capture__meter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.voice-capture--inline .voice-capture__timer {
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.voice-capture--inline .voice-capture__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-success);
  animation: voice-pulse 1s ease-in-out infinite;
}

.voice-capture--inline .voice-capture__status {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.75rem;
}

@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================================
   MINDMAP COMPONENTS
   Styles for mindmap hub, editor, and viewer
   ========================================================================= */

/* Hub action cards */

.mindmap-actions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}

.mindmap-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-lg);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-lg);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mindmap-action-card--button {
  padding: 0;
  margin: 0;
}

.mindmap-action-card__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-lg);
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mindmap-action-card:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

.mindmap-action-card__icon {
  font-size: 2rem;
  line-height: 1;
  color: rgba(124, 58, 237, 0.9);
}

.mindmap-action-card strong {
  font-size: 1rem;
  color: var(--color-text);
}

/* Stats display */

.mindmap-stats {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.mindmap-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mindmap-stat__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
}

.mindmap-stat__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mindmap canvas */

.mindmap-canvas {
  position: relative;
  width: 100%;
  height: clamp(24rem, calc(100vh - 24rem), 46rem);
  min-height: 360px;
  background: rgba(10, 5, 20, 0.55);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.mindmap-canvas--edit {
  height: clamp(30rem, calc(100vh - 22rem), 56rem);
  min-height: 520px;
}

.mindmap-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(118, 64, 217, 0.22), transparent 55%),
    radial-gradient(circle at 80% 12%, rgba(199, 255, 95, 0.12), transparent 60%),
    radial-gradient(circle at 50% 92%, rgba(246, 220, 255, 0.12), transparent 62%),
    repeating-linear-gradient(
      0deg,
      rgba(120, 134, 255, 0.09) 0 1px,
      transparent 1px 46px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(120, 134, 255, 0.08) 0 1px,
      transparent 1px 46px
    );
  opacity: 0.7;
  pointer-events: none;
}

.mindmap-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(12, 16, 48, 0.05), rgba(6, 5, 28, 0.3));
  opacity: 0.9;
  pointer-events: none;
}

.mindmap-canvas > * {
  position: relative;
  z-index: 1;
}

.mindmap-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-text-muted);
  font-size: 1rem;
  z-index: 2;
}

/* Editor toolbar */

.mindmap-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(147, 112, 219, 0.2);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.toolbar-group--right {
  margin-left: auto;
}

.mindmap-editor-toolbar .button-sm {
  min-height: 2.5rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.8125rem;
}

.mindmap-toolbar-icon {
  width: 2.65rem;
  padding: 0;
}

.mindmap-toolbar-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.save-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.18);
  background: rgba(12, 16, 48, 0.45);
  color: rgba(228, 235, 255, 0.82);
}

.save-status::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(148, 163, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(148, 163, 255, 0.12);
}

.save-status--saved::before {
  background: rgba(199, 255, 95, 0.9);
  box-shadow: 0 0 0 4px rgba(199, 255, 95, 0.14);
}

.save-status--saving::before {
  background: rgba(129, 226, 255, 0.9);
  box-shadow: 0 0 0 4px rgba(129, 226, 255, 0.14);
}

.save-status--unsaved::before {
  background: rgba(246, 220, 255, 0.9);
  box-shadow: 0 0 0 4px rgba(246, 220, 255, 0.14);
}

.save-status--error::before {
  background: rgba(255, 105, 180, 0.85);
  box-shadow: 0 0 0 4px rgba(255, 105, 180, 0.14);
}

.mindmap-editor-header {
  position: relative;
}

.mindmap-shortcuts-popover {
  position: absolute;
  right: 1.25rem;
  top: calc(100% - 0.25rem);
  width: min(360px, 92vw);
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(12, 16, 48, 0.92);
  border: 1px solid rgba(148, 163, 255, 0.22);
  box-shadow: 0 24px 60px -45px rgba(0, 0, 0, 0.75);
  z-index: 20;
}

.mindmap-shortcuts-popover[hidden] {
  display: none;
}

.mindmap-shortcuts-popover h3 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.mindmap-shortcuts-popover ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.mindmap-shortcuts-popover li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: rgba(228, 235, 255, 0.82);
}

.mindmap-shortcuts-popover kbd {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.5rem;
  background: rgba(148, 163, 255, 0.12);
  border: 1px solid rgba(148, 163, 255, 0.22);
  color: rgba(245, 246, 255, 0.9);
  white-space: nowrap;
}

.mindmap-workspace {
  width: 100%;
  padding: var(--space-md);
}

.mindmap-workspace--fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: max(var(--container-inline-padding), env(safe-area-inset-left));
  padding-right: max(var(--container-inline-padding), env(safe-area-inset-right));
}

.mindmap-workspace__layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}

.mindmap-workspace__layout[data-sidebar="closed"] {
  grid-template-columns: minmax(0, 1fr);
}

.mindmap-workspace__layout[data-sidebar="closed"] .mindmap-sidebar {
  display: none;
}

.mindmap-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(12, 16, 48, 0.5);
  border: 1px solid rgba(148, 163, 255, 0.16);
  overflow: hidden;
}

.mindmap-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.mindmap-sidebar__header h3 {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(245, 246, 255, 0.9);
}

.mindmap-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mindmap-sidebar__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.mindmap-outline {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.35rem;
  border-radius: 0.75rem;
  background: rgba(6, 5, 28, 0.35);
  border: 1px solid rgba(148, 163, 255, 0.12);
}

.mindmap-outline__tree,
.mindmap-outline__children {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.mindmap-outline__children {
  margin-left: 0.65rem;
  padding-left: 0.65rem;
  border-left: 1px solid rgba(148, 163, 255, 0.14);
}

.mindmap-outline li {
  margin: 0;
}

.mindmap-outline__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  padding: 0.35rem 0.55rem;
  border-radius: 0.6rem;
  border: 0;
  background: transparent;
  color: rgba(228, 235, 255, 0.82);
  cursor: pointer;
  font: inherit;
}

.mindmap-outline__item:hover,
.mindmap-outline__item:focus-visible {
  background: rgba(118, 64, 217, 0.22);
  outline: none;
}

.mindmap-outline__item.is-active {
  background: rgba(199, 255, 95, 0.16);
  box-shadow: inset 0 0 0 1px rgba(199, 255, 95, 0.28);
  color: rgba(245, 246, 255, 0.94);
}

.mindmap-outline__depth {
  display: inline-flex;
  width: 1.35rem;
  justify-content: center;
  color: rgba(148, 163, 255, 0.6);
  font-variant-numeric: tabular-nums;
}

.mindmap-quick-add textarea {
  width: 100%;
  min-height: 5.25rem;
  resize: vertical;
}

.mindmap-quick-add__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mindmap-organize__preview {
  margin-top: var(--space-sm);
  padding: 0.75rem;
  border-radius: 0.9rem;
  background: rgba(6, 5, 28, 0.32);
  border: 1px solid rgba(148, 163, 255, 0.14);
}

.mindmap-organize__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.mindmap-organize__item {
  padding: 0.45rem 0.6rem;
  border-radius: 0.75rem;
  background: rgba(118, 64, 217, 0.12);
  border: 1px solid rgba(148, 163, 255, 0.14);
  color: rgba(245, 246, 255, 0.9);
  font-size: 0.88rem;
}

.mindmap-organize__item--more {
  opacity: 0.72;
}

.mindmap-organize__success {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mindmap-link-list {
  margin-top: var(--space-sm);
  padding: 0.75rem;
  border-radius: 0.9rem;
  background: rgba(6, 5, 28, 0.32);
  border: 1px solid rgba(148, 163, 255, 0.14);
}

.mindmap-link-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.mindmap-link-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.75rem;
  background: rgba(118, 64, 217, 0.12);
  border: 1px solid rgba(148, 163, 255, 0.14);
  color: rgba(245, 246, 255, 0.9);
  font-size: 0.9rem;
}

.mindmap-stage {
  position: relative;
  min-width: 0;
}

.mindmap-minimap {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 220px;
  height: 150px;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(6, 5, 28, 0.62);
  border: 1px solid rgba(148, 163, 255, 0.18);
  box-shadow: 0 18px 45px -36px rgba(0, 0, 0, 0.7);
  z-index: 5;
}

.mindmap-minimap[hidden] {
  display: none;
}

.mindmap-minimap__content {
  position: absolute;
  inset: 0;
  opacity: 0.95;
}

.mindmap-minimap__viewport {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(199, 255, 95, 0.55);
  border-radius: 0.65rem;
  pointer-events: auto;
}

@media (max-width: 960px) {
  .mindmap-workspace__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .mindmap-sidebar {
    position: absolute;
    z-index: 15;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .mindmap-workspace__layout[data-sidebar="closed"] .mindmap-sidebar {
    display: none;
  }
}

/* Editor meta form */

.mindmap-editor-meta .form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
}

.form-group--inline {
  flex: 0 0 auto;
}

.form-group--grow {
  flex: 1 1 200px;
}

/* Format info grid */

.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.format-card {
  padding: var(--space-md);
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-md);
}

.format-card strong {
  display: block;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

/* Detail header */

.mindmap-meta {
  display: flex;
  gap: var(--space-lg);
  margin: var(--space-md) 0;
}

.mindmap-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Empty state */

.empty-state {
  text-align: center;
  padding: var(--space-xl);
}

.empty-state__icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.empty-state__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ========================================
   Brainmap.js Integration Styles
   Overrides for cosmic glassmorphic theme
   ======================================== */

.mindmap-canvas--brainmap {
  /* Override brainmap.js default background with cosmic theme */
  --mindmap-bg-primary: transparent;
  --mindmap-bg-secondary: rgba(12, 16, 48, 0.92);
  --mindmap-color-link: rgba(118, 64, 217, 0.5);
  --mindmap-color-text: var(--color-text-primary);

  /* Cosmic theme node colors */
  --mindmap-color-root: linear-gradient(135deg, var(--color-iris) 0%, rgba(118, 64, 217, 0.8) 100%);
  --mindmap-color-root-stroke: var(--color-seed);
  --mindmap-color-root-text: var(--color-text-primary);

  --mindmap-color-branch: linear-gradient(135deg, var(--color-petal) 0%, rgba(246, 220, 255, 0.7) 100%);
  --mindmap-color-branch-stroke: var(--color-iris);
  --mindmap-color-branch-text: #1a1a2e;

  --mindmap-color-leaf: linear-gradient(135deg, var(--color-seed) 0%, rgba(199, 255, 95, 0.7) 100%);
  --mindmap-color-leaf-stroke: var(--color-iris);
  --mindmap-color-leaf-text: #1a1a2e;
}

.mindmap-canvas--brainmap .mindmap-container {
  background: transparent !important;
}

.mindmap-canvas--brainmap .mindmap-context-menu {
  background: rgba(12, 16, 48, 0.95);
  border: 1px solid rgba(148, 163, 255, 0.22);
  backdrop-filter: blur(16px);
}

.mindmap-canvas--brainmap .mindmap-context-menu-item {
  color: var(--color-text-primary);
  border-bottom-color: rgba(148, 163, 255, 0.12);
}

.mindmap-canvas--brainmap .mindmap-context-menu-item:hover {
  background: rgba(118, 64, 217, 0.25);
  color: var(--color-seed);
}

.mindmap-canvas--brainmap .mindmap-context-menu-item.dangerous {
  color: #f87171;
}

.mindmap-canvas--brainmap .mindmap-context-menu-item.dangerous:hover {
  background: rgba(248, 113, 113, 0.15);
  color: #fca5a5;
}

.mindmap-canvas--brainmap .mindmap-edit-input {
  background: rgba(12, 16, 48, 0.95);
  border-color: var(--color-iris);
  color: var(--color-text-primary);
  backdrop-filter: blur(8px);
}

.mindmap-canvas--brainmap .mindmap-modal-overlay {
  background: rgba(6, 5, 28, 0.8);
  backdrop-filter: blur(8px);
}

.mindmap-canvas--brainmap .mindmap-modal {
  background: rgba(12, 16, 48, 0.96);
  border: 1px solid rgba(148, 163, 255, 0.22);
  backdrop-filter: blur(16px);
}

.mindmap-canvas--brainmap .mindmap-modal-title {
  color: var(--color-text-primary);
}

.mindmap-canvas--brainmap .mindmap-modal-input {
  background: rgba(6, 5, 28, 0.5);
  border-color: rgba(148, 163, 255, 0.22);
  color: var(--color-text-primary);
}

.mindmap-canvas--brainmap .mindmap-modal-input:focus {
  border-color: var(--color-iris);
  box-shadow: 0 0 0 3px rgba(118, 64, 217, 0.2);
}

.mindmap-canvas--brainmap .mindmap-modal-btn.primary {
  background: var(--color-iris);
  color: var(--color-text-primary);
}

.mindmap-canvas--brainmap .mindmap-modal-btn.primary:hover {
  background: rgba(118, 64, 217, 0.85);
}

.mindmap-canvas--brainmap .mindmap-modal-btn.secondary {
  background: rgba(148, 163, 255, 0.12);
  border-color: rgba(148, 163, 255, 0.22);
  color: var(--color-text-secondary);
}

.mindmap-canvas--brainmap .mindmap-modal-btn.secondary:hover {
  background: rgba(148, 163, 255, 0.22);
}

.mindmap-canvas--brainmap .mindmap-status {
  background: rgba(12, 16, 48, 0.9);
  color: var(--color-text-secondary);
  border: 1px solid rgba(148, 163, 255, 0.16);
}

/* Outline search match highlighting */

.mindmap-outline__item.is-match {
  background: rgba(199, 255, 95, 0.12);
  box-shadow: inset 0 0 0 1px rgba(199, 255, 95, 0.22);
}

.mindmap-outline__item.is-match.is-active {
  background: rgba(199, 255, 95, 0.22);
  box-shadow: inset 0 0 0 1px rgba(199, 255, 95, 0.42);
}

/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

:root {
    color-scheme: dark;
    font-family: "Inter", "PP Neue Montreal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    font-size: clamp(0.95rem, 0.92rem + 0.25vw, 1.05rem);
    --space-2xs: clamp(0.5rem, 0.46rem + 0.4vw, 0.75rem);
    --space-xs: clamp(0.75rem, 0.7rem + 0.45vw, 1.1rem);
    --space-sm: clamp(1rem, 0.92rem + 0.6vw, 1.5rem);
    --space-md: clamp(1.5rem, 1.32rem + 0.9vw, 2.25rem);
    --space-lg: clamp(2rem, 1.75rem + 1.25vw, 3rem);
    --space-xl: clamp(2.75rem, 2.4rem + 1.6vw, 4rem);
    --container-inline-padding: clamp(1.25rem, 0.9rem + 3vw, 2.75rem);
    --container-max-width: 78rem;
    --type-display: clamp(1.9rem, 1.72rem + 1.4vw, 2.75rem);
    --type-heading: clamp(1.35rem, 1.24rem + 0.7vw, 1.85rem);
    --type-subheading: clamp(1.1rem, 1.02rem + 0.45vw, 1.4rem);
    --type-body: clamp(0.97rem, 0.94rem + 0.15vw, 1.08rem);
    --color-midnight: #06051c;
    --color-ink: #0c1030;
    --color-iris: #7640d9;
    --color-petal: #f6dcff;
    --color-petal-soft: rgba(246, 220, 255, 0.45);
    --color-seed: #c7ff5f;
    --color-veil: rgba(13, 19, 56, 0.6);
    --color-text-primary: #f5f6ff;
    --color-text-secondary: rgba(225, 226, 255, 0.72);
    --color-panel-border: rgba(155, 118, 255, 0.36);
    --color-panel-shadow: rgba(8, 5, 28, 0.65);
    --color-grid-line: rgba(120, 134, 255, 0.16);
    --pointer-x: 0.5;
    --pointer-y: 0.5;
    --scroll-progress: 0;
    --pointer-angle: 0;
    --pointer-distance: 0;
    --scroll-wave: 0;
    /* Diagnostics Console RGB Variables */
    --color-border: 155, 118, 255;
    --color-surface: 16, 20, 60;
    --color-surface-hover: 26, 32, 82;
    --color-primary: 118, 64, 217;
    --color-text: 245, 246, 255;
    --color-text-muted: 159, 162, 200;
    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
  }

body {
    margin: 0;
    font-size: var(--type-body);
    background-color: var(--color-midnight);
  }

body.op-body {
    min-height: 100vh;
    color: var(--color-text-primary);
    overflow-x: hidden;
    position: relative;
    background-image:
      radial-gradient(circle at calc(var(--pointer-x, 0.5) * 100%) calc(var(--pointer-y, 0.5) * 100%), rgba(246, 220, 255, 0.16 + var(--pointer-distance, 0) * 0.06), transparent 52%),
      radial-gradient(circle at 12% 18%, rgba(199, 255, 95, 0.12 + var(--scroll-progress, 0) * 0.08), transparent 58%),
      radial-gradient(circle at 82% 12%, rgba(118, 64, 217, 0.18), transparent 60%),
      conic-gradient(from calc(var(--pointer-angle, 0) * 1rad) at 50% 50%, rgba(118, 64, 217, 0.08) 0deg 120deg, rgba(6, 5, 28, 0) 180deg),
      linear-gradient(135deg, rgba(12, 16, 48, 0.82), rgba(6, 5, 28, 0.94));
    background-attachment: fixed;
    transition: background-position 0.6s ease, background-image 0.6s ease;
  }

body.op-body.fatigue-mode {
    background-attachment: scroll;
  }

body.op-body.fatigue-mode *,
  body.op-body.fatigue-mode *::before,
  body.op-body.fatigue-mode *::after {
    animation: none !important;
    transition: none !important;
  }

body.op-body.fatigue-mode .op-art-backdrop {
    opacity: 0.55;
  }

body.op-body.fatigue-mode .button,
  body.op-body.fatigue-mode button {
    min-height: 3.25rem;
    padding: 0.9rem 1.85rem;
  }

body.op-body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 120%, rgba(12, 16, 48, 0.72), transparent 70%);
    z-index: 0;
  }

a {
    color: #9fb9ff;
    text-decoration: none;
  }

a:hover,
  a:focus {
    color: #cfe2ff;
    text-decoration: underline;
  }

strong {
    color: #ffffff;
  }

@media (prefers-reduced-motion: reduce) {
    body.op-body {
      transition: none;
      background-attachment: scroll;
    }
  }

@media (hover: none) and (pointer: coarse) {
    body.op-body {
      background-attachment: scroll;
      background-image:
        radial-gradient(circle at 50% 18%, rgba(118, 64, 217, 0.18), transparent 60%),
        linear-gradient(155deg, rgba(12, 16, 48, 0.96), rgba(6, 5, 28, 0.98));
    }

    body.op-body::before {
      position: absolute;
      opacity: 0.38;
    }
  }

@media (max-width: 600px) {
    body.op-body {
      background-attachment: scroll;
      background-image:
        radial-gradient(circle at 50% 12%, rgba(118, 64, 217, 0.18), transparent 58%),
        linear-gradient(165deg, rgba(10, 13, 38, 0.96), rgba(5, 6, 22, 0.98));
    }

    body.op-body::before {
      opacity: 0.34;
    }
  }

.motion-ready [data-motion-depth] {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(
        calc(var(--motion-translate-x, 0px)),
        calc(var(--motion-translate-y, 0px) + 28px),
        0
      );
  }

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

.container {
  width: 100%;
}

@media (min-width: 480px) {

  .container {
    max-width: 480px;
  }
}

@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}

.diagnostics-console__main,
  .diagnostics-console__sidebar {
    margin: 0;
  }

.diagnostics-console__entries {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

.diagnostics-console__sidebar-header {
    margin-bottom: var(--space-sm);
  }

.diagnostics-console__sidebar-header h2 {
    margin: 0 0 0.35rem;
    font-size: var(--type-subheading);
  }

.diagnostics-console__sidebar-header p {
    margin: 0;
    color: var(--color-text-secondary);
  }

.diagnostics-console__doc-link.is-active {
    border-color: rgba(199, 255, 95, 0.65);
    background: rgba(17, 24, 70, 0.85);
    box-shadow: inset 0 0 0 1px rgba(199, 255, 95, 0.35);
  }

@media (max-width: 1024px) {
    .diagnostics-console {
      grid-template-columns: 1fr;
    }

    .diagnostics-console__sidebar {
      order: -1;
    }
  }

/* Three-panel layout with collapsible sidebars */

.diagnostics-console {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: 100vh;
    gap: 0;
    max-height: 100vh;
    overflow: hidden;
  }

.diagnostics-console.has-doc-viewer {
    grid-template-columns: 320px 1fr 320px;
  }

/* Sidebars */

.diagnostics-console__sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    border-right: 1px solid rgb(var(--color-border) / 0.1);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

.diagnostics-console__sidebar--right {
    border-right: none;
    border-left: 1px solid rgb(var(--color-border) / 0.1);
  }

.diagnostics-console__sidebar.is-collapsed {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
  }

.diagnostics-console__sidebar--right.is-collapsed {
    transform: translateX(100%);
  }

.diagnostics-console__sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid rgb(var(--color-border) / 0.1);
    background: rgb(var(--color-surface) / 0.5);
  }

.diagnostics-console__sidebar-header h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
  }

.diagnostics-console__collapse-btn {
    background: none;
    border: none;
    color: rgb(var(--color-text-muted));
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
  }

.diagnostics-console__collapse-btn:hover {
    background: rgb(var(--color-surface-hover));
    color: rgb(var(--color-text));
  }

/* Tabs */

.diagnostics-console__tabs {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border-bottom: 1px solid rgb(var(--color-border) / 0.1);
    background: rgb(var(--color-surface) / 0.3);
  }

.diagnostics-console__tab {
    flex: 1;
    background: none;
    border: none;
    color: rgb(var(--color-text-muted));
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
  }

.diagnostics-console__tab:hover {
    background: rgb(var(--color-surface-hover));
    color: rgb(var(--color-text));
  }

.diagnostics-console__tab.is-active {
    background: rgb(var(--color-primary));
    color: white;
  }

/* Tab panels */

.diagnostics-console__tab-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
  }

.diagnostics-console__tab-panel.is-active {
    display: flex;
  }

/* Search box */

.diagnostics-console__search-box {
    padding: var(--space-md);
    border-bottom: 1px solid rgb(var(--color-border) / 0.1);
  }

.diagnostics-console__search-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid rgb(var(--color-border) / 0.2);
    border-radius: var(--radius-md);
    background: rgb(var(--color-surface));
    color: rgb(var(--color-text));
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
  }

.diagnostics-console__search-input:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.1);
  }

/* File list */

.diagnostics-console__file-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
  }

.diagnostics-console__file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    margin-bottom: var(--space-xs);
  }

.diagnostics-console__file-item:hover {
    background: rgb(var(--color-surface-hover));
  }

.diagnostics-console__file-item.is-active {
    background: rgb(var(--color-primary) / 0.1);
    border-left: 3px solid rgb(var(--color-primary));
  }

.diagnostics-console__file-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
    min-width: 0;
  }

.diagnostics-console__file-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-text));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.diagnostics-console__file-meta {
    font-size: var(--font-size-xs);
    color: rgb(var(--color-text-muted));
  }

.diagnostics-console__file-icon {
    color: rgb(var(--color-text-muted));
    flex-shrink: 0;
  }

/* Documentation tree */

.diagnostics-console__doc-tree {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
  }

.diagnostics-console__tree-file.is-active {
    background: rgb(var(--color-primary) / 0.1);
    color: rgb(var(--color-primary));
  }

/* Main content */

.diagnostics-console__main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

.diagnostics-console__main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid rgb(var(--color-border) / 0.1);
    background: rgb(var(--color-surface) / 0.5);
    gap: var(--space-md);
  }

.diagnostics-console__title-area h1 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0;
  }

.diagnostics-console__subtitle {
    font-size: var(--font-size-sm);
    color: rgb(var(--color-text-muted));
    margin: var(--space-xs) 0 0 0;
  }

.diagnostics-console__main-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
  }

/* Filter bar */

.diagnostics-console__filter-bar {
    border-bottom: 1px solid rgb(var(--color-border) / 0.1);
    background: rgb(var(--color-surface) / 0.3);
    padding: var(--space-md);
  }

.diagnostics-console__filter-row {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
  }

.diagnostics-console__filter-row:last-child {
    margin-bottom: 0;
  }

.diagnostics-console__filter-row--secondary {
    padding-top: var(--space-sm);
    border-top: 1px solid rgb(var(--color-border) / 0.1);
  }

.diagnostics-console__filter-group {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
  }

.diagnostics-console__filter-group--grow {
    flex: 1;
  }

.diagnostics-console__filter-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: rgb(var(--color-text));
    white-space: nowrap;
  }

.diagnostics-console__filter-input {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid rgb(var(--color-border) / 0.2);
    border-radius: var(--radius-md);
    background: rgb(var(--color-surface));
    color: rgb(var(--color-text));
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
  }

.diagnostics-console__filter-input--number {
    width: 80px;
  }

.diagnostics-console__filter-input:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.1);
  }

.diagnostics-console__filter-select {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid rgb(var(--color-border) / 0.2);
    border-radius: var(--radius-md);
    background: rgb(var(--color-surface));
    color: rgb(var(--color-text));
    font-size: var(--font-size-sm);
    min-width: 150px;
  }

.diagnostics-console__checkbox-group {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
  }

.diagnostics-console__checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: rgb(var(--color-text));
    cursor: pointer;
  }

.diagnostics-console__checkbox-label input[type="checkbox"] {
    cursor: pointer;
  }

.diagnostics-console__clear-filters {
    margin-left: auto;
  }

.diagnostics-console__filter-status {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-text-muted));
  }

.diagnostics-console__result-count {
    font-weight: 500;
  }

.diagnostics-console__filter-indicator {
    padding: var(--space-xs) var(--space-sm);
    background: rgb(var(--color-primary) / 0.1);
    color: rgb(var(--color-primary));
    border-radius: var(--radius-md);
    font-weight: 500;
  }

/* Log content */

.diagnostics-console__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    position: relative;
  }

.diagnostics-console__entries {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

/* Loading state */

.diagnostics-console__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    color: rgb(var(--color-text-muted));
  }

.diagnostics-console__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgb(var(--color-border) / 0.2);
    border-top-color: rgb(var(--color-primary));
    border-radius: 50%;
    animation: diagnosticsSpinner 0.8s linear infinite;
  }

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

/* Empty state */

.diagnostics-console__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    color: rgb(var(--color-text-muted));
    text-align: center;
  }

.diagnostics-console__empty-state svg {
    opacity: 0.5;
  }

.diagnostics-console__empty-state .muted {
    font-size: var(--font-size-sm);
    opacity: 0.7;
  }

/* Documentation viewer */

.diagnostics-console__doc-content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
  }

.diagnostics-console__doc-actions {
    padding: var(--space-md);
    border-top: 1px solid rgb(var(--color-border) / 0.1);
    display: flex;
    gap: var(--space-sm);
  }

/* Mobile controls */

.diagnostics-console__mobile-menu-btn,
  .diagnostics-console__fab {
    display: none;
  }

.diagnostics-console__bottom-sheet-overlay {
    display: none;
  }

/* Mobile responsive styles */

@media (max-width: 768px) {
    .diagnostics-console {
      grid-template-columns: 1fr;
    }

    .diagnostics-console.has-doc-viewer {
      grid-template-columns: 1fr;
    }

    /* Mobile hamburger menu */
    .diagnostics-console__mobile-menu-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: var(--space-md);
      left: var(--space-md);
      z-index: 1001;
      width: 44px;
      height: 44px;
      background: rgb(var(--color-surface));
      border: 1px solid rgb(var(--color-border) / 0.2);
      border-radius: var(--radius-md);
      cursor: pointer;
      box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
      transition: all 0.2s ease;
    }

    .diagnostics-console__mobile-menu-btn:hover {
      background: rgb(var(--color-surface-hover));
    }

    .hamburger-icon {
      display: block;
      width: 20px;
      height: 2px;
      background: rgb(var(--color-text));
      position: relative;
      transition: all 0.3s ease;
    }

    .hamburger-icon::before,
    .hamburger-icon::after {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      background: rgb(var(--color-text));
      position: absolute;
      left: 0;
      transition: all 0.3s ease;
    }

    .hamburger-icon::before {
      top: -6px;
    }

    .hamburger-icon::after {
      top: 6px;
    }

    .diagnostics-console__mobile-menu-btn.is-active .hamburger-icon {
      background: transparent;
    }

    .diagnostics-console__mobile-menu-btn.is-active .hamburger-icon::before {
      top: 0;
      transform: rotate(45deg);
    }

    .diagnostics-console__mobile-menu-btn.is-active .hamburger-icon::after {
      top: 0;
      transform: rotate(-45deg);
    }

    /* Mobile FAB for filters */
    .diagnostics-console__fab {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: var(--space-lg);
      right: var(--space-lg);
      z-index: 1001;
      width: 56px;
      height: 56px;
      background: rgb(var(--color-primary));
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 4px 16px rgb(0 0 0 / 0.2);
      transition: all 0.2s ease;
    }

    .diagnostics-console__fab:hover {
      transform: scale(1.1);
    }

    .diagnostics-console__fab:active {
      transform: scale(0.95);
    }

    /* Bottom sheet overlay */
    .diagnostics-console__bottom-sheet-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: rgb(0 0 0 / 0.5);
      z-index: 999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .diagnostics-console__bottom-sheet-overlay.is-visible {
      opacity: 1;
      pointer-events: all;
    }

    /* Sidebar as bottom sheet on mobile */
    .diagnostics-console__sidebar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 70vh;
      max-height: 70vh;
      z-index: 1000;
      border-right: none;
      border-top: 1px solid rgb(var(--color-border) / 0.1);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }

    .diagnostics-console__sidebar.is-visible {
      transform: translateY(0);
    }

    .diagnostics-console__sidebar--right {
      border-left: none;
    }

    /* Filter bar mobile */
    .diagnostics-console__filter-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-height: 80vh;
      overflow-y: auto;
      z-index: 1000;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      box-shadow: 0 -4px 16px rgb(0 0 0 / 0.1);
    }

    .diagnostics-console__filter-bar.is-visible {
      transform: translateY(0);
    }

    /* Adjust main header on mobile */
    .diagnostics-console__main-header {
      padding: var(--space-md);
      flex-wrap: wrap;
    }

    .diagnostics-console__main-actions {
      width: 100%;
      margin-top: var(--space-sm);
      justify-content: stretch;
    }

    .diagnostics-console__main-actions button {
      flex: 1;
    }

    /* Filter controls mobile */
    .diagnostics-console__filter-row {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-sm);
    }

    .diagnostics-console__filter-group {
      flex-direction: column;
      align-items: stretch;
    }

    .diagnostics-console__filter-input {
      width: 100%;
    }

    .diagnostics-console__filter-input--number {
      width: 100%;
    }

    .diagnostics-console__checkbox-group {
      flex-direction: column;
      gap: var(--space-sm);
    }

    .diagnostics-console__clear-filters {
      margin-left: 0;
      width: 100%;
    }
  }

/* Extra small mobile (< 640px) */

@media (max-width: 640px) {
    .diagnostics-console__mobile-menu-btn {
      top: var(--space-sm);
      left: var(--space-sm);
      width: 40px;
      height: 40px;
    }

    .diagnostics-console__fab {
      bottom: var(--space-md);
      right: var(--space-md);
      width: 48px;
      height: 48px;
    }

    .diagnostics-console__main-header {
      padding: var(--space-sm);
    }

    .diagnostics-console__title-area h1 {
      font-size: var(--font-size-lg);
    }

    .diagnostics-console__content {
      padding: var(--space-sm);
    }
  }

.site-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 0;
    --mobile-nav-offset: 0px;
  }

@media (max-width: 63.9375rem) {
    .site-shell {
      --mobile-nav-offset: 6.75rem;
      padding-bottom: calc(var(--mobile-nav-offset) + var(--space-md));
    }
  }

@supports (padding: max(0px)) {
    @media (max-width: 63.9375rem) {
      .site-shell {
        padding-bottom: calc(var(--mobile-nav-offset) + max(var(--space-sm), env(safe-area-inset-bottom)));
      }
    }
  }

.op-art-backdrop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
  }

.op-art-backdrop__layer {
    position: absolute;
    inset: -25vmax;
    opacity: 0.42;
    animation: opArtPulse 18s ease-in-out infinite;
  }

.op-art-backdrop__layer--grid {
    background:
      repeating-linear-gradient(135deg, rgba(118, 64, 217, 0.18) 0 16px, rgba(15, 19, 60, 0.9) 16px 32px);
    filter: saturate(140%) contrast(115%);
    transform: translate3d(calc((var(--pointer-x, 0.5) - 0.5) * 16vmin), calc((var(--pointer-y, 0.5) - 0.5) * 14vmin), 0)
      rotate(calc(var(--scroll-progress, 0) * 45deg));
  }

.op-art-backdrop__layer--rings {
    background:
      radial-gradient(circle at calc(var(--pointer-x, 0.5) * 100%) calc(var(--pointer-y, 0.5) * 100%), rgba(246, 220, 255, 0.22) 0%, transparent 60%),
      repeating-conic-gradient(from 90deg, rgba(199, 255, 95, 0.12) 0deg 12deg, rgba(118, 64, 217, 0.12) 12deg 24deg);
    mix-blend-mode: lighten;
    opacity: 0.6;
    transform: scale(1.12);
  }

.op-art-backdrop__layer--ribbons {
    background:
      repeating-linear-gradient(
        25deg,
        rgba(199, 255, 95, 0.1) 0 22px,
        rgba(118, 64, 217, 0.08) 22px 44px,
        rgba(10, 14, 44, 0.6) 44px 66px
      );
    mix-blend-mode: screen;
    opacity: 0.28;
    animation: ribbonDrift 32s linear infinite;
    transform: translate3d(calc((var(--pointer-x, 0.5) - 0.5) * 28vmin), calc((var(--pointer-y, 0.5) - 0.5) * 18vmin), 0)
      rotate(calc(var(--scroll-progress, 0) * -35deg));
  }

.op-art-backdrop__layer--scanlines {
    opacity: 0.18;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 6px, rgba(4, 6, 18, 0.9) 6px 12px);
    mix-blend-mode: lighten;
    animation: scanlineShift 14s linear infinite;
    transform: translate3d(0, calc(var(--scroll-progress, 0) * -24vmin), 0);
  }

.op-art-backdrop__layer--starfield {
    opacity: 0.25;
    background-image:
      radial-gradient(circle at 10% 20%, rgba(246, 220, 255, 0.55), rgba(246, 220, 255, 0) 18%),
      radial-gradient(circle at 80% 30%, rgba(199, 255, 95, 0.45), rgba(199, 255, 95, 0) 22%),
      radial-gradient(circle at 48% 70%, rgba(118, 64, 217, 0.45), rgba(118, 64, 217, 0) 28%);
    background-size: 180% 180%;
    animation: starfieldTwinkle 24s ease-in-out infinite;
    transform: translate3d(calc((var(--pointer-x, 0.5) - 0.5) * -16vmin), calc((var(--pointer-y, 0.5) - 0.5) * -12vmin), 0);
  }

.op-art-backdrop__orb {
    position: absolute;
    width: 38vmax;
    height: 38vmax;
    border-radius: 50%;
    top: 12%;
    right: -12%;
    background:
      radial-gradient(circle, rgba(199, 255, 95, 0.32) 0%, rgba(199, 255, 95, 0) 60%),
      radial-gradient(circle at 30% 30%, rgba(246, 220, 255, 0.65), rgba(246, 220, 255, 0));
    filter: blur(0.8px) saturate(140%);
    opacity: calc(0.32 + var(--pointer-distance, 0) * 0.2);
    transform:
      translate3d(calc((var(--pointer-x, 0.5) - 0.5) * 12vmax), calc((var(--pointer-y, 0.5) - 0.5) * 8vmax), 0)
      scale(calc(0.94 + var(--pointer-distance, 0) * 0.12));
  }

.op-art-backdrop__halo {
    position: absolute;
    inset: -10vmax;
    background:
      radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.22), rgba(118, 64, 217, 0) 65%),
      radial-gradient(circle at calc(var(--pointer-x, 0.5) * 100%) calc(var(--pointer-y, 0.5) * 100%), rgba(199, 255, 95, 0.18), rgba(199, 255, 95, 0) 58%);
    mix-blend-mode: screen;
    opacity: calc(0.22 + var(--pointer-distance, 0) * 0.25);
    animation: haloPulse 22s ease-in-out infinite;
  }

.container {
    width: min(100%, var(--container-max-width));
    margin-inline: auto;
    padding-inline: var(--container-inline-padding);
    padding-block: var(--space-lg);
  }

@supports (padding: max(0px)) {
    .container {
      padding-left: max(var(--container-inline-padding), env(safe-area-inset-left));
      padding-right: max(var(--container-inline-padding), env(safe-area-inset-right));
    }
  }

.site-header {
  position: relative;
  z-index: 5;
  padding-block: var(--space-sm);
  padding-top: var(--space-sm);
  background: linear-gradient(120deg, rgba(12, 16, 52, 0.86), rgba(12, 18, 48, 0));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(148, 163, 255, 0.12);
}

@supports (padding: max(0px)) {
  .site-header {
    padding-top: max(var(--space-sm), env(safe-area-inset-top));
  }
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(246, 220, 255, 0.18), transparent 65%);
  opacity: 0.7;
  pointer-events: none;
}

.site-header .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
  z-index: 6;
  padding-block: 0;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.brand a {
  font-size: var(--type-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(120deg, #fef3ff 0%, #b1f9b2 45%, #a48bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(164, 139, 255, 0.55);
}

/* Hidden attribute should override the fixed nav display styles below. */

/* ============================================================================
   COSMIC NAVIGATION - Mobile-first glassmorphic navigation
   ========================================================================= */

/* Hidden elements */

.cosmic-sheet[hidden],
.cosmic-sheet-scrim[hidden] {
  display: none !important;
}

.cosmic-nav {
  position: relative;
  z-index: 100;
}

/* ============================================================================
   DESKTOP SIDEBAR - Persistent floating sidebar
   (Styles now in cosmic-nav.css)
   ========================================================================= */

.site-nav__quick-action.is-active,
.site-nav[data-nav-open="true"] .site-nav__quick-action--more {
  border-color: rgba(199, 255, 95, 0.55);
  background: linear-gradient(150deg, rgba(34, 44, 102, 0.95), rgba(46, 28, 92, 0.9));
  color: #ffffff;
}

.site-nav__sheet-link.is-active {
  border-color: rgba(199, 255, 95, 0.6);
  background: linear-gradient(150deg, rgba(34, 44, 102, 0.95), rgba(46, 28, 92, 0.9));
  color: #ffffff;
  box-shadow: 0 22px 48px -28px rgba(199, 255, 95, 0.45);
}

@media (min-width: 64rem) {
  .site-nav__mobile {
    display: none;
  }

  .site-nav__desktop {
    display: block;
  }

  /* Compact horizontal navigation bar */
  .site-nav__desktop-bar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .site-nav__desktop-item {
    position: relative;
  }

  .site-nav__desktop-item--auth {
    margin-left: auto;
  }

  /* Dropdown trigger button */
  .site-nav__desktop-trigger {
    font: inherit;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 255, 0.18);
    background: rgba(16, 20, 60, 0.68);
    color: rgba(228, 235, 255, 0.92);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .site-nav__desktop-trigger:hover,
  .site-nav__desktop-trigger:focus-visible {
    border-color: rgba(199, 255, 95, 0.4);
    background: rgba(26, 32, 82, 0.85);
    color: #ffffff;
    outline: none;
  }

  .site-nav__desktop-trigger[aria-expanded="true"] {
    border-color: rgba(199, 255, 95, 0.5);
    background: rgba(26, 32, 82, 0.95);
    color: #ffffff;
  }

  .site-nav__desktop-chevron {
    transition: transform 0.2s ease;
    opacity: 0.7;
  }

  .site-nav__desktop-trigger[aria-expanded="true"] .site-nav__desktop-chevron {
    transform: rotate(180deg);
  }

  /* Dropdown menu */
  .site-nav__desktop-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 16rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(148, 163, 255, 0.28);
    background: linear-gradient(180deg, rgba(10, 16, 42, 0.98), rgba(16, 20, 58, 0.96));
    box-shadow: 0 16px 48px -16px rgba(8, 6, 28, 0.85), 0 8px 24px -8px rgba(8, 6, 28, 0.6);
    backdrop-filter: blur(18px);
    padding: 0.65rem;
    z-index: 100;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .site-nav__desktop-dropdown:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav__desktop-dropdown-link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.95rem;
    border-radius: 0.85rem;
    border: 1px solid transparent;
    color: rgba(228, 235, 255, 0.9);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .site-nav__desktop-dropdown-link:hover,
  .site-nav__desktop-dropdown-link:focus-visible {
    border-color: rgba(148, 163, 255, 0.24);
    background: rgba(26, 32, 82, 0.75);
    color: #ffffff;
    outline: none;
  }

  .site-nav__desktop-dropdown-link.is-active {
    border-color: rgba(199, 255, 95, 0.4);
    background: linear-gradient(150deg, rgba(34, 44, 102, 0.85), rgba(46, 28, 92, 0.8));
    color: #ffffff;
  }

  .site-nav__desktop-dropdown-label {
    font-weight: 600;
    font-size: 0.95rem;
  }

  .site-nav__desktop-dropdown-desc {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(212, 223, 255, 0.65);
  }

  .site-nav__desktop-dropdown-link.is-active .site-nav__desktop-dropdown-desc {
    color: rgba(199, 255, 95, 0.85);
  }

  /* Sign out button */
  .site-nav__desktop-signout {
    margin: 0;
  }

  .site-nav__desktop-signout-button {
    font: inherit;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 164, 164, 0.4);
    background: rgba(52, 20, 46, 0.68);
    color: rgba(255, 214, 227, 0.92);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .site-nav__desktop-signout-button:hover,
  .site-nav__desktop-signout-button:focus-visible {
    border-color: rgba(255, 182, 182, 0.7);
    background: rgba(78, 26, 62, 0.85);
    color: #ffffff;
    outline: none;
  }

  /* Header adjustments for compact nav */
  .site-header {
    padding-block: var(--space-sm);
  }

  .site-header .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .site-header__bar {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .site-header__nav {
    width: 100%;
  }

  .site-header__mobile-toggle {
    display: none;
  }

  .site-nav__sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 255, 0.3);
    background: rgba(16, 20, 60, 0.8);
    color: rgba(228, 235, 255, 0.9);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }

  .site-nav__sheet-close:hover,
  .site-nav__sheet-close:focus-visible {
    border-color: rgba(199, 255, 95, 0.5);
    background: rgba(26, 32, 82, 0.95);
    color: #ffffff;
    outline: none;
    transform: rotate(90deg);
  }
}

.page-canvas {
    --page-accent: rgba(118, 64, 217, 0.28);
    --page-glow: rgba(199, 255, 95, 0.2);
    --page-ribbon: rgba(118, 64, 217, 0.18);
    --page-backdrop-wave: 0;
    position: relative;
    display: grid;
    gap: 2.75rem;
    z-index: 1;
  }

.page-canvas::before,
  .page-canvas::after {
    content: "";
    position: absolute;
    inset: -10rem -18%;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    transition: opacity 0.6s ease;
  }

.page-canvas::before {
    background:
      radial-gradient(circle at 14% 24%, var(--page-glow), transparent 60%),
      radial-gradient(circle at 74% 20%, var(--page-accent), transparent 68%),
      radial-gradient(circle at 50% 90%, rgba(6, 10, 36, 0.75), transparent 80%);
    filter: blur(0.4rem);
    opacity: calc(0.45 + var(--page-backdrop-wave, 0) * 0.35);
  }

.page-canvas::after {
    inset: -6rem -12%;
    background:
      linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(6, 10, 36, 0)),
      repeating-linear-gradient(140deg, var(--page-ribbon) 0 18px, rgba(6, 10, 36, 0) 18px 36px);
    opacity: calc(0.32 + var(--page-backdrop-wave, 0) * 0.28);
  }

.page-canvas > * {
    position: relative;
    z-index: 1;
  }

.page-canvas--dashboard {
    --page-accent: rgba(129, 226, 255, 0.34);
    --page-glow: rgba(199, 255, 95, 0.26);
    --page-ribbon: rgba(129, 226, 255, 0.18);
  }

.page-canvas--planning {
    --page-accent: rgba(199, 255, 95, 0.32);
    --page-glow: rgba(162, 255, 172, 0.24);
    --page-ribbon: rgba(199, 255, 95, 0.18);
  }

.page-canvas--coaching {
    --page-accent: rgba(148, 163, 255, 0.32);
    --page-glow: rgba(118, 64, 217, 0.3);
    --page-ribbon: rgba(118, 64, 217, 0.2);
  }

.page-canvas--relaxation {
    --page-accent: rgba(72, 207, 173, 0.34);
    --page-glow: rgba(152, 255, 222, 0.26);
    --page-ribbon: rgba(72, 207, 173, 0.2);
  }

.page-canvas--cooldown {
    --page-accent: rgba(129, 226, 255, 0.36);
    --page-glow: rgba(118, 208, 255, 0.26);
    --page-ribbon: rgba(129, 226, 255, 0.2);
  }

.page-canvas--winddown {
    --page-accent: rgba(246, 220, 255, 0.34);
    --page-glow: rgba(255, 190, 255, 0.24);
    --page-ribbon: rgba(246, 220, 255, 0.2);
  }

.page-canvas--evening {
    --page-accent: rgba(246, 220, 255, 0.32);
    --page-glow: rgba(199, 118, 255, 0.26);
    --page-ribbon: rgba(199, 118, 255, 0.2);
  }

.page-canvas--morning {
    --page-accent: rgba(199, 255, 95, 0.34);
    --page-glow: rgba(255, 214, 153, 0.26);
    --page-ribbon: rgba(255, 214, 153, 0.2);
  }

.page-canvas--assessment {
    --page-accent: rgba(148, 163, 255, 0.34);
    --page-glow: rgba(199, 255, 95, 0.24);
    --page-ribbon: rgba(118, 64, 217, 0.22);
  }

.page-canvas--monthly-report {
    --page-accent: rgba(251, 191, 36, 0.36);
    --page-glow: rgba(255, 214, 153, 0.28);
    --page-ribbon: rgba(251, 191, 36, 0.2);
  }

.aura-panel {
    position: relative;
    border-radius: inherit;
    box-shadow: 0 32px 70px -55px rgba(8, 12, 38, 0.9);
  }

.page-canvas--dashboard .aura-panel {
    border-color: rgba(129, 226, 255, 0.32);
  }

.page-canvas--planning .aura-panel {
    border-color: rgba(199, 255, 95, 0.32);
  }

.page-canvas--coaching .aura-panel {
    border-color: rgba(148, 163, 255, 0.3);
  }

.page-canvas--relaxation .aura-panel {
    border-color: rgba(72, 207, 173, 0.32);
  }

.page-canvas--cooldown .aura-panel {
    border-color: rgba(129, 226, 255, 0.36);
  }

.page-canvas--winddown .aura-panel,
  .page-canvas--evening .aura-panel {
    border-color: rgba(246, 220, 255, 0.34);
  }

.page-canvas--morning .aura-panel {
    border-color: rgba(255, 214, 153, 0.36);
  }

.page-canvas--assessment .aura-panel {
    border-color: rgba(148, 163, 255, 0.3);
  }

.page-canvas--monthly-report .aura-panel {
    border-color: rgba(251, 191, 36, 0.34);
  }

[data-page-animate] {
    --page-animate-wave: 0;
    --page-animate-glow: 0;
    transition: transform 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease, filter 0.6s ease;
  }

.page-canvas--dashboard [data-page-animate] {
    box-shadow: 0 30px 65px -44px rgba(129, 226, 255, calc(0.18 + var(--page-animate-glow, 0) * 0.45));
    border-color: rgba(129, 226, 255, calc(0.24 + var(--page-animate-glow, 0) * 0.4));
    transform: translateY(calc(var(--page-animate-wave, 0) * -8px));
  }

.page-canvas--planning [data-page-animate] {
    box-shadow: 0 28px 60px -46px rgba(199, 255, 95, calc(0.16 + var(--page-animate-glow, 0) * 0.4));
    border-color: rgba(199, 255, 95, calc(0.24 + var(--page-animate-glow, 0) * 0.35));
    transform: translate3d(calc(var(--page-animate-wave, 0) * 6px), calc(var(--page-animate-wave, 0) * -4px), 0)
      rotate(calc(var(--page-animate-glow, 0) * 2deg));
  }

.page-canvas--coaching [data-page-animate] {
    box-shadow: 0 30px 66px -46px rgba(148, 163, 255, calc(0.18 + var(--page-animate-glow, 0) * 0.4));
    border-color: rgba(148, 163, 255, calc(0.26 + var(--page-animate-glow, 0) * 0.35));
    filter: saturate(calc(1 + var(--page-animate-glow, 0) * 0.25))
      hue-rotate(calc(var(--page-animate-wave, 0) * 12deg));
    transform: translateY(calc(var(--page-animate-wave, 0) * -6px));
  }

.page-canvas--relaxation [data-page-animate] {
    box-shadow: 0 32px 70px -48px rgba(72, 207, 173, calc(0.18 + var(--page-animate-glow, 0) * 0.45));
    border-color: rgba(72, 207, 173, calc(0.22 + var(--page-animate-glow, 0) * 0.4));
    transform: translateY(calc(var(--page-animate-wave, 0) * -5px))
      scale(calc(1 + var(--page-animate-glow, 0) * 0.02));
  }

.page-canvas--cooldown [data-page-animate] {
    box-shadow: 0 32px 68px -48px rgba(129, 226, 255, calc(0.18 + var(--page-animate-glow, 0) * 0.45));
    border-color: rgba(129, 226, 255, calc(0.26 + var(--page-animate-glow, 0) * 0.38));
    transform: translateY(calc(var(--page-animate-wave, 0) * -6px))
      translateX(calc(var(--page-animate-glow, 0) * 3px));
  }

.page-canvas--winddown [data-page-animate] {
    box-shadow: 0 32px 72px -48px rgba(246, 220, 255, calc(0.18 + var(--page-animate-glow, 0) * 0.42));
    border-color: rgba(246, 220, 255, calc(0.26 + var(--page-animate-glow, 0) * 0.35));
    transform: translateY(calc(var(--page-animate-wave, 0) * -4px));
    filter: brightness(calc(1 + var(--page-animate-glow, 0) * 0.12));
  }

.page-canvas--evening [data-page-animate] {
    box-shadow: 0 32px 72px -48px rgba(199, 118, 255, calc(0.18 + var(--page-animate-glow, 0) * 0.42));
    border-color: rgba(199, 118, 255, calc(0.26 + var(--page-animate-glow, 0) * 0.35));
    transform: translateY(calc(var(--page-animate-wave, 0) * -5px))
      rotate(calc(var(--page-animate-wave, 0) * 1.2deg));
  }

.page-canvas--morning [data-page-animate] {
    box-shadow: 0 32px 72px -48px rgba(255, 214, 153, calc(0.2 + var(--page-animate-glow, 0) * 0.45));
    border-color: rgba(255, 214, 153, calc(0.28 + var(--page-animate-glow, 0) * 0.4));
    transform: translateY(calc(var(--page-animate-wave, 0) * -5px))
      translateX(calc(var(--page-animate-wave, 0) * 3px));
  }

.page-canvas--assessment [data-page-animate] {
    box-shadow: 0 32px 72px -48px rgba(148, 163, 255, calc(0.22 + var(--assessment-glow, 0) * 0.45));
    border-color: rgba(199, 255, 95, calc(0.18 + var(--assessment-glow, 0) * 0.35));
    transform: translateY(calc((var(--assessment-wave, 0) * -10px) + (var(--assessment-card-wave, 0) * -6px)));
  }

.page-canvas--monthly-report [data-page-animate] {
    box-shadow: 0 32px 70px -48px rgba(251, 191, 36, calc(0.2 + var(--page-animate-glow, 0) * 0.42));
    border-color: rgba(251, 191, 36, calc(0.28 + var(--page-animate-glow, 0) * 0.38));
    transform: translateY(calc(var(--page-animate-wave, 0) * -6px))
      scale(calc(1 + var(--page-animate-glow, 0) * 0.015));
    filter: brightness(calc(1 + var(--page-animate-glow, 0) * 0.1));
  }

.page-canvas--dashboard.is-animated::before {
    animation: pageDashAurora 32s ease-in-out infinite alternate;
  }

.page-canvas--dashboard.is-animated::after {
    animation: pageDashRibbons 24s linear infinite;
  }

.page-canvas--planning.is-animated::before {
    animation: pagePlanPulse 28s ease-in-out infinite;
  }

.page-canvas--planning.is-animated::after {
    animation: pagePlanGrid 22s linear infinite;
  }

.page-canvas--coaching.is-animated::before {
    animation: pageCoachAurora 30s ease-in-out infinite alternate;
  }

.page-canvas--coaching.is-animated::after {
    animation: pageCoachPulse 26s linear infinite;
  }

.page-canvas--relaxation.is-animated::before {
    animation: pageRelaxWave 34s ease-in-out infinite;
  }

.page-canvas--relaxation.is-animated::after {
    animation: pageRelaxBreeze 26s linear infinite;
  }

.page-canvas--cooldown.is-animated::before {
    animation: pageCoolAurora 30s ease-in-out infinite;
  }

.page-canvas--cooldown.is-animated::after {
    animation: pageCoolDrift 24s linear infinite;
  }

.page-canvas--winddown.is-animated::before,
  .page-canvas--evening.is-animated::before {
    animation: pageNightHalo 36s ease-in-out infinite;
  }

.page-canvas--winddown.is-animated::after,
  .page-canvas--evening.is-animated::after {
    animation: pageNightGlow 24s linear infinite;
  }

.page-canvas--morning.is-animated::before {
    animation: pageMorningRise 28s ease-in-out infinite;
  }

.page-canvas--morning.is-animated::after {
    animation: pageMorningShimmer 22s linear infinite;
  }

.page-canvas--assessment.is-animated::before {
    opacity: calc(0.48 + var(--assessment-glow, 0) * 0.4);
    filter: blur(0.6rem);
    animation: pageAssessmentVeil 32s ease-in-out infinite;
  }

.page-canvas--assessment.is-animated::after {
    opacity: calc(0.36 + var(--assessment-wave, 0) * 0.32);
    animation: pageAssessmentRibbon 26s linear infinite;
  }

@keyframes pageAssessmentVeil {
    0% {
      transform: rotate(0deg) scale(1);
    }
    50% {
      transform: rotate(6deg) scale(1.05);
    }
    100% {
      transform: rotate(0deg) scale(1);
    }
  }

@keyframes pageAssessmentRibbon {
    0% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-4%) rotate(8deg);
    }
    100% {
      transform: translateY(0) rotate(0deg);
    }
  }

@keyframes pageDashAurora {
    0% {
      transform: translate3d(-4%, -2%, 0) scale(1);
      opacity: 0.52;
    }
    50% {
      transform: translate3d(3%, 4%, 0) scale(1.07);
      opacity: 0.75;
    }
    100% {
      transform: translate3d(6%, -3%, 0) scale(1.03);
      opacity: 0.6;
    }
  }

@keyframes pageDashRibbons {
    0% {
      background-position: 0% 0%, 0 0;
      opacity: 0.32;
    }
    50% {
      background-position: 60% 40%, 40px 60px;
      opacity: 0.5;
    }
    100% {
      background-position: 100% 80%, 80px 20px;
      opacity: 0.35;
    }
  }

@keyframes pagePlanPulse {
    0% {
      transform: translate3d(-6%, 2%, 0) scale(1.02);
      opacity: 0.5;
    }
    50% {
      transform: translate3d(4%, -4%, 0) scale(1.06);
      opacity: 0.68;
    }
    100% {
      transform: translate3d(8%, 2%, 0) scale(1.03);
      opacity: 0.52;
    }
  }

@keyframes pagePlanGrid {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 120px 180px;
    }
  }

@keyframes pageCoachAurora {
    0% {
      transform: translate3d(-5%, -3%, 0) scale(1.04);
      opacity: 0.55;
    }
    50% {
      transform: translate3d(5%, 5%, 0) scale(1.09);
      opacity: 0.74;
    }
    100% {
      transform: translate3d(2%, -4%, 0) scale(1.05);
      opacity: 0.6;
    }
  }

@keyframes pageCoachPulse {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 70px -40px;
    }
    100% {
      background-position: 140px 20px;
    }
  }

@keyframes pageRelaxWave {
    0% {
      transform: translate3d(-6%, 4%, 0) scale(1.02);
      opacity: 0.48;
    }
    50% {
      transform: translate3d(4%, -6%, 0) scale(1.08);
      opacity: 0.7;
    }
    100% {
      transform: translate3d(8%, 2%, 0) scale(1.03);
      opacity: 0.52;
    }
  }

@keyframes pageRelaxBreeze {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -140px 60px;
    }
  }

@keyframes pageCoolAurora {
    0% {
      transform: translate3d(-4%, -4%, 0) scale(1.03);
      opacity: 0.5;
    }
    50% {
      transform: translate3d(4%, 6%, 0) scale(1.08);
      opacity: 0.72;
    }
    100% {
      transform: translate3d(7%, -2%, 0) scale(1.04);
      opacity: 0.56;
    }
  }

@keyframes pageCoolDrift {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 160px -80px;
    }
  }

@keyframes pageNightHalo {
    0% {
      transform: translate3d(-5%, 6%, 0) scale(1.02);
      opacity: 0.5;
    }
    50% {
      transform: translate3d(5%, -4%, 0) scale(1.08);
      opacity: 0.76;
    }
    100% {
      transform: translate3d(8%, 3%, 0) scale(1.04);
      opacity: 0.58;
    }
  }

@keyframes pageNightGlow {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -160px 120px;
    }
  }

@keyframes pageMorningRise {
    0% {
      transform: translate3d(-4%, 6%, 0) scale(1.01);
      opacity: 0.48;
    }
    50% {
      transform: translate3d(4%, -4%, 0) scale(1.07);
      opacity: 0.7;
    }
    100% {
      transform: translate3d(6%, 3%, 0) scale(1.03);
      opacity: 0.55;
    }
  }

@keyframes pageMorningShimmer {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 120px -120px;
    }
  }

@media (prefers-reduced-motion: reduce) {
    .page-canvas::before,
    .page-canvas::after {
      animation: none !important;
    }

    [data-page-animate] {
      transition: none;
      transform: none !important;
      filter: none !important;
    }
  }

@keyframes statusBarPulse {
    0% {
      transform: scale(0.95);
      opacity: 0.7;
    }
    50% {
      transform: scale(1.08);
      opacity: 1;
    }
    100% {
      transform: scale(0.95);
      opacity: 0.7;
    }
  }

.status-bar {
    position: fixed;
    top: 0.5rem;
    left: 1rem;
    right: 1rem;
    transform: translateY(-120%);
    width: auto;
    max-width: 42rem;
    margin: 0 auto;
    z-index: 1000;
    background: linear-gradient(120deg, rgba(24, 18, 62, 0.95), rgba(10, 16, 44, 0.88));
    border: 1px solid rgba(148, 163, 255, 0.24);
    border-radius: 999px;
    backdrop-filter: blur(14px);
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 8px 24px rgba(10, 16, 44, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 -1px 0 1px rgba(148, 163, 255, 0.1) inset;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease, box-shadow 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }

.status-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

.status-bar.is-visible:hover {
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.35),
      0 12px 32px rgba(10, 16, 44, 0.45),
      0 0 0 1px rgba(255, 255, 255, 0.12) inset,
      0 -1px 0 1px rgba(148, 163, 255, 0.15) inset;
  }

.status-bar__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.425rem 1.5rem;
    min-height: 1.5rem;
  }

.status-bar__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.95rem;
  }

.status-bar__label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    color: rgba(246, 220, 255, 0.72);
  }

.status-bar__indicator {
    position: relative;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    flex-shrink: 0;
    background: rgba(159, 233, 255, 0.6);
    box-shadow: 0 0 0 4px rgba(159, 233, 255, 0.12);
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

.status-bar__indicator::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

.status-bar__indicator.is-active::after {
    opacity: 1;
    animation: statusBarPulse 1.6s ease-in-out infinite;
  }

.status-bar--busy .status-bar__indicator {
    box-shadow: 0 0 0 6px rgba(159, 233, 255, 0.18);
  }

.status-bar--success .status-bar__indicator {
    background: rgba(150, 255, 205, 0.8);
    box-shadow: 0 0 0 4px rgba(150, 255, 205, 0.16);
  }

.status-bar--error .status-bar__indicator {
    background: rgba(255, 168, 178, 0.8);
    box-shadow: 0 0 0 4px rgba(255, 168, 178, 0.16);
  }

.status-bar__dismiss {
    background: rgba(12, 16, 44, 0.35);
    border: 1px solid rgba(148, 163, 255, 0.18);
    color: rgba(224, 225, 255, 0.8);
    border-radius: 999px;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

.status-bar__dismiss:hover,
  .status-bar__dismiss:focus {
    background: rgba(159, 233, 255, 0.2);
    color: #f6ffff;
    border-color: rgba(159, 233, 255, 0.3);
  }

.site-main.container {
    flex: 1;
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

.site-footer {
    position: relative;
    text-align: center;
    padding: 2.5rem 0 3.5rem;
    color: var(--color-text-secondary);
  }

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 16, 48, 0), rgba(12, 16, 48, 0.6));
    opacity: 0.9;
    pointer-events: none;
  }

.site-footer .container {
    position: relative;
    z-index: 1;
  }

.messages {
    margin-bottom: 1.5rem;
    display: grid;
    gap: 0.75rem;
  }

.message {
    border-radius: 1rem;
    padding: 0.85rem 1.2rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    background: rgba(11, 15, 42, 0.65);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.25);
  }

.message-error {
    background: rgba(220, 38, 38, 0.22);
    color: #fca5a5;
  }

[data-motion-depth] {
    --motion-stagger: 0ms;
    transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.8s ease, filter 0.8s ease;
    transition-delay: var(--motion-stagger, 0ms);
  }

.panel {
    position: relative;
    margin-bottom: 2.5rem;
    padding: 1.9rem 2.2rem;
    border-radius: 22px;
    border: 1px solid var(--color-panel-border);
    --panel-glow: calc(0.15 + var(--pointer-distance, 0) * 0.25);
    background:
      linear-gradient(140deg, rgba(255, 255, 255, 0.06), rgba(12, 16, 48, 0.9)),
      conic-gradient(from calc(var(--pointer-angle, 0) * 1rad) at 75% 20%, rgba(118, 64, 217, 0.06), rgba(6, 8, 24, 0)),
      repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 14px, rgba(59, 40, 112, 0.1) 14px 28px);
    box-shadow: 0 30px 60px -45px rgba(15, 28, 92, 0.95), 0 25px 50px -40px rgba(144, 97, 255, var(--panel-glow));
    overflow: hidden;
    color: var(--color-text-primary);
    backdrop-filter: blur(12px);
    will-change: transform, background, box-shadow;
  }

.panel::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 20px;
    background:
      radial-gradient(circle at calc(var(--pointer-x, 0.5) * 100%) calc(var(--pointer-y, 0.5) * 100%), rgba(246, 220, 255, 0.22), transparent 60%),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 12px, rgba(75, 36, 116, 0.08) 12px 24px);
    opacity: 0.85;
    transition: opacity 0.6s ease;
    pointer-events: none;
  }

.panel:hover::before {
    opacity: 1;
  }

.panel::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 15% 25%, rgba(199, 255, 95, 0.18), transparent 65%),
      radial-gradient(circle at 80% 75%, rgba(118, 64, 217, 0.16), transparent 70%);
    mix-blend-mode: screen;
    opacity: calc(0.1 + var(--panel-glow));
    filter: blur(12px);
    pointer-events: none;
    transition: opacity 0.6s ease;
  }

.panel:hover::after {
    opacity: calc(0.2 + var(--panel-glow));
  }

.assessment-panel {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
  }

.assessment-hero {
    position: relative;
    border-radius: 24px;
    padding: 2.6rem;
    overflow: hidden;
    background:
      linear-gradient(132deg, rgba(16, 22, 64, 0.92), rgba(37, 20, 74, 0.78)),
      radial-gradient(circle at 85% 18%, rgba(199, 255, 95, 0.18), transparent 70%);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.16);
  }

.assessment-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2rem;
  }

.assessment-hero__background {
    position: absolute;
    inset: -35%;
    pointer-events: none;
    filter: blur(18px);
    opacity: 0.95;
  }

.assessment-hero__halo,
  .assessment-hero__orbit,
  .assessment-hero__scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

.assessment-hero__halo {
    background: radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.3), rgba(118, 64, 217, 0) 68%);
    transform:
      translate3d(calc(var(--hero-aurora-x, 0) * 22%), calc(var(--hero-aurora-y, 0) * 22%), 0)
      scale(calc(1 + var(--hero-aurora-strength, 0) * 0.3));
    transition: transform 0.7s ease;
    opacity: calc(0.65 + var(--assessment-aurora, 0) * 0.25);
  }

.assessment-hero__orbit {
    border: 1px solid rgba(199, 255, 95, 0.2);
    border-radius: 50%;
    width: 220%;
    height: 220%;
    top: -60%;
    left: -60%;
    filter: blur(2px);
    opacity: 0.45;
    transform-origin: 50% 50%;
    animation: heroOrbitSpin 36s linear infinite;
  }

.assessment-hero__orbit--secondary {
    border-color: rgba(246, 220, 255, 0.28);
    width: 160%;
    height: 160%;
    top: -30%;
    left: -30%;
    opacity: 0.3;
    animation-duration: 28s;
    animation-direction: reverse;
    --hero-orbit-scale: 0.85;
  }

.assessment-hero__scanlines {
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 10px, rgba(11, 16, 44, 0.7) 10px 20px);
    mix-blend-mode: screen;
    opacity: 0.2;
    transform: rotate(8deg);
  }

.assessment-hero__content {
    position: relative;
    display: grid;
    gap: 1.6rem;
    align-content: start;
  }

.assessment-hero__heading {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 620px;
  }

.assessment-hero__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: rgba(199, 255, 95, 0.68);
  }

.assessment-hero__heading h2 {
    margin: 0;
    font-size: 2.15rem;
    letter-spacing: 0.01em;
  }

.assessment-hero__notes {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-secondary);
  }

.assessment-hero__metrics {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    background: rgba(12, 18, 48, 0.68);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.32);
    isolation: isolate;
  }

.assessment-hero__metrics::after {
    content: "";
    position: absolute;
    inset: -35% 5% -35% 15%;
    background: radial-gradient(circle at 20% 50%, rgba(199, 255, 95, 0.45), rgba(199, 255, 95, 0));
    opacity: var(--assessment-metrics-glow, var(--hero-metrics-glow, 0.35));
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.6s ease;
  }

.assessment-hero__timestamp {
    font-size: 0.95rem;
    color: rgba(225, 226, 255, 0.78);
  }

.assessment-hero__refresh {
    position: relative;
    display: grid;
    gap: 0.75rem;
    padding: 1.15rem 1.25rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(12, 24, 68, 0.72), rgba(20, 15, 48, 0.88));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.2);
    overflow: hidden;
  }

.assessment-hero__refresh::before {
    content: "";
    position: absolute;
    inset: -35%;
    background: radial-gradient(circle at calc(var(--hero-refresh-wave, 0.3) * 100%) 50%, rgba(199, 255, 95, 0.22), transparent 60%);
    opacity: 0.45;
    transform: translateX(calc((var(--hero-refresh-wave, 0.3) - 0.5) * 20%));
    transition: transform 0.8s ease;
    pointer-events: none;
  }

.assessment-hero__refresh > * {
    position: relative;
    z-index: 1;
  }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(148, 163, 255, 0.16), rgba(12, 18, 48, 0.6));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.28), 0 0 18px -14px rgba(199, 255, 95, 0.6);
  }

.status-pill::after {
    content: "";
    position: absolute;
    inset: -40% -10%;
    background: radial-gradient(circle at 30% 50%, rgba(199, 255, 95, 0.3), transparent 70%);
    opacity: 0.65;
    filter: blur(10px);
    pointer-events: none;
  }

.status-pill--queued {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(40, 32, 10, 0.7));
    color: rgba(251, 191, 36, 0.92);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.28), 0 0 18px -12px rgba(251, 191, 36, 0.45);
  }

.job-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
  }

.job-status__detail {
    font-size: 0.9rem;
  }

.job-status--compact {
    margin-top: 0.85rem;
  }

.health-service-list {
    margin-top: 0.95rem;
    display: grid;
    gap: 0.65rem;
  }

.health-remediation {
    margin-top: 0.85rem;
    border-radius: 1rem;
    border: 1px solid rgba(118, 64, 217, 0.22);
    background: rgba(12, 16, 48, 0.65);
    padding: 0.85rem 1rem;
  }

.health-remediation p {
    margin: 0;
  }

.health-remediation ul {
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
    color: rgba(225, 226, 255, 0.72);
  }

.health-remediation li {
    margin: 0.25rem 0;
  }

.reanalyze-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

.reanalyze-form__hint {
    margin: 0;
    font-size: 0.85rem;
  }

.assessment-hero__refresh-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

.reanalyze-form--secondary {
    opacity: 0.9;
  }

.reanalyze-form--secondary .reanalyze-form__hint {
    color: rgba(225, 226, 255, 0.76);
  }

/* DEPRECATED: Now defined in cosmic-dashboard.css with glassmorphism
  .panel--hero {
    border: 1px solid rgba(199, 255, 95, 0.35);
    background:
      linear-gradient(130deg, rgba(246, 220, 255, 0.18), rgba(13, 16, 48, 0.85)),
      repeating-conic-gradient(from 0deg, rgba(146, 114, 255, 0.08) 0deg 12deg, rgba(10, 15, 48, 0.08) 12deg 24deg);
  }
  */

.form-field {
    display: grid;
    gap: 0.35rem;
    position: relative;
    z-index: 1;
  }

.form-errors {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.85rem;
    background: rgba(241, 90, 90, 0.12);
    border: 1px solid rgba(241, 90, 90, 0.45);
    color: rgba(255, 196, 196, 0.95);
    box-shadow: 0 22px 38px -32px rgba(241, 90, 90, 0.6);
    text-align: left;
  }

.form-errors__list {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.35rem;
    font-size: 0.95rem;
  }

.form-errors__list li::marker {
    color: rgba(255, 148, 148, 0.95);
  }

input[aria-invalid='true'],
  select[aria-invalid='true'],
  textarea[aria-invalid='true'] {
    border-color: rgba(241, 90, 90, 0.65);
    box-shadow: 0 0 0 2px rgba(241, 90, 90, 0.18);
  }

.form-field-grid {
    display: grid;
    gap: 0.75rem;
  }

@media (min-width: 720px) {
    .form-field-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
  }

.auth-panel {
    max-width: min(420px, 100%);
    margin: 3.5rem auto;
    padding: 2.25rem;
    display: grid;
    gap: 1.75rem;
    text-align: center;
  }

.auth-panel__header {
    display: grid;
    gap: 0.75rem;
  }

.auth-panel__title {
    font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
    font-weight: 700;
    color: var(--color-text-primary);
  }

.auth-panel__lede {
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
  }

.auth-alert {
    background: rgba(241, 90, 90, 0.12);
    border: 1px solid rgba(241, 90, 90, 0.45);
    border-radius: 1rem;
    padding: 0.95rem 1.1rem;
    text-align: left;
    color: var(--color-danger-text, #ffb3b3);
    font-weight: 500;
    box-shadow: 0 18px 36px -28px rgba(241, 90, 90, 0.6);
  }

.auth-alert p {
    margin: 0;
  }

.auth-form {
    display: grid;
    gap: 1.5rem;
    text-align: left;
  }

.auth-form__fields {
    display: grid;
    gap: 1rem;
  }

.auth-field {
    display: grid;
    gap: 0.45rem;
  }

.auth-field__label {
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.01em;
  }

.auth-field__input {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(146, 114, 255, 0.3);
    background: rgba(6, 11, 40, 0.82);
    color: var(--color-text-primary);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

.auth-field__input:focus {
    outline: none;
    border-color: rgba(199, 255, 95, 0.72);
    box-shadow: 0 0 0 3px rgba(199, 255, 95, 0.28);
    background: rgba(8, 14, 54, 0.95);
  }

.auth-field--error .auth-field__input {
    border-color: rgba(241, 90, 90, 0.65);
    box-shadow: 0 0 0 2px rgba(241, 90, 90, 0.18);
  }

.auth-field__help {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-tertiary);
  }

.auth-field__error {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(255, 180, 180, 0.95);
    font-weight: 500;
  }

.auth-form__submit {
    justify-self: stretch;
    padding-block: 0.9rem;
    font-size: 1rem;
  }

@media (min-width: 640px) {
    .auth-panel {
      padding: 2.5rem 3rem;
      gap: 2rem;
    }

    .auth-form__fields {
      gap: 1.25rem;
    }
  }

/* iOS zoom prevention: Safari zooms when focusing inputs smaller than 16px */

@media (hover: none) and (pointer: coarse) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
      font-size: max(16px, 1rem);
    }

    /* Exclude scale input which is intentionally larger */
    .assessment-tunnel__scale input[type="number"] {
      font-size: 1.25rem;
    }
  }

.length-picker {
    border-radius: 1rem;
    border: 1px solid rgba(146, 114, 255, 0.28);
    padding: 1rem;
    background: rgba(12, 16, 48, 0.6);
    display: grid;
    gap: 0.75rem;
  }

.page-hero {
    margin-bottom: 2.5rem;
    padding: 2.5rem;
    border-radius: 2rem;
    border: 1px solid rgba(146, 114, 255, 0.28);
    background:
      linear-gradient(135deg, rgba(12, 16, 48, 0.9), rgba(24, 14, 64, 0.68)),
      radial-gradient(circle at 18% 18%, rgba(199, 255, 95, 0.18), transparent 65%);
    display: grid;
    gap: 1.75rem;
    position: relative;
    overflow: hidden;
  }

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 12%, rgba(118, 64, 217, 0.18), transparent 58%);
    opacity: 0.45;
    pointer-events: none;
  }

.page-hero__content,
  .page-hero__metrics {
    position: relative;
    z-index: 1;
  }

.page-hero__content {
    display: grid;
    gap: 0.6rem;
    max-width: 36rem;
  }

.page-hero__content h2 {
    margin: 0;
    font-size: 2.15rem;
  }

.page-hero__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(199, 255, 95, 0.68);
  }

.page-hero__metrics {
    margin: 0;
  }

.page-hero__metrics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
  }

@media (min-width: 720px) {
    .page-hero__metrics-list {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      align-items: stretch;
    }
  }

.planning-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

.planning-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
  }

.planning-hero__back-icon {
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
  }

.planning-hero__back-icon svg {
    width: 100%;
    height: 100%;
  }

.planning-status-pill {
    text-transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.45rem 1rem;
  }

.planning-status-pill__label {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

.planning-status-pill__meta {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(225, 226, 255, 0.82);
  }

.page-hero__metric {
    padding: 1rem 1.25rem;
    border-radius: 1.2rem;
    background: rgba(10, 16, 36, 0.78);
    border: 1px solid rgba(146, 114, 255, 0.24);
    display: grid;
    gap: 0.45rem;
  }

.page-hero__metric-label {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(225, 226, 255, 0.62);
  }

.page-hero__metric-value {
    font-size: 1.25rem;
    font-weight: 600;
  }

.page-hero--planning {
    border-color: rgba(199, 255, 95, 0.35);
    background:
      linear-gradient(135deg, rgba(12, 16, 48, 0.88), rgba(34, 18, 64, 0.62)),
      radial-gradient(circle at 12% 20%, rgba(199, 255, 95, 0.22), transparent 65%);
  }

.page-hero--coaching {
    border-color: rgba(118, 64, 217, 0.32);
    background:
      linear-gradient(140deg, rgba(10, 16, 44, 0.9), rgba(40, 20, 82, 0.68)),
      radial-gradient(circle at 82% 16%, rgba(148, 163, 255, 0.28), transparent 60%);
  }

.page-hero--relaxation {
    border-color: rgba(72, 207, 173, 0.35);
    background:
      linear-gradient(130deg, rgba(8, 18, 42, 0.92), rgba(18, 36, 64, 0.68)),
      radial-gradient(circle at 18% 20%, rgba(72, 207, 173, 0.25), transparent 58%);
  }

.page-hero--cooldown {
    border-color: rgba(159, 233, 255, 0.35);
    background:
      linear-gradient(140deg, rgba(10, 18, 44, 0.92), rgba(20, 32, 78, 0.65)),
      radial-gradient(circle at 82% 20%, rgba(159, 233, 255, 0.22), transparent 62%);
  }

.page-hero--evening,
  .page-hero--reflection {
    border-color: rgba(246, 220, 255, 0.35);
    background:
      linear-gradient(140deg, rgba(16, 10, 36, 0.92), rgba(44, 18, 74, 0.62)),
      radial-gradient(circle at 16% 24%, rgba(246, 220, 255, 0.22), transparent 64%);
  }

.page-hero--morning {
    border-color: rgba(199, 255, 95, 0.32);
    background:
      linear-gradient(130deg, rgba(12, 20, 44, 0.9), rgba(20, 44, 64, 0.62)),
      radial-gradient(circle at 82% 22%, rgba(199, 255, 95, 0.2), transparent 60%);
  }

.page-section {
    margin-bottom: 2.5rem;
    padding: 2rem;
    border-radius: 1.8rem;
    border: 1px solid rgba(146, 114, 255, 0.24);
    background: rgba(10, 16, 36, 0.78);
    box-shadow: 0 24px 55px -45px rgba(8, 10, 30, 0.8);
    display: grid;
    gap: 1.75rem;
  }

.page-section__header {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }

.page-section__header h3,
  .page-section__header h2 {
    margin: 0;
  }

.page-section__body {
    display: grid;
    gap: 1.5rem;
  }

.inline-form {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

.form-card {
    border-radius: 1.4rem;
    border: 1px solid rgba(146, 114, 255, 0.24);
    background: rgba(12, 16, 48, 0.72);
    padding: 1.5rem;
    display: grid;
    gap: 1.25rem;
  }

.form-grid {
    display: grid;
    gap: 1rem;
  }

@media (min-width: 820px) {
    .form-grid--split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

.form-field--notes textarea,
  .form-field--notes input,
  .form-field--notes select,
  .form-card textarea,
  .form-card input,
  .form-card select,
  .history-card textarea,
  .history-card input,
  .history-card select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(146, 114, 255, 0.28);
    background: rgba(8, 12, 32, 0.9);
    color: var(--color-text-primary);
  }

.form-actions {
    display: flex;
    justify-content: flex-end;
  }

.history-card {
    border-radius: 1.4rem;
    border: 1px solid rgba(146, 114, 255, 0.2);
    background: rgba(10, 16, 36, 0.7);
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
  }

.history-card h4 {
    margin: 0;
  }

.history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
  }

.history-list--grid {
    display: grid;
    gap: 1.25rem;
  }

@media (min-width: 960px) {
    .history-list--grid {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
  }

.history-list__item {
    border-radius: 1.4rem;
    border: 1px solid rgba(146, 114, 255, 0.22);
    padding: 1.4rem;
    background: rgba(10, 16, 36, 0.68);
    display: grid;
    gap: 0.65rem;
  }

.history-list__meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
  }

.wind-down-log,
  .reflection-log,
  .sleep-log {
    display: grid;
    gap: 1.25rem;
  }

@media (min-width: 980px) {
    .wind-down-log,
    .reflection-log,
    .sleep-log {
      grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
      align-items: start;
    }
  }

.checklist-grid {
    display: grid;
    gap: 1rem;
  }

@media (min-width: 840px) {
    .checklist-grid {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
  }

.checklist-step {
    border-radius: 1.4rem;
    border: 1px solid rgba(146, 114, 255, 0.22);
    background: rgba(10, 16, 36, 0.72);
    padding: 1.25rem;
    display: grid;
    gap: 0.85rem;
  }

.checklist-step--completed {
    border-color: rgba(199, 255, 95, 0.32);
    box-shadow: inset 0 0 0 1px rgba(199, 255, 95, 0.22);
  }

.checklist-step__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
  }

.checklist-step__header h4 {
    margin: 0;
  }

.checklist-step__form {
    display: flex;
    justify-content: flex-end;
  }

.length-picker legend {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(225, 226, 255, 0.72);
  }

.length-picker__options {
    display: grid;
    gap: 0.75rem;
  }

/* DEPRECATED: Now defined in cosmic-dashboard.css with enhanced icon layout
  .length-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.8rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(199, 255, 95, 0.18);
    background: rgba(10, 15, 44, 0.6);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }

  .length-option input {
    appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 2px solid rgba(199, 255, 95, 0.6);
    box-shadow: inset 0 0 0 2px rgba(12, 16, 48, 0.9);
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .length-option input:checked {
    background: radial-gradient(circle, rgba(199, 255, 95, 0.9) 0%, rgba(199, 255, 95, 0.1) 70%);
    border-color: rgba(199, 255, 95, 0.95);
  }

  .length-option__label {
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .length-option__description {
    grid-column: 2;
    color: rgba(225, 226, 255, 0.68);
    font-size: 0.9rem;
  }

  .length-option:hover {
    border-color: rgba(199, 255, 95, 0.36);
    background: rgba(15, 22, 62, 0.75);
    transform: translateY(-2px);
  }
  */

/* Assessment mobile responsive styles */

@media (max-width: 768px) {
    /* Assessment list page */
    .panel-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    .panel-header__actions {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .panel-header__actions .button {
      width: 100%;
    }

    .assessment-start-section {
      gap: 1.5rem;
    }

    .assessment-start-actions {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .assessment-start-actions .button,
    .assessment-regenerate-form .button {
      width: 100%;
      min-height: 48px;
    }

    .status-summary {
      flex-direction: column;
      gap: 0.75rem;
    }

    .result-card-list {
      gap: 1.25rem;
    }

    /* DEPRECATED: Length picker now uses cosmic-dashboard.css styles
    .length-picker__options {
      gap: 0.75rem;
    }

    .length-option {
      padding: 1rem 1.2rem;
      gap: 1rem;
    }

    .length-option input {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
    }

    .length-option__label {
      font-size: 1rem;
    }

    .length-option__description {
      font-size: 0.875rem;
    }
    */
  }

.result-card-list {
    display: grid;
    gap: 1rem;
  }

@media (min-width: 720px) {
    .result-card-list {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
  }

.result-card {
    border-radius: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(199, 255, 95, 0.22);
    background:
      linear-gradient(145deg, rgba(12, 18, 52, 0.85), rgba(32, 17, 64, 0.62));
    display: grid;
    gap: 0.65rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

.result-card:hover {
    transform: translateY(-4px);
    border-color: rgba(199, 255, 95, 0.42);
  }

.result-card header {
    display: grid;
    gap: 0.35rem;
  }

.result-card__summary {
    margin: 0;
    font-weight: 600;
  }

.result-card__summary--truncated {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.result-card__advice {
    margin: 0;
    color: rgba(225, 226, 255, 0.76);
    font-size: 0.92rem;
  }

.result-card__expand {
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(118, 64, 217, 0.3);
    border-radius: 6px;
    color: rgba(228, 235, 255, 0.75);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }

.result-card__expand:hover {
    background: rgba(118, 64, 217, 0.15);
    border-color: rgba(118, 64, 217, 0.5);
    color: rgba(228, 235, 255, 0.9);
  }

.assessment-orchestrator {
    margin-top: 1.5rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(146, 114, 255, 0.3);
    padding: 1.25rem;
    background: rgba(14, 18, 54, 0.78);
    display: grid;
    gap: 0.65rem;
  }

.assessment-orchestrator__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

.assessment-orchestrator__header h3 {
    margin: 0;
    font-size: 1.05rem;
  }

.assessment-orchestrator__lead {
    margin: 0;
  }

.assessment-orchestrator__list {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.35rem;
  }

.assessment-orchestrator__facts {
    margin: 0;
    display: grid;
    gap: 0.3rem;
  }

.assessment-history {
    margin-top: 1.5rem;
  }

.result-card__milestones {
      display: grid;
      gap: 0.4rem;
      padding: 0.55rem 0.75rem;
      border-radius: 0.85rem;
      background: rgba(118, 64, 217, 0.15);
    }

.result-card__milestones ul {
      margin: 0;
      padding-left: 1.1rem;
      display: grid;
      gap: 0.35rem;
      color: rgba(228, 226, 255, 0.85);
      font-size: 0.9rem;
    }

.badge-status {
    display: inline-flex;
  align-items: center;
  justify-content: center;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    background: rgba(199, 255, 95, 0.16);
    color: rgba(228, 255, 199, 0.92);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

/* Status Filter Bar - Interactive filter buttons */

.status-filter-bar {
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

.status-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(118, 64, 217, 0.12);
    border: 1px solid rgba(118, 64, 217, 0.28);
    box-shadow: inset 0 0 0 1px rgba(12, 18, 52, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: 0.875rem;
  }

.status-filter-button:hover {
    background: rgba(118, 64, 217, 0.22);
    border-color: rgba(118, 64, 217, 0.45);
    transform: translateY(-1px);
  }

.status-filter-button.is-active {
    background: rgba(199, 255, 95, 0.15);
    border-color: rgba(199, 255, 95, 0.5);
    box-shadow:
      inset 0 0 0 1px rgba(199, 255, 95, 0.25),
      0 0 12px rgba(199, 255, 95, 0.3);
  }

.status-filter-button.is-active:hover {
    background: rgba(199, 255, 95, 0.2);
    transform: translateY(0);
  }

.status-filter-button__label {
    color: rgba(228, 235, 255, 0.85);
    font-weight: 500;
  }

.status-filter-button.is-active .status-filter-button__label {
    color: rgba(199, 255, 95, 0.95);
    font-weight: 600;
  }

.status-filter-button__count {
    font-size: 1rem;
    font-weight: 600;
    color: #f5f6ff;
    min-width: 1.25rem;
    text-align: center;
  }

/* Pagination Controls */

.pagination {
    margin: 2rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

.pagination__info {
    font-size: 0.875rem;
    color: rgba(228, 235, 255, 0.65);
  }

.pagination__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

.pagination__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 8px;
    background: rgba(118, 64, 217, 0.15);
    border: 1px solid rgba(118, 64, 217, 0.3);
    color: rgba(228, 235, 255, 0.9);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
  }

.pagination__button:hover {
    background: rgba(118, 64, 217, 0.25);
    border-color: rgba(118, 64, 217, 0.5);
    transform: translateY(-1px);
  }

.pagination__button--disabled {
    background: rgba(118, 64, 217, 0.08);
    border-color: rgba(118, 64, 217, 0.15);
    color: rgba(228, 235, 255, 0.3);
    cursor: not-allowed;
    pointer-events: none;
  }

.pagination__current {
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(228, 235, 255, 0.85);
  }

@media (min-width: 640px) {
    .pagination {
      flex-direction: row;
      justify-content: space-between;
    }
  }

/* ============================================================================
   * Assessment Table
   * ========================================================================= */

.assessment-table-wrapper {
    margin: 1.5rem 0;
    overflow-x: auto;
    border-radius: 12px;
    background: rgba(27, 22, 45, 0.6);
    border: 1px solid rgba(118, 64, 217, 0.25);
  }

.assessment-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

.assessment-table thead {
    background: rgba(118, 64, 217, 0.15);
    border-bottom: 2px solid rgba(118, 64, 217, 0.35);
  }

.assessment-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(199, 255, 95, 0.9);
  }

/* Sortable headers */

.sortable-header {
    padding: 0;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

.sortable-header__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    color: rgba(199, 255, 95, 0.9);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

.sortable-header__link:hover {
    color: rgba(199, 255, 95, 1);
    background: rgba(118, 64, 217, 0.12);
  }

.sortable-header__icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.25rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.3;
  }

/* Default state: show both arrows stacked */

.sortable-header:not(.is-sorted) .sortable-header__icon::before,
  .sortable-header:not(.is-sorted) .sortable-header__icon::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

.sortable-header:not(.is-sorted) .sortable-header__icon::before {
    border-bottom: 5px solid currentColor;
    margin-top: -8px;
  }

.sortable-header:not(.is-sorted) .sortable-header__icon::after {
    border-top: 5px solid currentColor;
    margin-top: 2px;
  }

/* Sorted ascending: up arrow */

.sortable-header.is-sorted.is-sorted--asc .sortable-header__icon {
    border-bottom: 6px solid currentColor;
    opacity: 1;
  }

/* Sorted descending: down arrow */

.sortable-header.is-sorted.is-sorted--desc .sortable-header__icon {
    border-top: 6px solid currentColor;
    opacity: 1;
  }

.sortable-header.is-sorted .sortable-header__link {
    color: rgba(199, 255, 95, 1);
    font-weight: 700;
  }

.assessment-table tbody tr {
    border-bottom: 1px solid rgba(118, 64, 217, 0.15);
    transition: background-color 0.2s ease;
  }

.assessment-table tbody tr:hover {
    background: rgba(118, 64, 217, 0.08);
  }

.assessment-table tbody tr:last-child {
    border-bottom: none;
  }

.assessment-table td {
    padding: 1rem 1.25rem;
    color: rgba(228, 235, 255, 0.85);
    vertical-align: top;
  }

.assessment-table__title {
    color: rgba(199, 255, 95, 0.95);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
  }

.assessment-table__title:hover {
    color: rgba(199, 255, 95, 1);
    text-decoration: underline;
  }

.assessment-table__count {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(118, 64, 217, 0.2);
    font-weight: 600;
    font-size: 0.8125rem;
    color: rgba(228, 235, 255, 0.9);
  }

.assessment-table__summary {
    max-width: 400px;
  }

.assessment-table__summary-text {
    display: block;
    line-height: 1.5;
    color: rgba(228, 235, 255, 0.75);
  }

.assessment-table__actions {
    white-space: nowrap;
  }

.assessment-table__actions .button {
    margin-right: 0.5rem;
  }

.assessment-table__actions .button:last-child {
    margin-right: 0;
  }

.button-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    min-height: auto;
  }

/* Responsive mobile view: stack table as cards */

@media (max-width: 768px) {
    .assessment-table thead {
      display: none;
    }

    .assessment-table,
    .assessment-table tbody,
    .assessment-table tr,
    .assessment-table td {
      display: block;
      width: 100%;
    }

    .assessment-table tr {
      margin-bottom: 1.5rem;
      padding: 1rem;
      background: rgba(27, 22, 45, 0.6);
      border: 1px solid rgba(118, 64, 217, 0.25);
      border-radius: 8px;
    }

    .assessment-table td {
      padding: 0.75rem 0;
      border: none;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
    }

    .assessment-table td::before {
      content: attr(data-column-label);
      font-weight: 600;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(199, 255, 95, 0.8);
      flex-shrink: 0;
      min-width: 90px;
    }

    .assessment-table td:first-child {
      padding-top: 0;
    }

    .assessment-table td:last-child {
      padding-bottom: 0;
    }

    .assessment-table__summary {
      max-width: none;
      text-align: right;
      flex: 1;
    }

    .assessment-table__actions {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      flex: 1;
    }

    .assessment-table__actions .button {
      margin: 0;
      width: 100%;
      text-align: center;
    }
  }

/* DEPRECATED: Now defined in cosmic-dashboard.css with glassmorphism
  .panel--detail {
    background:
      linear-gradient(150deg, rgba(12, 17, 52, 0.94), rgba(118, 64, 217, 0.25)),
      repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 18px, rgba(36, 18, 62, 0.1) 18px 36px);
  }
  */

.planning-column-nav__button.is-active {
    background: linear-gradient(
        135deg,
        rgba(118, 64, 217, 0.6),
        rgba(199, 255, 95, 0.45)
      ),
      rgba(16, 18, 48, 0.88);
    color: #ffffff;
    border-color: rgba(199, 255, 95, 0.6);
    box-shadow: 0 20px 36px -16px rgba(6, 5, 28, 0.78);
  }

.planning-detail {
    display: grid;
    gap: 1.75rem;
  }

.planning-detail__main,
  .planning-detail__sidebar {
    display: grid;
    gap: 1.5rem;
  }

@media (min-width: 960px) {
    .planning-detail {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: start;
    }

    .planning-detail__sidebar {
      position: sticky;
      top: clamp(4rem, 9vw, 6.5rem);
    }
  }

.planning-card {
    border-radius: 18px;
    border: 1px solid rgba(159, 233, 255, 0.25);
    background:
      linear-gradient(140deg, rgba(9, 16, 46, 0.9), rgba(26, 11, 58, 0.7));
    padding: 1.35rem;
    display: grid;
    gap: 1rem;
  }

.planning-card > .planning-collapse {
    display: grid;
    gap: 1rem;
  }

.planning-card__header h3 {
    margin: 0;
    font-size: 1.25rem;
  }

.planning-card__header p {
    margin: 0;
    color: rgba(225, 226, 255, 0.78);
  }

.focus-timer {
    display: grid;
    gap: 0.85rem;
  }

.focus-timer__presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

.focus-timer__countdown {
    margin: 0;
    font-weight: 600;
    color: rgba(199, 255, 95, 0.85);
  }

.focus-timer--active .focus-timer__countdown {
    color: rgba(199, 255, 95, 0.92);
  }

.focus-timer--complete .focus-timer__countdown {
    color: rgba(246, 220, 255, 0.95);
  }

.focus-timer__actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
  }

.focus-timer__actions .button {
    flex: 1 1 auto;
    min-width: 140px;
  }

.focus-timer-bar {
    position: fixed;
    bottom: 1.25rem;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 60;
    pointer-events: none;
  }

.focus-timer-bar__content {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 1.15rem;
    min-height: 1.5rem;
    border-radius: 999px;
    background:
      linear-gradient(135deg, rgba(14, 18, 54, 0.95), rgba(32, 17, 64, 0.85));
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 8px 24px rgba(8, 5, 28, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 -1px 0 1px rgba(118, 64, 217, 0.15) inset;
    border: 1px solid rgba(118, 64, 217, 0.4);
    backdrop-filter: blur(14px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    pointer-events: auto;
  }

.focus-timer-bar__content:hover {
    transform: translateY(-2px);
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.35),
      0 12px 32px rgba(8, 5, 28, 0.45),
      0 0 0 1px rgba(255, 255, 255, 0.12) inset,
      0 -1px 0 1px rgba(118, 64, 217, 0.2) inset;
  }

.focus-timer-bar__info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

.focus-timer-bar__mode {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(225, 226, 255, 0.72);
  }

.focus-timer-bar__countdown {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(199, 255, 95, 0.92);
  }

.focus-timer-bar__actions {
    display: flex;
    gap: 0.5rem;
  }

.focus-timer-bar--complete .focus-timer-bar__countdown {
    color: rgba(246, 220, 255, 0.95);
  }

.focus-timer-bar--complete .focus-timer-bar__content {
    animation: focusTimerCelebrate 1.5s ease-in-out infinite alternate;
  }

@keyframes focusTimerCelebrate {
    from {
      box-shadow: 0 18px 40px -20px rgba(118, 64, 217, 0.65);
    }
    to {
      box-shadow: 0 22px 48px -18px rgba(199, 255, 95, 0.6);
    }
  }

.planning-theme-help {
    margin-top: -0.25rem;
    font-size: 0.85rem;
    color: rgba(225, 226, 255, 0.72);
  }

.planning-focus-card {
    grid-column: 1 / -1;
  }

.planning-task-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
  }

.planning-list-summary__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
  }

.planning-list-summary__item {
    display: block;
  }

.planning-list-summary__button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(118, 64, 217, 0.35);
    background: rgba(14, 18, 54, 0.72);
    box-shadow: inset 0 0 0 1px rgba(12, 16, 48, 0.22);
    color: inherit;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }

.planning-list-summary__button:hover,
  .planning-list-summary__button:focus {
    transform: translateY(-1px);
    border-color: rgba(199, 255, 95, 0.45);
    box-shadow: 0 8px 22px -12px rgba(8, 5, 28, 0.6);
    outline: none;
  }

.planning-list-summary__button.is-active {
    border-color: rgba(199, 255, 95, 0.6);
    box-shadow: 0 12px 26px -12px rgba(8, 5, 28, 0.74);
  }

.planning-list-summary__item--all {
    background: linear-gradient(130deg, rgba(32, 40, 96, 0.92), rgba(86, 54, 160, 0.82));
  }

.planning-list-summary__label {
    font-weight: 600;
    color: rgba(240, 242, 255, 0.9);
  }

.planning-list-summary__count {
    font-size: 0.95rem;
    color: rgba(240, 255, 235, 0.92);
    font-weight: 600;
  }

.planning-theme {
    --planning-theme-surface: linear-gradient(140deg, rgba(12, 18, 54, 0.92), rgba(28, 17, 62, 0.72));
    --planning-theme-pattern: radial-gradient(circle at 22% 24%, rgba(118, 64, 217, 0.26), transparent 62%);
    --planning-theme-highlight: radial-gradient(circle at 82% 16%, rgba(199, 255, 95, 0.18), transparent 60%);
    --planning-theme-sheen: radial-gradient(circle at 24% 28%, rgba(246, 220, 255, 0.22), transparent 58%);
    --planning-theme-noise: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0 6px, transparent 6px 14px);
    --planning-theme-border: rgba(118, 64, 217, 0.36);
    --planning-theme-shadow: 0 22px 40px -22px rgba(8, 5, 28, 0.75);
    background-color: rgba(12, 18, 54, 0.9);
    background-image: var(--planning-theme-highlight), var(--planning-theme-sheen), var(--planning-theme-pattern),
      var(--planning-theme-noise), var(--planning-theme-surface);
    background-blend-mode: screen, lighten, lighten, screen, normal;
    background-size: 160% 160%, 140% 140%, 120% 120%, 200% 200%, cover;
    background-position: 0% 0%, 100% 0%, 50% 50%, 0% 100%, 50% 50%;
    border: 1px solid var(--planning-theme-border);
  }

.planning-task {
    border-radius: 1rem;
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
    position: relative;
    box-shadow: var(--planning-theme-shadow, 0 20px 38px -22px rgba(8, 5, 28, 0.72));
  }

.planning-task::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 60%);
    opacity: 0.45;
    pointer-events: none;
  }

.planning-task > * {
    position: relative;
    z-index: 1;
  }

.planning-task__header {
    display: flex;
  }

.planning-task__title {
    margin: 0;
    width: 100%;
  }

.planning-task__header-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: rgba(248, 248, 255, 0.96);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    text-align: left;
  }

.planning-task__header-button:focus-visible {
    outline: 2px solid rgba(199, 255, 95, 0.65);
    outline-offset: 3px;
  }

.planning-task__header-button[role='presentation'] {
    cursor: default;
  }

.planning-task__title-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
  }

.planning-task__toggle-indicator {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.75rem;
    background: rgba(17, 26, 36, 0.38);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    color: rgba(241, 240, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(241, 240, 255, 0.16);
  }

.planning-task__header-button:hover .planning-task__toggle-indicator,
  .planning-task__header-button:focus-visible .planning-task__toggle-indicator {
    background: rgba(199, 255, 95, 0.35);
    color: rgba(17, 26, 36, 0.85);
    box-shadow: inset 0 0 0 1px rgba(17, 26, 36, 0.24);
  }

.planning-task__toggle-indicator svg {
    width: 0.75rem;
    height: 0.75rem;
    pointer-events: none;
  }

.planning-task__header-button[aria-expanded='true'] .planning-task__toggle-indicator,
  .planning-task__header-button.is-expanded .planning-task__toggle-indicator {
    transform: rotate(180deg);
    background: rgba(199, 255, 95, 0.24);
    color: rgba(17, 26, 36, 0.82);
    box-shadow: inset 0 0 0 1px rgba(17, 26, 36, 0.3);
  }

.planning-task--collapsed {
    gap: 0.45rem;
  }

.planning-task--collapsed .planning-task__body {
    display: none;
  }

.planning-task__meta {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.35rem;
  }

.planning-task__badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

.planning-task__due {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(225, 226, 255, 0.78);
  }

.planning-task__preview-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(241, 240, 255, 0.22);
    color: rgba(17, 26, 36, 0.82);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.35rem;
  }

.planning-theme-preview {
    display: grid;
    gap: 0.75rem;
  }

.planning-theme-preview__hint {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(225, 226, 255, 0.78);
  }

.planning-theme-preview__canvas {
    display: grid;
    justify-content: flex-start;
  }

.planning-theme-preview__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: min(100%, 360px);
  }

.planning-theme-preview__list > li {
    margin: 0;
  }

.planning-task__subtasks-summary {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(225, 226, 255, 0.8);
  }

.planning-progress {
    display: grid;
    gap: 0.45rem;
  }

.planning-progress .planning-task__subtasks-summary,
  .planning-progress .planning-list-table__subtasks-summary {
    margin: 0;
  }

.planning-progress__bar {
    position: relative;
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(225, 226, 255, 0.12);
    border: 1px solid rgba(199, 255, 95, 0.18);
    overflow: hidden;
  }

.planning-progress__indicator {
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(199, 255, 95, 0.95), rgba(118, 64, 217, 0.75));
    box-shadow: 0 0 20px -12px rgba(199, 255, 95, 0.8);
    transition: width 0.35s ease;
  }

.planning-progress--list {
    gap: 0.35rem;
  }

.planning-task__subtasks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
  }

.planning-task__subtasks > .planning-subtask {
    padding: 0.55rem 0;
  }

.planning-task__subtasks > .planning-subtask + .planning-subtask {
    border-top: 1px solid rgba(225, 226, 255, 0.16);
  }

.planning-subtask {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

.planning-subtask__content {
    display: grid;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
  }

.planning-subtask__form {
    margin-left: auto;
    display: inline-flex;
  }

.planning-subtask__checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.6rem;
    background: rgba(14, 18, 54, 0.82);
    border: 1px solid rgba(199, 255, 95, 0.38);
    color: rgba(199, 255, 95, 0.82);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

.planning-subtask__checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(199, 255, 95, 0.32);
  }

.planning-subtask__checkbox:hover {
    border-color: rgba(199, 255, 95, 0.6);
    transform: translateY(-1px);
  }

.planning-subtask__checkbox svg {
    width: 1.1rem;
    height: 1.1rem;
  }

.planning-subtask__checkbox rect {
    fill: rgba(12, 18, 54, 0.92);
    stroke: rgba(199, 255, 95, 0.42);
    stroke-width: 1.4px;
  }

.planning-subtask__checkbox path {
    stroke: rgba(199, 255, 95, 0.25);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.planning-subtask__checkbox.is-checked {
    background: rgba(199, 255, 95, 0.88);
    border-color: rgba(17, 26, 36, 0.4);
    color: rgba(17, 26, 36, 0.85);
  }

.planning-subtask__checkbox.is-checked rect {
    fill: rgba(199, 255, 95, 0.95);
    stroke: rgba(17, 26, 36, 0.45);
  }

.planning-subtask__checkbox.is-checked path {
    stroke: rgba(17, 26, 36, 0.85);
  }

.planning-subtask__checkbox[aria-pressed='true'] {
    transform: translateY(0);
  }

.planning-subtask__title {
    font-size: 0.9rem;
    color: rgba(241, 240, 255, 0.88);
  }

.planning-subtask--completed .planning-subtask__title {
    text-decoration: line-through;
    color: rgba(199, 255, 95, 0.85);
  }

.planning-subtask__meta {
    font-size: 0.75rem;
    color: rgba(225, 226, 255, 0.7);
  }

.planning-subtask__add-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
  }

.planning-subtask__add-form input[type="text"],
  .planning-subtask__add-form input[type="search"],
  .planning-subtask__add-form input[type="email"] {
    flex: 1 1 180px;
    min-width: 0;
    border-radius: 0.75rem;
    border: 1px solid rgba(118, 64, 217, 0.45);
    background: rgba(14, 18, 54, 0.9);
    color: var(--color-text-primary);
    padding: 0.45rem 0.65rem;
  }

.planning-subtask__add-form input:focus {
    outline: none;
    border-color: rgba(199, 255, 95, 0.6);
    box-shadow: 0 0 0 1px rgba(199, 255, 95, 0.28);
  }

.planning-list-table {
    overflow-x: auto;
  }

.planning-list-table table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0 0.85rem;
  }

.planning-list-table th,
  .planning-list-table td {
    padding: 1.1rem 1rem;
    vertical-align: top;
    background: transparent;
  }

.planning-list-table thead th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(220, 222, 255, 0.68);
    padding-bottom: 0.35rem;
  }

.planning-list-table__row {
    position: relative;
    border-radius: 1rem;
    box-shadow: var(--planning-theme-shadow, 0 18px 32px -22px rgba(8, 5, 28, 0.68));
    overflow: hidden;
  }

.planning-list-table__row::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 60%);
    opacity: 0.75;
    pointer-events: none;
  }

.planning-list-table__row > * {
    position: relative;
    z-index: 1;
  }

.planning-list-table__title-link {
    color: rgba(249, 249, 255, 0.95);
    font-weight: 600;
  }

.planning-list-table__title-link:hover,
  .planning-list-table__title-link:focus {
    color: rgba(199, 255, 95, 0.88);
  }

.planning-list-table__subtasks-summary {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    color: rgba(225, 226, 255, 0.78);
  }

.planning-list-table__subtasks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.3rem;
  }

.planning-list-table__subtasks li {
    font-size: 0.85rem;
    color: rgba(225, 226, 255, 0.78);
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

.planning-list-table__subtasks li.is-complete .planning-list-table__subtask-title {
    text-decoration: line-through;
    color: rgba(199, 255, 95, 0.85);
  }

.planning-list-table__title {
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

.planning-list-table__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
  }

.planning-list-table__status {
    min-width: 220px;
  }

.planning-list-table__status-label {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: rgba(225, 226, 255, 0.82);
  }

.planning-list-table__status-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

.planning-list-table__status-form select {
    border-radius: 0.75rem;
    border: 1px solid rgba(118, 64, 217, 0.45);
    background: rgba(14, 18, 54, 0.9);
    color: var(--color-text-primary);
    padding: 0.4rem 0.6rem;
  }

.planning-list-table__status-form select:focus {
    outline: none;
    border-color: rgba(199, 255, 95, 0.6);
    box-shadow: 0 0 0 1px rgba(199, 255, 95, 0.28);
  }

.planning-list-table__subtasks-cell {
    min-width: 260px;
  }

.planning-list-table__subtasks-wrapper {
    margin-bottom: 0.5rem;
  }

.planning-list-table__subtask-form {
    margin-left: auto;
    display: inline-flex;
  }

.planning-list-table__subtask-title {
    flex: 1;
    min-width: 0;
  }

.planning-list-table__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 180px;
  }

.planning-list-table__quick-form {
    display: flex;
  }

.planning-list-table__quick-form .button {
    flex: 1;
  }

.planning-list-table__row.is-filtered-out {
    opacity: 0;
    transition: opacity 140ms ease;
  }

@media (max-width: 960px) {
    .planning-list-summary__items {
      gap: 0.65rem;
    }

    .planning-list-summary__button {
      padding: 0.6rem 1rem;
    }

    .planning-list-table {
      overflow-x: visible;
    }

    .planning-list-table table {
      min-width: 0;
      border-spacing: 0;
    }

    .planning-list-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .planning-list-table__row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0.85rem;
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .planning-list-table__row > th,
    .planning-list-table__row > td {
      display: block;
      width: 100%;
      padding: 0;
    }

    .planning-list-table__row > td + td {
      margin-top: 0.65rem;
    }

    .planning-list-table__row > td[data-column-label]::before {
      content: attr(data-column-label);
      display: block;
      font-size: 0.8rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: rgba(225, 226, 255, 0.7);
      margin-bottom: 0.3rem;
    }

    .planning-list-table__status,
    .planning-list-table__subtasks-cell,
    .planning-list-table__actions {
      min-width: 0;
    }

    .planning-list-table__status-form {
      flex-wrap: wrap;
    }

    .planning-list-table__actions {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .planning-list-table__actions .button {
      flex: 1 1 calc(50% - 0.75rem);
    }

    .planning-list-table__quick-form {
      width: 100%;
    }
  }

.planning-celebration {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: screen;
    z-index: 45;
    display: none;
  }

.planning-celebration.is-active {
    display: block;
  }

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
  }

.panel-header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
  }

.panel-header p {
    margin: 0;
  }

.panel-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  align-self: flex-end;
}

@media (min-width: 768px) {
    .assessment-hero__refresh-actions {
      flex-direction: row;
      align-items: center;
      gap: 1.5rem;
    }
  }

.queue-plans-form {
  margin: 0px;
}

.queue-plans-form button {
  white-space: nowrap;
}

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

[data-motion-depth] {
    position: relative;
    transform: translate3d(var(--motion-translate-x, 0px), var(--motion-translate-y, 0px), 0);
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease, background 0.5s ease,
      border-color 0.5s ease;
  }

.analysis-layout {
    position: relative;
    display: grid;
    gap: 1.75rem;
  }

.analysis-layout__background {
    position: absolute;
    inset: -18%;
    pointer-events: none;
    filter: blur(22px);
    opacity: 0.85;
    z-index: 0;
  }

.analysis-layout__grid,
  .analysis-layout__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

.analysis-layout__grid {
    background: radial-gradient(circle at 30% 20%, rgba(199, 255, 95, 0.15), rgba(199, 255, 95, 0)),
      radial-gradient(circle at 80% 70%, rgba(118, 64, 217, 0.12), rgba(118, 64, 217, 0));
    opacity: 0.55;
    transform: rotate(var(--assessment-grid-tilt, 0deg));
    transition: transform 0.7s ease;
  }

.analysis-layout__glow {
    background: conic-gradient(from calc(var(--pointer-angle, 0) * 1rad), rgba(118, 64, 217, 0.12), rgba(6, 8, 24, 0));
    opacity: 0.25;
  }

.analysis-grid {
    display: grid;
    gap: 1.4rem;
    position: relative;
    z-index: 1;
  }

.analysis-columns {
    display: grid;
    gap: 1.4rem;
    position: relative;
    z-index: 1;
  }

.analysis-card {
    position: relative;
    border-radius: 18px;
    padding: 1.4rem 1.6rem;
    background:
      linear-gradient(150deg, rgba(12, 16, 48, 0.92), rgba(64, 32, 118, 0.55)),
      radial-gradient(circle at calc(var(--pointer-x, 0.5) * 100%) 12%, rgba(199, 255, 95, 0.14), transparent 55%),
      linear-gradient(120deg, rgba(118, 64, 217, 0.08), rgba(12, 16, 48, 0));
    border: 1px solid rgba(148, 163, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(12, 16, 48, 0.22);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: hidden;
  }

.analysis-card > * {
    position: relative;
    z-index: 1;
  }

.analysis-card__halo {
    position: absolute;
    inset: -35% -18% 58% -18%;
    background: radial-gradient(circle at 18% 30%, rgba(199, 255, 95, 0.24), transparent 68%);
    opacity: 0.7;
    filter: blur(18px);
    pointer-events: none;
    display: block;
  }

.analysis-card h3 {
    margin: 0;
    font-size: 1.1rem;
  }

.analysis-card__empty {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(225, 226, 255, 0.64);
  }

.analysis-spotlight {
    border-radius: 16px;
    background: rgba(199, 255, 95, 0.12);
    border: 1px solid rgba(199, 255, 95, 0.22);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

.analysis-spotlight__label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.65rem;
    color: rgba(199, 255, 95, 0.75);
  }

.analysis-spotlight__value {
    margin: 0;
    font-size: 1.05rem;
    color: #f5f6ff;
  }

.analysis-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
  }

.responses {
    position: relative;
    margin-top: 0;
    overflow: hidden;
    border-radius: inherit;
  }

.responses::before {
    content: "";
    position: absolute;
    inset: -12% -10% 65% -10%;
    background: radial-gradient(circle at 12% 30%, rgba(118, 64, 217, 0.18), transparent 70%);
    opacity: 0.4;
    pointer-events: none;
  }

.assessment-actions__inner {
    display: flex;
    justify-content: center;
    padding: 1.4rem 0;
  }

[data-response-wave] {
    position: relative;
    display: grid;
    gap: 1.3rem;
  }

[data-response-wave]::after {
    content: "";
    position: absolute;
    inset: -25% -15% 10% -15%;
    background: conic-gradient(from 120deg, rgba(199, 255, 95, 0.12), rgba(12, 16, 48, 0));
    opacity: 0.28;
    transform: translateY(calc(var(--response-wave-offset, 0) * 6%));
    pointer-events: none;
  }

.response-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
  }

.response-item {
    position: relative;
    border-radius: 16px;
    padding: 1.05rem 1.3rem;
    border: 1px solid rgba(148, 163, 255, 0.22);
    background: linear-gradient(135deg, rgba(12, 18, 52, 0.82), rgba(42, 18, 72, 0.6));
    box-shadow: inset 0 0 0 1px rgba(12, 16, 48, 0.18);
    overflow: hidden;
  }

.response-item::after {
    content: "";
    position: absolute;
    inset: -25% 55% -25% -25%;
    background: radial-gradient(circle at 20% 50%, rgba(199, 255, 95, 0.2), transparent 70%);
    opacity: 0.6;
    filter: blur(14px);
    transform: rotate(var(--response-orbit-tilt, 0deg));
    transition: transform 0.6s ease;
    pointer-events: none;
  }

.response-item dt {
    margin: 0 0 0.45rem;
    font-weight: 600;
    color: rgba(248, 249, 255, 0.88);
  }

.response-item dd {
    margin: 0;
    color: rgba(220, 221, 255, 0.8);
  }

.response-creative {
    display: grid;
    gap: 0.65rem;
    background: rgba(16, 20, 58, 0.78);
    border-radius: 14px;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid rgba(118, 64, 217, 0.24);
  }

.response-creative__instructions {
    margin: 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(199, 255, 95, 0.72);
  }

.response-creative__answer {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(244, 246, 255, 0.95);
  }

.response-creative__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

.response-creative__badge {
    background: rgba(12, 18, 52, 0.85);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(225, 226, 255, 0.76);
    border: 1px solid rgba(148, 163, 255, 0.25);
  }

.response-creative__badge span {
    font-weight: 600;
  }

.analysis-action-list li {
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    background: rgba(12, 18, 52, 0.85);
    border: 1px solid rgba(148, 163, 255, 0.22);
    font-size: 0.95rem;
  }

.life-tool__title {
    margin: 0;
    font-size: 1.1rem;
    color: #f4f6ff;
  }

.life-tool__benefit {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
  }

.life-tool__meta {
    margin: 0.75rem 0;
    display: grid;
    gap: 0.6rem;
  }

.life-tool__meta dt {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(199, 255, 95, 0.7);
  }

.life-tool__meta dd {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(233, 234, 255, 0.88);
  }

.life-tool__steps ol,
  .life-tool__experiments ul {
    margin: 0.35rem 0 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.35rem;
    color: rgba(229, 230, 255, 0.85);
  }

.life-tool__steps h4,
  .life-tool__experiments h4 {
    margin: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(199, 255, 95, 0.65);
  }

.life-tool__blueprint summary {
    cursor: pointer;
    font-weight: 600;
    color: rgba(234, 235, 255, 0.92);
    margin-bottom: 0.35rem;
  }

.blueprint-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
  }

.blueprint-copy__button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  }

.blueprint-copy__button[data-copy-state='copying'] {
    opacity: 0.72;
    cursor: wait;
  }

.blueprint-copy__button[data-copy-state='copied'] {
    box-shadow: 0 0 0 2px rgba(199, 255, 95, 0.35);
  }

.blueprint-copy__status {
    font-size: 0.85rem;
    color: rgba(214, 216, 255, 0.8);
    min-height: 1.1rem;
  }

.blueprint-copy__status[data-status-tone='success'] {
    color: rgba(199, 255, 95, 0.82);
  }

.blueprint-copy__status[data-status-tone='info'] {
    color: rgba(209, 214, 255, 0.85);
  }

.blueprint-copy__status[data-status-tone='warning'] {
    color: rgba(255, 210, 154, 0.88);
  }

.blueprint-copy__status[data-status-tone='error'] {
    color: rgba(255, 172, 172, 0.92);
  }

.life-tool__blueprint pre {
    margin: 0;
    background: rgba(12, 18, 52, 0.85);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    color: rgba(222, 223, 255, 0.9);
    font-size: 0.85rem;
    white-space: pre-wrap;
  }

.life-guidance-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
  }

.life-guidance-list li {
    background: rgba(12, 18, 52, 0.82);
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 255, 0.22);
    padding: 0.85rem 1rem;
  }

.life-guidance-list li strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
    color: rgba(236, 237, 255, 0.94);
  }

.life-guidance-list li p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(214, 216, 255, 0.82);
  }

@media (min-width: 900px) {
    .assessment-hero {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 2rem;
    }

    .assessment-hero__heading {
      max-width: 55%;
    }

    .assessment-hero__refresh {
      align-items: flex-end;
      text-align: right;
    }

    .analysis-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .analysis-columns {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

.button,
  button,
  .site-nav__link {
    font-family: inherit;
  }

.button,
  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    padding: 0.75rem 1.6rem;
    min-height: 3rem;
    font-size: 0.98rem;
    letter-spacing: 0.03em;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.4s ease;
    color: var(--color-text-primary);
  }

.button.primary,
  button.primary {
    background:
      radial-gradient(circle at calc(var(--pointer-x, 0.5) * 100%) calc(var(--pointer-y, 0.5) * 100%), rgba(199, 255, 95, 0.4), transparent 70%),
      linear-gradient(120deg, rgba(118, 64, 217, 0.9), rgba(91, 200, 255, 0.6));
    box-shadow: 0 18px 35px -22px rgba(118, 64, 217, 0.95), 0 12px 25px -18px rgba(199, 255, 95, 0.55);
  }

.button.primary:hover,
  button.primary:hover,
  .button.primary:focus,
  button.primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 25px 40px -20px rgba(118, 64, 217, 0.95), 0 16px 30px -18px rgba(199, 255, 95, 0.6);
  }

.button.primary:disabled,
  button.primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

/* Button loading state with inline spinner */

.button__spinner {
    display: none;
    animation: spinner-rotate 2s linear infinite;
  }

.button.is-loading {
    position: relative;
  }

.button.is-loading .button__spinner {
    display: inline-block;
    margin-right: 0.5rem;
  }

.button.is-loading .button__text {
    display: inline-block;
  }

.button-secondary {
    background: rgba(12, 16, 48, 0.7);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.35);
  }

.button-secondary:hover,
  .button-secondary:focus {
    background: rgba(148, 163, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(199, 255, 95, 0.35);
  }

.button-tertiary,
  button.button-tertiary {
    background: rgba(14, 18, 54, 0.55);
    box-shadow: inset 0 0 0 1px rgba(118, 64, 217, 0.35);
    color: rgba(228, 230, 255, 0.92);
  }

.button-tertiary:hover,
  .button-tertiary:focus,
  button.button-tertiary:hover,
  button.button-tertiary:focus {
    background: rgba(118, 64, 217, 0.32);
    box-shadow: inset 0 0 0 1px rgba(199, 255, 95, 0.35);
    transform: translateY(-1px);
  }

.button-tertiary:disabled,
  button.button-tertiary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: inset 0 0 0 1px rgba(118, 64, 217, 0.2);
  }

canvas {
    display: block;
    margin-top: 1rem;
    width: 100%;
    max-width: 100%;
    background: rgba(12, 16, 48, 0.85);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.25);
  }

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(118, 64, 217, 0.22);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    color: #f1ecff;
    font-weight: 600;
    font-size: calc(0.85rem + var(--tag-weight, 0) * 0.6rem);
    letter-spacing: 0.04em;
    box-shadow: 0 8px 16px -14px rgba(118, 64, 217, 0.9);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  }

.tag:hover,
  .tag:focus {
    transform: translateY(-3px) scale(1.03);
    background: rgba(199, 255, 95, 0.22);
    color: #f6ffe6;
    box-shadow: 0 12px 20px -14px rgba(199, 255, 95, 0.8);
  }

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
  }

th,
  td {
    padding: 0.85rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 255, 0.14);
  }

thead th {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(225, 226, 255, 0.68);
    background: rgba(16, 20, 58, 0.9);
  }

tbody tr:hover {
    background: rgba(118, 64, 217, 0.08);
  }

.channel-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 1.5rem;
  }

.channel-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem;
    border-radius: 18px;
    background: rgba(11, 16, 42, 0.82);
    box-shadow: 0 18px 48px -24px rgba(12, 15, 44, 0.65);
    border: 1px solid rgba(118, 64, 217, 0.25);
  }

.channel-card__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

.channel-card__header h3 {
      margin: 0;
      font-size: 1.05rem;
    }

.channel-card__inspiration {
      margin: 0;
      font-size: 0.98rem;
      color: rgba(228, 226, 255, 0.88);
    }

.channel-card__details {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
  }

.channel-card__details summary {
    cursor: pointer;
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 0.35rem;
  }

.channel-card__details summary::marker {
    color: rgba(255, 255, 255, 0.45);
  }

.channel-card__habits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
  }

.channel-card__footer {
    margin-top: auto;
    font-size: 0.85rem;
  }

.experiment-progress {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid rgba(118, 64, 217, 0.25);
    padding-top: 0.75rem;
  }

.experiment-streak {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: rgba(225, 226, 255, 0.65);
  }

.experiment-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

.experiment-step-item form {
    margin: 0;
  }

.experiment-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--color-text-secondary);
  }

.experiment-step input[type='checkbox'] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: #7640d9;
  }

.experiment-step__text {
    font-weight: 500;
    color: var(--color-text-primary);
  }

.experiment-step__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 1.65rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(199, 255, 95, 0.68);
  }

.experiment-step__time {
    display: block;
    margin-left: 1.65rem;
    font-size: 0.72rem;
    color: rgba(225, 226, 255, 0.5);
  }

.experiment-reflection {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    background: rgba(118, 64, 217, 0.14);
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
  }

.experiment-celebration {
    margin: 0;
    font-size: 0.82rem;
    color: #dbffe0;
    background: rgba(199, 255, 95, 0.16);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    width: -moz-max-content;
    width: max-content;
  }

.experiment-reset-form {
    display: flex;
    justify-content: flex-end;
  }

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(148, 163, 255, 0.25);
    color: #f5f6ff;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.35);
  }

.badge-focus {
    background: rgba(199, 255, 95, 0.18);
    color: #eaffd5;
    box-shadow: inset 0 0 0 1px rgba(199, 255, 95, 0.38);
  }

.badge-muted {
    background: rgba(148, 163, 255, 0.18);
    color: rgba(231, 234, 255, 0.78);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.28);
  }

.badge-life-tool {
    background: rgba(118, 64, 217, 0.25);
  }

.badge-streak {
    background: rgba(118, 64, 217, 0.2);
    color: #e4dcff;
    box-shadow: inset 0 0 0 1px rgba(118, 64, 217, 0.32);
  }

.badge-reset {
    background: rgba(72, 207, 173, 0.25);
    color: #d6fff3;
    box-shadow: inset 0 0 0 1px rgba(72, 207, 173, 0.35);
  }

.quest-empty__actions .button {
    min-width: 14rem;
  }

.reset-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 1.5rem;
  }

.reset-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.25rem;
    border-radius: 18px;
    background: rgba(8, 14, 36, 0.82);
    border: 1px solid rgba(72, 207, 173, 0.22);
    box-shadow: 0 16px 44px -20px rgba(4, 10, 30, 0.7);
  }

.reset-card__header h3 {
    margin: 0.25rem 0 0;
    font-size: 1.05rem;
  }

.reset-card__benefit {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.92rem;
  }

.reset-card__cues {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(225, 226, 255, 0.62);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.88rem;
  }

.reset-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: rgba(225, 226, 255, 0.6);
  }

.reset-card__last {
    margin: 0;
  }

.reset-card__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
  }

.reset-card__duration {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(225, 226, 255, 0.6);
  }

.reset-card__duration select {
    margin-left: 0.45rem;
    background: rgba(8, 12, 30, 0.9);
    border: 1px solid rgba(118, 64, 217, 0.35);
    border-radius: 10px;
    color: var(--color-text-primary);
    padding: 0.3rem 0.5rem;
  }

.reset-card__complete {
    display: flex;
    justify-content: flex-end;
  }

.relaxation-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

.relaxation-actions__time {
    font-size: 0.88rem;
    color: rgba(225, 226, 255, 0.72);
  }

.relaxation-grid {
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

.relaxation-card {
    background: rgba(6, 14, 32, 0.84);
    border-radius: 20px;
    padding: 1.4rem;
    border: 1px solid rgba(135, 196, 255, 0.26);
    box-shadow: 0 18px 42px -24px rgba(3, 10, 35, 0.75);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

.relaxation-card__header h3 {
    margin: 0;
    font-size: 1.05rem;
  }

.relaxation-card__header p {
    margin: 0.3rem 0 0;
    color: rgba(225, 226, 255, 0.7);
    font-size: 0.9rem;
  }

.relaxation-alerts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }

.relaxation-alert {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem;
    border-radius: 14px;
    background: rgba(12, 22, 38, 0.82);
    border: 1px dashed rgba(199, 255, 95, 0.28);
  }

.relaxation-alert__window {
    font-size: 0.85rem;
    color: rgba(225, 226, 255, 0.65);
  }

.relaxation-form {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
  }

.relaxation-form__levels {
    display: flex;
    gap: 0.9rem;
  }

.relaxation-form__levels .form-field {
    flex: 1;
  }

.relaxation-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

.cooldown-focus {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

.cooldown-grid {
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

.cooldown-card {
    background: rgba(8, 14, 36, 0.86);
    border-radius: 20px;
    padding: 1.4rem;
    border: 1px solid rgba(118, 64, 217, 0.28);
    box-shadow: 0 18px 42px -24px rgba(3, 10, 35, 0.85);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

.cooldown-card__header h3 {
    margin: 0;
    font-size: 1.05rem;
  }

.cooldown-card__header p {
    margin: 0.25rem 0 0;
    color: rgba(225, 226, 255, 0.72);
    font-size: 0.9rem;
  }

.cooldown-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

.cooldown-step {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem;
    border-radius: 14px;
    background: rgba(12, 20, 45, 0.72);
    border: 1px solid rgba(118, 64, 217, 0.2);
  }

.cooldown-step__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

.cooldown-step__title {
    font-weight: 600;
    color: var(--color-text-primary);
  }

.cooldown-step__duration {
    font-size: 0.85rem;
    color: rgba(225, 226, 255, 0.68);
  }

.cooldown-step__guidance {
    margin: 0;
    font-size: 0.88rem;
  }

.cooldown-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

.cooldown-form__levels {
    display: flex;
    gap: 0.9rem;
  }

.cooldown-form__levels .form-field {
    flex: 1;
  }

.cooldown-progress {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.92rem;
  }

.cooldown-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: rgba(225, 226, 255, 0.68);
  }

.cooldown-history time {
    font-weight: 600;
    margin-right: 0.4rem;
  }

.cooldown-reminders {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

.cooldown-reminder {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem;
    border-radius: 14px;
    background: rgba(12, 18, 40, 0.78);
    border: 1px dashed rgba(118, 64, 217, 0.32);
  }

.cooldown-reminder__meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

.cooldown-reminder__meta time {
    font-size: 0.85rem;
    color: rgba(225, 226, 255, 0.7);
  }

.cooldown-reminder__form {
    display: flex;
    justify-content: flex-end;
  }

.form-errors {
    padding: 0.8rem;
    border-radius: 12px;
    background: rgba(217, 64, 64, 0.16);
    border: 1px solid rgba(217, 64, 64, 0.35);
    color: #ffc9c9;
    font-size: 0.85rem;
  }

@media (max-width: 960px) {
    .cooldown-form__levels {
      flex-direction: column;
    }
  }

.badge-reflection {
    background: rgba(118, 64, 217, 0.2);
    color: #e6ddff;
    box-shadow: inset 0 0 0 1px rgba(118, 64, 217, 0.4);
  }

.badge-life-tool {
    background: rgba(118, 219, 255, 0.24);
    color: #e3f9ff;
    box-shadow: inset 0 0 0 1px rgba(118, 219, 255, 0.42);
  }

.badge-guidance {
    background: rgba(255, 214, 102, 0.22);
    color: #fff6d6;
    box-shadow: inset 0 0 0 1px rgba(255, 214, 102, 0.35);
  }

.badge-secondary {
    background: rgba(122, 133, 255, 0.18);
    color: rgba(235, 237, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(122, 133, 255, 0.35);
  }

.rationale {
    margin: 0;
    color: var(--color-text-primary);
  }

.question {
    margin-bottom: 1.75rem;
    padding: 1.35rem 1.25rem;
    border-radius: 16px;
    background:
      linear-gradient(135deg, rgba(12, 16, 48, 0.92), rgba(118, 64, 217, 0.2)),
      repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.03) 0 16px, rgba(36, 18, 62, 0.08) 16px 32px);
    border: 1px solid rgba(148, 163, 255, 0.22);
  }

.prompt {
    display: block;
    font-weight: 600;
    margin-bottom: 0.75rem;
  }

.quest-track__item.is-complete {
    border-style: solid;
    border-color: rgba(199, 255, 95, 0.75);
    background: linear-gradient(135deg, rgba(28, 42, 86, 0.85), rgba(65, 26, 102, 0.65));
    box-shadow: 0 18px 32px rgba(10, 4, 38, 0.4);
  }

@keyframes questPop {
    0% {
      transform: scale(0.85);
      opacity: 0.6;
    }
    60% {
      transform: scale(1.05);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

.celebration-banner {
    position: relative;
    margin-top: 1.75rem;
    padding: 1.9rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(199, 255, 95, 0.48);
    background:
      linear-gradient(135deg, rgba(23, 28, 74, 0.9), rgba(61, 22, 94, 0.72)),
      radial-gradient(circle at calc(var(--pointer-x, 0.5) * 100%) 10%, rgba(199, 255, 95, 0.16), transparent 70%);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    box-shadow: 0 24px 48px -30px rgba(12, 16, 48, 0.85);
  }

.celebration-banner.is-active {
    opacity: 1;
    transform: translateY(0);
  }

.celebration-banner--complete {
    border-color: rgba(199, 255, 95, 0.6);
  }

.celebration-banner__background {
    position: absolute;
    inset: -25%;
    pointer-events: none;
    filter: blur(14px);
    opacity: 0.9;
  }

.celebration-banner__halo,
  .celebration-banner__wave {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

.celebration-banner__halo {
    background: radial-gradient(circle at 40% 50%, rgba(199, 255, 95, 0.42), rgba(199, 255, 95, 0));
    animation: celebrationHalo 16s ease-in-out infinite;
    opacity: 0.6;
  }

.celebration-banner__wave {
    background: conic-gradient(from 0deg, rgba(118, 64, 217, 0.18), rgba(12, 16, 48, 0));
    opacity: 0.35;
    animation: celebrationSweep 20s linear infinite;
  }

.celebration-banner__content {
    position: relative;
    z-index: 1;
    max-width: 620px;
  }

.celebration-banner__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
    margin: 0 0 0.5rem;
    color: rgba(199, 255, 95, 0.72);
  }

.celebration-banner__copy {
    margin-top: 0.35rem;
    color: rgba(229, 229, 255, 0.85);
  }

.celebration-banner__stats {
    margin: 1.25rem 0 0;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

.celebration-banner__stats div {
    position: relative;
    background: linear-gradient(140deg, rgba(18, 16, 52, 0.65), rgba(42, 16, 68, 0.55));
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(148, 114, 255, 0.25);
    overflow: hidden;
  }

.celebration-banner__stats div::after {
    content: "";
    position: absolute;
    inset: -35% -10% 40% 10%;
    background: radial-gradient(circle at 20% 30%, rgba(199, 255, 95, 0.22), transparent 65%);
    filter: blur(14px);
    opacity: 0.6;
    pointer-events: none;
  }

.celebration-banner__stats dt {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(204, 206, 255, 0.7);
    margin: 0 0 0.35rem;
  }

.celebration-banner__stats dd {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(248, 249, 255, 0.94);
  }

.celebration-banner__confetti {
    position: absolute;
    inset: 0;
    z-index: 2;
    mix-blend-mode: screen;
    pointer-events: none;
    overflow: hidden;
  }

@keyframes confetti-fall {
    0% {
      transform: translate3d(0, 0, 0);
      opacity: 0;
    }
    15% {
      opacity: 1;
    }
    100% {
      transform: translate3d(0, 120vh, 0);
      opacity: 0;
    }
  }

@keyframes confetti-spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(720deg);
    }
  }

.celebration-banner.is-dismissing {
    animation: celebration-flourish 0.8s ease forwards;
  }

@keyframes celebration-flourish {
    0% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    60% {
      opacity: 1;
      transform: translateY(-6px) scale(1.02);
    }
    100% {
      opacity: 0;
      transform: translateY(-12px) scale(0.96);
    }
  }

@media (prefers-reduced-motion: reduce) {
    .quest-track__item,
    .celebration-banner,
    .celebration__confetti-piece {
      animation: none;
      transition: none;
    }

    .assessment-hero__halo,
    .assessment-hero__orbit,
    .celebration-banner__halo,
    .celebration-banner__wave,
    .analysis-layout__background,
    .analysis-layout__grid,
    .analysis-layout__glow,
    [data-response-wave]::after {
      animation: none !important;
      transform: none !important;
    }
  }

textarea {
    width: 100%;
    min-height: 140px;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 255, 0.28);
    background: rgba(8, 12, 40, 0.85);
    color: var(--color-text-primary);
    font-size: 1rem;
    resize: vertical;
  }

input:focus,
  textarea:focus {
    outline: none;
    border-color: rgba(199, 255, 95, 0.6);
    box-shadow: 0 0 0 3px rgba(199, 255, 95, 0.15);
  }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

@media (max-width: 900px) {
    .panel-header {
      flex-direction: column;
      align-items: flex-start;
    }

    table {
      min-width: 100%;
    }
  }

@media (max-width: 720px) {
    .container {
      padding: 2.25rem 1.25rem;
    }

    .panel {
      padding: 1.5rem 1.6rem;
    }

    .relaxation-form__levels {
      flex-direction: column;
    }

    .relaxation-actions {
      justify-content: flex-start;
    }

    .suggestion-grid,
    .analytics-grid {
      grid-template-columns: 1fr;
    }
  }

.assessment-tunnel {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 2.8rem 3rem;
    background: radial-gradient(circle at 20% 20%, rgba(118, 64, 217, 0.32), transparent 62%),
      radial-gradient(circle at 88% 14%, rgba(199, 255, 95, 0.18), transparent 58%),
      rgba(9, 10, 38, 0.78);
    box-shadow: 0 32px 80px rgba(7, 6, 24, 0.55);
    display: grid;
    gap: 2.25rem;
  }

.assessment-tunnel__illusions {
    position: absolute;
    inset: -12%;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
  }

.assessment-tunnel__optic-grid,
  .assessment-tunnel__optic-rings,
  .assessment-tunnel__sparkle-field {
    position: absolute;
    inset: 0;
    border-radius: 40px;
    opacity: 0.4;
    transition: opacity 0.6s ease, transform 0.8s ease;
  }

.assessment-tunnel__optic-grid {
    background:
      repeating-linear-gradient(135deg, rgba(118, 64, 217, 0.18) 0 36px, rgba(18, 20, 60, 0.78) 36px 72px);
    transform: rotate(calc(var(--optic-tilt, 0) * 12deg));
    opacity: 0.32;
  }

.assessment-tunnel__optic-rings {
    background:
      radial-gradient(circle at 50% 50%, rgba(246, 220, 255, 0.35), rgba(246, 220, 255, 0) 68%),
      radial-gradient(circle at 50% 50%, rgba(118, 64, 217, 0.35), rgba(118, 64, 217, 0) 80%);
    filter: blur(12px);
    opacity: 0.24;
  }

.assessment-tunnel__optic-rings.is-pulsing {
    animation: tunnelRingPulse 6s ease-in-out infinite;
    opacity: 0.36;
  }

.assessment-tunnel__sparkle-field {
    background:
      radial-gradient(circle at 18% 28%, rgba(199, 255, 95, calc(var(--sparkle-density, 0.35))), transparent 52%),
      radial-gradient(circle at 68% 12%, rgba(246, 220, 255, calc(var(--sparkle-density, 0.25))), transparent 60%),
      radial-gradient(circle at 42% 78%, rgba(118, 64, 217, calc(var(--sparkle-density, 0.25))), transparent 70%);
    opacity: 0.2;
  }

.assessment-tunnel__sparkle-field.is-awake {
    opacity: 0.38;
  }

.tunnel-stage--focused .assessment-tunnel__sparkle-field {
    opacity: 0.46;
  }

.tunnel-stage--complete .assessment-tunnel__optic-rings {
    opacity: 0.45;
  }

.assessment-tunnel__frame {
    position: absolute;
    inset: -6%;
    pointer-events: none;
    display: grid;
    place-items: center;
    opacity: 0.7;
    z-index: 1;
  }

.assessment-tunnel__beam {
    width: 120%;
    height: 120%;
    border-radius: 36px;
    mix-blend-mode: screen;
    filter: blur(6px);
    opacity: 0.4;
    animation: tunnelBeamPulse 6s ease-in-out infinite;
  }

.assessment-tunnel__beam--one {
    background: linear-gradient(135deg, rgba(118, 64, 217, 0.55), rgba(17, 22, 70, 0.4));
  }

.assessment-tunnel__beam--two {
    background: linear-gradient(315deg, rgba(199, 255, 95, 0.35), rgba(12, 16, 48, 0.1));
    animation-delay: 1.4s;
  }

.assessment-tunnel__beam--three {
    background: radial-gradient(circle, rgba(246, 220, 255, 0.28), rgba(12, 15, 40, 0));
    animation-delay: 2.4s;
  }

.assessment-tunnel__beam--halo {
    background: radial-gradient(circle, rgba(118, 64, 217, 0.2), rgba(12, 15, 40, 0));
    animation-delay: 3.4s;
  }

.assessment-tunnel__header {
    position: relative;
    z-index: 1;
    text-align: center;
    display: grid;
    gap: 0.75rem;
  }

.assessment-tunnel__eyebrow {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: rgba(246, 220, 255, 0.72);
  }

.assessment-tunnel__intro {
    margin: 0 auto;
    max-width: 52ch;
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1.85;
    letter-spacing: 0.015em;
    color: rgba(245, 246, 255, 0.96);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }

.assessment-tunnel--empty {
    min-height: clamp(420px, 70vh, 720px);
    justify-content: center;
    text-align: center;
    gap: 2.5rem;
  }

.assessment-tunnel__empty-state {
    background: rgba(12, 16, 48, 0.65);
    border: 1px solid rgba(146, 125, 255, 0.32);
    box-shadow: 0 18px 45px rgba(5, 4, 20, 0.6);
    border-radius: 32px;
    padding: 2.75rem 3rem;
    max-width: 40rem;
    margin: 0 auto;
  }

.assessment-tunnel__empty-state p {
    margin-bottom: 1.5rem;
    color: var(--color-text-secondary);
  }

.assessment-tunnel__empty-status {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    justify-items: center;
  }

.assessment-tunnel__empty-countdown {
    margin: 0;
    color: rgba(218, 220, 255, 0.86);
    font-size: 0.95rem;
  }

.assessment-tunnel__empty-countdown span {
    color: rgba(199, 255, 95, 0.88);
    font-weight: 600;
  }

.assessment-tunnel__empty-message {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(214, 216, 255, 0.85);
    text-align: center;
  }

.assessment-tunnel__empty-status[data-status-tone='warning'] .assessment-tunnel__empty-message {
    color: rgba(255, 206, 150, 0.92);
  }

.assessment-tunnel__empty-status[data-status-tone='info'] .assessment-tunnel__empty-message {
    color: rgba(209, 214, 255, 0.9);
  }

.assessment-tunnel__empty-status[data-status-tone='success'] .assessment-tunnel__empty-message {
    color: rgba(199, 255, 95, 0.86);
  }

.assessment-tunnel__empty-status[data-status-tone='error'] .assessment-tunnel__empty-message {
    color: rgba(255, 172, 172, 0.94);
  }

.assessment-tunnel__empty-refresh {
    min-width: 9.5rem;
  }

.assessment-tunnel__empty-refresh[data-refresh-state='refreshing'] {
    cursor: wait;
    opacity: 0.72;
  }

.assessment-tunnel__empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    align-items: center;
  }

.assessment-tunnel__empty-regenerate {
    display: inline-flex;
  }

.assessment-tunnel__hud {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

.assessment-tunnel__progress {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(22, 24, 70, 0.72);
    overflow: hidden;
  }

.assessment-tunnel__progress-indicator {
    position: absolute;
    inset: 0;
    min-width: 10px;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(199, 255, 95, 0.85), rgba(118, 64, 217, 0.95));
    box-shadow: 0 6px 22px rgba(199, 255, 95, 0.4), 0 0 40px rgba(199, 255, 95, 0.25);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    animation: progressShimmer 3s ease-in-out infinite;
  }

@keyframes progressShimmer {
    0%, 100% {
      filter: brightness(1) saturate(1);
      box-shadow: 0 6px 22px rgba(199, 255, 95, 0.4), 0 0 40px rgba(199, 255, 95, 0.25);
    }
    50% {
      filter: brightness(1.15) saturate(1.2);
      box-shadow: 0 6px 26px rgba(199, 255, 95, 0.5), 0 0 50px rgba(199, 255, 95, 0.35);
    }
  }

/* Gold completion state for 100% progress */

.tunnel-stage--complete .assessment-tunnel__progress-indicator {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.85), rgba(251, 191, 36, 0.95));
    box-shadow: 0 6px 22px rgba(251, 191, 36, 0.5), 0 0 40px rgba(251, 191, 36, 0.35);
    animation: progressShimmerGold 3s ease-in-out infinite;
  }

@keyframes progressShimmerGold {
    0%, 100% {
      filter: brightness(1) saturate(1);
      box-shadow: 0 6px 22px rgba(251, 191, 36, 0.5), 0 0 40px rgba(251, 191, 36, 0.35);
    }
    50% {
      filter: brightness(1.15) saturate(1.2);
      box-shadow: 0 6px 26px rgba(251, 191, 36, 0.65), 0 0 50px rgba(251, 191, 36, 0.45);
    }
  }

.assessment-tunnel__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

.assessment-tunnel__badge {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(18, 22, 68, 0.68);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.32);
  }

.assessment-tunnel__badge--percent {
    background: rgba(118, 64, 217, 0.28);
    box-shadow: inset 0 0 0 1px rgba(199, 255, 95, 0.4);
  }

.assessment-tunnel__milestones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

.assessment-tunnel__milestone {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(118, 64, 217, 0.28);
    background: rgba(10, 12, 44, 0.68);
    color: rgba(225, 226, 255, 0.65);
    transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

.assessment-tunnel__milestone.is-complete {
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(251, 191, 36, 0.65);
    background: rgba(251, 191, 36, 0.08);
    box-shadow:
      0 0 16px rgba(251, 191, 36, 0.45),
      inset 0 1px 0 rgba(251, 191, 36, 0.2);
    animation: milestonePulseGold 2s ease-in-out infinite;
  }

@keyframes milestonePulseGold {
    0%, 100% {
      box-shadow:
        0 0 16px rgba(251, 191, 36, 0.45),
        inset 0 1px 0 rgba(251, 191, 36, 0.2);
    }
    50% {
      box-shadow:
        0 0 24px rgba(251, 191, 36, 0.65),
        inset 0 1px 0 rgba(251, 191, 36, 0.3);
    }
  }

.assessment-tunnel__form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.6rem;
    padding: 2.2rem;
    border-radius: 24px;
    background: linear-gradient(140deg, rgba(6, 8, 24, 0.99), rgba(8, 10, 28, 1)),
      radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.06), transparent 70%);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(251, 191, 36, 0.35);
    box-shadow:
      0 30px 60px -45px rgba(15, 28, 92, 0.95),
      inset 0 1px 0 rgba(251, 191, 36, 0.15),
      inset 0 0 20px rgba(251, 191, 36, 0.04);
    transition:
      box-shadow 0.3s ease,
      border-color 0.3s ease;
  }

.assessment-tunnel__prompt {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 600;
  }

.assessment-tunnel__citation {
    margin: -0.4rem 0 0.8rem;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    background: rgba(9, 11, 36, 0.85);
    border: 1px solid rgba(148, 163, 255, 0.25);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
  }

.assessment-tunnel__citation-label {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: 600;
  }

.assessment-tunnel__citation-details summary {
    cursor: pointer;
    color: var(--color-text-secondary);
    font-weight: 500;
  }

.assessment-tunnel__citation-list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
  }

.assessment-tunnel__citation-list li {
    margin-bottom: 0.35rem;
  }

.assessment-tunnel__rationale {
    margin-top: 0.6rem;
  }

.assessment-tunnel__rationale-label {
    margin: 0 0 0.35rem;
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.85rem;
  }

.assessment-tunnel__rationale-list {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--color-text-secondary);
  }

.assessment-tunnel__rationale-list li {
    margin-bottom: 0.35rem;
  }

.assessment-tunnel__scale {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.2rem;
    border-radius: 18px;
    background: rgba(16, 18, 54, 0.8);
    box-shadow: inset 0 0 0 1px rgba(118, 64, 217, 0.32);
  }

.assessment-tunnel__scale input[type='number'] {
    width: 5rem;
    padding: 0.55rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 255, 0.35);
    background: rgba(9, 11, 36, 0.9);
    color: var(--color-text-primary);
    font-size: 1.25rem;
    text-align: center;
  }

.assessment-tunnel__scale-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
  }

.assessment-tunnel textarea {
    width: 100%;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 255, 0.35);
    background: rgba(9, 11, 36, 0.9);
    color: var(--color-text-primary);
    font-size: 1.05rem;
    line-height: 1.75;
    resize: vertical;
    min-height: 160px;
    transition:
      border-color 0.25s ease,
      box-shadow 0.25s ease;
  }

.assessment-tunnel textarea:focus {
    outline: none;
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow:
      0 0 12px rgba(251, 191, 36, 0.25),
      inset 0 1px 0 rgba(251, 191, 36, 0.1);
  }

.assessment-tunnel textarea:hover {
    border-color: rgba(148, 163, 255, 0.45);
  }

.assessment-tunnel textarea::-moz-placeholder {
    color: rgba(225, 226, 255, 0.5);
  }

.assessment-tunnel textarea::placeholder {
    color: rgba(225, 226, 255, 0.5);
  }

.assessment-tunnel__creative {
    display: grid;
    gap: 1.25rem;
    background: linear-gradient(140deg, rgba(6, 8, 24, 0.99), rgba(8, 10, 28, 1)),
      radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.06), transparent 70%);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 1.75rem;
    border: 1px solid rgba(251, 191, 36, 0.28);
    box-shadow:
      0 30px 60px -45px rgba(15, 28, 92, 0.95),
      inset 0 1px 0 rgba(251, 191, 36, 0.12),
      inset 0 0 20px rgba(251, 191, 36, 0.04);
  }

.assessment-tunnel__creative-instructions {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
  }

.assessment-tunnel__creative-inspiration {
    margin: 0;
    color: rgba(225, 226, 255, 0.78);
    font-size: 0.95rem;
  }

.assessment-tunnel__idea-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

.assessment-tunnel__chip {
    border: 1px solid rgba(199, 255, 95, 0.45);
    background: rgba(199, 255, 95, 0.1);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

.assessment-tunnel__chip:focus,
  .assessment-tunnel__chip:hover {
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(199, 255, 95, 0.25);
  }

.assessment-tunnel__constraints {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(225, 226, 255, 0.72);
    font-size: 0.9rem;
  }

.assessment-tunnel__creative-editor {
    display: grid;
    gap: 0.75rem;
  }

.assessment-tunnel__creative textarea {
    min-height: 220px;
    font-size: 1.05rem;
    line-height: 1.7;
  }

.assessment-tunnel__creative-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(225, 226, 255, 0.78);
  }

.assessment-tunnel__word-count {
    font-weight: 600;
    color: rgba(199, 255, 95, 0.85);
  }

.assessment-tunnel__creative-celebration {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    animation: creativeCelebrate 1.2s ease infinite alternate;
  }

.assessment-tunnel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

.assessment-tunnel__submit-status {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
  }

.assessment-tunnel__submit-status[data-status-tone='warning'] {
    color: rgba(251, 191, 36, 0.9);
  }

.assessment-tunnel__submit-status[data-status-tone='error'] {
    color: rgba(248, 113, 113, 0.9);
  }

.assessment-tunnel__submit {
    min-width: 280px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 8px 24px rgba(118, 64, 217, 0.35), 0 0 40px rgba(118, 64, 217, 0.15);
  }

.assessment-tunnel__submit:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 32px rgba(118, 64, 217, 0.5), 0 0 60px rgba(118, 64, 217, 0.25);
  }

.assessment-tunnel__submit:active {
    transform: translateY(0) scale(0.98);
  }

/* Ripple effect on click */

.assessment-tunnel__submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

.assessment-tunnel__submit:active::before {
    opacity: 1;
    animation: buttonRipple 0.6s ease forwards;
  }

@keyframes buttonRipple {
    from {
      transform: scale(0);
      opacity: 1;
    }
    to {
      transform: scale(2.5);
      opacity: 0;
    }
  }

.tunnel-stage.is-active {
    opacity: 1;
  }

.tunnel-stage--complete {
    box-shadow: 0 52px 140px rgba(246, 220, 255, 0.42);
  }

.assessment-tunnel__confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

.assessment-tunnel__confetti.is-visible {
    opacity: 1;
  }

.assessment-tunnel__confetti-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

.tunnel-entry-glide {
    animation: tunnelEntryGlide 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

.tunnel-entry-zoom {
    animation: tunnelEntryZoom 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
  }

.tunnel-entry-flare {
    animation: tunnelEntryFlare 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

.tunnel-exit-shift {
    animation: tunnelExitShift 0.6s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  }

.tunnel-exit-fade {
    animation: tunnelExitFade 0.55s ease forwards;
  }

.tunnel-exit-portal {
    animation: tunnelExitPortal 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }

@media (max-width: 720px) {
    .assessment-tunnel {
      padding: 2.2rem 1.6rem;
      border-radius: 20px;
    }

    .assessment-tunnel__form {
      padding: 1.25rem;
    }

    /* Scale input mobile layout */
    .assessment-tunnel__scale {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
    }

    .assessment-tunnel__scale input[type="number"] {
      width: 100%;
      min-height: 54px;
      font-size: 1.5rem;
      text-align: center;
    }

    /* Idea chips touch targets */
    .assessment-tunnel__chip {
      min-height: 44px;
      padding: 0.75rem 1.2rem;
      font-size: 0.875rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .assessment-tunnel__idea-chips {
      gap: 0.5rem;
    }

    /* Progress and status */
    .assessment-tunnel__progress {
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: flex-start;
    }

    /* Actions and buttons */
    .assessment-tunnel__actions {
      flex-direction: column;
      align-items: stretch;
    }

    .assessment-tunnel__submit {
      width: 100%;
      min-width: unset;
      min-height: 48px;
    }

    .assessment-tunnel__dashboard-link {
      margin-left: 0;
      text-align: center;
    }

    /* Textareas */
    .assessment-tunnel textarea {
      min-height: 140px;
      font-size: 1rem;
    }

    .assessment-tunnel__creative textarea {
      min-height: 200px;
      font-size: 1rem;
    }
  }

@media (prefers-reduced-motion: reduce) {
    [data-motion-depth] {
      transform: none !important;
      transition: none !important;
      opacity: 1 !important;
      filter: none !important;
    }

    .op-art-backdrop,
    .op-art-backdrop__layer,
    .op-art-backdrop__orb {
      animation: none !important;
      transform: none !important;
    }

    .tunnel-stage,
    .tunnel-entry-glide,
    .tunnel-entry-zoom,
    .tunnel-entry-flare,
    .tunnel-exit-shift,
    .tunnel-exit-fade,
    .tunnel-exit-portal {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

.today-card {
    position: relative;
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 255, 0.28);
    background:
      linear-gradient(135deg, rgba(14, 16, 42, 0.96), rgba(36, 16, 68, 0.8)),
      radial-gradient(circle at 82% 8%, rgba(199, 255, 95, 0.12), transparent 65%);
    box-shadow: 0 24px 48px -32px rgba(8, 5, 28, 0.82);
    display: grid;
    gap: var(--space-sm);
    overflow: hidden;
  }

.today-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: space-between;
    align-items: flex-start;
  }

.today-card__header h2 {
    margin: 0;
    font-size: var(--type-heading);
  }

.today-card__eyebrow {
    margin: 0 0 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    color: rgba(199, 255, 95, 0.72);
  }

.today-card__status {
    display: grid;
    gap: 0.35rem;
    justify-items: end;
    text-align: right;
  }

.today-card__status p {
    margin: 0;
    color: var(--color-text-secondary);
  }

.today-card__body {
    display: grid;
    gap: var(--space-md);
    align-items: start;
  }

.today-card__primary {
    display: grid;
    gap: var(--space-sm);
  }

.today-card__quick {
    display: grid;
    gap: var(--space-sm);
    align-items: start;
  }

.today-card__daily-review {
    display: inline-flex;
  }

.today-card__quest,
  .today-card__quest-empty {
    padding: 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(199, 255, 95, 0.22);
    background: rgba(18, 24, 58, 0.75);
    display: grid;
    gap: 0.65rem;
  }

.today-card__surprise {
    padding: 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 255, 0.28);
    background: rgba(16, 20, 54, 0.78);
    display: grid;
    gap: 0.75rem;
  }

.today-card__surprise-header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }

.today-card__surprise-header h3 {
    margin: 0;
    font-size: 1.05rem;
  }

.today-card__surprise-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
  }

.today-card__surprise-item {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.55rem 0.75rem;
    border-radius: 14px;
    background: rgba(10, 14, 42, 0.68);
    border: 1px solid rgba(118, 64, 217, 0.28);
  }

.today-card__surprise-item dt,
  .today-card__surprise-item dd {
    margin: 0;
  }

.today-card__surprise-item dt {
    font-weight: 600;
    color: rgba(215, 222, 255, 0.92);
  }

.today-card__surprise-item dd {
    color: var(--color-text-secondary);
    text-align: right;
  }

.today-card__surprise-last {
    margin: 0;
  }

.today-card__surprise-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

.today-card__quest h3,
  .today-card__quest-empty h3 {
    margin: 0;
  }

.today-card__quest p,
  .today-card__quest-empty p {
    margin: 0;
  }

.today-card__quest-streak {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
  }

.today-card__quest-form {
    display: inline-flex;
  }

.today-card__quest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

.today-card__intel {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 255, 0.24);
    background:
      linear-gradient(145deg, rgba(12, 16, 48, 0.92), rgba(20, 16, 62, 0.75));
    padding: 1.35rem;
    display: grid;
    gap: 0.65rem;
  }

.today-card__intel header {
    display: grid;
    gap: 0.4rem;
  }

.today-card__intel h3 {
    margin: 0;
    font-size: 1.2rem;
  }

.today-card__intel p {
    margin: 0;
  }

.today-card__intel-metrics {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.3rem;
  }

.today-card__shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.5rem;
  }

.today-card__shortcut {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 255, 0.25);
    background: rgba(10, 14, 42, 0.7);
    font-size: 0.92rem;
    color: rgba(215, 222, 255, 0.88);
    transition: background 0.25s ease, transform 0.25s ease;
  }

.today-card__shortcut:hover,
  .today-card__shortcut:focus {
    background: rgba(20, 24, 62, 0.85);
    transform: translateY(-1px);
    text-decoration: none;
  }

@media (min-width: 62rem) {
    .today-card__body {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .today-card__primary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-sm);
    }

    .today-card__assessment {
      grid-column: span 2;
    }

    .today-card__cta {
      grid-column: span 2;
    }

    .today-card__quick {
      grid-column: span 2;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .today-card__surprise {
      grid-column: span 2;
    }
  }

.status-chip-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.25rem 0.15rem 0.5rem;
    margin: 0 0 var(--space-md);
    scroll-snap-type: x proximity;
  }

.status-chip-row::-webkit-scrollbar {
    height: 4px;
  }

.status-chip-row::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 255, 0.3);
    border-radius: 999px;
  }

.status-chip {
    flex: 0 0 auto;
    min-width: 170px;
    padding: 0.55rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 255, 0.22);
    background: rgba(9, 12, 36, 0.85);
    display: grid;
    gap: 0.25rem;
    scroll-snap-align: start;
  }

.status-chip--wide {
    min-width: 240px;
  }

.status-chip__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(199, 255, 95, 0.7);
  }

.status-chip__value {
    font-size: 0.95rem;
    color: rgba(225, 226, 255, 0.88);
  }

/* Gold achievement treatments for streaks and completions */

.badge-streak--gold,
  .badge-status--gold {
    border-color: rgba(251, 191, 36, 0.6);
    background: rgba(251, 191, 36, 0.15);
    color: #ffc561;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
  }

.status-chip__value--gold {
    color: rgba(251, 191, 36, 0.95);
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.35);
    font-weight: 600;
  }

.status-chip--achievement {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.08);
  }

/* Page-hero metric gold treatments for achievements */

.page-hero__metric--achievement {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.08);
  }

.page-hero__metric-value--gold {
    color: rgba(251, 191, 36, 0.95);
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.35);
    font-weight: 600;
  }

.dashboard-segments {
    display: grid;
    gap: var(--space-md);
  }

.dashboard-segment {
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 255, 0.26);
    background:
      linear-gradient(145deg, rgba(12, 16, 48, 0.9), rgba(16, 12, 42, 0.75));
    box-shadow: 0 24px 48px -36px rgba(8, 5, 28, 0.8);
    padding: 1.25rem;
  }

.dashboard-quick-actions {
    margin-bottom: 1.5rem;
    display: grid;
    gap: 1rem;
  }

.dashboard-quick-actions__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

.dashboard-quick-actions__eyebrow {
    margin: 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.76rem;
    color: rgba(199, 255, 95, 0.8);
  }

.dashboard-quick-actions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
  }

.dashboard-quick-actions__link {
    display: grid;
    gap: 0.2rem;
    grid-template-columns: 1fr;
    align-items: start;
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 255, 0.25);
    background: rgba(9, 12, 36, 0.78);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

.dashboard-quick-actions__link--accented {
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
  }

.dashboard-quick-actions__preview {
    width: 2.75rem;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    background-image: var(--quick-action-preview);
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 22px -14px rgba(8, 5, 28, 0.8);
    border: 1px solid rgba(148, 163, 255, 0.35);
    overflow: hidden;
    background-color: rgba(148, 163, 255, 0.18);
  }

.dashboard-quick-actions__text {
    display: grid;
    gap: 0.2rem;
  }

.dashboard-quick-actions__link:hover,
  .dashboard-quick-actions__link:focus-visible {
    border-color: rgba(199, 255, 95, 0.6);
    transform: translateY(-2px);
  }

.dashboard-quick-actions__label {
    font-weight: 600;
  }

.dashboard-quick-actions__hint {
    font-size: 0.85rem;
    color: rgba(231, 234, 255, 0.78);
  }

@media (max-width: 640px) {
    .dashboard-quick-actions__preview {
      width: 2.2rem;
      box-shadow: 0 10px 18px -14px rgba(8, 5, 28, 0.75);
    }
  }

.dashboard-segment + .dashboard-segment {
    margin-top: 0.25rem;
  }

.dashboard-segment summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: space-between;
    align-items: baseline;
    cursor: pointer;
    list-style: none;
  }

.dashboard-segment summary::-webkit-details-marker,
  .dashboard-segment summary::marker {
    display: none;
  }

.dashboard-segment summary h2 {
    margin: 0;
  }

.dashboard-segment summary p {
    margin: 0;
    color: var(--color-text-secondary);
    max-width: 36ch;
  }

.dashboard-segment__body {
    margin-top: var(--space-sm);
    display: grid;
    gap: var(--space-md);
  }

.dashboard-segment__body--stacked {
    gap: var(--space-md);
  }

.hub-list {
    display: grid;
    gap: var(--space-sm);
  }

@media (min-width: 48rem) {
    .hub-list {
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
  }

.hub-list--compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

.hub-card {
    position: relative;
    display: grid;
    gap: 0.5rem;
    padding: 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 255, 0.2);
    background: rgba(9, 12, 36, 0.82);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  }

.hub-card:hover,
  .hub-card:focus {
    transform: translateY(-2px);
    border-color: rgba(199, 255, 95, 0.32);
    background: rgba(15, 18, 48, 0.9);
    text-decoration: none;
  }

.hub-card__eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(199, 255, 95, 0.68);
  }

.hub-card__metric,
  .hub-card__meta,
  .hub-card__hint {
    margin: 0;
    color: rgba(225, 226, 255, 0.85);
  }

.hub-card__meta {
    color: var(--color-text-secondary);
  }

.hub-card__hint {
    font-size: 0.88rem;
    color: rgba(199, 255, 95, 0.78);
  }

.hub-card__cta {
    font-size: 0.85rem;
    color: rgba(208, 222, 255, 0.88);
  }

.hub-card--compact {
    gap: 0.45rem;
  }

.dashboard-focus-rail {
    margin-top: 1.5rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 255, 0.26);
    background: rgba(9, 12, 36, 0.85);
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
  }

@media (min-width: 48rem) {
    .dashboard-focus-rail {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }
  }

.dashboard-focus-rail__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: rgba(199, 255, 95, 0.75);
  }

.dashboard-focus-rail__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

.dashboard-focus-rail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

.dashboard-focus-rail__stats {
    display: grid;
    gap: 0.2rem;
    justify-items: flex-start;
    text-align: right;
  }

.dashboard-focus-rail__stat,
  .dashboard-focus-rail__percent {
    margin: 0;
  }

.dashboard-focus-rail__percent {
    font-size: 2rem;
    font-weight: 700;
  }

.dashboard-cadence {
    margin-top: 1.25rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 255, 0.24);
    background: rgba(9, 12, 36, 0.82);
    padding: 1.2rem;
    display: grid;
    gap: 1rem;
  }

.dashboard-cadence__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: baseline;
  }

.dashboard-cadence__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: rgba(199, 255, 95, 0.75);
  }

.dashboard-cadence__grid {
    display: grid;
    gap: 0.75rem;
  }

.dashboard-cadence__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 255, 0.2);
    background: rgba(8, 10, 32, 0.65);
    padding: 0.85rem 1rem;
  }

.dashboard-cadence__item.is-complete {
    border-color: rgba(199, 255, 95, 0.45);
    background: rgba(12, 18, 48, 0.75);
  }

.dashboard-cadence__title,
  .dashboard-cadence__time,
  .dashboard-cadence__notes {
    margin: 0;
  }

.dashboard-cadence__time,
  .dashboard-cadence__notes {
    font-size: 0.9rem;
    color: rgba(231, 234, 255, 0.78);
  }

.dashboard-cadence__status {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
    justify-content: center;
  }

.planning-life-areas {
    margin-top: 1rem;
  }

.planning-life-areas__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

.planning-life-areas__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 255, 0.24);
    background: rgba(9, 12, 36, 0.7);
  }

.planning-life-areas__chip.is-active {
    border-color: rgba(199, 255, 95, 0.6);
    background: linear-gradient(125deg, rgba(118, 64, 217, 0.55), rgba(199, 255, 95, 0.4));
  }

.planning-life-areas__chip-count {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
  }

.planning-priority-list {
    margin-top: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 255, 0.2);
    background: rgba(9, 12, 36, 0.78);
    padding: 1rem;
  }

.planning-priority-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
  }

.planning-priority-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.35rem;
    align-items: baseline;
  }

.planning-priority-list__title {
    font-weight: 600;
  }

.planning-priority-list__meta {
    font-size: 0.9rem;
    color: rgba(231, 234, 255, 0.78);
  }

.planning-priority-list__link {
    text-decoration: none;
    font-weight: 600;
  }

.insight-digest,
  .next-actions,
  .insight-history,
  .reflection-links {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 255, 0.18);
    background: rgba(9, 12, 36, 0.82);
    padding: 1.1rem;
    display: grid;
    gap: 0.75rem;
  }

.insight-digest header,
  .next-actions header,
  .insight-history header {
    display: grid;
    gap: 0.35rem;
  }

.insight-digest__summary,
  .insight-digest__advice {
    margin: 0;
  }

.insight-digest__focus {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

.insight-digest__milestones {
    display: grid;
    gap: 0.35rem;
  }

.insight-digest__milestones ul {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.3rem;
  }

.insight-digest__tags {
    display: grid;
    gap: 0.45rem;
  }

.insight-digest__tags h4 {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(199, 255, 95, 0.76);
  }

.insight-digest__tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

.next-actions__lead {
    display: grid;
    gap: 0.4rem;
    border-radius: 14px;
    border: 1px solid rgba(199, 255, 95, 0.2);
    background: rgba(12, 20, 46, 0.85);
    padding: 0.9rem;
  }

.next-actions__lead h4 {
    margin: 0;
  }

.next-actions__history {
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 255, 0.18);
    background: rgba(8, 11, 30, 0.72);
    padding: 0.75rem 0.9rem;
  }

.next-actions__history summary {
    cursor: pointer;
    font-weight: 600;
    margin: 0;
  }

.next-actions__history ul {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.6rem;
  }

.next-actions__history li h5 {
    margin: 0;
    font-size: 1rem;
  }

.insight-history__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.9rem;
  }

.insight-history__item {
    display: grid;
    gap: 0.4rem;
  }

.insight-history__item header {
    display: grid;
    gap: 0.35rem;
  }

.insight-history__item h4 {
    margin: 0;
  }

.insight-history__focus {
    margin: 0;
    color: rgba(199, 255, 95, 0.78);
  }

.reflection-links .hub-card {
    border-radius: 14px;
  }

.tool-strip {
    margin-top: var(--space-lg);
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 255, 0.2);
    background: rgba(9, 12, 36, 0.82);
    padding: 1.25rem;
    box-shadow: 0 22px 44px -32px rgba(8, 5, 28, 0.78);
    display: grid;
    gap: var(--space-sm);
  }

.tool-strip header {
    display: grid;
    gap: 0.4rem;
  }

.tool-strip__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }

.tool-strip__list::-webkit-scrollbar {
    height: 4px;
  }

.tool-strip__list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 255, 0.3);
    border-radius: 999px;
  }

.tool-strip__item {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 255, 0.18);
    background: rgba(10, 14, 36, 0.78);
    padding: 1rem;
    display: grid;
    gap: 0.5rem;
    min-height: 100%;
  }

.tool-strip__item h3 {
    margin: 0;
  }

.tool-strip__benefit,
  .tool-strip__rationale,
  .tool-strip__notes {
    margin: 0;
  }

.quick-actions-bar {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 24px);
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 255, 0.28);
    background: rgba(9, 12, 36, 0.92);
    box-shadow: 0 18px 42px -26px rgba(8, 5, 28, 0.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 60;
  }

.quick-actions-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

.quick-actions-bar__link {
    border: 0;
    background: none;
    color: rgba(225, 226, 255, 0.9);
    font: inherit;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
  }

.quick-actions-bar__link:hover,
  .quick-actions-bar__link:focus {
    background: rgba(20, 24, 62, 0.85);
    text-decoration: none;
  }

@media (min-width: 64rem) {
    .quick-actions-bar {
      display: none;
    }
  }

@media (max-width: 52rem) {
    .today-card {
      padding: var(--space-sm);
      border-radius: 20px;
      box-shadow: 0 14px 32px -24px rgba(8, 5, 28, 0.7);
    }

    .today-card__body {
      gap: var(--space-sm);
    }

    .today-card__primary {
      grid-template-columns: minmax(0, 1fr);
    }

    .today-card__quick {
      grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-segment {
      padding: 1rem;
      border-radius: 18px;
      box-shadow: 0 18px 36px -32px rgba(8, 5, 28, 0.72);
    }

    .insight-digest,
    .next-actions,
    .insight-history,
    .reflection-links,
    .tool-strip {
      background: rgba(10, 13, 32, 0.86);
      border-color: rgba(148, 163, 255, 0.16);
      box-shadow: none;
    }

    .status-chip-row {
      padding-inline: 0;
    }
  }

/* ========================================================================
     Planning Hub - iPhone Optimizations
     ======================================================================== */

/* Mobile-first improvements for Planning Hub on iPhone */

@media (max-width: 48rem) {
    /* Larger touch targets for all interactive elements (iOS guideline: min 44x44px) */
    .planning-lane-nav__button {
      min-height: 48px;
      padding: 0.85rem 1.1rem;
      font-size: 0.95rem;
    }

    .planning-category-panel__header {
      flex-direction: column;
    }

    .planning-category-panel__actions {
      flex-direction: column;
      align-items: stretch;
    }

    .planning-category-panel__chip {
      width: 100%;
      justify-content: space-between;
    }

    .planning-search-panel__field,
    .planning-priority-card {
      flex-direction: column;
      align-items: stretch;
    }

    .planning-search-panel__field .button,
    .planning-priority-card .button {
      width: 100%;
      justify-content: center;
    }

    .planning-lane__header {
      flex-direction: column;
    }

    .planning-lane__stats {
      width: 100%;
      align-items: center;
      text-align: center;
      flex-direction: row;
      justify-content: center;
      gap: 0.5rem;
    }

    .planning-mobile-card__toggle {
      min-height: 56px;
      padding: 1.25rem 1.3rem;
    }

    .planning-mobile-card__title {
      font-size: 1.08rem;
      line-height: 1.4;
    }

    /* Improve button sizes in planning hub */
    .planning-today__actions .button,
    .planning-lane__add,
    .planning-mobile-card__detail {
      min-height: 48px;
      padding: 0.85rem 1.4rem;
      font-size: 1rem;
    }

    /* Better form inputs for mobile keyboards */
    .planning-focus-mobile__form input[type="number"],
    .planning-focus-mobile__form input[type="text"],
    .planning-focus-mobile__form select,
    .planning-focus-mobile__form textarea {
      min-height: 48px;
      font-size: 16px; /* Prevents zoom on iOS */
      padding: 0.75rem 1rem;
    }

    /* Preset buttons should be thumb-friendly */
    .planning-focus-mobile__presets button {
      min-height: 44px;
      padding: 0.75rem 1.2rem;
      font-size: 0.95rem;
      flex: 1 1 auto;
    }

    /* Better spacing for mobile scrolling */
    .planning-board-mobile,
    .planning-focus-mobile,
    .planning-insights {
      padding: 1.75rem 1.25rem;
      margin-top: 1.25rem;
    }

    /* Improve lane navigation on small screens */
    .planning-lane-nav {
      gap: 0.6rem;
      grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    }

    /* Make lane headers more compact on mobile */
    .planning-lane__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }

    /* Better card spacing for thumb scrolling */
    .planning-lane__list {
      gap: 0.85rem;
      margin-top: 0.75rem;
    }

    /* Improve readability of metrics */
    .planning-today__metric-value {
      font-size: 1.5rem;
    }

    .planning-today__metric-label {
      font-size: 0.88rem;
    }
  }

/* iPhone-specific safe area support */

@supports (padding: max(0px)) {
    .page-canvas--planning {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
      padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    .planning-today__actions,
    .planning-focus-mobile__actions {
      padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }
  }

/* Extra small screens (iPhone SE, iPhone 13 mini) */

@media (max-width: 380px) {
    .planning-lane-nav {
      grid-template-columns: 1fr 1fr;
    }

    .planning-lane-nav__button {
      font-size: 0.88rem;
      padding: 0.75rem 0.9rem;
    }

    .planning-focus-mobile__presets {
      flex-direction: column;
    }

    .planning-focus-mobile__presets button {
      width: 100%;
    }

    .planning-today__metrics {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }

    .planning-mobile-card__detail {
      width: 100%;
    }
  }

/* Larger phones (iPhone Pro Max) - optimize for one-handed use */

@media (min-width: 428px) and (max-width: 48rem) {
    .planning-lane-nav {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .planning-focus-mobile__field-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

/* Improve scrolling performance on mobile */

.planning-lanes {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

/* Better focus states for accessibility */

@media (max-width: 48rem) {
    .planning-lane-nav__button:focus-visible,
    .planning-mobile-card__toggle:focus-visible,
    .planning-today__actions .button:focus-visible {
      outline: 3px solid rgba(199, 255, 95, 0.8);
      outline-offset: 3px;
    }
  }

/* ========================================================================
     Creative Writing & Journaling Styles
     ======================================================================== */

.creative-header,
  .prompt-of-day,
  .creative-actions,
  .prompt-categories,
  .recent-writing,
  .writing-interface,
  .session-detail,
  .history-header,
  .session-grid,
  .empty-state,
  .generate-prompt {
    margin-top: 1.5rem;
    padding: 1.75rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(146, 114, 255, 0.26);
    background: linear-gradient(160deg, rgba(10, 12, 42, 0.86), rgba(18, 14, 54, 0.74));
  }

.creative-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

.creative-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

.creative-stat__value {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(199, 255, 95, 0.9);
  }

.creative-stat__label {
    font-size: 0.9rem;
    color: rgba(231, 234, 255, 0.7);
  }

.prompt-of-day__text {
    font-size: 1.25rem;
    line-height: 1.6;
    margin: 1.25rem 0;
    color: rgba(231, 234, 255, 0.95);
  }

.prompt-of-day__guidance {
    font-size: 0.95rem;
    font-style: italic;
    margin-bottom: 1.5rem;
  }

.prompt-of-day__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

.creative-actions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
  }

.creative-action-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(146, 114, 255, 0.3);
    background: rgba(14, 16, 48, 0.5);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
  }

.creative-action-card:hover,
  .creative-action-card:focus {
    background: rgba(20, 24, 62, 0.7);
    border-color: rgba(146, 114, 255, 0.5);
    transform: translateY(-2px);
  }

.creative-action-card__icon {
    font-size: 2rem;
    line-height: 1;
  }

.creative-action-card--notes {
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(6, 78, 59, 0.3);
  }

.creative-action-card--notes:hover,
  .creative-action-card--notes:focus {
    background: rgba(6, 95, 70, 0.5);
    border-color: rgba(52, 211, 153, 0.6);
  }

@media (min-width: 80rem) {
    .creative-actions__grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
  }

.category-card {
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(146, 114, 255, 0.25);
    background: rgba(14, 16, 48, 0.4);
    display: grid;
    gap: 0.75rem;
  }

.category-card__prompt {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0.5rem 0;
  }

.writing-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: rgba(231, 234, 255, 0.6);
  }

.writing-metadata {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

.form-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

.writing-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

.writing-prompt {
    padding: 1.5rem;
    border-radius: 0.875rem;
    background: rgba(146, 114, 255, 0.08);
    border: 1px solid rgba(146, 114, 255, 0.2);
    margin-bottom: 1.75rem;
  }

.writing-prompt__title {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
  }

.writing-prompt__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

.session-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: grid;
    gap: 0.75rem;
  }

.session-item {
    padding: 1rem;
    border-radius: 0.5rem;
    background: rgba(14, 16, 48, 0.4);
    border: 1px solid rgba(146, 114, 255, 0.15);
  }

.session-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }

.session-item__title {
    font-weight: 600;
    color: rgba(231, 234, 255, 0.95);
    text-decoration: none;
  }

.session-item__title:hover {
    color: rgba(199, 255, 95, 0.9);
  }

.session-item__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
  }

.session-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
  }

.session-card {
    padding: 1.25rem;
    border-radius: 0.875rem;
    background: rgba(14, 16, 48, 0.5);
    border: 1px solid rgba(146, 114, 255, 0.2);
    display: grid;
    gap: 1rem;
  }

.session-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
  }

.session-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(231, 234, 255, 0.95);
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
  }

.session-card__title:hover {
    color: rgba(199, 255, 95, 0.9);
  }

.session-card__preview {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(231, 234, 255, 0.75);
  }

.session-card__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

.session-detail__meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 0.5rem;
  }

.session-prompt {
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: rgba(146, 114, 255, 0.08);
    border: 1px solid rgba(146, 114, 255, 0.2);
    margin: 1.5rem 0;
  }

.session-prompt__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

.session-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1.5rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: rgba(14, 16, 48, 0.4);
    margin: 1.5rem 0;
  }

.session-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

.session-content {
    margin: 2rem 0;
  }

.session-content__body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(231, 234, 255, 0.92);
  }

.session-actions,
  .prompt-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
  }

.filter-group {
    margin-bottom: 1.25rem;
  }

.filter-label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
  }

.filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

.filter-buttons .button.active {
    background: rgba(146, 114, 255, 0.3);
    border-color: rgba(146, 114, 255, 0.6);
  }

.empty-state__content {
    text-align: center;
    padding: 3rem 1.5rem;
  }

.empty-state__icon {
    font-size: 4rem;
    margin-bottom: 1rem;
  }

.generate-examples {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

.example-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.5rem;
  }

.example-list li {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: rgba(14, 16, 48, 0.3);
    font-size: 0.95rem;
    color: rgba(231, 234, 255, 0.8);
  }

/* Mobile optimizations for creative writing */

@media (max-width: 48rem) {
    .writing-textarea {
      min-height: 20rem !important;
      font-size: 16px !important; /* Prevent iOS zoom */
    }

    .creative-actions__grid {
      grid-template-columns: 1fr;
    }

    .category-grid {
      grid-template-columns: 1fr;
    }

    .session-cards {
      grid-template-columns: 1fr;
    }

    .form-field-row {
      grid-template-columns: 1fr;
    }
  }

.page-canvas--scenes {
    --page-accent: rgba(246, 220, 255, 0.35);
    --page-glow: rgba(91, 246, 255, 0.12);
    --page-ribbon: rgba(118, 64, 217, 0.25);
    --page-backdrop-wave: rgba(10, 14, 44, 0.85);
    display: grid;
    gap: var(--space-md);
    padding-block: var(--space-md);
    background-color: #02030c;
    background-image:
      radial-gradient(circle at 18% 12%, rgba(199, 255, 95, 0.12), transparent 60%),
      radial-gradient(circle at 82% 0%, rgba(118, 64, 217, 0.24), transparent 58%),
      linear-gradient(140deg, rgba(2, 3, 12, 0.95), rgba(3, 7, 26, 0.85)),
      radial-gradient(circle at 50% 120%, rgba(122, 226, 255, 0.08), transparent 70%);
    border-radius: 26px;
    box-shadow: inset 0 0 60px rgba(91, 246, 255, 0.06);
  }

.scenes-feed-hero {
    display: grid;
    gap: var(--space-sm);
    align-items: start;
    background:
      linear-gradient(120deg, rgba(7, 8, 28, 0.9), rgba(27, 7, 48, 0.88)),
      radial-gradient(circle at 85% 8%, rgba(199, 255, 95, 0.18), transparent 70%),
      radial-gradient(circle at 12% 90%, rgba(91, 246, 255, 0.12), transparent 58%);
    border: 1px solid rgba(246, 220, 255, 0.25);
    box-shadow: 0 40px 65px -40px rgba(0, 0, 0, 0.85), inset 0 0 35px rgba(118, 64, 217, 0.16);
  }

.scenes-feed-hero__meta {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

.scenes-feed-hero__metric {
    padding: var(--space-sm);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 255, 0.24);
    background: radial-gradient(circle at 0% 0%, rgba(118, 64, 217, 0.22), transparent 70%);
    display: grid;
    gap: 0.35rem;
  }

.scenes-feed-hero__metric-value {
    font-size: var(--type-heading);
    font-weight: 600;
  }

.scenes-feed-hero__metric-label {
    font-size: 0.85rem;
    color: rgba(231, 234, 255, 0.72);
  }

.scenes-feed-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

.scenes-feedback-form textarea {
    width: 100%;
    background: rgba(8, 10, 36, 0.65);
    color: #f4f5ff;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 255, 0.24);
    padding: var(--space-sm);
    resize: vertical;
  }

.scene-feed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    position: relative;
    width: min(100%, 38rem);
    margin-inline: auto;
  }

.scene-feed__item {
    border-radius: 26px;
    overflow: hidden;
    background:
      linear-gradient(145deg, rgba(6, 8, 28, 0.95), rgba(12, 8, 36, 0.88)),
      radial-gradient(circle at 90% 8%, rgba(91, 246, 255, 0.1), transparent 65%);
    border: 1px solid rgba(246, 220, 255, 0.25);
    box-shadow: 0 30px 60px -40px rgba(2, 1, 16, 0.85), inset 0 0 25px rgba(246, 220, 255, 0.08);
    display: flex;
    flex-direction: column;
  }

.scene-feed__media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin: var(--space-sm) var(--space-sm) 0;
  }

.scene-feed__image-link img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 1 / 1;
  }

.scene-feed__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    flex-wrap: wrap;
    padding: var(--space-sm);
    padding-top: var(--space-xs);
  }

.scene-feed__caption-text {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(245, 246, 255, 0.95);
  }

.scene-feed__heart {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(246, 220, 255, 0.45);
    background: rgba(9, 12, 36, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.2s ease, border 0.2s ease, transform 0.2s ease;
  }

.scene-feed__heart::before {
    content: '❤';
    font-size: 1.1rem;
  }

.scene-feed__heart.is-active {
    background: rgba(255, 90, 141, 0.9);
    border-color: rgba(255, 90, 141, 0.95);
    color: white;
  }

.scene-feed__heart:focus-visible,
  .scene-feed__heart:hover {
    border-color: rgba(246, 220, 255, 0.9);
    transform: translateY(-1px);
  }

.scene-feed__sentinel {
    height: 1px;
  }

.scene-feed__heart--detail {
    top: 1rem;
    right: 1rem;
  }

.scene-card {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 255, 0.24);
    background:
      linear-gradient(135deg, rgba(15, 18, 48, 0.95), rgba(28, 18, 58, 0.82)),
      radial-gradient(circle at 80% 10%, rgba(199, 255, 95, 0.12), transparent 70%);
    box-shadow: 0 24px 36px -28px rgba(6, 5, 28, 0.85);
    display: grid;
    gap: 0;
  }

.scene-card__image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: rgba(13, 19, 56, 0.65);
    overflow: hidden;
  }

.scene-card--compact .scene-card__image {
    aspect-ratio: 4 / 3;
  }

.scene-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

.scene-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.25s ease;
    transform: translateY(8px);
    text-align: center;
    padding: 0.75rem;
  }

.scene-card__image:hover .scene-card__overlay,
  .scene-card__image:focus-within .scene-card__overlay {
    opacity: 1;
    transform: translateY(0);
  }

.scene-card--feed .scene-card__image {
    aspect-ratio: 1 / 1;
  }

.scene-card--feed .scene-card__details {
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

.scene-card__meta {
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

.scene-card__details {
    display: grid;
    gap: 0.3rem;
    padding: 0.85rem 1rem 1.15rem;
  }

.scene-highlights__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }

.scene-highlights__header p {
    margin: 0;
  }

.scene-highlights__grid {
    margin-top: 0.75rem;
  }

.scene-highlights__actions {
    margin-top: 1rem;
    text-align: right;
  }

.scene-card__details strong {
    font-size: 1.05rem;
  }

@media (max-width: 40rem) {
    .scenes-hero__actions {
      align-items: stretch;
      flex-direction: column;
      gap: var(--space-xs);
    }

    .scenes-hero__form {
      width: 100%;
    }

    .scenes-hero__form .button {
      width: 100%;
      justify-content: center;
    }
  }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.relative {
  position: relative;
}

.start-1 {
  inset-inline-start: 0.25rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-4 {
  height: 1rem;
}

.w-full {
  width: 100%;
}

.resize {
  resize: both;
}

.list-disc {
  list-style-type: disc;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-\[rgba\(155\2c 118\2c 255\2c 0\.22\)\] {
  border-color: rgba(155,118,255,0.22);
}

.border-amber-600 {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
}

.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity));
}

.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.bg-\[rgba\(12\2c 16\2c 48\2c 0\.55\)\] {
  background-color: rgba(12,16,48,0.55);
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}

.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity));
}

.bg-amber-900\/20 {
  background-color: rgb(120 53 15 / 0.2);
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.bg-blue-900\/20 {
  background-color: rgb(30 58 138 / 0.2);
}

.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.bg-red-900\/20 {
  background-color: rgb(127 29 29 / 0.2);
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.\[content_start\:content_end\] {
  content_start: content end;
}

.panel--intelligence {
  display: block;
}

.intelligence-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 980px) {
  .intelligence-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.intelligence-card {
  background: rgba(14, 16, 22, 0.78);
  border: 1px solid rgba(122, 99, 204, 0.22);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 24px 50px rgba(18, 10, 38, 0.35);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intelligence-card__header h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

.intelligence-header__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.priority-list,
.health-list,
.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.priority-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: flex-start;
}

.priority-score {
  background: linear-gradient(135deg, #9f6bff, #5ad0ff);
  border-radius: 999px;
  color: #0a0c13;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.35rem 0.8rem;
  min-width: 3.2rem;
  text-align: center;
  box-shadow: 0 8px 18px rgba(95, 180, 255, 0.35);
}

.priority-detail h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.priority-detail p {
  margin: 0.2rem 0 0;
}

.health-alert {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgba(21, 24, 33, 0.72);
  border: 1px solid rgba(143, 115, 221, 0.18);
}

.health-alert--warning {
  border-color: rgba(255, 159, 67, 0.4);
  background: rgba(40, 18, 9, 0.72);
}

.health-meta {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px dashed rgba(143, 115, 221, 0.4);
  background: rgba(15, 18, 28, 0.6);
}

.health-meta p {
  margin: 0;
  line-height: 1.5;
}

.health-alert--info {
  border-color: rgba(122, 204, 255, 0.32);
  background: rgba(9, 26, 36, 0.72);
}

.health-alert--ok {
  border-color: rgba(119, 224, 164, 0.32);
  background: rgba(10, 30, 23, 0.72);
}

.health-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a382ff, #56f8d6);
  margin-top: 0.35rem;
}

.health-alert--warning .health-indicator {
  background: linear-gradient(135deg, #ff9966, #ffd56f);
}

.health-alert--info .health-indicator {
  background: linear-gradient(135deg, #6aa6ff, #7ff4ff);
}

.health-alert--ok .health-indicator {
  background: linear-gradient(135deg, #6ffeaa, #3fd6a3);
}

.health-alert p {
  margin: 0;
}

.schedule-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: flex-start;
}

.schedule-time {
  font-weight: 600;
  font-size: 0.95rem;
  color: #9fdcff;
  background: rgba(61, 106, 255, 0.18);
  border-radius: 12px;
  padding: 0.35rem 0.65rem;
}

.schedule-detail h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.schedule-detail p {
  margin: 0.25rem 0 0;
}

.schedule-channels {
  margin-top: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: rgba(198, 224, 255, 0.8);
}

.priority-empty,
.schedule-empty {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(17, 22, 33, 0.68);
  border: 1px dashed rgba(107, 138, 255, 0.28);
}

@keyframes ribbonDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(4vmin, -2vmin, 0) rotate(6deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes scanlineShift {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-24px);
  }
}

@keyframes starfieldTwinkle {
  0%,
  100% {
    opacity: 0.25;
    filter: saturate(120%);
  }
  40% {
    opacity: 0.45;
  }
  70% {
    opacity: 0.35;
  }
}

@keyframes haloPulse {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.38;
  }
}

@keyframes heroOrbitSpin {
  0% {
    transform: rotate(calc(var(--hero-orbit-tilt, 0deg))) scale(var(--hero-orbit-scale, 1));
  }
  100% {
    transform: rotate(calc(var(--hero-orbit-tilt, 0deg) + 360deg)) scale(var(--hero-orbit-scale, 1));
  }
}

@keyframes celebrationHalo {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.75;
  }
}

@keyframes celebrationSweep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes creativeCelebrate {
  0% {
    opacity: 0.6;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes opArtPulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes tunnelBeamPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.6;
  }
}

@keyframes tunnelRingPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.22;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.35;
  }
}

@keyframes tunnelEntryGlide {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tunnelEntryZoom {
  0% {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes tunnelEntryFlare {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(1.08);
    box-shadow: 0 0 0 rgba(199, 255, 95, 0);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 24px 80px rgba(199, 255, 95, 0.45);
  }
  100% {
    box-shadow: 0 18px 56px rgba(118, 64, 217, 0.32);
  }
}

.page-canvas--orchestrator .orchestrator-hero {
  background: linear-gradient(135deg, rgba(104, 120, 255, 0.16), rgba(180, 95, 255, 0.1));
  border-radius: 24px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.page-canvas--orchestrator .orchestrator-hero__narrative {
  font-size: 1rem;
  line-height: 1.6;
}

.page-canvas--orchestrator .orchestrator-hero__highlights {
  list-style: disc;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.page-canvas--orchestrator .orchestrator-pinned {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.page-canvas--orchestrator .orchestrator-pinned__item {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 18px;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.page-canvas--orchestrator .orchestrator-pinned__heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.page-canvas--orchestrator .orchestrator-pinned__note {
  font-size: 0.875rem;
}

.page-canvas--orchestrator .orchestrator-pinned__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.page-canvas--orchestrator .orchestrator-pinned__actions form {
  display: inline;
}

.page-canvas--orchestrator .orchestrator-pinned__edit {
  margin-top: 0.75rem;
}

.page-canvas--orchestrator .orchestrator-pinned__edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.page-canvas--orchestrator .orchestrator-pinned--candidates .orchestrator-pinned__item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

.page-canvas--orchestrator .orchestrator-candidate-hints {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 14px;
  background: rgba(80, 110, 255, 0.08);
}

.page-canvas--orchestrator .orchestrator-candidate-list {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.page-canvas--orchestrator .orchestrator-interventions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.page-canvas--orchestrator .orchestrator-interventions li {
  padding: 0.75rem 1rem;
  border-radius: 16px;
  background: rgba(20, 24, 40, 0.6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.page-canvas--orchestrator .orchestrator-pinned__tags {
  font-size: 0.875rem;
}

.page-canvas--orchestrator .orchestrator-snapshots {
  display: grid;
  gap: 1.5rem;
}

.page-canvas--orchestrator .orchestrator-snapshot {
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  background: rgba(20, 24, 35, 0.65);
  box-shadow: 0 8px 28px rgba(15, 18, 35, 0.18);
}

.page-canvas--orchestrator .orchestrator-snapshot__highlights {
  margin-top: 0.5rem;
  list-style: disc;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.page-canvas--orchestrator .orchestrator-snapshot__timeline {
  margin-top: 0.75rem;
}

.page-canvas--orchestrator .orchestrator-snapshot__timeline summary {
  cursor: pointer;
  font-weight: 600;
}

.page-canvas--orchestrator .orchestrator-snapshot__timeline ul {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  list-style: none;
  padding-left: 0;
}

/* Orchestrator sortable tables (event stream, snapshots, interventions) */

.orchestrator-table-wrapper {
  margin: 1.5rem 0;
  overflow-x: auto;
  border-radius: 12px;
  background: rgba(27, 22, 45, 0.6);
  border: 1px solid rgba(118, 64, 217, 0.25);
}

.orchestrator-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.orchestrator-table thead {
  background: rgba(118, 64, 217, 0.15);
  border-bottom: 2px solid rgba(118, 64, 217, 0.35);
}

.orchestrator-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(199, 255, 95, 0.9);
}

.orchestrator-table tbody tr {
  border-bottom: 1px solid rgba(118, 64, 217, 0.15);
  transition: background-color 0.2s ease;
}

.orchestrator-table tbody tr:hover {
  background: rgba(118, 64, 217, 0.08);
}

.orchestrator-table tbody tr:last-child {
  border-bottom: none;
}

.orchestrator-table td {
  padding: 1rem 1.25rem;
  color: rgba(228, 235, 255, 0.85);
  vertical-align: top;
}

.orchestrator-table__link {
  color: rgba(199, 255, 95, 0.95);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.orchestrator-table__link:hover {
  color: rgba(199, 255, 95, 1);
  text-decoration: underline;
}

.orchestrator-table__badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(118, 64, 217, 0.2);
  font-weight: 600;
  font-size: 0.8125rem;
  color: rgba(228, 235, 255, 0.9);
}

.orchestrator-table__expandable {
  margin-top: 0.5rem;
}

.orchestrator-table__expandable summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: rgba(199, 255, 95, 0.7);
  transition: color 0.2s ease;
}

.orchestrator-table__expandable summary:hover {
  color: rgba(199, 255, 95, 1);
}

.orchestrator-table__expandable pre {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: rgba(6, 5, 28, 0.8);
  border-radius: 8px;
  font-size: 0.8125rem;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

.orchestrator-table__actions {
  white-space: nowrap;
}

.orchestrator-table__actions .btn {
  margin-right: 0.5rem;
}

.orchestrator-table__actions .btn:last-child {
  margin-right: 0;
}

.orchestrator-table__truncated {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orchestrator-action__summary {
  display: block;
  font-weight: 600;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: initial;
}

.orchestrator-action__detail {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: initial;
}

/* Event type badges with semantic colors */

.badge-event-focus_session {
  background: rgba(104, 120, 255, 0.2);
  color: rgba(104, 120, 255, 1);
}

.badge-event-planning_task {
  background: rgba(199, 255, 95, 0.2);
  color: rgba(199, 255, 95, 1);
}

.badge-event-suggestion {
  background: rgba(246, 220, 255, 0.2);
  color: rgba(246, 220, 255, 1);
}

.badge-event-agent_run {
  background: rgba(118, 64, 217, 0.2);
  color: rgba(199, 160, 255, 1);
}

.badge-event-evening_reflection,
.badge-event-morning_journal,
.badge-event-sleep_log {
  background: rgba(104, 200, 255, 0.2);
  color: rgba(104, 200, 255, 1);
}

.badge-event-relaxation,
.badge-event-cooldown,
.badge-event-wind_down {
  background: rgba(255, 180, 120, 0.2);
  color: rgba(255, 180, 120, 1);
}

.badge-event-writing_session,
.badge-event-note {
  background: rgba(255, 220, 120, 0.2);
  color: rgba(255, 220, 120, 1);
}

/* Responsive mobile view: stack table as cards */

@media (max-width: 768px) {
  .orchestrator-table thead {
    display: none;
  }

  .orchestrator-table,
  .orchestrator-table tbody,
  .orchestrator-table tr,
  .orchestrator-table td {
    display: block;
    width: 100%;
  }

  .orchestrator-table tr {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(27, 22, 45, 0.6);
    border: 1px solid rgba(118, 64, 217, 0.25);
    border-radius: 8px;
  }

  .orchestrator-table td {
    padding: 0.75rem 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
  }

  .orchestrator-table td::before {
    content: attr(data-column-label);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(199, 255, 95, 0.8);
    flex-shrink: 0;
    min-width: 90px;
  }

  .orchestrator-table td:first-child {
    padding-top: 0;
  }

  .orchestrator-table td:last-child {
    padding-bottom: 0;
  }

  .orchestrator-table__truncated {
    max-width: none;
    white-space: normal;
  }

  .orchestrator-table__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }

  .orchestrator-table__actions .btn {
    margin: 0;
    width: 100%;
    text-align: center;
  }
}

/* =============================================================================
   Orchestrator Mind Premium Styling — Week 4 Premium UI Upgrade
   Progress bars, context sections, insights with gold accents
   ============================================================================= */

/* Progress Section Panels */

.page-canvas--orchestrator .panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.12),
    inset 0 0 20px rgba(251, 191, 36, 0.03);
}

/* Progress Bar */

.orchestrator-progress {
  margin: 1.5rem 0;
}

.orchestrator-progress__bar {
  position: relative;
  width: 100%;
  height: 12px;
  background: linear-gradient(90deg, rgba(10, 12, 32, 0.95), rgba(12, 14, 36, 1));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(251, 191, 36, 0.08);
}

.orchestrator-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.5), rgba(251, 191, 36, 0.75));
  border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 16px rgba(251, 191, 36, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
  0%, 100% {
    box-shadow:
      0 0 16px rgba(251, 191, 36, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow:
      0 0 24px rgba(251, 191, 36, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}

/* Progress Stats Grid */

.orchestrator-progress__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.orchestrator-progress__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.03));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 0.75rem;
  box-shadow:
    0 4px 12px rgba(251, 191, 36, 0.08),
    inset 0 1px 0 rgba(251, 191, 36, 0.1);
}

.orchestrator-progress__stat .badge {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fbbf24;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Context Summary "What I'm Seeing" */

.orchestrator-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.orchestrator-context__section {
  padding: 1.25rem;
  background: linear-gradient(140deg, rgba(10, 12, 32, 0.95), rgba(12, 14, 36, 1));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 0.875rem;
  box-shadow:
    0 8px 20px -10px rgba(15, 28, 92, 0.7),
    inset 0 1px 0 rgba(251, 191, 36, 0.08);
}

.orchestrator-context__section h4 {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

.orchestrator-context__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.orchestrator-context__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(251, 191, 36, 0.1);
}

.orchestrator-context__item:last-child {
  border-bottom: none;
}

.orchestrator-context__item dt {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.7);
}

.orchestrator-context__item dd {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(228, 235, 255, 0.95);
  text-align: right;
}

/* Streak Badges with Gold Glow */

.badge-streak {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 1rem;
  font-weight: 600;
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.2);
}

/* Priorities List */

.orchestrator-context__priorities {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: priority-counter;
}

.orchestrator-context__priorities li {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-left: 2px solid rgba(251, 191, 36, 0.25);
  counter-increment: priority-counter;
}

.orchestrator-context__priorities li::before {
  content: counter(priority-counter);
  position: absolute;
  left: -0.75rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fbbf24;
}

/* Insights Section "What I'm Thinking" */

.orchestrator-insights {
  margin: 1.5rem 0;
}

.orchestrator-insights h4 {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

.orchestrator-insights__narrative {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(228, 235, 255, 0.92);
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.08);
}

.orchestrator-insights__highlights {
  margin: 0;
  padding-left: 1.5rem;
  list-style: none;
}

.orchestrator-insights__highlights li {
  position: relative;
  padding-left: 0.75rem;
  margin-bottom: 0.75rem;
  border-left: 3px solid rgba(251, 191, 36, 0.35);
}

.orchestrator-insights__highlights li::before {
  content: '';
  position: absolute;
  left: -0.4rem;
  top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

/* Key Facts List */

.orchestrator-insights__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.orchestrator-insights__fact {
  padding: 1.25rem;
  background: linear-gradient(140deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.04));
  border-top: 3px solid rgba(251, 191, 36, 0.5);
  border-radius: 0.75rem;
  box-shadow:
    0 4px 12px rgba(251, 191, 36, 0.1),
    inset 0 1px 0 rgba(251, 191, 36, 0.1);
}

.orchestrator-insights__fact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.orchestrator-insights__fact-header strong {
  font-size: 1.05rem;
  color: #fbbf24;
  font-weight: 600;
}

.orchestrator-insights__fact-header .badge-primary {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(251, 191, 36, 0.15));
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.2);
}

.orchestrator-insights__fact p {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(228, 235, 255, 0.88);
}

/* Responsive Adjustments */

@media (max-width: 768px) {
  .orchestrator-progress__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .orchestrator-context {
    grid-template-columns: 1fr;
  }

  .orchestrator-context__item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .orchestrator-context__item dd {
    text-align: left;
  }
}

/* ============================================================
   Evening Reflections Premium Styling — Week 4 Premium UI Upgrade
   ============================================================ */

/* History Card Premium Enhancement */

.page-canvas--evening .history-card.panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.45);
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.12),
    inset 0 0 20px rgba(251, 191, 36, 0.03);
  background:
    linear-gradient(140deg, rgba(6, 8, 24, 0.99), rgba(8, 10, 28, 1)),
    radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.06), transparent 70%);
  padding: 2.5rem 3rem;
}

.page-canvas--evening .history-card h4 {
  color: rgba(251, 191, 36, 0.95);
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.18);
  margin-bottom: 1.5rem;
}

/* History List Styling */

.page-canvas--evening .history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.page-canvas--evening .history-list > li {
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(246, 220, 255, 0.1);
}

.page-canvas--evening .history-list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-canvas--evening .history-list strong {
  color: rgba(246, 220, 255, 0.9);
}

.page-canvas--evening .history-list .muted {
  color: rgba(199, 118, 255, 0.6);
  font-size: 0.875rem;
  margin-left: 0.75rem;
}

/* Energy Badge Styling */

.page-canvas--evening .history-list .muted {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 1rem;
}

/* Form Card Enhancement */

.page-canvas--evening .form-card {
  border: 1px solid rgba(246, 220, 255, 0.25);
  box-shadow:
    0 24px 48px -30px rgba(15, 28, 92, 0.85),
    inset 0 1px 0 rgba(246, 220, 255, 0.08);
}

.page-canvas--evening .form-card label {
  color: rgba(246, 220, 255, 0.85);
  font-weight: 500;
}

.page-canvas--evening .form-card textarea,
.page-canvas--evening .form-card select,
.page-canvas--evening .form-card input {
  background: rgba(6, 8, 24, 0.6);
  border: 1px solid rgba(246, 220, 255, 0.18);
  color: rgba(246, 220, 255, 0.95);
  transition: all 0.2s ease;
}

.page-canvas--evening .form-card textarea:focus,
.page-canvas--evening .form-card select:focus,
.page-canvas--evening .form-card input:focus {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, 0.12),
    inset 0 0 12px rgba(251, 191, 36, 0.06);
  outline: none;
}

/* Submit Button Gold Enhancement */

.page-canvas--evening .form-actions button.primary {
  position: relative;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: rgba(251, 191, 36, 0.95);
  box-shadow:
    0 4px 12px rgba(251, 191, 36, 0.15),
    inset 0 1px 0 rgba(251, 191, 36, 0.2);
  transition: all 0.25s ease;
}

.page-canvas--evening .form-actions button.primary:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.12));
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow:
    0 6px 20px rgba(251, 191, 36, 0.25),
    inset 0 1px 0 rgba(251, 191, 36, 0.3);
  transform: translateY(-1px);
}

.page-canvas--evening .form-actions button.primary:active {
  transform: translateY(0);
  box-shadow:
    0 2px 8px rgba(251, 191, 36, 0.2),
    inset 0 1px 0 rgba(251, 191, 36, 0.25);
}

/* Page Hero Metric Gold Accents */

.page-canvas--evening .page-hero__metric:last-child .page-hero__metric-value {
  color: rgba(251, 191, 36, 0.9);
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.25);
}

/* Responsive Mobile Adjustments */

@media (max-width: 768px) {
  .page-canvas--evening .history-card.panel--solid {
    padding: 1.5rem 2rem;
  }

  .page-canvas--evening .history-list {
    gap: 1.5rem;
  }
}

/* ========================================
   Creative Hub Premium Styling — Week 4 Premium UI Upgrade
   ======================================== */

/* Base Premium Panel Styling */

.page-canvas--creative .panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.12),
    inset 0 0 20px rgba(251, 191, 36, 0.03);
  background:
    linear-gradient(140deg, rgba(6, 8, 24, 0.99), rgba(8, 10, 28, 1)),
    radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.06), transparent 70%);
  backdrop-filter: blur(24px);
}

/* Creative Header Premium Enhancement */

.page-canvas--creative .creative-header.panel--solid {
  padding: 2.5rem 3rem;
}

.page-canvas--creative .creative-header h2 {
  color: rgba(251, 191, 36, 0.95);
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.18);
  margin-bottom: 0.5rem;
}

.page-canvas--creative .creative-header .eyebrow {
  color: rgba(251, 191, 36, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Creative Stats Gold Styling */

.creative-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.creative-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.creative-stat__value {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(251, 191, 36, 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}

.creative-stat__label {
  color: rgba(251, 191, 36, 0.6);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Creative Actions Premium Enhancement */

.page-canvas--creative .creative-actions.panel--solid {
  padding: 2.5rem 3rem;
}

.page-canvas--creative .creative-actions h3 {
  color: rgba(251, 191, 36, 0.9);
  margin-bottom: 2rem;
}

.creative-actions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.creative-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02));
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.creative-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.creative-action-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow:
    0 8px 24px rgba(251, 191, 36, 0.15),
    inset 0 1px 0 rgba(251, 191, 36, 0.2);
}

.creative-action-card:hover::before {
  opacity: 1;
}

.creative-action-card__icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.3));
}

.creative-action-card strong {
  color: rgba(251, 191, 36, 0.95);
  font-size: 1rem;
  font-weight: 600;
  z-index: 1;
}

.creative-action-card .muted {
  color: rgba(251, 191, 36, 0.5);
  font-size: 0.875rem;
  text-align: center;
  z-index: 1;
}

/* Prompt of Day Premium Styling */

.page-canvas--creative .prompt-of-day.panel--solid {
  padding: 2.5rem 3rem;
  border: 2px solid rgba(251, 191, 36, 0.4);
  position: relative;
}

.page-canvas--creative .prompt-of-day.panel--solid::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), transparent 50%);
  border-radius: inherit;
  z-index: -1;
  animation: promptGlow 4s ease-in-out infinite;
}

@keyframes promptGlow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.page-canvas--creative .prompt-of-day h3 {
  color: rgba(251, 191, 36, 0.95);
  margin-bottom: 1.5rem;
}

.prompt-of-day__text {
  font-size: 1.25rem;
  line-height: 1.8;
  color: rgba(251, 191, 36, 0.85);
  font-weight: 500;
  margin-bottom: 1rem;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.1);
}

.prompt-of-day__guidance {
  color: rgba(251, 191, 36, 0.6);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.prompt-of-day__actions .button.primary {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: rgba(251, 191, 36, 0.95);
  padding: 0.75rem 2rem;
  box-shadow:
    0 4px 12px rgba(251, 191, 36, 0.15),
    inset 0 1px 0 rgba(251, 191, 36, 0.2);
  transition: all 0.25s ease;
}

.prompt-of-day__actions .button.primary:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(251, 191, 36, 0.15));
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow:
    0 6px 20px rgba(251, 191, 36, 0.25),
    inset 0 1px 0 rgba(251, 191, 36, 0.3);
  transform: translateY(-2px);
}

/* Category Cards Premium Styling */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.category-card {
  padding: 2rem;
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.04), rgba(251, 191, 36, 0.01));
  transition: all 0.3s ease;
}

.category-card:hover {
  border-color: rgba(251, 191, 36, 0.35);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.03));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.12);
}

.category-card h4 {
  color: rgba(251, 191, 36, 0.9);
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.category-card__prompt {
  color: rgba(251, 191, 36, 0.65);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Recent Writing Premium Styling */

.page-canvas--creative .recent-writing.panel--solid {
  padding: 2.5rem 3rem;
}

.page-canvas--creative .recent-writing h3 {
  color: rgba(251, 191, 36, 0.9);
  margin-bottom: 2rem;
}

.session-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.session-item {
  padding: 1.5rem;
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.03), rgba(251, 191, 36, 0.01));
  transition: all 0.25s ease;
}

.session-item:hover {
  border-color: rgba(251, 191, 36, 0.3);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02));
  transform: translateX(4px);
}

.session-item__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.session-item__title {
  color: rgba(251, 191, 36, 0.9);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.session-item__title:hover {
  color: rgba(251, 191, 36, 1);
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.2);
}

.session-item__favorite {
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
}

.session-item__meta {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
}

.session-item__meta .muted {
  color: rgba(251, 191, 36, 0.5);
  display: inline-flex;
  align-items: center;
}

/* Responsive Adjustments */

@media (max-width: 768px) {
  .creative-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .creative-stat__value {
    font-size: 2rem;
  }

  .creative-actions__grid {
    grid-template-columns: 1fr;
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .page-canvas--creative .creative-header.panel--solid,
  .page-canvas--creative .creative-actions.panel--solid,
  .page-canvas--creative .prompt-of-day.panel--solid,
  .page-canvas--creative .recent-writing.panel--solid {
    padding: 2rem;
  }
}

/* ========================================
   Creative Write Premium Styling — Week 4 Premium UI Upgrade
   ======================================== */

/* Writing Interface Base Premium Panel */

.page-canvas--writing .writing-interface.panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.12),
    inset 0 0 20px rgba(251, 191, 36, 0.03);
  background:
    linear-gradient(140deg, rgba(6, 8, 24, 0.99), rgba(8, 10, 28, 1)),
    radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.06), transparent 70%);
  backdrop-filter: blur(24px);
  padding: 3rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Writing Prompt Premium Styling */

.writing-prompt {
  margin-bottom: 2.5rem;
  padding: 2rem;
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02));
  position: relative;
}

.writing-prompt::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), transparent 60%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.5;
}

.writing-prompt__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.writing-prompt__title {
  color: rgba(251, 191, 36, 0.95);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.writing-prompt__text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(251, 191, 36, 0.85);
  margin: 0;
  font-weight: 500;
}

.writing-prompt__guidance {
  margin-top: 0.75rem;
  color: rgba(251, 191, 36, 0.6);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Writing Form Premium Styling */

.writing-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Title Input */

.page-canvas--writing .cosmic-form-field input[type="text"] {
  background: rgba(6, 8, 24, 0.6);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.95);
  padding: 0.875rem 1.25rem;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.25s ease;
}

.page-canvas--writing .cosmic-form-field input[type="text"]:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, 0.12),
    inset 0 0 12px rgba(251, 191, 36, 0.06);
  background: rgba(6, 8, 24, 0.8);
}

/* Writing Field (Textarea) */

.writing-field {
  position: relative;
}

.page-canvas--writing .cosmic-form-field textarea {
  min-height: 400px;
  background: rgba(6, 8, 24, 0.6);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: rgba(251, 191, 36, 0.95);
  padding: 1.5rem;
  border-radius: 12px;
  font-size: 1.0625rem;
  line-height: 1.8;
  font-family: 'Georgia', 'Times New Roman', serif;
  resize: vertical;
  transition: all 0.25s ease;
}

.page-canvas--writing .cosmic-form-field textarea:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, 0.12),
    inset 0 0 16px rgba(251, 191, 36, 0.08);
  background: rgba(6, 8, 24, 0.8);
}

/* Writing Stats Premium Styling */

.writing-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
}

.writing-stats__count,
.writing-stats__timer {
  color: rgba(251, 191, 36, 0.9);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.writing-stats__timer {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(251, 191, 36, 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.voice-capture {
  border: 1px dashed rgba(251, 191, 36, 0.3);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(120deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
  box-shadow: inset 0 0 20px rgba(251, 191, 36, 0.04);
}

.voice-capture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.voice-capture__status {
  margin: 0;
  color: rgba(251, 191, 36, 0.85);
  font-size: 0.95rem;
  line-height: 1.5;
}

.voice-capture__status--error {
  color: rgba(255, 99, 71, 0.9);
}

.voice-capture__meter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
  color: rgba(251, 191, 36, 0.85);
}

.voice-capture__timer {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.95rem;
}

.voice-capture__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.9);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.9);
  animation: voice-pulse 1.4s ease-in-out infinite;
}

@keyframes voice-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

/* Writing Metadata Premium Styling */

.writing-metadata {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.04), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 8px;
}

.form-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Mood Select */

.page-canvas--writing .cosmic-form-field select {
  background: rgba(6, 8, 24, 0.6);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.95);
  padding: 0.875rem 1.25rem;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.25s ease;
}

.page-canvas--writing .cosmic-form-field select:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, 0.12),
    inset 0 0 12px rgba(251, 191, 36, 0.06);
}

/* Checkbox Label */

.page-canvas--writing .cosmic-checkbox {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(251, 191, 36, 0.85);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.page-canvas--writing .cosmic-checkbox:hover {
  background: rgba(251, 191, 36, 0.06);
}

.page-canvas--writing .cosmic-checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  accent-color: rgba(251, 191, 36, 0.8);
}

/* Form Labels */

.page-canvas--writing .cosmic-form-field > label {
  color: rgba(251, 191, 36, 0.75);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: block;
}

/* Writing Actions Premium Styling */

.writing-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.page-canvas--writing .button.primary {
  flex: 1;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: rgba(251, 191, 36, 0.95);
  padding: 1rem 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  border-radius: 8px;
  box-shadow:
    0 4px 12px rgba(251, 191, 36, 0.15),
    inset 0 1px 0 rgba(251, 191, 36, 0.2);
  transition: all 0.25s ease;
  cursor: pointer;
}

.page-canvas--writing .button.primary:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(251, 191, 36, 0.15));
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow:
    0 6px 20px rgba(251, 191, 36, 0.25),
    inset 0 1px 0 rgba(251, 191, 36, 0.3);
  transform: translateY(-2px);
}

.page-canvas--writing .button-secondary {
  background: rgba(251, 191, 36, 0.04);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.8);
  padding: 1rem 2rem;
  font-size: 1.0625rem;
  border-radius: 8px;
  transition: all 0.25s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-canvas--writing .button-secondary:hover {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.35);
  color: rgba(251, 191, 36, 0.95);
}

/* Responsive Adjustments */

@media (max-width: 768px) {
  .page-canvas--writing .writing-interface.panel--solid {
    padding: 2rem 1.5rem;
  }

  .writing-prompt {
    padding: 1.5rem;
  }

  .page-canvas--writing .cosmic-form-field textarea {
    min-height: 300px;
    font-size: 1rem;
  }

  .writing-actions {
    flex-direction: column;
  }

  .writing-stats {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
}

/* ========================================
   Weekly Hub Premium Styling — Week 4 Premium UI Upgrade
   ======================================== */

/* Base Premium Panel Styling */

.page-canvas--weekly .panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.12),
    inset 0 0 20px rgba(251, 191, 36, 0.03);
  background:
    linear-gradient(140deg, rgba(6, 8, 24, 0.99), rgba(8, 10, 28, 1)),
    radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.06), transparent 70%);
  backdrop-filter: blur(24px);
}

/* Hero Panel (Week Navigation & Stats) */

.page-canvas--weekly .panel--hero.panel--solid {
  padding: 2.5rem 3rem;
}

.page-canvas--weekly .panel--hero h2 {
  color: rgba(251, 191, 36, 0.95);
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.18);
}

/* Weekly Stats Gold Styling */

.weekly-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.weekly-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.weekly-stat:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.04));
  border-color: rgba(251, 191, 36, 0.4);
  transform: translateY(-2px);
}

.weekly-stat__value {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(251, 191, 36, 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}

.weekly-stat__label {
  color: rgba(251, 191, 36, 0.6);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Calendar Panel (7-Day Grid) */

.page-canvas--weekly .panel--calendar.panel--solid {
  padding: 2.5rem 3rem;
}

.weekly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.weekly-focus {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.weekly-focus__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.weekly-focus__meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.weekly-focus__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.weekly-focus__progress {
  margin: 0;
  color: rgba(15, 23, 42, 0.7);
}

@media (min-width: 1600px) {
  .weekly-grid {
    grid-template-columns: repeat(4, minmax(260px, 1fr));
  }
}

/* Weekly Day Column */

.weekly-day {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.04), rgba(251, 191, 36, 0.01));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 12px;
  min-height: 400px;
  transition: all 0.3s ease;
}

.weekly-day:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.03));
  border-color: rgba(251, 191, 36, 0.35);
}

.weekly-day--today {
  border: 2px solid rgba(251, 191, 36, 0.5);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.04));
  box-shadow:
    0 0 20px rgba(251, 191, 36, 0.15),
    inset 0 1px 0 rgba(251, 191, 36, 0.2);
}

.weekly-day__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(251, 191, 36, 0.15);
}

.weekly-day__collapse-toggle {
  margin-left: auto;
  border: none;
  background: transparent;
  color: rgba(251, 191, 36, 0.6);
  font-size: 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.weekly-day__collapse-toggle span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.2s ease;
}

.weekly-day__collapse-toggle:hover,
.weekly-day__collapse-toggle:focus-visible {
  background: rgba(251, 191, 36, 0.15);
  color: rgba(251, 191, 36, 0.9);
}

.weekly-day__title {
  color: rgba(251, 191, 36, 0.95);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.weekly-day__date {
  color: rgba(251, 191, 36, 0.6);
  font-size: 0.875rem;
}

/* Activity Cards (Draggable) */

.weekly-day__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
}

.weekly-day__activities {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 200px;
  padding: 0.75rem;
  padding-bottom: 2.5rem;
  background: rgba(6, 8, 24, 0.4);
  border: 1px dashed rgba(251, 191, 36, 0.15);
  border-radius: 8px;
  transition: all 0.25s ease;
  position: relative;
  z-index: 1;
}

.weekly-day__activities.drop-zone.drag-over {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: inset 0 0 16px rgba(251, 191, 36, 0.1);
}

.weekly-day__empty {
  color: rgba(251, 191, 36, 0.4);
  font-size: 0.875rem;
  text-align: center;
  margin: auto 0;
}

.activity-card {
  padding: 1rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  cursor: grab;
  transition: all 0.25s ease;
  position: relative;
}

.activity-card:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06));
  border-color: rgba(251, 191, 36, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
}

.activity-card:active {
  cursor: grabbing;
}

.activity-card--completed {
  opacity: 0.6;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.04), rgba(251, 191, 36, 0.02));
}

.activity-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.activity-card__drag-handle {
  color: rgba(251, 191, 36, 0.5);
  font-size: 1rem;
  cursor: grab;
}

.activity-card__title {
  flex: 1;
  color: rgba(251, 191, 36, 0.95);
  font-weight: 600;
  font-size: 0.9375rem;
}

.activity-card__time-btn {
  border-radius: 999px;
  border: 1px dashed rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.08);
  color: rgba(251, 191, 36, 0.9);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.125rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.activity-card__time-btn:hover,
.activity-card__time-btn:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.8);
  background: rgba(251, 191, 36, 0.15);
}

.activity-card__meta {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.activity-card__duration,
.activity-card__type {
  color: rgba(251, 191, 36, 0.6);
  font-size: 0.8125rem;
}

.activity-card__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.activity-card__checkbox {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid rgba(251, 191, 36, 0.4);
  border-radius: 50%;
  background: rgba(6, 8, 24, 0.6);
  color: rgba(251, 191, 36, 0.95);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-card__checkbox-icon {
  font-size: 1rem;
  line-height: 1;
}

.activity-card__checkbox:hover {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.6);
}

.activity-card__delete {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 4px;
  background: rgba(6, 8, 24, 0.6);
  color: rgba(251, 191, 36, 0.7);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.activity-card__delete:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: rgba(239, 68, 68, 0.95);
}

/* Weekly Day Actions */

.weekly-day__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(251, 191, 36, 0.2);
  margin-top: auto;
}

@media (max-width: 768px) {
  .weekly-day__body {
    gap: 0.75rem;
  }

  .weekly-day__activities {
    padding-bottom: 3.5rem;
  }

  .weekly-day__actions {
    position: sticky;
    bottom: 0.5rem;
    border-radius: 12px;
    padding: 1rem;
    margin: 0;
    background: linear-gradient(180deg, rgba(6, 8, 24, 0), rgba(6, 8, 24, 0.8));
    box-shadow:
      0 -12px 24px rgba(6, 8, 24, 0.45),
      0 0 0 1px rgba(251, 191, 36, 0.08);
    z-index: 2;
  }
}

/* Activity Palette Premium Styling */

.page-canvas--weekly .panel--palette.panel--solid {
  padding: 2.5rem 3rem;
}

.page-canvas--weekly .panel--palette h2 {
  color: rgba(251, 191, 36, 0.9);
}

.activity-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.activity-tile {
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  cursor: grab;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.activity-tile:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06));
  border-color: rgba(251, 191, 36, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.15);
}

.activity-tile:active {
  cursor: grabbing;
}

.activity-tile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.activity-tile__title {
  color: rgba(251, 191, 36, 0.95);
  font-weight: 600;
  font-size: 1rem;
}

.activity-tile__duration {
  color: rgba(251, 191, 36, 0.7);
  font-size: 0.875rem;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.activity-tile__meta {
  margin-bottom: 0.5rem;
}

.activity-tile__type {
  color: rgba(251, 191, 36, 0.6);
  font-size: 0.8125rem;
}

.activity-tile__schedule-btn {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06));
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: rgba(251, 191, 36, 0.95);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.activity-tile__schedule-btn:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
  border-color: rgba(251, 191, 36, 0.5);
}

/* Responsive Adjustments */

@media (max-width: 1200px) {
  .weekly-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .weekly-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .weekly-stat__value {
    font-size: 2rem;
  }

  .weekly-grid {
    grid-template-columns: 1fr;
  }

  .weekly-day {
    min-height: 300px;
  }

  .activity-palette {
    grid-template-columns: 1fr;
  }

  .page-canvas--weekly .panel--hero.panel--solid,
  .page-canvas--weekly .panel--calendar.panel--solid,
  .page-canvas--weekly .panel--palette.panel--solid {
    padding: 2rem;
  }
}

/* ========================================
   Orchestrator Reports Premium Styling — Week 4 Premium UI Upgrade
   ======================================== */

/* Base Premium Panel Styling for Reports */

.page-canvas--orchestrator .panel--solid {
  padding: 2.5rem 3rem;
}

.page-canvas--orchestrator .panel--solid h2 {
  color: rgba(251, 191, 36, 0.95);
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.18);
}

/* Orchestrator Hero (Latest Snapshot Summary) */

.orchestrator-hero {
  margin-top: 2rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.03));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  position: relative;
}

.orchestrator-hero::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), transparent 60%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.6;
}

.orchestrator-hero__meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 2.25rem;
  align-items: stretch;
}

.orchestrator-hero__primary {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.orchestrator-hero__context {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.orchestrator-hero__progress-card {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  box-shadow: 0 16px 48px rgba(251, 191, 36, 0.08);
}

.orchestrator-hero__progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.orchestrator-hero__next-run {
  font-size: 0.85rem;
  color: rgba(251, 191, 36, 0.7);
}

.orchestrator-hero__progress-bar {
  position: relative;
  height: 0.75rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.18);
  overflow: hidden;
}

.orchestrator-hero__progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.32), rgba(251, 191, 36, 0.72));
  transition: width 0.3s ease;
}

.orchestrator-hero__progress-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem 1.25rem;
  font-size: 0.85rem;
  color: rgba(251, 191, 36, 0.75);
}

.orchestrator-hero__progress-meta dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(251, 191, 36, 0.65);
}

.orchestrator-hero__progress-meta dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.92);
}

.orchestrator-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.orchestrator-hero__chip {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 160px;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.08);
  box-shadow: 0 12px 30px rgba(251, 191, 36, 0.08);
}

.orchestrator-hero__chip--timeline {
  background: rgba(251, 191, 36, 0.1);
}

.orchestrator-hero__chip-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.62);
}

.orchestrator-hero__chip-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.95);
}

.orchestrator-hero h3 {
  color: rgba(251, 191, 36, 0.95);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.orchestrator-hero__narrative {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(251, 191, 36, 0.85);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.orchestrator-hero__highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.orchestrator-hero__highlights li {
  padding-left: 1.5rem;
  position: relative;
  color: rgba(251, 191, 36, 0.8);
  line-height: 1.6;
}

.orchestrator-hero__highlights li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: rgba(251, 191, 36, 0.6);
  font-weight: 700;
}

@media (max-width: 960px) {
  .orchestrator-hero__meta-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .orchestrator-hero {
    padding: 2rem;
  }
}

/* Pinned Key Facts List */

.orchestrator-pinned {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.orchestrator-pinned__item {
  padding: 2rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.orchestrator-pinned__item:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.04));
  border-color: rgba(251, 191, 36, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.12);
}

.orchestrator-pinned__item h3 {
  color: rgba(251, 191, 36, 0.95);
  font-size: 1.125rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.orchestrator-pinned__item p {
  color: rgba(251, 191, 36, 0.75);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.orchestrator-pinned__tags {
  font-size: 0.875rem;
  color: rgba(251, 191, 36, 0.6);
}

.orchestrator-pinned__actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
}

.orchestrator-pinned__actions .btn {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06));
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: rgba(251, 191, 36, 0.95);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.orchestrator-pinned__actions .btn:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
  border-color: rgba(251, 191, 36, 0.5);
}

.orchestrator-pinned__item--collapsible {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.orchestrator-pinned__item--collapsible:hover {
  transform: none;
  background: transparent;
  border: none;
  box-shadow: none;
}

.orchestrator-collapsible {
  position: relative;
  display: block;
  padding: 1.1rem 1.35rem;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.06);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.orchestrator-collapsible summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.92);
}

.orchestrator-collapsible summary::-webkit-details-marker {
  display: none;
}

.orchestrator-collapsible summary::after {
  content: '⌄';
  font-size: 0.75rem;
  color: rgba(251, 191, 36, 0.65);
  transition: transform 0.2s ease;
  margin-top: 0.25rem;
}

.orchestrator-collapsible[open] summary::after {
  transform: rotate(180deg);
}

.orchestrator-collapsible summary:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.5);
  outline-offset: 6px;
  border-radius: 8px;
}

.orchestrator-collapsible__title {
  flex: 1;
  min-width: 0;
}

.orchestrator-collapsible__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.orchestrator-collapsible__content {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: rgba(251, 191, 36, 0.78);
}

.orchestrator-collapsible__tags {
  font-size: 0.85rem;
  color: rgba(251, 191, 36, 0.62);
}

.orchestrator-collapsible__actions {
  display: flex;
  gap: 0.75rem;
}

.orchestrator-collapsible__actions .btn {
  margin: 0;
}

.orchestrator-collapsible--compact {
  padding: 0.85rem 1rem;
}

.orchestrator-collapsible--compact .orchestrator-collapsible__content {
  margin-top: 0.65rem;
  gap: 0.6rem;
}

.orchestrator-collapsible[open] {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.38);
  box-shadow: 0 16px 40px rgba(251, 191, 36, 0.12);
}

/* Candidate Hints Section */

.orchestrator-candidate-hints {
  margin-top: 2.5rem;
  padding: 2rem;
  background: rgba(251, 191, 36, 0.04);
  border: 1px dashed rgba(251, 191, 36, 0.2);
  border-radius: 8px;
}

.orchestrator-candidate-hints h3 {
  color: rgba(251, 191, 36, 0.7);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.orchestrator-candidate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.orchestrator-candidate-list > li {
  color: rgba(251, 191, 36, 0.75);
  line-height: 1.6;
}

.orchestrator-candidate-hints .badge {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 1rem;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

/* Enhanced Table Styling for Reports */

.page-canvas--orchestrator .orchestrator-table-wrapper {
  margin-top: 1.5rem;
}

.page-canvas--orchestrator .orchestrator-table thead {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.03));
  border-bottom: 2px solid rgba(251, 191, 36, 0.3);
}

.page-canvas--orchestrator .orchestrator-table tbody tr {
  border-bottom: 1px solid rgba(251, 191, 36, 0.15);
}

.page-canvas--orchestrator .orchestrator-table tbody tr:hover {
  background: rgba(251, 191, 36, 0.04);
}

/* Expandable Details */

.orchestrator-table__expandable {
  cursor: pointer;
}

.orchestrator-table__expandable summary {
  color: rgba(251, 191, 36, 0.8);
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 0.2s ease;
}

.orchestrator-table__expandable summary:hover {
  color: rgba(251, 191, 36, 1);
}

.orchestrator-table__expandable[open] summary {
  color: rgba(251, 191, 36, 0.95);
  margin-bottom: 1rem;
}

/* Form Inline Actions */

.page-canvas--orchestrator .form-inline {
  display: inline-flex;
}

.page-canvas--orchestrator .btn-small {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: rgba(251, 191, 36, 0.9);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-canvas--orchestrator .btn-small:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.1));
  border-color: rgba(251, 191, 36, 0.4);
  transform: translateY(-1px);
}

.page-canvas--orchestrator .btn-primary.btn-small {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
  border-color: rgba(251, 191, 36, 0.4);
}

.page-canvas--orchestrator .btn-primary.btn-small:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(251, 191, 36, 0.15));
  border-color: rgba(251, 191, 36, 0.6);
}

/* Responsive Adjustments */

@media (max-width: 768px) {
  .page-canvas--orchestrator .panel--solid {
    padding: 2rem;
  }

  .orchestrator-hero {
    padding: 1.5rem;
  }

  .orchestrator-hero h3 {
    font-size: 1.25rem;
  }

  .orchestrator-hero__narrative {
    font-size: 1rem;
  }

  .orchestrator-pinned__item {
    padding: 1.5rem;
  }

  .orchestrator-pinned__actions {
    flex-direction: column;
  }
}

@keyframes tunnelExitShift {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-18px) scale(0.95);
  }
}

@keyframes tunnelExitFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes tunnelExitPortal {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(28px) scale(0.9);
    filter: blur(8px);
  }
}

.planning-today {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(146, 114, 255, 0.26);
    background:
      linear-gradient(150deg, rgba(20, 18, 66, 0.92), rgba(30, 15, 68, 0.78));
  }

.planning-today__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
  }

.planning-today__header h2 {
    margin: 0;
  }

.planning-today__eyebrow {
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    color: rgba(199, 255, 95, 0.78);
  }

.planning-today__streak {
    margin: 0;
    font-weight: 600;
    color: rgba(231, 234, 255, 0.82);
  }

.planning-today__metrics {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }

.planning-today__metric {
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    background: rgba(10, 14, 46, 0.66);
    border: 1px solid rgba(199, 255, 95, 0.2);
    display: grid;
    gap: 0.35rem;
  }

.planning-today__metric-label {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(231, 234, 255, 0.7);
  }

.planning-today__metric-value {
    font-size: 1.4rem;
    font-weight: 700;
  }

.planning-today__focus-window {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(231, 234, 255, 0.86);
  }

.planning-today__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

.planning-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 1.5rem;
  }

.planning-hero__art {
    border-radius: 1.1rem;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(118, 64, 217, 0.35), rgba(6, 8, 24, 0.8));
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.planning-hero__art img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }

.planning-hero__placeholder {
    color: rgba(228, 235, 255, 0.7);
    font-size: 0.95rem;
    text-align: center;
  }

.planning-hero__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
  }

.planning-hero__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.78rem;
    color: rgba(228, 235, 255, 0.7);
  }

.planning-hero__palette-label {
    font-size: 0.85rem;
    color: rgba(199, 255, 95, 0.85);
  }

.planning-category-panel {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(146, 114, 255, 0.26);
    background: linear-gradient(155deg, rgba(12, 14, 46, 0.9), rgba(30, 16, 72, 0.75));
    display: grid;
    gap: 1rem;
  }

.planning-search-panel,
  .planning-priority-panel {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(146, 114, 255, 0.26);
    background: linear-gradient(155deg, rgba(14, 16, 48, 0.92), rgba(28, 18, 70, 0.78));
    display: grid;
    gap: 1rem;
  }

.planning-search-panel__header,
  .planning-priority-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
  }

.planning-search-panel__eyebrow,
  .planning-priority-panel__eyebrow {
    margin: 0 0 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: rgba(199, 255, 95, 0.75);
  }

.planning-search-panel__form {
    display: grid;
    gap: 0.5rem;
  }

.planning-search-panel__field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(6, 8, 28, 0.6);
  }

.planning-search-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    background: rgba(199, 255, 95, 0.16);
    color: rgba(199, 255, 95, 0.95);
  }

.planning-search-panel__icon svg {
    width: 1rem;
    height: 1rem;
  }

.planning-search-panel__input {
    flex: 1;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    padding: 0.35rem 0;
  }

.planning-search-panel__input:focus-visible {
    outline: none;
  }

.planning-search-panel__result {
    margin: 0;
    font-size: 0.9rem;
  }

.planning-priority-panel__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
  }

.planning-priority-card {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 10, 32, 0.65);
  }

.planning-priority-card__details {
    display: grid;
    gap: 0.35rem;
  }

.planning-priority-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
  }

.planning-priority-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

.planning-category-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
  }

.planning-category-panel__eyebrow {
    margin: 0 0 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: rgba(199, 255, 95, 0.75);
  }

.planning-category-panel__blurb {
    margin: 0.25rem 0 0;
    color: rgba(231, 234, 255, 0.78);
    max-width: 36rem;
  }

.planning-category-panel__form {
    display: grid;
    gap: 0.75rem;
  }

.planning-category-panel__field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(6, 8, 28, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

.planning-category-panel__field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: rgba(199, 255, 95, 0.15);
    color: rgba(199, 255, 95, 0.95);
  }

.planning-category-panel__field-icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }

.planning-category-panel__select {
    flex: 1;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 0.4rem 0;
    min-height: 2.5rem;
  }

.planning-category-panel__select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(199, 255, 95, 0.5);
    border-radius: 0.65rem;
  }

.planning-category-panel__actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
  }

.planning-category-panel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

.planning-category-panel__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(146, 114, 255, 0.35);
    background: rgba(10, 12, 42, 0.6);
    text-decoration: none;
    color: inherit;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }

.planning-category-panel__chip:hover {
    border-color: rgba(199, 255, 95, 0.45);
    transform: translateY(-1px);
  }

.planning-category-panel__chip:focus-visible {
    outline: 2px solid rgba(199, 255, 95, 0.6);
    outline-offset: 2px;
  }

.planning-category-panel__chip.is-active {
    border-color: rgba(199, 255, 95, 0.6);
    background: linear-gradient(130deg, rgba(118, 64, 217, 0.6), rgba(199, 255, 95, 0.45));
    box-shadow: 0 18px 38px -26px rgba(8, 5, 28, 0.8);
  }

.planning-category-panel__chip-label {
    font-weight: 600;
  }

.planning-category-panel__chip-count {
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(6, 8, 28, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

.planning-category-panel__active {
    margin: 0;
  }

.planning-board-mobile,
  .planning-focus-mobile,
  .planning-insights {
    margin-top: 1.5rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(146, 114, 255, 0.26);
    background:
      linear-gradient(160deg, rgba(10, 12, 42, 0.86), rgba(18, 14, 54, 0.74));
    padding: 1.5rem;
    display: grid;
    gap: 1.25rem;
  }

.planning-board-mobile__header,
  .planning-focus-mobile__header,
  .planning-insights__header {
    display: grid;
    gap: 0.35rem;
  }

.planning-board-mobile__header h3,
  .planning-focus-mobile__header h3,
  .planning-insights__header h3 {
    margin: 0;
  }

.planning-lane-nav {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }

.planning-lane-nav__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(146, 114, 255, 0.4);
    background: rgba(14, 16, 48, 0.6);
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }

.planning-lane-nav__button:focus-visible {
    outline: 2px solid rgba(199, 255, 95, 0.7);
    outline-offset: 2px;
  }

.planning-lane-nav__button.is-active {
    background: linear-gradient(135deg, rgba(118, 64, 217, 0.65), rgba(199, 255, 95, 0.48));
    border-color: rgba(199, 255, 95, 0.6);
    box-shadow: 0 20px 36px -18px rgba(6, 5, 28, 0.65);
  }

.planning-lane-nav__label {
    font-weight: 600;
  }

.planning-lane-nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(8, 10, 32, 0.65);
    border: 1px solid rgba(199, 255, 95, 0.4);
    font-size: 0.85rem;
  }

.planning-lanes {
    display: grid;
    gap: 1.5rem;
  }

.planning-lane {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(146, 114, 255, 0.3);
    background: var(
      --planning-lane-surface,
      linear-gradient(160deg, rgba(10, 12, 42, 0.86), rgba(18, 14, 54, 0.74))
    );
    box-shadow: 0 18px 42px -26px rgba(6, 5, 28, 0.85);
    scroll-margin-top: 6.5rem;
  }

.planning-lane::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 55%);
    pointer-events: none;
  }

.planning-lane__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }

.planning-lane__heading {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
  }

.planning-lane__heading-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

.planning-lane__icon {
    font-size: 1.45rem;
    }

.planning-lane__eyebrow {
    margin: 0 0 0.25rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: rgba(199, 255, 95, 0.72);
  }

.planning-lane__title {
    margin: 0;
    font-size: 1.18rem;
  }

.planning-lane__actions {
    display: flex;
    align-items: center;
  }

.planning-lane__add {
    white-space: nowrap;
  }

.planning-lane__description {
    margin: 0;
    color: rgba(231, 234, 255, 0.78);
    font-size: 0.9rem;
  }

.planning-lane__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(6, 8, 28, 0.45);
    min-width: 4.5rem;
    text-align: right;
  }

.planning-lane__count {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
  }

.planning-lane__count-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(231, 234, 255, 0.65);
  }

.planning-lane__content {
    display: grid;
    gap: 0.75rem;
  }

.planning-lane__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
  }

.planning-lane__empty {
    margin: 0;
    padding: 1.1rem;
    border-radius: 1rem;
    border: 1px dashed rgba(199, 255, 95, 0.36);
    background: rgba(10, 14, 46, 0.45);
  }

.planning-lane--backlog {
    --planning-lane-surface: linear-gradient(150deg, rgba(35, 26, 88, 0.92), rgba(20, 42, 110, 0.78));
  }

.planning-lane--focus {
    --planning-lane-surface: linear-gradient(150deg, rgba(64, 24, 92, 0.94), rgba(156, 58, 122, 0.76));
  }

.planning-lane--blocked {
    --planning-lane-surface: linear-gradient(150deg, rgba(94, 28, 36, 0.94), rgba(154, 72, 64, 0.74));
  }

.planning-lane--done {
    --planning-lane-surface: linear-gradient(150deg, rgba(22, 76, 64, 0.92), rgba(64, 126, 116, 0.78));
  }

.planning-mobile-card {
    position: relative;
    border-radius: 1.1rem;
    border: 1px solid rgba(146, 114, 255, 0.32);
    overflow: hidden;
    background: rgba(12, 14, 42, 0.7);
    box-shadow: 0 18px 44px -28px rgba(8, 5, 28, 0.85);
  }

.planning-mobile-card__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.2rem 1rem;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

.planning-mobile-card__toggle:focus-visible {
    outline: 2px solid rgba(199, 255, 95, 0.7);
    outline-offset: -4px;
  }

.planning-mobile-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
  }

.planning-mobile-card__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(231, 234, 255, 0.82);
    transition: transform 0.2s ease;
  }

.planning-mobile-card__indicator svg {
    width: 1.25rem;
    height: 1.25rem;
  }

.planning-mobile-card.is-expanded .planning-mobile-card__indicator {
    transform: rotate(180deg);
  }

.planning-mobile-card__details {
    display: none;
    gap: 0.65rem;
    padding: 0 1.2rem 1.2rem;
    background: rgba(8, 10, 32, 0.58);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

.planning-mobile-card.is-expanded .planning-mobile-card__details {
    display: grid;
  }

.planning-mobile-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
  }

.planning-mobile-card__due,
  .planning-mobile-card__description,
  .planning-mobile-card__notes,
  .planning-mobile-card__subtasks {
    margin: 0;
    font-size: 0.92rem;
  }

.planning-mobile-card__detail {
    justify-self: flex-start;
  }

.planning-lane__heading-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

.planning-lane__heading-button:hover {
    opacity: 0.9;
  }

.planning-lane__heading-button:focus-visible {
    outline: 2px solid rgba(199, 255, 95, 0.7);
    outline-offset: 2px;
    border-radius: 0.5rem;
  }

.planning-lane__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(231, 234, 255, 0.72);
    transition: transform 0.25s ease;
  }

.planning-lane__toggle-icon svg {
    width: 1.4rem;
    height: 1.4rem;
  }

.planning-lane.is-collapsed .planning-lane__toggle-icon {
    transform: rotate(-90deg);
  }

.planning-lane.is-collapsed .planning-lane__content {
    display: none;
  }

.planning-mobile-card__subtasks-section {
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

.planning-mobile-card__subtasks-heading {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(199, 255, 95, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

.planning-mobile-card__subtasks-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
  }

.planning-mobile-card__subtask {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
  }

.planning-mobile-card__subtask.is-complete .planning-mobile-card__subtask-title {
    opacity: 0.5;
    text-decoration: line-through;
  }

.planning-mobile-card__subtask-form {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
  }

.planning-mobile-card__subtask-checkbox {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(199, 255, 95, 0.85);
    cursor: pointer;
    transition: transform 0.15s ease;
  }

.planning-mobile-card__subtask-checkbox:hover {
    transform: scale(1.08);
  }

.planning-mobile-card__subtask-checkbox:focus-visible {
    outline: 2px solid rgba(199, 255, 95, 0.7);
    outline-offset: 2px;
    border-radius: 0.35rem;
  }

.planning-mobile-card__subtask-icon {
    display: block;
    width: 100%;
    height: 100%;
  }

.planning-mobile-card__subtask-icon svg {
    width: 100%;
    height: 100%;
  }

.planning-mobile-card__subtask-icon rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

.planning-mobile-card__subtask-icon path {
    stroke: currentColor;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

.planning-mobile-card__subtask-checkbox.is-checked .planning-mobile-card__subtask-icon path {
    opacity: 1;
  }

.planning-mobile-card__subtask-title {
    margin: 0;
    padding-top: 0.3rem;
    font-size: 0.95rem;
    line-height: 1.5;
  }

.planning-mobile-card__actions {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

.planning-mobile-card__status-form {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
  }

.planning-mobile-card__status-label {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(199, 255, 95, 0.85);
  }

.planning-mobile-card__status-select {
    flex: 1;
    min-width: 8rem;
    padding: 0.55rem 0.85rem;
    background: rgba(12, 16, 48, 0.72);
    border: 1px solid rgba(199, 255, 95, 0.28);
    border-radius: 0.55rem;
    color: inherit;
    font: inherit;
    font-size: 0.92rem;
  }

.planning-mobile-card__status-select:focus-visible {
    outline: 2px solid rgba(199, 255, 95, 0.7);
    outline-offset: 2px;
  }

.planning-mobile-card__status-submit {
    white-space: nowrap;
  }

@media (max-width: 48rem) {
    .planning-mobile-card__subtask-checkbox {
      width: 2.75rem;
      height: 2.75rem;
    }

    .planning-mobile-card__status-select {
      min-height: 48px;
      font-size: 16px;
    }

    .planning-mobile-card__status-submit {
      min-height: 48px;
    }
  }

.planning-focus-mobile__form {
    display: grid;
    gap: 1rem;
  }

.planning-focus-mobile__presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

.planning-focus-mobile__field-row {
    display: grid;
    gap: 0.75rem;
  }

@media (min-width: 40rem) {
    .planning-focus-mobile__field-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

.planning-focus-mobile__countdown {
    margin: 0;
    font-weight: 600;
    color: rgba(199, 255, 95, 0.85);
  }

.planning-focus-mobile__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

.planning-focus-mobile__history ul {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.45rem;
  }

.planning-insights__carousel {
    display: grid;
    gap: 1rem;
  }

@media (min-width: 52rem) {
    .planning-insights__carousel {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

.planning-insight-card {
    border-radius: 1.1rem;
    border: 1px solid rgba(199, 255, 95, 0.18);
    background: rgba(12, 16, 48, 0.72);
    padding: 1.1rem;
    display: grid;
    gap: 0.6rem;
  }

.planning-insight-card h4 {
    margin: 0;
  }

.planning-insight-card__summary {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(231, 234, 255, 0.88);
  }

.planning-insight-card__meta {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(199, 255, 95, 0.78);
  }

.planning-insight-card__cta {
    font-size: 0.85rem;
  }

.planning-insight-card--celebrate {
    border-color: rgba(255, 205, 245, 0.38);
    background: rgba(38, 18, 68, 0.7);
  }

.planning-insights__themes ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
  }

.planning-insights__themes li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: rgba(231, 234, 255, 0.82);
  }

.planning-sheet {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;  /* Changed from 'end' to center modal on mobile */
    padding: env(safe-area-inset-top, 1rem) env(safe-area-inset-right, 1rem)
             env(safe-area-inset-bottom, 1rem) env(safe-area-inset-left, 1rem);
    background: rgba(0, 0, 0, 0.7);  /* Darker backdrop for better focus */
    z-index: 50;
  }

.planning-sheet--inline {
    position: static;
    inset: auto;
    display: block;
    padding: 0;
    background: none;
  }

.planning-sheet--inline .planning-sheet__panel {
    border-radius: 1.2rem;
    box-shadow: 0 24px 48px -32px rgba(6, 5, 28, 0.7);
    margin: 0 auto;
  }

.planning-sheet[hidden] {
    display: none !important;
  }

.planning-sheet__panel {
    width: min(640px, 100%);
    border-radius: 1.2rem 1.2rem max(1.2rem, env(safe-area-inset-bottom, 1rem)) max(1.2rem, env(safe-area-inset-bottom, 1rem));
    background:
      linear-gradient(180deg, rgba(16, 16, 58, 0.95), rgba(12, 10, 42, 0.95));
    padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -26px 48px -22px rgba(6, 5, 28, 0.88);
    display: grid;
    gap: 1.25rem;
  }

.planning-sheet__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
  }

.planning-sheet__eyebrow {
    margin: 0 0 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: rgba(199, 255, 95, 0.72);
  }

.planning-sheet__title {
    margin: 0;
  }

.planning-sheet__close {
    border: 0;
    background: none;
    padding: 0;
    color: rgba(231, 234, 255, 0.8);
    cursor: pointer;
    display: inline-flex;
  }

.planning-sheet__close svg {
    width: 1.4rem;
    height: 1.4rem;
  }

.planning-sheet__section {
    display: grid;
    gap: 0.75rem;
  }

.planning-sheet__section h4 {
    margin: 0;
  }

.planning-sheet__context {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(231, 234, 255, 0.75);
  }

.planning-sheet__field-row {
    display: grid;
    gap: 0.75rem;
  }

@media (min-width: 40rem) {
    .planning-sheet__field-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

.planning-sheet__footer {
    display: flex;
    justify-content: flex-end;
  }

/* Daily Cadence Hub Styles */

.page-canvas--daily-cadence {
    background: transparent;
  }

.daily-hero {
    border-color: rgba(118, 64, 217, 0.45);
    background: linear-gradient(145deg, rgba(27, 20, 61, 0.85) 0%, rgba(10, 14, 40, 0.92) 100%);
  }

.daily-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

.daily-hero__date {
    font-size: var(--type-body);
    color: rgba(255, 255, 255, 0.8);
  }

.daily-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
  }

.daily-hero__stat {
    padding: var(--space-md);
    border-radius: 1rem;
    border: 1px solid rgba(118, 64, 217, 0.35);
    background: rgba(6, 8, 26, 0.6);
  }

.daily-hero__stat-label {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
  }

.daily-hero__stat-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-primary);
  }

.daily-shell {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-xl);
  }

.daily-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

.daily-focus {
    border-color: rgba(118, 64, 217, 0.35);
    background: linear-gradient(135deg, rgba(18, 16, 50, 0.6) 0%, rgba(9, 11, 30, 0.9) 100%);
  }

.daily-focus__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

.daily-focus__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

.daily-focus__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

.daily-focus__progress {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
  }

.daily-board__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

.daily-board__empty {
    padding: var(--space-lg);
    text-align: center;
    border: 1px dashed rgba(118, 64, 217, 0.4);
    border-radius: 1rem;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(9, 11, 30, 0.5);
  }

.daily-activity-card {
    border-radius: 1.2rem;
    border: 1px solid rgba(118, 64, 217, 0.3);
    padding: var(--space-md);
    background: rgba(8, 9, 26, 0.75);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: grab;
  }

.daily-activity-card.dragging {
    cursor: grabbing;
    opacity: 0.9;
  }

.daily-activity-card--current,
  .daily-activity-card[data-state="pending"]:hover {
    border-color: rgba(199, 255, 95, 0.65);
    box-shadow: 0 12px 30px rgba(8, 5, 28, 0.35);
  }

.daily-activity-card--completed {
    opacity: 0.75;
    border-color: rgba(52, 211, 153, 0.4);
  }

.daily-activity-card__header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    align-items: flex-start;
    margin-bottom: var(--space-sm);
  }

.daily-activity-card__title-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

.daily-activity-card__labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
  }

.daily-activity-card__status {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
  }

.daily-activity-card__notes {
    margin: 0 0 var(--space-sm);
    color: rgba(255, 255, 255, 0.7);
  }

.daily-activity-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

.daily-progress-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

.daily-progress {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

.daily-progress__ring {
    width: 96px;
    height: 96px;
    position: relative;
  }

.daily-progress__ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

.daily-progress__bg,
  .daily-progress__value {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
  }

.daily-progress__bg {
    stroke: rgba(255, 255, 255, 0.12);
  }

.daily-progress__value {
    stroke: rgba(199, 255, 95, 0.85);
    stroke-dasharray: 0 100;
  }

.daily-progress__value + .daily-progress__value {
    position: absolute;
    inset: 0;
  }

.daily-progress__label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.65);
  }

.daily-progress-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(118, 64, 217, 0.35);
    border-radius: 1rem;
    padding: var(--space-md);
    background: rgba(6, 8, 26, 0.6);
  }

.daily-progress-footer__label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
  }

.daily-progress-footer__value {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
  }

.daily-progress-footer__form {
    margin-left: auto;
  }

.celebration {
    min-height: 3rem;
    position: relative;
  }

.celebration--active {
    animation: celebrationPulse 6s ease-in-out infinite;
  }

.daily-actions__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

@media (max-width: 64rem) {
    .daily-shell {
      grid-template-columns: 1fr;
    }

    .daily-column--side {
      order: -1;
    }
  }

@media (max-width: 48rem) {
    .daily-progress,
    .daily-progress-footer {
      flex-direction: column;
      align-items: flex-start;
    }

    .daily-progress-footer__form {
      width: 100%;
    }

    .daily-activity-card__actions {
      flex-direction: column;
      align-items: stretch;
    }
  }

/* ============================================================================
 * Weekly Planning Hub
 * ========================================================================= */

/* Weekly Stats */

.weekly-stats {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: rgba(118, 64, 217, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(118, 64, 217, 0.2);
}

.weekly-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.weekly-stat__value {
  font-size: 2rem;
  font-weight: 700;
  color: rgba(199, 255, 95, 0.95);
  line-height: 1;
}

.weekly-stat__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(228, 235, 255, 0.7);
  font-weight: 500;
}

/* Weekly Grid - responsive auto-fit */

.weekly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.theme-dark .weekly-focus__progress {
  color: rgba(228, 235, 255, 0.75);
}

@media (min-width: 1600px) {
  .weekly-grid {
    grid-template-columns: repeat(4, minmax(260px, 1fr));
  }
}

@media (max-width: 768px) {
  .weekly-grid {
    grid-template-columns: 1fr;
  }
  .weekly-day {
    min-height: 0;
    padding: 1.25rem;
  }

  .weekly-day__header {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .weekly-day__title {
    font-size: 0.95rem;
  }

  .weekly-day__collapse-toggle {
    display: inline-flex;
  }

  .weekly-day__hint {
    display: inline-flex;
    margin-left: auto;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(228, 235, 255, 0.55);
    transition: opacity 0.2s ease;
  }

  .weekly-day:not(.weekly-day--collapsed) .weekly-day__hint {
    opacity: 0;
  }

  .weekly-day__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }

  .weekly-day:not(.weekly-day--collapsed) .weekly-day__body {
    max-height: 3200px;
    opacity: 1;
    margin-top: 0.75rem;
  }

  .weekly-day__actions {
    flex-direction: column;
  }
}

/* Weekly Day Column */

.weekly-day {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  background: rgba(27, 22, 45, 0.6);
  border: 1px solid rgba(118, 64, 217, 0.25);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.2s ease;
}

.weekly-day--today {
  border-color: rgba(199, 255, 95, 0.5);
  box-shadow: 0 0 0 1px rgba(199, 255, 95, 0.25), 0 0 12px rgba(199, 255, 95, 0.2);
}

.weekly-day__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(118, 64, 217, 0.2);
}

.weekly-day__collapse-toggle {
  margin-left: auto;
  border: none;
  background: transparent;
  color: rgba(199, 255, 95, 0.7);
  font-size: 0.95rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.weekly-day__collapse-toggle span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.2s ease;
}

.weekly-day__collapse-toggle:hover,
.weekly-day__collapse-toggle:focus-visible {
  background: rgba(199, 255, 95, 0.12);
  color: rgba(199, 255, 95, 0.95);
}

.weekly-day__title {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(199, 255, 95, 0.9);
  margin: 0;
}

.weekly-day__date {
  font-size: 0.875rem;
  color: rgba(228, 235, 255, 0.7);
}

.weekly-day__hint {
  display: none;
  font-size: 0.75rem;
  color: rgba(228, 235, 255, 0.55);
}

.weekly-day__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.weekly-day__activities {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.weekly-day__empty {
  color: rgba(228, 235, 255, 0.4);
  font-size: 0.875rem;
  text-align: center;
  padding: 2rem 0;
  font-style: italic;
}

.weekly-day__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.weekly-day__add-btn,
.weekly-day__template-btn {
  width: 100%;
}

.weekly-day--collapsed .weekly-day__collapse-toggle span[aria-hidden="true"] {
  transform: rotate(-90deg);
}

/* Activity Cards */

.activity-card {
  padding: 0.875rem;
  border-radius: 8px;
  border: 1px solid rgba(118, 64, 217, 0.3);
  background: rgba(118, 64, 217, 0.12);
  transition: all 0.2s ease;
  position: relative;
  cursor: grab;
}

.activity-card:active {
  cursor: grabbing;
}

.activity-card--completed {
  opacity: 0.6;
}

.activity-card--completed .activity-card__title {
  text-decoration: line-through;
}

/* Color variations */

.activity-card--purple { background: rgba(118, 64, 217, 0.12); border-color: rgba(118, 64, 217, 0.3); }

.activity-card--blue { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.3); }

.activity-card--green { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.3); }

.activity-card--yellow { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.3); }

.activity-card--orange { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.3); }

.activity-card--red { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); }

.activity-card--pink { background: rgba(236, 72, 153, 0.12); border-color: rgba(236, 72, 153, 0.3); }

.activity-card--teal { background: rgba(20, 184, 166, 0.12); border-color: rgba(20, 184, 166, 0.3); }

.activity-card--gray { background: rgba(156, 163, 175, 0.12); border-color: rgba(156, 163, 175, 0.3); }

.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.activity-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.activity-card__drag-handle {
  font-size: 1rem;
  color: rgba(228, 235, 255, 0.4);
  cursor: grab;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.activity-card__drag-handle:active {
  cursor: grabbing;
}

.activity-card__title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: rgba(228, 235, 255, 0.95);
  line-height: 1.3;
  flex: 1;
}

.activity-card__time-btn {
  font-size: 0.75rem;
  color: rgba(199, 255, 95, 0.95);
  font-weight: 600;
  white-space: nowrap;
  border: 1px dashed rgba(199, 255, 95, 0.45);
  background: rgba(199, 255, 95, 0.12);
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.activity-card__time-btn:hover,
.activity-card__time-btn:focus {
  outline: none;
  border-color: rgba(199, 255, 95, 0.9);
  background: rgba(199, 255, 95, 0.2);
}

.activity-card__meta {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: rgba(228, 235, 255, 0.6);
}

.activity-card__duration,
.activity-card__type {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.activity-card__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.activity-card__checkbox,
.activity-card__delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0.25rem;
  color: rgba(228, 235, 255, 0.7);
  transition: all 0.2s ease;
  line-height: 1;
}

.activity-card__checkbox:hover {
  color: rgba(199, 255, 95, 1);
  transform: scale(1.2);
}

.activity-card__delete:hover {
  color: rgba(239, 68, 68, 1);
  transform: scale(1.2);
}

.activity-toggle-form,
.activity-delete-form {
  margin: 0;
  display: inline;
}

/* Activity Palette */

.activity-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.activity-tile {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(118, 64, 217, 0.3);
  background: rgba(118, 64, 217, 0.12);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  cursor: grab;
}

.activity-tile:active {
  cursor: grabbing;
}

/* Color variations for tiles */

.activity-tile--purple { background: rgba(118, 64, 217, 0.12); border-color: rgba(118, 64, 217, 0.3); }

.activity-tile--blue { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.3); }

.activity-tile--green { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.3); }

.activity-tile--yellow { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.3); }

.activity-tile--orange { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.3); }

.activity-tile--red { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); }

.activity-tile--pink { background: rgba(236, 72, 153, 0.12); border-color: rgba(236, 72, 153, 0.3); }

.activity-tile--teal { background: rgba(20, 184, 166, 0.12); border-color: rgba(20, 184, 166, 0.3); }

.activity-tile--gray { background: rgba(156, 163, 175, 0.12); border-color: rgba(156, 163, 175, 0.3); }

.activity-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.activity-tile__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.activity-tile__title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: rgba(228, 235, 255, 0.95);
  line-height: 1.3;
  flex: 1;
}

.activity-tile__duration {
  font-size: 0.75rem;
  color: rgba(199, 255, 95, 0.8);
  font-weight: 500;
  white-space: nowrap;
}

.activity-tile__meta {
  font-size: 0.75rem;
  color: rgba(228, 235, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.activity-tile__schedule-btn {
  width: 100%;
  padding: 0.5rem;
  background: rgba(118, 64, 217, 0.2);
  border: 1px solid rgba(118, 64, 217, 0.4);
  border-radius: 6px;
  color: rgba(199, 255, 95, 0.95);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.activity-tile__schedule-btn:hover {
  background: rgba(118, 64, 217, 0.3);
  border-color: rgba(118, 64, 217, 0.6);
  transform: translateY(-1px);
}

/* ============================================================
   Drag and Drop States
   ============================================================ */

/* Dragging state - element being dragged */

.activity-tile.dragging,
.activity-card.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

/* Drop zone - day column when dragging over */

.drop-zone {
  transition: all 0.2s ease;
}

.drop-zone.drag-over {
  background: rgba(199, 255, 95, 0.1);
  border: 2px dashed rgba(199, 255, 95, 0.5);
  border-radius: 8px;
}

/* Make drop zones more visible during drag */

body.dragging .drop-zone {
  min-height: 100px;
}

/* Modal Styles */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;  /* Grid centering - more reliable than flexbox on mobile */
  padding:
    clamp(1rem, env(safe-area-inset-top, 1rem), 3rem)
    clamp(1rem, env(safe-area-inset-right, 1rem), 3rem)
    clamp(1rem, env(safe-area-inset-bottom, 1rem), 3rem)
    clamp(1rem, env(safe-area-inset-left, 1rem), 3rem);
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.modal__content {
  position: relative;
  background: linear-gradient(180deg, rgba(27, 22, 45, 0.95), rgba(16, 16, 42, 0.95));
  border: 1px solid rgba(118, 64, 217, 0.3);
  border-radius: 16px;
  max-width: min(90vw, 500px);  /* Responsive sizing */
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(118, 64, 217, 0.2);
}

.modal__header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: rgba(199, 255, 95, 0.95);
}

.modal__close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: rgba(228, 235, 255, 0.7);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.modal__close:hover {
  color: rgba(228, 235, 255, 1);
  transform: scale(1.2);
}

.modal__form {
  padding: 1.5rem;
}

.modal__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.schedule-one-off-toggle {
  margin-top: var(--space-sm);
}

.schedule-one-off-fields {
  border: 1px solid rgba(118, 64, 217, 0.35);
  border-radius: 0.9rem;
  padding: var(--space-md);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
  background: rgba(10, 12, 35, 0.4);
  display: grid;
  gap: var(--space-sm);
}

.schedule-one-off-fields[hidden] {
  display: none;
}

/* Responsive modal adjustments */

@media (max-height: 700px) {
  /* On short screens (landscape mobile), reduce max-height to prevent overflow */
  .modal__content {
    max-height: 80vh;
  }
}

/* =============================================================================
   Planning Hub Premium Styling — Week 4 Premium UI Upgrade
   Applies gold accents, premium panels, and celebration effects
   ============================================================================= */

/* Planning Today Section - Premium Panel */

.planning-today.panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.12),
    inset 0 0 20px rgba(251, 191, 36, 0.03);
}

/* Streak Badge - Gold Ring at 7+ Days */

.planning-today__streak--gold {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06));
  border: 2px solid rgba(251, 191, 36, 0.45);
  box-shadow:
    0 0 20px rgba(251, 191, 36, 0.25),
    inset 0 1px 0 rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  font-weight: 600;
  animation: streakGlow 3s ease-in-out infinite;
}

@keyframes streakGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(251, 191, 36, 0.25),
      inset 0 1px 0 rgba(251, 191, 36, 0.2);
  }
  50% {
    box-shadow:
      0 0 30px rgba(251, 191, 36, 0.35),
      inset 0 1px 0 rgba(251, 191, 36, 0.3);
  }
}

/* Planning Board - Premium Panel */

.planning-board-mobile.panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.3);
  box-shadow:
    0 25px 50px -35px rgba(15, 28, 92, 0.9),
    inset 0 1px 0 rgba(251, 191, 36, 0.1),
    inset 0 0 18px rgba(251, 191, 36, 0.02);
}

/* Lane Navigation - Gold Focus States */

.planning-lane-nav__button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.45);
  border-color: rgba(251, 191, 36, 0.6);
}

.planning-lane-nav__button:hover {
  border-color: rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.04));
}

/* Task Cards - Gold Highlight for In-Focus Status */

.planning-mobile-card[data-planning-task-status="focus"] {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow:
    0 4px 16px rgba(251, 191, 36, 0.15),
    inset 0 1px 0 rgba(251, 191, 36, 0.1);
}

/* Planning Focus Timer - Premium Panel */

.planning-focus-mobile.panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.3);
  box-shadow:
    0 25px 50px -35px rgba(15, 28, 92, 0.9),
    inset 0 1px 0 rgba(251, 191, 36, 0.1),
    inset 0 0 18px rgba(251, 191, 36, 0.02);
}

/* Focus Form Inputs - Gold Focus Rings */

.planning-focus-mobile input[type="text"]:focus,
.planning-focus-mobile input[type="number"]:focus,
.planning-focus-mobile select:focus,
.planning-focus-mobile textarea:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25);
}

/* Focus Timer Presets - Gold Hover States */

.planning-focus-mobile__presets button:hover {
  border-color: rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
}

.planning-focus-mobile__presets button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.4);
}

/* Planning Insights - Premium Panel */

.planning-insights.panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.3);
  box-shadow:
    0 25px 50px -35px rgba(15, 28, 92, 0.9),
    inset 0 1px 0 rgba(251, 191, 36, 0.1),
    inset 0 0 18px rgba(251, 191, 36, 0.02);
}

/* Insight Cards - Gold Accents */

.planning-insight-card {
  border: 1px solid rgba(251, 191, 36, 0.25);
  background:
    linear-gradient(140deg, rgba(10, 12, 32, 0.95), rgba(12, 14, 36, 1)),
    radial-gradient(circle at 30% 40%, rgba(251, 191, 36, 0.04), transparent 60%);
  box-shadow:
    0 8px 20px -10px rgba(15, 28, 92, 0.7),
    inset 0 1px 0 rgba(251, 191, 36, 0.08);
}

/* Celebration Card - Premium Gold Styling */

.planning-insight-card--celebrate {
  border: 2px solid rgba(251, 191, 36, 0.5);
  background:
    linear-gradient(140deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06)),
    radial-gradient(circle at 30% 40%, rgba(251, 191, 36, 0.08), transparent 60%);
  box-shadow:
    0 0 30px rgba(251, 191, 36, 0.25),
    0 12px 24px -12px rgba(251, 191, 36, 0.3),
    inset 0 1px 0 rgba(251, 191, 36, 0.2);
  animation: celebrationPulse 4s ease-in-out infinite;
}

@keyframes celebrationPulse {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(251, 191, 36, 0.25),
      0 12px 24px -12px rgba(251, 191, 36, 0.3),
      inset 0 1px 0 rgba(251, 191, 36, 0.2);
  }
  50% {
    box-shadow:
      0 0 40px rgba(251, 191, 36, 0.35),
      0 12px 24px -12px rgba(251, 191, 36, 0.4),
      inset 0 1px 0 rgba(251, 191, 36, 0.3);
  }
}

.planning-insight-card--celebrate h4 {
  color: #fbbf24;
}

/* Planning Capture Modal - extends base modal styles */

.planning-capture .modal__header-content {
  display: grid;
  gap: 0.35rem;
}

.planning-capture .modal__eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: rgba(199, 255, 95, 0.72);
}

.planning-capture .modal__title {
  margin: 0;
  font-size: 1.5rem;
  color: rgba(228, 235, 255, 0.95);
}

.planning-capture__section {
  margin-bottom: 1.5rem;
}

.planning-capture__section h4 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: rgba(199, 255, 95, 0.85);
}

.planning-capture__context {
  margin: 0 0 1rem;
  padding: 0.75rem;
  font-size: 0.85rem;
  color: rgba(231, 234, 255, 0.75);
  background: rgba(118, 64, 217, 0.1);
  border-left: 3px solid rgba(118, 64, 217, 0.5);
  border-radius: 4px;
}

.planning-capture__field-row {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 40rem) {
  .planning-capture__field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.planning-capture__help {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: rgba(231, 234, 255, 0.6);
}

/* Planning capture modal sizing - larger for multi-section form */

#planning-capture-modal .modal__content {
  max-width: min(95vw, 640px);
  max-height: 90vh;
}

/* Inline page mode for dedicated capture page */

.planning-capture--inline {
  max-width: 640px;
  margin: 2rem auto;
}

.planning-capture--inline .planning-capture__header {
  margin-bottom: 2rem;
}

.planning-capture--inline .planning-capture__eyebrow {
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: rgba(199, 255, 95, 0.72);
}

.planning-capture--inline .planning-capture__title {
  margin: 0;
  font-size: 2rem;
  color: rgba(228, 235, 255, 0.95);
}

.planning-capture--inline .planning-capture__footer {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-end;
}

.form-field {
  margin-bottom: 1.25rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: rgba(228, 235, 255, 0.9);
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  background: rgba(27, 22, 45, 0.8);
  border: 1px solid rgba(118, 64, 217, 0.3);
  border-radius: 8px;
  color: rgba(228, 235, 255, 0.95);
  font-size: 0.9375rem;
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: rgba(199, 255, 95, 0.5);
  box-shadow: 0 0 0 2px rgba(199, 255, 95, 0.2);
}

.form-input:-moz-read-only {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-input:read-only {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-input option {
  background: rgb(27, 22, 45);
  color: rgba(228, 235, 255, 0.95);
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.badge-sm {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
}

.form-help {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: rgba(228, 235, 255, 0.6);
}

/* ============================================================
   Template Management Styles
   ============================================================ */

/* Template Grid (List View) */

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

/* Template Card */

.template-card {
  display: flex;
  flex-direction: column;
  background: rgba(27, 22, 45, 0.6);
  border: 1px solid rgba(118, 64, 217, 0.25);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.2s ease;
}

.template-card:hover {
  border-color: rgba(199, 255, 95, 0.4);
  box-shadow: 0 4px 12px rgba(199, 255, 95, 0.15);
}

.template-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.template-card__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(228, 235, 255, 0.95);
  margin: 0;
}

.template-card__count {
  font-size: 0.8125rem;
  color: rgba(228, 235, 255, 0.6);
  background: rgba(118, 64, 217, 0.2);
  padding: 0.25rem 0.625rem;
  border-radius: 12px;
}

.template-card__description {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: rgba(228, 235, 255, 0.7);
  line-height: 1.5;
}

.template-card__activities {
  flex: 1;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.template-card__more {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(228, 235, 255, 0.5);
  font-style: italic;
}

.template-card__actions {
  display: flex;
  gap: 0.5rem;
}

/* Template Activity Preview (in Card) */

.template-activity-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem;
  border-radius: 8px;
  font-size: 0.875rem;
}

.template-activity-preview__title {
  color: rgba(228, 235, 255, 0.9);
  font-weight: 500;
}

.template-activity-preview__time {
  font-size: 0.75rem;
  color: rgba(228, 235, 255, 0.6);
}

/* Color variations for preview */

.template-activity-preview--purple { background: rgba(118, 64, 217, 0.12); }

.template-activity-preview--blue { background: rgba(59, 130, 246, 0.12); }

.template-activity-preview--green { background: rgba(34, 197, 94, 0.12); }

.template-activity-preview--yellow { background: rgba(234, 179, 8, 0.12); }

.template-activity-preview--orange { background: rgba(249, 115, 22, 0.12); }

.template-activity-preview--red { background: rgba(239, 68, 68, 0.12); }

.template-activity-preview--pink { background: rgba(236, 72, 153, 0.12); }

.template-activity-preview--teal { background: rgba(20, 184, 166, 0.12); }

.template-activity-preview--gray { background: rgba(148, 163, 184, 0.12); }

/* Template Activities List (Detail View) */

.template-activities-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.template-activity-card {
  cursor: grab;
}

.template-activity-card.dragging {
  cursor: grabbing;
  opacity: 0.85;
}

.template-activity-card__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.template-activity-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.template-activity-card__notes {
  margin: 0 0 var(--space-sm);
  color: rgba(255, 255, 255, 0.7);
}

.template-activity-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Color variations for template activity items */

/* Empty State */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.empty-state__message {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(228, 235, 255, 0.8);
  margin-bottom: 0.5rem;
}

.empty-state .muted {
  margin-bottom: 1.5rem;
}

.empty-state .button {
  margin-top: 0.5rem;
}

/* =============================================================================
   Monthly Report Page — Component Styles
   ============================================================================= */

/* Page Container */

.page-canvas--monthly-report {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Page Header */

.page-canvas--monthly-report .page-header {
  margin-bottom: 2rem;
}

.page-canvas--monthly-report .page-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(255, 214, 153, 0.85));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-canvas--monthly-report .page-subtitle {
  color: rgba(228, 235, 255, 0.7);
  font-size: 1.1rem;
}

/* Report Section */

.page-canvas--monthly-report .report-section {
  margin-bottom: 3rem;
}

.page-canvas--monthly-report .section-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
  background: linear-gradient(120deg, rgba(251, 191, 36, 0.92), rgba(255, 214, 153, 0.82));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-canvas--monthly-report .section-subtitle {
  color: rgba(228, 235, 255, 0.6);
  margin-bottom: 1rem;
}

/* Premium Number Display — For YoY and important metrics */

.premium-number {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.1;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.98), rgba(255, 214, 153, 0.88));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Identity Snapshot */

.identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.identity-card {
  background:
    linear-gradient(135deg, rgba(21, 26, 48, 0.95), rgba(16, 20, 52, 0.98)),
    radial-gradient(circle at 60% 40%, rgba(251, 191, 36, 0.08), transparent 65%);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 22px;
  padding: 2rem;
  box-shadow:
    0 20px 45px -30px rgba(15, 28, 92, 0.85),
    inset 0 1px 0 rgba(251, 191, 36, 0.12);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.identity-card:hover {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow:
    0 25px 55px -35px rgba(15, 28, 92, 0.95),
    0 15px 35px -20px rgba(251, 191, 36, 0.35),
    inset 0 1px 0 rgba(251, 191, 36, 0.18);
  transform: translateY(-3px);
}

.identity-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
  background: linear-gradient(120deg, rgba(251, 191, 36, 0.95), rgba(255, 214, 153, 0.85));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.identity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.identity-list li {
  padding: 0.375rem 0;
  color: rgba(228, 235, 255, 0.85);
}

.identity-list li.text-muted {
  color: rgba(228, 235, 255, 0.5);
  font-style: italic;
}

/* Life Area Balance */

.report-section--balance .panel {
  padding: 2rem 2.5rem;
}

.balance-chart {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.balance-bar {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  align-items: center;
  gap: 1rem;
}

.balance-label {
  font-weight: 500;
  color: rgba(228, 235, 255, 0.85);
}

.balance-visual {
  background: rgba(21, 26, 48, 0.6);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  height: 28px;
  overflow: hidden;
  position: relative;
}

.balance-fill {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.85), rgba(255, 214, 153, 0.65));
  height: 100%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.balance-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.balance-value {
  text-align: right;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.95);
}

/* Metrics Grid */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.metrics-list {
  display: grid;
  gap: 0.875rem;
}

.metrics-list dt {
  font-weight: 400;
  color: rgba(228, 235, 255, 0.65);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.metrics-list dd {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
  color: rgba(251, 191, 36, 0.95);
}

/* YoY Comparison */

.yoy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.yoy-metric {
  text-align: center;
  padding: 2rem 1.75rem;
  background:
    linear-gradient(135deg, rgba(21, 26, 48, 0.95), rgba(16, 20, 52, 0.98)),
    radial-gradient(circle at 50% 30%, rgba(251, 191, 36, 0.08), transparent 65%);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 22px;
  box-shadow:
    0 20px 45px -30px rgba(15, 28, 92, 0.85),
    inset 0 1px 0 rgba(251, 191, 36, 0.12);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.yoy-metric:hover {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow:
    0 25px 55px -35px rgba(15, 28, 92, 0.95),
    0 15px 35px -20px rgba(251, 191, 36, 0.35),
    inset 0 1px 0 rgba(251, 191, 36, 0.18);
  transform: translateY(-3px) scale(1.02);
}

.yoy-label {
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: rgba(228, 235, 255, 0.7);
}

.yoy-values {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.yoy-current {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.1;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.98), rgba(255, 214, 153, 0.88));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.yoy-previous {
  color: rgba(228, 235, 255, 0.6);
  font-size: 0.9rem;
}

.yoy-change {
  margin-top: 0.75rem;
  padding: 0.375rem 0.875rem;
  border-radius: 6px;
  font-weight: 600;
  display: inline-block;
}

.yoy-change--up {
  background: rgba(34, 197, 94, 0.2);
  color: rgba(134, 239, 172, 0.95);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.yoy-change--down {
  background: rgba(251, 191, 36, 0.2);
  color: rgba(253, 224, 71, 0.95);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Report Actions */

.page-canvas--monthly-report .report-actions {
  margin-top: 3rem;
  text-align: center;
}

/* Responsive Design */

@media (max-width: 768px) {
  .page-canvas--monthly-report {
    padding: 1.5rem;
  }

  .page-canvas--monthly-report .page-title {
    font-size: 2rem;
  }

  .balance-bar {
    grid-template-columns: 100px 1fr 50px;
    gap: 0.75rem;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .yoy-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .yoy-current {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .page-canvas--monthly-report {
    padding: 1rem;
  }

  .page-canvas--monthly-report .page-title {
    font-size: 1.75rem;
  }

  .balance-bar {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .balance-label {
    font-size: 0.9rem;
  }

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

/* =============================================================================
   Prose Typography — Long-form readable text with premium refinements
   ============================================================================= */

.prose {
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.85;
  letter-spacing: 0.015em;
  color: rgba(245, 246, 255, 0.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.prose p {
  margin-bottom: 1.5em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose p:first-child::first-line {
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0.025em;
  color: rgba(251, 191, 36, 0.95);
}

/* =============================================================================
   Solid Panel Variant — For text-heavy content with high contrast & luxury feel
   ============================================================================= */

.panel--solid {
  background:
    linear-gradient(140deg, rgba(6, 8, 24, 0.99), rgba(8, 10, 28, 1)),
    radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.06), transparent 70%);
  backdrop-filter: blur(6px);
}

/* Monthly report narrative gets special luxury treatment */

.page-canvas--monthly-report .report-section--narrative .panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.45);
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.15),
    inset 0 0 20px rgba(251, 191, 36, 0.04);
  padding: 2.5rem 3rem;
}

@media (max-width: 768px) {
  .page-canvas--monthly-report .report-section--narrative .panel--solid {
    padding: 2rem 1.75rem;
  }
}

/* =============================================================================
   Panel Body — Inner content spacing
   ============================================================================= */

.panel-body {
  /* Inherits panel padding, no additional styles needed for now */
}

/* =============================================================================
   Assessment List Premium Styling — Phase 13.11.5 Week 6-7
   ============================================================================= */

/* Assessment List Base Premium Panels */

.page-canvas--assessments .panel--solid {
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow:
    0 30px 60px -45px rgba(15, 28, 92, 0.95),
    inset 0 1px 0 rgba(251, 191, 36, 0.12),
    inset 0 0 20px rgba(251, 191, 36, 0.03);
  background:
    linear-gradient(140deg, rgba(6, 8, 24, 0.99), rgba(8, 10, 28, 1)),
    radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.06), transparent 70%);
  backdrop-filter: blur(24px);
}

/* Assessment Start Section */

.page-canvas--assessments .assessment-start-section {
  margin-top: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.04), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
}

/* Length Picker (Radio Options) */

.page-canvas--assessments .length-picker {
  border: none;
  margin: 0;
  padding: 0;
}

.page-canvas--assessments .length-picker legend {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.9);
  margin-bottom: 1rem;
  padding: 0;
}

.page-canvas--assessments .length-picker__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.page-canvas--assessments .length-option {
  position: relative;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.page-canvas--assessments .length-option:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.04));
  border-color: rgba(251, 191, 36, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.15);
}

.page-canvas--assessments .length-option input[type="radio"] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: rgba(251, 191, 36, 1);
}

.page-canvas--assessments .length-option input[type="radio"]:checked + .length-option__icon {
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

.page-canvas--assessments .length-option__icon {
  font-size: 2rem;
  transition: filter 0.3s ease;
}

.page-canvas--assessments .length-option__label {
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.9);
}

.page-canvas--assessments .length-option__description {
  font-size: 0.875rem;
  color: rgba(251, 191, 36, 0.6);
  line-height: 1.4;
}

/* Assessment Current Status */

.page-canvas--assessments .assessment-current-status {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.03));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
  text-align: center;
}

.page-canvas--assessments .assessment-current-status .badge {
  margin-bottom: 0.5rem;
}

/* Status Filter Bar */

.page-canvas--assessments .status-filter-bar {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.page-canvas--assessments .status-filter-button {
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
  color: rgba(251, 191, 36, 0.8);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-canvas--assessments .status-filter-button:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.04));
  border-color: rgba(251, 191, 36, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.12);
}

.page-canvas--assessments .status-filter-button.is-active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
  border-color: rgba(251, 191, 36, 0.5);
  color: rgba(251, 191, 36, 1);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.2);
}

.page-canvas--assessments .status-filter-button__count {
  padding: 0.25rem 0.5rem;
  background: rgba(251, 191, 36, 0.15);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 1);
}

/* Assessment Orchestrator Insights */

.page-canvas--assessments .assessment-orchestrator {
  margin-top: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.03));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  position: relative;
}

.page-canvas--assessments .assessment-orchestrator::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), transparent 60%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.6;
}

.page-canvas--assessments .assessment-orchestrator__header {
  margin-bottom: 1rem;
}

.page-canvas--assessments .assessment-orchestrator__header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.95);
  margin-top: 0.5rem;
}

.page-canvas--assessments .assessment-orchestrator__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(251, 191, 36, 0.8);
  margin-bottom: 1.25rem;
}

.page-canvas--assessments .assessment-orchestrator__list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.page-canvas--assessments .assessment-orchestrator__list li {
  padding: 0.75rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid rgba(251, 191, 36, 0.3);
  color: rgba(251, 191, 36, 0.75);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.page-canvas--assessments .assessment-orchestrator__facts {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 0.7);
}

/* Assessment Archive Table */

.page-canvas--assessments .assessment-table-wrapper {
  margin-top: 2rem;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.page-canvas--assessments .assessment-table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.02), rgba(251, 191, 36, 0.01));
}

.page-canvas--assessments .assessment-table thead {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.03));
  border-bottom: 2px solid rgba(251, 191, 36, 0.3);
}

.page-canvas--assessments .assessment-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.page-canvas--assessments .assessment-table tbody tr {
  border-bottom: 1px solid rgba(251, 191, 36, 0.15);
  transition: all 0.2s ease;
}

.page-canvas--assessments .assessment-table tbody tr:hover {
  background: rgba(251, 191, 36, 0.04);
}

.page-canvas--assessments .assessment-table td {
  padding: 1rem 1.25rem;
  color: rgba(251, 191, 36, 0.75);
  font-size: 0.9375rem;
  vertical-align: middle;
}

.page-canvas--assessments .assessment-table__title {
  color: rgba(251, 191, 36, 0.9);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.page-canvas--assessments .assessment-table__title:hover {
  color: rgba(251, 191, 36, 1);
  text-decoration: underline;
}

.page-canvas--assessments .assessment-table__count {
  padding: 0.25rem 0.75rem;
  background: rgba(251, 191, 36, 0.15);
  border-radius: 6px;
  font-weight: 600;
  color: rgba(251, 191, 36, 1);
  font-size: 0.875rem;
}

.page-canvas--assessments .assessment-table__summary-text {
  color: rgba(251, 191, 36, 0.7);
  line-height: 1.5;
}

.page-canvas--assessments .assessment-table__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Sortable Headers */

.page-canvas--assessments .sortable-header {
  position: relative;
}

.page-canvas--assessments .sortable-header__link {
  color: rgba(251, 191, 36, 0.9);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

.page-canvas--assessments .sortable-header__link:hover {
  color: rgba(251, 191, 36, 1);
}

.page-canvas--assessments .sortable-header.is-sorted .sortable-header__link {
  color: rgba(251, 191, 36, 1);
}

.page-canvas--assessments .sortable-header__icon::before {
  content: '⇅';
  font-size: 0.75rem;
  opacity: 0.5;
}

.page-canvas--assessments .sortable-header.is-sorted.is-sorted--asc .sortable-header__icon::before {
  content: '↑';
  opacity: 1;
}

.page-canvas--assessments .sortable-header.is-sorted.is-sorted--desc .sortable-header__icon::before {
  content: '↓';
  opacity: 1;
}

/* Badge Status Variants */

.page-canvas--assessments .badge-status {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.page-canvas--assessments .badge-status--draft {
  background: rgba(251, 191, 36, 0.15);
  color: rgba(251, 191, 36, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.page-canvas--assessments .badge-status--in_progress {
  background: rgba(59, 130, 246, 0.15);
  color: rgba(59, 130, 246, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.page-canvas--assessments .badge-status--completed {
  background: rgba(34, 197, 94, 0.15);
  color: rgba(34, 197, 94, 0.9);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Pagination */

.page-canvas--assessments .pagination {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.04), rgba(251, 191, 36, 0.02));
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-canvas--assessments .pagination__info {
  color: rgba(251, 191, 36, 0.7);
  font-size: 0.9375rem;
}

.page-canvas--assessments .pagination__controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.page-canvas--assessments .pagination__button {
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 6px;
  color: rgba(251, 191, 36, 0.9);
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.page-canvas--assessments .pagination__button:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06));
  border-color: rgba(251, 191, 36, 0.4);
  color: rgba(251, 191, 36, 1);
}

.page-canvas--assessments .pagination__button--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.page-canvas--assessments .pagination__current {
  padding: 0.5rem 1rem;
  color: rgba(251, 191, 36, 0.9);
  font-weight: 500;
}

/* Responsive Design */

@media (max-width: 768px) {
  .page-canvas--assessments .length-picker__options {
    grid-template-columns: 1fr;
  }

  .page-canvas--assessments .status-filter-bar {
    flex-direction: column;
  }

  .page-canvas--assessments .assessment-table-wrapper {
    border-radius: 0;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .page-canvas--assessments .assessment-table thead {
    display: none;
  }

  .page-canvas--assessments .assessment-table tbody tr {
    display: block;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: rgba(251, 191, 36, 0.04);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
  }

  .page-canvas--assessments .assessment-table td {
    display: block;
    padding: 0.5rem 0;
    text-align: left;
    border: none;
  }

  .page-canvas--assessments .assessment-table td::before {
    content: attr(data-column-label);
    display: block;
    font-weight: 600;
    color: rgba(251, 191, 36, 0.9);
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .page-canvas--assessments .pagination {
    flex-direction: column;
  }
}

/* =============================================================================
   Note Detail Content Readability Improvements
   ============================================================================= */

/* Improve readability for long note content */

.note-content__text.prose {
  max-width: 65ch; /* Optimal line length for reading */
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(251, 191, 36, 0.85);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.note-content__text.prose p {
  margin-bottom: 1.25rem;
  line-height: 1.8;
}

.note-content__text.prose p:last-child {
  margin-bottom: 0;
}

/* Better spacing for long content */

.note-content.aura-panel.panel--solid {
  padding: 3rem 2rem;
}

@media (max-width: 768px) {
  .note-content__text.prose {
    max-width: 100%;
    font-size: 1rem;
  }

  .note-content.aura-panel.panel--solid {
    padding: 2rem 1.5rem;
  }
}

/* =============================================================================
   Dashboard hero + generative experiences
   ============================================================================= */

.page-canvas--dashboard {
  --hero-primary: #6c63ff;
  --hero-secondary: #d946ef;
  --hero-accent: #fcd34d;
  --hero-shadow: #1e1b4b;
}

.page-canvas--dashboard[data-mood-palette="aurora"] {
  --hero-primary: #0ea5e9;
  --hero-secondary: #14b8a6;
  --hero-accent: #f472b6;
  --hero-shadow: #082f49;
}

.page-canvas--dashboard[data-mood-palette="nocturne"] {
  --hero-primary: #1d1b84;
  --hero-secondary: #9333ea;
  --hero-accent: #fbbf24;
  --hero-shadow: #020617;
}

.page-canvas--dashboard[data-mood-palette="pioneer"] {
  --hero-primary: #f97316;
  --hero-secondary: #0ea5e9;
  --hero-accent: #e11d48;
  --hero-shadow: #1f172a;
}

.page-canvas--dashboard[data-mood-palette="calm-current"] {
  --hero-primary: #4ade80;
  --hero-secondary: #a78bfa;
  --hero-accent: #fcd34d;
  --hero-shadow: #022c22;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 2rem;
  align-items: stretch;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}

.dashboard-hero__art {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  min-height: 320px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.dashboard-hero__art img,
.dashboard-hero__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.dashboard-hero__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.1), transparent),
    var(--hero-shadow);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.dashboard-hero__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dashboard-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--hero-accent);
}

.dashboard-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.palette-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.palette-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  font-size: 0.85rem;
  color: inherit;
}

.palette-chip.is-active {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.18);
}

.palette-chip__preview {
  width: 1.6rem;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--palette-primary), var(--palette-secondary));
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.palette-chip--surprise {
  border-style: dashed;
}

.dashboard-postcards__header,
.plan-snapshots__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.postcard-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.postcard-card {
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.postcard-card img {
  border-radius: 0.75rem;
  width: 100%;
  height: 160px;
  -o-object-fit: cover;
     object-fit: cover;
}

.postcard-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan-snapshots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.plan-snapshot-card {
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.plan-snapshot-card img {
  width: 100%;
  height: 190px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.plan-snapshot-card__meta {
  padding: 0.75rem 1rem 1rem;
}

.creative-action-card--voiceboard {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(59, 130, 246, 0.15));
}

.voiceboard-page {
  display: grid;
  gap: 1.5rem;
}

.voiceboard-hero__header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.voiceboard-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.voiceboard-summary__metric {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.voiceboard-summary__value {
  font-size: 1.5rem;
  font-weight: 600;
}

.voiceboard-summary__label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.voiceboard-capture {
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1rem;
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}

.voiceboard-capture__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.voiceboard-capture__field label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.voiceboard-capture__field input {
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  padding: 0.65rem 0.85rem;
}

.voiceboard-capture__field input:focus {
  outline: 2px solid rgba(59, 130, 246, 0.45);
  outline-offset: 1px;
}

.voiceboard-capture--disabled {
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1rem;
  padding: 1.25rem;
}

.voiceboard-filters__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.voiceboard-filters__stats {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.voiceboard-filters__pill {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
}

.voiceboard-filters__chips {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.voiceboard-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.voiceboard-filter-chip:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.voiceboard-filter-chip.is-active {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.55);
}

.voiceboard-filter-chip__count {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

.voiceboard-filters__empty {
  margin: 0.5rem 0 0;
}

.voiceboard-history__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.voiceboard-entry__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: space-between;
}

.voiceboard-entry__title {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.voiceboard-entry__tag {
  font-size: 0.85rem;
  color: rgba(59, 130, 246, 0.85);
  background: rgba(59, 130, 246, 0.18);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

.voiceboard-entry__meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

.voiceboard-entry__duration {
  font-variant-numeric: tabular-nums;
}

.voiceboard-entry__status {
  margin-top: 0.65rem;
  font-size: 0.9rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.voiceboard-entry__status--queued,
.voiceboard-entry__status--pending {
  color: rgba(251, 191, 36, 0.9);
}

.voiceboard-entry__status--running,
.voiceboard-entry__status--active {
  color: rgba(96, 165, 250, 0.95);
}

.voiceboard-entry__status--ready {
  color: rgba(52, 211, 153, 0.95);
}

.voiceboard-entry__status--failed,
.voiceboard-entry__status--error {
  color: rgba(248, 113, 113, 0.95);
}

.voiceboard-entry__status-detail {
  color: rgba(255, 255, 255, 0.7);
}

.voiceboard-entry__link {
  display: inline-flex;
  margin-top: 0.75rem;
  color: #fcd34d;
}

.voiceboard-entry__link:hover {
  text-decoration: underline;
}

.voiceboard-entry--empty {
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  padding: 1.5rem 0;
}

@media (min-width: 900px) {
  .voiceboard-hero__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 900px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-hero__art {
    min-height: 260px;
  }
}

.scene-card__remix {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
}

.scene-card__remix label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.scene-card__remix select {
  margin-top: 0.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  color: inherit;
  padding: 0.35rem 0.5rem;
}

.voiceboard__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.voiceboard-entry {
  padding: 0.75rem 0 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.voiceboard-entry.is-highlighted {
  padding: 0.75rem 0.75rem 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(118, 64, 217, 0.16), rgba(199, 255, 95, 0.08));
  box-shadow:
    0 0 0 1px rgba(199, 255, 95, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.35);
  border-bottom-color: rgba(199, 255, 95, 0.22);
}

.voiceboard-entry__media {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(118, 64, 217, 0.14), rgba(199, 255, 95, 0.12));
  aspect-ratio: 4 / 5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.voiceboard-entry__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.voiceboard-entry__meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: baseline;
}

.voiceboard-entry__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.voiceboard-entry__text {
  margin: 0.35rem 0 0;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.voiceboard-entry__text.is-clamped {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--voiceboard-max-lines, 3);
  -webkit-box-orient: vertical;
}

.voiceboard-entry__text.is-expanded {
  display: block;
}

.voiceboard-entry__toggle {
  align-self: flex-start;
  background: none;
  border: none;
  color: #cfe2ff;
  padding: 0;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: underline;
}

.voiceboard-entry__toggle:hover,
.voiceboard-entry__toggle:focus-visible {
  color: #ffffff;
}

.voiceboard__feed-status {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
}

.voiceboard__feed-status--error {
  color: #f87171;
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

@media (min-width: 768px) {

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}