/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties, theme, base, components, utilities;
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Inter", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-black: #000;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-widest: .1em;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-md: 12px;
    --blur-xl: 24px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: "Inter", sans-serif;
    --default-mono-font-family: var(--font-mono);
    --font-display: "Unbounded", sans-serif;
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-border: var(--border);
  }
}



@layer components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-x-0 {
    inset-inline: 0;
  }

  .inset-y-0 {
    inset-block: 0;
  }

  .-top-1 {
    top: calc(var(--spacing) * -1);
  }

  .-top-12 {
    top: calc(var(--spacing) * -12);
  }

  .top-0 {
    top: 0;
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-3\.5 {
    top: calc(var(--spacing) * 3.5);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-\[1px\] {
    top: 1px;
  }

  .top-\[8\%\] {
    top: 8%;
  }

  .top-\[18\%\] {
    top: 18%;
  }

  .top-\[29\%\] {
    top: 29%;
  }

  .top-\[50\%\] {
    top: 50%;
  }

  .top-\[60\%\] {
    top: 60%;
  }

  .top-full {
    top: 100%;
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .-right-12 {
    right: calc(var(--spacing) * -12);
  }

  .right-0 {
    right: 0;
  }

  .right-1 {
    right: var(--spacing);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-5 {
    right: calc(var(--spacing) * 5);
  }

  .right-\[2\%\] {
    right: 2%;
  }

  .right-\[7\%\] {
    right: 7%;
  }

  .-bottom-12 {
    bottom: calc(var(--spacing) * -12);
  }

  .bottom-0 {
    bottom: 0;
  }

  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-24 {
    bottom: calc(var(--spacing) * 24);
  }

  .bottom-\[13\%\] {
    bottom: 13%;
  }

  .bottom-\[20\%\] {
    bottom: 20%;
  }

  .-left-12 {
    left: calc(var(--spacing) * -12);
  }

  .left-0 {
    left: 0;
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-5 {
    left: calc(var(--spacing) * 5);
  }

  .left-\[5\%\] {
    left: 5%;
  }

  .left-\[10\%\] {
    left: 10%;
  }

  .left-\[16\%\] {
    left: 16%;
  }

  .left-\[50\%\] {
    left: 50%;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[1\] {
    z-index: 1;
  }

  .page-shell {
    width: min(100% - 2rem, 1440px);
    margin-inline: auto;
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3\.5 {
    margin-inline: calc(var(--spacing) * 3.5);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5);
  }

  .my-1 {
    margin-block: var(--spacing);
  }

  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }

  .mt-24 {
    margin-top: calc(var(--spacing) * 24);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mb-1 {
    margin-bottom: var(--spacing);
  }

  .-ml-4 {
    margin-left: calc(var(--spacing) * -4);
  }

  .ml-1 {
    margin-left: var(--spacing);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-auto {
    margin-left: auto;
  }

  .cc-eyebrow {
    text-transform: uppercase;
    border-width: 1px;
    border-radius: 999px;
    align-items: center;
    width: fit-content;
    padding: .42rem .75rem;
    font-size: .625rem;
    font-weight: 700;
    display: inline-flex;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .size-\(--cell-size\) {
    width: var(--cell-size);
    height: var(--cell-size);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }

  .h-\(--cell-size\) {
    height: var(--cell-size);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-\[1px\] {
    height: 1px;
  }

  .h-\[76\%\] {
    height: 76%;
  }

  .h-\[390px\] {
    height: 390px;
  }

  .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
    height: var(--radix-navigation-menu-viewport-height);
  }

  .h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height);
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-svh {
    height: 100svh;
  }

  .max-h-\(--radix-context-menu-content-available-height\) {
    max-height: var(--radix-context-menu-content-available-height);
  }

  .max-h-\(--radix-select-content-available-height\) {
    max-height: var(--radix-select-content-available-height);
  }

  .max-h-\[300px\] {
    max-height: 300px;
  }

  .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
    max-height: var(--radix-dropdown-menu-content-available-height);
  }

  .min-h-0 {
    min-height: 0;
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-28 {
    min-height: calc(var(--spacing) * 28);
  }

  .min-h-\[60px\] {
    min-height: 60px;
  }

  .min-h-\[820px\] {
    min-height: 820px;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .min-h-svh {
    min-height: 100svh;
  }

  .w-\(--cell-size\) {
    width: var(--cell-size);
  }

  .w-\(--sidebar-width\) {
    width: var(--sidebar-width);
  }

  .w-0 {
    width: 0;
  }

  .w-1 {
    width: var(--spacing);
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-\[1px\] {
    width: 1px;
  }

  .w-\[72\%\] {
    width: 72%;
  }

  .w-\[100px\] {
    width: 100px;
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .w-px {
    width: 1px;
  }

  .max-w-\(--skeleton-width\) {
    max-width: var(--skeleton-width);
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-max {
    max-width: max-content;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .min-w-\(--cell-size\) {
    min-width: var(--cell-size);
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }

  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }

  .min-w-\[8rem\] {
    min-width: 8rem;
  }

  .min-w-\[12rem\] {
    min-width: 12rem;
  }

  .min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width);
  }

  .flex-1 {
    flex: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .basis-full {
    flex-basis: 100%;
  }

  .caption-bottom {
    caption-side: bottom;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .origin-\(--radix-context-menu-content-transform-origin\) {
    transform-origin: var(--radix-context-menu-content-transform-origin);
  }

  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  }

  .origin-\(--radix-hover-card-content-transform-origin\) {
    transform-origin: var(--radix-hover-card-content-transform-origin);
  }

  .origin-\(--radix-menubar-content-transform-origin\) {
    transform-origin: var(--radix-menubar-content-transform-origin);
  }

  .origin-\(--radix-popover-content-transform-origin\) {
    transform-origin: var(--radix-popover-content-transform-origin);
  }

  .origin-\(--radix-select-content-transform-origin\) {
    transform-origin: var(--radix-select-content-transform-origin);
  }

  .origin-\(--radix-tooltip-content-transform-origin\) {
    transform-origin: var(--radix-tooltip-content-transform-origin);
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-px {
    --tw-translate-x: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-px {
    --tw-translate-x: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-caret-blink {
    animation: 1.25s ease-out infinite caret-blink;
  }

  .animate-in {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .touch-none {
    touch-action: none;
  }

  .list-none {
    list-style-type: none;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-\[minmax\(0\,1fr\)_auto\] {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-row {
    flex-direction: row;
  }

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

  .place-content-center {
    place-content: center;
  }

  .place-items-center {
    place-items: center;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-14 {
    gap: calc(var(--spacing) * 14);
  }

  .gap-px {
    gap: 1px;
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-x-1 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse));
    margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)));
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded-\[2px\] {
    border-radius: 2px;
  }

  .rounded-\[50\%\] {
    border-radius: 50%;
  }

  .rounded-\[inherit\] {
    border-radius: inherit;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius);
  }

  .rounded-md {
    border-radius: calc(var(--radius) - 2px);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-sm {
    border-radius: calc(var(--radius) - 4px);
  }

  .rounded-xl {
    border-radius: calc(var(--radius) + 4px);
  }

  .rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .rounded-l-md {
    border-top-left-radius: calc(var(--radius) - 2px);
    border-bottom-left-radius: calc(var(--radius) - 2px);
  }

  .rounded-tl-sm {
    border-top-left-radius: calc(var(--radius) - 4px);
  }

  .rounded-r-md {
    border-top-right-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-\(--color-border\) {
    border-color: var(--color-border);
  }

  .border-border {
    border-color: var(--border);
  }

  .border-border\/50 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/50 {
      border-color: color-mix(in oklab, var(--border) 50%, transparent);
    }
  }

  .border-destructive\/50 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/50 {
      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
    }
  }

  .border-hero-line {
    border-color: var(--hero-line);
  }

  .border-input {
    border-color: var(--input);
  }

  .border-primary {
    border-color: var(--primary);
  }

  .border-primary-foreground\/50 {
    border-color: var(--primary-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary-foreground\/50 {
      border-color: color-mix(in oklab, var(--primary-foreground) 50%, transparent);
    }
  }

  .border-primary\/50 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/50 {
      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
    }
  }

  .border-primary\/60 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/60 {
      border-color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

  .border-sidebar-border {
    border-color: var(--sidebar-border);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-l-transparent {
    border-left-color: #0000;
  }

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

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

  .bg-background {
    background-color: var(--background);
  }

  .bg-black\/80 {
    background-color: #000c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/80 {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }

  .bg-border {
    background-color: var(--border);
  }

  .bg-card {
    background-color: var(--card);
  }

  .bg-destructive {
    background-color: var(--destructive);
  }

  .bg-foreground {
    background-color: var(--foreground);
  }

  .bg-hero {
    background-color: var(--hero);
  }

  .bg-hero-glass {
    background-color: var(--hero-glass);
  }

  .bg-hero-line {
    background-color: var(--hero-line);
  }

  .bg-hero\/75 {
    background-color: var(--hero);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-hero\/75 {
      background-color: color-mix(in oklab, var(--hero) 75%, transparent);
    }
  }

  .bg-hero\/80 {
    background-color: var(--hero);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-hero\/80 {
      background-color: color-mix(in oklab, var(--hero) 80%, transparent);
    }
  }

  .bg-hero\/95 {
    background-color: var(--hero);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-hero\/95 {
      background-color: color-mix(in oklab, var(--hero) 95%, transparent);
    }
  }

  .bg-muted {
    background-color: var(--muted);
  }

  .bg-muted\/50 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/50 {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }

  .bg-popover {
    background-color: var(--popover);
  }

  .bg-primary {
    background-color: var(--primary);
  }

  .bg-primary\/10 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .bg-primary\/20 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .bg-secondary {
    background-color: var(--secondary);
  }

  .bg-sidebar {
    background-color: var(--sidebar);
  }

  .bg-sidebar-border {
    background-color: var(--sidebar-border);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .fill-current {
    fill: currentColor;
  }

  .fill-primary {
    fill: var(--primary);
  }

  .object-cover {
    object-fit: cover;
  }

  .object-center {
    object-position: center;
  }

  .p-0 {
    padding: 0;
  }

  .p-1 {
    padding: var(--spacing);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-\[1px\] {
    padding: 1px;
  }

  .px-\(--cell-size\) {
    padding-inline: var(--cell-size);
  }

  .px-1 {
    padding-inline: var(--spacing);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .pt-0 {
    padding-top: 0;
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-28 {
    padding-top: calc(var(--spacing) * 28);
  }

  .pr-1 {
    padding-right: var(--spacing);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-\[310px\] {
    padding-bottom: 310px;
  }

  .pb-\[360px\] {
    padding-bottom: 360px;
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .align-middle {
    vertical-align: middle;
  }

  .font-display {
    font-family: Unbounded, sans-serif;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: Inter, sans-serif;
  }

  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[0\.8rem\] {
    font-size: .8rem;
  }

  .text-\[7px\] {
    font-size: 7px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[clamp\(2\.15rem\,5vw\,4\.75rem\)\] {
    font-size: clamp(2.15rem, 5vw, 4.75rem);
  }

  .leading-\[1\.08\] {
    --tw-leading: 1.08;
    line-height: 1.08;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

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

  .text-card-foreground {
    color: var(--card-foreground);
  }

  .text-current {
    color: currentColor;
  }

  .text-destructive {
    color: var(--destructive);
  }

  .text-destructive-foreground {
    color: var(--destructive-foreground);
  }

  .text-foreground {
    color: var(--foreground);
  }

  .text-hero-foreground {
    color: var(--hero-foreground);
  }

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

  .text-hero-muted\/70 {
    color: var(--hero-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-hero-muted\/70 {
      color: color-mix(in oklab, var(--hero-muted) 70%, transparent);
    }
  }

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

  .text-popover-foreground {
    color: var(--popover-foreground);
  }

  .text-primary {
    color: var(--primary);
  }

  .text-primary-foreground {
    color: var(--primary-foreground);
  }

  .text-primary-foreground\/75 {
    color: var(--primary-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary-foreground\/75 {
      color: color-mix(in oklab, var(--primary-foreground) 75%, transparent);
    }
  }

  .text-secondary-foreground {
    color: var(--secondary-foreground);
  }

  .text-sidebar-foreground {
    color: var(--sidebar-foreground);
  }

  .text-sidebar-foreground\/70 {
    color: var(--sidebar-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-sidebar-foreground\/70 {
      color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
    }
  }

  .text-success {
    color: var(--success);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_var\(--sidebar-border\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--shadow-accent\)\] {
    --tw-shadow: var(--shadow-accent);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-ring {
    --tw-ring-color: var(--ring);
  }

  .ring-sidebar-ring {
    --tw-ring-color: var(--sidebar-ring);
  }

  .ring-offset-background {
    --tw-ring-offset-color: var(--background);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[left\,right\,width\] {
    transition-property: left, right, width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[margin\,opacity\] {
    transition-property: margin, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[transform\,background-color\,border-color\,color\,box-shadow\] {
    transition-property: transform, background-color, border-color, color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,height\,padding\] {
    transition-property: width, height, padding;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }

  .fade-in-0 {
    --tw-enter-opacity: 0;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .zoom-in-95 {
    --tw-enter-scale: .95;
  }

  .\[--cell-size\:2rem\] {
    --cell-size: 2rem;
  }

  .bg-hero-overlay {
    background: linear-gradient(90deg, oklch(12% .045 248 / .96) 0%, oklch(13% .045 248 / .88) 40%, oklch(13% .045 248 / 0) 56%);
  }

  .bg-professional-overlay {
    background: linear-gradient(90deg, oklch(12% .045 248 / .96) 0%, oklch(13% .045 248 / .74) 58%, oklch(12% .045 248 / .38) 100%);
  }

  .section-dark {
    background: linear-gradient(135deg, oklch(14% .042 248), oklch(22% .055 243));
  }

  .section-light {
    background: var(--catalog);
  }

  .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *) {
      opacity: 1;
    }
  }

  .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) {
    padding-right: calc(var(--spacing) * 8);
  }

  .group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible="icon"] *) {
    margin-top: calc(var(--spacing) * -8);
  }

  .group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible="icon"] *) {
    display: none;
  }

  .group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--spacing) * 8) !important;
    height: calc(var(--spacing) * 8) !important;
  }

  .group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.group)[data-collapsible="icon"] *) {
    width: var(--sidebar-width-icon);
  }

  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--sidebar-width-icon) + 1rem);
  }

  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--sidebar-width-icon) + 1rem + 2px);
  }

  .group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible="icon"] *) {
    overflow: hidden;
  }

  .group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.group)[data-collapsible="icon"] *) {
    padding: 0 !important;
  }

  .group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.group)[data-collapsible="icon"] *) {
    padding: calc(var(--spacing) * 2) !important;
  }

  .group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible="icon"] *) {
    opacity: 0;
  }

  .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
    right: calc(var(--sidebar-width) * -1);
  }

  .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
    left: calc(var(--sidebar-width) * -1);
  }

  .group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.group)[data-collapsible="offcanvas"] *) {
    width: 0;
  }

  .group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible="offcanvas"] *) {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused="true"] *) {
    position: relative;
  }

  .group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused="true"] *) {
    z-index: 10;
  }

  .group-data-\[focused\=true\]\/day\:border-ring:is(:where(.group\/day)[data-focused="true"] *) {
    border-color: var(--ring);
  }

  .group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused="true"] *) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused="true"] *) {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused="true"] *) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side="left"] *) {
    right: calc(var(--spacing) * -4);
  }

  .group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side="left"] *) {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side="right"] *) {
    left: 0;
  }

  .group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side="right"] *) {
    rotate: 180deg;
  }

  .group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side="right"] *) {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *) {
    rotate: 180deg;
  }

  .group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant="floating"] *) {
    border-radius: var(--radius);
  }

  .group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant="floating"] *) {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .group-data-\[variant\=floating\]\:border-sidebar-border:is(:where(.group)[data-variant="floating"] *) {
    border-color: var(--sidebar-border);
  }

  .group-data-\[variant\=floating\]\:shadow:is(:where(.group)[data-variant="floating"] *) {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .group-\[\.toast\]\:bg-muted:is(:where(.group).toast *) {
    background-color: var(--muted);
  }

  .group-\[\.toast\]\:bg-primary:is(:where(.group).toast *) {
    background-color: var(--primary);
  }

  .group-\[\.toast\]\:text-muted-foreground:is(:where(.group).toast *) {
    color: var(--muted-foreground);
  }

  .group-\[\.toast\]\:text-primary-foreground:is(:where(.group).toast *) {
    color: var(--primary-foreground);
  }

  .group-\[\.toaster\]\:border-border:is(:where(.group).toaster *) {
    border-color: var(--border);
  }

  .group-\[\.toaster\]\:bg-background:is(:where(.group).toaster *) {
    background-color: var(--background);
  }

  .group-\[\.toaster\]\:text-foreground:is(:where(.group).toaster *) {
    color: var(--foreground);
  }

  .group-\[\.toaster\]\:shadow-lg:is(:where(.group).toaster *) {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @media (hover: hover) {
    .peer-hover\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button):hover ~ *) {
      color: var(--sidebar-accent-foreground);
    }
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
    opacity: .7;
  }

  .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button)[data-active="true"] ~ *) {
    color: var(--sidebar-accent-foreground);
  }

  .peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.peer\/menu-button)[data-size="default"] ~ *) {
    top: calc(var(--spacing) * 1.5);
  }

  .peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) {
    top: calc(var(--spacing) * 2.5);
  }

  .peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) {
    top: var(--spacing);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .file\:text-foreground::file-selector-button {
    color: var(--foreground);
  }

  .placeholder\:text-hero-muted::placeholder {
    color: var(--hero-muted);
  }

  .placeholder\:text-muted-foreground::placeholder {
    color: var(--muted-foreground);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:-inset-2:after {
    content: var(--tw-content);
    inset: calc(var(--spacing) * -2);
  }

  .after\:inset-y-0:after {
    content: var(--tw-content);
    inset-block: 0;
  }

  .after\:left-1\/2:after {
    content: var(--tw-content);
    left: 50%;
  }

  .after\:w-1:after {
    content: var(--tw-content);
    width: var(--spacing);
  }

  .after\:w-\[2px\]:after {
    content: var(--tw-content);
    width: 2px;
  }

  .after\:-translate-x-1\/2:after {
    content: var(--tw-content);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible="offcanvas"] *):after {
    content: var(--tw-content);
    left: 100%;
  }

  .first\:rounded-l-md:first-child {
    border-top-left-radius: calc(var(--radius) - 2px);
    border-bottom-left-radius: calc(var(--radius) - 2px);
  }

  .first\:border-l:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .last\:rounded-r-md:last-child {
    border-top-right-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px);
  }

  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:border-primary\/50:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/50:hover {
        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
      }
    }

    .hover\:border-primary\/70:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/70:hover {
        border-color: color-mix(in oklab, var(--primary) 70%, transparent);
      }
    }

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

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

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/80:hover {
        background-color: color-mix(in oklab, var(--destructive) 80%, transparent);
      }
    }

    .hover\:bg-hero-glass-strong:hover {
      background-color: var(--hero-glass-strong);
    }

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

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-hero\/90:hover {
        background-color: color-mix(in oklab, var(--hero) 90%, transparent);
      }
    }

    .hover\:bg-muted:hover, .hover\:bg-muted\/50:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/50:hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }

    .hover\:bg-primary-foreground\/10:hover {
      background-color: var(--primary-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary-foreground\/10:hover {
        background-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent);
      }
    }

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

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/80:hover {
        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
      }
    }

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

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }

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

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }

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

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

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

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

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

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

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

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover {
      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:is(:where(.group)[data-collapsible="offcanvas"] *):hover {
      background-color: var(--sidebar);
    }

    .hover\:after\:bg-sidebar-border:hover:after {
      content: var(--tw-content);
      background-color: var(--sidebar-border);
    }
  }

  .focus\:border-primary\/60:focus {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-primary\/60:focus {
      border-color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

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

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

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

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

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

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

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

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

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

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

  .focus-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

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

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

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:bg-sidebar-accent:active {
    background-color: var(--sidebar-accent);
  }

  .active\:text-sidebar-accent-foreground:active {
    color: var(--sidebar-accent-foreground);
  }

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

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

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

  .has-focus\:border-ring:has(:focus) {
    border-color: var(--ring);
  }

  .has-focus\:ring-\[3px\]:has(:focus) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .has-focus\:ring-ring\/50:has(:focus) {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .has-focus\:ring-ring\/50:has(:focus) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .has-\[\:disabled\]\:opacity-50:has(:disabled) {
    opacity: .5;
  }

  .has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant="inset"]) {
    background-color: var(--sidebar);
  }

  .aria-disabled\:pointer-events-none[aria-disabled="true"] {
    pointer-events: none;
  }

  .aria-disabled\:opacity-50[aria-disabled="true"] {
    opacity: .5;
  }

  .aria-selected\:text-muted-foreground[aria-selected="true"] {
    color: var(--muted-foreground);
  }

  .data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
    background-color: var(--sidebar-accent);
  }

  .data-\[active\=true\]\:font-medium[data-active="true"] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
    color: var(--sidebar-accent-foreground);
  }

  .data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none;
  }

  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5;
  }

  .data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
    pointer-events: none;
  }

  .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
    opacity: .5;
  }

  .data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
    --tw-enter-translate-x: calc(52*var(--spacing));
  }

  .data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
    --tw-enter-translate-x: calc(52*var(--spacing)*-1);
  }

  .data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
    --tw-exit-translate-x: calc(52*var(--spacing));
  }

  .data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
    --tw-exit-translate-x: calc(52*var(--spacing)*-1);
  }

  .data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
    --tw-enter-opacity: 0;
  }

  .data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
    --tw-exit-opacity: 0;
  }

  .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
    height: 1px;
  }

  .data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
    width: 100%;
  }

  .data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
    flex-direction: column;
  }

  .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    left: 0;
  }

  .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    height: var(--spacing);
  }

  .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    width: 100%;
  }

  .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]:after {
    content: var(--tw-content);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
    color: var(--muted-foreground);
  }

  .data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
    border-radius: calc(var(--radius) - 2px);
  }

  .data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
    background-color: var(--primary);
  }

  .data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
    color: var(--primary-foreground);
  }

  .data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
    border-radius: 0;
  }

  .data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
    background-color: var(--accent);
  }

  .data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
    color: var(--accent-foreground);
  }

  .data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
    border-radius: calc(var(--radius) - 2px);
  }

  .data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
    background-color: var(--primary);
  }

  .data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
    color: var(--primary-foreground);
  }

  .data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
    background-color: var(--primary);
  }

  .data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
    color: var(--primary-foreground);
  }

  .data-\[selected\=true\]\:rounded-none[data-selected="true"] {
    border-radius: 0;
  }

  .data-\[selected\=true\]\:bg-accent[data-selected="true"] {
    background-color: var(--accent);
  }

  .data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
    color: var(--accent-foreground);
  }

  .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
    --tw-translate-y: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
    --tw-enter-translate-y: calc(2*var(--spacing)*-1);
  }

  .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
    --tw-enter-translate-x: calc(2*var(--spacing));
  }

  .data-\[side\=right\]\:translate-x-1[data-side="right"] {
    --tw-translate-x: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
    --tw-enter-translate-x: calc(2*var(--spacing)*-1);
  }

  .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
    --tw-enter-translate-y: calc(2*var(--spacing));
  }

  .data-\[state\=active\]\:bg-background[data-state="active"] {
    background-color: var(--background);
  }

  .data-\[state\=active\]\:text-foreground[data-state="active"] {
    color: var(--foreground);
  }

  .data-\[state\=active\]\:shadow[data-state="active"] {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
    background-color: var(--primary);
  }

  .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
    color: var(--primary-foreground);
  }

  .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
    animation: accordion-up var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
    --tw-exit-opacity: 0;
  }

  .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
    --tw-exit-scale: .95;
  }

  .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
    --tw-exit-translate-y: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
    --tw-exit-translate-x: -100%;
  }

  .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
    --tw-exit-translate-x: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
    --tw-exit-translate-y: -100%;
  }

  .data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
    --tw-exit-opacity: 0;
  }

  .data-\[state\=on\]\:bg-accent[data-state="on"] {
    background-color: var(--accent);
  }

  .data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
    color: var(--accent-foreground);
  }

  .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
    animation: accordion-down var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=open\]\:animate-in[data-state="open"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=open\]\:bg-accent[data-state="open"] {
    background-color: var(--accent);
  }

  .data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
    background-color: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
    }
  }

  .data-\[state\=open\]\:bg-secondary[data-state="open"] {
    background-color: var(--secondary);
  }

  .data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
    color: var(--accent-foreground);
  }

  .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
    color: var(--muted-foreground);
  }

  .data-\[state\=open\]\:opacity-100[data-state="open"] {
    opacity: 1;
  }

  .data-\[state\=open\]\:duration-500[data-state="open"] {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
    --tw-enter-opacity: 0;
  }

  .data-\[state\=open\]\:zoom-in-90[data-state="open"] {
    --tw-enter-scale: .9;
  }

  .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
    --tw-enter-scale: .95;
  }

  .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
    --tw-enter-translate-x: -100%;
  }

  .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
    --tw-enter-translate-x: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
    --tw-enter-translate-y: -100%;
  }

  @media (hover: hover) {
    .data-\[state\=open\]\:hover\:bg-accent[data-state="open"]:hover {
      background-color: var(--accent);
    }

    .data-\[state\=open\]\:hover\:bg-sidebar-accent[data-state="open"]:hover {
      background-color: var(--sidebar-accent);
    }

    .data-\[state\=open\]\:hover\:text-sidebar-accent-foreground[data-state="open"]:hover {
      color: var(--sidebar-accent-foreground);
    }
  }

  .data-\[state\=open\]\:focus\:bg-accent[data-state="open"]:focus {
    background-color: var(--accent);
  }

  .data-\[state\=selected\]\:bg-muted[data-state="selected"] {
    background-color: var(--muted);
  }

  .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
    background-color: var(--input);
  }

  .data-\[state\=visible\]\:animate-in[data-state="visible"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=visible\]\:fade-in[data-state="visible"] {
    --tw-enter-opacity: 0;
  }

  @media (width >= 40rem) {
    .sm\:mt-0 {
      margin-top: 0;
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:h-36 {
      height: calc(var(--spacing) * 36);
    }

    .sm\:min-h-32 {
      min-height: calc(var(--spacing) * 32);
    }

    .sm\:max-w-sm {
      max-width: var(--container-sm);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

    .sm\:justify-end {
      justify-content: flex-end;
    }

    .sm\:gap-2\.5 {
      gap: calc(var(--spacing) * 2.5);
    }

    :where(.sm\:space-x-2 > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }

    .sm\:rounded-lg {
      border-radius: var(--radius);
    }

    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .sm\:text-left {
      text-align: left;
    }

    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .sm\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .sm\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .sm\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }

  @media (width >= 48rem) {
    .md\:absolute {
      position: absolute;
    }

    .md\:relative {
      position: relative;
    }

    .md\:inset-auto {
      inset: auto;
    }

    .md\:right-8 {
      right: calc(var(--spacing) * 8);
    }

    .md\:bottom-auto {
      bottom: auto;
    }

    .md\:left-8 {
      left: calc(var(--spacing) * 8);
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:h-\[580px\] {
      height: 580px;
    }

    .md\:min-h-\[760px\] {
      min-height: 760px;
    }

    .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
      width: var(--radix-navigation-menu-viewport-width);
    }

    .md\:w-auto {
      width: auto;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-\[1\.4fr_1fr_1fr\] {
      grid-template-columns: 1.4fr 1fr 1fr;
    }

    .md\:grid-cols-\[minmax\(0\,\.8fr\)_minmax\(420px\,1\.2fr\)\] {
      grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:pt-16 {
      padding-top: calc(var(--spacing) * 16);
    }

    .md\:pb-32 {
      padding-bottom: calc(var(--spacing) * 32);
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .md\:opacity-0 {
      opacity: 0;
    }

    .md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant="inset"] ~ *) {
      margin: calc(var(--spacing) * 2);
    }

    .md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant="inset"] ~ *) {
      margin-left: 0;
    }

    .md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant="inset"] ~ *) {
      border-radius: calc(var(--radius) + 4px);
    }

    .md\:peer-data-\[variant\=inset\]\:shadow:is(:where(.peer)[data-variant="inset"] ~ *) {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2:is(:where(.peer)[data-state="collapsed"] ~ *):is(:where(.peer)[data-variant="inset"] ~ *) {
      margin-left: calc(var(--spacing) * 2);
    }
  }

  .after\:md\:hidden:after {
    content: var(--tw-content);
  }

  @media (width >= 48rem) {
    .after\:md\:hidden:after {
      display: none;
    }
  }

  @media (width >= 64rem) {
    .lg\:right-auto {
      right: auto;
    }

    .lg\:left-\[max\(2rem\,calc\(\(100\%-1440px\)\/2\)\)\] {
      left: max(2rem, 50% - 720px);
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:min-h-\[840px\] {
      min-height: 840px;
    }

    .lg\:w-\[58\%\] {
      width: 58%;
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[\.9fr_1\.1fr\] {
      grid-template-columns: .9fr 1.1fr;
    }

    .lg\:grid-cols-\[1\.3fr_repeat\(4\,minmax\(0\,1fr\)\)\] {
      grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[1fr_auto\] {
      grid-template-columns: 1fr auto;
    }
  }

  @media (width >= 80rem) {
    .xl\:flex {
      display: flex;
    }

    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  .dark\:border-destructive:is(.dark *) {
    border-color: var(--destructive);
  }

  .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
    fill: var(--muted-foreground);
  }

  .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
    stroke: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
      stroke: color-mix(in oklab, var(--border) 50%, transparent);
    }
  }

  .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
    stroke: var(--border);
  }

  .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"] {
    stroke: #0000;
  }

  .\[\&_\.recharts-layer\]\:outline-none .recharts-layer {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke="#ccc"] {
    stroke: var(--border);
  }

  .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector, .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
    fill: var(--muted);
  }

  .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke="#ccc"] {
    stroke: var(--border);
  }

  .\[\&_\.recharts-sector\]\:outline-none .recharts-sector {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"] {
    stroke: #0000;
  }

  .\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
    color: var(--muted-foreground);
  }

  .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
    padding-top: 0;
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
    height: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
    width: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
    height: calc(var(--spacing) * 12);
  }

  .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
    padding-block: calc(var(--spacing) * 3);
  }

  .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
    height: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
    width: calc(var(--spacing) * 5);
  }

  .\[\&_p\]\:leading-relaxed p {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:size-4 svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_tr\]\:border-b tr {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected="true"] button {
    border-top-left-radius: calc(var(--radius) - 2px);
    border-bottom-left-radius: calc(var(--radius) - 2px);
  }

  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
    padding-right: 0;
  }

  :is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_next > svg), :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_previous > svg) {
    rotate: 180deg;
  }

  .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected="true"] button {
    border-top-right-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px);
  }

  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
    --tw-translate-y: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>button\]\:hidden > button {
    display: none;
  }

  .\[\&\>span\]\:line-clamp-1 > span {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\[\&\>span\]\:text-xs > span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\[\&\>span\]\:opacity-70 > span {
    opacity: .7;
  }

  .\[\&\>span\:last-child\]\:truncate > span:last-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\[\&\>svg\]\:absolute > svg {
    position: absolute;
  }

  .\[\&\>svg\]\:top-4 > svg {
    top: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:left-4 > svg {
    left: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:size-3\.5 > svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:size-4 > svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:h-2\.5 > svg {
    height: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:h-3 > svg {
    height: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:h-3\.5 > svg {
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:w-2\.5 > svg {
    width: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:w-3 > svg {
    width: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:w-3\.5 > svg {
    width: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:shrink-0 > svg {
    flex-shrink: 0;
  }

  .\[\&\>svg\]\:text-destructive > svg {
    color: var(--destructive);
  }

  .\[\&\>svg\]\:text-foreground > svg {
    color: var(--foreground);
  }

  .\[\&\>svg\]\:text-muted-foreground > svg {
    color: var(--muted-foreground);
  }

  .\[\&\>svg\]\:text-sidebar-accent-foreground > svg {
    color: var(--sidebar-accent-foreground);
  }

  .\[\&\>svg\+div\]\:translate-y-\[-3px\] > svg + div {
    --tw-translate-y: -3px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>svg\~\*\]\:pl-7 > svg ~ * {
    padding-left: calc(var(--spacing) * 7);
  }

  .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction="vertical"] > div {
    rotate: 90deg;
  }

  .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg {
    rotate: 180deg;
  }

  [data-side="left"] .\[\[data-side\=left\]_\&\]\:cursor-w-resize {
    cursor: w-resize;
  }

  [data-side="left"][data-collapsible="offcanvas"] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
    right: calc(var(--spacing) * -2);
  }

  [data-side="left"][data-state="collapsed"] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize, [data-side="right"] .\[\[data-side\=right\]_\&\]\:cursor-e-resize {
    cursor: e-resize;
  }

  [data-side="right"][data-collapsible="offcanvas"] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
    left: calc(var(--spacing) * -2);
  }

  [data-side="right"][data-state="collapsed"] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
    cursor: w-resize;
  }

  [data-slot="card-content"] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent, [data-slot="popover-content"] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
    background-color: #0000;
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

.cv-hero {
  isolation: isolate;
}

.cv-orbit__system {
  animation: 9s ease-in-out infinite cv-orbit-breath;
  position: absolute;
  inset: 0;
}

.cv-orbit__ring {
  border: 1px solid oklch(72% .14 228 / .34);
  border-radius: 50%;
  position: absolute;
  inset: 10% 6%;
}

.cv-orbit__ring--inner {
  border-color: oklch(72% .14 228 / .16);
  animation: 9s ease-in-out infinite reverse cv-orbit-breath;
  inset: 24% 20%;
}

.cv-orbit__mote {
  offset-path: ellipse(44% 40% at 50% 50%);
  offset-rotate: 0deg;
  background: oklch(88% .11 214);
  border-radius: 50%;
  width: .5rem;
  height: .5rem;
  animation: 17s linear infinite cv-orbit-travel;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 16px 5px oklch(72% .14 228 / .55);
}

.cv-orbit__core {
  background: radial-gradient(circle, oklch(72% .14 228 / .2) 0%, #0000 68%);
  border-radius: 50%;
  width: 18rem;
  height: 18rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cv-orbit__node {
  width: 0;
  height: 0;
  position: absolute;
}

.cv-orbit__node--1 {
  top: 33.1%;
  left: 10.1%;
}

.cv-orbit__node--2 {
  top: 75.7%;
  left: 16.3%;
}

.cv-orbit__node--3 {
  top: 70%;
  left: 88.1%;
}

.cv-orbit__node--4 {
  top: 24.3%;
  left: 83.7%;
}

.cv-orbit__dot {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: oklch(90% .09 218);
  background: oklch(20% .05 244 / .74);
  border: 1px solid oklch(80% .12 224 / .55);
  border-radius: 50%;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  animation: 3.4s ease-out infinite cv-orbit-pulse;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.cv-orbit__dot svg {
  width: 1.15rem;
  height: 1.15rem;
}

.cv-orbit__node--2 .cv-orbit__dot {
  animation-delay: -.85s;
}

.cv-orbit__node--3 .cv-orbit__dot {
  animation-delay: -1.7s;
}

.cv-orbit__node--4 .cv-orbit__dot {
  animation-delay: -2.55s;
}

.cv-orbit__label {
  text-shadow: 0 1px 16px oklch(8% .03 245 / .95), 0 0 4px oklch(8% .03 245 / .85);
  width: max-content;
  max-width: 14rem;
  position: absolute;
  top: 0;
  left: 1.75rem;
  transform: translateY(-50%);
}

.cv-orbit__node--3 .cv-orbit__label, .cv-orbit__node--4 .cv-orbit__label {
  text-align: right;
  left: auto;
  right: 1.75rem;
}

.cv-orbit__label strong {
  color: var(--hero-foreground);
  font-size: .78rem;
  font-weight: 650;
  display: block;
}

.cv-orbit__label small {
  color: var(--hero-muted);
  margin-top: .15rem;
  font-size: .63rem;
  display: block;
}

@keyframes cv-orbit-breath {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.018);
  }
}

@keyframes cv-orbit-travel {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

@keyframes cv-orbit-pulse {
  0% {
    box-shadow: 0 0 oklch(72% .14 228 / .45);
  }

  70% {
    box-shadow: 0 0 0 15px oklch(72% .14 228 / 0);
  }

  100% {
    box-shadow: 0 0 oklch(72% .14 228 / 0);
  }
}

.cv-b__photo {
  animation: 2.6s cubic-bezier(.16, 1, .3, 1) both cv-b-settle;
}

@keyframes cv-b-settle {
  from {
    transform: scale(1.055);
  }

  to {
    transform: scale(1);
  }
}

.cv-b__scrim {
  background: linear-gradient(oklch(10% .04 248 / .8) 0%, oklch(12% .045 248 / .44) 40%, oklch(10% .04 248 / .9) 100%);
  box-shadow: inset 0 0 220px 70px oklch(7% .03 245 / .62);
}

.cv-b__stage {
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 2.5rem;
  padding: 1rem 0 10.5rem;
  display: grid;
}

.cv-b__side {
  gap: 1.25rem;
  display: grid;
}

.cv-b__copy {
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.cv-b__copy h1 {
  font-size: clamp(2rem, 3.2vw, 3.5rem);
}

.cv-b__module {
  border-top: 1px solid var(--hero-line);
  gap: .85rem;
  padding-top: 1.05rem;
  display: flex;
}

.cv-b__icon {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--primary);
  flex: none;
}

.cv-b__module strong {
  color: var(--hero-foreground);
  font-size: .82rem;
  font-weight: 600;
  display: block;
}

.cv-b__module small {
  color: var(--hero-muted);
  margin-top: .28rem;
  font-size: .68rem;
  line-height: 1.5;
  display: block;
}

@media (width <= 1023px) {
  .cv-b__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-b__stage {
    padding-bottom: 6rem;
  }

  .cv-b__copy {
    order: -1;
  }
}

@media (width >= 1024px) {
  .cv-b__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
  }

  .cv-b__side {
    align-content: center;
    gap: 2.4rem;
  }

  .cv-b__module--r {
    text-align: right;
    flex-direction: row-reverse;
  }
}

.cv-console {
  place-items: center;
  display: grid;
}

.cv-console__panel {
  border: 1px solid var(--hero-line);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: oklch(20% .05 244 / .62);
  border-radius: 1rem;
  width: min(100%, 26rem);
  padding: 1.05rem 1.05rem .9rem;
  box-shadow: 0 34px 80px oklch(6% .03 245 / .5);
}

.cv-console__head {
  justify-content: space-between;
  align-items: center;
  padding: .1rem .25rem .8rem;
  display: flex;
}

.cv-console__brand {
  font-family: var(--font-display);
  color: var(--hero-foreground);
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
}

.cv-console__brand svg {
  color: var(--primary);
}

.cv-console__brand em {
  color: var(--primary);
  font-style: normal;
}

.cv-console__online {
  color: var(--hero-muted);
  align-items: center;
  gap: .4rem;
  font-size: .62rem;
  display: inline-flex;
}

.cv-console__online i {
  background: oklch(78% .16 165);
  border-radius: 50%;
  width: .42rem;
  height: .42rem;
  animation: 2.6s ease-out infinite cv-console-live;
}

.cv-console__dial {
  place-items: center;
  display: grid;
  position: relative;
}

.cv-console__gauge {
  width: 78%;
  height: auto;
}

.cv-console__track {
  fill: none;
  stroke: oklch(80% .08 230 / .2);
  stroke-width: 1.5px;
  stroke-linecap: round;
}

.cv-console__arc {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-dasharray: 168 258;
  filter: drop-shadow(0 0 6px oklch(72% .14 228 / .6));
}

.cv-console__readout {
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: .15rem;
  display: flex;
  position: absolute;
  bottom: .15rem;
  left: 0;
  right: 0;
}

.cv-console__readout strong {
  font-family: var(--font-display);
  color: var(--hero-foreground);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
}

.cv-console__readout em {
  color: var(--primary);
  margin-top: .4rem;
  font-size: .9rem;
  font-style: normal;
  font-weight: 600;
}

.cv-console__readout small {
  text-align: center;
  color: var(--hero-muted);
  flex-basis: 100%;
  margin-top: .25rem;
  font-size: .6rem;
}

.cv-console__rows {
  border-top: 1px solid var(--hero-line);
  margin-top: .9rem;
  display: grid;
}

.cv-console__row {
  border-bottom: 1px solid var(--hero-line);
  align-items: center;
  gap: .7rem;
  padding: .6rem .25rem;
  display: flex;
}

.cv-console__ico {
  border: 1px solid var(--hero-line);
  width: 2rem;
  height: 2rem;
  color: var(--primary);
  background: oklch(72% .14 228 / .12);
  border-radius: .5rem;
  flex: none;
  place-items: center;
  display: grid;
}

.cv-console__ico svg {
  width: 1rem;
  height: 1rem;
}

.cv-console__text {
  flex: 1;
  min-width: 0;
}

.cv-console__text strong {
  color: var(--hero-foreground);
  font-size: .76rem;
  font-weight: 600;
  display: block;
}

.cv-console__text small {
  color: var(--hero-muted);
  margin-top: .15rem;
  font-size: .62rem;
  display: block;
}

.cv-console__on {
  background: oklch(72% .14 228 / .35);
  border: 1px solid oklch(72% .14 228 / .45);
  border-radius: 999px;
  flex: none;
  width: 1.9rem;
  height: 1.05rem;
  position: relative;
}

.cv-console__on i {
  background: oklch(96% .02 230);
  border-radius: 50%;
  width: .65rem;
  height: .65rem;
  position: absolute;
  top: 50%;
  right: .14rem;
  transform: translateY(-50%);
  box-shadow: 0 0 8px oklch(72% .14 228 / .7);
}

@keyframes cv-console-live {
  0% {
    box-shadow: 0 0 oklch(78% .16 165 / .55);
  }

  70% {
    box-shadow: 0 0 0 7px oklch(78% .16 165 / 0);
  }

  100% {
    box-shadow: 0 0 oklch(78% .16 165 / 0);
  }
}

.cv-flow__svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.cv-flow__glow {
  fill: none;
  stroke: none;
  stroke-width: 10px;
  stroke-linecap: round;
}

.cv-flow__line {
  fill: none;
  stroke: oklch(84% .12 216 / .62);
  stroke-width: 1.15px;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
  animation: 3.2s linear infinite cv-flow-dash;
}

.cv-flow__mote {
  fill: oklch(96% .07 210);
  filter: drop-shadow(0 0 5px oklch(86% .12 214 / .9));
}

.cv-flow__source {
  width: 5.5rem;
  height: 5.5rem;
  box-shadow: none;
  background: none;
  border-radius: 50%;
  position: absolute;
  top: 26%;
  left: 68%;
  transform: translate(-50%, -50%);
}

.cv-flow__label {
  text-shadow: 0 1px 16px oklch(8% .03 245 / .95), 0 0 4px oklch(8% .03 245 / .85);
  align-items: center;
  gap: .6rem;
  max-width: 14rem;
  display: flex;
  position: absolute;
}

.cv-flow__label--1 {
  top: 41%;
  left: 11%;
}

.cv-flow__label--2 {
  top: 70%;
  left: 19%;
}

.cv-flow__label--3 {
  top: 87%;
  left: 42%;
}

.cv-flow__label--4 {
  top: 84%;
  left: 72%;
}

.cv-flow__node {
  background: oklch(90% .1 214);
  border-radius: 50%;
  flex: none;
  width: .55rem;
  height: .55rem;
  box-shadow: 0 0 0 4px oklch(72% .14 228 / .22), 0 0 16px oklch(80% .14 220 / .8);
}

.cv-flow__text strong {
  letter-spacing: -.01em;
  color: var(--hero-foreground);
  font-size: .9rem;
  font-weight: 650;
  display: block;
}

.cv-flow__text small {
  color: var(--hero-muted);
  margin-top: .2rem;
  font-size: .72rem;
  line-height: 1.35;
  display: block;
}

@keyframes cv-flow-dash {
  to {
    stroke-dashoffset: -26px;
  }
}

@media (width <= 767px) {
  .cv-orbit__system {
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    gap: .5rem;
    height: 100%;
    padding-bottom: 1.5rem;
    animation: none;
    display: grid;
    position: static;
  }

  .cv-orbit__ring {
    border-color: oklch(72% .14 228 / .2);
    inset: 6% 8%;
  }

  .cv-orbit__ring--inner {
    display: none;
  }

  .cv-orbit__core {
    opacity: .7;
    width: 14rem;
    height: 14rem;
  }

  .cv-orbit__node {
    align-items: flex-start;
    gap: .6rem;
    width: auto;
    height: auto;
    display: flex;
    position: static;
  }

  .cv-orbit__dot {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    width: 2.2rem;
    height: 2.2rem;
    position: static;
    transform: none;
  }

  .cv-orbit__node .cv-orbit__label {
    text-align: left;
    width: auto;
    max-width: none;
    position: static;
    left: auto;
    right: auto;
    transform: none;
  }

  .cv-orbit__dot {
    animation-duration: 3.4s;
  }

  .cv-flow {
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    gap: .5rem;
    padding-bottom: 1.5rem;
    display: grid;
  }

  .cv-flow__svg, .cv-flow__source {
    display: none;
  }

  .cv-flow__label {
    max-width: none;
    position: static;
  }

  .cv-flow__node {
    width: .9rem;
    height: .9rem;
  }

  .cv-console {
    place-items: end center;
    padding-bottom: 1.5rem;
  }

  .cv-console__panel {
    border-radius: .85rem;
    grid-template-columns: 34% minmax(0, 1fr);
    grid-template-areas: "head head"
                         "dial rows";
    column-gap: .7rem;
    width: 100%;
    padding: .7rem .8rem .6rem;
    display: grid;
  }

  .cv-console__head {
    grid-area: head;
    padding: 0 .15rem .5rem;
  }

  .cv-console__dial {
    grid-area: dial;
    align-self: center;
  }

  .cv-console__gauge {
    width: 100%;
  }

  .cv-console__readout {
    bottom: 0;
  }

  .cv-console__readout strong {
    font-size: 1.9rem;
  }

  .cv-console__readout em {
    margin-top: .25rem;
    font-size: .7rem;
  }

  .cv-console__readout small {
    display: none;
  }

  .cv-console__rows {
    border-top: 0;
    grid-area: rows;
    align-content: center;
    margin-top: 0;
  }

  .cv-console__row {
    gap: .5rem;
    padding: .34rem .1rem;
  }

  .cv-console__row:first-child {
    border-top: 1px solid var(--hero-line);
  }

  .cv-console__ico {
    width: 1.6rem;
    height: 1.6rem;
  }

  .cv-console__ico svg {
    width: .85rem;
    height: .85rem;
  }

  .cv-console__text strong {
    font-size: .72rem;
  }

  .cv-console__text small {
    display: none;
  }

  .cv-console__on {
    width: 1.6rem;
    height: .9rem;
  }

  .cv-console__on i {
    width: .55rem;
    height: .55rem;
  }
}

.cv-cat-card {
  background: var(--catalog-card);
  box-shadow: 0 0 0 1px var(--catalog-card-border), 0 2px 10px oklch(32% .02 70 / .09);
  border-radius: 16px;
  transition: transform .35s;
  display: block;
  overflow: hidden;
}

.cv-cat-card:hover {
  transform: translateY(-4px);
}

.cv-cat-card img {
  width: 100%;
  height: auto;
  display: block;
}

.cv-cat-section {
  background: var(--catalog);
}

:is(.cc-page,.cc-header,.cc-footer) {
  --radius: .5rem;
  --background: oklch(98.5% .004 238);
  --foreground: oklch(19% .045 248);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(12.9% .042 264.695);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(12.9% .042 264.695);
  --primary: oklch(70% .155 230);
  --primary-foreground: oklch(99% .003 240);
  --secondary: oklch(96.8% .007 247.896);
  --secondary-foreground: oklch(20.8% .042 265.755);
  --muted: oklch(96.8% .007 247.896);
  --muted-foreground: oklch(55.4% .046 257.417);
  --accent: oklch(95% .025 232);
  --accent-foreground: oklch(20.8% .042 265.755);
  --destructive: oklch(57.7% .245 27.325);
  --destructive-foreground: oklch(98.4% .003 247.858);
  --border: oklch(92.9% .013 255.508);
  --input: oklch(92.9% .013 255.508);
  --ring: oklch(70% .155 230);
  --hero: oklch(16% .045 248);
  --hero-foreground: oklch(98% .005 235);
  --hero-muted: oklch(81% .03 235);
  --hero-line: oklch(80% .08 230 / .2);
  --hero-glass: oklch(35% .06 240 / .28);
  --hero-glass-strong: oklch(40% .08 235 / .48);
  --catalog: oklch(96.5% .008 235);
  --catalog-card: oklch(95.2% .0052 76);
  --catalog-card-border: oklch(88.5% .01 72);
  --success: oklch(53% .14 155);
  --shadow-accent: 0 12px 34px oklch(70% .155 230 / .25);
  --shadow-card: 0 14px 40px oklch(20% .04 245 / .09);
  --chart-1: oklch(64.6% .222 41.116);
  --chart-2: oklch(60% .118 184.704);
  --chart-3: oklch(39.8% .07 227.392);
  --chart-4: oklch(82.8% .189 84.429);
  --chart-5: oklch(76.9% .188 70.08);
  --sidebar: oklch(98.4% .003 247.858);
  --sidebar-foreground: oklch(12.9% .042 264.695);
  --sidebar-primary: oklch(20.8% .042 265.755);
  --sidebar-primary-foreground: oklch(98.4% .003 247.858);
  --sidebar-accent: oklch(96.8% .007 247.896);
  --sidebar-accent-foreground: oklch(20.8% .042 265.755);
  --sidebar-border: oklch(92.9% .013 255.508);
  --sidebar-ring: oklch(70.4% .04 256.788);
}

.dark {
  --background: oklch(12.9% .042 264.695);
  --foreground: oklch(98.4% .003 247.858);
  --card: oklch(20.8% .042 265.755);
  --card-foreground: oklch(98.4% .003 247.858);
  --popover: oklch(20.8% .042 265.755);
  --popover-foreground: oklch(98.4% .003 247.858);
  --primary: oklch(92.9% .013 255.508);
  --primary-foreground: oklch(20.8% .042 265.755);
  --secondary: oklch(27.9% .041 260.031);
  --secondary-foreground: oklch(98.4% .003 247.858);
  --muted: oklch(27.9% .041 260.031);
  --muted-foreground: oklch(70.4% .04 256.788);
  --accent: oklch(27.9% .041 260.031);
  --accent-foreground: oklch(98.4% .003 247.858);
  --destructive: oklch(70.4% .191 22.216);
  --destructive-foreground: oklch(98.4% .003 247.858);
  --border: oklch(100% 0 0 / .1);
  --input: oklch(100% 0 0 / .15);
  --ring: oklch(55.1% .027 264.364);
  --chart-1: oklch(48.8% .243 264.376);
  --chart-2: oklch(69.6% .17 162.48);
  --chart-3: oklch(76.9% .188 70.08);
  --chart-4: oklch(62.7% .265 303.9);
  --chart-5: oklch(64.5% .246 16.439);
  --sidebar: oklch(20.8% .042 265.755);
  --sidebar-foreground: oklch(98.4% .003 247.858);
  --sidebar-primary: oklch(48.8% .243 264.376);
  --sidebar-primary-foreground: oklch(98.4% .003 247.858);
  --sidebar-accent: oklch(27.9% .041 260.031);
  --sidebar-accent-foreground: oklch(98.4% .003 247.858);
  --sidebar-border: oklch(100% 0 0 / .1);
  --sidebar-ring: oklch(55.1% .027 264.364);
}

:is(.cc-app,.cc-header,.cc-footer) h2 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.3vw, 2.8rem);
  font-weight: 600;
  line-height: 1.16;
}

.section-heading {
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  display: flex;
}

.section-heading h2 {
  margin-top: .75rem;
}

.section-link {
  color: var(--primary);
  flex-shrink: 0;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  display: inline-flex;
}

.hero-ring {
  animation: 7s ease-in-out infinite ring-float;
  transform: rotate(-8deg);
  box-shadow: 0 0 80px oklch(70% .155 230 / .2);
}

.hero-pill {
  border: 1px solid var(--hero-line);
  background: var(--hero-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: .6rem;
  align-items: center;
  gap: .75rem;
  min-width: 132px;
  padding: .75rem 1rem;
  animation: 5s ease-in-out infinite pill-float;
  display: flex;
  box-shadow: 0 14px 34px oklch(8% .03 245 / .3);
}

.hero-pill:nth-child(2n) {
  animation-delay: -2.5s;
}

.hero-pill svg {
  width: 1.35rem;
  height: 1.35rem;
}

.hero-pill strong, .hero-pill small {
  display: block;
}

.hero-pill strong {
  color: var(--hero-foreground);
  font-size: .8rem;
}

.hero-pill small {
  color: var(--hero-muted);
  margin-top: .15rem;
  font-size: .6rem;
}

.category-card, .cc-product-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: .55rem;
  transition: transform .35s, box-shadow .35s, border-color .35s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px oklch(20% .04 245 / .04);
}

.category-card:hover, .cc-product-card:hover {
  box-shadow: var(--shadow-card);
  border-color: oklch(70% .155 230 / .35);
  transform: translateY(-5px);
}

.category-image, .product-image {
  background-color: var(--catalog);
  background-repeat: no-repeat;
  transition: transform .5s;
}

.category-image {
  background-size: 310%;
}

.product-image {
  background-size: 245%;
}

.category-card:hover .category-image, .cc-product-card:hover .product-image {
  transform: scale(1.035);
}

.favorite {
  z-index: 2;
  border: 1px solid var(--border);
  width: 2.5rem;
  height: 2.5rem;
  color: var(--foreground);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: oklch(100% 0 0 / .86);
  border-radius: 999px;
  place-items: center;
  display: grid;
  position: absolute;
  top: .75rem;
  right: .75rem;
}

.tech-grid {
  border: 1px solid var(--hero-line);
  background: var(--hero-line);
  border-radius: .6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.tech-item {
  background: oklch(18% .048 245);
  min-height: 210px;
  padding: 1.5rem;
}

.tech-item h3 {
  margin-top: 2.5rem;
  font-weight: 650;
}

.tech-item p {
  color: var(--hero-muted);
  margin-top: .6rem;
  font-size: .78rem;
  line-height: 1.65;
}

.service-item {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.service-item span {
  font-family: var(--font-display);
  color: var(--primary);
  font-size: .7rem;
}

.service-item h3 {
  margin-top: 2.5rem;
  font-weight: 700;
}

.service-item p {
  color: var(--muted-foreground);
  margin-top: .75rem;
  font-size: .82rem;
  line-height: 1.7;
}

@keyframes pill-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes ring-float {
  0%, 100% {
    transform: rotate(-8deg) scale(1);
  }

  50% {
    transform: rotate(-5deg) scale(1.025);
  }
}

@media (width <= 767px) {
  .bg-hero-overlay {
    background: linear-gradient(oklch(12% .045 248 / .94) 0%, oklch(12% .045 248 / .78) 50%, oklch(10% .04 248 / .48) 100%);
  }

  .hero-section > img {
    object-position: 38% top;
  }

  .hero-pill {
    min-width: 106px;
    padding: .55rem .7rem;
  }

  .hero-pill small {
    display: none;
  }

  .section-heading {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
  }
}

@media (width >= 1024px) and (width <= 1439px) {
  .bg-hero-overlay {
    background: linear-gradient(90deg, oklch(12% .045 248 / .96) 0%, oklch(13% .045 248 / .88) 36%, oklch(13% .045 248 / 0) 49%);
  }
}

@media (width >= 1024px) {
  .hero-section > img {
    object-position: 92% top;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@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));
    filter: blur(var(--tw-enter-blur, 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));
    filter: blur(var(--tw-exit-blur, 0));
  }
}

@keyframes accordion-down {
  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))));
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))));
  }

  to {
    height: 0;
  }
}

