/* P10NG: final interaction layer for global nav and workspace rails. */

[data-workspace-module-nav][hidden] {
  display: none !important;
}

.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: rgba(238, 242, 250, 0.64) !important;
  cursor: pointer !important;
  position: relative !important;
  text-decoration: none !important;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    text-shadow 160ms ease !important;
}

.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::before {
  content: none !important;
  display: none !important;
}

.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus-visible::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:active::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected)::after {
  background: #a855f7 !important;
  border-radius: 999px !important;
  bottom: -0.16rem !important;
  box-shadow: none !important;
  content: "" !important;
  display: block !important;
  height: 1px !important;
  left: 50% !important;
  opacity: 0 !important;
  position: absolute !important;
  right: auto !important;
  transform: translateX(-50%) scaleX(0.72) !important;
  transform-origin: center !important;
  width: 1.8rem !important;
}

.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected),
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(250, 252, 255, 0.98) !important;
  text-shadow: none !important;
  transform: none !important;
}

.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(250, 252, 255, 0.98) !important;
}

.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected.is-hover-preview {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(250, 252, 255, 1) !important;
}

.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:active::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected.is-hover-preview::after {
  opacity: 1 !important;
  transform: translateX(-50%) scaleX(1) !important;
}

body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button {
  border-radius: 12px !important;
  width: 100% !important;
}

body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus-visible::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:active::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected)::after {
  bottom: 0.34rem !important;
  left: 0.82rem !important;
  opacity: 0 !important;
  right: auto !important;
  transform: scaleX(0.72) !important;
  transform-origin: left center !important;
  width: 1.65rem !important;
}

body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:active::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected.is-hover-preview::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

.organize-workspace-shell .organize-nav-item:hover,
.organize-workspace-shell .organize-nav-item:focus-visible,
.organize-workspace-shell .organize-nav-item.is-hover-preview,
.organize-workspace-shell .organize-nav-item.is-selected,
.preferences-screen .preferences-sidebar button:hover,
.preferences-screen .preferences-sidebar button:focus-visible,
.preferences-screen .preferences-sidebar button.is-hover-preview,
.preferences-screen .preferences-sidebar button.is-selected,
.preferences-screen .preferences-nav button:hover,
.preferences-screen .preferences-nav button:focus-visible,
.preferences-screen .preferences-nav button.is-hover-preview,
.preferences-screen .preferences-nav button.is-selected {
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.24), rgba(56, 189, 248, 0.10)) !important;
  border-radius: 999px !important;
  border-color: rgba(196, 181, 253, 0.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 22px rgba(168, 85, 247, 0.17) !important;
  color: rgba(250, 252, 255, 0.98) !important;
  text-decoration: none !important;
  text-shadow: 0 0 14px rgba(196, 181, 253, 0.18) !important;
  transform: none !important;
}

.organize-workspace-shell .organize-nav-item,
.preferences-screen .preferences-sidebar button,
.preferences-screen .preferences-nav button {
  border-radius: 999px !important;
}

body .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item,
body .app-shell .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav > button.organize-nav-item,
body .app-shell .organize-workspace-shell.is-modern-drills-workspace .organize-workspace-nav > button.organize-nav-item,
body .app-shell .organize-workspace-shell.is-modern-songs-workspace .organize-workspace-nav > button.organize-nav-item,
body .app-shell .organize-workspace-shell.is-modern-solos-workspace .organize-workspace-nav > button.organize-nav-item,
body .app-shell .organize-workspace-shell.is-modern-activities-workspace .organize-workspace-nav > button.organize-nav-item {
  border-radius: 999px !important;
  overflow: hidden !important;
}

body .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item:hover,
body .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item:focus-visible,
body .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item.is-hover-preview,
body .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item.is-selected {
  border-radius: 999px !important;
}

body .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item::before,
body .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item::after {
  border-radius: inherit !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item,
body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-drills-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item,
body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-songs-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item,
body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-solos-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item,
body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-activities-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item,
body:has(.organize-workspace-shell:not([hidden])) .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item.organize-nav-item {
  border-radius: 999px !important;
  border-top-left-radius: 999px !important;
  border-top-right-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
  border-bottom-left-radius: 999px !important;
  overflow: hidden !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item:hover,
body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item:focus-visible,
body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item.is-hover-preview,
body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item.is-selected,
body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-drills-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item:hover,
body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-drills-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item:focus-visible,
body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-drills-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item.is-hover-preview,
body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-drills-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item.is-selected,
body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-songs-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item:hover,
body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-songs-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item:focus-visible,
body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-songs-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item.is-hover-preview,
body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-songs-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item.is-selected,
body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-solos-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item:hover,
body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-solos-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item:focus-visible,
body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-solos-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item.is-hover-preview,
body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-solos-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item.is-selected,
body:has(.organize-workspace-shell:not([hidden])) .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item.organize-nav-item:hover,
body:has(.organize-workspace-shell:not([hidden])) .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item.organize-nav-item:focus-visible,
body:has(.organize-workspace-shell:not([hidden])) .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item.organize-nav-item.is-hover-preview,
body:has(.organize-workspace-shell:not([hidden])) .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item.organize-nav-item.is-selected {
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.24), rgba(56, 189, 248, 0.10)) !important;
  border-color: rgba(196, 181, 253, 0.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 22px rgba(168, 85, 247, 0.17) !important;
}

body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item::before,
body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-shell .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav > button.organize-nav-item.organize-nav-item::after,
body:has(.organize-workspace-shell:not([hidden])) .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item.organize-nav-item::before,
body:has(.organize-workspace-shell:not([hidden])) .app-shell .organize-workspace-shell .organize-workspace-nav > button.organize-nav-item.organize-nav-item::after {
  border-radius: 999px !important;
  border-top-left-radius: 999px !important;
  border-top-right-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
  border-bottom-left-radius: 999px !important;
}

/* P10NX: restore centered, responsive hover language for the top banner nav. */
@media (min-width: 761px) {
  body:not([data-current-screen="dashboard"]) .app-shell header.app-header.header-with-nav {
    grid-template-columns: minmax(15rem, 1fr) auto minmax(15rem, 1fr) !important;
    position: relative !important;
  }

  body:not([data-current-screen="dashboard"]) .app-shell header.app-header.header-with-nav > .brand-block {
    justify-self: start !important;
  }

  body:not([data-current-screen="dashboard"]) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    gap: clamp(1.28rem, 1.9vw, 1.75rem) !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-content: center !important;
    justify-self: center !important;
    left: 50% !important;
    margin-inline: auto !important;
    overflow: visible !important;
    padding-top: 0 !important;
    position: absolute !important;
    text-align: center !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    z-index: 3 !important;
  }

  body:not([data-current-screen="dashboard"]) .app-shell header.app-header.header-with-nav > .header-utility-bar {
    justify-self: end !important;
  }

  body:not([data-current-screen="dashboard"]) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected) {
  background:
    radial-gradient(circle at 50% 10%, rgba(196, 181, 253, 0.14), transparent 68%),
    linear-gradient(135deg, rgba(168, 85, 247, 0.10), rgba(56, 189, 248, 0.045)) !important;
  border-color: rgba(196, 181, 253, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 28px rgba(91, 33, 182, 0.12) !important;
  color: rgba(255, 255, 255, 0.98) !important;
}

.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible::after,
.app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected)::after {
  opacity: 0.72 !important;
  transform: translateX(-50%) scaleX(0.92) !important;
}

body[data-current-screen="dashboard"] .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover,
body[data-current-screen="dashboard"] .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible,
body[data-current-screen="dashboard"] .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected) {
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(56, 189, 248, 0.055)) !important;
  border-color: rgba(196, 181, 253, 0.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 20px rgba(168, 85, 247, 0.10) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

body[data-current-screen="dashboard"] .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover::after,
body[data-current-screen="dashboard"] .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible::after,
body[data-current-screen="dashboard"] .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected)::after {
  left: 1.22rem !important;
  opacity: 0.76 !important;
  transform: scaleX(0.92) !important;
  transform-origin: left center !important;
}

/* P10NX: Practice rail hover underlines must preview the destination, not disappear. */
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible::after,
body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected)::after,
body[data-current-screen="dashboard"]:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover::after,
body[data-current-screen="dashboard"]:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible::after,
body[data-current-screen="dashboard"]:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected)::after {
  background: #a855f7 !important;
  border-radius: 999px !important;
  bottom: 0.34rem !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.48) !important;
  content: "" !important;
  display: block !important;
  height: 1px !important;
  left: 1.18rem !important;
  opacity: 0.82 !important;
  position: absolute !important;
  right: auto !important;
  transform: none !important;
  transform-origin: left center !important;
  width: 1.82rem !important;
}

/* Phase 1 global readability pass: contrast, type hierarchy, card boundaries, search visibility. */
:root {
  --muted: #4f5f76;
  --border: #c7cfdd;
  --border-soft: rgba(79, 95, 118, 0.32);
  --shadow: 0 12px 32px rgba(20, 30, 50, 0.11);
  --shadow-soft: 0 9px 24px rgba(20, 30, 50, 0.09);
  --zb-readable-dark-text: rgba(248, 250, 252, 0.97);
  --zb-readable-dark-muted: rgba(218, 229, 244, 0.86);
  --zb-readable-dark-soft: rgba(201, 214, 234, 0.78);
  --zb-readable-dark-border: rgba(166, 185, 216, 0.26);
  --zb-readable-light-muted: #526178;
  --zb-readable-light-soft: #5d6c83;
  --zb-readable-light-border: rgba(91, 109, 134, 0.34);
}

html body {
  color: #141d2e;
}

html body :is(p, li, dd, .description, .section-note, .subtitle, .status) {
  line-height: 1.48;
}

html body :is(
  .subtitle,
  .section-note,
  .status,
  .record-meta,
  .queue-item,
  .empty-state,
  .guidance-modal-message,
  .overview-card p,
  .tool-launcher-note,
  .current-item-notes-helper,
  .field.is-deemphasized,
  .modal-intro,
  .speech-field-hint
) {
  color: var(--zb-readable-light-muted) !important;
}

html body :is(
  .record-card small,
  .activity-log-item small,
  .summary-pill,
  .type-badge,
  .mini-badge,
  .build-chip,
  .badge-archived,
  .queue-item-type
) {
  color: var(--zb-readable-light-soft) !important;
}

html body :is(
  .screen-title,
  .section-header h2,
  .section-header h3,
  .section-header h4,
  .card > h2,
  .card > h3,
  .queue-heading h3,
  .queue-title-row h3,
  .current-item h3,
  .tool-card-header h3,
  .modal-header h2,
  .catalog-section-heading h4,
  .catalog-browser-header strong,
  .modal-catalog-lookup-header strong
) {
  color: #111827 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html body :is(.section-header h2, .section-header h3, .section-header h4, .queue-heading h3, .queue-title-row h3) {
  font-size: clamp(1rem, 1.1vw, 1.18rem) !important;
}

html body :is(
  .card,
  .current-item,
  .record-card,
  .activity-log-item,
  .empty-state,
  .modal-card,
  .dashboard-mode-bar,
  .dashboard-tool-launcher,
  .queue-panel,
  .main-queue-panel,
  .current-item-notes-box,
  .current-item-references-box,
  .metronome-card,
  .timer-strip,
  .compact-countdown-card
) {
  border-color: var(--zb-readable-light-border) !important;
  box-shadow: var(--shadow-soft) !important;
}

html body :is(input, textarea, select) {
  border-color: rgba(91, 109, 134, 0.38) !important;
  color: #172033 !important;
}

html body :is(input, textarea)::placeholder {
  color: #5d6c83 !important;
  opacity: 1 !important;
}

html body :is(input, textarea, select):focus,
html body :is(input, textarea, select):focus-visible {
  border-color: rgba(31, 94, 255, 0.56) !important;
  box-shadow: 0 0 0 3px rgba(31, 94, 255, 0.16) !important;
  outline: none !important;
}

html body input[type="search"],
html body :is(
  .organize-catalog-search,
  .catalog-browser-search,
  .catalog-attach-drawer-search,
  .organize-drills-search,
  .organize-songs-search,
  .organize-solos-search,
  .organize-activities-search,
  .organize-custom-source-search,
  .quick-start-controls
) input {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(80, 98, 126, 0.46) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(20, 30, 50, 0.08) !important;
  color: #111827 !important;
  font-weight: 650 !important;
}

html body input[type="search"]::placeholder {
  color: #526178 !important;
  opacity: 1 !important;
}

html body :is(.secondary-button, .filter-button, .ghost-button, .type-tab, .dashboard-mode-button) {
  border: 1px solid rgba(71, 89, 116, 0.22) !important;
  color: #2149b7 !important;
  font-weight: 600 !important;
}

html body :is(.secondary-button, .filter-button, .ghost-button, .type-tab, .dashboard-mode-button):not(.is-selected):not(:disabled) {
  background: rgba(238, 243, 255, 0.96) !important;
}

html body :is(.secondary-button, .filter-button, .ghost-button, .type-tab, .dashboard-mode-button):not(.is-selected):hover,
html body :is(.secondary-button, .filter-button, .ghost-button, .type-tab, .dashboard-mode-button):not(.is-selected):focus-visible {
  border-color: rgba(31, 94, 255, 0.34) !important;
  color: #1748c6 !important;
}

html body :is(button:disabled, .secondary-button:disabled, .filter-button:disabled) {
  opacity: 0.66 !important;
}

html body :is(
  .organize-workspace-shell,
  .organize-catalog-workspace,
  .organize-goals-modern-workspace,
  .organize-drills-modern-workspace,
  .organize-songs-modern-workspace,
  .organize-solos-modern-workspace,
  .organize-activities-modern-workspace,
  .organize-schedules-workspace,
  .catalog-attach-workspace,
  .catalog-media-expanded,
  .toolbox-screen,
  .toolbox-floating-body,
  .practice-dashboard,
  .practice-map-workspace,
  .settings-screen,
  .preferences-screen,
  .zb-practice-v2-screen,
  .alpha-access-card,
  .text-cleanup-card,
  .importzone-screen,
  .creativezone-placeholder
) :is(
  p,
  small,
  em,
  .subtitle,
  .section-note,
  .description,
  .status,
  .eyebrow,
  .tool-card-note,
  .queue-helper,
  .queue-status-text,
  .catalog-row-copy small,
  .catalog-row-meta,
  .catalog-viewer-meta,
  .catalog-entry-identity-line,
  .catalog-title-kicker,
  .catalog-record-reference-empty,
  .catalog-record-details dt,
  .catalog-record-details summary small,
  .practice-map-pan-hint,
  .practice-map-card-copy em,
  .teacher-report-muted,
  .teacher-report-empty,
  .zb-pv2-version-pill
) {
  color: var(--zb-readable-dark-muted) !important;
}

html body :is(
  .organize-workspace-shell,
  .organize-catalog-workspace,
  .organize-goals-modern-workspace,
  .organize-drills-modern-workspace,
  .organize-songs-modern-workspace,
  .organize-solos-modern-workspace,
  .organize-activities-modern-workspace,
  .organize-schedules-workspace,
  .toolbox-screen,
  .toolbox-floating-body,
  .practice-dashboard,
  .practice-map-workspace,
  .settings-screen,
  .preferences-screen,
  .zb-practice-v2-screen,
  .importzone-screen
) :is(
  h2,
  h3,
  h4,
  strong,
  .screen-title,
  .section-header h2,
  .section-header h3,
  .catalog-section-heading h4,
  .catalog-browser-header strong,
  .queue-heading h3,
  .queue-title-row h3,
  .tool-card-header h3,
  .p03i-timing-title,
  .reference-box-header strong,
  .zb-pv2-tool-title,
  .zb-pv2-workspace-title
) {
  color: var(--zb-readable-dark-text) !important;
  font-weight: 680 !important;
}

html body :is(
  .organize-goal-modern-copy strong,
  .organize-drill-modern-title strong,
  .organize-song-modern-title strong,
  .organize-solo-modern-title strong,
  .organize-activity-modern-title strong,
  .organize-catalog-row strong,
  .catalog-viewer-header h3,
  .catalog-record-attached-reference strong,
  .catalog-record-reference-result strong,
  .catalog-attach-target-copy strong,
  .schedule-builder-block-card strong,
  .schedule-builder-item-expand strong,
  .schedule-builder-block-item-copy strong,
  .schedule-builder-practice-block-detail > summary strong,
  .queue-item-title,
  #currentItemName,
  .practice-focus-card h3,
  .practice-queue-current-schedule > strong,
  .practice-map-card strong,
  .practice-map-side-card strong
) {
  color: var(--zb-readable-dark-text) !important;
  font-weight: 660 !important;
}

html body :is(
  .organize-goal-modern-copy small,
  .organize-goal-modern-links,
  .organize-drill-modern-title small,
  .organize-song-modern-title small,
  .organize-song-modern-source,
  .organize-song-modern-linked small,
  .organize-solo-modern-title small,
  .organize-activity-modern-title small,
  .organize-drill-modern-frequency em,
  .organize-drill-modern-linked em,
  .organize-song-modern-linked em,
  .organize-song-modern-practiced em,
  .organize-solo-modern-linked em,
  .organize-solo-modern-practiced em,
  .organize-activity-modern-frequency em,
  .organize-activity-modern-linked em,
  .organize-activity-modern-engaged em,
  .catalog-row-copy small,
  .catalog-row-meta em,
  .catalog-row-link-count,
  .catalog-viewer-meta span,
  .catalog-record-details dd,
  .catalog-linked-item-list small,
  .catalog-attach-target-copy small,
  .catalog-attach-target-copy em,
  .schedule-builder-item-expand small,
  .schedule-builder-item-expand em,
  .schedule-builder-block-item-copy small,
  .schedule-builder-block-item-copy em,
  .schedule-builder-practice-block-detail > summary small,
  .schedule-builder-practice-block-detail > summary em,
  .schedule-builder-practice-block-generated-items li > span small,
  .queue-item-type,
  #currentItemMeta,
  .practice-focus-card .description,
  .current-item-context-preview-block span,
  .current-item-instructions-panel summary small,
  .reference-row-mock span,
  .quick-record-status,
  .p10ex-metro-kicker,
  .practice-rail-mini small,
  .practice-rail-week-time,
  .practice-queue-current-schedule > small,
  .practice-queue-available-schedules small,
  .practice-queue-available-schedules p,
  .practice-map-card small,
  .practice-map-side-card p
) {
  color: var(--zb-readable-dark-soft) !important;
}

html body :is(
  .organize-goals-list-panel,
  .organize-drills-list-panel,
  .organize-songs-list-panel,
  .organize-solos-list-panel,
  .organize-activities-list-panel,
  .organize-goal-modern-row,
  .organize-drill-modern-row,
  .organize-song-modern-row,
  .organize-solo-modern-row,
  .organize-activity-modern-row,
  .organize-catalog-browser,
  .organize-catalog-viewer,
  .catalog-viewer-card,
  .catalog-record-details,
  .catalog-linked-goals-section,
  .catalog-goal-linked-items-section,
  .catalog-linked-item-list article,
  .catalog-record-attached-reference,
  .catalog-record-reference-result,
  .catalog-record-attach-existing,
  .catalog-record-reference-filters,
  .catalog-record-reference-results,
  .catalog-linked-group,
  .catalog-attach-panel,
  .catalog-attach-drawer,
  .catalog-attach-picker-row,
  .catalog-media-expanded-panel,
  .catalog-rich-text-viewer,
  .catalog-primary-reference,
  .catalog-links-found,
  .schedule-builder-preview-main,
  .schedule-builder-preview-side-panel,
  .schedule-builder-preview-upcoming,
  .schedule-builder-preview-upcoming article,
  .schedule-builder-practice-block-detail,
  .schedule-builder-item-explanation,
  .schedule-builder-block-card,
  .schedule-builder-block-item-row,
  .schedule-builder-item-expanded,
  .practice-tool-card,
  .practice-companion-grid,
  .practice-queue-card,
  .practice-rail-mini,
  .practice-queue-current-schedule,
  .practice-queue-available-schedules,
  .current-item-references-box,
  .current-item-notes-box,
  .toolbox-rail,
  .toolbox-stage,
  .toolbox-screen .advanced-tool-card,
  .toolbox-floating-body .advanced-tool-card,
  .practice-map-side-card,
  .practice-map-goal-card,
  .practice-map-card,
  .practice-map-unlinked-list article,
  .teacher-report-stat,
  .teacher-report-section,
  .teacher-report-recording-card,
  .teacher-report-row,
  .zb-pv2-progress-card,
  .zb-pv2-header,
  .zb-pv2-workspace,
  .zb-pv2-actions,
  .zb-pv2-tool-card,
  .zb-pv2-references,
  .zb-pv2-schedule,
  .importzone-input-panel,
  .importzone-preview-panel,
  .importzone-actions-panel,
  .importzone-destination-card
) {
  border-color: var(--zb-readable-dark-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 44px rgba(0, 0, 0, 0.24) !important;
}

html body :is(
  .organize-catalog-workspace,
  .organize-workspace-shell,
  .organize-schedules-workspace,
  .toolbox-screen,
  .toolbox-floating-body,
  .practice-dashboard,
  .practice-map-workspace,
  .settings-screen,
  .preferences-screen,
  .zb-practice-v2-screen,
  .importzone-screen,
  .alpha-access-card,
  .text-cleanup-card
) :is(input, textarea, select) {
  background: rgba(3, 10, 22, 0.84) !important;
  border-color: rgba(166, 185, 216, 0.34) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
  color: #f8fbff !important;
}

html body :is(
  .organize-catalog-workspace,
  .organize-workspace-shell,
  .organize-schedules-workspace,
  .toolbox-screen,
  .toolbox-floating-body,
  .practice-dashboard,
  .practice-map-workspace,
  .settings-screen,
  .preferences-screen,
  .zb-practice-v2-screen,
  .importzone-screen,
  .alpha-access-card,
  .text-cleanup-card
) :is(input, textarea)::placeholder {
  color: rgba(220, 229, 245, 0.72) !important;
  opacity: 1 !important;
}

html body :is(
  .organize-catalog-workspace,
  .organize-workspace-shell,
  .organize-schedules-workspace,
  .catalog-attach-drawer,
  .toolbox-screen,
  .toolbox-floating-body,
  .practice-dashboard,
  .practice-map-workspace,
  .zb-practice-v2-screen,
  .importzone-screen
) :is(input[type="search"], label[class*="search"] input, [data-schedule-builder-picker-search]) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.11), transparent 8rem),
    rgba(5, 16, 31, 0.96) !important;
  border-color: rgba(125, 211, 252, 0.44) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 0 0 1px rgba(45, 212, 191, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.18) !important;
  color: #f8fbff !important;
  font-weight: 500 !important;
}

html body :is(
  .organize-catalog-workspace,
  .organize-workspace-shell,
  .organize-schedules-workspace,
  .catalog-attach-drawer,
  .toolbox-screen,
  .toolbox-floating-body,
  .practice-dashboard,
  .practice-map-workspace,
  .zb-practice-v2-screen,
  .importzone-screen
) :is(input[type="search"], label[class*="search"] input, [data-schedule-builder-picker-search])::placeholder {
  color: rgba(225, 237, 252, 0.74) !important;
}

html body :is(
  .organize-drills-filter-bar label span,
  .organize-songs-filter-bar label span,
  .organize-solos-filter-bar label span,
  .organize-activities-filter-bar label span,
  .organize-catalog-tools label span,
  .catalog-browser-search span,
  .catalog-attach-drawer-search span,
  .catalog-record-reference-filters label span,
  .catalog-attach-drawer-filters label span,
  .organize-custom-source-controls label span,
  .schedule-builder-picker-filter label span,
  .schedule-builder-lane-control span,
  .catalog-add-flow label span,
  .catalog-add-section-label
) {
  color: rgba(226, 238, 250, 0.82) !important;
  font-weight: 600 !important;
}

html body :is(
  .organize-drills-filter-bar,
  .organize-songs-filter-bar,
  .organize-solos-filter-bar,
  .organize-activities-filter-bar,
  .catalog-workspace-controls,
  .catalog-filter-toolbox-row,
  .catalog-record-reference-filters,
  .catalog-attach-drawer-filters,
  .organize-custom-source-controls
) {
  border-color: rgba(166, 185, 216, 0.24) !important;
}

html body :is(
  .organize-catalog-workspace,
  .organize-workspace-shell,
  .organize-schedules-workspace,
  .toolbox-screen,
  .toolbox-floating-body,
  .practice-dashboard,
  .practice-map-workspace,
  .settings-screen,
  .preferences-screen,
  .zb-practice-v2-screen,
  .importzone-screen
) :is(
  .secondary-button,
  .filter-button,
  .ghost-button,
  .catalog-unified-filter-rail button:not(.is-selected),
  .catalog-attach-type-tabs button:not(.is-selected),
  .catalog-open-attach-picker,
  .catalog-attach-target,
  .catalog-attach-edit-target,
  .organize-goal-modern-edit,
  .organize-modern-row-delete,
  .schedule-builder-preview-nav-button,
  .schedule-builder-block-more,
  .schedule-builder-item-expand,
  .desktop-queue-toggle,
  .mobile-queue-toggle,
  .queue-start-now-button,
  .practice-rail-settings-button,
  .alpha-feedback-button.is-rail-feedback-button,
  .zb-pv2-utility-button,
  .zb-pv2-progress-card button
) {
  border-color: rgba(166, 185, 216, 0.32) !important;
  color: rgba(244, 248, 255, 0.94) !important;
  font-weight: 600 !important;
}

html body :is(.catalog-unified-filter-rail button:not(.is-selected), .catalog-attach-type-tabs button:not(.is-selected)) {
  background: rgba(15, 23, 42, 0.62) !important;
}

body:has(.practice-dashboard:not([hidden])) #pwaUpdateStatus.pwa-update-status.is-rail-update-status #pwaUpdateMessage {
  color: rgba(218, 229, 244, 0.74) !important;
}

