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

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --background: 210 33% 98%;
    --foreground: 221 54% 16%;
    --card: 0 0% 100%;
    --card-foreground: 221 54% 16%;
    --popover: 0 0% 100%;
    --popover-foreground: 221 54% 16%;
    --primary: 219 78% 15%;
    --primary-foreground: 0 0% 100%;
    --secondary: 213 40% 96%;
    --secondary-foreground: 221 54% 16%;
    --muted: 213 40% 96%;
    --muted-foreground: 220 24% 43%;
    --accent: 13 100% 86%;
    --accent-foreground: 221 54% 16%;
    --success: 176 70% 32%;
    --success-foreground: 0 0% 100%;
    --warning: 32 100% 70%;
    --warning-foreground: 221 54% 16%;
    --danger: 9 100% 63%;
    --danger-foreground: 0 0% 100%;
    --info: 212 84% 56%;
    --info-foreground: 0 0% 100%;
    --tag-accent: 13 100% 90%;
    --tag-danger: 9 100% 94%;
    --tag-foreground: 221 54% 16%;
    --tag-info: 212 100% 94%;
    --tag-success: 176 70% 92%;
    --tag-warning: 32 100% 90%;
    --warning-emphasis: 32 100% 28%;
    --destructive: var(--danger);
    --destructive-foreground: var(--danger-foreground);
    --border: 218 34% 90%;
    --input: 218 34% 90%;
    --ring: 176 70% 32%;
    --chart-1: 215 92% 87%;
    --chart-2: 207 94% 90%;
    --chart-3: 166 55% 84%;
    --chart-4: 20 100% 85%;
    --chart-5: 176 45% 54%;
    --motion-fast: 160ms;
    --motion-standard: 240ms;
    --motion-deliberate: 360ms;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-elastic: cubic-bezier(0.16, 1, 0.3, 1);
    --sidebar-expanded-width: 17rem;
    --sidebar-rail-width: 2.75rem;
    --sidebar-motion-duration: 504ms;
    --sidebar-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sidebar-label-duration: 240ms;
    --sidebar-label-delay: 0ms;
    --topbar-height: 3.25rem;
    --radius: 1rem;
    --native-scrollbar-size: 16px;
    --native-scrollbar-thumb: hsl(var(--muted-foreground) / .38);
    --native-scrollbar-hover: hsl(var(--muted-foreground) / .58);
    --native-scrollbar-edge: hsl(var(--foreground) / .22);
    --native-scrollbar-highlight: linear-gradient(120deg, hsl(var(--foreground) / .20), hsl(var(--foreground) / .035) 55%, hsl(var(--foreground) / .12));
    --native-scrollbar-shadow: inset 0 1px 1px hsl(var(--foreground) / .22), inset 0 -1px 1px hsl(var(--background) / .16);
  }

  @media (min-width: 1024px) {
    :root {
      --topbar-height: 2.5rem;
    }
  }

  .dark {
    --background: 219 48% 9%;
    --foreground: 210 33% 96%;
    --card: 219 42% 12%;
    --card-foreground: 210 33% 96%;
    --popover: 219 42% 12%;
    --popover-foreground: 210 33% 96%;
    --primary: 210 33% 96%;
    --primary-foreground: 219 48% 9%;
    --secondary: 219 28% 19%;
    --secondary-foreground: 210 33% 96%;
    --muted: 219 28% 19%;
    --muted-foreground: 214 22% 72%;
    --accent: 13 78% 70%;
    --accent-foreground: 219 48% 9%;
    --success: 176 58% 48%;
    --success-foreground: 219 48% 9%;
    --warning: 32 92% 66%;
    --warning-foreground: 219 48% 9%;
    --danger: 9 88% 66%;
    --danger-foreground: 0 0% 100%;
    --info: 212 74% 66%;
    --info-foreground: 219 48% 9%;
    --tag-accent: 13 50% 30%;
    --tag-danger: 9 55% 30%;
    --tag-foreground: 210 33% 96%;
    --tag-info: 212 50% 32%;
    --tag-success: 176 45% 27%;
    --tag-warning: 32 50% 29%;
    --warning-emphasis: 32 92% 72%;
    --destructive: var(--danger);
    --destructive-foreground: var(--danger-foreground);
    --border: 219 24% 22%;
    --input: 219 24% 22%;
    --ring: 176 58% 48%;
    --chart-1: 215 62% 48%;
    --chart-2: 207 58% 54%;
    --chart-3: 166 44% 48%;
    --chart-4: 20 76% 60%;
    --chart-5: 176 58% 48%;
  }

  * {
  border-color: hsl(var(--border));
}

  html,
  body {
    background-color: hsl(var(--background));
    max-width: 100%;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    overflow-x: clip;
    width: 100%;
  }

  html {
    scrollbar-gutter: auto;
  }

  body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-width: 0;
}

  @media (min-width: 1024px) {
    html {
      scrollbar-gutter: stable;
    }
  }

  @media (max-width: 639px) {
    input:not([type]),
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select,
    textarea,
    [contenteditable="true"] {
      font-size: 1rem !important;
    }
  }

  html body[data-scroll-locked] {
    margin-right: 0 !important;
  }

  :where(section[id]) {
    scroll-margin-top: 24px;
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.inline-flex {
  display: inline-flex;
}
.hidden {
  display: none;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-9 {
  height: 2.25rem;
}
.w-10 {
  width: 2.5rem;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.border {
  border-width: 1px;
}
.border-input {
  border-color: hsl(var(--input));
}
.bg-background {
  background-color: hsl(var(--background));
}
.bg-destructive {
  background-color: hsl(var(--destructive));
}
.bg-primary {
  background-color: hsl(var(--primary));
}
.bg-secondary {
  background-color: hsl(var(--secondary));
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.font-medium {
  font-weight: 500;
}
.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}
.text-primary {
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.outline {
  outline-style: solid;
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.paused {
  animation-play-state: paused;
}
/* Virtualizers own anchoring. Browser anchoring would apply a second offset
     when card measurements change during a touch scroll. */
[data-task-board-card-scroll],
  [data-task-board-virtual-rows] {
    overflow-anchor: none;
  }
[data-task-board-card-scroll] {
    overscroll-behavior-y: contain;
    scrollbar-color: hsl(var(--muted-foreground) / 0.48) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }
[data-task-board-card-scroll]::-webkit-scrollbar {
    width: 8px;
  }
[data-task-board-card-scroll]::-webkit-scrollbar-track {
    background: transparent;
  }
[data-task-board-card-scroll]::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: hsl(var(--muted-foreground) / 0.42);
    border: 2px solid transparent;
    border-radius: 999px;
  }
[data-task-board-card-scroll]:hover::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground) / 0.66);
  }
section:target {
    animation: section-focus 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
.status-dot {
    animation: status-dot 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 0 hsl(var(--success) / 0.34);
  }
@keyframes page-shell-enter {
    from {
      opacity: 0.88;
      transform: translateY(3px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
@keyframes route-loading-shimmer {
    to {
      background-position: -130% 0;
    }
  }
@keyframes soft-pop {
    from {
      opacity: 0;
      transform: scale(0.96);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }
@keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(14px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
@keyframes module-surface-enter {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
@keyframes module-media-enter {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
@keyframes task-board-background-arrive {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
@keyframes task-board-background-depart {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }
@keyframes slide-glow {
    0% {
      transform: translateX(-120%);
    }

    55%,
    100% {
      transform: translateX(120%);
    }
  }
@keyframes gentle-pulse {
    0%,
    100% {
      opacity: 0.72;
      transform: scale(1);
    }

    50% {
      opacity: 1;
      transform: scale(1.06);
    }
  }
@keyframes bar-grow {
    from {
      opacity: 0.44;
      transform: scaleY(0.06);
    }

    to {
      opacity: 1;
      transform: scaleY(1);
    }
  }
@keyframes section-focus {
    0% {
      box-shadow: inset 0 0 0 0 hsl(var(--success) / 0);
    }

    28% {
      box-shadow: inset 0 5px 0 0 hsl(var(--success) / 0.22);
    }

    100% {
      box-shadow: inset 0 0 0 0 hsl(var(--success) / 0);
    }
  }
@keyframes signal-scan {
    0% {
      transform: translateX(-100%);
    }

    52%,
    100% {
      transform: translateX(100%);
    }
  }
@keyframes ticker-slide {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }
@keyframes status-dot {
    0%,
    100% {
      box-shadow: 0 0 0 0 hsl(var(--success) / 0.34);
    }

    50% {
      box-shadow: 0 0 0 8px hsl(var(--success) / 0);
    }
  }
@keyframes floating-dashboard {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }
@keyframes feed-row {
    0%,
    100% {
      background-color: hsl(var(--card));
    }

    50% {
      background-color: hsl(var(--success) / 0.08);
    }
  }
@keyframes flow-packet {
    0% {
      opacity: 0;
      transform: translateX(0);
    }

    20%,
    70% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translateX(8.5rem);
    }
  }
@keyframes connection-pulse {
    0% {
      transform: translateX(-120%);
    }

    62%,
    100% {
      transform: translateX(360%);
    }
  }
@keyframes cta-current {
    0%,
    100% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(22%);
    }
  }
@media (prefers-reduced-motion: reduce) {
    .motion-ready .reveal-on-scroll {
      filter: none;
      opacity: 1;
      transform: none;
      transition: none;
    }

    .page-shell-enter,
    .module-surface-enter,
    .module-media-enter,
    .route-loading-shimmer,
    .section-focus,
    .animate-soft-pop,
    .animate-fade-up,
    .animate-slide-glow::after,
    .animate-gentle-pulse,
    .bar-grow,
    .hero-signal-bar::before,
    .data-ticker-track,
    .hero-focus-bar::after,
    .status-dot,
    .floating-dashboard,
    .feed-row,
    .lifecycle-step::before,
    .connection-line::after,
    .cta-current {
      animation: none;
    }

    .motion-card,
    .motion-press,
    .sidebar-elastic,
    [data-task-board-sticky-controls] {
      transition: none;
    }

    .task-board-background-image-active,
    .task-board-background-image-outgoing {
      animation: none;
    }

    .task-board-background-image-outgoing {
      opacity: 0;
    }
  }

/* Keep titles at the normal left edge until a desktop pointer or keyboard
   reveals the completion action. Touch/PWA completion lives in card details. */
.task-board-completion-control {
  display: flex;
  flex: 0 0 auto;
  width: 0;
  margin-right: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  align-items: flex-start;
  justify-content: center;
}
@media (hover: hover) and (pointer: fine) and (display-mode: browser) {
  /* Keep both card render states the same width. Revealing the completion
     control must not rewrap titles and change board height behind a dialog. */
  /* Immutable modules load their scoped `.flex` utility after the host CSS.
     Keep this grid and the title's compensating translation as one layout. */
  .task-board-card-heading.flex {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
  }
  .task-board-card-heading > h3 {
    grid-column: 2;
    grid-row: 1;
    transform: translateX(-26px);
    transition: transform var(--motion-control-enter) var(--motion-ease);
  }
  .task-board-card-heading > .task-board-completion-control {
    grid-column: 1;
    grid-row: 1;
    width: 20px;
  }
  [data-task-board-card-id]:hover .task-board-card-heading > h3,
  [data-task-board-card-id]:focus-within .task-board-card-heading > h3 {
    transform: translateX(0);
  }
  [data-task-board-card-id]:hover .task-board-completion-control,
  [data-task-board-card-id]:focus-within .task-board-completion-control {
    width: 20px;
    margin-right: 6px;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Keep the document's native gutter and scroll-lock geometry unchanged.
   The translucent neutral thumb inherits into native scrolling surfaces. */
:root { scrollbar-color: var(--native-scrollbar-thumb) transparent; }
@media (forced-colors: active) { :root { scrollbar-color: auto; } }

/* The document thumb shares the wider native hit area used by module lists. */
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-color: auto; }
  html::-webkit-scrollbar { width: var(--native-scrollbar-size); height: var(--native-scrollbar-size); }
  html::-webkit-scrollbar-track { background: transparent; }
  html::-webkit-scrollbar-thumb {
    background: var(--native-scrollbar-highlight), var(--native-scrollbar-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
    box-shadow: var(--native-scrollbar-shadow);
  }
  html::-webkit-scrollbar-thumb:hover {
    background: var(--native-scrollbar-highlight), var(--native-scrollbar-hover);
    background-clip: padding-box;
  }
  html::-webkit-scrollbar-corner { background: transparent; }
}

@media (forced-colors: active) {
  html::-webkit-scrollbar-thumb { background: ButtonText; box-shadow: none; }
}

.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}

.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}

.hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.brand-logo,.brand-lockup{display:inline-flex;align-items:center;gap:12px;color:#eff5ff}.brand-lockup{gap:calc(var(--brand-mark-size,36px)*.16)}.brand-wordmark{display:block;width:calc(var(--brand-mark-size,36px)*3.2);height:auto;overflow:visible}.brand-motion-toggle{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #ffffff24;border-radius:50%;background:#ffffff05;color:#b9cadd;cursor:pointer}.brand-motion-toggle svg{width:15px;height:15px}.brand-motion-toggle:hover{background:#ffffff12;color:#eff5ff}.brand-motion-toggle:focus-visible{outline:2px solid #7fddeb;outline-offset:4px}.brand-orbit{position:relative;display:block;width:var(--brand-size);height:var(--brand-size);flex:none;isolation:isolate}.brand-color-mask{position:absolute;inset:0;display:block;overflow:hidden;background:#91bcf9;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill-rule='evenodd' d='M128 16a112 112 0 1 1 0 224a112 112 0 1 1 0-224ZM128 61a70 70 0 1 0 0 140a70 70 0 1 0 0-140Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill-rule='evenodd' d='M128 16a112 112 0 1 1 0 224a112 112 0 1 1 0-224ZM128 61a70 70 0 1 0 0 140a70 70 0 1 0 0-140Z'/%3E%3C/svg%3E") center/contain no-repeat}.brand-ring{z-index:2}.brand-ink{position:absolute;inset:-35%;background:conic-gradient(from 45deg,#80e6f0,#93b9fa 22%,#a29bff 43%,#afa9ff 57%,#58dcef 77%,#80e6f0);animation:brand-orbit var(--brand-orbit-cycle) linear infinite}.brand-wash{position:absolute;inset:-65%;background:radial-gradient(ellipse at 27% 36%,#c3f8ff 0 11%,#93ecf599 21%,transparent 42%),radial-gradient(ellipse at 65% 70%,#9c8bff 0 17%,#a79cff99 26%,transparent 46%);animation:brand-wash calc(var(--brand-liquid-cycle)*.7) ease-in-out infinite alternate}.brand-highlight{position:absolute;inset:0;background:linear-gradient(145deg,#d8feff36,transparent 39%,#ffffff10 78%,transparent)}.brand-wave{position:absolute;left:-45%;top:25%;width:195%;height:195%;border-radius:calc(50% - 12% * var(--brand-intensity)) calc(50% + 12% * var(--brand-intensity)) calc(50% - 6% * var(--brand-intensity)) calc(50% + 6% * var(--brand-intensity)) / calc(50% + 4% * var(--brand-intensity)) calc(50% - 12% * var(--brand-intensity)) calc(50% + 12% * var(--brand-intensity)) calc(50% - 4% * var(--brand-intensity));animation:brand-wave calc(var(--brand-liquid-cycle)/2) linear infinite}.brand-wave-one{background:linear-gradient(160deg,#aef6ffbd,#69dcebb0 45%,#858ced85);mix-blend-mode:screen}.brand-wave-two{top:39%;left:-52%;border-radius:calc(50% + 11% * var(--brand-intensity)) calc(50% - 11% * var(--brand-intensity)) calc(50% + 5% * var(--brand-intensity)) calc(50% - 5% * var(--brand-intensity)) / calc(50% - 7% * var(--brand-intensity)) calc(50% + 9% * var(--brand-intensity)) calc(50% - 9% * var(--brand-intensity)) calc(50% + 7% * var(--brand-intensity));background:linear-gradient(135deg,#b4a7ff88,#8a94ee99 60%,#68ddea77);animation-duration:calc(var(--brand-liquid-cycle)*.75);animation-direction:reverse}.brand-flow,.brand-circulation{position:absolute;inset:0}.brand-circulation{animation:brand-orbit var(--brand-circulation-cycle) linear infinite}.brand-flow{animation:brand-surge calc(var(--brand-liquid-cycle)*.32) ease-in-out infinite alternate}.brand-flow-one{animation-delay:-.4s}.brand-flow-two{animation-duration:calc(var(--brand-liquid-cycle)*.41);animation-direction:alternate-reverse;animation-delay:-1.2s}.brand-rim{position:absolute;inset:0;z-index:1;opacity:var(--brand-glow);animation:brand-pulse var(--brand-pulse) ease-in-out infinite;pointer-events:none}.brand-rim-light{filter:blur(var(--brand-sharp)) saturate(2.5) brightness(var(--brand-sharp-brightness,1.15));transform:scale(1.015)}.brand-rim-bloom{filter:blur(var(--brand-blur)) saturate(2.5) brightness(var(--brand-bloom-brightness,calc(1 + var(--brand-glow)*.12)));transform:scale(var(--brand-rim-scale,calc(1.035 + var(--brand-glow)*.025)))}.brand-orbit[data-brand-running=false] *{animation-play-state:paused!important}.brand-orbit[data-brand-animated=false] .brand-wave,.brand-orbit[data-brand-animated=false] .brand-flow{animation:none}.brand-orbit[data-brand-animated=false] .brand-ink{transform:rotate(18deg)}@keyframes brand-orbit{to{transform:rotate(360deg)}}@keyframes brand-wave{to{transform:rotate(360deg)}}@keyframes brand-wash{0%{transform:translate(calc(-6% * var(--brand-intensity)),calc(-8% * var(--brand-intensity))) rotate(calc(-6deg * var(--brand-intensity)))}to{transform:translate(calc(6% * var(--brand-intensity)),calc(7% * var(--brand-intensity))) rotate(calc(16deg * var(--brand-intensity))) scale(calc(1 + .12*var(--brand-intensity)))}}@keyframes brand-surge{0%{transform:translateY(calc(-13% * var(--brand-intensity)))}to{transform:translateY(calc(10% * var(--brand-intensity)))}}@keyframes brand-pulse{0%,to{opacity:calc(var(--brand-glow)*.75)}50%{opacity:var(--brand-glow)}}@media(prefers-reduced-motion:reduce){.brand-orbit *{animation-play-state:paused!important}.brand-motion-toggle{display:none}}html[data-oddy-motion=off] .brand-orbit *,html[data-oddy-motion=off] .brand-orbit:before,html[data-oddy-motion=off] .brand-orbit:after{animation:none!important;transition:none!important}

/* Workspace-only materials. Auth/marketing/admin retain their existing theme.
   Canvas/container layers stay clear; distinct cards and panes own their frost. */
  html[data-oddy-style="glass"] {
    --background: 219 32% 12%;
    --foreground: 0 0% 100%;
    --card: 219 30% 16%;
    --card-foreground: 0 0% 100%;
    --popover: 219 30% 16%;
    --popover-foreground: 0 0% 100%;
    --primary: 0 0% 100%;
    --primary-foreground: 219 40% 12%;
    --secondary: 217 25% 24%;
    --secondary-foreground: 0 0% 100%;
    --muted: 217 25% 24%;
    --muted-foreground: 214 28% 84%;
    --accent: 217 26% 29%;
    --accent-foreground: 0 0% 100%;
    --tag-foreground: 0 0% 100%;
    --tag-accent: 13 50% 30%;
    --tag-danger: 9 55% 30%;
    --tag-info: 212 50% 32%;
    --tag-success: 176 45% 27%;
    --tag-warning: 32 50% 29%;
    --warning-emphasis: 32 92% 76%;
    --border: 214 22% 34%;
    --input: 214 22% 38%;
    --ring: 172 69% 69%;
    --glass-blur: 24px;
    --glass-chrome: rgb(23 35 53 / .62);
    --glass-panel: rgb(23 35 53 / .44);
    --glass-card: rgb(29 41 57 / .36);
    --glass-field: rgb(17 29 45 / .48);
    --glass-flat: rgb(17 29 45 / .18);
    --glass-canvas: rgb(20 31 48 / .11);
    --glass-reading: rgb(23 35 53 / .62);
    --glass-highlight: linear-gradient(125deg, rgb(255 255 255 / .13), rgb(255 255 255 / .025) 48%, rgb(255 255 255 / .07));
    /* Approved OddyOS glass typography: one soft shadow, no glyph outline. */
    --glass-text-shadow: 0 1px 3px rgb(5 15 29 / .75);
    --glass-control-text-shadow: 0 1px 3px rgb(5 15 29 / .65);
    --glass-native-filter: blur(var(--glass-blur)) saturate(135%);
    --glass-filter: var(--glass-svg-filter, var(--glass-native-filter));
    --glass-floating: rgb(23 35 53 / .81);
    --glass-window: rgb(19 32 51 / .64);
    --glass-edge: rgb(255 255 255 / .16);
    --glass-shadow: 0 10px 30px rgb(3 9 20 / .20);
    --glass-scrim: rgb(8 17 31 / .04);
  }
  html.dark[data-oddy-style="glass"] {
    --glass-blur: 18px;
    --glass-chrome: rgb(33 43 59 / .27);
    --glass-panel: rgb(35 46 62 / .28);
    --glass-card: rgb(26 37 52 / .22);
    --glass-field: rgb(19 28 42 / .28);
    --glass-flat: rgb(15 27 43 / .16);
    --glass-canvas: rgb(20 30 45 / .015);
    --glass-reading: rgb(23 35 53 / .50);
    --glass-floating: rgb(23 35 53 / .78);
    --glass-window: rgb(16 27 44 / .64);
    --glass-scrim: rgb(5 12 24 / .12);
  }
  html[data-oddy-style="glass"] body {
    background-image: linear-gradient(var(--glass-scrim), var(--glass-scrim)), var(--workspace-wallpaper);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }
  html[data-oddy-style="glass"] [data-workspace-shell] { background: transparent; }
  html[data-oddy-style="glass"] :where([data-workspace-shell], [data-oddy-surface], [data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"]) { text-shadow: var(--glass-text-shadow); }
  html[data-oddy-style="glass"] :where(button, input, textarea, select) { text-shadow: var(--glass-control-text-shadow); }
  /* Semantic colors continue to work in custom module components. Inline board
     colors, covers, bubble palettes and category tints always take precedence. */
  html[data-oddy-style="glass"] :where(.bg-card, .bg-card\/95, .bg-card\/90, .bg-card\/80) {
    background-color: var(--glass-card);
  }
  html[data-oddy-style="glass"] :where(.bg-background, .bg-background\/95, .bg-background\/90) {
    background-color: var(--glass-field);
  }
  html[data-oddy-style="glass"] :where([data-oddy-surface="field"]) {
    background-color: var(--glass-field);
    border-color: var(--glass-edge);
    color: white;
  }
  html[data-oddy-style="glass"] :where([data-oddy-surface="card"]) {
    background-color: var(--glass-card);
    background-image: var(--glass-highlight);
    border-color: var(--glass-edge);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
  }
  html[data-oddy-style="glass"] [data-oddy-frost="inherited"] { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-oddy-style="glass"] :where([data-oddy-surface="panel"], [data-oddy-surface="chrome"], [data-oddy-surface="floating"]) {
    border-color: var(--glass-edge);
    background-color: var(--glass-panel);
    background-image: var(--glass-highlight);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
  }
  html[data-oddy-style="glass"] :where([data-oddy-surface="chrome"], [data-workspace-topbar-controls]) {
    background-color: var(--glass-chrome);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
  }
  html[data-oddy-style="glass"] :where([data-oddy-surface="floating"]) { background-color: var(--glass-floating); }
  /* Windows must reveal the wallpaper, not become an opaque card on a white
     scrim. Menus retain their denser material for small-text readability. */
  html[data-oddy-style="glass"] :is([data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"]):not([data-oddy-motion-exception]) {
    background-color: var(--glass-window);
    background-image: linear-gradient(140deg, rgb(255 255 255 / .09), rgb(255 255 255 / .015));
    box-shadow: 0 24px 80px rgb(0 5 18 / .32), inset 0 1px 0 rgb(255 255 255 / .16);
  }
  html[data-oddy-style="glass"] [data-oddy-motion-role="backdrop"] {
    background-color: rgb(3 9 23 / .20);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  /* Tasks own drag transforms, layout, glass layers and media. Never animate
     those elements or introduce containing blocks around their fixed portals. */
  html[data-oddy-style="classic"] .task-board-glass-layer {
    -webkit-backdrop-filter: none; backdrop-filter: none; background-color: hsl(var(--card));
  }
  html[data-oddy-style="glass"] [data-workspace-module-surface] > :where(section, div) {
    --module-surface-tint: var(--glass-panel);
  }
  html[data-oddy-style="glass"] :where([data-workspace-module-surface] h1, [data-oddy-surface="heading"]) {
    text-shadow: var(--glass-text-shadow);
  }
  /* No blur support, solid choice, or system accessibility preference: keep
     every layer readable, retaining the wallpaper and category colors. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-oddy-style="glass"], html.dark[data-oddy-style="glass"] { --glass-chrome: #172335; --glass-panel: #172335; --glass-card: #1d2939; --glass-field: #111d2d; --glass-floating: #172335; --glass-flat: #1d2939; --oddy-button-opaque-fill: #26354b; --oddy-button-opaque-hover: #33435b; --oddy-button-opaque-ink: #eff5ff; --glass-canvas: #172335; --glass-reading: #172335; --glass-blur: 0px; --glass-filter: none; --glass-highlight: none; --glass-text-shadow: none; --glass-control-text-shadow: none; }
  }
  html[data-oddy-style="glass"][data-oddy-transparency="solid"] {
    --glass-chrome: #172335; --glass-panel: #172335; --glass-card: #1d2939; --glass-field: #111d2d; --glass-floating: #172335; --glass-flat: #1d2939; --oddy-button-opaque-fill: #26354b; --oddy-button-opaque-hover: #33435b; --oddy-button-opaque-ink: #eff5ff; --glass-canvas: #172335; --glass-reading: #172335; --glass-blur: 0px; --glass-filter: none; --glass-highlight: none; --glass-text-shadow: none; --glass-control-text-shadow: none;
  }
  html[data-oddy-style="glass"][data-oddy-transparency="solid"] { --glass-window: #172335; }
  html[data-oddy-style="glass"][data-oddy-transparency="solid"] :is([data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"]) { background-image: none !important; }
  html[data-oddy-style="glass"][data-oddy-transparency="solid"] :is([data-oddy-surface], [data-workspace-topbar-controls], .task-board-glass-layer) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-oddy-style="glass"][data-oddy-transparency="solid"] .task-board-glass-layer { background-color: #172335; }
  @media (prefers-reduced-transparency: reduce) {
    html[data-oddy-style="glass"][data-oddy-transparency="system"] { --glass-chrome: #172335; --glass-panel: #172335; --glass-card: #1d2939; --glass-field: #111d2d; --glass-floating: #172335; --glass-flat: #1d2939; --oddy-button-opaque-fill: #26354b; --oddy-button-opaque-hover: #33435b; --oddy-button-opaque-ink: #eff5ff; --glass-canvas: #172335; --glass-reading: #172335; --glass-blur: 0px; --glass-filter: none; --glass-highlight: none; --glass-text-shadow: none; --glass-control-text-shadow: none; }
    html[data-oddy-style="glass"][data-oddy-transparency="system"] .task-board-glass-layer { background-color: #172335; }
    html[data-oddy-style="glass"][data-oddy-transparency="system"] :is([data-oddy-surface], [data-workspace-topbar-controls], .task-board-glass-layer) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  @media (prefers-contrast: more) {
    html[data-oddy-style="glass"] .task-board-glass-layer { background-color: #172335; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html[data-oddy-style="glass"], html.dark[data-oddy-style="glass"] { --glass-chrome: #172335; --glass-panel: #172335; --glass-card: #1d2939; --glass-field: #111d2d; --glass-floating: #172335; --glass-flat: #1d2939; --oddy-button-opaque-fill: #26354b; --oddy-button-opaque-hover: #33435b; --oddy-button-opaque-ink: #eff5ff; --glass-canvas: #172335; --glass-reading: #172335; --glass-blur: 0px; --glass-filter: none; --glass-highlight: none; --glass-text-shadow: none; --glass-control-text-shadow: none; --glass-edge: #b6c6dd; --muted-foreground: 0 0% 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-oddy-workspace] { --motion-fast: 0ms; --motion-standard: 0ms; --motion-exit: 0ms; }
    html[data-oddy-workspace] [data-oddy-motion-role] { animation: none; transition: none; }
  }
  @media (forced-colors: active) {
    html[data-oddy-style="glass"] [data-oddy-surface] { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; backdrop-filter: none; }
    html[data-oddy-style="glass"] body { background-image: none !important; }
  }

/* Custom Directory tags keep their identity, with a readable glass treatment. */
html[data-oddy-style="glass"] .oddy-category-pill {
  color: white;
  background-color: color-mix(in srgb, var(--pill-tone) 24%, #172335);
  border-color: color-mix(in srgb, var(--pill-tone) 40%, transparent);
}
.oddy-pill-sky { --pill-tone: #0ea5e9; }
.oddy-pill-violet { --pill-tone: #8b5cf6; }
.oddy-pill-emerald { --pill-tone: #10b981; }
.oddy-pill-amber { --pill-tone: #f59e0b; }
.oddy-pill-rose { --pill-tone: #f43f5e; }
.oddy-pill-cyan { --pill-tone: #06b6d4; }
.oddy-pill-indigo { --pill-tone: #6366f1; }
.oddy-pill-orange { --pill-tone: #f97316; }
html[data-oddy-style="glass"] .bg-primary.text-primary-foreground:not([data-oddy-control]) { background-color: #0c675f; color: white; }

/* Detached glass chrome: wallpaper gutters separate navigation and header.
   Keep the persistent shell, module DOM and Tasks' overlay header ownership. */
html[data-oddy-style="glass"] [data-workspace-topbar] > header {
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-oddy-style="glass"] [data-workspace-topbar-controls] {
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
}
html[data-oddy-style="glass"] [data-workspace-topbar] > header:not([data-workspace-topbar-collapsible]) {
  top: 6px;
  width: calc(100% - 12px);
  margin: 6px 6px 0;
}
@media (min-width: 1024px) {
  html[data-oddy-style="glass"] #oddyos-desktop-sidebar {
    top: 6px;
    bottom: 6px;
    left: 6px;
    border: 1px solid var(--glass-edge);
    border-radius: 16px;
  }
  html[data-oddy-style="glass"] #oddyos-desktop-sidebar > div { background: transparent; }
  html[data-oddy-style="glass"] [data-workspace-shell]:not([data-workspace-topbar-auto-collapse]) [data-workspace-main] {
    padding-top: 8px;
    padding-left: 0;
    padding-right: 6px;
  }
  html[data-oddy-style="glass"] [data-workspace-shell-body] {
    --workspace-sidebar-space: var(--sidebar-rail-width);
    padding-left: calc(var(--workspace-sidebar-space) + 14px);
  }
  html[data-oddy-style="glass"] [data-workspace-shell-body][data-workspace-sidebar-space="expanded"] {
    --workspace-sidebar-space: var(--sidebar-expanded-width);
  }
  html[data-oddy-style="glass"] [data-workspace-topbar] > header:not([data-workspace-topbar-collapsible]) {
    width: calc(100% - 6px);
    margin-left: 0;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  /* The visible header still overlays Tasks: opening it never pushes cards. */
  html[data-oddy-style="glass"] [data-workspace-topbar-collapsible] > [data-workspace-topbar-controls] {
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    left: 6px;
    right: 6px;
  }
  html[data-oddy-style="glass"] [data-workspace-topbar-collapsible][data-header-open] > [data-workspace-topbar-restore] {
    top: calc(env(safe-area-inset-top, 0px) + 6px + var(--workspace-topbar-expanded-height));
    background: transparent;
    border: 0;
  }
}
@media (max-width: 767px), (hover: none), (pointer: coarse) {
  html[data-oddy-style="glass"] [data-workspace-topbar] > header {
    top: 6px;
    width: calc(100% - 12px);
    margin: 6px 6px 0;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-oddy-style="glass"], html.dark[data-oddy-style="glass"] { --glass-window: #172335; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-oddy-style="glass"][data-oddy-transparency="system"] { --glass-window: #172335; }
  html[data-oddy-style="glass"][data-oddy-transparency="system"] :is([data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"]) { background-image: none !important; }
}
@media (max-width: 767px), (pointer: coarse) {
  html[data-oddy-workspace] :is([data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"]):not([data-oddy-motion-exception]):not(.task-board-card-dialog) {
    top: calc(var(--dialog-viewport-top, 0px) + var(--dialog-viewport-height, 100dvh) / 2);
    max-height: calc(var(--dialog-viewport-height, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem);
    width: calc(100% - max(1rem, env(safe-area-inset-left, 0px)) - max(1rem, env(safe-area-inset-right, 0px)));
    scroll-padding-block: 1rem;
  }
  html[data-oddy-workspace] :is([data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"], [data-oddy-motion-role="panel"]):not([data-oddy-motion-exception]) :is(input, textarea, select) { font-size: 16px; }
  html[data-oddy-workspace] :is([data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"], [data-oddy-motion-role="panel"]):not([data-oddy-motion-exception]) [data-oddy-control] { min-height: 44px; }
  html[data-oddy-workspace] [data-oddy-motion-role="panel"] { overflow-y: auto; overscroll-behavior: contain; padding-top: max(1.5rem, env(safe-area-inset-top, 0px)); padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 767px), (pointer: coarse) {
  html[data-oddy-workspace] [data-oddy-sheet-close] { width: 44px; height: 44px; display: grid; place-items: center; top: max(.5rem, env(safe-area-inset-top, 0px)); right: max(.5rem, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 767px), (pointer: coarse) {
  html[data-oddy-workspace] [data-oddy-motion-role="panel"]:is([data-motion-side="left"], [data-motion-side="right"]) {
    top: var(--dialog-viewport-top, 0px);
    height: var(--dialog-viewport-height, 100dvh);
    max-height: var(--dialog-viewport-height, 100dvh);
    bottom: auto;
  }
}
@media (max-width: 767px), (pointer: coarse) {
  html[data-oddy-workspace] [data-workspace-topbar-controls] button { min-width: 44px; min-height: 44px; }
  html[data-oddy-workspace] [data-oddy-motion-role="panel"] [aria-label="Workspace navigation"] :is(a, button) { min-height: 44px; }
}

/* Tasks keeps its own gesture transforms, virtualization and saved backgrounds.
   This layer changes paint only; no wrapper, geometry or DnD timing is added. */
html[data-oddy-style="glass"] [data-task-board-glass="true"] {
  --tasks-list-material: rgb(13 25 44 / .58);
  --tasks-card-material: rgb(20 34 54 / .64);
}
html[data-oddy-style="glass"] [data-task-board-glass="true"] .task-board-row-surface {
  background-color: rgb(16 28 48 / .12);
  border-radius: 16px;
  border-color: rgb(228 239 255 / .24);
  box-shadow: 0 12px 36px rgb(0 7 22 / .13);
}
html[data-oddy-style="glass"] [data-task-board-glass="true"] :is([data-task-board-list], [data-task-board-list-rail-spacer]) {
  background-color: var(--tasks-list-material);
  border-radius: 16px;
  border-color: rgb(228 239 255 / .24);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
html[data-oddy-style="glass"] [data-task-board-glass="true"] :is([data-task-board-rich-card], [data-task-board-card-frame-content], [data-task-board-sparse-rich-card]):not([style*="background-color"]) {
  background-color: var(--tasks-card-material);
  border-radius: 12px;
  border-color: rgb(225 239 255 / .26);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 4px 14px rgb(0 7 22 / .12);
}
/* Solid custom card colors already provide contrast; do not shadow dark titles. */
html[data-oddy-style="glass"] :is([data-task-board-rich-card], [data-task-board-card-frame-content], [data-task-board-sparse-rich-card])[style*="background-color"] {
  --glass-text-shadow: none;
  --glass-control-text-shadow: none;
  text-shadow: none;
}
/* The drag engine owns every frame. A second CSS transform transition makes
   the card face chase the pointer/wobble and can split composited text paint. */
.task-board-drag-overlay { isolation: isolate; }
.task-board-drag-overlay > * {
  transition-property: none !important;
  backface-visibility: hidden;
  transform-style: flat;
}

html[data-oddy-style="glass"] .task-board-card-dialog {
  background-color: var(--glass-window);
  background-image: linear-gradient(140deg, rgb(255 255 255 / .08), rgb(255 255 255 / .015));
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
html[data-oddy-style="glass"] .task-board-card-dialog :is(.task-board-card-dialog-shell, .task-board-card-detail-content, .task-detail-primary) { background-color: transparent; }
html[data-oddy-style="glass"] .task-board-card-dialog [role="tabpanel"] { background-color: rgb(15 28 47 / .12); }
html[data-oddy-style="glass"] .task-board-card-detail-header { background-color: rgb(14 26 45 / .25); border-color: var(--glass-edge); }
html[data-oddy-style="glass"][data-oddy-transparency="solid"] [data-task-board-glass="true"] { --tasks-list-material: #111d2d; --tasks-card-material: #182435; }
html[data-oddy-style="glass"][data-oddy-transparency="solid"] .task-board-card-dialog { -webkit-backdrop-filter: none; backdrop-filter: none; background-image: none; }
@media (prefers-reduced-transparency: reduce) {
  html[data-oddy-style="glass"][data-oddy-transparency="system"] [data-task-board-glass="true"] { --tasks-list-material: #111d2d; --tasks-card-material: #182435; }
  html[data-oddy-style="glass"][data-oddy-transparency="system"] .task-board-card-dialog { -webkit-backdrop-filter: none; backdrop-filter: none; background-image: none; }
}

html[data-oddy-style="glass"] [data-task-board-glass="true"] .task-board-row-surface .task-board-background-image::after { content: ""; position: absolute; inset: 0; background-color: rgb(3 10 22 / .20); }
html[data-oddy-style="glass"] [data-task-board-glass="true"] [data-task-board-list] .text-white\/70 { color: rgb(232 239 250); }

/* Free-position diagram cards are independent glass panes over a canvas.
   Opt-in: ordinary nested cards keep the flat treatment above. */
html[data-oddy-style="glass"] [data-oddy-surface="canvas"] {
  --glass-diagram-card: var(--glass-card);
  --glass-diagram-scrim: rgb(15 24 40 / .08);
  background-image: none;
  background-size: cover;
  background-position: center;
  background-color: var(--glass-canvas);
}
html.dark[data-oddy-style="glass"] [data-oddy-surface="canvas"] {
  --glass-diagram-card: var(--glass-card);
  --glass-diagram-scrim: rgb(5 12 24 / .12);
}
html[data-oddy-style="glass"] [data-oddy-surface="canvas"] [data-oddy-material="diagram"] {
  background: linear-gradient(130deg, rgba(var(--workflow-card-accent, 90, 171, 255), .22), rgba(var(--workflow-card-accent, 90, 171, 255), .07) 65%), var(--glass-diagram-card);
  border-color: transparent;
  box-shadow: 0 10px 28px rgb(0 7 20 / .20);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  color: white;
}
html[data-oddy-style="glass"] [data-oddy-surface="canvas"] .workflow-node-title,
html[data-oddy-style="glass"] [data-oddy-surface="canvas"] .workflow-node-summary { text-shadow: var(--glass-text-shadow); }
html[data-oddy-style="glass"] [data-oddy-surface="canvas"] .workflow-output { background: rgb(10 23 40 / .42); color: white; }
html[data-oddy-style="glass"] [data-oddy-surface="canvas"] .workflow-input-dot,
html[data-oddy-style="glass"] [data-oddy-surface="canvas"] .workflow-output i,
html[data-oddy-style="glass"] [data-oddy-surface="canvas"] .workflow-add { background-color: rgb(24 43 63 / .90); color: white; }
html[data-oddy-style="glass"][data-oddy-transparency="solid"] [data-oddy-material="diagram"] { background: #1d2939; backdrop-filter: none; -webkit-backdrop-filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-oddy-style="glass"] [data-oddy-surface="canvas"] [data-oddy-material="diagram"] { background: #1d2939; }
}
@media (prefers-contrast: more) {
  html[data-oddy-style="glass"] [data-oddy-surface="canvas"] [data-oddy-material="diagram"] { background: #1d2939; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  html[data-oddy-style="glass"] [data-oddy-surface="canvas"] { background-image: none; }
  html[data-oddy-style="glass"] [data-oddy-surface="canvas"] [data-oddy-material="diagram"] { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; backdrop-filter: none; }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-oddy-style="glass"][data-oddy-transparency="system"] [data-oddy-surface="canvas"] [data-oddy-material="diagram"] { background: #1d2939; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Keep secondary text crisp: use the muted color rather than fading the
   entire label and its soft reference shadow. */
html[data-oddy-style="glass"] :is(
  .workflow-function-group summary span, .workflow-library-foot,
  .workflow-unavailable, .workflow-canvas-hint, .workflow-node-title small,
  .workflow-node-summary
) {
  opacity: 1;
  color: hsl(var(--muted-foreground));
}

/* Solid identity/message colors already supply contrast; no glass halo. */
html[data-oddy-style="glass"] :is([data-oddy-text-surface="solid"], .team-initials-avatar, .team-message-bubble[data-author-color], .team-company-logo) {
  --glass-text-shadow: none;
  --glass-control-text-shadow: none;
  text-shadow: none;
}

/* Dense Work tables need a reading surface behind every row, including Light. */
html[data-oddy-style="glass"] .work-queue-panel { background-color: var(--glass-reading); }
html[data-oddy-style="glass"] .work-queue-panel thead { background: var(--glass-floating); color: white; }
/* Frozen action columns remain opaque so horizontally scrolling text cannot overlap. */
html[data-oddy-style="glass"] .work-queue-panel :is(th.sticky, td.sticky) { background: #172335; }

/* Shared module headings, metrics and dense Monitor rows own actual frost.
   Existing immutable modules already emit these semantic elements. */
html[data-oddy-style="glass"] :is([data-oddy-surface="heading"], dl.bg-border, [data-monitor-search-toolbar], [aria-label="Monitor equipment table"], .work-heading-panel) {
  background-color: var(--glass-reading);
  background-image: linear-gradient(120deg, rgb(255 255 255 / .035), transparent 65%);
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
html[data-oddy-style="glass"] [data-oddy-surface="heading"] { padding: 18px 20px; }
html[data-oddy-style="glass"] [data-monitor-search-toolbar] { padding: 10px; }
html[data-oddy-style="glass"] dl.bg-border > div { background: transparent; border-inline-start: 1px solid var(--glass-edge); }
html[data-oddy-style="glass"] dl.bg-border > div:first-child { border-inline-start: 0; }
html[data-oddy-style="glass"] .work-heading-panel > [data-oddy-surface="heading"] {
  background: transparent; border: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.work-heading-panel { display: grid; gap: 18px; }

html[data-oddy-style="glass"] :is(.directory-heading-panel, .directory-record-panel) { background-color: var(--glass-reading); }
html[data-oddy-style="glass"] .directory-record-panel thead { background-color: var(--glass-floating); }
html[data-oddy-style="glass"] .directory-record-panel th[scope="row"] { background-color: var(--glass-reading); }

html[data-oddy-style="glass"] .directory-record-panel th.sticky { background-color: #172335; }

/* Retained overscan boards keep their exact geometry and material colors.
   Frost is needed only for the boards intersecting the visible window. */
html[data-oddy-style="glass"] [data-task-board-viewport-visible="false"] :is([data-task-board-list], [data-task-board-list-rail-spacer]) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Solid semantic ink must never inherit the light-on-glass shadow. */
html[data-oddy-style="glass"] :is(.text-black, .text-slate-950, .text-slate-900, .text-gray-950, .text-gray-900, .text-tag-foreground) {
  --glass-text-shadow: none;
  --glass-control-text-shadow: none;
  text-shadow: none;
}

/* A small, clear lens: the glyph is magnified without enlarging its hit target. */
html[data-oddy-style="glass"] nav[aria-label="Workspace navigation"] :is(a,button):is([aria-current="page"],.oddy-nav-current) :is(svg,span) { color:inherit!important; }
html[data-oddy-style="glass"] nav[aria-label="Workspace navigation"] :is(a,button):is([aria-current="page"],.oddy-nav-current) {
 position:relative;isolation:isolate;background:transparent!important;
 color:hsl(var(--foreground))!important;box-shadow:none!important;border-color:transparent!important;
}
html[data-oddy-style="glass"] nav[aria-label="Workspace navigation"] :is(a,button):is([aria-current="page"],.oddy-nav-current)>span.absolute { display:none; }
html[data-oddy-style="glass"] nav[aria-label="Workspace navigation"] :is(a,button):is([aria-current="page"],.oddy-nav-current)>svg { transform:scale(1.18);filter:none;color:inherit!important; }
html[data-oddy-style="glass"] nav[aria-label="Workspace navigation"] :is(a,button):is([aria-current="page"],.oddy-nav-current)::after {
 content:"";position:absolute;inset:6px 4px;border:0;border-radius:999px;z-index:-1;pointer-events:none;
 background:linear-gradient(132deg,rgba(255,255,255,.06),transparent 36%,transparent 66%,rgba(255,255,255,.035));
 box-shadow:inset 1px 1px 1px rgba(255,255,255,.32),inset -1px -1px 1px rgba(8,15,28,.26),0 2px 4px rgba(3,8,20,.08);
 backdrop-filter:brightness(1.06) saturate(1.08);-webkit-backdrop-filter:brightness(1.06) saturate(1.08);
}
html[data-oddy-transparency="solid"][data-oddy-style="glass"] nav[aria-label="Workspace navigation"] :is(a,button):is([aria-current="page"],.oddy-nav-current)::after { background:hsl(var(--muted));backdrop-filter:none;-webkit-backdrop-filter:none; }

/* Frosted Light is the workspace glass material for light mode. */
html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) {
  --frosted-light-translucency: 1;
  --background: 216 19% 96%;
  --foreground: 220 12% 16%;
  --card: 210 20% 99%;
  --card-foreground: var(--foreground);
  --popover: 210 20% 99%;
  --popover-foreground: var(--foreground);
  --secondary-foreground: var(--foreground);
  --muted: 216 16% 88%;
  --muted-foreground: 219 9% 36%;
  --border: 217 13% 76%;
  --input: 217 13% 69%;
  --glass-chrome: rgb(249 250 252 / calc(1 - .30 * var(--frosted-light-translucency)));
  --glass-panel: rgb(249 250 252 / calc(1 - .37 * var(--frosted-light-translucency)));
  --glass-card: rgb(251 252 253 / calc(1 - .41 * var(--frosted-light-translucency)));
  --glass-field: rgb(240 242 246 / calc(1 - .26 * var(--frosted-light-translucency)));
  --glass-flat: rgb(229 233 238 / calc(1 - .48 * var(--frosted-light-translucency)));
  --glass-canvas: rgb(243 245 248 / calc(1 - .68 * var(--frosted-light-translucency)));
  --glass-reading: rgb(248 249 251 / calc(1 - .29 * var(--frosted-light-translucency)));
  --glass-floating: rgb(252 252 253 / calc(1 - .15 * var(--frosted-light-translucency)));
  --glass-window: rgb(249 250 252 / calc(1 - .20 * var(--frosted-light-translucency)));
  --glass-highlight: linear-gradient(125deg, rgb(255 255 255 / .50), transparent 75%);
  --glass-edge: rgb(45 53 65 / .15);
  --glass-shadow: 0 9px 25px rgb(33 40 53 / .10), inset 0 1px 0 rgb(255 255 255 / .68);
  --glass-scrim: rgb(237 239 242 / .71);
  --glass-text-shadow: none;
  --glass-control-text-shadow: none;
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) #oddyos-desktop-sidebar {
  --glass-chrome: rgb(249 250 252 / calc(1 - .65 * var(--frosted-light-translucency)));
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) [data-workspace-navigation-sheet] {
  --glass-floating: rgb(252 252 253 / calc(1 - .41 * var(--frosted-light-translucency)));
}

/* Let the drawer's frosted surface show through its navigation container. */
html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  [data-workspace-navigation-sheet] > .bg-card {
  background-color: transparent;
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  :where(#oddyos-desktop-sidebar, [data-workspace-navigation-sheet]) .hover\:text-primary:hover {
  color: hsl(var(--foreground));
}

/* Light reading surfaces that explicitly used white ink in the original glass. */
html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) :is(
  [data-oddy-surface="field"], .work-queue-panel thead,
  [data-oddy-material="diagram"], nav[aria-label="Workspace navigation"] .text-white,
  .text-primary:not([data-oddy-control], [data-oddy-text-surface])
) {
  color: hsl(var(--foreground));
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  :is(input, textarea)::placeholder {
  color: hsl(var(--muted-foreground));
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  .cc-mail-nav :is(button, .cc-nav-link)[aria-current="page"] {
  background-color: color-mix(in srgb, var(--oddy-button-selection) 14%, transparent);
  color: hsl(var(--foreground));
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) .work-board-lane {
  background-color: var(--glass-canvas);
}

/* Match stage roles on the retained Work and Sales boards. The cyan intake
   stays distinct from the blue used for selection controls. */
.work-board-headings h2:nth-child(1), .sales-stage-heading:nth-child(1) > header {
  --light-stage-fill: #007b98;
}
.work-board-headings h2:nth-child(2) {
  --light-stage-fill: #0077b6;
}
.work-board-headings h2:nth-child(3), .sales-stage-heading:nth-child(2) > header {
  --light-stage-fill: #008476;
}
.work-board-headings h2:nth-child(4), .sales-stage-heading:nth-child(3) > header {
  --light-stage-fill: #803df2;
}
.work-board-headings h2:nth-child(5), .sales-stage-heading:nth-child(4) > header {
  --light-stage-fill: #d14500;
}
.work-board-headings h2:nth-child(6), .sales-stage-heading:nth-child(5) > header {
  --light-stage-fill: #008446;
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) :is(
  .work-board-headings h2, .sales-stage-heading header
) {
  /* Work sets the original stage fill inline. */
  background-color: var(--light-stage-fill, var(--stage-color)) !important;
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) :is(
  .work-board-headings h2, .sales-stage-heading header, .sales-stage-heading header small
) {
  color: #fff;
  text-shadow: none;
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) :is(
  .work-queue-panel :is(th.sticky, td.sticky), .directory-record-panel th.sticky
) {
  background-color: #eef0f3;
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  :is([data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"]):not([data-oddy-motion-exception]) {
  box-shadow: 0 24px 70px rgb(31 39 50 / .22), inset 0 1px 0 white;
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  [data-oddy-motion-role="backdrop"] {
  background-color: rgb(62 69 80 / .15);
}

/* Retain the checked switch and selection fills from the existing Light UI. */
html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) [role="switch"] {
  --muted-foreground: 214 28% 84%;
}

/* Use the original Light intent colors for secondary labels on the pale glass. */
html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) :where(
  [data-oddy-surface], [data-oddy-motion-role], [data-workspace-topbar-controls]
) {
  --oddy-button-danger-ink: #a32c39;
  --oddy-button-warning-ink: #85541c;
  --oddy-button-assist-ink: #55459c;
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  [data-task-board-glass="true"] {
  --tasks-list-material: var(--glass-panel);
  --tasks-card-material: var(--glass-card);
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  [data-task-board-glass="true"] [data-task-board-list] .text-white\/70 {
  color: hsl(var(--muted-foreground));
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  [data-task-board-glass="true"] [data-task-board-list-header-title] :is(button, h2) {
  color: hsl(var(--foreground));
  text-shadow: none;
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  [data-task-board-glass="true"] [data-task-board-list-header-controls] > span.text-white {
  color: hsl(var(--foreground));
  background-color: var(--glass-flat);
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  .task-board-card-detail-header {
  background-color: var(--glass-field);
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)
  .task-board-card-dialog [role="tabpanel"] {
  background-color: var(--glass-flat);
}

html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)[data-oddy-transparency="solid"] {
  --frosted-light-translucency: 0;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) {
    --frosted-light-translucency: 0;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark)[data-oddy-transparency="system"] {
    --frosted-light-translucency: 0;
  }
}

@media (prefers-contrast: more) {
  html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) {
    --frosted-light-translucency: 0;
    --muted-foreground: 219 11% 25%;
    --glass-edge: #67717f;
  }
}

@media (forced-colors: active) {
  html[data-oddy-workspace="true"][data-oddy-style="glass"]:not(.dark) :is(
    [data-oddy-surface], [data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"]
  ) {
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}

/* Intent supplies color. Emphasis and the containing surface supply material. */
:root {
  --oddy-button-positive: #08766a;
  --oddy-button-positive-hover: #06675c;
  --oddy-button-destructive: #b93442;
  --oddy-button-destructive-hover: #a32c39;
  --oddy-button-caution: #efcb88;
  --oddy-button-caution-hover: #e6b768;
  --oddy-button-selection: #2f66df;
  --oddy-button-selection-hover: #2557c5;
  --oddy-button-focus: #2557c5;
  --oddy-button-secondary: #e7edf5;
  --oddy-button-secondary-hover: #dce5f0;
  --oddy-button-clear-hover: rgb(48 48 48 / .12);
  --oddy-button-secondary-ink: #101a2b;
  --oddy-button-secondary-border: transparent;
  --oddy-button-secondary-filter: none;
  --oddy-button-danger-ink: #a32c39;
  --oddy-button-warning-ink: #85541c;
  --oddy-button-assist-ink: #55459c;
}

html.dark {
  --oddy-button-secondary: #26354b;
  --oddy-button-secondary-hover: #33435b;
  --oddy-button-clear-hover: hsl(var(--foreground) / .08);
  --oddy-button-secondary-ink: #eff5ff;
  --oddy-button-focus: #93b9fa;
  --oddy-button-danger-ink: #f1a3ad;
  --oddy-button-warning-ink: #efcb88;
  --oddy-button-assist-ink: #c4beff;
}

html[data-oddy-style="glass"] {
  --oddy-button-secondary: var(--oddy-button-opaque-fill, rgb(239 245 255 / .4));
  --oddy-button-secondary-hover: var(--oddy-button-opaque-hover, rgb(239 245 255 / .5));
  --oddy-button-secondary-filter: var(--glass-filter, none);
  --oddy-button-secondary-ink: var(--oddy-button-opaque-ink, #101a2b);
}

html.dark[data-oddy-style="glass"], .oddy-auth-shell {
  --oddy-button-secondary: var(--oddy-button-opaque-fill, rgb(239 245 255 / .17));
  --oddy-button-secondary-hover: var(--oddy-button-opaque-hover, rgb(239 245 255 / .25));
  --oddy-button-secondary-ink: #eff5ff;
  --oddy-button-focus: #93b9fa;
  --oddy-button-danger-ink: #f1a3ad;
  --oddy-button-warning-ink: #efcb88;
  --oddy-button-assist-ink: #c4beff;
}

/* Panels already supply frost. These inherited values also reach old module
   artifacts and the contents of portaled windows and menus. */
:where([data-oddy-surface="card"], [data-oddy-surface="panel"], [data-oddy-surface="floating"],
  [data-oddy-surface="chrome"], [data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"],
  [data-oddy-motion-role="panel"], [data-oddy-motion-role="menu"], [data-workspace-topbar-controls]) {
  --oddy-button-secondary: transparent;
  --oddy-button-secondary-hover: var(--oddy-button-clear-hover);
  --oddy-button-secondary-ink: hsl(var(--foreground));
  --oddy-button-secondary-border: var(--glass-edge, hsl(var(--input)));
  --oddy-button-secondary-filter: none;
}

html[data-oddy-style="glass"] :where([data-oddy-surface="card"], [data-oddy-surface="panel"], [data-oddy-surface="floating"],
  [data-oddy-surface="chrome"], [data-oddy-motion-role="window"], [data-oddy-motion-role="attachment"],
  [data-oddy-motion-role="panel"], [data-oddy-motion-role="menu"], [data-workspace-topbar-controls]) {
  --oddy-button-danger-ink: #f1a3ad;
  --oddy-button-warning-ink: #efcb88;
  --oddy-button-assist-ink: #c4beff;
}

html [data-oddy-control] {
  --button-fill: var(--oddy-button-secondary);
  --button-hover: var(--oddy-button-secondary-hover);
  --button-ink: var(--oddy-button-secondary-ink);
  --button-border: var(--oddy-button-secondary-border);
  --button-filter: var(--oddy-button-secondary-filter);
  --button-tone: var(--oddy-button-positive);
  --button-tone-hover: var(--oddy-button-positive-hover);
  --button-tone-ink: white;
  background-color: var(--button-fill);
  color: var(--button-ink);
  border: 1px solid var(--button-border);
  border-radius: 999px;
  text-shadow: none;
  -webkit-backdrop-filter: var(--button-filter);
  backdrop-filter: var(--button-filter);
}

html [data-oddy-control]:hover {
  background-color: var(--button-hover);
  color: var(--button-ink);
}

html [data-oddy-control][data-oddy-update-trigger] {
  --button-hover: hsl(var(--info) / .10);
  --button-ink: color-mix(in srgb, hsl(var(--info)) 60%, hsl(var(--foreground)));
}

html [data-oddy-control]:where([data-oddy-intent="destructive"], [data-oddy-control="destructive"]:not([data-oddy-intent])) {
  --button-tone: var(--oddy-button-destructive);
  --button-tone-hover: var(--oddy-button-destructive-hover);
  --button-ink: var(--oddy-button-opaque-ink, var(--oddy-button-danger-ink));
}

html [data-oddy-control]:where([data-oddy-intent="caution"]) {
  --button-tone: var(--oddy-button-caution);
  --button-tone-hover: var(--oddy-button-caution-hover);
  --button-tone-ink: #101a2b;
  --button-ink: var(--oddy-button-opaque-ink, var(--oddy-button-warning-ink));
}

html [data-oddy-control]:where([data-oddy-intent="assist"]) {
  --button-ink: var(--oddy-button-opaque-ink, var(--oddy-button-assist-ink));
}

html [data-oddy-control]:where([data-oddy-emphasis="subtle"],
  :not([data-oddy-emphasis], [data-oddy-intent]):is([data-oddy-control="ghost"], [data-oddy-control="link"])) {
  --button-fill: transparent;
  --button-hover: hsl(var(--foreground) / .08);
  --button-border: transparent;
  --button-filter: none;
  border-radius: var(--radius);
}

html [data-oddy-control]:where([data-oddy-control="link"]:not([data-oddy-intent])) {
  --button-hover: transparent;
  --button-ink: hsl(var(--primary));
}

/* Legacy variants remain supported while callers migrate to explicit intent. */
html [data-oddy-control]:where(
  [data-oddy-emphasis="primary"]:is([data-oddy-intent="positive"], [data-oddy-intent="destructive"], [data-oddy-intent="caution"]),
  :not([data-oddy-emphasis]):is([data-oddy-intent="positive"], [data-oddy-intent="destructive"], [data-oddy-intent="caution"]),
  :not([data-oddy-emphasis], [data-oddy-intent], [aria-pressed], [aria-selected], [aria-current="step"]):is([data-oddy-control="default"], [data-oddy-control="destructive"])) {
  --button-fill: var(--button-tone);
  --button-hover: var(--button-tone-hover);
  --button-ink: var(--button-tone-ink);
  --button-border: transparent;
  --button-filter: none;
}

html [data-oddy-control]:where([data-oddy-intent="selection"], :not([data-oddy-intent])):where([aria-pressed="true"], [aria-selected="true"], [aria-current="step"], [data-oddy-intent="selection"][aria-current="page"]) {
  --button-fill: var(--oddy-button-selection);
  --button-hover: var(--oddy-button-selection-hover);
  --button-ink: white;
  --button-border: transparent;
  --button-filter: none;
}

html [data-oddy-control]:focus-visible {
  outline: 2px solid var(--oddy-button-focus);
  outline-offset: 2px;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
}

@media (forced-colors: active) {
  html [data-oddy-control] {
    --button-fill: ButtonFace;
    --button-hover: ButtonFace;
    --button-ink: ButtonText;
    --button-border: ButtonText;
  }
  html [data-oddy-control]:where([aria-pressed="true"], [aria-selected="true"], [aria-current="step"], [data-oddy-intent="selection"][aria-current="page"]) {
    --button-fill: Highlight;
    --button-hover: Highlight;
    --button-ink: HighlightText;
  }
  html [data-oddy-control]:focus-visible { outline-color: Highlight; }
  html [data-oddy-control][data-oddy-update-trigger] {
    --button-hover: ButtonFace;
    --button-ink: ButtonText;
  }
}

/* Generated from src/lib/ui/motion-presets.ts. Do not edit by hand. */
:root{--motion-window-enter:280ms;--motion-window-exit:220ms;--motion-window-closed-opacity:0;--motion-window-scale:0.9;--motion-window-distance:0px;--motion-attachment-enter:280ms;--motion-attachment-exit:220ms;--motion-attachment-closed-opacity:0;--motion-attachment-scale:0.9;--motion-attachment-distance:0px;--motion-panel-enter:260ms;--motion-panel-exit:200ms;--motion-panel-closed-opacity:1;--motion-panel-scale:1;--motion-panel-distance:28px;--motion-section-enter:220ms;--motion-section-exit:180ms;--motion-section-closed-opacity:1;--motion-section-scale:1;--motion-section-distance:0px;--motion-menu-enter:160ms;--motion-menu-exit:120ms;--motion-menu-closed-opacity:1;--motion-menu-scale:0.97;--motion-menu-distance:4px;--motion-control-enter:140ms;--motion-control-exit:100ms;--motion-control-closed-opacity:1;--motion-control-scale:1;--motion-control-distance:0px;--motion-backdrop-enter:180ms;--motion-backdrop-exit:140ms;--motion-backdrop-closed-opacity:1;--motion-backdrop-scale:1;--motion-backdrop-distance:0px;--motion-navigation-enter:0ms;--motion-navigation-exit:0ms;--motion-navigation-closed-opacity:1;--motion-navigation-scale:1;--motion-navigation-distance:0px;--motion-drag-enter:0ms;--motion-drag-exit:0ms;--motion-drag-closed-opacity:1;--motion-drag-scale:1;--motion-drag-distance:0px;--motion-ease:cubic-bezier(0.22,1,0.36,1)}
html[data-oddy-workspace]{--motion-fast:var(--motion-control-enter);--motion-standard:var(--motion-section-enter)}
html[data-oddy-motion="subtle"]{--motion-window-enter:180ms;--motion-window-exit:135ms;--motion-window-closed-opacity:0;--motion-window-scale:0.98;--motion-window-distance:0px;--motion-attachment-enter:180ms;--motion-attachment-exit:135ms;--motion-attachment-closed-opacity:0;--motion-attachment-scale:0.98;--motion-attachment-distance:0px;--motion-panel-enter:195ms;--motion-panel-exit:150ms;--motion-panel-closed-opacity:1;--motion-panel-scale:1;--motion-panel-distance:14px;--motion-section-enter:165ms;--motion-section-exit:135ms;--motion-section-closed-opacity:1;--motion-section-scale:1;--motion-section-distance:0px;--motion-menu-enter:120ms;--motion-menu-exit:90ms;--motion-menu-closed-opacity:1;--motion-menu-scale:0.985;--motion-menu-distance:2px;--motion-control-enter:105ms;--motion-control-exit:75ms;--motion-control-closed-opacity:1;--motion-control-scale:1;--motion-control-distance:0px;--motion-backdrop-enter:135ms;--motion-backdrop-exit:105ms;--motion-backdrop-closed-opacity:1;--motion-backdrop-scale:1;--motion-backdrop-distance:0px;--motion-navigation-enter:0ms;--motion-navigation-exit:0ms;--motion-navigation-closed-opacity:1;--motion-navigation-scale:1;--motion-navigation-distance:0px;--motion-drag-enter:0ms;--motion-drag-exit:0ms;--motion-drag-closed-opacity:1;--motion-drag-scale:1;--motion-drag-distance:0px;}
html[data-oddy-motion="off"]{--motion-window-enter:0ms;--motion-window-exit:0ms;--motion-window-closed-opacity:0;--motion-window-scale:1;--motion-window-distance:0px;--motion-attachment-enter:0ms;--motion-attachment-exit:0ms;--motion-attachment-closed-opacity:0;--motion-attachment-scale:1;--motion-attachment-distance:0px;--motion-panel-enter:0ms;--motion-panel-exit:0ms;--motion-panel-closed-opacity:1;--motion-panel-scale:1;--motion-panel-distance:28px;--motion-section-enter:0ms;--motion-section-exit:0ms;--motion-section-closed-opacity:1;--motion-section-scale:1;--motion-section-distance:0px;--motion-menu-enter:0ms;--motion-menu-exit:0ms;--motion-menu-closed-opacity:1;--motion-menu-scale:1;--motion-menu-distance:4px;--motion-control-enter:0ms;--motion-control-exit:0ms;--motion-control-closed-opacity:1;--motion-control-scale:1;--motion-control-distance:0px;--motion-backdrop-enter:0ms;--motion-backdrop-exit:0ms;--motion-backdrop-closed-opacity:1;--motion-backdrop-scale:1;--motion-backdrop-distance:0px;--motion-navigation-enter:0ms;--motion-navigation-exit:0ms;--motion-navigation-closed-opacity:1;--motion-navigation-scale:1;--motion-navigation-distance:0px;--motion-drag-enter:0ms;--motion-drag-exit:0ms;--motion-drag-closed-opacity:1;--motion-drag-scale:1;--motion-drag-distance:0px;}
[data-oddy-workspace] :is(.sidebar-motion-opening,.sidebar-motion-closing){--sidebar-motion-duration:var(--motion-panel-enter);--sidebar-label-duration:var(--motion-control-enter);--sidebar-motion-ease:var(--motion-ease)}
[data-oddy-motion-role="window"],[data-oddy-motion-role="attachment"]{--motion-enter:var(--motion-window-enter);--motion-exit:var(--motion-window-exit);--motion-rest-scale:var(--motion-window-scale);--motion-rest-translate:0 0;--motion-rest-opacity:var(--motion-window-closed-opacity)}
[data-oddy-motion-role="menu"]{--motion-enter:var(--motion-menu-enter);--motion-exit:var(--motion-menu-exit);--motion-rest-scale:var(--motion-menu-scale);--motion-rest-translate:0 calc(-1 * var(--motion-menu-distance));transform-origin:var(--radix-popover-content-transform-origin,var(--radix-select-content-transform-origin,center))}
[data-oddy-motion-role="panel"]{--motion-enter:var(--motion-panel-enter);--motion-exit:var(--motion-panel-exit);--motion-rest-scale:1;--motion-rest-translate:var(--motion-panel-distance) 0}
[data-oddy-motion-role="panel"][data-motion-side="left"]{--motion-rest-translate:calc(-100% - 24px) 0}
[data-oddy-motion-role="panel"][data-motion-side="right"]{--motion-rest-translate:calc(100% + 24px) 0}
[data-oddy-motion-role="panel"][data-motion-side="top"]{--motion-rest-translate:0 calc(-100% - 24px)}
[data-oddy-motion-role="panel"][data-motion-side="bottom"]{--motion-rest-translate:0 calc(100% + 24px)}
:is([data-oddy-motion-role="window"],[data-oddy-motion-role="attachment"],[data-oddy-motion-role="menu"],[data-oddy-motion-role="panel"]):not([data-oddy-motion-exception]){
 scale:1;translate:0 0;opacity:1;transition-property:scale,translate,opacity;transition-duration:var(--motion-enter);transition-timing-function:var(--motion-ease)}
:is([data-oddy-motion-role="window"],[data-oddy-motion-role="attachment"],[data-oddy-motion-role="menu"],[data-oddy-motion-role="panel"]):not([data-oddy-motion-exception])[data-state="open"]{animation:oddy-presence-in var(--motion-enter) linear}
:is([data-oddy-motion-role="window"],[data-oddy-motion-role="attachment"],[data-oddy-motion-role="menu"],[data-oddy-motion-role="panel"]):not([data-oddy-motion-exception])[data-state="closed"]{
 scale:var(--motion-rest-scale);translate:var(--motion-rest-translate);opacity:var(--motion-rest-opacity,1);transition-duration:var(--motion-exit);animation:oddy-presence-out var(--motion-exit) linear;pointer-events:none!important}
@starting-style{[data-state="open"]:is([data-oddy-motion-role="window"],[data-oddy-motion-role="attachment"],[data-oddy-motion-role="menu"],[data-oddy-motion-role="panel"]):not([data-oddy-motion-exception]){scale:var(--motion-rest-scale);translate:var(--motion-rest-translate);opacity:var(--motion-rest-opacity,1)}}
/* Nonvisual clocks retain Radix Presence while the shared controller owns motion. */
[data-oddy-elastic-window]{scale:1;translate:0 0;rotate:0deg;opacity:1;transition:none!important;will-change:scale,translate,rotate}
[data-oddy-elastic-window][data-state="open"]{animation:oddy-presence-in var(--elastic-window-enter) linear!important}
[data-oddy-elastic-window][data-state="closed"]{scale:1;translate:0 0;opacity:1;animation:oddy-presence-out var(--elastic-window-exit) linear!important;pointer-events:none!important}
/* Independent scale composes with Tasks' existing swipe-owned transform. */
.task-board-card-dialog[data-oddy-motion-role="window"]{will-change:scale;transition-property:transform,scale,opacity!important;transition-duration:var(--task-card-swipe-duration,0ms),var(--motion-window-enter),var(--motion-window-enter)!important;transition-timing-function:var(--motion-ease),var(--motion-ease)!important}
.task-board-card-dialog[data-state="closed"]{transition-duration:var(--task-card-swipe-duration,0ms),var(--motion-window-exit),var(--motion-window-exit)!important}
.task-board-card-dialog[data-task-card-swiping]{scale:1;transition-property:transform!important}
.task-board-card-dialog[data-task-window-elastic]{scale:1;translate:0 0;rotate:0deg;opacity:1;transition-property:transform!important;transition-duration:var(--task-card-swipe-duration,0ms)!important;animation:none!important;will-change:scale,translate,rotate}
html[data-oddy-motion="off"] .task-board-card-dialog{transition:none!important;animation:none!important;scale:1!important}
@media(prefers-reduced-motion:reduce){html[data-oddy-workspace] .task-board-card-dialog{transition:none!important;animation:none!important;scale:1!important}}
.task-board-card-dialog-overlay[data-state="open"]{opacity:var(--task-card-overlay-opacity,1)!important;transition:opacity var(--motion-backdrop-enter) var(--motion-ease)!important}
.task-board-card-dialog-overlay[data-state="closed"]{opacity:0!important;transition:opacity var(--motion-backdrop-exit) var(--motion-ease)!important}
.task-board-card-dialog-overlay[data-task-card-swiping]{transition-duration:var(--task-card-overlay-duration,0ms)!important}
@starting-style{.task-board-card-dialog-overlay[data-state="open"]{opacity:0!important}}
[data-oddy-motion-role="backdrop"]{opacity:1;transition:opacity var(--motion-backdrop-enter) var(--motion-ease)}
[data-oddy-motion-role="backdrop"][data-state="open"]{animation:oddy-presence-in var(--motion-backdrop-enter) linear}
[data-oddy-motion-role="backdrop"][data-state="closed"]{opacity:0;transition-duration:var(--motion-backdrop-exit);animation:oddy-presence-out var(--motion-backdrop-exit) linear;pointer-events:none!important}
@starting-style{[data-oddy-motion-role="backdrop"][data-state="open"]{opacity:0}}
@keyframes oddy-presence-in{from{--oddy-presence-clock:0}to{--oddy-presence-clock:1}}
@keyframes oddy-presence-out{from{--oddy-presence-clock:1}to{--oddy-presence-clock:0}}
[data-oddy-workspace] :where(button,input,select,textarea)[class*="transition"]{transition-duration:var(--motion-control-enter);transition-timing-function:var(--motion-ease)}
[data-oddy-workspace] :is(.module-surface-enter,.page-shell-enter){animation:none;transition:none;opacity:1;transform:none}
html[data-oddy-motion="off"] [data-oddy-motion-role]:not([data-oddy-motion-exception]){animation:none;transition:none}
@media(prefers-reduced-motion:reduce){[data-oddy-motion-role]:not([data-oddy-motion-exception]){animation:none!important;transition:none!important}[data-oddy-workspace] .sidebar-elastic{transition:none}[data-oddy-workspace] :is(.animate-spin,.animate-pulse,.route-loading-shimmer){animation:none}}

/* Local page geometry only. Materials, controls and motion come from the shared system. */
html { min-height: 100%; }
body { margin: 0; min-width: 320px; color: hsl(var(--foreground)); }
button, select { font: inherit; }
.maintenance-page { min-height: 100svh; padding: 32px clamp(24px, 5vw, 80px) 80px; display: flex; flex-direction: column; }
.maintenance-header, .maintenance-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: 1280px; margin-inline: auto; }
.header-note { display: flex; gap: 9px; align-items: center; color: hsl(var(--muted-foreground)); font-size: 13px; }
.maintenance-content { width: 100%; max-width: 1100px; margin: auto; padding: 70px 0 20px; }
.maintenance-hero { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 64px; margin-bottom: 60px; }
.eyebrow, .section-label, .review-label { font-size: 11px; font-weight: 600; letter-spacing: .13em; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: hsl(var(--muted-foreground)); margin: 0 0 26px; }
.status-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #7fddeb; }
h1 { font-size: clamp(38px, 4.5vw, 62px); font-weight: 550; letter-spacing: -.05em; line-height: 1.13; margin: 0; color: hsl(var(--foreground)); text-wrap: balance; }
h1 span { color: hsl(var(--muted-foreground)); }
.hero-description { max-width: 480px; margin: 24px 0 22px; font-size: 17px; color: hsl(var(--foreground)); line-height: 1.75; }
.hero-note { display: flex; align-items: flex-start; gap: 9px; max-width: 480px; color: hsl(var(--muted-foreground)); line-height: 1.6; font-size: 13px; }
.hero-note svg { flex-shrink: 0; margin-top: 2px; }
.orbit-scene { width: 340px; height: 340px; max-width: 100%; position: relative; margin: auto; display: grid; place-items: center; }
.orbit-core { position: relative; z-index: 1; }
.orbit-path { border: 1px solid rgb(185 202 221 / .16); border-radius: 50%; position: absolute; pointer-events: none; }
.orbit-path-outer { inset: 0; }
.orbit-path-inner { inset: 31px; border-style: dashed; border-color: rgb(185 202 221 / .12); }
.orbit-path i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--muted-foreground)); top: 48px; right: 45px; }
.orbit-path-inner i { width: 4px; height: 4px; top: auto; right: auto; bottom: 30px; left: 42px; background: #a29bff; }
.orbit-caption { position: absolute; bottom: -34px; color: hsl(var(--muted-foreground)); font-size: 11px; letter-spacing: .04em; }
.maintenance-status { border: 1px solid var(--glass-edge); border-radius: calc(var(--radius) * 1.5); padding: 29px 32px 0; }
.status-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.section-label { color: hsl(var(--muted-foreground)); font-size: 10px; margin: 0 0 8px; }
.status-heading h2 { font-size: 20px; font-weight: 550; letter-spacing: -.02em; line-height: 1.35; margin: 0; }
.status-badge { display: flex; flex-shrink: 0; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgb(127 221 235 / .22); background: rgb(127 221 235 / .06); border-radius: 999px; color: hsl(var(--foreground)); font-size: 11px; }
.maintenance-steps { display: grid; grid-template-columns: repeat(3,1fr); list-style: none; margin: 30px 0; padding: 0; gap: 20px; }
.maintenance-steps li { display: flex; align-items: flex-start; gap: 12px; }
.step-marker { display: grid; place-items: center; flex: 0 0 35px; height: 35px; border-radius: 50%; border: 1px solid rgb(185 202 221 / .25); font-size: 11px; color: hsl(var(--muted-foreground)); }
.maintenance-steps h3 { margin: 1px 0 5px; font-weight: 500; font-size: 13px; }
.maintenance-steps p { margin: 0; font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 1.6; max-width: 205px; }
.maintenance-steps [data-step-state="current"] .step-marker { border-color: #7fddeb; background: rgb(127 221 235 / .1); color: hsl(var(--info)); }
.maintenance-steps [data-step-state="done"] .step-marker { background: rgb(127 221 235 / .1); border-color: rgb(127 221 235 / .25); color: #7fddeb; }
.maintenance-steps [data-step-state="waiting"] h3 { color: hsl(var(--muted-foreground)); }
.maintenance-details { border-top: 1px solid var(--glass-edge); }
.maintenance-details summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 58px; font-size: 13px; color: hsl(var(--foreground)); cursor: pointer; list-style: none; }
.maintenance-details summary::-webkit-details-marker { display: none; }
.maintenance-details summary svg { transition: rotate var(--motion-control-enter) var(--motion-ease); }
.maintenance-details[open] summary svg { rotate: 180deg; }
.maintenance-details summary:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; border-radius: 4px; }
.detail-copy { max-width: 720px; padding-bottom: 24px; color: hsl(var(--foreground)); font-size: 13px; line-height: 1.8; }
.detail-copy p + p { margin-top: 10px; }
.maintenance-thanks { display: flex; justify-content: center; gap: 9px; align-items: center; font-size: 12px; color: hsl(var(--muted-foreground)); margin: 23px 0 0; }
.maintenance-footer { padding-top: 42px; color: hsl(var(--muted-foreground)); font-size: 11px; }
.return-button { gap: 10px; margin-top: 24px; height: 46px; padding: 0 22px; }
.preview-notice:empty { display: none; }
.preview-notice { text-align: center; font-size: 12px; color: hsl(var(--muted-foreground)); margin: 12px; }
.review-tools { position: fixed; z-index: 10; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--glass-edge); border-radius: 999px; white-space: nowrap; }
.review-label { letter-spacing: .07em; font-size: 9px; padding-right: 7px; color: hsl(var(--muted-foreground)); }
.phase-picker { position: relative; display: flex; align-items: center; min-height: 44px; border-inline: 1px solid var(--glass-edge); }
.phase-picker select { appearance: none; background: transparent; color: white; border: 0; font-size: 12px; padding: 10px 26px 10px 12px; }
.phase-picker option { background: #131e2f; }
.phase-picker svg { position: absolute; right: 8px; pointer-events: none; }
.review-tools button { min-width: 44px; height: 44px; }
.review-tools .solid-toggle { font-size: 11px; padding: 0 10px; }
.review-safety { color: hsl(var(--muted-foreground)); font-size: 10px; padding-left: 4px; }
@media (max-width: 800px) {
  .maintenance-page { padding: 24px 24px 86px; }
  .maintenance-content { padding-top: 45px; }
  .maintenance-hero { gap: 24px; margin-bottom: 48px; }
  .orbit-scene { width: 250px; height: 250px; }
  .orbit-core { scale: .8; }
  .orbit-path-inner { inset: 20px; }
  .orbit-caption { font-size: 10px; bottom: -30px; }
  .maintenance-status { padding-inline: 24px; }
  .maintenance-steps { grid-template-columns: 1fr; gap: 20px; }
  .maintenance-steps p { max-width: none; }
}
@media (max-width: 580px) {
  .maintenance-page { padding: 22px 22px 88px; }
  .header-note { display: none; }
  .maintenance-header .brand-lockup { --brand-mark-size: 28px !important; }
  .maintenance-content { padding-top: 32px; }
  .maintenance-hero { display: flex; flex-direction: column-reverse; gap: 45px; margin-bottom: 28px; }
  .orbit-scene { width: 190px; height: 190px; }
  .orbit-core { scale: .6; }
  .orbit-path-inner { inset: 15px; }
  .orbit-path-outer i { top: 25px; right: 25px; width: 5px; height: 5px; }
  .orbit-path-inner i { bottom: 15px; left: 24px; }
  .orbit-caption { bottom: -25px; }
  .hero-copy { width: 100%; }
  .eyebrow { font-size: 10px; margin-bottom: 16px; }
  h1 { font-size: 39px; }
  .hero-description { font-size: 15px; margin-block: 18px; }
  .status-heading { align-items: flex-start; flex-direction: column-reverse; gap: 15px; }
  .maintenance-status { padding: 23px 20px 0; }
  .maintenance-steps { margin-block: 25px; }
  .maintenance-thanks { align-items: flex-start; font-size: 11px; line-height: 1.65; }
  .maintenance-thanks svg { flex-shrink: 0; margin-top: 2px; }
  .maintenance-footer { font-size: 10px; padding-top: 24px; }
  .maintenance-footer span:last-child, .review-safety { display: none; }
  .review-tools { width: max-content; gap: 3px; padding-inline: 10px; max-width: calc(100vw - 18px); }
  .review-label { font-size: 8px; padding-right: 3px; }
  .review-tools button { min-width: 44px; }
  .review-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .maintenance-details summary svg { transition: none; } }
@media (forced-colors: active) { .status-dot { background: CanvasText; } .maintenance-status, .status-badge, .step-marker { border-color: CanvasText; } }

html:not(.dark) .brand-logo, html:not(.dark) .brand-lockup { color: hsl(var(--foreground)); }
html:not(.dark) .phase-picker select { color: hsl(var(--foreground)); }
html:not(.dark) .review-tools [data-oddy-control] { color: hsl(var(--foreground)); }
html:not(.dark) .status-dot { background: hsl(var(--success)); }
html:not(.dark) .maintenance-steps [data-step-state="current"] .step-marker, html:not(.dark) .maintenance-steps [data-step-state="done"] .step-marker { border-color: hsl(var(--success)); color: hsl(var(--success)); }