@keyframes caret-blink {
  0%, 70%, 100% {
    opacity: 1;
  }

  20%, 50% {
    opacity: 0;
  }
}

/* ==========================================================================
 * CITYCOND port — мост между старым assets/citycond/css/app.css и дизайном.
 *
 * Preflight дизайна вырезан выше: он глобальный и сломал бы непортированные
 * страницы. Обязательная его часть повторена в @layer base и только внутри
 * .cc-page / .cc-header / .cc-footer — слоёные правила проигрывают утилитам,
 * поэтому mt-6, size-5 и прочие классы разметки продолжают работать.
 *
 * Ниже @layer base — правила ВНЕ слоёв: app.css не слоёный, и перебить его
 * элементные правила (h1, h2, footer) можно только так. Следствие: внутри
 * .cc-app размер и шрифт h1/h2 задаются ЭТИМИ правилами, а не text-* утилитами.
 * ========================================================================== */

@layer base {
  /* Preflight Tailwind, повторённый для портированного скоупа. Без него
     <p> берёт margin:1em 0 из UA (eyebrow уезжал на 10px вниз), а у элементов
     с border-width из дизайна style остаётся none и рамка пропадает совсем
     (preflight задаёт `border:0 solid`, дизайн потом ставит только width).
     Слой base — значит утилиты (mt-6, p-0, size-4) по-прежнему сильнее.
     Скоуп .cc-page/.cc-header/.cc-footer, а не весь <main>: непортированные
     страницы (каталог, PDP, корзина) живут на старом app.css. */
  :is(.cc-page,.cc-header,.cc-footer) *,
  :is(.cc-page,.cc-header,.cc-footer) ::before,
  :is(.cc-page,.cc-header,.cc-footer) ::after { margin: 0; padding: 0; border: 0 solid; }
  :is(.cc-page,.cc-header,.cc-footer) :is(img,svg,video) { display: block; vertical-align: middle; }
  :is(.cc-page,.cc-header,.cc-footer) img { max-width: 100%; height: auto; }
  :is(.cc-page,.cc-header,.cc-footer) :is(ul,ol) { list-style: none; }
  /* preflight Tailwind h1..h6{font-size:inherit;font-weight:inherit} — без него h3 брал
     UA 1.17em (18.72/28.08px вместо 16/24) и карточки/секции вырастали на 4-16px.
     Слой base: утилиты (text-lg, font-semibold) и правила app.css по-прежнему сильнее. */
  :is(.cc-page,.cc-header,.cc-footer) :is(h1,h2,h3,h4,h5,h6) { font-size: inherit; font-weight: inherit; }
  :is(.cc-page,.cc-header,.cc-footer) button { background-color: transparent; background-image: none; }
  :is(.cc-page,.cc-header,.cc-footer) :is(button,input,select,textarea) { font: inherit; color: inherit; }
}