html body :is(.app-nav-button:not(.is-selected), .organize-nav-item:not(.is-selected), .preferences-sidebar button:not(.is-selected), .preferences-nav button:not(.is-selected)) {
  color: rgba(238, 242, 250, 0.76) !important;
  font-weight: 560 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(
  .zb-pv2-actions button,
  .zb-pv2-nav button,
  .zb-pv2-tool-card button,
  .zb-pv2-progress-card button,
  .zb-pv2-utility-button
) {
  color: rgba(250, 252, 255, 0.96) !important;
  font-weight: 600 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(
  .zb-pv2-tool-card p,
  .zb-pv2-tool-card small,
  .zb-pv2-tool-check,
  .zb-pv2-tool-field,
  .zb-pv2-progress-card small,
  .zb-pv2-version-pill
) {
  color: rgba(218, 229, 244, 0.86) !important;
  font-weight: 650 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(.zb-pv2-tool-card select, .zb-pv2-countdown-custom input) {
  color: #f8fbff !important;
  font-weight: 500 !important;
}

body:has(.practice-dashboard:not([hidden])) :is(.practice-rail-mini small, .practice-rail-week-time, .practice-rail-streak-value) {
  color: rgba(218, 229, 244, 0.84) !important;
  font-weight: 500 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(.practice-rail-mini small, .practice-rail-week-time, .practice-rail-streak-value) {
  color: rgba(218, 229, 244, 0.84) !important;
  font-weight: 500 !important;
}

body[data-current-screen="catalog"] :is(
  .catalog-calm-empty-state span,
  .organize-catalog-empty,
  .organize-catalog-empty span,
  .catalog-browser-header small,
  .catalog-row-copy small,
  .catalog-row-meta em,
  .catalog-row-link-count
) {
  color: rgba(226, 238, 250, 0.84) !important;
  font-weight: 580 !important;
}

body[data-current-screen="catalog"] :is(.catalog-browser-search input, .organize-catalog-search input, .catalog-attach-drawer-search input) {
  color: #f8fbff !important;
  font-weight: 500 !important;
}

html body:has(.organize-schedules-workspace) #organizeRelationshipPreview :is(
  .organize-schedule-card small,
  .organize-schedule-summary-card p,
  .organize-schedule-summary-card em,
  .organize-schedule-summary-note,
  .organize-schedule-column-header strong,
  .organize-schedule-lane-header span,
  .organize-schedule-lane-guidance,
  .organize-schedule-item-content em,
  .organize-schedule-section-empty,
  .organize-source-pool-item small,
  .organize-custom-source-item small,
  .organize-custom-source-item em
) {
  color: rgba(218, 229, 244, 0.84) !important;
  font-weight: 600 !important;
}

html body:has(.organize-schedules-workspace) #organizeRelationshipPreview :is(
  .organize-schedule-card,
  .organize-schedule-summary-card,
  .organize-schedule-lane,
  .organize-schedule-item,
  .organize-source-pool-item,
  .organize-custom-source-controls,
  .organize-custom-source-item,
  .organize-custom-schedule-item,
  .organize-schedule-section-empty
) {
  border-color: rgba(166, 185, 216, 0.30) !important;
}

/* Phase 1 refinement: improve readability through size, contrast, and spacing instead of weight. */
:root {
  --zb-readable-dark-muted: rgba(228, 237, 249, 0.9);
  --zb-readable-dark-soft: rgba(218, 230, 246, 0.84);
  --zb-readable-dark-border: rgba(176, 196, 226, 0.30);
  --zb-readable-light-muted: #42516a;
  --zb-readable-light-soft: #4d5d75;
  --zb-readable-light-border: rgba(91, 109, 134, 0.38);
}

html body :is(
  .screen-title,
  .section-header h2,
  .section-header h3,
  .section-header h4,
  .card > h2,
  .card > h3,
  .queue-heading h3,
  .queue-title-row h3,
  .current-item h3,
  .tool-card-header h3,
  .modal-header h2,
  .catalog-section-heading h4,
  .catalog-browser-header strong,
  .modal-catalog-lookup-header strong
) {
  font-weight: 700 !important;
}

html body :is(
  .organize-workspace-shell,
  .organize-catalog-workspace,
  .organize-goals-modern-workspace,
  .organize-drills-modern-workspace,
  .organize-songs-modern-workspace,
  .organize-solos-modern-workspace,
  .organize-activities-modern-workspace,
  .organize-schedules-workspace,
  .toolbox-screen,
  .toolbox-floating-body,
  .practice-dashboard,
  .practice-map-workspace,
  .settings-screen,
  .preferences-screen,
  .zb-practice-v2-screen,
  .importzone-screen
) :is(
  h2,
  h3,
  h4,
  strong,
  .screen-title,
  .section-header h2,
  .section-header h3,
  .catalog-section-heading h4,
  .catalog-browser-header strong,
  .queue-heading h3,
  .queue-title-row h3,
  .tool-card-header h3,
  .p03i-timing-title,
  .reference-box-header strong,
  .zb-pv2-tool-title,
  .zb-pv2-workspace-title
) {
  font-weight: 680 !important;
}

html body :is(
  .organize-goal-modern-copy strong,
  .organize-drill-modern-title strong,
  .organize-song-modern-title strong,
  .organize-solo-modern-title strong,
  .organize-activity-modern-title strong,
  .organize-catalog-row strong,
  .catalog-viewer-header h3,
  .catalog-record-attached-reference strong,
  .catalog-record-reference-result strong,
  .catalog-attach-target-copy strong,
  .schedule-builder-block-card strong,
  .schedule-builder-item-expand strong,
  .schedule-builder-block-item-copy strong,
  .schedule-builder-practice-block-detail > summary strong,
  .queue-item-title,
  #currentItemName,
  .practice-focus-card h3,
  .practice-queue-current-schedule > strong,
  .practice-map-card strong,
  .practice-map-side-card strong
) {
  font-weight: 660 !important;
}

html body :is(
  .record-card small,
  .activity-log-item small,
  .summary-pill,
  .type-badge,
  .mini-badge,
  .build-chip,
  .badge-archived,
  .queue-item-type
) {
  color: var(--zb-readable-light-soft) !important;
  font-weight: 400 !important;
}

html body :is(
  .organize-workspace-shell,
  .organize-catalog-workspace,
  .organize-goals-modern-workspace,
  .organize-drills-modern-workspace,
  .organize-songs-modern-workspace,
  .organize-solos-modern-workspace,
  .organize-activities-modern-workspace,
  .organize-schedules-workspace,
  .catalog-attach-workspace,
  .catalog-media-expanded,
  .toolbox-screen,
  .toolbox-floating-body,
  .practice-dashboard,
  .practice-map-workspace,
  .settings-screen,
  .preferences-screen,
  .zb-practice-v2-screen,
  .importzone-screen
) :is(
  small,
  em,
  .subtitle,
  .section-note,
  .description,
  .status,
  .eyebrow,
  .tool-card-note,
  .queue-helper,
  .queue-status-text,
  .catalog-row-meta,
  .catalog-viewer-meta,
  .catalog-entry-identity-line,
  .catalog-title-kicker,
  .catalog-record-reference-empty,
  .catalog-record-details dt,
  .catalog-record-details dd,
  .practice-map-pan-hint,
  .practice-map-card-copy em,
  .teacher-report-muted,
  .teacher-report-empty,
  .zb-pv2-version-pill
) {
  color: var(--zb-readable-dark-muted) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

html body :is(
  .organize-goal-modern-copy small,
  .organize-goal-modern-links,
  .organize-drill-modern-title small,
  .organize-song-modern-title small,
  .organize-song-modern-source,
  .organize-song-modern-linked small,
  .organize-solo-modern-title small,
  .organize-activity-modern-title small,
  .organize-drill-modern-frequency em,
  .organize-drill-modern-linked em,
  .organize-song-modern-linked em,
  .organize-song-modern-practiced em,
  .organize-solo-modern-linked em,
  .organize-solo-modern-practiced em,
  .organize-activity-modern-frequency em,
  .organize-activity-modern-linked em,
  .organize-activity-modern-engaged em,
  .catalog-row-copy small,
  .catalog-row-meta em,
  .catalog-row-link-count,
  .catalog-viewer-meta span,
  .catalog-linked-item-list small,
  .catalog-attach-target-copy small,
  .catalog-attach-target-copy em,
  .schedule-builder-item-expand small,
  .schedule-builder-item-expand em,
  .schedule-builder-block-item-copy small,
  .schedule-builder-block-item-copy em,
  .schedule-builder-practice-block-detail > summary small,
  .schedule-builder-practice-block-detail > summary em,
  .schedule-builder-practice-block-generated-items li > span small,
  .queue-item-type,
  #currentItemMeta,
  .practice-focus-card .description,
  .current-item-context-preview-block span,
  .current-item-instructions-panel summary small,
  .reference-row-mock span,
  .quick-record-status,
  .p10ex-metro-kicker,
  .practice-rail-mini small,
  .practice-rail-week-time,
  .practice-queue-current-schedule > small,
  .practice-queue-available-schedules small,
  .practice-queue-available-schedules p,
  .practice-map-card small,
  .practice-map-side-card p
) {
  color: var(--zb-readable-dark-muted) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
}

html body :is(
  input[type="search"],
  .organize-catalog-search input,
  .catalog-browser-search input,
  .catalog-attach-drawer-search input,
  label[class*="search"] input,
  [data-schedule-builder-picker-search]
) {
  font-weight: 500 !important;
}

html body :is(.secondary-button, .filter-button, .ghost-button, .type-tab, .dashboard-mode-button) {
  font-weight: 600 !important;
}

html body :is(
  .organize-drills-filter-bar label span,
  .organize-songs-filter-bar label span,
  .organize-solos-filter-bar label span,
  .organize-activities-filter-bar label span,
  .organize-catalog-tools label span,
  .catalog-browser-search span,
  .catalog-attach-drawer-search span,
  .catalog-record-reference-filters label span,
  .catalog-attach-drawer-filters label span,
  .organize-custom-source-controls label span,
  .schedule-builder-picker-filter label span,
  .schedule-builder-lane-control span,
  .catalog-add-flow label span,
  .catalog-add-section-label
) {
  color: rgba(232, 241, 252, 0.9) !important;
  font-weight: 600 !important;
}

html body :is(
  .organize-catalog-workspace,
  .organize-workspace-shell,
  .organize-schedules-workspace,
  .toolbox-screen,
  .toolbox-floating-body,
  .practice-dashboard,
  .practice-map-workspace,
  .settings-screen,
  .preferences-screen,
  .zb-practice-v2-screen,
  .importzone-screen
) :is(
  .secondary-button,
  .filter-button,
  .ghost-button,
  .catalog-unified-filter-rail button:not(.is-selected),
  .catalog-attach-type-tabs button:not(.is-selected),
  .catalog-open-attach-picker,
  .catalog-attach-target,
  .catalog-attach-edit-target,
  .organize-goal-modern-edit,
  .organize-modern-row-delete,
  .schedule-builder-preview-nav-button,
  .schedule-builder-block-more,
  .schedule-builder-item-expand,
  .desktop-queue-toggle,
  .mobile-queue-toggle,
  .queue-start-now-button,
  .practice-rail-settings-button,
  .alpha-feedback-button.is-rail-feedback-button,
  .zb-pv2-utility-button,
  .zb-pv2-progress-card button
) {
  color: rgba(248, 251, 255, 0.95) !important;
  font-weight: 600 !important;
}

html body :is(.app-nav-button:not(.is-selected), .organize-nav-item:not(.is-selected), .preferences-sidebar button:not(.is-selected), .preferences-nav button:not(.is-selected)) {
  color: rgba(241, 246, 255, 0.84) !important;
  font-weight: 560 !important;
}

body[data-current-screen="catalog"] :is(
  .catalog-calm-empty-state span,
  .organize-catalog-empty,
  .organize-catalog-empty span,
  .catalog-browser-header small,
  .catalog-row-copy small,
  .catalog-row-meta em,
  .catalog-row-link-count
) {
  color: rgba(232, 241, 252, 0.9) !important;
  font-weight: 400 !important;
}

body[data-current-screen="catalog"] :is(.catalog-browser-search input, .organize-catalog-search input, .catalog-attach-drawer-search input) {
  font-weight: 500 !important;
}

html body:has(.organize-schedules-workspace) #organizeRelationshipPreview :is(
  .organize-schedule-card small,
  .organize-schedule-summary-card p,
  .organize-schedule-summary-card em,
  .organize-schedule-summary-note,
  .organize-schedule-column-header strong,
  .organize-schedule-lane-header span,
  .organize-schedule-lane-guidance,
  .organize-schedule-item-content em,
  .organize-schedule-section-empty,
  .organize-source-pool-item small,
  .organize-custom-source-item small,
  .organize-custom-source-item em
) {
  color: rgba(232, 241, 252, 0.9) !important;
  font-weight: 400 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(
  .zb-pv2-nav button,
  .zb-pv2-actions button,
  .zb-pv2-tool-card button,
  .zb-pv2-progress-card button,
  .zb-pv2-utility-button
) {
  color: rgba(250, 252, 255, 0.96) !important;
  font-weight: 600 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-nav button.is-selected,
body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-actions .zb-pv2-primary-action {
  font-weight: 650 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(
  .zb-pv2-rail-brand strong,
  .zb-pv2-progress-card strong,
  .zb-pv2-current-scroll h4,
  .zb-pv2-focus-card strong,
  .zb-pv2-instruction-line,
  .zb-pv2-schedule h3,
  .zb-pv2-schedule-list strong,
  .zb-pv2-reference-summary
) {
  font-weight: 650 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(
  .zb-pv2-rail-brand small,
  .zb-pv2-progress-card small,
  .zb-pv2-progress-card em,
  .zb-pv2-version-pill,
  .zb-pv2-kicker,
  .zb-pv2-chip,
  .zb-pv2-pill,
  .zb-pv2-panel-row small,
  .zb-pv2-tool-card p,
  .zb-pv2-tool-card small,
  .zb-pv2-tool-check,
  .zb-pv2-tool-field,
  .zb-pv2-tool-check span,
  .zb-pv2-tool-check-compact span,
  .zb-pv2-schedule-list small,
  .zb-pv2-schedule-list em
) {
  color: rgba(228, 237, 249, 0.9) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card p {
  display: block !important;
  font-size: 0.76rem !important;
  line-height: 1.28 !important;
  min-height: 1.12rem !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tools {
  gap: 0.62rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card {
  padding: 0.72rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card > div {
  gap: 0.34rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card h4 {
  font-size: 1.02rem !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-actions {
  gap: 0.36rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-actions button,
body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-timer-presets button {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  min-height: 2rem !important;
  padding: 0.26rem 0.56rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  font-size: 0.75rem !important;
  min-height: 2rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-metronome-controls {
  gap: 0.34rem !important;
  grid-template-columns: 2.1rem minmax(5.7rem, 1fr) 2.1rem !important;
  min-height: 2.35rem !important;
  width: min(12.8rem, 72%) !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-metronome-controls strong {
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: clamp(1.22rem, 1.42vw, 1.5rem) !important;
  font-weight: 620 !important;
  line-height: 1 !important;
  padding: 0.28rem 0.48rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-metronome-controls button {
  font-size: 1rem !important;
  min-height: 2.08rem !important;
  width: 2.1rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-field {
  color: rgba(228, 237, 249, 0.88) !important;
  font-size: 0.74rem !important;
  font-weight: 400 !important;
  grid-template-columns: 3rem minmax(0, 1fr) !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-field select,
body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-countdown-custom input {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  min-height: 1.86rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-check input {
  height: 1rem !important;
  width: 1rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-check span,
body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-check-compact span {
  font-size: 0.74rem !important;
  font-weight: 400 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-timer-presets {
  gap: 0.22rem !important;
  grid-template-columns: repeat(4, minmax(2.05rem, 1fr)) !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-timer-presets button {
  font-size: 0.72rem !important;
  min-height: 1.58rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-countdown-custom {
  min-height: 1.58rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-tool-actions button {
  font-size: 0.76rem !important;
  min-height: 1.88rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(
  .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] > strong,
  .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] > strong
) {
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: clamp(2.45rem, 3.15vw, 3.22rem) !important;
  font-weight: 580 !important;
  line-height: 0.95 !important;
  padding: 0.36rem 0.62rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"].is-recording > strong {
  animation: zb-pv2-recording-pulse 1.15s ease-in-out infinite !important;
  background: rgba(127, 29, 29, 0.28) !important;
  border-color: rgba(248, 113, 113, 0.42) !important;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.08), 0 0 18px rgba(239, 68, 68, 0.12) !important;
  color: #fecaca !important;
  font-size: 0.92rem !important;
  gap: 0.3rem !important;
  line-height: 1.08 !important;
  margin-top: 0 !important;
  min-height: 2rem !important;
  padding: 0.34rem 0.58rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-schedule h3 {
  font-size: 1.05rem !important;
  font-weight: 650 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-schedule-list strong {
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: 0.86rem !important;
  font-weight: 650 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-schedule-list small,
body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-schedule-list em {
  color: rgba(228, 237, 249, 0.88) !important;
  font-size: 0.74rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display,
body:has(.practice-dashboard:not([hidden])) #countdownDisplay {
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: clamp(2.25rem, 2.8vw, 3rem) !important;
  font-weight: 580 !important;
  line-height: 0.98 !important;
}

body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed,
body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed {
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: clamp(2rem, 2.45vw, 2.72rem) !important;
  font-weight: 580 !important;
  line-height: 1 !important;
  min-height: 2.72rem !important;
}

body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard :is(.p03i-bpm-input, #bpmNumberInput),
body:has(.practice-dashboard:not([hidden])) .metronome-card #bpmNumberInput {
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: clamp(1.55rem, 2vw, 2.15rem) !important;
  font-weight: 560 !important;
  line-height: 1 !important;
}

body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard .p05w-bpm-control {
  grid-template-columns: 2.05rem minmax(3.5rem, 1fr) 2.05rem !important;
  min-height: 2.35rem !important;
}

body:has(.practice-dashboard:not([hidden])) :is(
  #p03iTimerCard .p03i-action-row > button,
  #p03iTimerCard .p05q-timer-right > button,
  #p03iMetronomeCard .p03i-metronome-actions > button,
  #p03iMetronomeCard .p05w-bpm-step,
  #p03iMetronomeCard .p10eu-metro-tap,
  #quickRecordPanel button
) {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  min-height: 2.28rem !important;
  padding: 0.34rem 0.62rem !important;
}

body:has(.practice-dashboard:not([hidden])) #quickRecordPanel :is(.quick-record-status, .quick-record-help, .quick-record-note, .quick-record-playback-label),
body:has(.practice-dashboard:not([hidden])) #countdownStatus,
body:has(.practice-dashboard:not([hidden])) #metronomeStatus {
  color: rgba(228, 237, 249, 0.88) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

body:has(.practice-dashboard:not([hidden])) :is(
  #scheduleJourneyName,
  .schedule-journey-chip strong,
  .practice-queue-current-schedule > strong,
  .practice-queue-workspace-block-heading strong,
  .practice-queue-workspace-copy strong
) {
  color: rgba(255, 255, 255, 0.98) !important;
  font-weight: 650 !important;
}

body:has(.practice-dashboard:not([hidden])) :is(
  .schedule-journey-chip small,
  .practice-queue-current-schedule > small,
  .practice-queue-available-schedules small,
  .practice-queue-workspace-block-heading span,
  .practice-queue-workspace-block-heading em,
  .practice-queue-workspace-copy small,
  .practice-queue-drawer-summary
) {
  color: rgba(228, 237, 249, 0.88) !important;
  font-weight: 400 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls {
  gap: 0.38rem !important;
  grid-template-columns: 2.25rem minmax(6.6rem, 1fr) 2.25rem !important;
  min-height: 2.6rem !important;
  width: min(14.1rem, 78%) !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls strong {
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: clamp(1.38rem, 1.75vw, 1.78rem) !important;
  font-weight: 580 !important;
  line-height: 1 !important;
  padding: 0.32rem 0.5rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls button {
  font-size: 1.05rem !important;
  min-height: 2.28rem !important;
  width: 2.25rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="countdown"] .zb-pv2-tool-actions button,
body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions button,
body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions button {
  font-size: 0.8rem !important;
  min-height: 2.12rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="recorder"] .zb-pv2-tool-actions {
  gap: 0.3rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(
  .zb-pv2-current-scroll h4,
  .zb-pv2-focus-card strong
) {
  font-weight: 580 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(
  .zb-pv2-schedule h3,
  .zb-pv2-schedule-list strong,
  .zb-pv2-tool-card h4
) {
  font-weight: 600 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen :is(
  .zb-pv2-tool-card p,
  .zb-pv2-panel-row small,
  .zb-pv2-schedule-list small,
  .zb-pv2-schedule-list em,
  .zb-pv2-progress-card small,
  .zb-pv2-version-pill
) {
  color: rgba(234, 242, 252, 0.92) !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card p {
  align-items: center !important;
  display: inline-flex !important;
  line-height: 1.32 !important;
  min-height: 1.2rem !important;
  overflow: visible !important;
  padding-block: 0.04rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-schedule-list em {
  font-size: 0.78rem !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] {
  position: relative !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-metronome-controls,
body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field {
  max-width: calc(100% - 7rem) !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-field select {
  width: 100% !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions {
  bottom: 0.72rem !important;
  display: grid !important;
  gap: 0.32rem !important;
  grid-template-columns: 1fr !important;
  position: absolute !important;
  right: 0.72rem !important;
  width: 5.9rem !important;
  z-index: 6 !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] .zb-pv2-tool-actions button {
  justify-content: center !important;
  min-height: 2rem !important;
  width: 100% !important;
}

body[data-current-screen="practice-v2"] .zb-practice-v2-screen .zb-pv2-tool-card[data-zb-pv2-tool="metronome"] > div > .zb-pv2-tool-check {
  right: 0.78rem !important;
  top: 0.82rem !important;
}

/* Phase 3 Library readability pass: wider browse surface, clearer cards, normal-weight metadata. */
body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-layout {
  align-items: stretch !important;
  display: grid !important;
  gap: 0.95rem !important;
  grid-template-columns: minmax(23.5rem, 2fr) minmax(0, 3fr) !important;
}

@media (min-width: 1220px) {
  body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-layout {
    grid-template-columns: minmax(24.5rem, 2fr) minmax(0, 3fr) !important;
  }
}

@media (max-width: 980px) {
  body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .organize-catalog-browser,
  .organize-catalog-viewer,
  .catalog-viewer-card,
  .catalog-rich-text-viewer,
  .catalog-record-details,
  .catalog-linked-goals-section,
  .catalog-goal-linked-items-section,
  .catalog-linked-group,
  .catalog-primary-reference,
  .catalog-links-found,
  .catalog-attached-references,
  .catalog-record-reference-panel,
  .catalog-record-settings,
  .catalog-relationship-panel,
  .catalog-attach-panel
) {
  border-color: rgba(190, 207, 232, 0.22) !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-browser,
body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-viewer {
  min-width: 0 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-browser-header {
  margin-bottom: 0.72rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-browser-header strong,
body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-section-heading h4,
body[data-current-screen="catalog"] .organize-catalog-workspace .modal-catalog-lookup-header strong {
  color: rgba(250, 252, 255, 0.98) !important;
  font-size: clamp(1rem, 1.05vw, 1.15rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
  -webkit-text-fill-color: rgba(250, 252, 255, 0.98) !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .catalog-browser-header small,
  .catalog-section-heading small,
  .modal-catalog-lookup-header small,
  .catalog-calm-empty-state span,
  .organize-catalog-empty,
  .catalog-record-reference-empty
) {
  color: rgba(229, 239, 252, 0.84) !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .organize-catalog-search input,
  .catalog-browser-search input,
  .catalog-attach-drawer-search input,
  .catalog-record-reference-filters input,
  .catalog-sort-control select,
  .organize-catalog-tools select
) {
  border-color: rgba(188, 205, 235, 0.34) !important;
  color: rgba(248, 251, 255, 0.98) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  min-height: 2.55rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-search input::placeholder,
body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-browser-search input::placeholder,
body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-attach-drawer-search input::placeholder,
body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-record-reference-filters input::placeholder {
  color: rgba(219, 231, 248, 0.76) !important;
  opacity: 1 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .catalog-browser-search span,
  .organize-catalog-tools label span,
  .catalog-sort-control span,
  .catalog-record-reference-filters label span,
  .catalog-attach-drawer-filters label span
) {
  color: rgba(234, 243, 255, 0.9) !important;
  font-size: 0.76rem !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-filter-toolbox-row {
  gap: 0.86rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-unified-filter-rail {
  border-color: rgba(184, 203, 234, 0.2) !important;
  gap: 0.64rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-unified-filter-rail button {
  color: rgba(235, 244, 255, 0.86) !important;
  font-size: 0.84rem !important;
  font-weight: 520 !important;
  min-height: 2.12rem !important;
  padding: 0.48rem 0.72rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-unified-filter-rail button.is-selected {
  color: #ffffff !important;
  font-weight: 600 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-list {
  gap: 0.52rem !important;
  padding-right: 0.18rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-row {
  align-items: center !important;
  border-color: rgba(190, 207, 232, 0.18) !important;
  gap: 0.76rem !important;
  min-height: 5.15rem !important;
  padding: 0.86rem 0.84rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-row:hover {
  border-color: rgba(213, 202, 255, 0.34) !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-row.is-selected {
  border-color: rgba(220, 211, 255, 0.62) !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-row-icon,
body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-selected-icon {
  min-height: 2.48rem !important;
  min-width: 2.48rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-row-icon svg,
body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-selected-icon svg {
  height: 1.42rem !important;
  width: 1.42rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-row-copy {
  gap: 0.28rem !important;
  min-width: 0 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-row-copy strong {
  color: #ffffff !important;
  font-size: clamp(1rem, 1.02vw, 1.14rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
  -webkit-text-fill-color: #ffffff !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-row-copy small {
  color: rgba(233, 241, 253, 0.9) !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-row-meta {
  gap: 0.38rem !important;
  margin-top: 0.04rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-row-meta em,
body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-row-link-count,
body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-viewer-meta span {
  background: rgba(139, 92, 246, 0.18) !important;
  border-color: rgba(216, 202, 255, 0.2) !important;
  color: rgba(236, 244, 255, 0.9) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-viewer-card {
  gap: 0.98rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-viewer-header {
  border-color: rgba(210, 199, 255, 0.22) !important;
  gap: 0.92rem !important;
  padding: 1rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-viewer-header h3 {
  color: #ffffff !important;
  font-size: clamp(1.38rem, 1.65vw, 1.82rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .catalog-entry-identity-line,
  .catalog-title-kicker,
  .catalog-viewer-header .eyebrow
) {
  color: rgba(233, 242, 255, 0.88) !important;
  font-size: 0.86rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.34 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-viewer-meta {
  gap: 0.4rem !important;
  margin-top: 0.4rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .catalog-rich-text-viewer,
  .catalog-record-details,
  .catalog-linked-goals-section,
  .catalog-goal-linked-items-section,
  .catalog-primary-reference,
  .catalog-links-found,
  .catalog-attached-references,
  .catalog-record-reference-panel,
  .catalog-relationship-panel,
  .catalog-attach-panel
) {
  padding: 1rem !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .catalog-rich-text-viewer pre,
  .catalog-rich-text-viewer p,
  .catalog-record-reference-empty,
  .catalog-linked-group p,
  .catalog-attach-compact-summary span
) {
  color: rgba(244, 248, 255, 0.92) !important;
  font-size: 0.96rem !important;
  font-weight: 400 !important;
  line-height: 1.54 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-record-details dt {
  color: rgba(224, 236, 252, 0.84) !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-record-details dd {
  color: rgba(248, 251, 255, 0.94) !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .catalog-linked-item-list small,
  .catalog-record-attached-reference small,
  .catalog-record-reference-result small,
  .catalog-reference-card small,
  .catalog-media-caption,
  .catalog-record-details summary small
) {
  color: rgba(228, 239, 253, 0.86) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Keep Library hierarchy readable without inheriting heavier global title weights. */
html body[data-current-screen="catalog"] .organize-catalog-workspace :is(#currentItemName, .catalog-row-copy strong) {
  color: #ffffff !important;
  font-size: clamp(1rem, 1.02vw, 1.14rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace :is(#currentItemMeta, .catalog-row-copy small) {
  color: rgba(233, 241, 253, 0.9) !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  #currentItemMeta,
  .catalog-row-meta em,
  .catalog-row-link-count,
  .catalog-viewer-meta span
) {
  color: rgba(236, 244, 255, 0.9) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace :is(#currentItemName, .catalog-viewer-header h3) {
  color: #ffffff !important;
  font-size: clamp(1.38rem, 1.65vw, 1.82rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  #currentItemMeta,
  .catalog-entry-identity-line,
  .catalog-title-kicker,
  .catalog-viewer-header .eyebrow
) {
  color: rgba(233, 242, 255, 0.88) !important;
  font-size: 0.86rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.34 !important;
}

/* Library detail actions should read as active dark-surface controls, not pale disabled pills. */
html body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  #currentItemMeta,
  .catalog-viewer-actions .secondary-button:not(.catalog-danger-action),
  .catalog-viewer-actions .importzone-primary-button,
  .catalog-viewer-actions .catalog-start-item-button,
  .catalog-viewer-actions .catalog-open-reference
) {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(14, 165, 233, 0.14)),
    rgba(8, 18, 34, 0.84) !important;
  border: 1px solid rgba(216, 202, 255, 0.28) !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.18) !important;
  color: rgba(248, 251, 255, 0.96) !important;
  font-size: 0.84rem !important;
  font-weight: 560 !important;
  line-height: 1.1 !important;
  min-height: 2.36rem !important;
  padding: 0.54rem 0.86rem !important;
  -webkit-text-fill-color: rgba(248, 251, 255, 0.96) !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  #currentItemMeta,
  .catalog-viewer-actions .secondary-button:not(.catalog-danger-action),
  .catalog-viewer-actions .importzone-primary-button,
  .catalog-viewer-actions .catalog-start-item-button,
  .catalog-viewer-actions .catalog-open-reference
):hover {
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.42), rgba(14, 165, 233, 0.2)),
    rgba(11, 24, 44, 0.9) !important;
  border-color: rgba(226, 218, 255, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .catalog-record-reference-status .secondary-button,
  .catalog-record-reference-compact-actions .secondary-button,
  .catalog-record-reference-result .secondary-button,
  .catalog-record-attached-reference .secondary-button,
  .catalog-record-attach-heading .secondary-button,
  .catalog-media-actions .secondary-button,
  .catalog-reference-video-actions .secondary-button
):not(:disabled) {
  background:
    linear-gradient(135deg, rgba(90, 68, 155, 0.22), rgba(14, 165, 233, 0.1)),
    rgba(10, 24, 44, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: rgba(247, 250, 255, 0.95) !important;
  font-size: 0.84rem !important;
  font-weight: 560 !important;
  line-height: 1.1 !important;
  min-height: 2.24rem !important;
  padding: 0.48rem 0.78rem !important;
  -webkit-text-fill-color: rgba(247, 250, 255, 0.95) !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .catalog-record-reference-status .secondary-button,
  .catalog-record-reference-compact-actions .secondary-button,
  .catalog-record-reference-result .secondary-button,
  .catalog-record-attached-reference .secondary-button,
  .catalog-record-attach-heading .secondary-button,
  .catalog-media-actions .secondary-button,
  .catalog-reference-video-actions .secondary-button
):not(:disabled):hover,
html body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .catalog-record-reference-status .secondary-button,
  .catalog-record-reference-compact-actions .secondary-button,
  .catalog-record-reference-result .secondary-button,
  .catalog-record-attached-reference .secondary-button,
  .catalog-record-attach-heading .secondary-button,
  .catalog-media-actions .secondary-button,
  .catalog-reference-video-actions .secondary-button
):not(:disabled):focus-visible {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(14, 165, 233, 0.15)),
    rgba(10, 24, 44, 0.96) !important;
  border-color: rgba(216, 202, 255, 0.44) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace :is(
  .catalog-record-reference-status .secondary-button,
  .catalog-record-reference-compact-actions .secondary-button,
  .catalog-record-reference-result .secondary-button,
  .catalog-record-attached-reference .secondary-button,
  .catalog-record-attach-heading .secondary-button,
  .catalog-media-actions .secondary-button,
  .catalog-reference-video-actions .secondary-button
):disabled {
  background: rgba(20, 30, 47, 0.58) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.58) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.58) !important;
}

/* Phase 4 Schedule Builder readability and hierarchy pass. */
html body[data-current-screen="schedule-builder"] .schedule-builder-screen {
  --zb-schedule-readable-text: rgba(250, 253, 255, 0.98);
  --zb-schedule-readable-soft: rgba(232, 241, 253, 0.9);
  --zb-schedule-readable-muted: rgba(215, 228, 246, 0.82);
  --zb-schedule-readable-border: rgba(189, 208, 235, 0.23);
  --zb-schedule-control-surface: rgba(8, 18, 34, 0.78);
  --zb-schedule-control-border: rgba(190, 209, 238, 0.28);
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  .schedule-builder-panel,
  .schedule-builder-ribbon-panel,
  .schedule-builder-advanced-section,
  .schedule-builder-header-schedule,
  .schedule-builder-advanced-block-row,
  .schedule-builder-block-card,
  .schedule-basic-item-row,
  .schedule-builder-block-item-row,
  .schedule-builder-picker-row
) {
  border-color: var(--zb-schedule-readable-border) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  .schedule-builder-header h2,
  .schedule-builder-panel-heading p,
  .schedule-builder-generated-heading p,
  .schedule-builder-section-title p > span:first-child,
  .schedule-builder-picker-empty-state strong,
  .schedule-builder-permanent-drop-target strong,
  .schedule-builder-empty strong
) {
  color: var(--zb-schedule-readable-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  -webkit-text-fill-color: var(--zb-schedule-readable-text) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-section-title p > span:first-child,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-panel-heading p,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-generated-heading p {
  font-size: clamp(0.92rem, 0.95vw, 1.04rem) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  #currentItemName,
  .schedule-builder-advanced-block-header .schedule-builder-advanced-row-copy strong,
  .schedule-builder-block-card .schedule-builder-block-copy strong,
  .schedule-basic-selector,
  .schedule-builder-header .schedule-builder-schedule-current strong
) {
  color: var(--zb-schedule-readable-text) !important;
  font-size: clamp(1rem, 1.02vw, 1.12rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
  -webkit-text-fill-color: var(--zb-schedule-readable-text) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  #currentItemName,
  .schedule-builder-advanced-item-row .schedule-builder-advanced-row-copy strong,
  .schedule-builder-advanced-context-row .schedule-builder-advanced-row-copy strong,
  .schedule-basic-item-copy strong,
  .schedule-builder-item-expand strong,
  .schedule-builder-block-item-copy strong,
  .schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) strong,
  .schedule-builder-catalog-summary strong,
  .schedule-builder-library-group header strong
) {
  color: rgba(249, 252, 255, 0.97) !important;
  font-size: clamp(0.92rem, 0.9vw, 1rem) !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  line-height: 1.22 !important;
  -webkit-text-fill-color: rgba(249, 252, 255, 0.97) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  #currentItemMeta,
  .schedule-builder-eyebrow,
  [data-schedule-mode-summary],
  .schedule-mode-switcher-heading span,
  .schedule-builder-start-practice-help,
  .schedule-builder-current-label,
  .schedule-builder-header .schedule-builder-schedule-current small,
  .schedule-builder-header .schedule-builder-schedule-current em,
  .schedule-builder-panel-heading span,
  .schedule-builder-section-title small,
  .schedule-builder-generated-estimate,
  .schedule-builder-estimate,
  .schedule-builder-estimate small,
  .schedule-builder-today-summary span,
  .schedule-builder-advanced-row-copy small,
  .schedule-builder-advanced-row-copy em,
  .schedule-builder-block-type,
  .schedule-builder-block-meta span,
  .schedule-basic-item-copy small,
  .schedule-builder-item-expand small,
  .schedule-builder-item-expand em,
  .schedule-builder-block-item-copy small,
  .schedule-builder-block-item-copy em,
  .schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) small,
  .schedule-builder-catalog-summary span,
  .schedule-builder-library-sort span,
  .schedule-builder-library-group header span,
  .schedule-builder-drop-hint,
  .schedule-builder-permanent-drop-target span,
  .schedule-builder-empty p,
  .schedule-builder-empty li,
  .schedule-builder-empty small,
  .schedule-builder-picker-empty-state p,
  .schedule-builder-picker-empty-state small,
  .schedule-builder-advanced-footer p
) {
  color: var(--zb-schedule-readable-muted) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  -webkit-text-fill-color: var(--zb-schedule-readable-muted) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-header .schedule-builder-advanced-row-copy small,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-block-meta span,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-today-summary span,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-generated-estimate {
  color: var(--zb-schedule-readable-soft) !important;
  font-size: clamp(0.8rem, 0.78vw, 0.9rem) !important;
  -webkit-text-fill-color: var(--zb-schedule-readable-soft) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-item-row .schedule-builder-advanced-row-copy small,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-item-row .schedule-builder-advanced-row-copy em,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-block-item-copy small,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-block-item-copy em,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row > span:not(.schedule-builder-drag-handle):not(.schedule-builder-mini-icon) small,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-basic-item-copy small {
  font-size: clamp(0.78rem, 0.76vw, 0.86rem) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-start-practice-button:disabled + .schedule-builder-start-practice-help,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-start-practice-button[aria-disabled="true"] + .schedule-builder-start-practice-help {
  color: rgba(254, 215, 170, 0.88) !important;
  -webkit-text-fill-color: rgba(254, 215, 170, 0.88) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.15), transparent 14rem),
    linear-gradient(135deg, rgba(21, 35, 64, 0.82), rgba(8, 17, 33, 0.9)) !important;
  gap: 0.54rem !important;
  padding: 0.54rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-header {
  background:
    linear-gradient(135deg, rgba(92, 66, 160, 0.18), rgba(14, 165, 233, 0.08)),
    rgba(8, 18, 34, 0.7) !important;
  border-color: rgba(211, 201, 255, 0.22) !important;
  border-radius: 0.72rem !important;
  padding: 0.62rem 0.68rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-selected .schedule-builder-advanced-block-header {
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(124, 58, 237, 0.16)),
    rgba(7, 21, 36, 0.78) !important;
  border-color: rgba(153, 246, 228, 0.36) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.3), transparent 17rem),
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.22), transparent 14rem),
    linear-gradient(135deg, rgba(12, 41, 60, 0.96), rgba(10, 18, 38, 0.98)) !important;
  border-color: rgba(125, 211, 252, 0.64) !important;
  box-shadow:
    inset 0 0 0 1px rgba(153, 246, 228, 0.12),
    0 0 0 2px rgba(45, 212, 191, 0.12),
    0 22px 62px rgba(2, 8, 23, 0.38) !important;
  min-height: min(38rem, calc(100vh - 18rem)) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-focus-sibling {
  opacity: 0.76 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-block-items {
  max-height: clamp(22rem, 48vh, 35rem) !important;
  min-height: 18rem !important;
  padding: 0.62rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-item-row {
  min-height: 4.25rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-focus-banner {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(45, 212, 191, 0.08)) !important;
  border-color: rgba(125, 211, 252, 0.2) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  .schedule-builder-advanced-item-row,
  .schedule-builder-advanced-context-row
) {
  background:
    linear-gradient(135deg, rgba(28, 42, 68, 0.78), rgba(10, 20, 38, 0.86)) !important;
  border-color: rgba(190, 207, 232, 0.19) !important;
  gap: 0.6rem !important;
  min-height: 3.85rem !important;
  padding: 0.62rem 0.66rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-items {
  background: rgba(2, 8, 20, 0.3) !important;
  border-color: rgba(190, 207, 232, 0.15) !important;
  gap: 0.42rem !important;
  padding: 0.52rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-basic-item-row {
  min-height: 4.55rem !important;
  padding: 0.8rem 0.86rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-block-item-row {
  gap: 0.6rem !important;
  padding: 0.64rem 0.7rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row {
  background:
    linear-gradient(135deg, rgba(22, 36, 58, 0.74), rgba(8, 17, 33, 0.78)) !important;
  border-color: rgba(190, 207, 232, 0.19) !important;
  min-height: 3.84rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  .schedule-basic-item-row:hover,
  .schedule-builder-picker-row:not(.is-added):hover,
  .schedule-builder-advanced-item-row:hover,
  .schedule-builder-advanced-block-row:hover
) {
  border-color: rgba(214, 205, 255, 0.36) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-mode-segment {
  color: rgba(232, 241, 253, 0.84) !important;
  font-weight: 560 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-mode-segment.is-selected {
  color: #ffffff !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  [data-schedule-builder-picker-search],
  .schedule-builder-library-sort select,
  .schedule-basic-selector
) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.1), transparent 8rem),
    rgba(4, 14, 28, 0.95) !important;
  border-color: rgba(125, 211, 252, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(0, 0, 0, 0.16) !important;
  color: var(--zb-schedule-readable-text) !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: var(--zb-schedule-readable-text) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen [data-schedule-builder-picker-search]::placeholder {
  color: rgba(225, 237, 252, 0.76) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(225, 237, 252, 0.76) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  #currentItemMeta,
  .secondary-button:not(:disabled):not(.danger),
  .schedule-builder-library-tabs button:not(.is-selected):not(:disabled)
) {
  background:
    linear-gradient(135deg, rgba(90, 68, 155, 0.2), rgba(14, 165, 233, 0.08)),
    var(--zb-schedule-control-surface) !important;
  border: 1px solid var(--zb-schedule-control-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: rgba(247, 250, 255, 0.94) !important;
  font-size: 0.8rem !important;
  font-weight: 560 !important;
  line-height: 1.1 !important;
  min-height: 2.08rem !important;
  padding: 0.42rem 0.68rem !important;
  -webkit-text-fill-color: rgba(247, 250, 255, 0.94) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  #currentItemMeta,
  .secondary-button:not(:disabled):not(.danger),
  .schedule-builder-library-tabs button:not(.is-selected):not(:disabled)
):hover,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  #currentItemMeta,
  .secondary-button:not(:disabled):not(.danger),
  .schedule-builder-library-tabs button:not(.is-selected):not(:disabled)
):focus-visible {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(14, 165, 233, 0.14)),
    rgba(10, 24, 44, 0.9) !important;
  border-color: rgba(216, 202, 255, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-icon-button:not(:disabled) {
  min-width: 2.36rem !important;
  padding-inline: 0.58rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-small-button:not(:disabled) {
  min-height: 2.08rem !important;
  padding-inline: 0.68rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  .schedule-builder-icon-button,
  .schedule-builder-small-button
) {
  font-size: 0.8rem !important;
  line-height: 1.1 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  #currentItemMeta,
  .secondary-button.danger:not(:disabled),
  .schedule-builder-icon-button.danger:not(:disabled),
  .schedule-builder-small-button.danger:not(:disabled)
) {
  background:
    linear-gradient(135deg, rgba(127, 29, 29, 0.24), rgba(88, 28, 135, 0.08)),
    rgba(28, 13, 24, 0.78) !important;
  border-color: rgba(248, 113, 113, 0.36) !important;
  color: rgba(254, 226, 226, 0.94) !important;
  min-height: 2.08rem !important;
  padding: 0.42rem 0.68rem !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: rgba(254, 226, 226, 0.94) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  #currentItemMeta,
  .secondary-button:disabled,
  .schedule-builder-icon-button:disabled,
  .schedule-builder-small-button:disabled,
  .schedule-builder-picker-row.is-added > button
) {
  background: rgba(20, 30, 47, 0.62) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.52) !important;
  cursor: not-allowed !important;
  font-weight: 500 !important;
  min-height: 2.08rem !important;
  opacity: 1 !important;
  padding: 0.42rem 0.68rem !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.52) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-library-tabs button {
  font-weight: 560 !important;
  min-height: 2.04rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-library-tabs button.is-selected {
  color: #ffffff !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-today-summary strong {
  color: rgba(134, 239, 172, 0.94) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  -webkit-text-fill-color: rgba(134, 239, 172, 0.94) !important;
}

/* Multi-screen readability consistency pass. */
html body .practice-map-workspace,
html body .schedule-builder-preview-workspace,
html body #guidanceModalBackdrop.is-practice-map-modal,
html body #guidanceModalBackdrop.is-schedule-preview-modal,
html body[data-current-screen="log"] .log-card {
  --zb-consistency-text: rgba(250, 253, 255, 0.98);
  --zb-consistency-soft: rgba(232, 241, 253, 0.9);
  --zb-consistency-muted: rgba(216, 228, 246, 0.84);
  --zb-consistency-faint: rgba(203, 216, 235, 0.74);
  --zb-consistency-border: rgba(190, 209, 238, 0.24);
  --zb-consistency-control: rgba(8, 18, 34, 0.78);
  --zb-consistency-control-hover: rgba(13, 30, 54, 0.92);
  --zb-consistency-control-border: rgba(190, 209, 238, 0.28);
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-selected {
  background:
    radial-gradient(circle at 2% 0%, rgba(45, 212, 191, 0.22), transparent 15rem),
    linear-gradient(135deg, rgba(22, 50, 70, 0.92), rgba(11, 21, 40, 0.94)) !important;
  border-color: rgba(125, 211, 252, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(153, 246, 228, 0.1),
    0 18px 44px rgba(2, 8, 23, 0.24) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-selected .schedule-builder-advanced-block-header {
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.27), rgba(124, 58, 237, 0.19)),
    rgba(7, 21, 36, 0.86) !important;
  border-color: rgba(153, 246, 228, 0.52) !important;
  box-shadow:
    inset 4px 0 0 rgba(45, 212, 191, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-selected .schedule-builder-advanced-block-header .schedule-builder-advanced-row-copy strong {
  color: rgba(250, 253, 255, 0.99) !important;
  font-size: 1.12rem !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: rgba(250, 253, 255, 0.99) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-selected .schedule-builder-advanced-block-header .schedule-builder-advanced-row-copy small {
  color: rgba(226, 242, 253, 0.92) !important;
  font-weight: 400 !important;
  -webkit-text-fill-color: rgba(226, 242, 253, 0.92) !important;
}

html body .practice-map-workspace :is(
  .practice-map-title h3,
  .practice-map-goal-copy strong,
  .practice-map-card strong,
  .practice-map-empty-goal strong,
  .practice-map-side-card strong,
  .practice-map-mini-goal strong,
  .practice-map-summary-bar strong
) {
  color: var(--zb-consistency-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  -webkit-text-fill-color: var(--zb-consistency-text) !important;
}

html body .practice-map-workspace .practice-map-title h3 {
  font-size: 1.95rem !important;
  line-height: 1.04 !important;
}

html body .practice-map-workspace :is(
  .practice-map-title p,
  .practice-map-toolbar p,
  .practice-map-side-card p,
  .practice-map-title small,
  .practice-map-goal-copy small,
  .practice-map-card small,
  .practice-map-card-copy em,
  .practice-map-empty-goal span,
  .practice-map-mini-goal small,
  .practice-map-summary-bar small,
  .practice-map-pan-hint
) {
  color: var(--zb-consistency-muted) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.42 !important;
  -webkit-text-fill-color: var(--zb-consistency-muted) !important;
}

html body .practice-map-workspace .practice-map-goal-copy strong,
html body .practice-map-workspace .practice-map-card strong,
html body .practice-map-workspace .practice-map-side-card strong {
  font-size: 1.05rem !important;
}

html body .practice-map-workspace .practice-map-card-copy em,
html body .practice-map-workspace .practice-map-goal-copy small,
html body .practice-map-workspace .practice-map-card small {
  font-size: 0.82rem !important;
}

html body .practice-map-workspace .practice-map-goal-card em,
html body .practice-map-workspace .practice-map-more-chip,
html body .practice-map-workspace .practice-map-detail-chip-row span,
html body .practice-map-workspace .practice-map-side-card header span {
  color: rgba(226, 217, 255, 0.92) !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: rgba(226, 217, 255, 0.92) !important;
}

html body .practice-map-workspace :is(
  .practice-map-goal-card,
  .practice-map-card,
  .practice-map-empty-goal,
  .practice-map-side-card,
  .practice-map-summary-bar,
  .practice-map-toolbar,
  .practice-map-header,
  .practice-map-unlinked-list article
) {
  border-color: var(--zb-consistency-border) !important;
}

html body .practice-map-workspace .practice-map-summary-bar strong {
  font-size: 1.2rem !important;
}

html body .practice-map-workspace .practice-map-summary-bar article {
  border-color: rgba(190, 209, 238, 0.2) !important;
}

html body .practice-map-workspace :is(
  .practice-map-header-actions .secondary-button:not(:disabled),
  .practice-map-unlinked-actions .secondary-button:not(:disabled),
  .practice-map-mode-toggle button:not(.is-selected):not(:disabled)
) {
  background:
    linear-gradient(135deg, rgba(90, 68, 155, 0.18), rgba(14, 165, 233, 0.08)),
    var(--zb-consistency-control) !important;
  border: 1px solid var(--zb-consistency-control-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: var(--zb-consistency-soft) !important;
  font-size: 0.84rem !important;
  font-weight: 560 !important;
  min-height: 2.18rem !important;
  padding: 0.48rem 0.72rem !important;
  -webkit-text-fill-color: var(--zb-consistency-soft) !important;
}

html body .practice-map-workspace :is(
  .practice-map-header-actions .secondary-button:not(:disabled),
  .practice-map-unlinked-actions .secondary-button:not(:disabled),
  .practice-map-mode-toggle button:not(.is-selected):not(:disabled)
):hover,
html body .practice-map-workspace :is(
  .practice-map-header-actions .secondary-button:not(:disabled),
  .practice-map-unlinked-actions .secondary-button:not(:disabled),
  .practice-map-mode-toggle button:not(.is-selected):not(:disabled)
):focus-visible {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.24), rgba(14, 165, 233, 0.12)),
    var(--zb-consistency-control-hover) !important;
  border-color: rgba(216, 202, 255, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .practice-map-workspace .practice-map-mode-toggle button.is-selected {
  font-weight: 600 !important;
  min-height: 2.18rem !important;
}

html body .practice-map-workspace :is(.secondary-button:disabled, button:disabled) {
  background: rgba(20, 30, 47, 0.62) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.52) !important;
  cursor: not-allowed !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.52) !important;
}

html body .schedule-builder-preview-workspace :is(
  .schedule-builder-preview-topbar h3,
  .schedule-builder-day-header h3,
  .schedule-builder-day-header strong,
  .schedule-builder-preview-month-heading strong,
  .schedule-builder-preview-side-header strong,
  .schedule-builder-generated-section h4,
  .schedule-builder-generated-list summary strong,
  .schedule-builder-practice-block-detail > summary strong,
  .schedule-builder-practice-block-generated-items li > span strong,
  .schedule-builder-day-stats strong,
  .schedule-builder-day-side h4,
  .schedule-builder-day-side strong,
  .schedule-builder-day-explain h4,
  .schedule-builder-day-explain li strong
) {
  color: var(--zb-consistency-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  -webkit-text-fill-color: var(--zb-consistency-text) !important;
}

html body .schedule-builder-preview-workspace :is(
  .schedule-builder-preview-topbar h3,
  .schedule-builder-day-header h3
) {
  font-size: 1.72rem !important;
}

html body .schedule-builder-preview-workspace :is(
  .schedule-builder-preview-topbar p,
  .schedule-builder-day-header p,
  .schedule-builder-preview-month-heading span,
  .schedule-builder-preview-side-header span,
  .schedule-builder-preview-legend span:not(.schedule-builder-preview-dot),
  .schedule-builder-preview-upcoming article span,
  .schedule-builder-generated-section p,
  .schedule-builder-generated-list details p,
  .schedule-builder-generated-list summary small,
  .schedule-builder-generated-list summary em,
  .schedule-builder-practice-block-detail > summary small,
  .schedule-builder-practice-block-detail > summary em,
  .schedule-builder-practice-block-generated-items li > span small,
  .schedule-builder-day-stats span,
  .schedule-builder-day-side span,
  .schedule-builder-day-side p,
  .schedule-builder-day-explain li small,
  .schedule-builder-day-explain li em,
  .schedule-builder-day-explain p
) {
  color: var(--zb-consistency-muted) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.42 !important;
  -webkit-text-fill-color: var(--zb-consistency-muted) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-month-grid > span {
  color: var(--zb-consistency-soft) !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  -webkit-text-fill-color: var(--zb-consistency-soft) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-month-grid > button {
  color: var(--zb-consistency-soft) !important;
  -webkit-text-fill-color: var(--zb-consistency-soft) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-month-grid strong {
  color: var(--zb-consistency-text) !important;
  font-size: 1.06rem !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: var(--zb-consistency-text) !important;
}

html body .schedule-builder-preview-workspace :is(
  .schedule-builder-preview-main,
  .schedule-builder-preview-side-panel,
  .schedule-builder-day-side,
  .schedule-builder-generated-section,
  .schedule-builder-day-stats,
  .schedule-builder-preview-upcoming,
  .schedule-builder-generated-list details,
  .schedule-builder-practice-block-detail,
  .schedule-builder-practice-block-generated-items li,
  .schedule-builder-day-explain,
  .schedule-builder-day-explain li,
  .schedule-builder-day-footer
) {
  border-color: var(--zb-consistency-border) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-item-explanation dt,
html body .schedule-builder-preview-workspace .schedule-builder-day-explain span,
html body .schedule-builder-preview-workspace .schedule-builder-why-detail > summary,
html body .schedule-builder-preview-workspace .schedule-builder-day-tags span {
  color: rgba(191, 232, 255, 0.92) !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: rgba(191, 232, 255, 0.92) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-item-explanation dd {
  color: var(--zb-consistency-soft) !important;
  font-weight: 400 !important;
  -webkit-text-fill-color: var(--zb-consistency-soft) !important;
}

html body .schedule-builder-preview-workspace :is(
  .secondary-button.schedule-builder-preview-nav-button:not(:disabled),
  .schedule-builder-small-button:not(:disabled),
  .schedule-builder-icon-button:not(:disabled),
  .schedule-builder-preview-wide-action:not(:disabled)
),
html body #guidanceModalBackdrop.is-schedule-preview-modal .guidance-modal-actions .secondary-button:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(90, 68, 155, 0.18), rgba(14, 165, 233, 0.08)),
    var(--zb-consistency-control) !important;
  border: 1px solid var(--zb-consistency-control-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: var(--zb-consistency-soft) !important;
  font-size: 0.84rem !important;
  font-weight: 560 !important;
  line-height: 1.1 !important;
  min-height: 2.18rem !important;
  padding: 0.48rem 0.72rem !important;
  -webkit-text-fill-color: var(--zb-consistency-soft) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-icon-button:not(:disabled) {
  min-width: 2.36rem !important;
  padding-inline: 0.58rem !important;
}

html body .schedule-builder-preview-workspace :is(
  .secondary-button.schedule-builder-preview-nav-button:not(:disabled),
  .schedule-builder-small-button:not(:disabled),
  .schedule-builder-icon-button:not(:disabled),
  .schedule-builder-preview-wide-action:not(:disabled)
):hover,
html body .schedule-builder-preview-workspace :is(
  .secondary-button.schedule-builder-preview-nav-button:not(:disabled),
  .schedule-builder-small-button:not(:disabled),
  .schedule-builder-icon-button:not(:disabled),
  .schedule-builder-preview-wide-action:not(:disabled)
):focus-visible,
html body #guidanceModalBackdrop.is-schedule-preview-modal .guidance-modal-actions .secondary-button:not(:disabled):hover,
html body #guidanceModalBackdrop.is-schedule-preview-modal .guidance-modal-actions .secondary-button:not(:disabled):focus-visible {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.24), rgba(14, 165, 233, 0.12)),
    var(--zb-consistency-control-hover) !important;
  border-color: rgba(216, 202, 255, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .schedule-builder-preview-workspace :is(
  .secondary-button.schedule-builder-preview-nav-button:disabled,
  .schedule-builder-small-button:disabled,
  .schedule-builder-icon-button:disabled,
  .schedule-builder-preview-wide-action:disabled
),
html body #guidanceModalBackdrop.is-schedule-preview-modal .guidance-modal-actions .secondary-button:disabled {
  background: rgba(20, 30, 47, 0.62) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.52) !important;
  cursor: not-allowed !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.52) !important;
}

html body[data-current-screen="log"] .log-card :is(
  .screen-title,
  .progress-overview-header h3,
  .progress-review-header h3,
  .teacher-report-header h3,
  .progress-log-section h3,
  .progress-visual-card h4,
  .teacher-report-section h4,
  .progress-overview-stat strong,
  .teacher-report-stat strong,
  .progress-donut-chart strong,
  .teacher-report-recording-card strong,
  .teacher-report-row span,
  .teacher-report-row strong,
  .progress-donut-legend-item strong
) {
  color: var(--zb-consistency-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  -webkit-text-fill-color: var(--zb-consistency-text) !important;
}

html body[data-current-screen="log"] .log-card :is(
  .section-note,
  .progress-overview-header p,
  .progress-visual-card p,
  .progress-card-kicker,
  .progress-overview-stat span,
  .teacher-report-kicker,
  .teacher-report-stat span,
  .teacher-report-section p,
  .teacher-report-recording-card small,
  .teacher-report-row small,
  .teacher-report-recording-card p,
  .teacher-report-row p,
  .teacher-report-muted,
  .teacher-report-empty,
  .teacher-report-history-table th,
  .teacher-report-history-table td,
  .progress-donut-chart span,
  .progress-donut-legend-item span,
  .progress-empty-state,
  .activity-log-item small,
  .activity-log-item p,
  .status
) {
  color: var(--zb-consistency-muted) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.42 !important;
  -webkit-text-fill-color: var(--zb-consistency-muted) !important;
}

html body[data-current-screen="log"] .log-card .screen-title {
  font-weight: 600 !important;
}

html body[data-current-screen="log"] .log-card .progress-overview-stat strong,
html body[data-current-screen="log"] .log-card .teacher-report-stat strong {
  font-size: 1.42rem !important;
}

html body[data-current-screen="log"] .log-card .progress-donut-chart strong {
  font-size: 1.12rem !important;
}

html body[data-current-screen="log"] .log-card :is(
  .myzone-workspace-tabs,
  .progress-overview-panel,
  .progress-visual-card,
  .progress-review-panel,
  .teacher-report-stat,
  .teacher-report-section,
  .teacher-report-recording-card,
  .teacher-report-row,
  .teacher-report-history-table,
  .activity-log-item
) {
  border-color: var(--zb-consistency-border) !important;
}

html body[data-current-screen="log"] .log-card .myzone-workspace-tabs button {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.06), rgba(124, 58, 237, 0.08)),
    rgba(8, 18, 34, 0.58) !important;
  border-color: rgba(190, 209, 238, 0.16) !important;
  color: var(--zb-consistency-soft) !important;
  min-height: 3.05rem !important;
  -webkit-text-fill-color: var(--zb-consistency-soft) !important;
}

html body[data-current-screen="log"] .log-card .myzone-workspace-tabs button.is-active {
  background:
    radial-gradient(circle at 18% 0%, rgba(94, 234, 212, 0.2), transparent 58%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.36), rgba(15, 23, 42, 0.74)) !important;
  border-color: rgba(196, 181, 253, 0.42) !important;
}

html body[data-current-screen="log"] .log-card .myzone-workspace-tabs strong {
  color: var(--zb-consistency-text) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: var(--zb-consistency-text) !important;
}

html body[data-current-screen="log"] .log-card .myzone-workspace-tabs small {
  color: var(--zb-consistency-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  -webkit-text-fill-color: var(--zb-consistency-muted) !important;
}

html body[data-current-screen="log"] .log-card :is(
  .secondary-button:not(:disabled),
  .teacher-report-actions .secondary-button:not(:disabled),
  .progress-timeframe-control button:not(.is-active):not(:disabled)
) {
  background:
    linear-gradient(135deg, rgba(90, 68, 155, 0.18), rgba(14, 165, 233, 0.08)),
    var(--zb-consistency-control) !important;
  border: 1px solid var(--zb-consistency-control-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: var(--zb-consistency-soft) !important;
  font-size: 0.84rem !important;
  font-weight: 560 !important;
  line-height: 1.1 !important;
  min-height: 2.18rem !important;
  padding: 0.48rem 0.72rem !important;
  -webkit-text-fill-color: var(--zb-consistency-soft) !important;
}

html body[data-current-screen="log"] .log-card :is(
  .secondary-button:not(:disabled),
  .teacher-report-actions .secondary-button:not(:disabled),
  .progress-timeframe-control button:not(.is-active):not(:disabled)
):hover,
html body[data-current-screen="log"] .log-card :is(
  .secondary-button:not(:disabled),
  .teacher-report-actions .secondary-button:not(:disabled),
  .progress-timeframe-control button:not(.is-active):not(:disabled)
):focus-visible {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.24), rgba(14, 165, 233, 0.12)),
    var(--zb-consistency-control-hover) !important;
  border-color: rgba(216, 202, 255, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="log"] .log-card .progress-timeframe-control button.is-active {
  color: #ffffff !important;
  font-weight: 600 !important;
  min-height: 2.18rem !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="log"] .log-card .danger-button:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(127, 29, 29, 0.24), rgba(88, 28, 135, 0.08)),
    rgba(28, 13, 24, 0.78) !important;
  border-color: rgba(248, 113, 113, 0.36) !important;
  color: rgba(254, 226, 226, 0.94) !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: rgba(254, 226, 226, 0.94) !important;
}

html body[data-current-screen="log"] .log-card :is(.secondary-button:disabled, .danger-button:disabled, button:disabled) {
  background: rgba(20, 30, 47, 0.62) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.52) !important;
  cursor: not-allowed !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.52) !important;
}

html body :is(
  .getting-started-screen .getting-started-home.practice-welcome-mode .getting-started-hero,
  .practice-welcome-mode.dashboard-start-empty .practice-welcome-hero
) {
  background:
    radial-gradient(circle at 16% 0%, rgba(45, 212, 191, 0.14), transparent 16rem),
    linear-gradient(135deg, rgba(2, 6, 23, 0.52), rgba(15, 23, 42, 0.36)) !important;
  border: 1px solid rgba(226, 232, 240, 0.13) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 48px rgba(2, 6, 23, 0.24) !important;
}

html body :is(
  .getting-started-screen .getting-started-home.practice-welcome-mode .getting-started-hero h2,
  .practice-welcome-mode.dashboard-start-empty .practice-welcome-hero h3,
  .practice-welcome-mode.dashboard-start-empty .practice-welcome-brand
) {
  color: rgba(250, 253, 255, 0.99) !important;
  font-weight: 600 !important;
  text-shadow:
    0 2px 10px rgba(2, 6, 23, 0.68),
    0 12px 36px rgba(2, 6, 23, 0.48) !important;
  -webkit-text-fill-color: rgba(250, 253, 255, 0.99) !important;
}

html body :is(
  .getting-started-screen .getting-started-home.practice-welcome-mode .getting-started-hero p,
  .practice-welcome-mode.dashboard-start-empty .practice-welcome-hero #sessionEmptyStateText
) {
  color: rgba(240, 247, 255, 0.93) !important;
  font-weight: 400 !important;
  text-shadow: 0 2px 10px rgba(2, 6, 23, 0.72) !important;
  -webkit-text-fill-color: rgba(240, 247, 255, 0.93) !important;
}

/* Phase 5 visual hierarchy and polish pass. */
html body .practice-map-workspace,
html body .schedule-builder-preview-workspace,
html body[data-current-screen="log"] .log-card,
html body[data-current-screen="system"] .system-screen {
  --zb-polish-text: rgba(250, 253, 255, 0.98);
  --zb-polish-soft: rgba(232, 241, 253, 0.9);
  --zb-polish-muted: rgba(213, 226, 245, 0.82);
  --zb-polish-border: rgba(190, 209, 238, 0.24);
  --zb-polish-border-strong: rgba(125, 211, 252, 0.34);
  --zb-polish-panel: rgba(8, 18, 34, 0.76);
  --zb-polish-panel-strong: rgba(7, 16, 31, 0.9);
  --zb-polish-cyan: rgba(45, 212, 191, 0.2);
  --zb-polish-blue: rgba(96, 165, 250, 0.18);
  --zb-polish-purple: rgba(139, 92, 246, 0.2);
  --zb-polish-amber: rgba(245, 158, 11, 0.16);
  --zb-polish-green: rgba(34, 197, 94, 0.15);
  --zb-polish-red: rgba(248, 113, 113, 0.16);
}

html body .practice-map-workspace {
  background:
    radial-gradient(circle at 8% 4%, rgba(139, 92, 246, 0.22), transparent 20rem),
    radial-gradient(circle at 86% 24%, rgba(45, 212, 191, 0.16), transparent 25rem),
    radial-gradient(circle at 50% 100%, rgba(96, 165, 250, 0.1), transparent 28rem),
    linear-gradient(145deg, rgba(2, 8, 23, 0.99), rgba(4, 12, 26, 0.99)) !important;
  border-color: rgba(190, 209, 238, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 26px 72px rgba(2, 8, 23, 0.36) !important;
}

html body .practice-map-workspace :is(
  .practice-map-header,
  .practice-map-toolbar,
  .practice-map-summary-bar
) {
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.13), transparent 18rem),
    linear-gradient(145deg, rgba(13, 27, 48, 0.88), rgba(3, 10, 24, 0.92)) !important;
  border-color: rgba(190, 209, 238, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 48px rgba(2, 8, 23, 0.24) !important;
}

html body .practice-map-workspace .practice-map-toolbar {
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.13), transparent 17rem),
    linear-gradient(145deg, rgba(11, 23, 42, 0.88), rgba(3, 10, 24, 0.9)) !important;
}

html body .practice-map-workspace .practice-map-main {
  background:
    linear-gradient(90deg, rgba(190, 209, 238, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(190, 209, 238, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 20% 10%, rgba(96, 165, 250, 0.18), transparent 28%),
    radial-gradient(circle at 78% 72%, rgba(45, 212, 191, 0.14), transparent 36%),
    linear-gradient(145deg, rgba(2, 8, 23, 0.86), rgba(12, 24, 43, 0.62)) !important;
  background-size: 34px 34px, 34px 34px, auto, auto, auto !important;
  border-color: rgba(190, 209, 238, 0.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 18px 54px rgba(96, 165, 250, 0.055),
    0 18px 46px rgba(2, 8, 23, 0.26) !important;
}

html body .practice-map-workspace :is(.practice-map-goal-card, .practice-map-card, .practice-map-empty-goal) {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--practice-map-tone, #8b5cf6) 18%, transparent), transparent 58%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(2, 8, 23, 0.9)) !important;
  border-color: color-mix(in srgb, var(--practice-map-tone, #8b5cf6) 44%, rgba(190, 209, 238, 0.16)) !important;
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--practice-map-tone, #8b5cf6) 62%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 42px rgba(2, 8, 23, 0.28) !important;
}

html body .practice-map-workspace .practice-map-block-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.2), transparent 60%),
    linear-gradient(145deg, rgba(12, 26, 48, 0.96), rgba(2, 8, 23, 0.9)) !important;
}

html body .practice-map-workspace .practice-map-side-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.16), transparent 16rem),
    linear-gradient(145deg, rgba(13, 27, 48, 0.88), rgba(3, 10, 24, 0.92)) !important;
  border-color: rgba(190, 209, 238, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 18px 42px rgba(2, 8, 23, 0.22) !important;
}

html body .practice-map-workspace .practice-map-unlinked-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.16), transparent 14rem),
    linear-gradient(145deg, rgba(23, 21, 35, 0.88), rgba(3, 10, 24, 0.92)) !important;
  border-color: rgba(251, 191, 36, 0.24) !important;
}

html body .practice-map-workspace .practice-map-summary-bar article {
  background: rgba(8, 18, 34, 0.44) !important;
  border-color: rgba(190, 209, 238, 0.18) !important;
  border-radius: 0.72rem !important;
  box-shadow: inset 3px 0 0 rgba(125, 211, 252, 0.18) !important;
}

html body .practice-map-workspace .practice-map-summary-bar article.has-warning {
  background:
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.18), transparent 9rem),
    rgba(30, 24, 16, 0.5) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

html body .practice-map-workspace .practice-map-unlinked-list article,
html body .practice-map-workspace .practice-map-mini-goal,
html body .practice-map-workspace .practice-map-reference-chip {
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.1), transparent 10rem),
    rgba(8, 18, 34, 0.72) !important;
  border-color: rgba(190, 209, 238, 0.2) !important;
}

/* P12 Goal Map density lock: keep the map compact after the final nav stylesheet loads. */
html body .practice-map-workspace {
  gap: 0.62rem !important;
  padding: 0.72rem !important;
}

html body .practice-map-workspace .practice-map-header {
  padding: 0.62rem 0.72rem !important;
}

html body .practice-map-workspace .practice-map-title h3 {
  font-size: clamp(1.35rem, 1.65vw, 1.8rem) !important;
}

html body .practice-map-workspace .practice-map-title p {
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
  margin-top: 0.12rem !important;
}

html body .practice-map-workspace .practice-map-title small {
  font-size: 0.78rem !important;
  margin-top: 0.2rem !important;
}

html body .practice-map-workspace .practice-map-toolbar {
  gap: 0.52rem !important;
  grid-template-columns: auto minmax(13rem, 1fr) auto !important;
  padding: 0.5rem !important;
}

html body .practice-map-workspace .practice-map-layout {
  gap: 0.65rem !important;
  grid-template-columns: minmax(0, 1fr) clamp(13.5rem, 17vw, 16.5rem) !important;
}

html body .practice-map-workspace .practice-map-main {
  padding: 0.65rem !important;
}

html body .practice-map-workspace .practice-map-canvas {
  gap: 0.72rem !important;
  padding: 0.32rem 0.42rem 0.55rem !important;
}

html body .practice-map-workspace .practice-map-goal-column {
  gap: 0.52rem !important;
  min-width: clamp(14.5rem, 16vw, 16.25rem) !important;
}

html body .practice-map-workspace .practice-map-goal-card {
  gap: 0.5rem !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-height: 4.7rem !important;
  padding: 0.62rem !important;
}

html body .practice-map-workspace .practice-map-goal-card em {
  font-size: 0.68rem !important;
  grid-column: 2 !important;
  justify-self: start !important;
  padding: 0.16rem 0.42rem !important;
}

html body .practice-map-workspace :is(.practice-map-goal-icon, .practice-map-card-icon, .practice-map-summary-bar article > span) {
  height: 1.78rem !important;
  width: 1.78rem !important;
}

html body .practice-map-workspace .practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-goal-card {
  background:
    radial-gradient(circle at 0% 0%, var(--practice-map-column-soft), transparent 70%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.91), rgba(2, 8, 23, 0.9)) !important;
  border-color: var(--practice-map-column-border) !important;
}

html body .practice-map-workspace .practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-block-card {
  background:
    radial-gradient(circle at 0% 0%, var(--practice-map-column-soft), transparent 64%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(2, 8, 23, 0.84)) !important;
  border-color: var(--practice-map-column-border) !important;
}

html body .practice-map-workspace .practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-item-card {
  background:
    radial-gradient(circle at 0% 0%, var(--practice-map-column-soft), transparent 58%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(2, 8, 23, 0.76)) !important;
  border-left: 2px solid color-mix(in srgb, var(--practice-map-column-tone) 42%, transparent) !important;
}

html body .practice-map-workspace .practice-map-card {
  gap: 0.44rem !important;
  padding: 0.48rem 0.52rem !important;
}

html body .practice-map-workspace .practice-map-side {
  gap: 0.52rem !important;
}

html body .practice-map-workspace .practice-map-side-card {
  gap: 0.42rem !important;
  padding: 0.62rem !important;
}

html body .practice-map-workspace .practice-map-unlinked-card summary b {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
  border-radius: 999px !important;
  color: #fde68a !important;
  font-size: 0.78rem !important;
  padding: 0.16rem 0.45rem !important;
}

html body .practice-map-workspace .practice-map-summary-bar {
  gap: 0.45rem !important;
  padding: 0.55rem !important;
}

html body .practice-map-workspace .practice-map-summary-bar strong {
  font-size: 1.05rem !important;
}

html body .schedule-builder-preview-workspace :is(
  .schedule-builder-preview-main,
  .schedule-builder-preview-side-panel,
  .schedule-builder-day-side,
  .schedule-builder-generated-section,
  .schedule-builder-day-stats,
  .schedule-builder-preview-upcoming,
  .schedule-builder-day-explain,
  .schedule-builder-day-footer
) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 42px rgba(2, 8, 23, 0.2) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-main {
  background:
    radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.18), transparent 19rem),
    radial-gradient(circle at 86% 10%, rgba(45, 212, 191, 0.11), transparent 19rem),
    linear-gradient(145deg, rgba(12, 24, 43, 0.86), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(125, 211, 252, 0.26) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-side-panel {
  background:
    radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.17), transparent 17rem),
    linear-gradient(145deg, rgba(13, 22, 42, 0.9), rgba(4, 10, 24, 0.92)) !important;
  border-color: rgba(196, 181, 253, 0.24) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-month-grid {
  background: rgba(3, 10, 24, 0.72) !important;
  border-color: rgba(190, 209, 238, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(125, 211, 252, 0.08) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-month-grid > span {
  background:
    linear-gradient(180deg, rgba(14, 27, 50, 0.96), rgba(7, 15, 30, 0.94)) !important;
  border-color: rgba(190, 209, 238, 0.14) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-month-grid > button {
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.08), transparent 72%),
    rgba(3, 10, 24, 0.62) !important;
  border-color: rgba(190, 209, 238, 0.13) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-month-grid > button:hover,
html body .schedule-builder-preview-workspace .schedule-builder-preview-month-grid > button:focus-visible {
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.14), transparent 70%),
    rgba(16, 31, 52, 0.8) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-month-grid > button.is-selected {
  background:
    radial-gradient(circle at 92% 0%, rgba(45, 212, 191, 0.3), transparent 62%),
    linear-gradient(145deg, rgba(17, 46, 67, 0.96), rgba(8, 18, 34, 0.94)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(45, 212, 191, 0.74),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-upcoming {
  background:
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.13), transparent 16rem),
    linear-gradient(145deg, rgba(18, 24, 37, 0.88), rgba(4, 10, 24, 0.9)) !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-preview-upcoming article {
  background: rgba(8, 18, 34, 0.52) !important;
  border-left-color: rgba(251, 191, 36, 0.34) !important;
  border-radius: 0.58rem !important;
  box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.18) !important;
  padding: 0.4rem 0.52rem 0.4rem 0.68rem !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-generated-section {
  background:
    radial-gradient(circle at 0% 0%, rgba(125, 211, 252, 0.11), transparent 13rem),
    linear-gradient(145deg, rgba(12, 24, 43, 0.82), rgba(3, 10, 24, 0.88)) !important;
  border-color: rgba(190, 209, 238, 0.22) !important;
  box-shadow:
    inset 3px 0 0 rgba(125, 211, 252, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 42px rgba(2, 8, 23, 0.2) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-generated-section.is-practice-block {
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.16), transparent 13rem),
    linear-gradient(145deg, rgba(20, 20, 50, 0.84), rgba(4, 10, 24, 0.9)) !important;
  border-color: rgba(196, 181, 253, 0.24) !important;
  box-shadow:
    inset 3px 0 0 rgba(167, 139, 250, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 42px rgba(2, 8, 23, 0.2) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-generated-section.is-event,
html body .schedule-builder-preview-workspace .schedule-builder-generated-section.is-note {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.12), transparent 13rem),
    linear-gradient(145deg, rgba(10, 32, 34, 0.82), rgba(4, 10, 24, 0.9)) !important;
  border-color: rgba(74, 222, 128, 0.2) !important;
}

html body .schedule-builder-preview-workspace :is(
  .schedule-builder-generated-list details,
  .schedule-builder-practice-block-detail,
  .schedule-builder-practice-block-generated-items li,
  .schedule-builder-day-explain li
) {
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.08), transparent 70%),
    rgba(3, 10, 24, 0.62) !important;
  border-color: rgba(190, 209, 238, 0.17) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-day-stats {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 16rem),
    linear-gradient(145deg, rgba(12, 24, 43, 0.86), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-day-stats article {
  background: rgba(8, 18, 34, 0.46) !important;
  border-left-color: rgba(190, 209, 238, 0.18) !important;
  border-radius: 0.62rem !important;
  box-shadow: inset 3px 0 0 rgba(45, 212, 191, 0.18) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-day-side {
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.15), transparent 16rem),
    linear-gradient(145deg, rgba(13, 22, 42, 0.9), rgba(4, 10, 24, 0.92)) !important;
  border-color: rgba(196, 181, 253, 0.22) !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-day-explain {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.16), transparent 16rem),
    linear-gradient(145deg, rgba(9, 33, 42, 0.88), rgba(4, 10, 24, 0.92)) !important;
  border-color: rgba(94, 234, 212, 0.28) !important;
}

html body .schedule-builder-preview-workspace :is(.schedule-builder-day-side section, .schedule-builder-day-explain section) {
  background: rgba(3, 10, 24, 0.34) !important;
  border: 1px solid rgba(190, 209, 238, 0.12) !important;
  border-radius: 0.7rem !important;
  padding: 0.58rem !important;
}

html body .schedule-builder-preview-workspace .schedule-builder-day-footer {
  background:
    linear-gradient(145deg, rgba(13, 27, 48, 0.86), rgba(3, 10, 24, 0.92)) !important;
  border-color: rgba(190, 209, 238, 0.2) !important;
}

html body[data-current-screen="log"] .log-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.15), transparent 23rem),
    radial-gradient(circle at 88% 4%, rgba(139, 92, 246, 0.18), transparent 25rem),
    linear-gradient(145deg, rgba(6, 14, 28, 0.98), rgba(2, 8, 23, 0.98)) !important;
  border-color: rgba(190, 209, 238, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 26px 72px rgba(2, 8, 23, 0.3) !important;
}

html body[data-current-screen="log"] .log-card .section-header {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(4, 12, 26, 0.9), rgba(22, 18, 50, 0.74)) !important;
  border: 1px solid rgba(190, 209, 238, 0.2) !important;
  border-radius: 1rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 42px rgba(2, 8, 23, 0.2) !important;
  padding: 0.92rem 1rem !important;
}

html body[data-current-screen="log"] .log-card .section-header .screen-title,
html body[data-current-screen="log"] .log-card .section-header .section-note {
  text-shadow: 0 2px 12px rgba(2, 8, 23, 0.62) !important;
}

html body[data-current-screen="log"] .log-card .help-bubble {
  background: rgba(8, 18, 34, 0.8) !important;
  border-color: rgba(125, 211, 252, 0.34) !important;
  color: rgba(191, 232, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(191, 232, 255, 0.96) !important;
}

html body[data-current-screen="log"] .log-card .help-bubble .help-bubble-text {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.11), transparent 12rem),
    rgba(5, 12, 25, 0.98) !important;
  border-color: rgba(190, 209, 238, 0.28) !important;
  box-shadow: 0 18px 42px rgba(2, 8, 23, 0.42) !important;
  color: rgba(241, 247, 255, 0.96) !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: rgba(241, 247, 255, 0.96) !important;
}

html body[data-current-screen="log"] .log-card :is(
  .progress-overview-panel,
  .teacher-report-panel,
  .progress-review-panel
) {
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.13), transparent 20rem),
    linear-gradient(145deg, rgba(10, 22, 39, 0.9), rgba(3, 10, 24, 0.92)) !important;
  border: 1px solid rgba(190, 209, 238, 0.22) !important;
  border-radius: 1.15rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 18px 46px rgba(2, 8, 23, 0.22) !important;
  padding: 1rem !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.15), transparent 20rem),
    linear-gradient(145deg, rgba(14, 19, 42, 0.9), rgba(3, 10, 24, 0.92)) !important;
}

html body[data-current-screen="log"] .log-card .progress-review-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.16), transparent 20rem),
    linear-gradient(145deg, rgba(10, 22, 39, 0.9), rgba(3, 10, 24, 0.92)) !important;
}

html body[data-current-screen="log"] .log-card :is(
  .progress-overview-header,
  .teacher-report-header,
  .progress-review-header,
  .progress-log-section
) {
  background: rgba(3, 10, 24, 0.44) !important;
  border: 1px solid rgba(190, 209, 238, 0.14) !important;
  border-radius: 0.9rem !important;
  padding: 0.78rem 0.85rem !important;
}

html body[data-current-screen="log"] .log-card .progress-overview-stats {
  display: grid !important;
  gap: 0.72rem !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body[data-current-screen="log"] .log-card .progress-visual-grid {
  display: grid !important;
  gap: 0.9rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body[data-current-screen="log"] .log-card :is(.progress-overview-stat, .teacher-report-stat) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.13), transparent 10rem),
    linear-gradient(145deg, rgba(15, 28, 49, 0.82), rgba(4, 10, 24, 0.86)) !important;
  border: 1px solid rgba(125, 211, 252, 0.22) !important;
  border-radius: 0.9rem !important;
  box-shadow:
    inset 3px 0 0 rgba(45, 212, 191, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  padding: 0.85rem !important;
}

html body[data-current-screen="log"] .log-card .progress-visual-card,
html body[data-current-screen="log"] .log-card .teacher-report-section {
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.11), transparent 13rem),
    linear-gradient(145deg, rgba(12, 24, 43, 0.84), rgba(3, 10, 24, 0.88)) !important;
  border-color: rgba(190, 209, 238, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 34px rgba(2, 8, 23, 0.18) !important;
}

html body[data-current-screen="log"] .log-card .progress-trend-card,
html body[data-current-screen="log"] .log-card .teacher-report-trend-section {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 13rem),
    linear-gradient(145deg, rgba(10, 32, 42, 0.84), rgba(3, 10, 24, 0.88)) !important;
}

html body[data-current-screen="log"] .log-card :is(
  .teacher-report-row,
  .teacher-report-recording-card,
  .teacher-report-history-table,
  .activity-log-item
) {
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.08), transparent 70%),
    rgba(3, 10, 24, 0.62) !important;
  border-color: rgba(190, 209, 238, 0.18) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table th {
  background: rgba(8, 18, 34, 0.72) !important;
  color: rgba(226, 238, 255, 0.86) !important;
  -webkit-text-fill-color: rgba(226, 238, 255, 0.86) !important;
}

html body[data-current-screen="log"] .log-card .progress-trend-bars span {
  background: rgba(190, 209, 238, 0.2) !important;
}

html body[data-current-screen="log"] .log-card .progress-trend-bars span.has-practice {
  background: linear-gradient(180deg, rgba(103, 232, 249, 0.98), rgba(139, 92, 246, 0.96)) !important;
  box-shadow: 0 8px 22px rgba(34, 211, 238, 0.2) !important;
}

html body[data-current-screen="log"] .log-card .progress-donut-chart::after {
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.06), transparent 55%),
    rgba(5, 12, 25, 0.94) !important;
}

html body[data-current-screen="log"] .log-card .progress-donut-legend-item {
  background: rgba(3, 10, 24, 0.34) !important;
  border: 1px solid rgba(190, 209, 238, 0.12) !important;
  border-radius: 0.6rem !important;
  padding: 0.42rem 0.5rem !important;
}

html body[data-current-screen="system"] .system-screen {
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.12), transparent 26rem),
    radial-gradient(circle at 88% 4%, rgba(96, 165, 250, 0.14), transparent 28rem),
    linear-gradient(145deg, rgba(7, 14, 27, 0.98), rgba(3, 8, 18, 0.99)) !important;
  border-color: rgba(190, 209, 238, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 72px rgba(2, 8, 23, 0.28) !important;
}

html body[data-current-screen="system"] .system-screen .section-header {
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.12), transparent 18rem),
    rgba(8, 18, 34, 0.58) !important;
  border: 1px solid rgba(190, 209, 238, 0.16) !important;
  border-radius: 1rem !important;
  padding: 0.86rem 0.95rem !important;
}

html body[data-current-screen="system"] .system-screen .system-redesign-group {
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.1), transparent 20rem),
    linear-gradient(150deg, rgba(16, 28, 47, 0.86), rgba(5, 12, 25, 0.9)) !important;
  border-color: rgba(190, 209, 238, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 46px rgba(2, 8, 23, 0.22) !important;
}

html body[data-current-screen="system"] .system-screen .system-data-protection-group {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.13), transparent 22rem),
    linear-gradient(150deg, rgba(12, 32, 42, 0.86), rgba(5, 12, 25, 0.91)) !important;
}

html body[data-current-screen="system"] .system-screen .system-recovery-group {
  background:
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.11), transparent 22rem),
    linear-gradient(150deg, rgba(31, 24, 26, 0.84), rgba(5, 12, 25, 0.91)) !important;
}

html body[data-current-screen="system"] .system-screen .system-about-group {
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.11), transparent 20rem),
    linear-gradient(150deg, rgba(17, 22, 45, 0.86), rgba(5, 12, 25, 0.91)) !important;
}

html body[data-current-screen="system"] .system-screen .system-redesign-group-heading {
  border-bottom-color: rgba(190, 209, 238, 0.16) !important;
}

html body[data-current-screen="system"] .system-screen :is(
  .system-redesign-card,
  .system-health-panel,
  .system-about-card,
  .restore-preview-panel,
  .integrity-health-summary,
  .integrity-review-panel
) {
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.1), transparent 14rem),
    linear-gradient(145deg, rgba(13, 25, 43, 0.88), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(190, 209, 238, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 34px rgba(2, 8, 23, 0.18) !important;
}

html body[data-current-screen="system"] .system-screen .backup-protection-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.16), transparent 16rem),
    linear-gradient(145deg, rgba(9, 35, 43, 0.9), rgba(3, 10, 24, 0.91)) !important;
  border-color: rgba(94, 234, 212, 0.28) !important;
}

html body[data-current-screen="system"] .system-screen .backup-folder-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.13), transparent 14rem),
    linear-gradient(145deg, rgba(30, 25, 18, 0.86), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(251, 191, 36, 0.22) !important;
}

html body[data-current-screen="system"] .system-screen .backup-export-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.12), transparent 14rem),
    linear-gradient(145deg, rgba(10, 31, 29, 0.86), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(74, 222, 128, 0.22) !important;
}

html body[data-current-screen="system"] .system-screen .backup-restore-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.13), transparent 14rem),
    linear-gradient(145deg, rgba(12, 24, 43, 0.88), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
}

html body[data-current-screen="system"] .system-screen .system-factory-reset-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.13), transparent 14rem),
    linear-gradient(145deg, rgba(32, 17, 26, 0.86), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(248, 113, 113, 0.24) !important;
}

html body[data-current-screen="system"] .system-screen :is(
  .placeholder-panel > strong,
  .system-redesign-card > strong,
  .system-redesign-group-heading h3,
  .system-health-panel h3,
  .integrity-panel-label strong,
  .system-about-card strong,
  .system-about-card b
) {
  color: var(--zb-polish-text) !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: var(--zb-polish-text) !important;
}

html body[data-current-screen="system"] .system-screen :is(
  .section-note,
  .placeholder-panel p,
  .system-health-panel p,
  .backup-method-details p,
  .integrity-panel-label span,
  .integrity-empty,
  .integrity-detail,
  .system-about-card small,
  .system-about-card span
) {
  color: var(--zb-polish-muted) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  -webkit-text-fill-color: var(--zb-polish-muted) !important;
}

html body[data-current-screen="system"] .system-screen .system-section-kicker {
  color: rgba(191, 232, 255, 0.9) !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: rgba(191, 232, 255, 0.9) !important;
}

html body[data-current-screen="system"] .system-screen .backup-method-details {
  background: rgba(3, 10, 24, 0.42) !important;
  border-color: rgba(190, 209, 238, 0.16) !important;
}

html body[data-current-screen="system"] .system-screen .backup-method-details summary {
  background: rgba(8, 18, 34, 0.5) !important;
  color: var(--zb-polish-soft) !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: var(--zb-polish-soft) !important;
}

html body[data-current-screen="system"] .system-screen .backup-protection-metrics span,
html body[data-current-screen="system"] .system-screen .integrity-issue,
html body[data-current-screen="system"] .system-screen .integrity-map-card,
html body[data-current-screen="system"] .system-screen .integrity-map-empty {
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.08), transparent 10rem),
    rgba(3, 10, 24, 0.58) !important;
  border-color: rgba(190, 209, 238, 0.16) !important;
}

html body[data-current-screen="system"] .system-screen .backup-protection-metrics small {
  color: rgba(213, 226, 245, 0.78) !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: rgba(213, 226, 245, 0.78) !important;
}

html body[data-current-screen="system"] .system-screen :is(.backup-status, .status[data-tone="neutral"]) {
  background: rgba(8, 18, 34, 0.68) !important;
  border: 1px solid rgba(190, 209, 238, 0.18) !important;
  color: rgba(226, 238, 255, 0.86) !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: rgba(226, 238, 255, 0.86) !important;
}

html body[data-current-screen="system"] .system-screen .status[data-tone="neutral"]:not(.backup-status) {
  border-radius: 0.78rem !important;
  display: block !important;
  margin-top: 0.72rem !important;
  padding: 0.62rem 0.7rem !important;
}

html body[data-current-screen="system"] .system-screen .backup-status[data-tone="neutral"] {
  background:
    linear-gradient(135deg, rgba(51, 65, 85, 0.58), rgba(67, 56, 202, 0.16)),
    rgba(8, 18, 34, 0.68) !important;
  border-color: rgba(196, 181, 253, 0.22) !important;
}

html body[data-current-screen="system"] .system-screen .backup-status[data-tone="success"] {
  background: rgba(21, 128, 61, 0.2) !important;
  border-color: rgba(74, 222, 128, 0.3) !important;
  color: rgba(187, 247, 208, 0.96) !important;
  -webkit-text-fill-color: rgba(187, 247, 208, 0.96) !important;
}

html body[data-current-screen="system"] .system-screen .backup-status[data-tone="error"] {
  background: rgba(127, 29, 29, 0.24) !important;
  border-color: rgba(248, 113, 113, 0.32) !important;
  color: rgba(254, 202, 202, 0.96) !important;
  -webkit-text-fill-color: rgba(254, 202, 202, 0.96) !important;
}

html body[data-current-screen="system"] .system-screen .backup-protection-state-pill {
  color: rgba(248, 250, 252, 0.96) !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.96) !important;
}

html body[data-current-screen="system"] .system-screen .secondary-button:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(90, 68, 155, 0.18), rgba(14, 165, 233, 0.08)),
    rgba(8, 18, 34, 0.78) !important;
  border: 1px solid rgba(190, 209, 238, 0.26) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: var(--zb-polish-soft) !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: var(--zb-polish-soft) !important;
}

html body[data-current-screen="system"] .system-screen .secondary-button:not(:disabled):hover,
html body[data-current-screen="system"] .system-screen .secondary-button:not(:disabled):focus-visible {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.24), rgba(14, 165, 233, 0.12)),
    rgba(13, 30, 54, 0.92) !important;
  border-color: rgba(216, 202, 255, 0.4) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="system"] .system-screen .secondary-button.danger:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(127, 29, 29, 0.26), rgba(88, 28, 135, 0.08)),
    rgba(28, 13, 24, 0.78) !important;
  border-color: rgba(248, 113, 113, 0.36) !important;
  color: rgba(254, 226, 226, 0.95) !important;
  -webkit-text-fill-color: rgba(254, 226, 226, 0.95) !important;
}

html body[data-current-screen="system"] .system-screen .secondary-button:disabled {
  background: rgba(20, 30, 47, 0.62) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.54) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.54) !important;
}

@media (max-width: 760px) {
  html body[data-current-screen="log"] .log-card .progress-overview-stats,
  html body[data-current-screen="log"] .log-card .progress-visual-grid {
    grid-template-columns: 1fr !important;
  }
}

/* MyZone refinement pass: compact dashboard header, premium graph/report hierarchy. */
html body[data-current-screen="log"] .log-card {
  --zb-myzone-text: rgba(250, 253, 255, 0.98);
  --zb-myzone-soft: rgba(232, 241, 253, 0.91);
  --zb-myzone-muted: rgba(215, 228, 246, 0.84);
  --zb-myzone-faint: rgba(196, 211, 234, 0.74);
  --zb-myzone-border: rgba(190, 209, 238, 0.22);
  --zb-myzone-panel: rgba(5, 13, 27, 0.72);
  --zb-myzone-panel-soft: rgba(10, 23, 41, 0.76);
  display: grid !important;
  gap: 0.68rem !important;
  padding: 0.86rem !important;
}

html body[data-current-screen="log"] .log-card .section-header {
  align-items: center !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 13rem),
    linear-gradient(135deg, rgba(7, 18, 34, 0.88), rgba(18, 17, 43, 0.74)) !important;
  border-color: rgba(190, 209, 238, 0.18) !important;
  border-radius: 0.86rem !important;
  gap: 0.72rem !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0.62rem 0.72rem !important;
}

html body[data-current-screen="log"] .log-card .section-header .screen-title {
  color: var(--zb-myzone-text) !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  margin: 0 0 0.14rem !important;
  text-shadow: 0 2px 10px rgba(2, 8, 23, 0.48) !important;
  -webkit-text-fill-color: var(--zb-myzone-text) !important;
}

html body[data-current-screen="log"] .log-card .section-header .section-note {
  color: var(--zb-myzone-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
  margin: 0 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--zb-myzone-muted) !important;
}

html body[data-current-screen="log"] .log-card .section-header .button-row {
  gap: 0.42rem !important;
}

html body[data-current-screen="log"] .log-card .section-header :is(.secondary-button, .danger-button) {
  min-height: 2rem !important;
  padding: 0.4rem 0.62rem !important;
}

html body[data-current-screen="log"] .log-card .myzone-workspace-tabs {
  background: rgba(4, 12, 26, 0.66) !important;
  border-color: rgba(190, 209, 238, 0.16) !important;
  border-radius: 0.86rem !important;
  gap: 0.32rem !important;
  margin: 0 !important;
  padding: 0.3rem !important;
}

html body[data-current-screen="log"] .log-card .myzone-workspace-tabs button {
  border-radius: 0.68rem !important;
  gap: 0.08rem !important;
  min-height: 2.46rem !important;
  padding: 0.46rem 0.62rem !important;
}

html body[data-current-screen="log"] .log-card .myzone-workspace-tabs strong {
  font-size: 0.95rem !important;
  font-weight: 590 !important;
  line-height: 1.14 !important;
}

html body[data-current-screen="log"] .log-card .myzone-workspace-tabs small {
  color: var(--zb-myzone-faint) !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
  -webkit-text-fill-color: var(--zb-myzone-faint) !important;
}

html body[data-current-screen="log"] .log-card .myzone-workspace-tabs button.is-active {
  background:
    radial-gradient(circle at 14% 0%, rgba(94, 234, 212, 0.18), transparent 58%),
    linear-gradient(135deg, rgba(44, 38, 94, 0.76), rgba(8, 18, 34, 0.82)) !important;
  border-color: rgba(196, 181, 253, 0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(2, 8, 23, 0.18) !important;
}

html body[data-current-screen="log"] .log-card :is(
  .progress-overview-panel,
  .teacher-report-panel,
  .progress-review-panel
) {
  border-radius: 0.96rem !important;
  gap: 0.76rem !important;
  margin: 0 !important;
  padding: 0.82rem !important;
}

html body[data-current-screen="log"] .log-card :is(
  .progress-overview-header,
  .teacher-report-header,
  .progress-review-header,
  .progress-log-section
) {
  align-items: center !important;
  background:
    linear-gradient(135deg, rgba(4, 14, 30, 0.78), rgba(20, 22, 49, 0.48)) !important;
  border-color: rgba(190, 209, 238, 0.14) !important;
  border-radius: 0.78rem !important;
  display: flex !important;
  gap: 0.72rem !important;
  justify-content: space-between !important;
  padding: 0.58rem 0.66rem !important;
}

html body[data-current-screen="log"] .log-card :is(
  .progress-overview-header h3,
  .teacher-report-header h3,
  .progress-review-header h3,
  .progress-log-section h3,
  .progress-visual-card h4,
  .teacher-report-section h4
) {
  color: var(--zb-myzone-text) !important;
  font-weight: 590 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  margin: 0.12rem 0 0 !important;
  -webkit-text-fill-color: var(--zb-myzone-text) !important;
}

html body[data-current-screen="log"] .log-card :is(
  .progress-overview-header h3,
  .teacher-report-header h3,
  .progress-review-header h3,
  .progress-log-section h3
) {
  font-size: 1.18rem !important;
}

html body[data-current-screen="log"] .log-card :is(.progress-visual-card h4, .teacher-report-section h4) {
  font-size: 1.02rem !important;
  margin-bottom: 0.34rem !important;
}

html body[data-current-screen="log"] .log-card :is(
  .progress-kicker,
  .teacher-report-kicker,
  .progress-card-kicker
) {
  color: rgba(167, 243, 238, 0.9) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: rgba(167, 243, 238, 0.9) !important;
}

html body[data-current-screen="log"] .log-card :is(
  .progress-overview-header p,
  .teacher-report-header p,
  .progress-review-header p,
  .progress-log-section p,
  .progress-visual-card p,
  .teacher-report-section p,
  .teacher-report-recording-card small,
  .teacher-report-row small,
  .teacher-report-history-table td,
  .activity-log-item small,
  .activity-log-item p,
  .progress-empty-state,
  .teacher-report-empty,
  .teacher-report-muted
) {
  color: var(--zb-myzone-muted) !important;
  font-size: 0.86rem !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  -webkit-text-fill-color: var(--zb-myzone-muted) !important;
}

html body[data-current-screen="log"] .log-card .progress-overview-stats,
html body[data-current-screen="log"] .log-card .teacher-report-summary {
  gap: 0.56rem !important;
}

html body[data-current-screen="log"] .log-card :is(.progress-overview-stat, .teacher-report-stat) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.1), transparent 9rem),
    linear-gradient(145deg, rgba(12, 27, 48, 0.8), rgba(4, 10, 24, 0.86)) !important;
  border-color: rgba(125, 211, 252, 0.2) !important;
  border-radius: 0.72rem !important;
  gap: 0.12rem !important;
  min-height: 4.1rem !important;
  padding: 0.66rem 0.72rem !important;
}

html body[data-current-screen="log"] .log-card :is(.progress-overview-stat strong, .teacher-report-stat strong) {
  color: var(--zb-myzone-text) !important;
  font-size: 1.48rem !important;
  font-weight: 580 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  -webkit-text-fill-color: var(--zb-myzone-text) !important;
}

html body[data-current-screen="log"] .log-card :is(.progress-overview-stat span, .teacher-report-stat span) {
  color: var(--zb-myzone-faint) !important;
  font-size: 0.8rem !important;
  font-weight: 430 !important;
  line-height: 1.2 !important;
  -webkit-text-fill-color: var(--zb-myzone-faint) !important;
}

html body[data-current-screen="log"] .log-card .progress-visual-grid,
html body[data-current-screen="log"] .log-card .teacher-report-grid,
html body[data-current-screen="log"] .log-card .progress-review-grid {
  gap: 0.68rem !important;
}

html body[data-current-screen="log"] .log-card .progress-visual-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.1), transparent 12rem),
    linear-gradient(145deg, rgba(13, 25, 45, 0.86), rgba(3, 10, 24, 0.92)) !important;
  border-color: rgba(190, 209, 238, 0.2) !important;
  border-radius: 0.88rem !important;
  display: grid !important;
  gap: 0.72rem !important;
  padding: 0.86rem !important;
}

html body[data-current-screen="log"] .log-card .progress-trend-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 15rem),
    linear-gradient(145deg, rgba(8, 32, 43, 0.88), rgba(3, 10, 24, 0.92)) !important;
  border-color: rgba(94, 234, 212, 0.24) !important;
}

html body[data-current-screen="log"] .log-card .progress-trend-bars {
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.02)),
    rgba(3, 10, 24, 0.35) !important;
  border: 1px solid rgba(190, 209, 238, 0.1) !important;
  border-radius: 0.72rem !important;
  min-height: 8.4rem !important;
  padding: 0.64rem 0.58rem 0.5rem !important;
}

html body[data-current-screen="log"] .log-card .progress-donut-breakdown {
  background: rgba(3, 10, 24, 0.28) !important;
  border: 1px solid rgba(190, 209, 238, 0.09) !important;
  border-radius: 0.74rem !important;
  gap: 0.76rem !important;
  padding: 0.64rem !important;
}

html body[data-current-screen="log"] .log-card .progress-donut-chart strong {
  font-size: 1.08rem !important;
  font-weight: 590 !important;
}

html body[data-current-screen="log"] .log-card .progress-donut-chart span {
  color: var(--zb-myzone-faint) !important;
  font-size: 0.74rem !important;
  font-weight: 430 !important;
  -webkit-text-fill-color: var(--zb-myzone-faint) !important;
}

html body[data-current-screen="log"] .log-card .progress-donut-legend-item {
  background: rgba(8, 18, 34, 0.46) !important;
  border-color: rgba(190, 209, 238, 0.12) !important;
  min-height: 2rem !important;
}

html body[data-current-screen="log"] .log-card .progress-donut-legend-item span {
  color: var(--zb-myzone-soft) !important;
  font-size: 0.84rem !important;
  -webkit-text-fill-color: var(--zb-myzone-soft) !important;
}

html body[data-current-screen="log"] .log-card .progress-donut-legend-item strong {
  color: var(--zb-myzone-text) !important;
  font-size: 0.84rem !important;
  font-weight: 570 !important;
  -webkit-text-fill-color: var(--zb-myzone-text) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-section {
  border-radius: 0.86rem !important;
  display: grid !important;
  gap: 0.54rem !important;
  padding: 0.86rem !important;
  position: relative !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-grid > .teacher-report-section:nth-of-type(4),
html body[data-current-screen="log"] .log-card .progress-review-grid > .teacher-report-section:nth-of-type(1) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 13rem),
    linear-gradient(145deg, rgba(9, 32, 42, 0.84), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(94, 234, 212, 0.22) !important;
  box-shadow:
    inset 3px 0 0 rgba(45, 212, 191, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-grid > .teacher-report-section:nth-of-type(5),
html body[data-current-screen="log"] .log-card .progress-review-grid > .teacher-report-section:nth-of-type(2) {
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.12), transparent 13rem),
    linear-gradient(145deg, rgba(11, 24, 48, 0.84), rgba(3, 10, 24, 0.9)) !important;
  border-color: rgba(125, 211, 252, 0.2) !important;
  box-shadow:
    inset 3px 0 0 rgba(96, 165, 250, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-grid > .teacher-report-section:nth-of-type(6),
html body[data-current-screen="log"] .log-card .progress-review-grid > .teacher-report-section:nth-of-type(3) {
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.13), transparent 14rem),
    linear-gradient(145deg, rgba(18, 20, 48, 0.84), rgba(3, 10, 24, 0.91)) !important;
  border-color: rgba(196, 181, 253, 0.22) !important;
  box-shadow:
    inset 3px 0 0 rgba(167, 139, 250, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-grid > .teacher-report-section:nth-of-type(7),
html body[data-current-screen="log"] .log-card .progress-review-grid > .teacher-report-section:nth-of-type(4) {
  background:
    radial-gradient(circle at 0% 0%, rgba(251, 191, 36, 0.08), transparent 14rem),
    linear-gradient(145deg, rgba(24, 22, 36, 0.84), rgba(3, 10, 24, 0.92)) !important;
  border-color: rgba(251, 191, 36, 0.17) !important;
  box-shadow:
    inset 3px 0 0 rgba(251, 191, 36, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html body[data-current-screen="log"] .log-card :is(.teacher-report-list, .teacher-report-recordings, .teacher-report-history) {
  gap: 0.5rem !important;
}

html body[data-current-screen="log"] .log-card :is(.teacher-report-row, .teacher-report-recording-card, .activity-log-item) {
  background:
    linear-gradient(145deg, rgba(8, 18, 34, 0.72), rgba(4, 10, 24, 0.8)) !important;
  border-color: rgba(190, 209, 238, 0.16) !important;
  border-radius: 0.68rem !important;
  gap: 0.28rem !important;
  padding: 0.66rem 0.7rem !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-row span,
html body[data-current-screen="log"] .log-card .teacher-report-recording-card strong,
html body[data-current-screen="log"] .log-card .activity-log-item strong {
  color: var(--zb-myzone-text) !important;
  font-size: 0.95rem !important;
  font-weight: 570 !important;
  line-height: 1.22 !important;
  -webkit-text-fill-color: var(--zb-myzone-text) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-row p,
html body[data-current-screen="log"] .log-card .teacher-report-recording-card p {
  color: var(--zb-myzone-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.43 !important;
  -webkit-text-fill-color: var(--zb-myzone-muted) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-recording-card audio {
  border-radius: 0.58rem !important;
  margin-top: 0.36rem !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history {
  background: rgba(3, 10, 24, 0.26) !important;
  border: 1px solid rgba(190, 209, 238, 0.1) !important;
  border-radius: 0.78rem !important;
  padding: 0.38rem !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table {
  background: transparent !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 0.18rem !important;
  box-shadow: none !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table th {
  background: rgba(8, 18, 34, 0.78) !important;
  border-bottom: 1px solid rgba(190, 209, 238, 0.16) !important;
  color: rgba(232, 241, 253, 0.92) !important;
  font-size: 0.76rem !important;
  font-weight: 590 !important;
  letter-spacing: 0.03em !important;
  padding: 0.52rem 0.64rem !important;
  -webkit-text-fill-color: rgba(232, 241, 253, 0.92) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table th:first-child {
  border-radius: 0.56rem 0 0 0.56rem !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table th:last-child {
  border-radius: 0 0.56rem 0.56rem 0 !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table tbody tr:nth-child(odd) {
  background: rgba(10, 22, 39, 0.7) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table tbody tr:nth-child(even) {
  background: rgba(5, 14, 28, 0.86) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table td {
  border-bottom: 1px solid rgba(190, 209, 238, 0.07) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.025) !important;
  padding: 0.58rem 0.64rem !important;
  vertical-align: middle !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table td:first-child {
  border-radius: 0.54rem 0 0 0.54rem !important;
  color: rgba(191, 232, 255, 0.9) !important;
  font-size: 0.82rem !important;
  -webkit-text-fill-color: rgba(191, 232, 255, 0.9) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table td:nth-child(2) {
  color: var(--zb-myzone-text) !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: var(--zb-myzone-text) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table td:nth-child(3),
html body[data-current-screen="log"] .log-card .teacher-report-history-table td:nth-child(4) {
  color: var(--zb-myzone-soft) !important;
  font-size: 0.86rem !important;
  -webkit-text-fill-color: var(--zb-myzone-soft) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table td:nth-child(5) {
  color: var(--zb-myzone-muted) !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
  -webkit-text-fill-color: var(--zb-myzone-muted) !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-history-table td:last-child {
  border-radius: 0 0.54rem 0.54rem 0 !important;
}

html body[data-current-screen="log"] .log-card .teacher-report-share-status,
html body[data-current-screen="log"] .log-card .empty-state {
  background: rgba(8, 18, 34, 0.58) !important;
  border: 1px solid rgba(190, 209, 238, 0.14) !important;
  border-radius: 0.72rem !important;
  color: var(--zb-myzone-muted) !important;
  padding: 0.6rem 0.68rem !important;
  -webkit-text-fill-color: var(--zb-myzone-muted) !important;
}

@media (max-width: 900px) {
  html body[data-current-screen="log"] .log-card .section-header,
  html body[data-current-screen="log"] .log-card :is(.progress-overview-header, .teacher-report-header, .progress-review-header, .progress-log-section) {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  html body[data-current-screen="log"] .log-card .teacher-report-summary,
  html body[data-current-screen="log"] .log-card .progress-overview-stats,
  html body[data-current-screen="log"] .log-card .progress-visual-grid,
  html body[data-current-screen="log"] .log-card .teacher-report-grid,
  html body[data-current-screen="log"] .log-card .progress-review-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Phase 6: global Visibility system. Level 0 is the current polished baseline. */
:root {
  --zb-vis-control-fill: 0%;
  --zb-vis-control-accent: #7dd3fc;
  --zb-vis-bg-start: #071018;
  --zb-vis-bg-mid: #07131c;
  --zb-vis-bg-end: #050910;
  --zb-vis-wallpaper-blue: 0.2;
  --zb-vis-wallpaper-teal: 0.16;
  --zb-vis-wallpaper-violet: 0.18;
  --zb-vis-panel-bg: rgba(8, 18, 34, 0);
  --zb-vis-panel-shield: rgba(2, 6, 23, 0);
  --zb-vis-hero-shield: rgba(2, 6, 23, 0);
  --zb-vis-border: rgba(190, 209, 238, 0.16);
  --zb-vis-border-strong: rgba(190, 209, 238, 0.22);
  --zb-vis-text: rgba(248, 250, 252, 0.96);
  --zb-vis-muted: rgba(226, 232, 240, 0.74);
  --zb-vis-faint: rgba(203, 213, 225, 0.66);
  --zb-vis-button-bg: rgba(15, 23, 42, 0.56);
  --zb-vis-button-border: rgba(190, 209, 238, 0.16);
  --zb-vis-button-text: rgba(226, 232, 240, 0.84);
  --zb-vis-input-bg: rgba(2, 6, 23, 0.52);
  --zb-vis-input-border: rgba(190, 209, 238, 0.2);
  --zb-vis-shadow: 0 18px 46px rgba(0, 0, 0, 0.2);
}

html[data-visibility-level="1"] {
  --zb-vis-control-fill: 33.333%;
  --zb-vis-control-accent: #67e8f9;
  --zb-vis-bg-start: #07111c;
  --zb-vis-bg-mid: #07121a;
  --zb-vis-bg-end: #040812;
  --zb-vis-wallpaper-blue: 0.14;
  --zb-vis-wallpaper-teal: 0.11;
  --zb-vis-wallpaper-violet: 0.13;
  --zb-vis-panel-bg: rgba(8, 18, 34, 0.1);
  --zb-vis-panel-shield: rgba(2, 6, 23, 0.05);
  --zb-vis-hero-shield: rgba(2, 6, 23, 0.08);
  --zb-vis-border: rgba(190, 209, 238, 0.22);
  --zb-vis-border-strong: rgba(203, 222, 247, 0.3);
  --zb-vis-muted: rgba(226, 232, 240, 0.82);
  --zb-vis-faint: rgba(203, 213, 225, 0.74);
  --zb-vis-button-bg: rgba(15, 23, 42, 0.66);
  --zb-vis-button-border: rgba(190, 209, 238, 0.24);
  --zb-vis-button-text: rgba(235, 242, 250, 0.9);
  --zb-vis-input-bg: rgba(2, 6, 23, 0.62);
  --zb-vis-input-border: rgba(203, 222, 247, 0.28);
  --zb-vis-shadow: 0 20px 52px rgba(0, 0, 0, 0.24);
}

html[data-visibility-level="2"] {
  --zb-vis-control-fill: 66.666%;
  --zb-vis-control-accent: #5eead4;
  --zb-vis-bg-start: #06101a;
  --zb-vis-bg-mid: #061019;
  --zb-vis-bg-end: #030711;
  --zb-vis-wallpaper-blue: 0.055;
  --zb-vis-wallpaper-teal: 0.045;
  --zb-vis-wallpaper-violet: 0.055;
  --zb-vis-panel-bg: rgba(5, 13, 25, 0.34);
  --zb-vis-panel-shield: rgba(2, 6, 23, 0.2);
  --zb-vis-hero-shield: rgba(2, 6, 23, 0.32);
  --zb-vis-border: rgba(218, 232, 252, 0.42);
  --zb-vis-border-strong: rgba(235, 244, 255, 0.56);
  --zb-vis-muted: rgba(235, 242, 250, 0.9);
  --zb-vis-faint: rgba(218, 229, 244, 0.82);
  --zb-vis-button-bg: rgba(8, 18, 34, 0.78);
  --zb-vis-button-border: rgba(218, 232, 252, 0.46);
  --zb-vis-button-text: rgba(248, 250, 252, 0.96);
  --zb-vis-input-bg: rgba(2, 6, 23, 0.76);
  --zb-vis-input-border: rgba(235, 244, 255, 0.5);
  --zb-vis-shadow: 0 22px 58px rgba(0, 0, 0, 0.3);
}

html[data-visibility-level="3"] {
  --zb-vis-control-fill: 100%;
  --zb-vis-control-accent: #fef08a;
  --zb-vis-bg-start: #020713;
  --zb-vis-bg-mid: #020712;
  --zb-vis-bg-end: #01040a;
  --zb-vis-wallpaper-blue: 0.008;
  --zb-vis-wallpaper-teal: 0.006;
  --zb-vis-wallpaper-violet: 0.008;
  --zb-vis-panel-bg: rgba(2, 8, 18, 0.72);
  --zb-vis-panel-shield: rgba(0, 3, 10, 0.42);
  --zb-vis-hero-shield: rgba(0, 3, 10, 0.68);
  --zb-vis-border: rgba(235, 244, 255, 0.56);
  --zb-vis-border-strong: rgba(255, 255, 255, 0.74);
  --zb-vis-muted: rgba(255, 255, 255, 0.98);
  --zb-vis-faint: rgba(248, 250, 252, 0.95);
  --zb-vis-button-bg: rgba(3, 10, 22, 0.96);
  --zb-vis-button-border: rgba(248, 250, 252, 0.72);
  --zb-vis-button-text: rgba(255, 255, 255, 0.98);
  --zb-vis-input-bg: rgba(1, 6, 16, 0.98);
  --zb-vis-input-border: rgba(255, 255, 255, 0.76);
  --zb-vis-shadow: 0 20px 46px rgba(0, 0, 0, 0.46);
}

.visibility-control {
  box-sizing: border-box;
  color: rgba(226, 232, 240, 0.84);
  margin-top: 0.44rem;
  max-width: 9.8rem;
  min-width: 9.2rem;
  position: relative;
  width: 9.8rem;
  z-index: 4;
}

.visibility-control-label {
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.12), transparent 60%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.62), rgba(3, 8, 20, 0.58));
  border: 1px solid rgba(190, 209, 238, 0.14);
  border-radius: 0.82rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  box-sizing: border-box;
  display: grid;
  gap: 0.34rem;
  padding: 0.48rem 0.58rem 0.42rem;
  width: 100%;
}

.visibility-control-topline,
.visibility-control-scale {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-width: 0;
}

.visibility-control-title {
  color: rgba(248, 250, 252, 0.94);
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0;
  line-height: 1;
}

.visibility-control-current {
  color: var(--zb-vis-control-accent);
  font-size: 0.62rem;
  font-weight: 560;
  line-height: 1;
  min-width: 3.2rem;
  text-align: right;
}

.visibility-control-scale {
  color: rgba(203, 213, 225, 0.68);
  font-size: 0.58rem;
  font-weight: 520;
  line-height: 1;
  padding-inline: 0.42rem;
}

.visibility-control-range {
  appearance: none;
  background: linear-gradient(
      90deg,
      var(--zb-vis-control-accent) 0 var(--zb-vis-control-fill),
      rgba(148, 163, 184, 0.24) var(--zb-vis-control-fill) 100%
    );
  border: 0 !important;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(226, 238, 255, 0.12);
  box-sizing: border-box;
  cursor: pointer;
  height: 0.42rem;
  justify-self: center;
  min-height: 0;
  padding: 0 !important;
  width: calc(100% - 1.35rem);
}

.visibility-control-range::-webkit-slider-thumb {
  appearance: none;
  background:
    radial-gradient(circle at 38% 32%, #ffffff, rgba(255, 255, 255, 0.82) 32%, transparent 34%),
    linear-gradient(135deg, var(--zb-vis-control-accent), rgba(139, 92, 246, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.12), 0 3px 10px rgba(0, 0, 0, 0.34);
  height: 1rem;
  width: 1rem;
}

.visibility-control-range::-moz-range-thumb {
  background: linear-gradient(135deg, var(--zb-vis-control-accent), rgba(139, 92, 246, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.12), 0 3px 10px rgba(0, 0, 0, 0.34);
  height: 1rem;
  width: 1rem;
}

.visibility-control-range:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.58);
  outline-offset: 4px;
}

.zb-pv2-visibility-control {
  margin: -0.42rem 0 0.56rem;
  max-width: none;
  min-width: 0;
  width: 100%;
}

.zb-pv2-visibility-control .visibility-control-current {
  font-size: 0.58rem;
  min-width: 2.9rem;
}

body[data-current-screen="practice-v2"] .zb-pv2-nav {
  padding-top: 0.72rem !important;
}

body[data-current-screen="practice-v2"] .zb-pv2-left-rail {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) body {
  background:
    radial-gradient(circle at 20% 10%, rgba(96, 165, 250, var(--zb-vis-wallpaper-blue)), transparent 27rem),
    radial-gradient(circle at 76% 3%, rgba(139, 92, 246, var(--zb-vis-wallpaper-violet)), transparent 31rem),
    radial-gradient(circle at 18% 84%, rgba(45, 212, 191, var(--zb-vis-wallpaper-teal)), transparent 29rem),
    linear-gradient(135deg, var(--zb-vis-bg-start) 0%, var(--zb-vis-bg-mid) 50%, var(--zb-vis-bg-end) 100%) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .visibility-control-label {
  border-color: var(--zb-vis-border) !important;
  box-shadow:
    inset 0 0 0 9999px var(--zb-vis-panel-shield),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .visibility-control-title,
html[data-visibility-level]:not([data-visibility-level="0"]) .visibility-control-scale {
  color: var(--zb-vis-muted) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(
  .card,
  .app-screen,
  [class*="-card"],
  [class*="-panel"],
  [class*="-workspace"],
  [class*="-section"],
  [class*="-strip"],
  [class*="-bar"]
):not(.visibility-control):not(.visibility-control-label):not(.visibility-control-topline):not(.visibility-control-scale) {
  background-color: var(--zb-vis-panel-bg) !important;
  border-color: var(--zb-vis-border) !important;
  box-shadow:
    inset 0 0 0 9999px var(--zb-vis-panel-shield),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    var(--zb-vis-shadow) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(
  [class*="hero"],
  [class*="banner"],
  .practice-focus-card,
  .practice-welcome-mode,
  .organize-catalog-hero,
  .section-header
) {
  box-shadow:
    inset 0 0 0 9999px var(--zb-vis-hero-shield),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    var(--zb-vis-shadow) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(
  h1,
  h2,
  h3,
  h4,
  strong,
  .screen-title,
  [class*="title"],
  [class*="heading"]
) {
  color: var(--zb-vis-text) !important;
  -webkit-text-fill-color: var(--zb-vis-text) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(
  small,
  label,
  .subtitle,
  .section-note,
  .status,
  .brand-tagline,
  .brand-support,
  .app-build-line,
  [class*="meta"],
  [class*="muted"],
  [class*="note"],
  [class*="helper"],
  [class*="hint"],
  [class*="description"],
  [class*="empty"],
  [class*="summary"],
  [class*="label"],
  [class*="status"]
) {
  color: var(--zb-vis-muted) !important;
  -webkit-text-fill-color: var(--zb-vis-muted) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(
  .teacher-report-history-table td,
  .teacher-report-history-table th,
  .activity-log-item p,
  .record-card p,
  .queue-item,
  .progress-donut-legend-item span,
  .progress-donut-legend-item strong
) {
  color: var(--zb-vis-muted) !important;
  -webkit-text-fill-color: var(--zb-vis-muted) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(
  input,
  select,
  textarea,
  [class*="search"] input,
  [class*="filter"] input
):not(.visibility-control-range) {
  background-color: var(--zb-vis-input-bg) !important;
  border-color: var(--zb-vis-input-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
  color: var(--zb-vis-text) !important;
  -webkit-text-fill-color: var(--zb-vis-text) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(input, textarea)::placeholder {
  color: var(--zb-vis-faint) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--zb-vis-faint) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(
  .secondary-button,
  .filter-button,
  .ghost-button,
  .dashboard-mode-button,
  .product-mode-option,
  .zb-pv2-nav button,
  .zb-pv2-utility-button,
  .myzone-workspace-tabs button
):not(:disabled):not(.is-selected):not(.is-active) {
  background:
    radial-gradient(circle at 12% 0%, rgba(125, 211, 252, 0.08), transparent 65%),
    linear-gradient(145deg, var(--zb-vis-button-bg), rgba(2, 6, 23, 0.66)) !important;
  box-shadow:
    inset 0 0 0 1px var(--zb-vis-button-border),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  color: var(--zb-vis-button-text) !important;
  -webkit-text-fill-color: var(--zb-vis-button-text) !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(.secondary-button, .filter-button, .ghost-button):not(:disabled):hover,
html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(.secondary-button, .filter-button, .ghost-button):not(:disabled):focus-visible {
  border-color: var(--zb-vis-border-strong) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(button:disabled, .is-disabled, [aria-disabled="true"]) {
  opacity: 0.48 !important;
}

html[data-visibility-level]:not([data-visibility-level="0"]) .app-shell :is(
  .app-nav-button:not(.is-selected),
  .organize-nav-item:not(.is-selected),
  .zb-pv2-nav button:not(.is-selected)
) {
  color: var(--zb-vis-muted) !important;
  -webkit-text-fill-color: var(--zb-vis-muted) !important;
}

html[data-visibility-level="3"] .app-shell :is(
  [class*="hero"],
  [class*="banner"],
  .practice-focus-card,
  .practice-welcome-mode,
  .organize-catalog-hero,
  .section-header
) {
  border-color: var(--zb-vis-border-strong) !important;
}

html[data-visibility-level="3"] body {
  background:
    linear-gradient(135deg, var(--zb-vis-bg-start) 0%, var(--zb-vis-bg-mid) 52%, var(--zb-vis-bg-end) 100%) !important;
}

html[data-visibility-level="3"] .app-shell :is(
  .card,
  .app-screen,
  [class*="-card"],
  [class*="-panel"],
  [class*="-workspace"],
  [class*="-section"],
  [class*="-strip"],
  [class*="-bar"]
):not(button):not(.visibility-control):not(.visibility-control-label):not(.visibility-control-topline):not(.visibility-control-scale):not(.visibility-control-range) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background:
    linear-gradient(145deg, rgba(3, 10, 23, 0.98), rgba(1, 6, 16, 0.96)) !important;
  border-color: var(--zb-vis-border) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    var(--zb-vis-shadow) !important;
}

html[data-visibility-level="3"] .app-shell :is(
  .card,
  .app-screen,
  [class*="-card"],
  [class*="-panel"],
  [class*="-workspace"],
  [class*="-section"],
  [class*="-strip"]
):not(button)::before,
html[data-visibility-level="3"] .app-shell :is(
  .card,
  .app-screen,
  [class*="-card"],
  [class*="-panel"],
  [class*="-workspace"],
  [class*="-section"],
  [class*="-strip"]
):not(button)::after {
  opacity: 0.08 !important;
}

html[data-visibility-level="3"] .app-shell :is(
  [class*="hero"],
  [class*="banner"],
  .practice-welcome-mode,
  .organize-catalog-hero,
  .myzone-hero,
  .log-hero
) {
  background:
    linear-gradient(145deg, rgba(2, 8, 19, 0.99), rgba(1, 5, 14, 0.98)) !important;
  border-color: var(--zb-vis-border-strong) !important;
}

html[data-visibility-level="3"] .app-shell :is(
  [class*="hero"],
  [class*="banner"],
  .practice-welcome-mode,
  .organize-catalog-hero,
  .myzone-hero,
  .log-hero
) img {
  filter: brightness(0.48) contrast(1.08) saturate(0.72) !important;
  opacity: 0.5 !important;
}

html[data-visibility-level="3"] .app-shell :is(
  input,
  select,
  textarea,
  [class*="search"] input,
  [class*="filter"] input
):not(.visibility-control-range) {
  border-width: 1.5px !important;
}

html[data-visibility-level="3"] .app-shell :is(
  .organize-catalog-workspace,
  .schedule-builder-screen,
  .practice-map-screen,
  .preview-calendar-screen,
  .day-detail-screen,
  .system-screen,
  .log-card,
  .myzone-workspace
) {
  background:
    linear-gradient(145deg, rgba(2, 8, 19, 0.99), rgba(1, 5, 14, 0.98)) !important;
}

html[data-visibility-level="3"] .app-shell :is(
  .organize-catalog-workspace,
  .schedule-builder-screen,
  .practice-map-screen,
  .preview-calendar-screen,
  .day-detail-screen,
  .system-screen,
  .log-card,
  .myzone-workspace
) :is(
  [class*="-card"],
  [class*="-panel"],
  [class*="-section"],
  [class*="-strip"],
  [class*="-row"]
):not(button):not(.visibility-control):not(.visibility-control-label) {
  background-image: linear-gradient(145deg, rgba(4, 12, 27, 0.97), rgba(1, 6, 16, 0.95)) !important;
  border-color: rgba(226, 238, 255, 0.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

html[data-visibility-level="3"] .app-shell :is(
  .organize-catalog-workspace,
  .schedule-builder-screen,
  .practice-map-screen,
  .preview-calendar-screen,
  .day-detail-screen,
  .system-screen,
  .log-card,
  .myzone-workspace
) :is(
  [class*="-card"],
  [class*="-panel"],
  [class*="-section"],
  [class*="-strip"],
  [class*="-row"]
):not(button)::before,
html[data-visibility-level="3"] .app-shell :is(
  .organize-catalog-workspace,
  .schedule-builder-screen,
  .practice-map-screen,
  .preview-calendar-screen,
  .day-detail-screen,
  .system-screen,
  .log-card,
  .myzone-workspace
) :is(
  [class*="-card"],
  [class*="-panel"],
  [class*="-section"],
  [class*="-strip"],
  [class*="-row"]
):not(button)::after {
  opacity: 0.05 !important;
}

html[data-visibility-level="3"] .app-shell :is(
  .organize-catalog-row,
  .schedule-builder-item-row,
  .schedule-block-item,
  .practice-map-goal-card,
  .preview-calendar-day,
  .teacher-report-history-table tr
) {
  background-color: rgba(2, 8, 18, 0.96) !important;
  border-color: rgba(235, 244, 255, 0.46) !important;
}

body:not(.is-toolbox-nav-visible) .app-nav-button[data-screen="tools"],
body:not(.is-toolbox-nav-visible) [data-workspace-module-nav="tools"],
body:not(.is-toolbox-nav-visible) [data-workspace-module-screen="tools"] {
  display: none !important;
}

@media (max-width: 760px) {
  .app-header.header-with-nav,
  .app-header.compact-brand-header.header-with-nav,
  .app-header.brand-header.header-with-nav {
    grid-template-areas:
      "brand utility"
      "visibility visibility" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 8.9rem !important;
    row-gap: 0.58rem !important;
    position: relative !important;
  }

  .visibility-control {
    max-width: none;
    width: 100%;
  }

  .app-header.header-with-nav .visibility-control {
    grid-area: visibility !important;
    justify-self: stretch !important;
    margin-top: 0.12rem;
    max-width: none;
    min-width: 0;
    position: static !important;
    width: 100% !important;
  }

  body .app-shell header.app-header.header-with-nav > .brand-block {
    display: contents !important;
    position: static !important;
  }

  body .app-shell header.app-header.header-with-nav > .brand-block::before {
    content: none !important;
    display: none !important;
  }

  body .app-shell header.app-header.header-with-nav > .brand-block > h1 {
    grid-area: brand !important;
    grid-column: brand !important;
    grid-row: brand !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body .app-shell header.app-header.header-with-nav > .brand-block > .visibility-control {
    grid-area: visibility !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  body .app-shell header.app-header.header-with-nav > .brand-block .brand-tagline,
  body .app-shell header.app-header.header-with-nav > .brand-block .brand-support,
  body .app-shell header.app-header.header-with-nav > .brand-block .today-line,
  body .app-shell header.app-header.header-with-nav > .brand-block .product-mode-shell {
    display: none !important;
  }

  .visibility-control-label {
    border-radius: 0.75rem;
    padding: 0.46rem 0.54rem 0.4rem;
  }
}

/* Library card alignment polish: keep icons in a stable scan column. */
body:has(.organize-catalog-workspace) .organize-catalog-row.catalog-unified-row {
  align-items: start !important;
  column-gap: 0.72rem !important;
  display: grid !important;
  grid-template-columns: 2.75rem minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  min-height: 6.65rem !important;
  padding: 0.78rem 0.82rem 0.92rem !important;
}

body:has(.organize-catalog-workspace) .organize-catalog-row.catalog-unified-row > .catalog-row-icon {
  align-self: start !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 2.45rem !important;
  justify-self: start !important;
  margin-top: 0.04rem !important;
  transform: none !important;
  width: 2.45rem !important;
}

body:has(.organize-catalog-workspace) .organize-catalog-row.catalog-unified-row:hover > .catalog-row-icon,
body:has(.organize-catalog-workspace) .organize-catalog-row.catalog-unified-row.is-selected > .catalog-row-icon {
  transform: none !important;
}

body:has(.organize-catalog-workspace) .organize-catalog-row.catalog-unified-row > .catalog-row-copy {
  align-self: start !important;
  display: grid !important;
  gap: 0.34rem !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
}

body:has(.organize-catalog-workspace) .organize-catalog-row.catalog-unified-row > .catalog-row-copy > strong {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  line-height: 1.18 !important;
  max-height: calc(1.18em * 2) !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
}

body:has(.organize-catalog-workspace) .organize-catalog-row.catalog-unified-row > .catalog-row-copy > small {
  display: block !important;
  line-height: 1.28 !important;
  min-width: 0 !important;
}

body:has(.organize-catalog-workspace) .organize-catalog-row.catalog-unified-row .catalog-row-meta {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.32rem !important;
  justify-content: flex-start !important;
  margin-top: 0.08rem !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Library toolbar polish: align filter and Quick Add surfaces without changing workflow. */
body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row {
  align-items: stretch !important;
  gap: 0.9rem !important;
  grid-template-columns: minmax(0, 1fr) minmax(26rem, 28rem) !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-unified-filter-rail,
body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-quick-add-toolbox {
  align-self: stretch !important;
  border-color: rgba(203, 222, 247, 0.2) !important;
  display: grid !important;
  min-height: 8.8rem !important;
  padding: 0.94rem !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-unified-filter-rail {
  align-content: start !important;
  gap: 0.78rem !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-unified-filter-rail > div {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.56rem !important;
  min-width: 0 !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-unified-filter-rail button {
  color: rgba(235, 242, 250, 0.86) !important;
  font-size: 0.88rem !important;
  font-weight: 540 !important;
  min-height: 2.5rem !important;
  padding: 0.58rem 0.96rem !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-unified-filter-rail button.is-selected {
  color: #ffffff !important;
  font-weight: 580 !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-quick-add-toolbox {
  align-content: start !important;
  gap: 0.72rem !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-quick-add-heading strong {
  color: rgba(241, 245, 249, 0.86) !important;
  font-size: 0.8rem !important;
  font-weight: 620 !important;
  letter-spacing: 0.06em !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-quick-add-heading span {
  color: rgba(219, 229, 246, 0.68) !important;
  font-size: 0.76rem !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-quick-add-grid {
  gap: 0.58rem !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-quick-add-toolbox button {
  border-color: rgba(203, 222, 247, 0.24) !important;
  color: rgba(248, 250, 252, 0.94) !important;
  font-size: 0.86rem !important;
  font-weight: 560 !important;
  gap: 0.5rem !important;
  min-height: 2.74rem !important;
  padding: 0.5rem 0.64rem !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-quick-add-icon {
  height: 1.78rem !important;
  width: 1.78rem !important;
}

body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-quick-add-icon svg {
  height: 1.02rem !important;
  width: 1.02rem !important;
}

@media (max-width: 980px) {
  body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row {
    grid-template-columns: 1fr !important;
  }

  body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-unified-filter-rail,
  body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-quick-add-toolbox {
    min-height: 0 !important;
  }
}

/* Alpha stability: active destructive and microbreak actions should not read as disabled pills. */
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-viewer-actions .catalog-danger-action:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(190, 18, 60, 0.3), rgba(88, 28, 135, 0.1)),
    rgba(33, 13, 24, 0.84) !important;
  border: 1px solid rgba(251, 113, 133, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.2) !important;
  color: rgba(255, 229, 233, 0.96) !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: rgba(255, 229, 233, 0.96) !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-viewer-actions .catalog-danger-action:not(:disabled):hover,
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-viewer-actions .catalog-danger-action:not(:disabled):focus-visible {
  background:
    linear-gradient(135deg, rgba(225, 29, 72, 0.38), rgba(124, 58, 237, 0.14)),
    rgba(45, 16, 28, 0.9) !important;
  border-color: rgba(253, 164, 175, 0.56) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-viewer-actions .catalog-danger-action:disabled {
  background: rgba(226, 232, 240, 0.78) !important;
  border-color: rgba(226, 232, 240, 0.34) !important;
  color: rgba(51, 65, 85, 0.48) !important;
  opacity: 0.62 !important;
  -webkit-text-fill-color: rgba(51, 65, 85, 0.48) !important;
}

html body[data-current-screen="practice-v2"] #practiceMicrobreakPanel .practice-microbreak-actions button:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(124, 58, 237, 0.1)),
    rgba(8, 18, 34, 0.86) !important;
  border: 1px solid rgba(216, 202, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.24) !important;
  color: rgba(248, 251, 255, 0.96) !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: rgba(248, 251, 255, 0.96) !important;
}

html body[data-current-screen="practice-v2"] #practiceMicrobreakPanel #skipMicrobreakButton:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.52), rgba(34, 197, 94, 0.3)),
    rgba(6, 30, 32, 0.9) !important;
  border-color: rgba(94, 234, 212, 0.46) !important;
}

html body[data-current-screen="practice-v2"] #practiceMicrobreakPanel #turnOffMicrobreaksButton:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(190, 18, 60, 0.26), rgba(88, 28, 135, 0.1)),
    rgba(33, 13, 24, 0.86) !important;
  border-color: rgba(251, 113, 133, 0.38) !important;
  color: rgba(255, 229, 233, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 229, 233, 0.96) !important;
}

html body[data-current-screen="practice-v2"] .zb-pv2-tool-card .runtime-default-action-prompt .runtime-default-action-buttons .secondary-button:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(124, 58, 237, 0.1)),
    rgba(8, 18, 34, 0.92) !important;
  border: 1px solid rgba(216, 202, 255, 0.3) !important;
  color: rgba(248, 251, 255, 0.96) !important;
  font-weight: 560 !important;
  -webkit-text-fill-color: rgba(248, 251, 255, 0.96) !important;
}

html body[data-current-screen="dashboard"] #sessionEmptyState.practice-welcome-mode .practice-welcome-footer .secondary-button:not(:disabled),
html body[data-current-screen="dashboard"] #sessionEmptyState.practice-welcome-mode .practice-ready-panel .secondary-button:not(:disabled),
html body[data-current-screen="dashboard"] #sessionEmptyState.practice-welcome-mode .practice-welcome-demo-notice .secondary-button:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.24), rgba(14, 165, 233, 0.1)),
    rgba(8, 18, 34, 0.88) !important;
  border: 1px solid rgba(216, 202, 255, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.2) !important;
  color: rgba(248, 251, 255, 0.96) !important;
  font-weight: 560 !important;
  min-height: 2.44rem !important;
  -webkit-text-fill-color: rgba(248, 251, 255, 0.96) !important;
}

html body[data-current-screen="dashboard"] #sessionEmptyState.practice-welcome-mode .practice-welcome-footer .secondary-button:not(:disabled):hover,
html body[data-current-screen="dashboard"] #sessionEmptyState.practice-welcome-mode .practice-ready-panel .secondary-button:not(:disabled):hover,
html body[data-current-screen="dashboard"] #sessionEmptyState.practice-welcome-mode .practice-welcome-demo-notice .secondary-button:not(:disabled):hover,
html body[data-current-screen="dashboard"] #sessionEmptyState.practice-welcome-mode .practice-welcome-footer .secondary-button:not(:disabled):focus-visible,
html body[data-current-screen="dashboard"] #sessionEmptyState.practice-welcome-mode .practice-ready-panel .secondary-button:not(:disabled):focus-visible,
html body[data-current-screen="dashboard"] #sessionEmptyState.practice-welcome-mode .practice-welcome-demo-notice .secondary-button:not(:disabled):focus-visible {
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.32), rgba(14, 165, 233, 0.16)),
    rgba(11, 24, 44, 0.94) !important;
  border-color: rgba(226, 218, 255, 0.46) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #sessionEmptyState.practice-welcome-mode .practice-welcome-footer #welcomeOpenHelpButton {
  align-items: center !important;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(20, 184, 166, 0.13)),
    rgba(8, 18, 34, 0.92) !important;
  border: 1px solid rgba(216, 202, 255, 0.36) !important;
  border-radius: 13px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.24) !important;
  color: rgba(248, 251, 255, 0.97) !important;
  display: inline-flex !important;
  font-weight: 560 !important;
  justify-content: center !important;
  min-height: 2.44rem !important;
  min-width: 13rem !important;
  padding: 0.54rem 2.5rem 0.54rem 1rem !important;
  position: relative !important;
  -webkit-text-fill-color: rgba(248, 251, 255, 0.97) !important;
}

html body #sessionEmptyState.practice-welcome-mode .practice-welcome-footer #welcomeOpenHelpButton::after {
  color: rgba(248, 251, 255, 0.92) !important;
  position: absolute !important;
  right: 0.92rem !important;
}

html body #sessionEmptyState.practice-welcome-mode .practice-welcome-footer #welcomeOpenHelpButton:hover,
html body #sessionEmptyState.practice-welcome-mode .practice-welcome-footer #welcomeOpenHelpButton:focus-visible {
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.38), rgba(20, 184, 166, 0.18)),
    rgba(11, 24, 44, 0.96) !important;
  border-color: rgba(226, 218, 255, 0.5) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Final Max Visibility tuning: win over screen-specific glass polish in glare mode. */
html[data-visibility-level="3"]:not([data-visibility-level="0"]) body {
  background:
    linear-gradient(135deg, var(--zb-vis-bg-start) 0%, var(--zb-vis-bg-mid) 52%, var(--zb-vis-bg-end) 100%) !important;
}

html[data-visibility-level="3"] body:has(.organize-catalog-workspace) :is(
  .catalog-workspace-topbar,
  .catalog-unified-filter-rail,
  .catalog-quick-add-toolbox,
  .organize-catalog-browser,
  .organize-catalog-viewer,
  .organize-catalog-actions,
  .catalog-viewer-card,
  .catalog-viewer-header,
  .catalog-rich-text-viewer,
  .catalog-record-settings,
  .organize-catalog-links,
  .catalog-attached-references,
  .catalog-primary-reference,
  .organize-catalog-row
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background:
    linear-gradient(145deg, rgba(3, 10, 23, 0.98), rgba(1, 6, 16, 0.96)) !important;
  border-color: rgba(226, 238, 255, 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

html[data-visibility-level="3"] body:has(.organize-catalog-workspace) :is(
  .organize-catalog-tools input,
  .organize-catalog-tools select,
  .catalog-sort-control select,
  .catalog-browser-search input
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(1, 6, 16, 0.98) !important;
  border: 2px solid rgba(255, 255, 255, 0.76) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.98) !important;
  outline: 1px solid rgba(255, 255, 255, 0.2) !important;
  outline-offset: 1px !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.98) !important;
}

html[data-visibility-level="3"] body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  .schedule-builder-shell,
  .schedule-builder-header,
  .schedule-builder-header-schedule,
  .schedule-builder-panel,
  .schedule-builder-ribbon-panel,
  .schedule-builder-advanced-section,
  .schedule-builder-advanced-block-row,
  .schedule-builder-advanced-block-header,
  .schedule-builder-advanced-item-row,
  .schedule-builder-advanced-context-row,
  .schedule-builder-block-item-row,
  .schedule-builder-picker-row,
  .schedule-basic-item-row,
  .schedule-builder-today-summary,
  .schedule-builder-library-panel,
  .schedule-builder-live-ribbon
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background:
    linear-gradient(145deg, rgba(3, 10, 23, 0.98), rgba(1, 6, 16, 0.96)) !important;
  border-color: rgba(226, 238, 255, 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

html[data-visibility-level="3"] body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  [data-schedule-builder-picker-search],
  .schedule-builder-library-sort select,
  .schedule-builder-schedule-name-input
) {
  background: rgba(1, 6, 16, 0.98) !important;
  border: 2px solid rgba(255, 255, 255, 0.76) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.98) !important;
  outline: 1px solid rgba(255, 255, 255, 0.2) !important;
  outline-offset: 1px !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.98) !important;
}

/* Keep modal action buttons dark inside the catalog quick-add flow. */
html body .catalog-add-flow-panel.organize-catalog-add-panel .modal-close-button.secondary-button {
  background: rgba(15, 23, 42, 0.62) !important;
  border: 1px solid rgba(216, 202, 255, 0.18) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 22px rgba(0, 0, 0, 0.18) !important;
  color: rgba(226, 232, 240, 0.9) !important;
  height: 2.12rem !important;
  min-height: 2.12rem !important;
  min-width: 2.12rem !important;
  padding: 0 !important;
  width: 2.12rem !important;
}

html body .catalog-add-flow-panel.organize-catalog-add-panel .catalog-add-flow-actions .secondary-button {
  background: rgba(15, 23, 42, 0.68) !important;
  border: 1px solid rgba(216, 202, 255, 0.18) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 22px rgba(0, 0, 0, 0.18) !important;
  color: rgba(234, 241, 252, 0.88) !important;
  min-height: 2.42rem !important;
  padding: 0.55rem 1rem !important;
}

html body .catalog-add-flow-panel.organize-catalog-add-panel .catalog-add-flow-actions .importzone-primary-button:not(:disabled) {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 56%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.94), rgba(14, 165, 233, 0.58)) !important;
  border-color: rgba(216, 202, 255, 0.3) !important;
  color: #ffffff !important;
}

html body .catalog-add-flow-panel.organize-catalog-add-panel .catalog-add-flow-actions button:disabled {
  background: rgba(30, 41, 59, 0.48) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.54) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-available-heading {
  align-items: start !important;
  border-bottom: 0 !important;
  display: grid !important;
  gap: 0.24rem !important;
  grid-template-areas:
    "title"
    "subtitle"
    "toggle" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: start !important;
  margin-bottom: 0.45rem !important;
  padding-bottom: 0.12rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-available-titlebar {
  align-items: center !important;
  display: flex !important;
  gap: 0.55rem !important;
  grid-area: title !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  width: 100% !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-available-titlebar p {
  line-height: 1.1 !important;
  margin: 0 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-available-subtitle {
  grid-area: subtitle !important;
  margin: 0 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-hide-scheduled-toggle {
  align-items: center !important;
  align-self: start !important;
  background: transparent !important;
  border: 0 !important;
  display: inline-flex !important;
  gap: 0.34rem !important;
  grid-area: toggle !important;
  height: auto !important;
  justify-content: flex-start !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  min-height: 1.15rem !important;
  padding: 0.08rem 0.1rem !important;
  width: auto !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-hide-scheduled-toggle input[type="checkbox"] {
  flex: 0 0 auto !important;
  height: 0.9rem !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: 0.9rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row.is-selected {
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.34), rgba(37, 99, 235, 0.22)),
    rgba(9, 28, 44, 0.94) !important;
  background-color: rgba(20, 184, 166, 0.22) !important;
  border-color: rgba(125, 249, 232, 0.86) !important;
  box-shadow:
    inset 0 0 0 1px rgba(125, 249, 232, 0.4),
    inset 4px 0 0 rgba(45, 212, 191, 0.92),
    0 0 0 1px rgba(45, 212, 191, 0.26),
    0 14px 30px rgba(8, 47, 73, 0.32) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row.is-selected > .schedule-builder-mini-icon {
  background: rgba(204, 251, 241, 0.18) !important;
  border-color: rgba(153, 246, 228, 0.6) !important;
  color: #f8fbff !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-workbench {
  height: clamp(32rem, calc(100vh - 10rem), 46rem) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen :is(
  .schedule-builder-advanced-sections,
  .schedule-builder-library-panel
) {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-library-panel .schedule-builder-picker-list {
  align-content: start !important;
  grid-auto-rows: max-content !important;
  max-height: none !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-hide-scheduled-toggle {
  justify-self: end !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row {
  gap: 0.46rem !important;
  grid-template-columns: 0.8rem 1.78rem minmax(0, 1fr) 3.5rem !important;
  min-height: 3.18rem !important;
  padding-block: 0.38rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row.has-badges,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row.is-selected,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row.is-scheduled {
  min-height: 3.7rem !important;
  padding-block: 0.4rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row > .schedule-builder-mini-icon {
  font-size: 0.72rem !important;
  height: 1.78rem !important;
  width: 1.78rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row > button.schedule-builder-icon-button {
  min-height: 2.08rem !important;
  min-width: 3.28rem !important;
  padding-inline: 0.46rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-picker-row.is-selected::before {
  background: #2dd4bf !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.14), 0 0 18px rgba(45, 212, 191, 0.36) !important;
  content: "" !important;
  height: 0.58rem !important;
  left: 0.42rem !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0.58rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-collapsed {
  gap: 0 !important;
  padding: 0.38rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-block-row.is-collapsed .schedule-builder-advanced-block-header {
  background:
    linear-gradient(135deg, rgba(92, 66, 160, 0.14), rgba(14, 165, 233, 0.07)),
    rgba(8, 18, 34, 0.66) !important;
  padding-block: 0.5rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-collapse-toggle {
  font-weight: 800 !important;
  min-width: 2.1rem !important;
  padding-inline: 0.5rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-advanced-section.is-collapsed {
  gap: 0 !important;
  padding-block: 0.5rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen .schedule-builder-section-collapse-toggle {
  font-weight: 800 !important;
  min-width: 2.08rem !important;
  padding-inline: 0.46rem !important;
}

html body .importzone-screen .importzone-detection-actions .secondary-button:not(:disabled) {
  background: rgba(12, 27, 48, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: rgba(238, 245, 255, 0.96) !important;
}

html body .importzone-screen .importzone-detection-actions .secondary-button:not(:disabled):hover,
html body .importzone-screen .importzone-detection-actions .secondary-button:not(:disabled):focus-visible {
  border-color: rgba(94, 234, 212, 0.52) !important;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.16), 0 12px 28px rgba(13, 148, 136, 0.16) !important;
}

html body .importzone-screen .importzone-detection-actions .importzone-primary-button:not(:disabled) {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.94), rgba(79, 70, 229, 0.9)) !important;
  border-color: rgba(153, 246, 228, 0.48) !important;
  color: #ffffff !important;
}

html body .importzone-screen :is(.secondary-button, button.secondary-button):not(:disabled) {
  background:
    linear-gradient(135deg, rgba(90, 68, 155, 0.2), rgba(14, 165, 233, 0.08)),
    rgba(10, 24, 44, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: rgba(247, 250, 255, 0.94) !important;
  -webkit-text-fill-color: rgba(247, 250, 255, 0.94) !important;
  opacity: 1 !important;
}

html body .importzone-screen :is(.secondary-button, button.secondary-button):not(:disabled):hover,
html body .importzone-screen :is(.secondary-button, button.secondary-button):not(:disabled):focus-visible {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(14, 165, 233, 0.14)),
    rgba(10, 24, 44, 0.94) !important;
  border-color: rgba(216, 202, 255, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .importzone-screen .importzone-primary-button:not(:disabled) {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 56%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.88), rgba(124, 58, 237, 0.82)) !important;
  border-color: rgba(191, 219, 254, 0.34) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .importzone-screen :is(button:disabled, .secondary-button:disabled, .importzone-primary-button:disabled) {
  background: rgba(20, 30, 47, 0.58) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.54) !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.54) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

html body #addRecordModalBackdrop[data-importzone-draft="true"] :is(.secondary-button, button.secondary-button, #addRecordThingsToFocusButton, #addRecordReferenceToggle, #addRecordSelectAllKeys, #addRecordClearAllKeys):not(:disabled) {
  background:
    linear-gradient(135deg, rgba(90, 68, 155, 0.22), rgba(14, 165, 233, 0.1)),
    rgba(10, 24, 44, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: rgba(247, 250, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(247, 250, 255, 0.95) !important;
  opacity: 1 !important;
}

html body #addRecordModalBackdrop[data-importzone-draft="true"] :is(.secondary-button, button.secondary-button, #addRecordThingsToFocusButton, #addRecordReferenceToggle, #addRecordSelectAllKeys, #addRecordClearAllKeys):not(:disabled):hover,
html body #addRecordModalBackdrop[data-importzone-draft="true"] :is(.secondary-button, button.secondary-button, #addRecordThingsToFocusButton, #addRecordReferenceToggle, #addRecordSelectAllKeys, #addRecordClearAllKeys):not(:disabled):focus-visible {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(14, 165, 233, 0.15)),
    rgba(10, 24, 44, 0.96) !important;
  border-color: rgba(216, 202, 255, 0.44) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #addRecordModalBackdrop[data-importzone-draft="true"] #addRecordModalSaveButton:not(:disabled) {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 56%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(124, 58, 237, 0.84)) !important;
  border: 1px solid rgba(191, 219, 254, 0.34) !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.18) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #addRecordModalBackdrop[data-importzone-draft="true"] :is(button:disabled, .secondary-button:disabled, #addRecordModalSaveButton:disabled) {
  background: rgba(20, 30, 47, 0.58) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.58) !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.58) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-grid {
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.92fr) !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-list {
  gap: 0.7rem !important;
  padding-right: 0.16rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row {
  align-items: center !important;
  gap: 0.62rem !important;
  grid-template-columns: 0.9rem 2rem minmax(0, 1fr) minmax(4.9rem, auto) !important;
  min-height: 4.45rem !important;
  overflow: hidden !important;
  padding: 0.68rem 0.72rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row.has-badges,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row.is-selected,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row.is-scheduled {
  min-height: 5.45rem !important;
  padding-block: 0.78rem !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row.is-added {
  opacity: 1 !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-copy {
  align-self: center !important;
  display: grid !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-copy strong {
  display: block !important;
  line-height: 1.18 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-copy small {
  line-height: 1.22 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-badges {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.28rem !important;
  margin-top: 0.28rem !important;
  min-height: 1.5rem !important;
  overflow: visible !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-badges em {
  font-size: 0.72rem !important;
  line-height: 1.1 !important;
  min-height: 1.44rem !important;
  padding: 0.24rem 0.52rem !important;
  white-space: nowrap !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row > button.schedule-builder-icon-button {
  align-self: center !important;
  font-size: 0.76rem !important;
  justify-self: end !important;
  min-height: 2.2rem !important;
  min-width: 4.8rem !important;
  padding-inline: 0.72rem !important;
  white-space: nowrap !important;
}

html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row.is-added > button.schedule-builder-icon-button,
html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row > button.schedule-builder-icon-button:disabled {
  background: rgba(22, 33, 54, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  color: rgba(226, 232, 240, 0.82) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.82) !important;
  opacity: 1 !important;
}

html body[data-current-screen="schedule-builder"] #scheduleBuilderScreen.schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row.is-added > button.secondary-button.schedule-builder-icon-button,
html body[data-current-screen="schedule-builder"] #scheduleBuilderScreen.schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row > button.secondary-button.schedule-builder-icon-button:disabled {
  background: rgba(22, 33, 54, 0.78) !important;
  border-color: rgba(186, 202, 228, 0.3) !important;
  color: rgba(238, 245, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(238, 245, 255, 0.9) !important;
  opacity: 1 !important;
}

@media (max-width: 980px) {
  html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row {
    grid-template-columns: 0.9rem 2rem minmax(0, 1fr) !important;
  }

  html body[data-current-screen="schedule-builder"] .schedule-builder-screen.is-basic-schedule-screen .schedule-basic-catalog .schedule-builder-picker-row > button.schedule-builder-icon-button {
    grid-column: 3 !important;
    justify-self: start !important;
    margin-top: 0.1rem !important;
  }
}

/* Restore workflow final contrast guard. This file loads late, so restore
   warnings/actions get their readable colors here as well as in styles.css. */
html body[data-current-screen="system"] .system-screen .backup-restore-panel .system-primary-action {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(14, 165, 233, 0.86)) !important;
  border-color: rgba(224, 242, 254, 0.72) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="system"] .system-screen .backup-restore-panel .system-primary-action:hover,
html body[data-current-screen="system"] .system-screen .backup-restore-panel .system-primary-action:focus-visible {
  background:
    linear-gradient(135deg, rgba(29, 78, 216, 1), rgba(2, 132, 199, 0.94)) !important;
  border-color: rgba(240, 249, 255, 0.86) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="system"] .system-screen .restore-preview-header strong {
  color: #f8fafc !important;
  font-weight: 900 !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html body[data-current-screen="system"] .system-screen .restore-preview-header p {
  color: #dbeafe !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: #dbeafe !important;
}

html body[data-current-screen="system"] .system-screen .restore-preview-count {
  background: rgba(2, 6, 23, 0.66) !important;
  border-color: rgba(190, 209, 238, 0.26) !important;
}

html body[data-current-screen="system"] .system-screen .restore-preview-count strong {
  color: #ffffff !important;
  font-weight: 900 !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="system"] .system-screen .restore-preview-count span {
  color: #e2e8f0 !important;
  font-weight: 840 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

html body[data-current-screen="system"] .system-screen .backup-restore-panel .restore-preview-message {
  color: #f8fafc !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html body[data-current-screen="system"] .system-screen .backup-restore-panel .restore-preview-message.is-success {
  background: rgba(20, 83, 45, 0.48) !important;
  border-color: rgba(74, 222, 128, 0.48) !important;
  color: #dcfce7 !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #dcfce7 !important;
}

html body[data-current-screen="system"] .system-screen .backup-restore-panel .restore-preview-message.is-warning {
  background: rgba(120, 53, 15, 0.5) !important;
  border-color: rgba(251, 191, 36, 0.6) !important;
  color: #fef3c7 !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #fef3c7 !important;
}

html body[data-current-screen="system"] .system-screen .backup-restore-panel .restore-preview-message.is-neutral {
  background: rgba(30, 41, 59, 0.74) !important;
  border-color: rgba(190, 209, 238, 0.3) !important;
  color: #f8fafc !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html body[data-current-screen="system"] .system-screen .backup-warning {
  color: #fde68a !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #fde68a !important;
}

#restoreConfirmModalBackdrop .restore-confirm-card {
  background:
    radial-gradient(circle at 10% 0%, rgba(96, 165, 250, 0.16), transparent 16rem),
    linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(3, 10, 24, 0.96)) !important;
  border-color: rgba(190, 209, 238, 0.26) !important;
  color: #f8fafc !important;
}

#restoreConfirmModalBackdrop #restoreConfirmSummary {
  color: #e2e8f0 !important;
  font-weight: 740 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}

#restoreConfirmModalBackdrop .restore-confirm-warning,
#restoreConfirmModalBackdrop .restore-confirm-warning * {
  color: #fef3c7 !important;
  font-weight: 780 !important;
  -webkit-text-fill-color: #fef3c7 !important;
}

#restoreConfirmModalBackdrop :is(#restoreConfirmCancelButton, #restoreConfirmCancelTopButton) {
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(51, 65, 85, 0.9)) !important;
  border: 1px solid rgba(203, 213, 225, 0.42) !important;
  color: #f8fafc !important;
  font-weight: 850 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #f8fafc !important;
}

#restoreConfirmModalBackdrop #restoreConfirmProceedButton {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(14, 165, 233, 0.86)) !important;
  border: 1px solid rgba(191, 219, 254, 0.66) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Goal-centric Goal Map overrides loaded after the main stylesheet. */
html body .practice-map-workspace.is-goal-plan {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-layout {
  grid-template-columns: minmax(0, 1fr) clamp(14rem, 18vw, 18rem) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-main {
  cursor: auto !important;
  overflow: auto !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-canvas {
  display: grid !important;
  gap: 0.7rem !important;
  grid-auto-columns: minmax(13.8rem, 17.5rem) !important;
  grid-auto-flow: column !important;
  min-height: min(62vh, 44rem) !important;
  min-width: max-content !important;
  padding: 0.15rem 0.2rem 0.45rem !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-goal-column {
  gap: 0.48rem !important;
  min-width: 0 !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-goal-card {
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-height: 4.2rem !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-item-card {
  border-radius: 0.58rem !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-height: 2.75rem !important;
  padding: 0.42rem 0.5rem !important;
}

html body .practice-map-workspace.is-goal-plan :is(
  .practice-map-card-copy em,
  .practice-map-coverage,
  .practice-map-connector,
  .practice-map-toolbar,
  .practice-map-summary-bar,
  .practice-map-pan-hint
) {
  display: none !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-unlinked-list article {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-unlinked-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

@media (max-width: 900px) {
  html body .practice-map-workspace.is-goal-plan .practice-map-canvas {
    grid-auto-columns: minmax(14.5rem, 82vw) !important;
  }

  html body .practice-map-workspace.is-goal-plan :is(.practice-map-layout, .practice-map-unlinked-actions) {
    grid-template-columns: 1fr !important;
  }
}

html body .practice-map-workspace.is-goal-plan {
  background:
    radial-gradient(circle at 18% 4%, rgba(45, 212, 191, 0.12), transparent 20rem),
    radial-gradient(circle at 82% 12%, rgba(96, 165, 250, 0.12), transparent 24rem),
    linear-gradient(145deg, rgba(3, 10, 24, 0.98), rgba(7, 17, 32, 0.98)) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-main {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.58), rgba(2, 8, 23, 0.34)) !important;
  background-size: auto !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  padding: 0.84rem !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-canvas {
  gap: 1rem !important;
  grid-auto-columns: minmax(15rem, 18.75rem) !important;
  padding: 0.1rem 0.1rem 0.6rem !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-goal-column {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 18%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.52), rgba(15, 23, 42, 0.2)) !important;
  border-radius: 1rem !important;
  gap: 0.34rem !important;
  padding: 0.34rem !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-goal-card {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 22%, transparent), transparent 70%),
    linear-gradient(145deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.78)) !important;
  border-color: color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 22%, rgba(148, 163, 184, 0.1)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  min-height: 4.45rem !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-goal-card {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 22%, transparent), transparent 70%),
    linear-gradient(145deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.78)) !important;
  border-color: color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 22%, rgba(148, 163, 184, 0.1)) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-item-card {
  --practice-map-item-tone: rgba(96, 165, 250, 0.9);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-map-item-tone) 14%, rgba(15, 23, 42, 0.58)), rgba(15, 23, 42, 0.38)) !important;
  border-color: transparent !important;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--practice-map-item-tone) 44%, transparent),
    inset 0 0 0 1px rgba(148, 163, 184, 0.065) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-item-card {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-map-item-tone) 14%, rgba(15, 23, 42, 0.58)), rgba(15, 23, 42, 0.38)) !important;
  border-color: transparent !important;
  border-left: 0 !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-item-card.is-drill {
  --practice-map-item-tone: rgba(34, 197, 94, 0.9);
}

html body .practice-map-workspace.is-goal-plan .practice-map-item-card.is-song {
  --practice-map-item-tone: rgba(96, 165, 250, 0.92);
}

html body .practice-map-workspace.is-goal-plan .practice-map-item-card.is-activity {
  --practice-map-item-tone: rgba(20, 184, 166, 0.9);
}

html body .practice-map-workspace.is-goal-plan .practice-map-item-card.is-solo {
  --practice-map-item-tone: rgba(249, 115, 22, 0.9);
}

html body .practice-map-workspace.is-goal-plan .practice-map-item-card:hover,
html body .practice-map-workspace.is-goal-plan .practice-map-item-card:focus-visible {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-map-item-tone) 20%, rgba(30, 41, 59, 0.78)), rgba(30, 41, 59, 0.66)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 30%, rgba(148, 163, 184, 0.08)),
    0 14px 30px rgba(0, 0, 0, 0.18) !important;
}

/* Goal Map final polish: dark dashboard depth and semantic category colors. */
html body .practice-map-workspace.is-goal-plan {
  background:
    radial-gradient(circle at 12% 2%, rgba(45, 212, 191, 0.13), transparent 23rem),
    radial-gradient(circle at 82% 8%, rgba(56, 189, 248, 0.11), transparent 27rem),
    radial-gradient(circle at 74% 86%, rgba(14, 165, 233, 0.07), transparent 24rem),
    linear-gradient(145deg, rgba(3, 10, 24, 0.99), rgba(5, 15, 31, 0.98) 52%, rgba(3, 12, 24, 0.99)) !important;
  border-color: rgba(125, 211, 252, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 24px 70px rgba(0, 0, 0, 0.28) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-header {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 46%),
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(2, 8, 23, 0.82)) !important;
  border-color: rgba(125, 211, 252, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px rgba(0, 0, 0, 0.24) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-logo {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.32), transparent 42%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.96), rgba(59, 130, 246, 0.86)) !important;
  box-shadow: 0 0 24px rgba(45, 212, 191, 0.22) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-main {
  background:
    linear-gradient(90deg, rgba(125, 211, 252, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(125, 211, 252, 0.026) 1px, transparent 1px),
    radial-gradient(circle at 18% 8%, rgba(45, 212, 191, 0.08), transparent 30%),
    radial-gradient(circle at 76% 76%, rgba(56, 189, 248, 0.075), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(2, 8, 23, 0.38)) !important;
  background-size: 38px 38px, 38px 38px, auto, auto, auto !important;
  border-color: rgba(125, 211, 252, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(15, 23, 42, 0.28) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-goal-column {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 16%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.28)) !important;
  border: 1px solid color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 16%, rgba(125, 211, 252, 0.1)) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-goal-card,
html body .practice-map-workspace.is-goal-plan .practice-map-goal-column[class*="practice-map-goal-tone"] .practice-map-goal-card {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 22%, transparent), transparent 70%),
    linear-gradient(145deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.78)) !important;
  border-color: color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 28%, rgba(148, 163, 184, 0.1)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.12) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-goal-card:hover,
html body .practice-map-workspace.is-goal-plan .practice-map-goal-card:focus-visible,
html body .practice-map-workspace.is-goal-plan .practice-map-mini-goal:hover,
html body .practice-map-workspace.is-goal-plan .practice-map-mini-goal:focus-visible {
  border-color: color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 46%, rgba(125, 211, 252, 0.16)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.2),
    0 0 24px color-mix(in srgb, var(--practice-map-column-tone, #8b5cf6) 14%, transparent) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

html body .practice-map-workspace.is-goal-plan .practice-map-item-card:hover,
html body .practice-map-workspace.is-goal-plan .practice-map-item-card:focus-visible {
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--practice-map-item-tone) 62%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--practice-map-item-tone) 22%, rgba(148, 163, 184, 0.08)),
    0 13px 28px rgba(0, 0, 0, 0.18) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

html body .practice-map-workspace .practice-map-warmup-card {
  background:
    radial-gradient(circle at 0% 0%, var(--zb-system-warmup-soft, rgba(251, 191, 36, 0.12)), transparent 62%),
    linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(15, 23, 42, 0.58)) !important;
  border-color: var(--zb-system-warmup-border, rgba(253, 230, 138, 0.34)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92)) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.067),
    0 18px 42px rgba(2, 8, 23, 0.22) !important;
}

html body .practice-map-workspace .practice-map-warmup-card header b,
html body .practice-map-workspace .practice-map-warmup-badge {
  background: color-mix(in srgb, var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92)) 16%, rgba(15, 23, 42, 0.72)) !important;
  border-color: color-mix(in srgb, var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92)) 36%, transparent) !important;
  color: #fef3c7 !important;
}

html body .practice-map-workspace .practice-map-warmup-card header small,
html body .practice-map-workspace .practice-map-warmup-item small {
  color: rgba(254, 240, 138, 0.74) !important;
}

html body .practice-map-workspace .practice-map-warmup-card .practice-map-warmup-list .practice-map-warmup-item {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92)) 15%, rgba(15, 23, 42, 0.64)), rgba(15, 23, 42, 0.42)) !important;
  border-color: color-mix(in srgb, var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92)) 24%, transparent) !important;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92)) 42%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92)) 10%, transparent) !important;
}

html body .practice-map-workspace .practice-map-warmup-item .practice-map-card-icon {
  --practice-map-tone: var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92));
}

html body .practice-map-workspace .practice-map-warmup-item:hover,
html body .practice-map-workspace .practice-map-warmup-item:focus-visible {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92)) 21%, rgba(30, 41, 59, 0.76)), rgba(30, 41, 59, 0.62)) !important;
  border-color: color-mix(in srgb, var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92)) 38%, transparent) !important;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--zb-system-warmup-tone, rgba(251, 191, 36, 0.92)) 62%, transparent),
    0 12px 26px rgba(0, 0, 0, 0.16) !important;
  transform: translateY(-1px) !important;
}

html body .practice-map-workspace .practice-map-unlinked-card {
  background:
    radial-gradient(circle at 0% 0%, var(--zb-system-unlinked-soft, rgba(148, 163, 184, 0.11)), transparent 62%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(2, 8, 23, 0.58)) !important;
  border-color: var(--zb-system-unlinked-border, rgba(148, 163, 184, 0.24)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--zb-system-unlinked-tone, rgba(148, 163, 184, 0.9)) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.067),
    0 18px 42px rgba(2, 8, 23, 0.22) !important;
}

html body .practice-map-workspace .practice-map-unlinked-card summary b {
  background: color-mix(in srgb, var(--zb-system-unlinked-tone, rgba(148, 163, 184, 0.9)) 15%, rgba(15, 23, 42, 0.76)) !important;
  border-color: color-mix(in srgb, var(--zb-system-unlinked-tone, rgba(148, 163, 184, 0.9)) 28%, transparent) !important;
  color: rgba(226, 232, 240, 0.92) !important;
  font-weight: 640 !important;
}

html body .practice-map-workspace .practice-map-unlinked-card summary::after {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--zb-system-unlinked-tone, rgba(148, 163, 184, 0.9)) 42%, rgba(226, 232, 240, 0.72)) !important;
  border-radius: 0 !important;
  border-style: solid !important;
  border-width: 0 2px 2px 0 !important;
  content: "" !important;
  height: 0.48rem !important;
  margin: 0 0.18rem !important;
  transform: rotate(-45deg) !important;
  transition: transform 160ms ease, border-color 160ms ease !important;
  width: 0.48rem !important;
}

html body .practice-map-workspace details.practice-map-unlinked-card[open] > summary::after,
html body .practice-map-workspace .practice-map-unlinked-card[open] summary::after {
  transform: rotate(45deg) !important;
}

html body .practice-map-workspace .practice-map-unlinked-guidance {
  color: rgba(203, 213, 225, 0.74) !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
  margin-top: 0.5rem !important;
}

html body .practice-map-workspace .practice-map-goal-copy strong {
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

html body .practice-map-workspace .practice-map-goal-copy small {
  color: rgba(203, 213, 225, 0.68) !important;
  font-weight: 520 !important;
  -webkit-text-fill-color: rgba(203, 213, 225, 0.68) !important;
}

html body .practice-map-workspace .practice-map-unlinked-list article {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--zb-system-unlinked-tone, rgba(148, 163, 184, 0.9)) 11%, rgba(15, 23, 42, 0.66)), rgba(15, 23, 42, 0.44)) !important;
  border-color: color-mix(in srgb, var(--zb-system-unlinked-tone, rgba(148, 163, 184, 0.9)) 20%, transparent) !important;
}

html body .practice-map-workspace .practice-map-unlinked-list article .practice-map-card-icon {
  --practice-map-tone: var(--zb-system-unlinked-tone, rgba(148, 163, 184, 0.9));
}

html body .practice-map-workspace .practice-map-unlinked-list article:hover,
html body .practice-map-workspace .practice-map-unlinked-list article:focus-within {
  border-color: color-mix(in srgb, var(--zb-system-unlinked-tone, rgba(148, 163, 184, 0.9)) 34%, transparent) !important;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--zb-system-unlinked-tone, rgba(148, 163, 184, 0.9)) 48%, transparent),
    0 12px 24px rgba(0, 0, 0, 0.16) !important;
}

/* Library + Collection polish pass: final-loaded overrides. */
html body[data-current-screen="catalog"] .organize-catalog-workspace {
  display: grid !important;
  gap: 0.78rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-workspace-topbar {
  align-items: stretch !important;
  display: grid !important;
  gap: 0.58rem !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  padding: 0.72rem 0.82rem !important;
  position: relative !important;
  z-index: 120 !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-primary-row {
  align-items: end !important;
  display: grid !important;
  gap: 0.78rem !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  width: 100% !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-workspace-brand {
  min-width: 7.5rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-workspace-brand h2 {
  font-size: clamp(1.32rem, 1.8vw, 1.72rem) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-workspace-brand p,
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-workspace-logo,
html body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-tools {
  display: none !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-workspace-controls {
  align-items: end !important;
  display: grid !important;
  gap: 0.62rem !important;
  grid-template-columns: minmax(24rem, 1fr) minmax(8.4rem, auto) auto !important;
  width: 100% !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-search,
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-sort-control {
  display: grid !important;
  gap: 0.22rem !important;
  min-width: 0 !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .organize-catalog-search input,
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-sort-control select {
  background: rgba(2, 8, 23, 0.76) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  min-height: 2.42rem !important;
  padding: 0.55rem 0.72rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-add-launch-button {
  align-self: end !important;
  min-height: 2.42rem !important;
  padding: 0.5rem 0.9rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-action-cluster {
  align-self: end !important;
  display: inline-flex !important;
  gap: 0.42rem !important;
  justify-content: flex-end !important;
  min-height: 2.42rem !important;
  position: relative !important;
  z-index: 130 !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-icon-button {
  align-items: center !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(125, 211, 252, 0.13), transparent 4rem),
    rgba(15, 23, 42, 0.86) !important;
  border: 1px solid rgba(125, 211, 252, 0.28) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.16) !important;
  color: #f8fafc !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 1.08rem !important;
  font-weight: 930 !important;
  height: 2.42rem !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-width: 2.42rem !important;
  padding: 0 !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-icon-button:hover,
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-icon-button:focus-visible,
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-icon-button[aria-expanded="true"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 4rem),
    linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(124, 58, 237, 0.76)) !important;
  border-color: rgba(191, 219, 254, 0.5) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-icon-button.catalog-add-primary-button {
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.36), transparent 32%),
    linear-gradient(135deg, #2563eb 0%, #0ea5e9 78%, #38bdf8 100%) !important;
  border-color: rgba(191, 219, 254, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 18px 42px rgba(37, 99, 235, 0.34),
    0 0 30px rgba(14, 165, 233, 0.20) !important;
  font-size: 1.96rem !important;
  height: 3.08rem !important;
  min-height: 3.08rem !important;
  min-width: 3.08rem !important;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.18) !important;
  width: 3.08rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-icon-button.catalog-add-primary-button:hover,
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-icon-button.catalog-add-primary-button:focus-visible,
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-icon-button.catalog-add-primary-button[aria-expanded="true"] {
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.38), transparent 34%),
    linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%) !important;
  border-color: rgba(219, 234, 254, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 22px 54px rgba(37, 99, 235, 0.42),
    0 0 38px rgba(14, 165, 233, 0.28) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-menu {
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.18), transparent 12rem),
    linear-gradient(145deg, rgba(10, 22, 42, 0.98), rgba(3, 10, 24, 0.98)) !important;
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  border-radius: 0.88rem !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.36) !important;
  color: #f8fafc !important;
  display: grid !important;
  gap: 0.28rem !important;
  min-width: 14.5rem !important;
  padding: 0.58rem !important;
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 0.5rem) !important;
  z-index: 140 !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-help-menu {
  min-width: 16rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-menu strong {
  color: rgba(203, 213, 225, 0.74) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  padding: 0.18rem 0.32rem 0.3rem !important;
  text-transform: uppercase !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-menu button {
  align-items: center !important;
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 0.62rem !important;
  color: rgba(241, 245, 249, 0.94) !important;
  cursor: pointer !important;
  display: flex !important;
  gap: 0.48rem !important;
  justify-content: flex-start !important;
  min-height: 2.12rem !important;
  padding: 0.42rem 0.52rem !important;
  text-align: left !important;
  -webkit-text-fill-color: rgba(241, 245, 249, 0.94) !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-menu button:hover,
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-menu button:focus-visible {
  background: rgba(37, 99, 235, 0.28) !important;
  border-color: rgba(125, 211, 252, 0.36) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-menu hr {
  border: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
  margin: 0.24rem 0 !important;
  width: 100% !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-menu-icon {
  align-items: center !important;
  background: rgba(59, 130, 246, 0.18) !important;
  border-radius: 0.5rem !important;
  color: #bfdbfe !important;
  display: inline-flex !important;
  height: 1.4rem !important;
  justify-content: center !important;
  width: 1.4rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-menu-icon svg {
  height: 0.92rem !important;
  stroke: currentColor !important;
  width: 0.92rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-unified-filter-rail {
  align-items: center !important;
  display: flex !important;
  gap: 0.55rem !important;
  grid-template-columns: none !important;
  justify-content: space-between !important;
  padding: 0 !important;
  width: 100% !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-unified-filter-rail > div {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.34rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-type-filter-group {
  flex: 1 1 auto !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-status-filter-group {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-unified-filter-rail button {
  border-radius: 999px !important;
  cursor: pointer !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  min-height: 1.95rem !important;
  padding: 0.34rem 0.62rem !important;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-type-filter-group button {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(125, 211, 252, 0.2) !important;
  color: rgba(219, 234, 254, 0.92) !important;
  -webkit-text-fill-color: rgba(219, 234, 254, 0.92) !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-status-filter-group button {
  background: rgba(67, 56, 202, 0.14) !important;
  border-color: rgba(167, 139, 250, 0.22) !important;
  color: rgba(221, 214, 254, 0.9) !important;
  -webkit-text-fill-color: rgba(221, 214, 254, 0.9) !important;
  font-size: 0.72rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-unified-filter-rail button.is-selected,
html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-unified-filter-rail button[aria-pressed="true"] {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.18), transparent 4rem),
    linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(124, 58, 237, 0.78)) !important;
  border-color: rgba(191, 219, 254, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(37, 99, 235, 0.18) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-toolbox {
  align-items: center !important;
  display: grid !important;
  gap: 0.78rem !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  padding: 0.52rem 0.64rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-heading {
  align-items: center !important;
  display: flex !important;
  gap: 0.42rem !important;
  min-width: 5.2rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-heading > span {
  align-items: center !important;
  display: flex !important;
  gap: 0.38rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-heading strong {
  font-size: 0.84rem !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-heading > span > span {
  display: none !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-help {
  height: 1.8rem !important;
  min-height: 1.8rem !important;
  width: 1.8rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-grid {
  gap: 0.42rem !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-grid button {
  gap: 0.34rem !important;
  min-height: 2.1rem !important;
  padding: 0.32rem 0.48rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-icon {
  height: 1.34rem !important;
  width: 1.34rem !important;
}

html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-grid button > span:last-child {
  font-size: 0.76rem !important;
  line-height: 1 !important;
}

html body #collectionBuilderWorkspaceScreen .collection-builder-toolbar input,
html body #collectionBuilderWorkspaceScreen .collection-builder-title-label input,
html body #collectionBuilderWorkspaceScreen .collection-builder-description-label textarea,
html body .collection-form-modal input,
html body .collection-form-modal textarea,
html body .collection-add-item-modal input,
html body .collection-add-item-modal textarea {
  background: rgba(2, 8, 23, 0.76) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  caret-color: #67e8f9 !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html body #collectionBuilderWorkspaceScreen .collection-builder-header-meta {
  align-items: center !important;
  align-self: end !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.1), transparent 5rem),
    rgba(15, 23, 42, 0.5) !important;
  border-color: rgba(94, 234, 212, 0.18) !important;
  display: flex !important;
  gap: 0.45rem !important;
  height: auto !important;
  justify-content: center !important;
  justify-self: end !important;
  min-width: 7.25rem !important;
  min-height: 3.05rem !important;
  padding: 0.48rem 0.58rem !important;
}

html body #collectionBuilderWorkspaceScreen .collection-builder-header-meta span {
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body #collectionBuilderWorkspaceScreen .collection-builder-header-meta strong {
  color: rgba(248, 250, 252, 0.94) !important;
  font-size: 1rem !important;
}

html body #collectionBuilderWorkspaceScreen .collection-builder-filter-strip:first-of-type .collection-builder-filter-button {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(125, 211, 252, 0.2) !important;
  color: rgba(219, 234, 254, 0.9) !important;
  -webkit-text-fill-color: rgba(219, 234, 254, 0.9) !important;
}

html body #collectionBuilderWorkspaceScreen .collection-builder-filter-strip.is-status .collection-builder-filter-button {
  background: rgba(67, 56, 202, 0.14) !important;
  border-color: rgba(167, 139, 250, 0.2) !important;
  color: rgba(221, 214, 254, 0.88) !important;
  -webkit-text-fill-color: rgba(221, 214, 254, 0.88) !important;
}

html body #collectionBuilderWorkspaceScreen .collection-builder-filter-strip .collection-builder-filter-button.is-selected,
html body #collectionBuilderWorkspaceScreen .collection-builder-filter-strip .collection-builder-filter-button[aria-pressed="true"] {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.18), transparent 4rem),
    linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(124, 58, 237, 0.78)) !important;
  border-color: rgba(191, 219, 254, 0.52) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #collectionBuilderWorkspaceScreen .collection-builder-screen-root,
html body #collectionBuilderWorkspaceScreen .collection-builder-screen-shell {
  height: 100% !important;
  min-height: 0 !important;
}

html body #collectionBuilderWorkspaceScreen .collection-builder-workbench {
  min-height: 0 !important;
}

html body #collectionBuilderWorkspaceScreen .collection-builder-candidate-list {
  align-content: start !important;
  display: grid !important;
  gap: 0.54rem !important;
  grid-auto-rows: auto !important;
}

html body #collectionBuilderWorkspaceScreen .collection-candidate-row {
  align-items: start !important;
  display: grid !important;
  grid-template-columns: 1rem 2.5rem minmax(0, 1fr) !important;
  min-height: 5rem !important;
  overflow: visible !important;
  padding: 0.68rem 0.72rem !important;
  white-space: normal !important;
}

html body #collectionBuilderWorkspaceScreen .collection-candidate-copy {
  align-self: start !important;
  display: grid !important;
  gap: 0.18rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body #collectionBuilderWorkspaceScreen .collection-candidate-copy strong {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  line-height: 1.18 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html body #collectionBuilderWorkspaceScreen .collection-candidate-copy small,
html body #collectionBuilderWorkspaceScreen .collection-candidate-copy em {
  display: block !important;
  line-height: 1.22 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body :is(.catalog-record-icon, .catalog-row-icon, .catalog-selected-icon).catalog-record-collection {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.2), transparent 1.7rem),
    linear-gradient(135deg, rgba(124, 58, 237, 0.88), rgba(20, 184, 166, 0.6)) !important;
  border-color: rgba(196, 181, 253, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(79, 70, 229, 0.24) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body :is(.catalog-record-icon, .catalog-row-icon, .catalog-selected-icon).catalog-record-collection svg {
  stroke-width: 2.15 !important;
}

html body #guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-card,
html body #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .guidance-modal-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.18), transparent 18rem),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.09), transparent 18rem),
    linear-gradient(145deg, rgba(10, 22, 42, 0.98), rgba(3, 10, 24, 0.98)) !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
  color: #f8fafc !important;
}

html body #guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-actions button,
html body #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .guidance-modal-actions button,
html body #guidanceModalBackdrop:has(.collection-form-modal) .collection-create-inline button {
  align-items: center !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  font-size: 0.86rem !important;
  font-weight: 880 !important;
  justify-content: center !important;
  min-height: 2.38rem !important;
  padding: 0.5rem 0.95rem !important;
}

html body #guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-actions button:not(.secondary-button),
html body #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-learn-more,
html body #guidanceModalBackdrop:has(.collection-form-modal) .collection-create-inline button {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.2), transparent 4rem),
    linear-gradient(135deg, rgba(124, 58, 237, 0.98), rgba(14, 165, 233, 0.78)) !important;
  border: 1px solid rgba(216, 202, 255, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-help-list {
  gap: 0.44rem !important;
}

html body #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-help-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.48rem !important;
}

html body #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-help-list article {
  gap: 0.12rem !important;
  min-height: 4.4rem !important;
  padding: 0.54rem 0.62rem !important;
}

@media (max-width: 1180px) {
  html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-workspace-controls {
    grid-template-columns: minmax(16rem, 1fr) minmax(7rem, auto) auto !important;
  }

  html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-header-primary-row,
  html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-workspace-controls,
  html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-unified-filter-rail,
  html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-toolbox {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-status-filter-group {
    justify-content: flex-start !important;
  }

  html body[data-current-screen="catalog"] .organize-catalog-workspace .catalog-quick-add-grid,
  html body #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-help-list {
    grid-template-columns: 1fr !important;
  }
}

/* Final edit-modal polish: keep secondary dialogs aligned with the light editor system. */
html body #guidanceModalBackdrop.is-supporting-material-picker-modal,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal {
  align-items: center !important;
  overflow: hidden !important;
  padding: clamp(0.75rem, 2vw, 1.35rem) !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .modal-card.guidance-modal-card,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .modal-card.guidance-modal-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.3), transparent 18rem),
    radial-gradient(circle at 92% 9%, rgba(255, 255, 255, 0.34), transparent 17rem),
    linear-gradient(145deg, #d6ebee 0%, #bfd9e2 48%, #a7c4d0 100%) !important;
  border: 1px solid rgba(15, 118, 110, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 38px 104px rgba(0, 0, 0, 0.56),
    0 0 46px rgba(20, 184, 166, 0.18) !important;
  color: #14282e !important;
  color-scheme: light !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  max-height: calc(100dvh - 1.5rem) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  -webkit-text-fill-color: #14282e !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .modal-header,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .modal-header {
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.32), transparent 14rem),
    linear-gradient(135deg, rgba(232, 248, 247, 0.98), rgba(182, 213, 223, 0.98)) !important;
  border-bottom: 1px solid rgba(15, 118, 110, 0.4) !important;
  color: #14282e !important;
  -webkit-text-fill-color: #14282e !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal #guidanceModalTitle,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal #guidanceModalTitle,
html body #guidanceModalBackdrop.is-supporting-material-picker-modal .modal-header .eyebrow,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .modal-header .eyebrow {
  text-shadow: none !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-message,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .guidance-modal-message {
  border-bottom: 1px solid rgba(15, 118, 110, 0.24) !important;
  color: #51686d !important;
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  -webkit-text-fill-color: #51686d !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-body,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .guidance-modal-body {
  background:
    radial-gradient(circle at 0% 20%, rgba(45, 212, 191, 0.1), transparent 18rem),
    linear-gradient(180deg, rgba(230, 247, 246, 0.34), rgba(166, 198, 211, 0.28)) !important;
  color: #172b31 !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 1rem 1.25rem !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-actions,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .guidance-modal-actions {
  background:
    linear-gradient(180deg, rgba(212, 234, 237, 0.96), rgba(180, 205, 215, 0.99)) !important;
  border-top: 1px solid rgba(15, 118, 110, 0.28) !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  min-height: 3.65rem !important;
  padding: 0.72rem 1.25rem !important;
  position: relative !important;
  z-index: 2 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-actions .secondary-button,
html body #guidanceModalBackdrop.is-supporting-material-picker-modal [data-supporting-material-choose],
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .guidance-modal-actions .secondary-button,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .collection-picker-row .secondary-button {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.46), transparent 4rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(20, 184, 166, 0.2)) !important;
  border: 1px solid rgba(15, 118, 110, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 8px 18px rgba(12, 74, 80, 0.1) !important;
  color: #0b4f4a !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #0b4f4a !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker {
  display: grid !important;
  gap: 0.9rem !important;
  min-height: 0 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-list,
html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-section,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .collection-form-modal {
  min-height: 0 !important;
  overflow: visible !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-list {
  max-height: min(46vh, 25rem) !important;
  overflow: auto !important;
  padding-bottom: 0.85rem !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-list {
  display: block !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-single-section {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-single-section .supporting-material-picker-list {
  max-height: min(44vh, 24rem) !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 0 0.1rem 0.85rem 0 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-section {
  display: block !important;
  margin: 0 !important;
  min-height: auto !important;
  overflow: hidden !important;
  padding: 0.72rem !important;
  position: relative !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-section + .supporting-material-picker-section {
  margin-top: 0.85rem !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-heading {
  display: grid !important;
  gap: 0.08rem !important;
  margin: 0 0 0.46rem !important;
  position: relative !important;
  z-index: 1 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-item {
  margin: 0.34rem 0 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-heading + .supporting-material-picker-item {
  margin-top: 0 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-controls,
html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-section,
html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-item,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .collection-form-modal label,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .collection-create-inline {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem),
    linear-gradient(145deg, rgba(240, 251, 251, 0.86), rgba(204, 226, 234, 0.8)) !important;
  border: 1px solid rgba(15, 118, 110, 0.24) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 12px 26px rgba(12, 74, 80, 0.09) !important;
  color: #172b31 !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .collection-form-modal {
  display: grid !important;
  gap: 0.95rem !important;
  overflow: visible !important;
  padding: 0 !important;
}

html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .collection-form-modal label {
  display: grid !important;
  gap: 0.42rem !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0.9rem !important;
}

html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .collection-form-modal label > span,
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .collection-create-inline label > span {
  background: transparent !important;
  color: #172b31 !important;
  display: block !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  overflow: visible !important;
  position: static !important;
  transform: none !important;
  z-index: auto !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal :is(input, textarea, select),
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal :is(input, textarea, select) {
  background: linear-gradient(180deg, #ffffff, #eff8f8) !important;
  border: 1px solid rgba(15, 118, 110, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(12, 74, 80, 0.1) !important;
  color: #152a30 !important;
  min-height: 2.45rem !important;
  -webkit-text-fill-color: #152a30 !important;
}

html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal textarea {
  min-height: 6.2rem !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal :is(.supporting-material-picker-heading strong, .supporting-material-picker-copy strong, label span),
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal :is(strong, h4, span) {
  color: #172b31 !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal :is(.supporting-material-picker-heading small, .supporting-material-picker-copy small, p, small),
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal :is(p, small, .collection-form-note) {
  color: #51686d !important;
  -webkit-text-fill-color: #51686d !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-resource-creator .catalog-add-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 0 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-resource-creator .catalog-add-choice {
  align-items: center !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 11rem),
    linear-gradient(145deg, rgba(243, 253, 253, 0.92), rgba(202, 229, 236, 0.86)) !important;
  border: 1px solid rgba(15, 118, 110, 0.3) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 12px 28px rgba(12, 74, 80, 0.1) !important;
  color: #172b31 !important;
  display: grid !important;
  gap: 0.3rem 0.7rem !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-height: 5.1rem !important;
  padding: 0.86rem 0.95rem !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-resource-creator .catalog-add-choice strong {
  color: #172b31 !important;
  font-size: 0.96rem !important;
  font-weight: 820 !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-resource-creator .catalog-add-choice span:not(.catalog-add-choice-icon) {
  color: #51686d !important;
  font-size: 0.8rem !important;
  -webkit-text-fill-color: #51686d !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-resource-creator .catalog-add-choice-icon {
  background: linear-gradient(135deg, #5eead4, #38bdf8 52%, #6366f1) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  height: 2.45rem !important;
  place-items: center !important;
  width: 2.45rem !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-resource-creator .catalog-add-choice-icon svg {
  stroke: currentColor !important;
}

html body #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-resource-creator .organize-catalog-add-grid label {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem),
    linear-gradient(145deg, rgba(240, 251, 251, 0.82), rgba(204, 226, 234, 0.78)) !important;
  border: 1px solid rgba(15, 118, 110, 0.24) !important;
  border-radius: 14px !important;
  color: #172b31 !important;
  padding: 0.58rem !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .guidance-modal-actions button:not(.secondary-button),
html body #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .collection-create-inline button {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.38), transparent 4rem),
    linear-gradient(135deg, #7dd3fc, #14b8a6 42%, #0f766e) !important;
  border: 1px solid rgba(204, 251, 241, 0.72) !important;
  box-shadow:
    0 14px 30px rgba(15, 118, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  color: #042f2e !important;
  -webkit-text-fill-color: #042f2e !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .modal-card.guidance-modal-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  max-height: calc(100dvh - 1.5rem) !important;
  max-width: min(880px, calc(100vw - 1.5rem)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .guidance-modal-body {
  display: block !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 1rem 1.25rem !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .guidance-modal-actions {
  align-items: center !important;
  flex-direction: row !important;
  gap: 0.52rem !important;
  justify-content: flex-end !important;
  min-height: 3.75rem !important;
  padding: 0.72rem 1.25rem !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .guidance-modal-actions button {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal :is(.journal-capture-metric, .journal-capture-audio-panel, .journal-recording-resource-step, .journal-discard-prompt) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.15), transparent 12rem),
    linear-gradient(145deg, rgba(241, 252, 252, 0.9), rgba(204, 226, 234, 0.84)) !important;
  border: 1px solid rgba(15, 118, 110, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 12px 26px rgba(12, 74, 80, 0.08) !important;
  color: #172b31 !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal :is(.journal-capture-metric small, .journal-capture-audio-panel p, .journal-recording-detail-help, .journal-recording-resource-step p, .journal-recording-collection-choice small, .journal-discard-prompt p) {
  color: #51686d !important;
  -webkit-text-fill-color: #51686d !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal :is(.journal-capture-metric strong, .journal-capture-audio-panel strong, .journal-recording-resource-step > strong, .journal-recording-collection-choice strong, .journal-discard-prompt strong) {
  color: #172b31 !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .journal-recording-status.is-inbox {
  background: rgba(204, 251, 241, 0.82) !important;
  border: 1px solid rgba(15, 118, 110, 0.34) !important;
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .journal-recording-status.is-attached {
  background: rgba(220, 252, 231, 0.86) !important;
  border: 1px solid rgba(22, 163, 74, 0.3) !important;
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .journal-recording-status.is-library {
  background: rgba(237, 233, 254, 0.88) !important;
  border: 1px solid rgba(124, 58, 237, 0.26) !important;
  color: #6d28d9 !important;
  -webkit-text-fill-color: #6d28d9 !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .journal-recording-audio {
  background: rgba(255, 255, 255, 0.58) !important;
  border-radius: 999px !important;
  display: block !important;
  width: 100% !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .journal-recording-collection-choice label {
  align-items: flex-start !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(20, 184, 166, 0.1)) !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: #172b31 !important;
  display: flex !important;
  gap: 0.55rem !important;
  padding: 0.62rem 0.7rem !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .journal-recording-collection-choice label:has(input:checked) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.2), transparent 11rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(125, 211, 252, 0.18)) !important;
  border-color: rgba(15, 118, 110, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 22px rgba(12, 74, 80, 0.1) !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .journal-recording-collection-choice input[type="radio"] {
  accent-color: #0f766e !important;
  appearance: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #0f766e !important;
  height: 1rem !important;
  min-height: 1rem !important;
  width: 1rem !important;
  -webkit-text-fill-color: #0f766e !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="danger"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.46), transparent 4rem),
    linear-gradient(135deg, rgba(255, 228, 230, 0.96), rgba(254, 202, 202, 0.82)) !important;
  border: 1px solid rgba(190, 18, 60, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 8px 18px rgba(127, 29, 29, 0.12) !important;
  color: #9f1239 !important;
  margin-right: auto !important;
  order: 0 !important;
  -webkit-text-fill-color: #9f1239 !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="editor"].secondary-button {
  order: 1 !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="workflow"].secondary-button {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.42), transparent 4rem),
    linear-gradient(135deg, rgba(240, 253, 250, 0.96), rgba(125, 211, 252, 0.2)) !important;
  order: 2 !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="editor"]:not(.secondary-button),
html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="workflow"]:not(.secondary-button) {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.38), transparent 4rem),
    linear-gradient(135deg, #7dd3fc, #14b8a6 42%, #0f766e) !important;
  border: 1px solid rgba(204, 251, 241, 0.72) !important;
  box-shadow:
    0 14px 30px rgba(15, 118, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  color: #042f2e !important;
  -webkit-text-fill-color: #042f2e !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="workflow"]:not(.secondary-button) {
  order: 3 !important;
}

html body #guidanceModalBackdrop:is(.is-journal-capture-modal, .is-journal-resource-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="editor"]:not(.secondary-button) {
  order: 4 !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .modal-card.guidance-modal-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  max-height: calc(100dvh - 1.5rem) !important;
  max-width: min(900px, calc(100vw - 1.5rem)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .guidance-modal-message {
  padding-block: 0.78rem !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .guidance-modal-body {
  display: block !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 1rem 1.25rem !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .guidance-modal-actions {
  align-items: center !important;
  flex-direction: row !important;
  gap: 0.52rem !important;
  justify-content: flex-end !important;
  min-height: 3.65rem !important;
  padding: 0.72rem 1.25rem !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .guidance-modal-actions button {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal :is(.quick-record-save-prompt, .quick-record-attach-search-card, .quick-record-attach-section) {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.15), transparent 12rem),
    linear-gradient(145deg, rgba(241, 252, 252, 0.9), rgba(204, 226, 234, 0.84)) !important;
  border: 1px solid rgba(15, 118, 110, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 12px 26px rgba(12, 74, 80, 0.08) !important;
  color: #172b31 !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal :is(.quick-record-save-prompt strong, .quick-record-attach-search-field > span, .quick-record-search-group-heading strong, .quick-record-attach-heading strong, .quick-record-attach-title-row strong, .quick-record-search-empty strong) {
  color: #172b31 !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal :is(.quick-record-save-prompt p, .quick-record-search-group-heading small, .quick-record-attach-heading small, .quick-record-attach-copy small, .quick-record-attach-empty, .quick-record-search-empty) {
  color: #51686d !important;
  -webkit-text-fill-color: #51686d !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .quick-record-search-results {
  background:
    linear-gradient(145deg, rgba(248, 254, 254, 0.96), rgba(216, 236, 241, 0.92)) !important;
  border: 1px solid rgba(15, 118, 110, 0.24) !important;
  color: #172b31 !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .quick-record-attach-item {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(20, 184, 166, 0.1)) !important;
  border: 1px solid rgba(15, 118, 110, 0.18) !important;
  box-shadow: none !important;
  color: #172b31 !important;
  -webkit-text-fill-color: #172b31 !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .quick-record-attach-item:hover,
html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .quick-record-attach-item:focus-visible {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 10rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(125, 211, 252, 0.18)) !important;
  border-color: rgba(15, 118, 110, 0.38) !important;
  box-shadow: 0 10px 22px rgba(12, 74, 80, 0.1) !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .quick-record-attach-picker .quick-start-type {
  background: rgba(204, 251, 241, 0.78) !important;
  border: 1px solid rgba(15, 118, 110, 0.24) !important;
  color: #0f766e !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  -webkit-text-fill-color: #0f766e !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="editor"] {
  order: 1 !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="workflow"] {
  order: 2 !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="workflow"]:not(.secondary-button) {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.38), transparent 4rem),
    linear-gradient(135deg, #7dd3fc, #14b8a6 42%, #0f766e) !important;
  border: 1px solid rgba(204, 251, 241, 0.72) !important;
  box-shadow:
    0 14px 30px rgba(15, 118, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  color: #042f2e !important;
  -webkit-text-fill-color: #042f2e !important;
}

html body #guidanceModalBackdrop:is(.is-quick-record-save-modal, .is-quick-record-attach-modal).is-secondary-light-modal .guidance-modal-actions [data-guidance-action-role="danger"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.42), transparent 4rem),
    linear-gradient(135deg, rgba(255, 228, 230, 0.96), rgba(248, 113, 113, 0.78)) !important;
  border: 1px solid rgba(190, 18, 60, 0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 8px 18px rgba(127, 29, 29, 0.12) !important;
  color: #9f1239 !important;
  order: 3 !important;
  -webkit-text-fill-color: #9f1239 !important;
}

html body #organizeWorkspaceShell .catalog-add-flow-panel.organize-catalog-add-panel .catalog-add-flow-actions button.secondary-button.importzone-primary-button[data-catalog-create-entry]:not(:disabled) {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.38), transparent 4rem),
    linear-gradient(135deg, #7dd3fc, #14b8a6 42%, #0f766e) !important;
  border: 1px solid rgba(204, 251, 241, 0.72) !important;
  box-shadow:
    0 14px 30px rgba(15, 118, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  color: #042f2e !important;
  -webkit-text-fill-color: #042f2e !important;
}