/* базовое вместо body{} дизайна + html{line-height:1.5} из вырезанного preflight:
   без него весь контент наследовал line-height:normal старого app.css и тексты
   дизайна (eyebrow, подписи .cv-flow__label) были ниже/короче на 4-5px.
   Шрифт/интерлиньяж — на портированный скоуп, а не на весь <main>: страницы,
   которых порт ещё не коснулся, остаются на типографике app.css. */
.cc-page, .cc-header, .cc-footer { font-family: var(--font-sans); letter-spacing: 0; line-height: 1.5; }
/* 5rem = h-20: абсолютная шапка перекрывает контент, поэтому <main> держит её
   высоту сверху. Главная снимает этот отступ сама (.cv-hero — класс дизайна) —
   hero начинается от самого верха страницы, как в дизайне.
   ВАЖНО: хук — именно .cv-hero. Вариант .cc-hero не существует в разметке, и
   оба правила молча не работали: h1 получал h1{} из старого app.css (Onest 56px
   вместо Unbounded 34.4px), а hero не подтягивался под шапку. */
.cc-app { --background: oklch(98.5% .004 238); --foreground: oklch(19% .045 248); background-color: var(--background); color: var(--foreground); padding-top: 5rem; }
/* два токена выше — литералами: сам main.cc-app ВНЕ скоупа токенов (иначе они
   утекли бы в непортированные страницы, живущие в том же <main>). */
/* body дизайна (bg-background text-foreground). Токены скоуплены на .cc-page/.cc-header/
   .cc-footer, а <body> — их предок и вне скоупа, поэтому литералами. Иначе наследование
   шло из app.css: фон #f8fafc вместо #f8fbfc и текст #0b1728 вместо #021527 (шапка,
   которая своего color не задаёт, брала именно его). cc.css подключён ПОСЛЕ app.css —
   при равной специфичности выигрывает. */
body { background-color: oklch(98.5% .004 238); color: oklch(19% .045 248); }
.cv-hero { margin-top: -5rem; }

/* элементы, которые иначе перебивает старый app.css */
.cc-footer { background-color: var(--hero); color: var(--hero-muted); padding: 3rem 0; }
.cc-app h2, .cc-header h2, .cc-footer h2 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.3vw, 2.8rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0;
}
/* margin-утилиты на h1/h2. app.css неслойно задаёт h1,h2{margin:0}, а слой всегда
   проигрывает неслойному правилу — значит mt-5 у h2 дизайна (20px) обнулялся и секции
   недобирали ровно 20px (.professional 714 вместо 734, .section-dark на 768/390).
   Ниже — те же значения, что дают утилиты Tailwind (шаг 0.25rem), т.е. только h1/h2,
   h3-h6 не трогаем: их app.css не перебивает. Добавили новую mt-* на h1/h2 — добавь сюда. */
:is(.cc-page,.cc-header,.cc-footer) :is(h1,h2).mt-1 { margin-top: .25rem; }
:is(.cc-page,.cc-header,.cc-footer) :is(h1,h2).mt-3 { margin-top: .75rem; }
:is(.cc-page,.cc-header,.cc-footer) :is(h1,h2).mt-4 { margin-top: 1rem; }
:is(.cc-page,.cc-header,.cc-footer) :is(h1,h2).mt-5 { margin-top: 1.25rem; }
:is(.cc-page,.cc-header,.cc-footer) :is(h1,h2).mt-6 { margin-top: 1.5rem; }
:is(.cc-page,.cc-header,.cc-footer) :is(h1,h2).mt-8 { margin-top: 2rem; }

/* h1 внутренних страниц (каталог, PDP, корзина): утилиты font-display и
   text-[clamp(2.15rem,5vw,4.75rem)] перебивались НЕслойным h1{} из app.css (Onest
   clamp(56px,6vw,94px)) — на 390 это давало 56px и переполнение документа на 2px.
   Ставлю ДО .cv-hero h1: специфичность равна, значит на главной геройский цвет
   выигрывает по порядку, а margin/color героя сюда не протекают. */
h1.font-display {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 5vw, 4.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
}
.cv-hero h1 {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 5vw, 4.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--hero-foreground);
}

/* счётчик корзины: в дизайне его нет вовсе, у нас — бейдж с числом. Пустая корзина
   рисовала синюю «0» поверх иконки. Ноль не показываем, значение ведёт JS
   (counter.dataset.qty). Неслойно — иначе утилита grid на спане сильнее. */
[data-cart="qty-counter"][data-qty="0"] { display: none; }

/* кнопка-иконка: копия Button variant="glass" size="icon" из
   src/components/ui/button.tsx — 300 символов утилит в четырёх местах шапки
   читать невозможно, поэтому класс живёт здесь один раз */
.cc-glass-btn {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  min-height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hero-line);
  border-radius: var(--radius-md, .375rem);
  background-color: var(--hero-glass);
  color: var(--hero-foreground);
  backdrop-filter: blur(12px);
  transition: color .3s, background-color .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.cc-glass-btn:hover { border-color: oklch(.7 .155 230 / .7); background-color: var(--hero-glass-strong); }
.cc-glass-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* app.css: `a{color:inherit}` идёт ВНЕ слоёв — любая text-* утилита на самой
   ссылке ей проигрывает, и шапка/подвал получали цвет body вместо цвета дизайна
   (на тёмном hero это невидимый текст), а кнопки-ссылки hero и секций — цвет
   родителя вместо контрастного. Возвращаем силу ровно тем утилитам, которые
   дизайн вешает на <a>; остальные ссылки и так наследуют, как в дизайне.
   Button asChild в дизайне — это <a>, поэтому варианты primary/glass/hero/outline
   попадают сюда же. */
:is(.cc-app,.cc-header,.cc-footer) a.text-hero-foreground { color: var(--hero-foreground); }
:is(.cc-app,.cc-header,.cc-footer) a.text-hero-muted { color: var(--hero-muted); }
:is(.cc-app,.cc-header,.cc-footer) a.text-primary { color: var(--primary); }
:is(.cc-app,.cc-header,.cc-footer) a.text-primary-foreground { color: var(--primary-foreground); }
:is(.cc-app,.cc-header,.cc-footer) a.text-foreground { color: var(--foreground); }
.cc-header a.text-hero-muted:hover, .cc-footer a.text-hero-muted:hover { color: var(--hero-foreground); }

/* app.css: `button,input{font:inherit}` идёт ВНЕ слоёв — из-за этого ни одна
   text-* утилита на поле поиска не работает, placeholder рендерится 16px вместо
   12px и обрезается. Возвращаем шапке размеры дизайна его же токенами. */
.cc-header input { font-size: var(--text-xs); }
.cc-header .cc-panel input { font-size: var(--text-sm); }

/* мобильные панели шапки: <details name="cc-header-panel"> вместо React-состояния.
   `name` — нативный эксклюзивный аккордеон, поэтому вторая панель закрывается
   сама; CSS-взаимоисключение (:has) не нужно и, наоборот, прятало обе панели,
   пока открыт первый details. */
.cc-header summary { list-style: none; cursor: pointer; }
.cc-header summary::-webkit-details-marker { display: none; }
.cc-header .cc-panel { position: absolute; left: 0; right: 0; top: 100%; }
.cc-header details[open] > summary .cc-i-menu { display: none; }
.cc-header details:not([open]) > summary .cc-i-x { display: none; }

/* Кнопка «в корзину» в карточке товара — icon-only (Button size="icon").
   Скрипт корзины меняет у кнопки текст: у icon-only это стёрло бы саму иконку,
   поэтому состояние показываем классом и одной псевдо-галочкой вместо глифа. */
[data-cart-button="add"].is-added svg,
[data-cart-button="add"].is-error svg { display: none; }
[data-cart-button="add"].is-added::after { content: "✓"; font-size: var(--text-sm); }
[data-cart-button="add"].is-error::after { content: "!"; font-size: var(--text-sm); }
/* Button носит [&_svg]:shrink-0 — без него иконка в 44px кнопке сжимается в 0
   (px-5 из варианта primary в cc.css идёт после p-0 из size=icon и выигрывает). */
.cc-product-card [data-cart-button="add"] svg { flex-shrink: 0; }

/* ui.md: заголовок карточки товара — максимум 3 строки. В дизайне не было
   нужно (демо-модели в одну строку), реальные названия длиннее и без клампа
   дают рваную сетку. */
.cc-product-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* В прототипе «фото» товара — кроп общей картинки (background-size:245%). Реальные
   обложки — самостоятельные снимки, их надо вписывать целиком; утилиты
   object-contain в сборке нет (дизайн её не использует). */
.cc-product-card .product-image { object-fit: contain; }

/* Описание категории — реальный HTML из БД (абзацы, списки). Preflight дизайна
   обнуляет их отступы (иначе UA-шные margin:1em ломали вёрстку), поэтому
   промежутки между абзацами возвращаем явно. */
.cc-prose { max-width: 46rem; color: var(--muted-foreground); }
.cc-prose :is(p,ul,ol) { margin: 0 0 .85em; }
.cc-prose :is(p,ul,ol):last-child { margin-bottom: 0; }
.cc-prose ul { list-style: disc; padding-left: 1.25rem; }

/* Пагинация: Krystal PaginationWidget отдаёт <ul class="pagination"> с
   .page-item/.page-link (bootstrap-имена — в дизайне их нет, theme их никогда
   не подключала, поэтому листинг категории был без пагинации вовсе).
   Одеваем в токены дизайна; счётчик страниц — реальный $paginator. */
.cc-page .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cc-page .page-link {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, .375rem);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--foreground);
}
.cc-page .page-link:hover { border-color: var(--primary); color: var(--primary); }
.cc-page .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

/* Карточка товара (этап 4). Сборка идёт с source(none) и кладёт только те
   утилиты, что встречаются в исходниках Lovable: нужных PDP классов
   (lg:grid-cols-2, object-contain, text-3xl, gap-x-8, ...) там нет, поэтому
   раскладка описана здесь семантическими классами на тех же токенах. */
/* Верх PDP — 3 зоны: галерея / заголовок+цена+покупка / доставка.
   .cc-pdp и .cc-pdp-top делят один набор колонок (--cc-pdp-cols), поэтому
   блок характеристик (grid-column: 2/4) встаёт ровно под центральной зоной. */
.cc-pdp {
  --cc-pdp-cols: minmax(0, .85fr) minmax(0, 1.15fr) minmax(13rem, 1fr);
  display: grid; grid-template-columns: var(--cc-pdp-cols); gap: 2.5rem; margin-top: 2.5rem;
}
.cc-pdp-top { grid-column: 1 / -1; display: grid; grid-template-columns: var(--cc-pdp-cols); gap: 2.5rem; align-items: start; }
.cc-pdp-mid { display: flex; flex-direction: column; min-width: 0; }
.cc-pdp-buybox { margin-top: 1.5rem; }
.cc-pdp-side { min-width: 0; }
.cc-pdp-side .cc-buy-delivery { margin-top: 0; }
@media (min-width: 1280px) { .cc-pdp { --cc-pdp-cols: minmax(0, 1fr) minmax(0, 1fr) 20rem; } }
@media (max-width: 767px) {
  /* Порядок: галерея → заголовок/цена → доставка → количество/наличие/CTA →
     характеристики. .cc-pdp-mid растворяется, чтобы доставка встала между
     ценой и кнопкой, как в макете. */
  .cc-pdp, .cc-pdp-top { display: flex; flex-direction: column; gap: 1.5rem; }
  .cc-pdp-mid { display: contents; }
  .cc-pdp-gallery { order: 1; align-self: stretch; }
  .cc-pdp-head { order: 2; }
  .cc-pdp-side { order: 3; }
  .cc-pdp-buybox { order: 4; margin-top: 0; }
  .cc-pdp-specs { order: 5; }
}
/* Галерея: белая подложка, главное фото по размеру колонки (object-fit: contain,
   обрезки нет) и лента миниатюр под ним. Прокручивается только лента, поэтому
   горизонтального переполнения страницы не появляется. */
.cc-pdp-gallery {
  display: flex; flex-direction: column; gap: .5rem;
  min-width: 0; padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, .75rem);
  background-color: var(--card);
}
.cc-pdp-gallery__stage {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; max-height: 36rem; padding: 1rem;
  overflow: hidden;
  background-color: var(--card);
}
.cc-pdp-gallery__main {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; cursor: zoom-in;
}
.cc-pdp-gallery__empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 22rem;
}
.cc-pdp-thumbs {
  display: flex; gap: .5rem;
  min-width: 0; max-width: 100%; padding: .25rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
}
.cc-pdp-thumb {
  flex: 0 0 auto; width: 4.5rem; height: 4.5rem; padding: 2px;
  border: 2px solid transparent; border-radius: .5rem;
  background-color: var(--card); cursor: pointer;
  scroll-snap-align: start;
}
.cc-pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cc-pdp-thumb:hover { border-color: color-mix(in oklab, var(--primary) 45%, transparent); }
.cc-pdp-thumb.is-active { border-color: var(--primary); }
.cc-pdp-thumb:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
#cc-pdp-lightbox {
  display: none; position: fixed; inset: 0; z-index: 1090;
  background-color: oklch(19% .045 248 / .82);
}
#cc-pdp-lightbox.is-open { display: flex; align-items: center; justify-content: center; }
#cc-pdp-lightbox .cc-lb__img {
  max-width: 92vw; max-height: 86vh; object-fit: contain;
  border-radius: .5rem; background-color: var(--card);
}
#cc-pdp-lightbox button {
  position: absolute; width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background-color: var(--card); color: var(--foreground);
  font-size: 1.5rem; line-height: 1;
}
#cc-pdp-lightbox button:hover { background-color: var(--accent); }
#cc-pdp-lightbox .cc-lb__close { top: 1rem; right: 1rem; }
#cc-pdp-lightbox .cc-lb__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
#cc-pdp-lightbox .cc-lb__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.cc-pdp-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
}
.cc-pdp-price { font-family: var(--font-mono); font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; }
.cc-pdp-buy { margin-top: 1.5rem; height: 3rem; padding: 0 1.5rem; }
@media (max-width: 639px) { .cc-pdp-buy { width: 100%; } }
.cc-pdp-specs { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.cc-specs { display: grid; gap: .75rem 2rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .cc-specs { grid-template-columns: 1fr 1fr; } }
.cc-specs-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.cc-specs-row dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); }
.cc-specs-row dd { font-size: .875rem; font-weight: 500; text-align: right; }

.cc-tabs { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.cc-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem;
  border: 0; border-radius: var(--radius-md, .375rem);
  background: none; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 500;
  color: var(--muted-foreground);
  transition: background-color .2s ease, color .2s ease;
}
.cc-tab:hover { background-color: var(--secondary); color: var(--foreground); }
.cc-tab.active { background-color: var(--primary); color: var(--primary-foreground); }
.cc-tab .arrow { font-size: .625rem; }
.cc-tab-panel { display: none; padding-top: 2rem; }
.cc-tab-panel.open { display: block; }
.cc-tab-panel h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.cc-tab-panel h3 + * { margin-top: .75rem; }
.cc-tab-panel p { font-size: .875rem; line-height: 1.7; color: var(--muted-foreground); }
.cc-tab-panel :is(ul,ol) { margin-top: .75rem; font-size: .875rem; color: var(--muted-foreground); }
.cc-tab-panel li { padding: .25rem 0; }
.cc-tab-panel li + li { margin-top: .25rem; }

.cc-doc-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .cc-doc-grid { grid-template-columns: 1fr 1fr; } }
.cc-doc {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, .375rem);
  background-color: var(--secondary);
}
.cc-doc-icon { font-size: 1.25rem; line-height: 1; }
.cc-doc-body { flex: 1; min-width: 0; }
.cc-doc-title { overflow: hidden; font-size: .875rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cc-doc-kind { font-size: .75rem; color: var(--muted-foreground); }
.cc-doc-open { flex-shrink: 0; font-size: .75rem; font-weight: 600; color: var(--primary); white-space: nowrap; }

.cc-review { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg, .75rem); background-color: var(--secondary); }
.cc-review + .cc-review { margin-top: .75rem; }
.cc-review-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cc-review-head strong { font-size: .875rem; }
.cc-review p { margin-top: .5rem; font-size: .875rem; line-height: 1.7; color: var(--muted-foreground); }
.cc-stars { color: var(--primary); letter-spacing: .1em; font-size: .875rem; }
.cc-stars-lg { font-size: 1.5rem; }
.cc-rating .cc-stars { font-size: 1.125rem; }
.cc-rating { display: flex; align-items: center; gap: .75rem; }
.cc-rating strong { font-size: 1.125rem; font-weight: 600; }
.cc-empty {
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg, .75rem);
  text-align: center;
}
.cc-empty-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.cc-empty p { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }

/* ---------- Корзина / оформление заказа ---------- */
[hidden] { display: none !important; }   /* тема не грузит Bootstrap: прячем нативным атрибутом */
.cc-checkout-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 600; line-height: 1.1; }
.cc-checkout { display: grid; gap: 2.5rem; margin-top: 3rem; align-items: start; }
@media (min-width: 1024px) { .cc-checkout { grid-template-columns: minmax(0, 1fr) 22rem; } }
.cc-checkout-main { min-width: 0; }
.cc-step { display: flex; align-items: center; gap: .75rem; margin: 2rem 0 1rem; }
.cc-step:first-child { margin-top: 0; }
.cc-step-num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--radius-full, 999px); background-color: var(--primary); color: var(--primary-foreground); font-size: .8125rem; font-weight: 600; }
.cc-step-title { font-weight: 600; font-size: .9375rem; }
.cc-type-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.cc-type-btn { min-width: 8.5rem; min-height: 2.75rem; padding: .5rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--card); color: var(--foreground); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background-color .3s, border-color .3s, color .3s; }
.cc-type-btn:hover { border-color: var(--primary); color: var(--primary); }
.cc-type-btn.active { background-color: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.cc-pane { margin-top: 1rem; }
.cc-pane-body { padding-left: 3rem; }
@media (max-width: 640px) { .cc-pane-body { padding-left: 0; } }
.cc-field, .cc-select { display: block; width: 100%; min-height: 2.75rem; margin-bottom: .75rem; padding: .625rem .875rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--card); color: var(--foreground); font-size: .875rem; }
.cc-field:focus, .cc-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.cc-field::placeholder { color: var(--muted-foreground); }
.cc-label { display: block; margin-bottom: .375rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }
.cc-radio-group { margin-bottom: .75rem; }
.cc-radio-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .875rem; cursor: pointer; }
.cc-note { margin: .75rem 0; font-size: .75rem; line-height: 1.5; color: var(--muted-foreground); }
.cc-btn-ghost { width: 100%; min-height: 2.75rem; margin-top: .5rem; border: 1px dashed var(--border); border-radius: var(--radius); background-color: transparent; color: var(--primary); font-size: .875rem; font-weight: 600; cursor: pointer; }
.cc-btn-ghost:hover { border-color: var(--primary); }
.cc-pvz-result { margin-top: .75rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--muted); font-size: .8125rem; }
.cc-pvz-result:empty { display: none; }
.cc-order-card { padding: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--card); }
@media (min-width: 1024px) { .cc-order-card { position: sticky; top: 6rem; } }
.cc-order-title { margin-bottom: 1rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.cc-order-row { display: flex; justify-content: space-between; gap: 1rem; padding: .375rem 0; font-size: .875rem; }
.cc-order-row strong { white-space: nowrap; }
.cc-order-qty { display: block; font-size: .75rem; color: var(--muted-foreground); }
.cc-order-hint { margin: .75rem 0 1rem; font-size: .75rem; color: var(--muted-foreground); }
.cc-info-box { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--secondary); font-size: .8125rem; }
.cc-info-label { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.cc-order-row-sum { border-top: 1px solid var(--border); padding-top: .75rem; }
.cc-order-total { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-weight: 600; }
.cc-order-total strong { font-family: var(--font-mono); font-size: 1.5rem; }
.cc-submit { display: inline-flex; width: 100%; min-height: 3rem; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: var(--radius); background-color: var(--primary); color: var(--primary-foreground); font-size: .875rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-accent); transition: transform .3s, background-color .3s; }
.cc-submit:hover { transform: translateY(-2px); background-color: color-mix(in srgb, var(--primary) 90%, transparent); }
.cc-modal-card { width: 92%; max-width: 1100px; margin: 30px auto; border-radius: var(--radius); overflow: hidden; background-color: var(--card); }
.cc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.cc-modal-title { font-size: 1rem; font-weight: 600; }
.cc-modal-close { border: 0; background: none; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--foreground); }
@media (max-width: 576px) {
  #cdek-modal { padding: 8px; }
  #cdek-modal > div { width: 100% !important; max-width: none !important; max-height: calc(100vh - 16px); margin: 0 auto !important; overflow: auto !important; }
  #cdek-modal #cdek-map { height: calc(100vh - 118px) !important; min-height: 320px !important; }
  .cc-type-btn { min-width: 0; width: 100%; }
}

/* ---------- Страница заказа (order-info) ---------- */
.cc-page-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 600; line-height: 1.1; }
.cc-box { margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--card); }
.cc-box-title { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; }
.cc-order-hero { text-align: center; }
.cc-order-icon { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--radius-full, 999px); background-color: var(--secondary); color: var(--success); }
.cc-order-icon-sm { width: 2.75rem; height: 2.75rem; }
.cc-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.cc-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .375rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-full, 999px); background-color: var(--secondary); font-size: .75rem; }
.cc-chip-success { border-color: var(--success); color: var(--success); }
.cc-info-grid { display: grid; gap: 1rem 2rem; }
@media (min-width: 640px) { .cc-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-info-item { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.cc-info-value { font-size: .9375rem; overflow-wrap: anywhere; }
@media (min-width: 640px) { .cc-info-wide { grid-column: 1 / -1; } }
.cc-table-scroll { overflow-x: auto; }
.cc-items-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .875rem; }
.cc-items-table th { padding: .5rem .75rem; border-bottom: 1px solid var(--border); font-size: .6875rem; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }
.cc-items-table td { padding: .875rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cc-items-table tbody tr:last-child td { border-bottom: 0; }
.cc-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-item-cell { display: flex; align-items: center; gap: .75rem; min-width: 14rem; }
.cc-item-thumb { width: 3.75rem; height: 3.75rem; flex-shrink: 0; border-radius: var(--radius-sm, .375rem); background-color: var(--secondary); object-fit: contain; }
.cc-item-link { font-weight: 500; }
.cc-item-link:hover { color: var(--primary); }
.cc-total-badges { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.cc-total-badge { display: flex; flex-direction: column; gap: .25rem; padding: .875rem 1rem; border-radius: var(--radius); background-color: var(--secondary); }
.cc-total-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.cc-grand { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.cc-grand-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.cc-grand-amount { font-family: var(--font-mono); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; color: var(--primary); }
.cc-submit-inline { width: auto; padding: 0 1.5rem; text-decoration: none; }
.cc-manager { text-align: center; background-color: var(--secondary); }
.cc-manager-title { margin: .75rem 0 .5rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
/* Счёт на оплату (partials/invoice-details.phtml): классы разметки сохранены,
   оформление — токенами вместо хардкод-hex и градиентов из default-темы. */
.cc-invoice-title { margin-bottom: 1.25rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; text-align: center; }
.invoice-section-title { margin-bottom: .25rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.invoice-company-name { margin-bottom: .75rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.cc-invoice .row { display: grid; gap: .75rem; margin-top: .5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.invoice-req-item, .bank-row { padding: .625rem .875rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--card); }
.invoice-req-item { height: 100%; }
.req-label, .bank-label { display: block; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }
.req-value { display: block; font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
.invoice-hr { height: 1px; margin: 1.125rem 0; background-color: var(--border); }
.bank-details-grid { display: flex; flex-direction: column; gap: .375rem; margin-top: .5rem; }
.bank-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.bank-label { flex-shrink: 0; min-width: 6.25rem; }
.bank-value { font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
.invoice-document .font-monospace, .bank-value.font-monospace { font-family: var(--font-mono); }
.invoice-amount-block { margin-top: .5rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--secondary); }
.cc-inv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .2rem 0; font-size: .9375rem; }
.cc-inv-row-total { align-items: center; }
.cc-inv-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }
.invoice-amount-value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--primary); }
.invoice-footer-note { margin-top: 1rem; padding: .625rem .875rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--card); font-size: .8125rem; color: var(--muted-foreground); }
/* Избранное (favorites.php, сайт citycond): разметка и JS прежние, оформление —
   токенами дизайна. Градиентный блик прототипа (.favorite-card-glow) не переносим. */
.cc-page .favorites-container { max-width: 80rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1rem 4rem; }
.cc-page .favorites-title { margin-bottom: 2rem; font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 600; line-height: 1.1; }
.cc-page .favorites-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cc-page .favorites-empty { padding: 4rem 0; text-align: center; font-size: 1rem; color: var(--muted-foreground); }
.cc-page .favorite-card { position: relative; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--card); box-shadow: var(--shadow-card); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.cc-page .favorite-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.cc-page .favorite-card-glow { display: none; }
.cc-page .favorite-image-wrap { display: flex; align-items: center; justify-content: center; min-height: 12rem; padding: .5rem; border-radius: var(--radius); background-color: var(--muted); }
.cc-page .favorite-image-link { display: flex; align-items: center; justify-content: center; width: 100%; }
.cc-page .favorite-product-image { max-height: 11rem; width: 100%; object-fit: contain; }
.cc-page .favorite-title-wrap { min-height: 3rem; margin-top: 1rem; }
.cc-page .favorite-product-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .9375rem; font-weight: 600; line-height: 1.45; color: var(--foreground); }
.cc-page .favorite-product-title:hover { color: var(--primary); }
.cc-page .favorite-price-block { margin-top: auto; }
.cc-page .favorite-price-label { font-size: .75rem; color: var(--muted-foreground); }
.cc-page .favorite-price-value { margin-top: .25rem; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--primary); }
.cc-page .favorite-actions-row { margin-top: .875rem; }
.cc-page .favorite-btn-remove { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--secondary); color: var(--foreground); font-size: .875rem; font-weight: 600; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.cc-page .favorite-btn-remove:hover { border-color: var(--primary); color: var(--primary); }
/* Быстрый заказ (fast-order.php, сайт citycond): разметка, поля и JS прежние,
   оформление — токенами дизайна. bootstrap.min.css на этой странице не
   подключается, механика модального окна добавлена выше. */
/* ── fast-order: механика модального окна (замена bootstrap.min.css) ── */
.fo-page { padding: 24px 16px; }
.fo-page .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1055; overflow-x: hidden; overflow-y: auto; outline: 0; }
.fo-page .modal.show { display: block; }
.fo-page .modal-dialog { position: relative; width: auto; margin: .5rem; pointer-events: none; }
.fo-page .modal.fade .modal-dialog { transition: transform .3s ease-out; transform: translate(0, -50px); }
.fo-page .modal.show .modal-dialog { transform: none; }
.fo-page .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }
.fo-page .modal-xl { max-width: 1140px; }
@media (min-width: 576px) { .fo-page .modal-dialog { max-width: 500px; margin: 1.75rem auto; } .fo-page .modal-xl { max-width: 1140px; } }
.fo-page .modal-content { display: flex; flex-direction: column; width: 100%; pointer-events: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.fo-page .modal-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.fo-page .modal-title { margin: 0; line-height: 1.5; }
.fo-page .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }
.fo-page .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: .25em; border: 0; border-radius: .25rem; opacity: .5; cursor: pointer; background-color: var(--foreground); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center / 1em auto no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center / 1em auto no-repeat; }
.fo-page .btn-close:hover { opacity: .8; }
.fo-page .fw-bold { font-weight: 700; }
.fo-page .p-0 { padding: 0; }
.fo-page .border-bottom-0 { border-bottom: 0; }
.fo-page .fade { transition: opacity .15s linear; }
.fo-page .fade:not(.show) { opacity: 0; }
/* Подложку модального окна bootstrap дописывает в <body> — вне .cc-page, где
   определены токены. Даём ей собственный токен (тот же --foreground с альфой). */
body { --cc-scrim: oklch(19% .045 248 / .5); }
.modal-backdrop { position: fixed; inset: 0; z-index: 1050; background-color: var(--cc-scrim); }
body.modal-open { overflow: hidden; }
@media (max-width: 480px) { .fo-page { padding: 12px 8px; } }
.fo-page .wrap {
            max-width: 540px;
            margin: 0 auto;
            background: var(--card);
            border-radius: 16px;
            padding: 32px 28px;
            box-shadow: var(--shadow-card);
        }
        @media (max-width: 480px) {.fo-page .wrap { padding: 20px 16px; border-radius: 16px; }

        }.fo-page h1 {
            margin: 0 0 4px;
            font-size: 22px;
            font-weight: 700;
            letter-spacing: -.3px;
            color: var(--foreground);
        }.fo-page .product-line {
            background: var(--card);
            border: 1px solid var(--border);
            padding: 14px 16px;
            border-radius: 16px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
            color: var(--foreground);
        }.fo-page .product-image-wrap {
            text-align: center;
            background: var(--card);
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 16px 16px;
            margin-bottom: 16px;
            padding: 12px 8px;
            line-height: 0;
        }.fo-page .product-image-wrap img {
            max-width: 85%;
            max-height: 180px;
            border-radius: 8px;
            object-fit: contain;
            width: auto;
        }.fo-page .product-line:has(+ .product-image-wrap) {
            border-radius: 16px 16px 0 0;
            margin-bottom: 0;
        }.fo-page .trust-bar {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-bottom: 0;
            margin-top: 20px;
            flex-wrap: wrap;
        }.fo-page .trust-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--foreground);
            background: var(--accent);
            padding: 10px 20px;
            border-radius: 16px;
            font-weight: 500;
            border: 1px solid var(--border);
            transition: all .2s ease;
            line-height: 1.3;
        }.fo-page .trust-item:hover {
            background: var(--accent);
            border-color: var(--primary);
            color: var(--foreground);
        }.fo-page .trust-item:first-child { border-left: 3px solid var(--primary); }.fo-page .trust-item:last-child { border-left: 3px solid var(--primary); }.fo-page .trust-bar::after {
            content: '🔒 Безопасная оплата';
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--foreground);
            background: var(--accent);
            padding: 10px 20px;
            border-radius: 16px;
            font-weight: 500;
            border: 1px solid var(--border);
            border-left: 3px solid var(--primary);
            transition: all .2s ease;
            line-height: 1.3;
        }.fo-page .trust-bar:hover::after {
            background: var(--accent);
            border-color: var(--primary);
            color: var(--foreground);
        }.fo-page .field { margin-bottom: 16px; }.fo-page .field label {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 5px;
            font-weight: 600;
            font-size: 13px;
            color: var(--foreground);
        }.fo-page .field label[for="phone"]::before, .fo-page .field label[for="address"]::before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }.fo-page .field label[for="phone"]::before {
    background-color: var(--primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}.fo-page .field label[for="email"]::before {
    background-color: var(--primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}.fo-page .field label[for="address"]::before {
    background-color: var(--primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}.fo-page .field input, .fo-page .field select, .fo-page .field textarea {
            width: 100%;
            height: 46px;
            padding: 0 14px;
            border: 2px solid var(--border);
            border-radius: 10px;
            box-sizing: border-box;
            font-size: 14px;
            font-family: inherit;
            background: var(--card);
            transition: border-color .2s ease, box-shadow .2s ease;
            color: var(--foreground);

        }.fo-page .field input::placeholder, .fo-page .field textarea::placeholder {
            color: var(--muted-foreground);
            font-weight: 500;
        }.fo-page .field input:focus, .fo-page .field select:focus, .fo-page .field textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 22%, transparent);
        }.fo-page .field textarea { height: 80px; padding-top: 12px; resize: vertical; }.fo-page .type-buttons { display: flex; gap: 10px; }.fo-page .type-btn {
            flex: 1; height: 52px;
            border: 1.5px solid var(--border);
            border-radius: 14px;
            background: var(--card);
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s ease;
            color: var(--muted-foreground);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }.fo-page .type-btn:hover {
            border-color: var(--primary);
            background: var(--accent);
        }.fo-page .type-btn.active {
            border: 1px solid var(--ring);
            background: var(--accent);
            color: var(--foreground);
        }.fo-page .type-btn-individual::before, .fo-page .type-btn-legal::before {
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }.fo-page .type-btn-individual::before {
    background-color: var(--primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}.fo-page .type-btn-legal::before {
    background-color: var(--primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h2M14 6h2M8 10h2M14 10h2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h2M14 6h2M8 10h2M14 10h2'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}.fo-page .delivery-buttons { display: flex; gap: 10px; }.fo-page .del-btn {
            flex: 1; padding: 12px 10px;
            border: 1.5px solid var(--border);
            border-radius: 14px;
            background: var(--card);
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s ease;
            text-align: left;
            line-height: 1.3;
            color: var(--muted-foreground);
        }.fo-page .del-btn:hover {
            border-color: var(--primary);
            background: var(--accent);
        }.fo-page .del-btn .del-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 2px;
            color: var(--foreground);
        }.fo-page .del-btn-courier .del-title::before, .fo-page .del-btn-cdek .del-title::before {
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }.fo-page .del-btn-courier .del-title::before {
    background-color: var(--primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='5' width='13' height='9' rx='1'/%3E%3Cpath d='M14 8h3l4 4v4h-2'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='5' width='13' height='9' rx='1'/%3E%3Cpath d='M14 8h3l4 4v4h-2'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}.fo-page .del-btn-cdek .del-title::before {
    background-color: var(--primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}.fo-page .del-btn .del-sub { display: block; font-size: 12px; font-weight: 500; opacity: 1; }.fo-page .del-btn.active.del-btn-courier, .fo-page .del-btn.active.del-btn-cdek {
            border: 1px solid var(--ring);
            background: var(--accent);
            color: var(--foreground);
        }.fo-page .del-btn.active .del-title { color: var(--foreground); }.fo-page .del-btn .del-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }.fo-page .fo-choice {
            margin: 10px 0 4px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--muted);
            font-size: 13px;
            color: var(--foreground);
            line-height: 1.55;
        }.fo-page .fo-choice-info { margin-bottom: 4px; }.fo-page .fo-choice-info b { color: var(--foreground); }.fo-page .fo-choice-link {
            border: none;
            background: none;
            padding: 0;
            font: inherit;
            font-size: 12px;
            font-weight: 700;
            color: var(--primary);
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 2px;
        }.fo-page .fo-choice-link:hover { color: var(--primary); }.fo-page .legal-found-card {
            border: 1px solid var(--border);
            background: var(--muted);
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 14px;
        }.fo-page .legal-found-row { font-size: 13px; margin-bottom: 3px; color: var(--foreground); }.fo-page .legal-found-label { color: var(--muted-foreground); }.fo-page .btn-main {
            display: inline-block;
            width: 100%;
            height: 54px;
            border: none;
            border-radius: 14px;
            background: var(--primary);
            border: none;
            color: var(--primary-foreground);
            font-size: 18px;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
            margin-top: 6px;
            transition: all .2s ease;
            letter-spacing: 0.2px;
            box-shadow: var(--shadow-accent);
        }.fo-page .btn-main:hover { background: var(--primary); filter: brightness(.94); }.fo-page .btn-main:active { background: var(--primary); filter: brightness(.88); }.fo-page .qty-wrap { display: flex; gap: 8px; }.fo-page .qty-btn {
            width: 46px; height: 46px;
            border: 1px solid var(--border);
            background: var(--card);
            border-radius: 10px;
            cursor: pointer;
            font-size: 24px;
            font-weight: 700;
            flex: 0 0 46px;
            transition: all .2s ease;
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
        }.fo-page .qty-btn:hover {
            border-color: var(--ring);
            background: var(--accent);
            color: var(--primary);
            box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 22%, transparent);
        }.fo-page #qty {
            color: var(--foreground);
            font-weight: 700;
            font-size: 16px;
        }.fo-page .summary-box {
            margin-top: 16px;
            padding: 20px 22px;
            border: 2px solid var(--accent);
            border-radius: 14px;
            background: var(--card);
            font-size: 14px;
            color: var(--foreground);
            line-height: 1.85;
            box-shadow: var(--shadow-card);
        }.fo-page .summary-box > div:last-of-type {
            margin-top: 16px;
            padding-top: 18px;
            border-top: 2px solid var(--accent);
            font-size: 14px;
            font-weight: 700;
            color: var(--foreground);
        }.fo-page .summary-box > div:last-of-type span {
            display: inline;
            font-size: 38px;
            font-weight: 800;
            color: var(--foreground);
            line-height: 1;
            margin-top: 8px;
        }.fo-page #cdek-pvz-block {
            display: none;
            margin-top: 12px;
            padding: 14px;
            border: 1.5px solid var(--border);
            border-radius: 12px;
            background: var(--card);
        }.fo-page #pvz-result {
            margin-top: 10px;
            display: none;
            padding: 10px 12px;
            border-radius: 10px;
            background: color-mix(in oklab, var(--success) 12%, var(--card));
            border: 1px solid var(--success);
        }.fo-page #choose-pvz-btn {
            width: 100%;
            height: 44px;
            border-radius: 10px;
            background: var(--accent);
            color: var(--foreground);
            border: 1px solid var(--ring);
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: all .2s ease;
        }.fo-page #choose-pvz-btn:hover {
            background: var(--accent);
            border-color: var(--primary);
        }.fo-page #cdek-map { width: 100%; height: 70vh; min-height: 500px; }.fo-page #form-details { display: block; }.fo-page #delivery-fields { display: block; }.fo-page .field-email-hidden { display: none; }.fo-page #cdek-pvz-block { display: none; }.fo-page .modal-content {
            border: none;
            border-radius: 16px;
            box-shadow: var(--shadow-card);
        }.fo-page .modal-header { padding: 16px 20px; }.fo-page .modal-header .modal-title {
            font-weight: 700;
            font-size: 17px;
            color: var(--foreground);
        }.fo-page .modal-header .btn-close:focus {
            box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
        }

/* ── fast-order: терминальные страницы (переход к оплате, счёт сформирован) ──
   Документы отдают то же тело, что и раньше; собственный <style> документа в
   тему не попадает (он в <head> и остаётся только для остальных сайтов), а
   оболочка и оформление берутся из темы. */
.fo-terminal .wrap { max-width: 42.5rem; }
.fo-terminal .success { text-align: center; }
.fo-terminal h1 { margin: 0 0 .5rem; font-size: 1.5rem; line-height: 1.25; color: var(--foreground); }
.fo-terminal .success p { margin: 0; color: var(--muted-foreground); }
.fo-terminal .grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .fo-terminal .grid { grid-template-columns: 1fr 1fr; } }
.fo-terminal .card + .card { margin-top: 1.5rem; }
.fo-terminal .card-title { margin-bottom: .625rem; font-size: .9375rem; font-weight: 700; color: var(--foreground); }
.fo-terminal table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.fo-terminal table td, .fo-terminal table th { padding: .4375rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.fo-terminal table tr:last-child td { border-bottom: 0; }
.fo-terminal table th { font-weight: 600; color: var(--muted-foreground); }
.fo-terminal .grid > .card:first-child table td:first-child { width: 9.5rem; white-space: nowrap; color: var(--muted-foreground); }
.fo-terminal .grid > .card:last-child table th:nth-child(n+2),
.fo-terminal .grid > .card:last-child table td:nth-child(n+2) { text-align: right; white-space: nowrap; }
.fo-terminal .total { margin-top: .75rem; font-family: var(--font-mono); font-size: 1.125rem; font-weight: 700; color: var(--foreground); }
.fo-terminal .muted { color: var(--muted-foreground); font-size: .875rem; }

/* ── Единая карточка товара: home / category / search / похожие ─────────────
   Photo-zone только белая. В прототипе .product-image был фоном-заглушкой на
   --catalog (background-image + background-size:245%), после переноса на <img>
   серо-голубой фон остался под фотографией. Фото поставщика показываем как
   есть (contain), без кадрирования и без зума при наведении — зум резал края.
   Карточка — колонка: тело тянется, цена и корзина прижаты к низу, поэтому в
   сетке все карточки одной высоты независимо от длины названия. */
.cc-product-card { display: flex; flex-direction: column; --cc-photo-bg: #FFFFFF; }
.cc-product-card .product-image { flex: 0 0 auto; background-color: var(--cc-photo-bg); object-fit: contain; }
.cc-product-card:hover .product-image { transform: none; }
.cc-product-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cc-product-card__foot { margin-top: auto; }
/* Зачёркнутая старая цена рядом с текущей. Утилиты line-through в сборке нет,
   поэтому правило живёт здесь, а не классом в разметке. */
.cc-product-card__old { text-decoration: line-through; }

/* ── Метка раздела и дата в карточке блога: mock-синий → брендовый cyan ─────
   app.css красит .section-label и .blog-card-date через var(--blue), а
   --blue:#196cff объявлен у него в :root, поэтому оба синие даже внутри
   .cc-page. Blog/faq/payment-delivery/stokes/blog-post вообще лежат вне
   :is(.cc-page,…), CITYCOND-токены туда не доходят — переопределяем сам токен
   на элементах: color (и тире ::before у метки) в app.css берут var(--blue).
   Значение = CITYCOND --primary (oklch(70% .155 230), блок токенов выше).
   Раскладка, гарнитура, размеры и текст не меняются — только цвет. */
.section-label,
.blog-card-date { --blue: oklch(70% .155 230); }

/* ── PDP: длинная модель не должна задавать ширину колонки ──────────────────
   .cc-pdp — grid, ширина единственной колонки = min-content её элементов.
   Название с неразрывным токеном (ASYG07KMCC/AOYG07KMCC = 444px при 24px)
   раздувало колонку до 433.9px независимо от вьюпорта: галерея растягивалась
   до 434px, картинка (383.9px) уезжала за край, docWidth = 450 при 390/430.
   overflow-wrap:anywhere (в отличие от break-word) учитывается при расчёте
   min-content, поэтому колонка сжимается до доступной ширины. Только мобильная
   полоса: при 768+ доступная ширина (736) больше самой длинной модели. */
@media (max-width: 767px) { .cc-pdp-title { overflow-wrap: anywhere; } }

/* ═══ PDP: компактная сводка доставки и количество в колонке покупки ═══
   Своего расчёта у блока нет: город — тот же localStorage.city, что у /checkout
   и у карты ПВЗ ниже, цены — из /apiship-calc.php. «расчёт…» — состояние до ответа. */
.cc-buy-delivery {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, .75rem);
  background-color: var(--secondary);
}
.cc-buy-delivery__row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.cc-buy-delivery__label { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.cc-buy-delivery__city { font-size: .8125rem; font-weight: 600; }
.cc-buy-delivery__opt { margin-top: .375rem; font-size: .8125rem; color: var(--muted-foreground); }
.cc-buy-delivery__address { margin-top: .5rem; font-size: .8125rem; }
.cc-buy-delivery__address small { display: block; color: var(--muted-foreground); font-size: .6875rem; }
.cc-buy-delivery__pick {
  display: inline-flex; align-items: center; min-height: 2.25rem; margin-top: .875rem;
  padding: 0 .875rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background-color: var(--card); color: var(--primary);
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  transition: border-color .3s, color .3s;
}
.cc-buy-delivery__pick:hover { border-color: var(--primary); }
.cc-buy-delivery__pick:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

.cc-buy-qty { margin-top: 1.5rem; }
.cc-buy-qty__label { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.cc-buy-qty__ctrl {
  display: inline-flex; align-items: center; margin-top: .5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background-color: var(--card); overflow: hidden;
}
.cc-buy-qty__ctrl button {
  width: 2.75rem; height: 2.75rem; border: 0; background: none;
  color: var(--foreground); font: inherit; font-size: 1.125rem; line-height: 1; cursor: pointer;
  transition: color .3s, background-color .3s;
}
.cc-buy-qty__ctrl button:hover:not(:disabled) { background-color: var(--secondary); color: var(--primary); }
.cc-buy-qty__ctrl button:disabled { opacity: .35; cursor: default; }
.cc-buy-qty__ctrl input {
  width: 3.25rem; height: 2.75rem; border: 0; border-inline: 1px solid var(--border);
  background: none; color: var(--foreground);
  font: inherit; font-size: .9375rem; font-weight: 600; text-align: center;
  appearance: textfield; -moz-appearance: textfield;
}
.cc-buy-qty__ctrl input::-webkit-outer-spin-button,
.cc-buy-qty__ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cc-buy-qty__ctrl input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ring); }
.cc-buy-stock { margin-top: 1rem; font-size: .8125rem; }

/* ═══ PDP: лента «Из этой категории» ═══
   Карточка — тот же locked partial, здесь только её ширина в ленте (4/3/2/1) и
   прокрутка. Свайп — нативный overflow-x + scroll-snap, слайдер-библиотек нет.
   Проценты считаны так, чтобы в кадр попадало ровно N карточек с их зазорами. */
.cc-rel-track {
  display: flex; gap: 1rem;
  margin-top: 2.25rem;
  padding: 1rem 0 1.5rem;              /* запас под тень и hover-подъём карточки */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cc-rel-track::-webkit-scrollbar { display: none; }
.cc-rel-track > .cc-product-card { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 640px) { .cc-rel-track > .cc-product-card { flex-basis: calc((100% - 1rem) / 2); } }
@media (min-width: 1024px) { .cc-rel-track > .cc-product-card { flex-basis: calc((100% - 2rem) / 3); } }
@media (min-width: 1280px) { .cc-rel-track > .cc-product-card { flex-basis: calc((100% - 3rem) / 4); } }
.cc-rel-track:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--radius-lg, .75rem); }
.cc-rel-nav { display: flex; flex-shrink: 0; gap: .5rem; }
.cc-rel-btn {
  display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background-color: var(--card); color: var(--foreground); cursor: pointer;
  transition: border-color .3s, color .3s, opacity .3s;
}
.cc-rel-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.cc-rel-btn:disabled { opacity: .35; cursor: default; }
.cc-rel-prev svg { transform: scaleX(-1); }
@media (max-width: 767px) { .cc-rel-nav { display: none; } }   /* мобильный — свайп пальцем */

/* ═══ PDP: полный блок доставки (карта ПВЗ) ═══
   Bootstrap на citycond не подключён: .modal/.fade/.modal-* ничего не скрывали, и
   разметка карты лежала в потоке страницы пустым блоком 762px. Открывает её кнопка
   компактной сводки (sdek.phtml → showModal), состояние — .is-open. */
#cdekModal { display: none; position: fixed; inset: 0; z-index: 1080; overflow-y: auto; background-color: oklch(19% .045 248 / .55); }
#cdekModal.is-open { display: block; }
#cdekModal .modal-dialog { width: min(100% - 2rem, 1200px); margin: 2rem auto; }
#cdekModal .modal-content { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg, .75rem); background-color: var(--card); }
#cdekModal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
#cdekModal .modal-title { margin: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
#cdekModal .modal-body { padding: 0; }
#cdekModal .btn-close { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border: 0; border-radius: var(--radius); background: none; color: var(--muted-foreground); font-size: 1.5rem; line-height: 1; cursor: pointer; }
#cdekModal .btn-close::before { content: '×'; }
#cdekModal .btn-close:hover { color: var(--primary); }

/* ═══ PDP: форма обратной связи ═══
   Была на bootstrap-классах (form-control/bg-main/col-*), которых на citycond нет:
   поля рисовались нативными (28px высотой, без лейблов). Состав полей, имена,
   required и обработчик не менялись — только оформление. */
.cc-feedback { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .cc-feedback { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; } }
.cc-feedback__lead { margin-top: 1rem; font-size: .9375rem; color: var(--muted-foreground); }
.cc-feedback__form { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg, .75rem); background-color: var(--card); box-shadow: 0 4px 18px oklch(20% .04 245 / .04); }
@media (min-width: 640px) { .cc-feedback__form { padding: 2rem; } }
.cc-feedback__grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cc-feedback__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-feedback__field--wide { grid-column: 1 / -1; } }
@media (min-width: 640px) and (max-width: 1279px) { .cc-feedback__field--email { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .cc-feedback__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cc-feedback__field .cc-field { margin-bottom: 0; }
.cc-feedback__textarea { min-height: 6.5rem; resize: vertical; max-width: 100%; }
.cc-feedback__agree { display: flex; gap: .625rem; margin-top: 1.25rem; font-size: .75rem; line-height: 1.5; color: var(--muted-foreground); }
.cc-feedback__agree a { color: var(--primary); text-decoration: underline; }
.cc-check { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: .1rem; accent-color: var(--primary); }
.cc-feedback__submit {
  display: inline-flex; width: 100%; min-height: 2.75rem; align-items: center; justify-content: center;
  margin-top: 1.25rem; padding: 0 1.5rem;
  border: 0; border-radius: var(--radius);
  background-color: var(--primary); color: var(--primary-foreground);
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: opacity .3s, transform .3s;
}
@media (min-width: 640px) { .cc-feedback__submit { width: auto; min-width: 16rem; } }
.cc-feedback__submit:hover:not(:disabled) { transform: translateY(-2px); }
.cc-feedback__submit:disabled { opacity: .6; cursor: default; }
.cc-feedback__status { min-height: 1.25rem; margin-top: .75rem; font-size: .875rem; line-height: 1.4; color: var(--muted-foreground); }
.cc-feedback__status:not(:empty) { color: var(--foreground); }

/* ═══ PDP: характеристики — один вертикальный столбец ═══
   Правило только для верхнего блока PDP (.cc-pdp-specs). Список внутри
   аккордеона «Характеристики» остаётся двухколоночным — он LOCKED. */
.cc-pdp-specs { grid-column: 2 / 4; margin-top: 0; }
.cc-pdp-specs .cc-specs { grid-template-columns: minmax(0, 1fr); gap: .625rem; }
.cc-pdp-specs .cc-specs-row { padding-bottom: .625rem; }