/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-violet-300: oklch(81.1% 0.111 293.571);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-violet-700: oklch(49.1% 0.27 292.581);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.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-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --leading-relaxed: 1.625;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-y-0 {
    inset-block: 0;
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .top-0 {
    top: 0;
  }
  .top-0\.5 {
    top: calc(var(--spacing) * 0.5);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .right-0 {
    right: 0;
  }
  .left-0\.5 {
    left: calc(var(--spacing) * 0.5);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .z-10 {
    z-index: 10;
  }
  .z-30 {
    z-index: 30;
  }
  .float-left {
    float: left;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }
  .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-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .ml-1 {
    margin-left: var(--spacing);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }
  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }
  .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-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .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-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-52 {
    height: calc(var(--spacing) * 52);
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }
  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }
  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }
  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }
  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }
  .min-h-36 {
    min-height: calc(var(--spacing) * 36);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-\[160px\] {
    width: 160px;
  }
  .w-\[190px\] {
    width: 190px;
  }
  .w-\[270px\] {
    width: 270px;
  }
  .w-\[290px\] {
    width: 290px;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-\[42rem\] {
    max-width: 42rem;
  }
  .max-w-\[1600px\] {
    max-width: 1600px;
  }
  .max-w-\[min\(70vw\,40rem\)\] {
    max-width: min(70vw, 40rem);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-none {
    max-width: none;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .min-w-0 {
    min-width: 0;
  }
  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }
  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }
  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }
  .min-w-\[15rem\] {
    min-width: 15rem;
  }
  .min-w-full {
    min-width: 100%;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-5 {
    --tw-translate-x: calc(var(--spacing) * 5);
    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);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-ping {
    animation: var(--animate-ping);
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .resize-y {
    resize: vertical;
  }
  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
  .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));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .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-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1\.5 {
    :where(& > :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)));
    }
  }
  .space-y-2 {
    :where(& > :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)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-\[var\(--app-border\)\] {
    :where(& > :not(:last-child)) {
      border-color: var(--app-border);
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-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-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-\[var\(--app-accent\)\] {
    border-color: var(--app-accent);
  }
  .border-\[var\(--app-border\)\] {
    border-color: var(--app-border);
  }
  .border-\[var\(--app-border-strong\)\] {
    border-color: var(--app-border-strong);
  }
  .border-\[var\(--app-status\)\] {
    border-color: var(--app-status);
  }
  .border-amber-500\/40 {
    border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
    }
  }
  .border-blue-500\/40 {
    border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent);
    }
  }
  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .border-red-300 {
    border-color: var(--color-red-300);
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-red-500\/20 {
    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-violet-500\/40 {
    border-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-violet-500) 40%, transparent);
    }
  }
  .border-l-amber-500 {
    border-left-color: var(--color-amber-500);
  }
  .border-l-red-500 {
    border-left-color: var(--color-red-500);
  }
  .bg-\[var\(--app-accent\)\] {
    background-color: var(--app-accent);
  }
  .bg-\[var\(--app-accent-soft\)\] {
    background-color: var(--app-accent-soft);
  }
  .bg-\[var\(--app-bg\)\] {
    background-color: var(--app-bg);
  }
  .bg-\[var\(--app-border\)\] {
    background-color: var(--app-border);
  }
  .bg-\[var\(--app-status\)\] {
    background-color: var(--app-status);
  }
  .bg-\[var\(--app-surface\)\] {
    background-color: var(--app-surface);
  }
  .bg-\[var\(--app-surface-muted\)\] {
    background-color: var(--app-surface-muted);
  }
  .bg-\[var\(--app-surface-solid\)\] {
    background-color: var(--app-surface-solid);
  }
  .bg-amber-500\/10 {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }
  .bg-blue-500\/10 {
    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }
  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }
  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }
  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-red-500\/10 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-violet-500\/10 {
    background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
    }
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .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-8 {
    padding: calc(var(--spacing) * 8);
  }
  .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);
  }
  .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-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-11 {
    padding-right: calc(var(--spacing) * 11);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--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-\[10px\] {
    font-size: 10px;
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.14em\] {
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
  }
  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[var\(--app-accent\)\] {
    color: var(--app-accent);
  }
  .text-\[var\(--app-muted\)\] {
    color: var(--app-muted);
  }
  .text-\[var\(--app-status\)\] {
    color: var(--app-status);
  }
  .text-\[var\(--app-text\)\] {
    color: var(--app-text);
  }
  .text-\[var\(--front-muted\)\] {
    color: var(--front-muted);
  }
  .text-amber-500 {
    color: var(--color-amber-500);
  }
  .text-amber-700 {
    color: var(--color-amber-700);
  }
  .text-blue-700 {
    color: var(--color-blue-700);
  }
  .text-emerald-600 {
    color: var(--color-emerald-600);
  }
  .text-emerald-700 {
    color: var(--color-emerald-700);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-red-900 {
    color: var(--color-red-900);
  }
  .text-violet-700 {
    color: var(--color-violet-700);
  }
  .text-white {
    color: var(--color-white);
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .underline {
    text-decoration-line: underline;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .accent-\[var\(--app-accent\)\] {
    accent-color: var(--app-accent);
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-55 {
    opacity: 55%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    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, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    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, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    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-black\/5 {
    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }
  .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-filter {
    -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-\[max-height\,opacity\] {
    transition-property: max-height,opacity;
    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-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: 200ms;
    transition-duration: 200ms;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .group-open\:rotate-180 {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      rotate: 180deg;
    }
  }
  .group-open\:border-\[var\(--app-border-strong\)\] {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      border-color: var(--app-border-strong);
    }
  }
  .group-open\:bg-\[var\(--app-surface-muted\)\] {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      background-color: var(--app-surface-muted);
    }
  }
  .group-open\:text-\[var\(--app-text\)\] {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      color: var(--app-text);
    }
  }
  .group-hover\:border-\[var\(--app-accent\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        border-color: var(--app-accent);
      }
    }
  }
  .placeholder\:text-\[var\(--app-muted\)\] {
    &::placeholder {
      color: var(--app-muted);
    }
  }
  .last\:border-r-0 {
    &:last-child {
      border-right-style: var(--tw-border-style);
      border-right-width: 0px;
    }
  }
  .hover\:border-\[var\(--app-accent\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--app-accent);
      }
    }
  }
  .hover\:border-\[var\(--app-border-strong\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--app-border-strong);
      }
    }
  }
  .hover\:bg-\[var\(--app-accent-soft\)\]\/80 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--app-accent-soft);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--app-accent-soft) 80%, transparent);
        }
      }
    }
  }
  .hover\:bg-\[var\(--app-surface\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--app-surface);
      }
    }
  }
  .hover\:bg-\[var\(--app-surface-muted\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--app-surface-muted);
      }
    }
  }
  .hover\:bg-red-500\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
        }
      }
    }
  }
  .hover\:text-\[var\(--app-accent\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--app-accent);
      }
    }
  }
  .hover\:text-\[var\(--app-accent-strong\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--app-accent-strong);
      }
    }
  }
  .hover\:text-\[var\(--app-text\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--app-text);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:shadow-sm {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .focus\:border-\[var\(--app-accent\)\] {
    &:focus {
      border-color: var(--app-accent);
    }
  }
  .focus\:border-\[var\(--app-cyan\)\] {
    &:focus {
      border-color: var(--app-cyan);
    }
  }
  .focus\:border-red-500 {
    &:focus {
      border-color: var(--color-red-500);
    }
  }
  .focus\:bg-\[var\(--app-surface-muted\)\] {
    &:focus {
      background-color: var(--app-surface-muted);
    }
  }
  .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-\[var\(--app-accent\)\] {
    &:focus {
      --tw-ring-color: var(--app-accent);
    }
  }
  .focus\:ring-\[var\(--app-accent\)\]\/20 {
    &:focus {
      --tw-ring-color: var(--app-accent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--app-accent) 20%, transparent);
      }
    }
  }
  .focus\:ring-\[var\(--app-cyan\)\] {
    &:focus {
      --tw-ring-color: var(--app-cyan);
    }
  }
  .focus\:ring-red-500\/25 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 25%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 25%, transparent);
      }
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus-visible\:ring-4 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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-\[var\(--app-ring\)\] {
    &:focus-visible {
      --tw-ring-color: var(--app-ring);
    }
  }
  .focus-visible\:outline-none {
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:translate-y-px {
    &:active {
      --tw-translate-y: 1px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .disabled\:pointer-events-none {
    &:disabled {
      pointer-events: none;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .sm\:col-span-2 {
    @media (width >= 40rem) {
      grid-column: span 2 / span 2;
    }
  }
  .sm\:w-fit {
    @media (width >= 40rem) {
      width: fit-content;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-4 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
    @media (width >= 40rem) {
      grid-template-columns: minmax(0,1fr) auto;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-end {
    @media (width >= 40rem) {
      align-items: flex-end;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:justify-end {
    @media (width >= 40rem) {
      justify-content: flex-end;
    }
  }
  .sm\:gap-3 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .sm\:p-5 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .sm\:p-6 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-right {
    @media (width >= 40rem) {
      text-align: right;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-\[1fr_auto\] {
    @media (width >= 48rem) {
      grid-template-columns: 1fr auto;
    }
  }
  .md\:items-end {
    @media (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .md\:justify-end {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-start-3 {
    @media (width >= 64rem) {
      grid-column-start: 3;
    }
  }
  .lg\:row-start-1 {
    @media (width >= 64rem) {
      grid-row-start: 1;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(18rem\,1fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,2fr) minmax(18rem,1fr);
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .xl\:sticky {
    @media (width >= 80rem) {
      position: sticky;
    }
  }
  .xl\:top-24 {
    @media (width >= 80rem) {
      top: calc(var(--spacing) * 24);
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-4 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-5 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-\[minmax\(0\,1fr\)_340px\] {
    @media (width >= 80rem) {
      grid-template-columns: minmax(0,1fr) 340px;
    }
  }
  .xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(24rem\,0\.95fr\)\] {
    @media (width >= 80rem) {
      grid-template-columns: minmax(0,1fr) minmax(24rem,0.95fr);
    }
  }
  .xl\:self-start {
    @media (width >= 80rem) {
      align-self: flex-start;
    }
  }
  .dark\:text-amber-300 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-amber-300);
    }
  }
  .dark\:text-blue-300 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-blue-300);
    }
  }
  .dark\:text-emerald-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-emerald-400);
    }
  }
  .dark\:text-red-300 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-red-300);
    }
  }
  .dark\:text-red-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-red-400);
    }
  }
  .dark\:text-violet-300 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-violet-300);
    }
  }
  .\[\&\:\:-webkit-details-marker\]\:hidden {
    &::-webkit-details-marker {
      display: none;
    }
  }
}
@layer base {
  :root {
    color-scheme: light;
    --app-bg: #f7f8fa;
    --app-bg-strong: #f1f3f5;
    --app-surface: #ffffff;
    --app-surface-solid: #ffffff;
    --app-surface-muted: #f1f3f5;
    --app-border: #e4e7eb;
    --app-border-strong: #c7cbd1;
    --app-text: #0e1116;
    --app-muted: #6b7280;
    --app-accent: #e2001a;
    --app-accent-strong: #c62333;
    --app-accent-soft: #fce6e9;
    --app-status: #117a50;
    --app-warning: #9a6a12;
    --app-shadow: rgba(14, 17, 22, 0.08);
    --app-ring: rgba(226, 0, 26, 0.28);
    --layout-gutter: clamp(16px, 3vw, 56px);
    --layout-gutter-compact: clamp(12px, 2vw, 32px);
    --layout-content-max: 1240px;
    --layout-readable-max: 920px;
    --layout-card-radius: 16px;
  }
  * {
    scrollbar-color: var(--app-border-strong) transparent;
  }
}
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
body {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.admin-grid-bg {
  background: var(--app-bg);
}
.admin-scanline {
  overflow: hidden;
}
.admin-scanline::after {
  content: none;
}
.admin-glass {
  background: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: 0 1px 2px var(--app-shadow);
}
.admin-panel-edge::before {
  content: none;
}
.admin-focus-ring {
  box-shadow: 0 0 0 4px var(--app-ring);
}
@layer components {
  .ms {
    font-family: 'Material Symbols Rounded';
    font-weight: 300;
    line-height: 1;
    display: inline-block;
    font-style: normal;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' -25, 'opsz' 24;
  }
  .front-shell {
    min-height: 100vh;
    overflow-x: clip;
    background: var(--front-white);
    color: var(--front-ink);
    font-family: 'Manrope', sans-serif;
  }
  .front-main {
    padding-top: 70px;
  }
  .front-main--home {
    padding-top: 0;
  }
  .front-container {
    width: 100%;
    max-width: var(--layout-content-max);
    margin: 0 auto;
    padding-inline: var(--layout-gutter);
  }
  .front-page {
    width: 100%;
    max-width: var(--layout-content-max);
    margin: 0 auto;
    padding: 0 var(--layout-gutter) 60px;
  }
  .front-narrow {
    max-width: var(--layout-readable-max);
    margin-inline: auto;
  }
  .front-header-shell {
    position: relative;
    z-index: 300;
  }
  .front-header {
    z-index: 220;
    border-bottom: 1px solid var(--front-line);
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 90%, transparent);
    }
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .front-header__inner {
    height: 70px;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .front-mobile-menu-button {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid var(--front-border);
    border-radius: 12px;
    background: var(--front-white);
    color: var(--front-ink);
    cursor: pointer;
    transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
  }
  .front-mobile-menu-button:hover, .front-mobile-menu-button[aria-expanded="true"] {
    border-color: var(--front-accent);
    background: var(--front-quiet-subtle);
    box-shadow: 0 10px 28px -22px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 10px 28px -22px color-mix(in srgb, var(--front-accent) 70%, transparent);
    }
  }
  .front-mobile-menu-button .ms {
    font-size: 26px;
  }
  .front-shell {
    --locale-surface: var(--front-white);
    --locale-surface-muted: var(--front-soft);
    --locale-border: var(--front-border);
    --locale-border-strong: var(--front-accent);
    --locale-text: var(--front-ink);
    --locale-muted: var(--front-muted);
    --locale-accent: var(--front-accent);
    --locale-line: var(--front-line);
    --locale-shadow: var(--front-ink);
    --app-bg: var(--front-quiet);
    --app-surface: var(--front-white);
    --app-surface-solid: var(--front-white);
    --app-surface-muted: var(--front-soft);
    --app-border: var(--front-border);
    --app-border-strong: var(--front-border-strong);
    --app-text: var(--front-ink);
    --app-muted: var(--front-text-muted);
    --app-accent: var(--front-accent);
    --app-accent-strong: var(--front-danger);
    --app-accent-soft: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --app-accent-soft: color-mix(in srgb, var(--front-accent) 10%, var(--front-white));
    }
    --app-status: var(--front-success);
    --app-ring: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --app-ring: color-mix(in srgb, var(--front-accent) 28%, transparent);
    }
  }
  .front-logo, .front-nav__link, .front-account, .front-card, .front-product-card, .front-link-button, .front-tag {
    text-decoration: none;
  }
  .front-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .front-logo__image, .front-footer__logo {
    position: relative;
    display: block;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .front-logo__image {
    width: 172px;
    height: 50px;
  }
  .front-logo__image img, .front-footer__logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
  }
  .front-logo__image img {
    width: 260px;
  }
  .front-footer__logo {
    width: 200px;
    height: 60px;
  }
  .front-footer__logo img {
    width: 300px;
  }
  .front-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .front-nav__link, .front-account {
    border-radius: 8px;
    color: var(--front-text);
    font: 700 15px 'Manrope', sans-serif;
    transition: background .15s;
  }
  .front-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .front-nav__link:hover, .front-nav__link.is-active, .front-account:hover {
    background: var(--front-soft);
  }
  .front-nav__link.is-active {
    color: var(--front-accent);
  }
  .front-account-menu {
    position: relative;
  }
  .front-account-menu summary {
    list-style: none;
    cursor: pointer;
  }
  .front-account-menu summary::-webkit-details-marker {
    display: none;
  }
  .front-account-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 35;
    min-width: 210px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--front-border);
    border-radius: 12px;
    background: var(--front-white);
    box-shadow: 0 18px 45px -26px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 18px 45px -26px color-mix(in srgb, var(--front-ink) 45%, transparent);
    }
  }
  .front-account-menu:not([open]) .front-account-menu__panel {
    display: none;
  }
  .front-account-menu__item {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--front-ink);
    text-decoration: none;
    font: 800 13px 'Manrope', sans-serif;
    transition: background .16s, color .16s;
  }
  .front-account-menu__item:hover {
    background: var(--front-soft);
    color: var(--front-accent);
  }
  .front-account-menu__item .ms {
    color: var(--front-muted);
    font-size: 20px;
  }
  .front-icon-muted {
    color: var(--front-muted);
  }
  .front-search {
    flex: 1;
    max-width: 340px;
    margin-left: auto;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 0 14px;
    border-radius: 10px;
    border: 1px solid var(--front-border);
    background: var(--front-quiet);
    cursor: text;
    transition: all .15s;
  }
  .front-search:hover {
    border-color: var(--front-border-strong);
    background: var(--front-white);
  }
  .front-search__submit {
    width: 24px;
    height: 24px;
    border: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--front-muted);
    cursor: pointer;
    flex-shrink: 0;
  }
  .front-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--front-ink);
    font: 700 15px 'Manrope', sans-serif;
  }
  .front-search__input::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--front-muted);
  }
  .front-search__kbd {
    border: 1px solid var(--front-border);
    border-radius: 5px;
    padding: 2px 6px;
    background: var(--front-white);
    color: var(--front-muted);
    font: 600 11px 'JetBrains Mono', monospace;
  }
  .front-header-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    z-index: 100;
    opacity: 0;
    transform: translateY(-10px) scale(.985);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .front-header-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .front-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    align-items: start;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    background: var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-ink) 28%, transparent);
    }
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .front-mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .front-mobile-menu__sheet {
    width: min(100%, 430px);
    max-height: calc(100vh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
    margin-left: auto;
    overflow: auto;
    border: 1px solid var(--front-line);
    border-radius: 24px;
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 96%, transparent);
    }
    box-shadow: 0 30px 80px -48px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 30px 80px -48px color-mix(in srgb, var(--front-ink) 70%, transparent);
    }
    transform: translateY(-10px) scale(.98);
    transition: transform .2s ease;
    overscroll-behavior: contain;
  }
  .front-mobile-menu.is-open .front-mobile-menu__sheet {
    transform: translateY(0) scale(1);
  }
  .front-mobile-menu__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--front-line);
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 94%, transparent);
    }
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .front-mobile-menu__title {
    color: var(--front-ink);
    font: 800 15px 'Sora', sans-serif;
  }
  .front-mobile-menu__close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--front-soft);
    color: var(--front-ink);
    cursor: pointer;
  }
  .front-mobile-search {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px;
    padding: 0 14px;
    border: 1px solid var(--front-border);
    border-radius: 16px;
    background: var(--front-quiet);
    color: var(--front-muted);
  }
  .front-mobile-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--front-ink);
    font: 700 15px 'Manrope', sans-serif;
  }
  .front-mobile-nav, .front-mobile-categories {
    display: grid;
    gap: 8px;
  }
  .front-mobile-nav {
    padding: 0 14px 14px;
  }
  .front-mobile-nav__link, .front-mobile-category {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--front-border);
    border-radius: 16px;
    background: var(--front-white);
    color: var(--front-ink);
    text-decoration: none;
    font: 800 15px 'Manrope', sans-serif;
  }
  .front-mobile-nav__link {
    padding: 0 14px;
  }
  .front-mobile-nav__link .ms {
    color: var(--front-accent);
    font-size: 24px;
  }
  .front-mobile-menu__section {
    padding: 0 14px 14px;
  }
  .front-mobile-menu__section .front-flyout__eyebrow {
    margin-bottom: 10px;
  }
  .front-mobile-category {
    justify-content: space-between;
    padding: 0 12px 0 14px;
  }
  .front-mobile-category .ms {
    color: var(--front-muted);
    font-size: 22px;
  }
  .front-mobile-menu__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
  }
  .front-mobile-menu__actions .front-button {
    min-height: 48px;
  }
  .front-mobile-menu-open {
    overflow: hidden;
  }
  .front-flyout {
    margin-top: 10px;
    border: 1px solid var(--front-line);
    border-radius: 16px;
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 96%, transparent);
    }
    box-shadow: 0 28px 70px -42px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 28px 70px -42px color-mix(in srgb, var(--front-ink) 55%, transparent);
    }
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .front-flyout--catalog {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 22px;
    overscroll-behavior: contain;
  }
  .front-flyout__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }
  .front-flyout__eyebrow {
    display: block;
    color: var(--front-muted);
    font: 800 11px 'JetBrains Mono', monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .front-flyout__link {
    color: var(--front-accent);
    text-decoration: none;
    font: 800 13px 'Manrope', sans-serif;
  }
  .front-flyout__empty {
    display: block;
    padding: 16px;
    color: var(--front-muted);
    font: 700 13px 'Manrope', sans-serif;
  }
  .front-catalog-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    overflow-x: visible;
    margin: 0 -4px 10px;
    border-bottom: 1px solid var(--front-border);
    padding: 0 4px 10px;
    scrollbar-width: thin;
  }
  .front-catalog-tabs__item {
    min-height: 40px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    padding: 0 14px;
    color: var(--front-muted);
    font: 800 13px/1.2 'Manrope', sans-serif;
    cursor: pointer;
    transition: border-color .16s, background .16s, color .16s;
  }
  .front-catalog-tabs__item:hover {
    background: var(--front-soft);
    color: var(--front-ink);
  }
  .front-catalog-tabs__item.is-active {
    border-color: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-accent) 22%, var(--front-border));
    }
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 8%, var(--front-white));
    }
    color: var(--front-accent);
  }
  .front-catalog-tabs__item:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--front-accent) 22%, transparent);
    }
  }
  .front-catalog-families-toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px;
    border: 0;
    background: transparent;
    color: var(--front-accent);
    font: 800 12px/1.2 'Manrope', sans-serif;
    cursor: pointer;
  }
  .front-catalog-families-toggle .ms {
    font-size: 18px;
    transition: transform .18s ease;
  }
  .front-catalog-families-toggle.is-expanded .ms {
    transform: rotate(180deg);
  }
  .front-catalog-families-toggle:focus-visible {
    outline: 0;
    border-radius: 8px;
    box-shadow: 0 0 0 4px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--front-accent) 22%, transparent);
    }
  }
  .front-catalog-section[hidden] {
    display: none;
  }
  .front-catalog-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 18px;
  }
  .front-catalog-section__head h2 {
    margin-top: 4px;
    color: var(--front-ink);
    font: 800 clamp(20px, 2vw, 26px)/1.1 'Sora', sans-serif;
  }
  .front-catalog-section__eyebrow {
    color: var(--front-muted);
    font: 750 10px/1.2 'JetBrains Mono', monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .front-catalog-section__head > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--front-accent);
    font: 800 12px/1.2 'Manrope', sans-serif;
    text-decoration: none;
  }
  .front-catalog-section__head > a .ms {
    font-size: 18px;
  }
  .front-catalog-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .front-catalog-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--front-border);
    border-radius: 14px;
    background: var(--front-quiet-subtle);
    padding: 15px;
  }
  .front-catalog-group__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
    color: var(--front-ink);
    font: 820 14px/1.3 'Sora', sans-serif;
    text-decoration: none;
  }
  .front-catalog-group__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 8%, var(--front-white));
    }
    color: var(--front-accent);
    font-size: 22px;
  }
  .front-catalog-group__children {
    display: grid;
    gap: 7px;
    margin-top: 14px;
    border-top: 1px solid var(--front-border);
    padding-top: 13px;
  }
  .front-catalog-group__children a {
    color: var(--front-body);
    font: 680 12px/1.35 'Manrope', sans-serif;
    text-decoration: none;
  }
  .front-catalog-group__children a:hover {
    color: var(--front-accent);
  }
  .front-catalog-group__all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 14px;
    color: var(--front-accent);
    font: 800 11px/1.2 'Manrope', sans-serif;
    text-decoration: none;
  }
  .front-catalog-group__all:hover, .front-catalog-section__head > a:hover {
    color: var(--front-danger);
  }
  .front-mobile-catalog {
    display: grid;
    gap: 8px;
  }
  .front-mobile-catalog__section {
    overflow: hidden;
    border: 1px solid var(--front-border);
    border-radius: 14px;
    background: var(--front-white);
  }
  .front-mobile-catalog__section summary {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 13px;
    color: var(--front-ink);
    font: 800 14px/1.25 'Sora', sans-serif;
    cursor: pointer;
    list-style: none;
  }
  .front-mobile-catalog__section summary::-webkit-details-marker {
    display: none;
  }
  .front-mobile-catalog__section summary .ms {
    color: var(--front-muted);
    transition: transform .16s ease;
  }
  .front-mobile-catalog__section[open] summary .ms {
    transform: rotate(180deg);
  }
  .front-mobile-catalog__groups {
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--front-border);
    padding: 9px;
  }
  .front-mobile-catalog__group {
    display: grid;
    gap: 7px;
    border-radius: 11px;
    background: var(--front-quiet-subtle);
    padding: 10px;
  }
  .front-mobile-catalog__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--front-ink);
    font: 800 13px/1.3 'Manrope', sans-serif;
    text-decoration: none;
  }
  .front-mobile-catalog__group-head .ms {
    color: var(--front-accent);
    font-size: 20px;
  }
  .front-mobile-catalog__child {
    color: var(--front-body);
    font: 680 12px/1.35 'Manrope', sans-serif;
    text-decoration: none;
  }
  .front-mobile-catalog__all {
    color: var(--front-accent);
    font: 800 11px/1.2 'Manrope', sans-serif;
    text-decoration: none;
  }
  .front-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .front-account {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
  }
  .front-account .ms {
    font-size: 22px;
  }
  .front-footer {
    margin-top: 64px;
    border-top: 1px solid var(--front-line);
    background: var(--front-ink);
    color: var(--front-white);
  }
  .front-footer__brandline {
    display: flex;
    align-items: center;
  }
  .front-footer__grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) minmax(170px, .62fr) minmax(300px, 1fr) minmax(170px, .58fr);
    gap: clamp(24px, 3vw, 52px);
    padding-block: 48px 38px;
  }
  .front-footer__brandline {
    gap: 10px;
  }
  .front-footer__about {
    display: grid;
    align-content: start;
    gap: 18px;
    max-width: 560px;
  }
  .front-footer__text {
    max-width: 520px;
    margin: 0;
    color: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-white) 72%, transparent);
    }
    font: 500 14.5px/1.7 'Manrope', sans-serif;
  }
  .front-footer__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .front-footer__stats span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--front-white) 14%, transparent);
    }
    border-radius: 999px;
    padding-inline: 12px;
    color: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-white) 78%, transparent);
    }
    font: 800 12px 'Manrope', sans-serif;
  }
  .front-footer__nav {
    display: grid;
    align-content: start;
    gap: 11px;
  }
  .front-footer__title {
    margin: 0 0 5px;
    color: var(--front-white);
    font: 800 12px 'Manrope', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .front-footer__nav a {
    color: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-white) 68%, transparent);
    }
    text-decoration: none;
    font: 700 13.5px/1.35 'Manrope', sans-serif;
    transition: color .15s;
  }
  .front-footer__nav a:hover {
    color: var(--front-white);
  }
  .front-footer__category-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 18px;
  }
  .front-footer__bottom {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--front-white) 10%, transparent);
    }
    padding-block: 14px;
  }
  .front-footer__legal {
    color: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-white) 56%, transparent);
    }
    font: 500 13px 'Manrope', sans-serif;
  }
  .front-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
  }
  .front-footer__legal-links a {
    color: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-white) 68%, transparent);
    }
    font: 700 12.5px/1.4 'Manrope', sans-serif;
    text-decoration: none;
  }
  .front-footer__legal-links a:hover {
    color: var(--front-white);
  }
  .locale-switcher {
    position: relative;
    z-index: 20;
    --locale-surface: var(--app-surface);
    --locale-surface-muted: var(--app-surface-muted);
    --locale-border: var(--app-border);
    --locale-border-strong: var(--app-accent);
    --locale-text: var(--app-text);
    --locale-muted: var(--app-muted);
    --locale-accent: var(--app-accent);
    --locale-line: var(--app-border);
    --locale-shadow: var(--app-shadow);
  }
  .front-shell .locale-switcher {
    --locale-surface: var(--front-white);
    --locale-surface-muted: var(--front-soft);
    --locale-border: var(--front-border);
    --locale-border-strong: var(--front-accent);
    --locale-text: var(--front-ink);
    --locale-muted: var(--front-muted);
    --locale-accent: var(--front-accent);
    --locale-line: var(--front-line);
    --locale-shadow: var(--front-ink);
  }
  .locale-switcher__summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--locale-border);
    border-radius: 11px;
    background: var(--locale-surface);
    color: var(--locale-text);
    padding: 0 12px;
    font: 700 13px 'Manrope', sans-serif;
    box-shadow: 0 8px 24px -20px var(--locale-shadow);
    transition: border-color .15s, box-shadow .15s, transform .15s;
  }
  .locale-switcher__summary::-webkit-details-marker {
    display: none;
  }
  .locale-switcher__summary:hover {
    border-color: var(--locale-border-strong);
    box-shadow: 0 16px 34px -26px var(--locale-accent);
  }
  .locale-switcher[open] .locale-switcher__summary {
    border-color: var(--locale-border-strong);
  }
  .locale-switcher__flag, .locale-switcher__option-flag {
    border-radius: 4px;
    background: var(--locale-surface-muted);
    box-shadow: inset 0 0 0 1px var(--locale-border);
    overflow: hidden;
    position: relative;
    object-fit: cover;
  }
  .locale-switcher__flag {
    width: 28px;
    height: 20px;
  }
  .locale-switcher__option-flag {
    width: 28px;
    height: 20px;
  }
  .locale-switcher__chevron {
    color: var(--locale-muted);
    transition: transform .18s;
  }
  .locale-switcher[open] .locale-switcher__chevron {
    transform: rotate(180deg);
  }
  .locale-switcher__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 30;
    width: min(260px, calc(100vw - 32px));
    transform-origin: top right;
    border: 1px solid var(--locale-line);
    border-radius: 16px;
    background: var(--locale-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--locale-surface) 96%, transparent);
    }
    padding: 8px;
    box-shadow: 0 28px 70px -42px var(--locale-shadow);
    opacity: 0;
    transform: translateY(-10px) scale(.985);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .locale-switcher--footer .locale-switcher__menu {
    top: auto;
    bottom: calc(100% + 12px);
    transform-origin: bottom right;
    transform: translateY(10px) scale(.985);
  }
  .locale-switcher[open] .locale-switcher__menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .locale-switcher__option {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--locale-text);
    cursor: pointer;
    padding: 0 10px;
    text-align: left;
    font: 700 13.5px 'Manrope', sans-serif;
    transition: background .15s, color .15s;
  }
  .locale-switcher__option:hover, .locale-switcher__option[aria-pressed="true"] {
    background: var(--locale-surface-muted);
    color: var(--locale-accent);
  }
  .front-hero {
    padding-top: 42px;
    padding-bottom: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    gap: clamp(36px, 4vw, 76px);
    align-items: center;
  }
  .front-register {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(420px, 1fr);
    gap: 44px;
    align-items: start;
    padding-top: 54px;
    padding-bottom: 74px;
  }
  .front-register__hero {
    position: sticky;
    top: 110px;
    min-width: 0;
    padding-top: 18px;
  }
  .front-register__title {
    max-width: 520px;
    margin: 10px 0 14px;
    color: var(--front-ink);
    font: 800 48px/1.04 'Sora', sans-serif;
    letter-spacing: -.02em;
  }
  .front-register__subtitle {
    max-width: 480px;
    margin: 0;
    color: var(--front-body);
    font: 500 17px/1.65 'Manrope', sans-serif;
  }
  .front-register__form {
    display: grid;
    gap: 18px;
    min-width: 0;
    border: 1px solid var(--front-line);
    border-radius: 18px;
    background: var(--front-white);
    padding: 24px;
    box-shadow: 0 24px 58px -42px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 58px -42px color-mix(in srgb, var(--front-ink) 45%, transparent);
    }
  }
  .front-register__form--compact {
    gap: 14px;
    padding: 18px;
  }
  .front-register__panel {
    display: grid;
    gap: 14px;
    min-width: 0;
  }
  .front-auth-tabs {
    display: flex;
    gap: 10px;
    padding: 6px;
    margin-bottom: 4px;
    border: 1px solid var(--front-border);
    border-radius: 14px;
    background: var(--front-quiet-subtle);
  }
  .front-auth-tabs__item {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--front-muted);
    font: 800 14px 'Manrope', sans-serif;
    text-decoration: none;
    transition: background .16s, color .16s;
  }
  .front-auth-tabs__item:hover {
    color: var(--front-ink);
  }
  .front-auth-tabs__item.is-active {
    background: var(--front-white);
    color: var(--front-ink);
    box-shadow: 0 8px 22px -18px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 22px -18px color-mix(in srgb, var(--front-ink) 45%, transparent);
    }
  }
  .front-auth-compact {
    grid-template-columns: minmax(0, .76fr) minmax(360px, 430px);
    gap: 30px;
    padding-top: 34px;
    padding-bottom: 44px;
  }
  .front-auth-compact .front-register__hero {
    top: 92px;
    padding-top: 8px;
  }
  .front-auth-compact .front-register__title {
    max-width: 460px;
    font-size: 40px;
  }
  .front-auth-compact .front-register__subtitle {
    max-width: 430px;
    font-size: 15px;
    line-height: 1.55;
  }
  .front-register__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .front-input--plain {
    padding-left: 14px;
  }
  .front-register .front-field__label, .front-live-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--front-muted);
    font: 800 13px 'Manrope', sans-serif;
  }
  .front-register .front-input, .front-live-field input, .front-live-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border-radius: 10px;
    border: 1px solid var(--front-border);
    background: var(--front-quiet-subtle);
    color: var(--front-ink);
    font: 700 15px 'Manrope', sans-serif;
    outline: none;
    transition: border-color .16s, background .16s, box-shadow .16s;
  }
  .front-live-field input {
    padding: 0 14px;
  }
  .front-live-field .front-input-wrap input {
    padding: 0 14px 0 42px;
  }
  .front-live-field textarea {
    padding: 11px 14px;
  }
  .front-register .front-input:focus, .front-live-field input:focus, .front-live-field textarea:focus {
    border-color: var(--front-accent);
    background: var(--front-white);
    box-shadow: 0 0 0 4px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--front-accent) 16%, transparent);
    }
  }
  .front-register .front-field__help {
    margin: 7px 0 0;
    color: var(--front-muted);
    font: 650 13px/1.45 'Manrope', sans-serif;
  }
  .front-field__help-link {
    color: var(--front-accent-strong);
    font-weight: 800;
    text-underline-offset: 3px;
  }
  .front-field__help-link:focus-visible {
    border-radius: 3px;
    outline: 3px solid var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 3px solid color-mix(in srgb, var(--front-accent) 28%, transparent);
    }
    outline-offset: 3px;
  }
  .front-live-field p {
    color: var(--front-muted);
    font: 650 13px/1.45 'Manrope', sans-serif;
  }
  .front-live-field > ul, .front-register .front-field > ul {
    display: grid;
    gap: 5px;
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
    color: var(--front-accent);
    font: 800 13px/1.4 'Manrope', sans-serif;
  }
  .front-legal-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 11px;
    align-items: start;
    border: 1px solid var(--front-border);
    border-radius: 12px;
    background: var(--front-quiet-subtle);
    padding: 14px;
    color: var(--front-body);
    font: 650 13px/1.55 'Manrope', sans-serif;
  }
  .front-legal-consent input {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 0;
    accent-color: var(--front-accent);
    cursor: pointer;
  }
  .front-legal-consent > .front-checkbox {
    grid-column: 1 / -1;
    align-items: flex-start;
  }
  .front-legal-consent a {
    color: var(--front-accent-strong);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  .front-legal-consent a:hover {
    text-decoration-thickness: 3px;
  }
  .front-legal-consent a:focus-visible {
    border-radius: 3px;
    outline: 3px solid var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 3px solid color-mix(in srgb, var(--front-accent) 28%, transparent);
    }
    outline-offset: 3px;
  }
  .front-legal-consent ul {
    grid-column: 1 / -1;
    margin: 0;
    padding-left: 20px;
    color: var(--front-accent);
    font-weight: 800;
  }
  .front-live-field > ul:last-child {
    padding: 12px;
    border: 1px solid var(--front-border);
    border-radius: 12px;
    background: var(--front-quiet-subtle);
    color: var(--front-muted);
  }
  .front-live-field section {
    border-radius: 14px;
    border-color: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-accent) 40%, var(--front-border));
    }
    background: var(--front-quiet-subtle);
  }
  .front-register__submit {
    width: 100%;
    min-height: 50px;
  }
  .trusted-device-prompt {
    position: fixed;
    inset: 0;
    width: min(calc(100% - 32px), 520px);
    max-width: 520px;
    max-height: min(calc(100dvh - 32px), 680px);
    margin: auto;
    overflow: auto;
    padding: 28px;
    border: 1px solid var(--front-border, var(--app-border));
    border-radius: 20px;
    background: var(--front-white, var(--app-surface));
    color: var(--front-ink, var(--app-text));
    box-shadow: 0 28px 80px -24px rgb(15 23 42 / 65%);
    text-align: center;
  }
  .trusted-device-prompt[open] {
    display: block;
  }
  .trusted-device-prompt::backdrop {
    background: rgb(15 23 42 / 68%);
    backdrop-filter: blur(5px);
  }
  .trusted-device-prompt__icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    place-items: center;
    border-radius: 18px;
    background: var(--front-accent, var(--app-accent));
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent, var(--app-accent)) 14%, transparent);
    }
    color: var(--front-accent, var(--app-accent));
  }
  .trusted-device-prompt__icon .ms {
    font-size: 32px;
  }
  .trusted-device-prompt h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
  }
  .trusted-device-prompt > p {
    margin: 10px 0 0;
    color: var(--front-muted, var(--app-muted));
  }
  .trusted-device-prompt__privacy {
    display: flex;
    justify-content: center;
    gap: 7px;
    font-size: .82rem;
  }
  .trusted-device-prompt__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
  }
  .trusted-device-settings {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--front-border, var(--app-border));
  }
  .trusted-device-settings h3, .trusted-device-settings h2 {
    margin: 0;
    font-weight: 800;
  }
  .trusted-device-settings > p {
    margin: 6px 0 0;
    color: var(--front-muted, var(--app-muted));
  }
  .trusted-device-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
  }
  .trusted-device-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--front-border, var(--app-border));
    border-radius: 12px;
    background: var(--front-quiet-subtle, var(--app-subtle));
  }
  .trusted-device-list__item strong, .trusted-device-list__item small {
    display: block;
  }
  .trusted-device-list__item small {
    margin-top: 3px;
    color: var(--front-muted, var(--app-muted));
  }
  .trusted-device-list__icon {
    color: var(--front-accent, var(--app-accent));
    font-size: 26px;
  }
  .trusted-device-list__empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--front-muted, var(--app-muted));
  }
  @media (max-width: 560px) {
    .trusted-device-list__item {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .trusted-device-list__item form {
      grid-column: 1 / -1;
    }
    .trusted-device-list__item form .ui-button {
      width: 100%;
    }
  }
  .front-customer-notification {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: grid;
    place-items: center;
    padding: 24px;
  }
  html.has-customer-notification {
    overflow: hidden;
  }
  .front-customer-notification[hidden] {
    display: none;
  }
  .front-customer-notification__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-ink) 64%, transparent);
    }
    backdrop-filter: blur(5px);
    cursor: pointer;
  }
  .front-customer-notification__card {
    position: relative;
    z-index: 1;
    width: min(100%, 960px);
    max-height: min(92vh, 880px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--front-white) 55%, transparent);
    }
    border-radius: 24px;
    background: var(--front-white);
    box-shadow: 0 32px 90px -25px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 32px 90px -25px color-mix(in srgb, var(--front-ink) 80%, transparent);
    }
  }
  .front-customer-notification__media {
    position: relative;
    flex: 0 0 auto;
    height: clamp(250px, 36vh, 340px);
    overflow: hidden;
    border-bottom: 1px solid var(--front-border);
    background: radial-gradient(circle at 18% 20%, var(--front-accent), transparent 42%), var(--front-quiet-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--front-accent) 12%, transparent), transparent 42%), var(--front-quiet-subtle);
    }
  }
  .front-customer-notification__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .front-customer-notification__image-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--front-muted);
  }
  .front-customer-notification__image-placeholder .ms {
    font-size: 56px;
  }
  .front-customer-notification__image.hidden, .front-customer-notification__image-placeholder.hidden, .front-customer-notification__actions .front-button.hidden {
    display: none;
  }
  .front-customer-notification__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(30px, 4vw, 46px) clamp(30px, 5vw, 56px);
  }
  .front-customer-notification__content h2 {
    margin: 10px 0 0;
    color: var(--front-ink);
    max-width: 760px;
    font: 800 clamp(28px, 3.4vw, 42px)/1.12 'Sora', sans-serif;
  }
  .front-customer-notification__content p {
    max-width: 760px;
    margin: 18px 0 0;
    color: var(--front-body);
    font: 600 16px/1.7 'Manrope', sans-serif;
    white-space: pre-line;
  }
  .front-customer-notification__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    border-top: 1px solid var(--front-border);
    background: var(--front-quiet-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-quiet-subtle) 70%, var(--front-white));
    }
    padding: 20px clamp(30px, 5vw, 56px);
  }
  .front-customer-notification__actions .front-button {
    min-width: 160px;
    justify-content: center;
  }
  .front-customer-notification__card--image-bottom .front-customer-notification__content {
    order: 1;
  }
  .front-customer-notification__card--image-bottom .front-customer-notification__media {
    order: 2;
    border-top: 1px solid var(--front-border);
    border-bottom: 0;
  }
  .front-customer-notification__card--image-bottom .front-customer-notification__actions {
    order: 3;
  }
  .front-customer-notification__card--image-left, .front-customer-notification__card--image-right {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .front-customer-notification__card--image-left {
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    grid-template-areas: "media content" "media actions";
  }
  .front-customer-notification__card--image-right {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    grid-template-areas: "content media" "actions media";
  }
  .front-customer-notification__card--image-left .front-customer-notification__media, .front-customer-notification__card--image-right .front-customer-notification__media {
    grid-area: media;
    height: auto;
    min-height: 520px;
    border-bottom: 0;
  }
  .front-customer-notification__card--image-left .front-customer-notification__media {
    border-right: 1px solid var(--front-border);
  }
  .front-customer-notification__card--image-right .front-customer-notification__media {
    border-left: 1px solid var(--front-border);
  }
  .front-customer-notification__card--image-left .front-customer-notification__content, .front-customer-notification__card--image-right .front-customer-notification__content {
    grid-area: content;
  }
  .front-customer-notification__card--image-left .front-customer-notification__actions, .front-customer-notification__card--image-right .front-customer-notification__actions {
    grid-area: actions;
  }
  .front-customer-notification__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--front-border);
    border-radius: 999px;
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 92%, transparent);
    }
    color: var(--front-ink);
    cursor: pointer;
  }
  .front-customer-notification__close:focus-visible {
    outline: 3px solid var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 3px solid color-mix(in srgb, var(--front-accent) 35%, transparent);
    }
    outline-offset: 3px;
  }
  .front-customer-notification--preview {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    padding: 0;
  }
  .front-customer-notification--preview .front-customer-notification__card {
    width: 100%;
    max-height: none;
    border-color: var(--front-border);
    border-radius: 18px;
    box-shadow: 0 18px 45px -38px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 18px 45px -38px color-mix(in srgb, var(--front-ink) 65%, transparent);
    }
  }
  .front-customer-notification--preview .front-customer-notification__media {
    height: 210px;
  }
  .front-customer-notification--preview .front-customer-notification__card--image-left .front-customer-notification__media, .front-customer-notification--preview .front-customer-notification__card--image-right .front-customer-notification__media {
    height: auto;
    min-height: 430px;
  }
  .front-customer-notification--preview .front-customer-notification__content {
    padding: 24px;
  }
  .front-customer-notification--preview .front-customer-notification__content h2 {
    font-size: clamp(22px, 3vw, 30px);
  }
  .front-customer-notification--preview .front-customer-notification__content p {
    font-size: 14px;
  }
  .front-customer-notification--preview .front-customer-notification__actions {
    padding: 16px 24px;
    pointer-events: none;
  }
  .front-customer-notification--preview .front-customer-notification__actions .front-button {
    min-width: 0;
    min-height: 40px;
    padding: 10px 15px;
    font-size: 12px;
  }
  .front-customer-notification--preview .front-customer-notification__close {
    cursor: default;
  }
  @media (max-width: 760px) {
    .front-customer-notification {
      align-items: end;
      padding: 12px;
    }
    .front-customer-notification__card {
      max-height: 92vh;
      border-radius: 18px;
    }
    .front-customer-notification__media {
      height: 210px;
    }
    .front-customer-notification__card--image-left, .front-customer-notification__card--image-right {
      display: flex;
      flex-direction: column;
    }
    .front-customer-notification__card--image-left .front-customer-notification__media, .front-customer-notification__card--image-right .front-customer-notification__media, .front-customer-notification--preview .front-customer-notification__card--image-left .front-customer-notification__media, .front-customer-notification--preview .front-customer-notification__card--image-right .front-customer-notification__media {
      height: 210px;
      min-height: 0;
      border-right: 0;
      border-bottom: 1px solid var(--front-border);
      border-left: 0;
    }
    .front-customer-notification__content {
      padding: 24px;
    }
    .front-customer-notification__content h2 {
      font-size: 27px;
    }
    .front-customer-notification__actions {
      padding: 16px 24px;
    }
    .front-customer-notification__actions .front-button {
      width: 100%;
    }
  }
  .front-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--front-muted);
    font: 800 13px 'Manrope', sans-serif;
  }
  .front-checkbox input {
    width: 17px;
    height: 17px;
    accent-color: var(--front-accent);
  }
  .front-auth-link, .front-auth-resend {
    justify-content: center;
    width: 100%;
  }
  .front-auth-resend-delay {
    margin: -6px 0 0;
    color: var(--front-muted);
    text-align: center;
    font: 800 13px/1.45 'Manrope', sans-serif;
  }
  .front-code-input {
    text-align: center;
    font: 800 24px 'JetBrains Mono', monospace;
    letter-spacing: .16em;
    padding-left: 42px;
  }
  .front-otp {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
  }
  .front-otp__box {
    width: 100%;
    aspect-ratio: 1;
    min-height: 56px;
    border-radius: 10px;
    border: 1px solid var(--front-border);
    background: var(--front-quiet-subtle);
    color: var(--front-ink);
    text-align: center;
    font: 800 26px 'JetBrains Mono', monospace;
    outline: none;
    transition: border-color .16s, background .16s, box-shadow .16s;
  }
  .front-otp__box:focus {
    border-color: var(--front-accent);
    background: var(--front-white);
    box-shadow: 0 0 0 4px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--front-accent) 16%, transparent);
    }
  }
  .front-register__success {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--app-status);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-status) 12%, var(--front-soft));
    }
    color: var(--app-status);
    font: 800 14px 'Manrope', sans-serif;
  }
  .front-register__success .ms {
    font-size: 22px;
  }
  .front-register__notice {
    margin: 0;
    color: var(--front-muted);
    font: 600 14px/1.55 'Manrope', sans-serif;
  }
  .front-register__company {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--front-border);
    border-radius: 14px;
    background: var(--front-quiet-subtle);
  }
  .front-register__company-name {
    color: var(--front-ink);
    font: 800 16px 'Manrope', sans-serif;
  }
  .front-register__company-country, .front-register__company-address, .front-register__company-row span {
    color: var(--front-muted);
    font: 600 13px/1.5 'Manrope', sans-serif;
  }
  .front-register__company-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--front-border);
  }
  .front-register__company-row strong {
    color: var(--front-ink);
    font: 800 13px 'Manrope', sans-serif;
    text-align: right;
  }
  .ui-auth-shell {
    min-height: 100vh;
    padding-top: 0;
    display: grid;
    align-items: center;
    background: linear-gradient(135deg, var(--front-soft), var(--front-white) 48%), var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--front-soft) 80%, var(--front-white)), var(--front-white) 48%), var(--front-white);
    }
  }
  .ui-auth-shell__layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(390px, 480px);
    gap: 52px;
    align-items: center;
    padding-block: 58px;
  }
  .ui-auth-shell__intro, .ui-auth-shell__panel {
    min-width: 0;
  }
  .ui-auth-shell__logo {
    margin-bottom: 52px;
  }
  .ui-auth-shell__title {
    max-width: 560px;
    margin: 12px 0 14px;
    color: var(--front-ink);
    font: 800 50px/1.04 'Sora', sans-serif;
    letter-spacing: -.02em;
  }
  .ui-auth-shell__description {
    max-width: 500px;
    margin: 0;
    color: var(--front-body);
    font: 500 17px/1.65 'Manrope', sans-serif;
  }
  .ui-auth-shell__back {
    margin-top: 28px;
  }
  .ui-auth-shell__panel {
    position: relative;
    display: grid;
    gap: 18px;
    border: 1px solid var(--front-line);
    border-radius: 20px;
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 96%, transparent);
    }
    padding: 24px;
    box-shadow: 0 28px 70px -44px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 28px 70px -44px color-mix(in srgb, var(--front-ink) 52%, transparent);
    }
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .ui-auth-shell__tools {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 4px;
  }
  .ui-auth-form {
    display: grid;
    gap: 16px;
  }
  .ui-auth-form label, .ui-auth-form .front-live-field label {
    color: var(--front-muted);
    font: 800 12px 'Manrope', sans-serif;
  }
  .ui-auth-form input:not([type="checkbox"]), .ui-auth-form textarea, .ui-auth-form .front-live-field input, .ui-auth-form .front-live-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border-radius: 10px;
    border: 1px solid var(--front-border);
    background: var(--front-quiet-subtle);
    color: var(--front-ink);
    font: 600 14px 'Manrope', sans-serif;
    outline: none;
    transition: border-color .16s, background .16s, box-shadow .16s;
  }
  .ui-auth-form input:not([type="checkbox"]) {
    padding-inline: 14px;
  }
  .ui-auth-form input:not([type="checkbox"]):focus, .ui-auth-form textarea:focus {
    border-color: var(--front-accent);
    background: var(--front-white);
    box-shadow: 0 0 0 4px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--front-accent) 16%, transparent);
    }
  }
  .ui-auth-form input[type="checkbox"] {
    width: 17px;
    height: 17px;
    border-color: var(--front-border);
    accent-color: var(--front-accent);
  }
  .ui-auth-form .front-live-field > ul:last-child {
    margin-top: 8px;
  }
  .admin-shell {
    background: linear-gradient(135deg, var(--app-bg), var(--app-bg) 56%), var(--app-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--app-bg) 82%, var(--app-surface)), var(--app-bg) 56%), var(--app-bg);
    }
    font-family: 'Manrope', sans-serif;
  }
  .admin-shell h1, .admin-shell h2, .admin-shell h3 {
    font-family: 'Sora', sans-serif;
    letter-spacing: 0;
  }
  .admin-shell__content {
    width: min(100%, 1800px);
    margin-inline: auto;
  }
  .admin-sidebar {
    background: var(--app-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-surface) 96%, transparent);
    }
    box-shadow: 22px 0 60px -54px var(--app-text);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 22px 0 60px -54px color-mix(in srgb, var(--app-text) 34%, transparent);
    }
  }
  .admin-sidebar, .admin-topbar {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .admin-topbar {
    background: var(--app-surface-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-surface-solid) 92%, transparent);
    }
    box-shadow: 0 18px 54px -50px var(--app-text);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 18px 54px -50px color-mix(in srgb, var(--app-text) 42%, transparent);
    }
  }
  .admin-shell :where(a, button, input, select, textarea):focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px var(--app-ring);
  }
  .admin-shell :where(input, select, textarea) {
    font-family: 'Manrope', sans-serif;
  }
  .ui-control {
    display: block;
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-surface-solid);
    color: var(--app-text);
    font: 700 14px 'Manrope', sans-serif;
    padding: 0 12px;
    outline: none;
    transition: border-color .16s, background .16s, box-shadow .16s, color .16s;
  }
  .ui-control::placeholder {
    color: var(--app-muted);
    font-weight: 600;
  }
  .ui-control:hover {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
  }
  .ui-control:focus {
    border-color: var(--app-accent);
    background: var(--app-surface-solid);
    box-shadow: 0 0 0 4px var(--app-ring);
  }
  .ui-control:disabled {
    cursor: not-allowed;
    opacity: .68;
    background: var(--app-surface-muted);
    color: var(--app-muted);
  }
  .ui-control--error {
    border-color: rgb(239 68 68);
  }
  .ui-control--error:focus {
    border-color: rgb(239 68 68);
    box-shadow: 0 0 0 4px rgb(239 68 68 / 18%);
  }
  .ui-select-wrap {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
  }
  .ui-select-wrap--full-height {
    height: 100%;
    min-height: 40px;
  }
  .ui-select.ui-select--native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .ui-custom-select__button {
    width: 100%;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-surface-solid);
    color: var(--app-text);
    cursor: pointer;
    font: 700 14px 'Manrope', sans-serif;
    padding: 0 12px;
    text-align: left;
    transition: border-color .16s, background .16s, box-shadow .16s, color .16s;
  }
  .ui-custom-select__button--full-height {
    height: 100%;
    min-height: 40px;
  }
  .ui-custom-select__button span:first-child {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ui-custom-select__button:hover, .ui-select-wrap.is-open .ui-custom-select__button {
    border-color: var(--app-border-strong);
    background: var(--app-surface-muted);
  }
  .ui-select-wrap.is-open .ui-custom-select__button {
    border-color: var(--app-accent);
    background: var(--app-surface-solid);
    box-shadow: 0 0 0 4px var(--app-ring);
  }
  .ui-custom-select__button:disabled {
    cursor: not-allowed;
    opacity: .68;
    background: var(--app-surface-muted);
    color: var(--app-muted);
  }
  .ui-custom-select__button .ms {
    color: var(--app-muted);
    font-size: 18px;
    pointer-events: none;
    transition: transform .16s;
  }
  .ui-select-wrap.is-open .ui-custom-select__button .ms {
    transform: rotate(180deg);
  }
  .ui-custom-select__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 130;
    display: grid;
    gap: 3px;
    max-height: 260px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface-solid);
    box-shadow: 0 24px 50px -32px var(--app-text);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--app-text) 60%, transparent);
    }
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .16s, transform .16s;
  }
  .ui-select-wrap.is-open .ui-custom-select__menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .ui-custom-select__option {
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--app-text);
    cursor: pointer;
    font: 700 13px/1.25 'Manrope', sans-serif;
    padding: 8px 10px;
    text-align: left;
    transition: background .14s, color .14s;
  }
  .ui-custom-select__option:hover, .ui-custom-select__option[aria-selected="true"] {
    background: var(--app-surface-muted);
    color: var(--app-accent);
  }
  .ui-custom-select__option:disabled {
    cursor: not-allowed;
    opacity: .55;
  }
  .admin-account-control {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-surface-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-surface-muted) 74%, var(--app-surface-solid));
    }
  }
  .admin-account-control__label {
    color: var(--app-muted);
    font: 800 12px 'Manrope', sans-serif;
  }
  .front-hero__title {
    color: var(--front-ink);
    font: 800 52px/1.06 'Sora', sans-serif;
    letter-spacing: -.025em;
    margin: 0 0 20px;
  }
  .front-hero__description {
    max-width: 620px;
    color: var(--front-body);
    font: 400 18px/1.55 'Manrope', sans-serif;
    margin: 0 0 30px;
  }
  .ui-toast-stack {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    left: 50%;
    z-index: 260;
    width: min(390px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    display: grid;
    gap: 10px;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .is-native-shell .ui-toast-stack {
    top: calc(max(18px, env(safe-area-inset-top)) + 8px);
    width: min(390px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }
  .ui-toast-stack--front, .is-native-shell .ui-toast-stack--front {
    top: calc(env(safe-area-inset-top) + 86px);
    z-index: 310;
  }
  .ui-alert {
    --alert-accent: var(--app-muted);
    --alert-surface: var(--alert-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-surface: color-mix(in srgb, var(--alert-accent) 7%, var(--app-surface-solid));
    }
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    overflow: hidden;
    padding: 16px 18px;
    border: 1px solid var(--alert-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--alert-accent) 18%, var(--app-border));
    }
    border-radius: 16px;
    background: linear-gradient(135deg, var(--alert-surface), var(--app-surface-solid) 72%);
    color: var(--app-text);
    box-shadow: 0 18px 46px -36px var(--alert-accent), inset 0 1px 0 color-mix(in srgb, #fff 54%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 18px 46px -36px color-mix(in srgb, var(--alert-accent) 58%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 54%, transparent);
    }
    font-family: 'Manrope', sans-serif;
  }
  .ui-alert::before {
    position: absolute;
    inset: 12px auto 12px 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: var(--alert-accent);
    content: "";
  }
  .ui-toast {
    pointer-events: auto;
    transform-origin: 50% 50%;
    border-radius: 18px;
    background: var(--app-surface-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-surface-solid) 88%, transparent);
    }
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    animation: ui-toast-in .34s cubic-bezier(.16, 1, .3, 1) both, ui-toast-out .28s cubic-bezier(.7, 0, .84, 0) 2.72s forwards;
  }
  .ui-alert__icon {
    width: 40px;
    height: 40px;
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid var(--alert-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--alert-accent) 18%, transparent);
    }
    border-radius: 12px;
    background: var(--alert-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--alert-accent) 12%, var(--app-surface-solid));
    }
    color: var(--alert-accent);
  }
  .ui-alert__icon .ms {
    font-size: 23px;
    font-variation-settings: 'FILL' 1, 'wght' 430, 'GRAD' -25, 'opsz' 24;
  }
  .ui-alert__content {
    min-width: 0;
    display: grid;
    flex: 1;
    gap: 4px;
    padding-top: 1px;
  }
  .ui-alert__content strong {
    color: var(--app-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
  }
  .ui-alert__content > span {
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
  }
  .ui-alert--info {
    --alert-accent: var(--app-accent);
  }
  .ui-alert--success {
    --alert-accent: var(--app-status);
  }
  .ui-alert--danger {
    --alert-accent: var(--app-accent-strong);
  }
  @keyframes ui-toast-in {
    from {
      opacity: 0;
      transform: translateY(-24px) scale(.92);
      filter: blur(6px);
    }
    to {
      opacity: 1;
      transform: none;
      filter: none;
    }
  }
  @keyframes ui-toast-out {
    to {
      opacity: 0;
      transform: translateY(-20px) scale(.96);
      filter: blur(4px);
    }
  }
  @media (max-width: 640px) {
    .ui-toast-stack {
      width: min(360px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    }
    .ui-alert {
      min-height: 68px;
      padding: 14px;
      border-radius: 14px;
    }
  }
  .ui-button {
    border-radius: 10px;
    font-family: 'Manrope', sans-serif;
    box-shadow: 0 10px 24px -22px var(--app-text);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 10px 24px -22px color-mix(in srgb, var(--app-text) 42%, transparent);
    }
  }
  .ui-button--primary {
    border-color: var(--app-accent);
    background: var(--app-accent);
    color: #fff;
  }
  .ui-button--primary:hover {
    border-color: var(--app-accent-strong);
    background: var(--app-accent-strong);
    box-shadow: 0 14px 28px -20px var(--app-accent-strong);
  }
  .ui-button--success {
    border-color: var(--app-status);
    background: var(--app-status);
    color: #fff;
  }
  .ui-button--success:hover {
    border-color: var(--app-status);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--app-status) 84%, #000);
    }
    background: var(--app-status);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-status) 84%, #000);
    }
    box-shadow: 0 14px 28px -20px var(--app-status);
  }
  .ui-button--success:focus-visible {
    box-shadow: 0 0 0 4px var(--app-status);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-status) 25%, transparent);
    }
  }
  .ui-button--secondary {
    border-color: var(--app-border);
    background: var(--app-surface-solid);
    color: var(--app-text);
  }
  .ui-button--secondary:hover {
    border-color: var(--app-accent);
    background: var(--app-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-accent) 6%, var(--app-surface-solid));
    }
    color: var(--app-accent-strong);
  }
  .ui-button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--app-muted);
    box-shadow: none;
  }
  .ui-button--ghost:hover {
    background: var(--app-surface-muted);
    color: var(--app-text);
  }
  .ui-button--danger {
    border-color: var(--app-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--app-accent) 40%, var(--app-border));
    }
    background: var(--app-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface-solid));
    }
    color: var(--app-accent-strong);
  }
  .ui-button--danger:hover {
    border-color: var(--app-accent);
    background: var(--app-accent);
    color: #fff;
  }
  .ui-card, .ui-table-shell {
    border: 1px solid var(--app-border);
    border-radius: var(--layout-card-radius);
    background: var(--app-surface-solid);
    color: var(--app-text);
    box-shadow: 0 20px 54px -44px var(--app-text);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 20px 54px -44px color-mix(in srgb, var(--app-text) 44%, transparent);
    }
  }
  .ui-table {
    border-collapse: separate;
    border-spacing: 0;
  }
  .ui-table__head {
    background: var(--app-surface-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-surface-muted) 76%, var(--app-surface-solid));
    }
    color: var(--app-muted);
  }
  .ui-table__row {
    border-top: 1px solid var(--app-border);
  }
  .ui-table__row:hover {
    background: var(--app-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-accent) 4%, var(--app-surface-solid));
    }
  }
  .ui-table__empty, .ui-table__pagination {
    border-color: var(--app-border);
    color: var(--app-muted);
  }
  .ui-page-header {
    border-bottom: 1px solid var(--app-border);
  }
  .ui-back-bar {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-surface-solid) 90%, var(--app-surface-muted));
    }
    padding: 6px 8px;
    box-shadow: 0 12px 30px -28px var(--app-text);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 12px 30px -28px color-mix(in srgb, var(--app-text) 45%, transparent);
    }
  }
  .ui-back-bar__link {
    display: inline-flex;
    min-height: 32px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding-inline: 10px;
    color: var(--app-text);
    font: 750 13px/1 'Manrope', sans-serif;
    transition: background .16s ease, color .16s ease;
  }
  .ui-back-bar__link:hover, .ui-back-bar__link:focus-visible {
    background: var(--app-surface-muted);
    color: var(--app-accent);
    outline: none;
  }
  .ui-back-bar__context {
    min-width: 0;
    overflow: hidden;
    padding-right: 10px;
    color: var(--app-muted);
    font: 650 12px/1.2 'Manrope', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .confirm-submit {
    --confirm-surface: var(--app-surface-solid);
    --confirm-surface-muted: var(--app-surface-muted);
    --confirm-border: var(--app-border);
    --confirm-border-strong: var(--app-border-strong);
    --confirm-text: var(--app-text);
    --confirm-muted: var(--app-muted);
    --confirm-accent: var(--app-accent);
    --confirm-accent-strong: var(--app-accent-strong);
    --confirm-accent-soft: var(--app-accent-soft);
    --confirm-radius: 8px;
    --confirm-title-font: 800 18px 'Sora', sans-serif;
    --confirm-body-font: 600 14px/1.5 'Manrope', sans-serif;
    --confirm-button-font: 800 14px 'Manrope', sans-serif;
    position: fixed;
    inset: 0;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--confirm-radius);
    background: transparent;
    color: var(--confirm-text);
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity .14s ease, transform .14s ease;
  }
  .confirm-submit--front {
    --confirm-surface: var(--front-white);
    --confirm-surface-muted: var(--front-soft);
    --confirm-border: var(--front-border);
    --confirm-border-strong: var(--front-border-strong);
    --confirm-text: var(--front-ink);
    --confirm-muted: var(--front-muted);
    --confirm-accent: var(--front-accent);
    --confirm-accent-strong: var(--front-danger);
    --confirm-accent-soft: var(--front-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --confirm-accent-soft: color-mix(in srgb, var(--front-danger) 10%, var(--front-white));
    }
    --confirm-radius: 14px;
    --confirm-title-font: 800 20px 'Sora', sans-serif;
  }
  .confirm-submit--success {
    --confirm-accent: var(--app-status);
    --confirm-accent-strong: var(--app-status);
    @supports (color: color-mix(in lab, red, red)) {
      --confirm-accent-strong: color-mix(in srgb, var(--app-status) 84%, #000);
    }
    --confirm-accent-soft: var(--app-status);
    @supports (color: color-mix(in lab, red, red)) {
      --confirm-accent-soft: color-mix(in srgb, var(--app-status) 11%, var(--confirm-surface));
    }
  }
  .confirm-submit::backdrop {
    background: var(--confirm-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--confirm-text) 42%, transparent);
    }
    opacity: 0;
    transition: opacity .14s ease;
  }
  .confirm-submit.is-open {
    opacity: 1;
    transform: none;
  }
  .confirm-submit.is-open::backdrop {
    opacity: 1;
  }
  .confirm-submit.is-closing {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  .confirm-submit__panel {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--confirm-border);
    border-radius: var(--confirm-radius);
    background: var(--confirm-surface);
    box-shadow: 0 22px 60px -34px var(--app-shadow), 0 18px 38px -28px var(--confirm-text);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 22px 60px -34px var(--app-shadow), 0 18px 38px -28px color-mix(in srgb, var(--confirm-text) 48%, transparent);
    }
  }
  .confirm-submit__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--confirm-accent-soft);
    color: var(--confirm-accent-strong);
    font: 800 20px 'Manrope', sans-serif;
  }
  .confirm-submit__content {
    min-width: 0;
  }
  .confirm-submit__title {
    margin: 0;
    color: var(--confirm-text);
    font: var(--confirm-title-font);
    letter-spacing: 0;
  }
  .confirm-submit__message {
    margin: 6px 0 0;
    color: var(--confirm-muted);
    font: var(--confirm-body-font);
  }
  .confirm-submit__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
  }
  .confirm-submit__button {
    min-height: 40px;
    padding: 0 15px;
    border-radius: 8px;
    border: 1px solid var(--confirm-border);
    cursor: pointer;
    font: var(--confirm-button-font);
    transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
  }
  .confirm-submit__button--cancel {
    background: var(--confirm-surface);
    color: var(--confirm-text);
  }
  .confirm-submit__button--cancel:hover {
    border-color: var(--confirm-border-strong);
    background: var(--confirm-surface-muted);
  }
  .confirm-submit__button--confirm {
    border-color: var(--confirm-accent);
    background: var(--confirm-accent);
    color: #fff;
  }
  .confirm-submit__button--confirm:hover {
    border-color: var(--confirm-accent-strong);
    background: var(--confirm-accent-strong);
    box-shadow: 0 12px 24px -18px var(--confirm-accent-strong);
  }
  .front-button {
    min-height: 46px;
    padding-inline: 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    font: 800 16px 'Manrope', sans-serif;
    transition: border-color .18s, background .18s, color .18s, box-shadow .18s, transform .18s;
  }
  .front-button:active {
    transform: translateY(1px);
  }
  .front-button:disabled, .front-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .48;
    transform: none;
    box-shadow: none;
  }
  .front-button:disabled:hover, .front-button[aria-disabled="true"]:hover {
    border-color: transparent;
    background: var(--front-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-muted) 18%, var(--front-soft));
    }
    color: var(--front-muted);
  }
  .front-button--primary {
    border-color: var(--front-accent);
    background: var(--front-accent);
    color: var(--front-white);
  }
  .front-button--primary:hover {
    background: var(--front-white);
    border-color: var(--front-accent);
    color: var(--front-accent);
    box-shadow: 0 12px 28px -18px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--front-accent) 72%, transparent);
    }
  }
  .front-button--secondary {
    border-color: var(--front-border);
    background: var(--front-white);
    color: var(--front-ink);
  }
  .front-button--secondary:hover {
    border-color: var(--front-accent);
    background: var(--front-accent);
    color: var(--front-white);
  }
  .front-link-button {
    height: 52px;
    padding-inline: 24px;
    border-radius: 11px;
    border: 1px solid var(--front-border);
    background: var(--front-white);
    color: var(--front-ink);
    font: 700 15px 'Manrope', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: border-color .18s, background .18s, color .18s;
  }
  .front-link-button:hover {
    border-color: var(--front-accent);
    background: var(--front-accent);
    color: var(--front-white);
  }
  .front-button-selector {
    height: 46px;
    padding-inline: 24px;
    border-radius: 10px;
  }
  .front-button-list {
    flex: 1;
    height: 54px;
    border-radius: 11px;
    box-shadow: 0 10px 24px -8px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--front-accent) 50%, transparent);
    }
  }
  .front-button-list .ms {
    font-size: 26px;
  }
  .wishlist-modal-host {
    flex: 1;
    min-width: 0;
  }
  .wishlist-modal-host > .front-button-list {
    width: 100%;
  }
  .wishlist-modal {
    width: min(620px, calc(100vw - 28px));
    max-height: min(760px, calc(100vh - 48px));
    margin: auto;
    border: 1px solid var(--front-border);
    border-radius: 16px;
    padding: 0;
    background: var(--front-white);
    color: var(--front-ink);
    box-shadow: 0 24px 70px -34px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 70px -34px color-mix(in srgb, var(--front-ink) 55%, transparent);
    }
    opacity: 0;
    transform: translateY(18px) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
  }
  .wishlist-modal::backdrop {
    background: var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-ink) 42%, transparent);
    }
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .18s ease;
  }
  .wishlist-modal.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .wishlist-modal.is-open::backdrop {
    opacity: 1;
  }
  .wishlist-modal.is-closing {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }
  .wishlist-modal > div {
    display: grid;
    gap: 18px;
    padding: 24px;
  }
  .wishlist-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
  }
  .wishlist-modal__title {
    margin: 7px 0 0;
    color: var(--front-ink);
    font: 800 26px/1.12 'Sora', sans-serif;
  }
  .wishlist-modal__subtitle {
    margin: 9px 0 0;
    color: var(--front-muted);
    font: 700 15px/1.5 'Manrope', sans-serif;
  }
  .wishlist-modal__close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    border: 1px solid var(--front-border);
    border-radius: 10px;
    background: var(--front-white);
    color: var(--front-muted);
    cursor: pointer;
  }
  .wishlist-modal__close .ms {
    font-size: 24px;
  }
  .wishlist-modal__body, .wishlist-modal__list, .wishlist-modal__create {
    display: grid;
    gap: 12px;
  }
  .wishlist-modal__list {
    max-height: 260px;
    overflow: auto;
    padding-right: 4px;
  }
  .wishlist-modal__item {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--front-border);
    border-radius: 12px;
    background: var(--front-quiet-subtle);
    color: var(--front-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s, background .16s, color .16s;
  }
  .wishlist-modal__item:hover {
    border-color: var(--front-accent);
    background: var(--front-white);
  }
  .wishlist-modal__item strong, .wishlist-modal__item small {
    display: block;
  }
  .wishlist-modal__item strong {
    font: 800 15px 'Manrope', sans-serif;
  }
  .wishlist-modal__item small {
    margin-top: 3px;
    color: var(--front-muted);
    font: 700 13px 'Manrope', sans-serif;
  }
  .wishlist-modal__item-action {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0 11px;
    border-radius: 9px;
    background: var(--front-accent);
    color: var(--front-white);
    font: 800 13px 'Manrope', sans-serif;
    transition: background .16s, color .16s, transform .16s;
  }
  .wishlist-modal__item:hover .wishlist-modal__item-action {
    background: var(--front-ink);
    transform: translateX(1px);
  }
  .wishlist-modal__item-action .ms {
    color: currentColor;
    font-size: 20px;
  }
  .wishlist-modal__item > .ms {
    color: var(--front-accent);
    font-size: 25px;
  }
  .wishlist-modal__empty {
    min-height: 64px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--front-border);
    border-radius: 12px;
    color: var(--front-muted);
    font: 800 14px 'Manrope', sans-serif;
  }
  .wishlist-modal__create {
    padding-top: 12px;
    border-top: 1px solid var(--front-border);
  }
  .wishlist-modal__create .front-button {
    width: 100%;
  }
  .wishlist-modal__error {
    margin: 0;
    color: var(--front-accent);
    font: 800 13px/1.4 'Manrope', sans-serif;
  }
  .wishlist-modal__success {
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 13px;
    background: var(--app-status);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-status) 12%, var(--front-soft));
    }
    color: var(--app-status);
    font: 800 15px/1.45 'Manrope', sans-serif;
  }
  .wishlist-modal__success .ms {
    font-size: 28px;
  }
  .wishlist-modal__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .wishlist-modal__submit {
    grid-column: 1 / -1;
  }
  .wishlist-modal__submit .front-button {
    width: 100%;
  }
  .front-product-card__wishlist {
    flex: 0 0 auto;
    min-width: auto;
  }
  .front-account-dashboard {
    width: min(100%, var(--layout-content-max));
    margin: 0 auto;
    padding: 44px var(--layout-gutter) 72px;
    display: grid;
    gap: 24px;
  }
  .front-account-dashboard__overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 44px;
  }
  .front-account-dashboard__hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    overflow: hidden;
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--front-accent) 34%, #17202b);
    }
    border-radius: 22px;
    background: radial-gradient(circle at 92% 12%, var(--front-accent), transparent 30%), linear-gradient(140deg, #101820 0%, #202c37 68%, #16232d 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--front-accent) 34%, transparent), transparent 30%), linear-gradient(140deg, #101820 0%, #202c37 68%, #16232d 100%);
    }
    box-shadow: 0 28px 70px -42px rgb(15 24 32 / 85%);
  }
  .front-account-dashboard__hero::after {
    position: absolute;
    z-index: -1;
    right: -74px;
    bottom: -112px;
    width: 290px;
    height: 290px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%;
    content: '';
  }
  .front-account-dashboard__hero .front-section__eyebrow {
    color: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-accent) 72%, #fff);
    }
  }
  .front-account-dashboard__hero-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
  }
  .front-account-dashboard__hero-actions .ui-button--ghost {
    border-color: rgb(255 255 255 / 18%);
    color: rgb(255 255 255 / 78%);
  }
  .front-account-dashboard__hero-actions .ui-button--ghost:hover, .front-account-dashboard__hero-actions .ui-button--secondary:hover {
    border-color: rgb(255 255 255 / 35%);
    background: rgb(255 255 255 / 12%);
    color: #fff;
  }
  .front-account-dashboard__hero-actions .ui-button--secondary {
    border-color: rgb(255 255 255 / 22%);
    background: rgb(255 255 255 / 8%);
    color: #fff;
  }
  .front-account-dashboard__hero h1, .front-account-panel__head h2 {
    margin: 7px 0 0;
    color: var(--front-ink);
    font: 800 28px/1.1 'Sora', sans-serif;
  }
  .front-account-dashboard__hero p {
    max-width: 680px;
    margin: 10px 0 0;
    color: rgb(255 255 255 / 70%);
    font: 700 16px/1.55 'Manrope', sans-serif;
  }
  .front-account-dashboard__hero h1 {
    color: #fff;
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -.035em;
  }
  .front-account-dashboard__stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: -34px clamp(18px, 4vw, 52px) 0;
  }
  .front-account-dashboard__overview .front-account-stat {
    min-height: 118px;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 20px 46px -32px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 20px 46px -32px color-mix(in srgb, var(--front-ink) 56%, transparent);
    }
  }
  .front-account-dashboard__overview .front-account-stat strong {
    font-size: clamp(24px, 3vw, 32px);
  }
  .front-account-dashboard__profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .front-account-dashboard__profile-grid > :only-child {
    grid-column: 1 / -1;
  }
  .front-account-security-frame {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .front-account-security-frame > .ui-toast-stack {
    grid-column: 1 / -1;
  }
  turbo-frame[busy] {
    opacity: .64;
    transition: opacity .16s ease;
  }
  .front-account-completion {
    --completion-accent: var(--front-accent);
    display: grid;
    gap: 24px;
    overflow: hidden;
    border: 1px solid var(--completion-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--completion-accent) 20%, var(--front-border));
    }
    border-radius: 20px;
    background: radial-gradient(circle at 100% 0, var(--completion-accent), transparent 34%), linear-gradient(145deg, var(--front-white), var(--completion-accent));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--completion-accent) 11%, transparent), transparent 34%), linear-gradient(145deg, var(--front-white), color-mix(in srgb, var(--completion-accent) 3%, var(--front-white)));
    }
    padding: clamp(22px, 3vw, 32px);
    box-shadow: 0 24px 64px -48px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 64px -48px color-mix(in srgb, var(--front-ink) 48%, transparent);
    }
  }
  .front-account-completion.is-complete {
    --completion-accent: var(--front-success);
  }
  .front-account-completion__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
  .front-account-completion__heading h2 {
    margin: 7px 0 8px;
    color: var(--front-ink);
    font: 800 clamp(23px, 3vw, 29px)/1.15 'Sora', sans-serif;
    letter-spacing: -.015em;
  }
  .front-account-completion__heading p {
    max-width: 720px;
    margin: 0;
    color: var(--front-muted);
    font: 650 14px/1.6 'Manrope', sans-serif;
  }
  .front-account-completion__level {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    border: 1px solid var(--completion-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--completion-accent) 22%, var(--front-border));
    }
    border-radius: 999px;
    background: var(--completion-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--completion-accent) 8%, var(--front-white));
    }
    padding: 9px 13px;
    color: var(--completion-accent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--completion-accent) 84%, var(--front-ink));
    }
    font: 800 12px/1.25 'Manrope', sans-serif;
  }
  .front-account-completion__level .ms {
    font-size: 19px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' -25, 'opsz' 20;
  }
  .front-account-completion__body {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
  }
  .front-account-completion__score {
    position: relative;
    width: 164px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--front-white) 59%, transparent 60%), conic-gradient(var(--completion-accent) var(--account-completion), var(--front-line) 0);
    box-shadow: 0 20px 44px -30px var(--completion-accent), inset 0 0 0 1px var(--completion-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 20px 44px -30px color-mix(in srgb, var(--completion-accent) 68%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--completion-accent) 8%, transparent);
    }
  }
  .front-account-completion__score::after {
    position: absolute;
    inset: 10px;
    border: 1px solid var(--completion-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--completion-accent) 12%, transparent);
    }
    border-radius: inherit;
    content: "";
  }
  .front-account-completion__score > div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
    text-align: center;
  }
  .front-account-completion__score strong {
    color: var(--front-ink);
    font: 800 42px/1 'Sora', sans-serif;
    letter-spacing: -.04em;
  }
  .front-account-completion__score strong small {
    color: var(--completion-accent);
    font-size: 20px;
  }
  .front-account-completion__score span {
    color: var(--front-muted);
    font: 800 10px/1.2 'Manrope', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .front-account-completion__details {
    min-width: 0;
    display: grid;
    gap: 18px;
  }
  .front-account-completion__progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--front-line);
  }
  .front-account-completion__progress::-webkit-progress-bar {
    border-radius: inherit;
    background: var(--front-line);
  }
  .front-account-completion__progress::-webkit-progress-value {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--front-accent), var(--completion-accent));
  }
  .front-account-completion__progress::-moz-progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--front-accent), var(--completion-accent));
  }
  .front-account-completion__checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .front-account-completion__checklist li {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--front-line);
    border-radius: 13px;
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 90%, transparent);
    }
    padding: 11px 12px;
  }
  .front-account-completion__checklist li.is-complete {
    border-color: var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-success) 18%, var(--front-line));
    }
  }
  .front-account-completion__checklist li.is-missing {
    border-color: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-accent) 20%, var(--front-line));
    }
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 3%, var(--front-white));
    }
  }
  .front-account-completion__item-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--front-soft);
    color: var(--front-muted);
  }
  .is-complete .front-account-completion__item-icon {
    background: var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-success) 12%, var(--front-white));
    }
    color: var(--front-success);
  }
  .is-missing .front-account-completion__item-icon {
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 10%, var(--front-white));
    }
    color: var(--front-accent);
  }
  .front-account-completion__item-icon .ms {
    font-size: 19px;
    font-variation-settings: 'FILL' 1, 'wght' 450, 'GRAD' -25, 'opsz' 20;
  }
  .front-account-completion__checklist li > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .front-account-completion__checklist strong {
    overflow: hidden;
    color: var(--front-ink);
    font: 800 12px/1.3 'Manrope', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .front-account-completion__checklist small {
    overflow: hidden;
    color: var(--front-muted);
    font: 650 10.5px/1.35 'Manrope', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .front-account-completion__points {
    color: var(--front-muted);
    font: 800 10px/1 'Manrope', sans-serif;
    white-space: nowrap;
  }
  .is-complete .front-account-completion__points {
    color: var(--front-success);
  }
  .front-account-security {
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--front-border);
    border-radius: 16px;
    background: var(--front-white);
    box-shadow: var(--front-shadow-soft);
  }
  .front-account-trusted-devices.trusted-device-settings {
    display: grid;
    align-content: start;
    gap: 16px;
    margin: 0;
    padding: 24px;
    border: 1px solid var(--front-border);
    border-radius: 16px;
    background: var(--front-white);
    box-shadow: var(--front-shadow-soft);
  }
  .front-account-trusted-devices.trusted-device-settings > p, .front-account-trusted-devices.trusted-device-settings .trusted-device-list {
    margin: 0;
  }
  .front-account-trusted-devices__icon {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 13px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 9%, var(--front-white));
    }
    color: var(--front-accent);
    font-size: 23px;
  }
  .front-account-security__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .front-account-security__heading h2 {
    margin: 6px 0 0;
    color: var(--front-ink);
    font: 800 22px/1.15 'Sora', sans-serif;
  }
  .front-account-security__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 9px 13px;
    font: 800 12px/1.25 'Manrope', sans-serif;
  }
  .front-account-security__status.is-enabled {
    background: var(--app-status);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--app-status) 13%, var(--front-white));
    }
    color: var(--app-status);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--app-status) 78%, #000);
    }
  }
  .front-account-security__status.is-disabled {
    background: var(--front-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-danger) 12%, var(--front-white));
    }
    color: var(--front-danger);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-danger) 82%, #000);
    }
  }
  .front-account-security form {
    justify-self: start;
  }
  .front-account-stat {
    min-height: 112px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--front-border);
    border-radius: 14px;
    background: var(--front-white);
  }
  .front-account-stat .ms {
    color: var(--front-accent);
    font-size: 28px;
  }
  .front-account-stat strong {
    color: var(--front-ink);
    font: 800 28px/1 'Sora', sans-serif;
  }
  .front-account-stat small {
    color: var(--front-muted);
    font: 800 13px/1.35 'Manrope', sans-serif;
  }
  .front-account-tabs-group {
    display: grid;
    gap: 24px;
  }
  .front-account-tabs__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .front-account-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px;
    border: 1px solid var(--front-border);
    border-radius: 14px;
    background: var(--front-quiet-subtle);
  }
  .front-account-tabs__item {
    flex: 1 1 220px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 10px;
    color: var(--front-muted);
    font: 800 14px 'Manrope', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s, color .16s;
  }
  .front-account-tabs__item .ms {
    font-size: 22px;
  }
  .front-account-tabs__badge {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--front-accent);
    color: var(--front-white);
    padding: 0 7px;
    font: 900 12px/1 'Manrope', sans-serif;
  }
  .front-account-tabs__item:hover {
    background: var(--front-white);
    color: var(--front-ink);
    box-shadow: 0 8px 22px -18px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 22px -18px color-mix(in srgb, var(--front-ink) 45%, transparent);
    }
  }
  #account-tab-wishlists:focus-visible ~ .front-account-tabs label[for="account-tab-wishlists"], #account-tab-offers:focus-visible ~ .front-account-tabs label[for="account-tab-offers"], #account-tab-savings:focus-visible ~ .front-account-tabs label[for="account-tab-savings"], #account-tab-warranties:focus-visible ~ .front-account-tabs label[for="account-tab-warranties"] {
    outline: 2px solid var(--front-accent);
    outline-offset: 2px;
  }
  .front-account-panel {
    display: none;
    gap: 16px;
    scroll-margin-top: 110px;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid var(--front-border);
    border-radius: 20px;
    background: var(--front-white);
    box-shadow: 0 24px 60px -48px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 60px -48px color-mix(in srgb, var(--front-ink) 48%, transparent);
    }
  }
  #account-tab-wishlists:checked ~ .front-account-tabs label[for="account-tab-wishlists"], #account-tab-offers:checked ~ .front-account-tabs label[for="account-tab-offers"], #account-tab-savings:checked ~ .front-account-tabs label[for="account-tab-savings"], #account-tab-warranties:checked ~ .front-account-tabs label[for="account-tab-warranties"] {
    background: var(--front-white);
    color: var(--front-ink);
    box-shadow: 0 8px 22px -18px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 22px -18px color-mix(in srgb, var(--front-ink) 45%, transparent);
    }
  }
  #account-tab-wishlists:checked ~ .front-account-panel--wishlists, #account-tab-offers:checked ~ .front-account-panel--offers, #account-tab-savings:checked ~ .front-account-panel--savings, #account-tab-warranties:checked ~ .front-account-panel--warranties {
    display: grid;
  }
  .front-account-panel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }
  .front-account-panel__description {
    max-width: 760px;
    margin: -6px 0 2px;
    color: var(--front-muted);
    font: 650 14px/1.55 'Manrope', sans-serif;
  }
  .front-account-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 46px);
    align-items: start;
  }
  .front-account-sidebar {
    position: sticky;
    top: 94px;
    min-width: 0;
    padding-right: 18px;
    border-right: 1px solid var(--front-border);
  }
  .front-account-layout .front-account-tabs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .front-account-layout .front-account-tabs__item {
    position: relative;
    flex: none;
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--front-muted);
    text-align: left;
  }
  .front-account-layout .front-account-tabs__item::before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -19px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    content: '';
  }
  .front-account-layout .front-account-tabs__item > .ms:first-child {
    color: var(--front-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-muted) 78%, var(--front-ink));
    }
    font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' -25, 'opsz' 24;
  }
  .front-account-layout .front-account-tabs__badge, .front-account-tabs__alert {
    margin-left: auto;
  }
  .front-account-tabs__alert {
    width: 24px;
    height: 24px;
    display: inline-grid;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 50%;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 11%, var(--front-white));
    }
    color: var(--front-accent);
  }
  .front-account-tabs__alert .ms {
    font-size: 17px;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' -25, 'opsz' 18;
  }
  .front-account-content {
    min-width: 0;
  }
  .front-account-layout .front-account-panel {
    padding: 0 0 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #account-tab-wishlists:focus-visible ~ .front-account-sidebar label[for="account-tab-wishlists"], #account-tab-offers:focus-visible ~ .front-account-sidebar label[for="account-tab-offers"], #account-tab-savings:focus-visible ~ .front-account-sidebar label[for="account-tab-savings"], #account-tab-warranties:focus-visible ~ .front-account-sidebar label[for="account-tab-warranties"], #account-tab-security:focus-visible ~ .front-account-sidebar label[for="account-tab-security"] {
    outline: 2px solid var(--front-accent);
    outline-offset: 2px;
  }
  #account-tab-wishlists:checked ~ .front-account-sidebar label[for="account-tab-wishlists"], #account-tab-offers:checked ~ .front-account-sidebar label[for="account-tab-offers"], #account-tab-savings:checked ~ .front-account-sidebar label[for="account-tab-savings"], #account-tab-warranties:checked ~ .front-account-sidebar label[for="account-tab-warranties"], #account-tab-security:checked ~ .front-account-sidebar label[for="account-tab-security"] {
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 6%, var(--front-white));
    }
    color: var(--front-ink);
    box-shadow: none;
  }
  #account-tab-wishlists:checked ~ .front-account-sidebar label[for="account-tab-wishlists"]::before, #account-tab-offers:checked ~ .front-account-sidebar label[for="account-tab-offers"]::before, #account-tab-savings:checked ~ .front-account-sidebar label[for="account-tab-savings"]::before, #account-tab-warranties:checked ~ .front-account-sidebar label[for="account-tab-warranties"]::before, #account-tab-security:checked ~ .front-account-sidebar label[for="account-tab-security"]::before {
    background: var(--front-accent);
  }
  #account-tab-wishlists:checked ~ .front-account-content .front-account-panel--wishlists, #account-tab-offers:checked ~ .front-account-content .front-account-panel--offers, #account-tab-savings:checked ~ .front-account-content .front-account-panel--savings, #account-tab-warranties:checked ~ .front-account-content .front-account-panel--warranties, #account-tab-security:checked ~ .front-account-content .front-account-panel--security {
    display: grid;
  }
  #distributor-tab-overview:focus-visible ~ .front-account-sidebar label[for="distributor-tab-overview"], #distributor-tab-offers:focus-visible ~ .front-account-sidebar label[for="distributor-tab-offers"], #distributor-tab-orders:focus-visible ~ .front-account-sidebar label[for="distributor-tab-orders"], #distributor-tab-customers:focus-visible ~ .front-account-sidebar label[for="distributor-tab-customers"], #distributor-tab-account:focus-visible ~ .front-account-sidebar label[for="distributor-tab-account"] {
    outline: 2px solid var(--front-accent);
    outline-offset: 2px;
  }
  #distributor-tab-overview:checked ~ .front-account-sidebar label[for="distributor-tab-overview"], #distributor-tab-offers:checked ~ .front-account-sidebar label[for="distributor-tab-offers"], #distributor-tab-orders:checked ~ .front-account-sidebar label[for="distributor-tab-orders"], #distributor-tab-customers:checked ~ .front-account-sidebar label[for="distributor-tab-customers"], #distributor-tab-account:checked ~ .front-account-sidebar label[for="distributor-tab-account"] {
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 6%, var(--front-white));
    }
    color: var(--front-ink);
    box-shadow: none;
  }
  #distributor-tab-overview:checked ~ .front-account-sidebar label[for="distributor-tab-overview"]::before, #distributor-tab-offers:checked ~ .front-account-sidebar label[for="distributor-tab-offers"]::before, #distributor-tab-orders:checked ~ .front-account-sidebar label[for="distributor-tab-orders"]::before, #distributor-tab-customers:checked ~ .front-account-sidebar label[for="distributor-tab-customers"]::before, #distributor-tab-account:checked ~ .front-account-sidebar label[for="distributor-tab-account"]::before {
    background: var(--front-accent);
  }
  #distributor-tab-overview:checked ~ .front-account-content .front-account-panel--distributor-overview, #distributor-tab-offers:checked ~ .front-account-content .front-account-panel--distributor-offers, #distributor-tab-orders:checked ~ .front-account-content .front-account-panel--distributor-orders, #distributor-tab-customers:checked ~ .front-account-content .front-account-panel--distributor-customers, #distributor-tab-account:checked ~ .front-account-content .front-account-panel--distributor-account {
    display: grid;
  }
  .front-distributor-layout .front-distributor-dashboard__work h3 {
    margin: 0;
    color: var(--front-ink);
    font: 800 18px/1.25 'Sora', sans-serif;
  }
  .front-account-panel--distributor-account .front-distributor-dashboard__security-frame {
    display: block;
    margin-top: 8px;
  }
  @media (max-width: 1180px) {
    .front-distributor-layout .front-distributor-dashboard__charts {
      grid-template-columns: 1fr;
    }
  }
  .front-account-panel--security .front-account-security-frame {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .front-account-panel--security :is(.front-account-security, .front-account-trusted-devices.trusted-device-settings) {
    padding: 24px 0;
    border: 0;
    border-bottom: 1px solid var(--front-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .front-page-intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(18px, 3vw, 30px);
    padding: clamp(8px, 2vw, 18px) 0 clamp(24px, 4vw, 38px);
    border-bottom: 1px solid var(--front-border);
  }
  .front-page-intro::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: clamp(72px, 10vw, 124px);
    height: 3px;
    border-radius: 999px;
    background: var(--front-accent);
    content: '';
  }
  .front-page-intro__identity {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 3vw, 30px);
  }
  .front-page-intro__mark {
    width: clamp(58px, 7vw, 76px);
    height: clamp(58px, 7vw, 76px);
    display: grid;
    place-items: center;
    border: 1px solid var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--front-accent) 28%, var(--front-border));
    }
    border-radius: 50%;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 7%, var(--front-white));
    }
    color: var(--front-accent);
  }
  .front-page-intro__mark .ms {
    font-size: clamp(30px, 4vw, 40px);
    font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' -25, 'opsz' 40;
  }
  .front-page-intro h1 {
    max-width: 760px;
    margin: 7px 0 0;
    color: var(--front-ink);
    font: 800 clamp(30px, 4vw, 44px)/1.08 'Sora', sans-serif;
    letter-spacing: -.035em;
  }
  .front-page-intro p {
    max-width: 720px;
    margin: 10px 0 0;
    color: var(--front-muted);
    font: 650 16px/1.6 'Manrope', sans-serif;
  }
  .front-page-intro__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
  }
  .front-warranty-registration__form-card, .front-warranty-registration__details, .front-warranty-registration__documents article {
    border: 1px solid var(--front-border);
    border-radius: 16px;
    background: var(--front-white);
    box-shadow: 0 18px 45px -38px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 18px 45px -38px color-mix(in srgb, var(--front-ink) 38%, transparent);
    }
  }
  .front-warranty-registration__form-card {
    width: 100%;
    padding: clamp(20px, 4vw, 36px);
  }
  .front-warranty-form {
    display: grid;
    gap: 22px;
  }
  .front-warranty-form .front-field__label {
    color: var(--front-ink);
  }
  .front-warranty-form__grid, .front-warranty-form__uploads, .front-warranty-registration__details, .front-warranty-registration__documents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .ui-dropzone__surface {
    min-height: 230px;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 24px;
    border: 1.5px dashed var(--front-border);
    border-radius: 14px;
    background: var(--front-quiet-subtle);
    text-align: center;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .ui-dropzone__surface:hover, .ui-dropzone__surface.is-dragging, .ui-dropzone__surface.has-file {
    border-color: var(--front-accent);
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 7%, var(--front-white));
    }
    box-shadow: 0 0 0 3px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--front-accent) 8%, transparent);
    }
  }
  .ui-dropzone:focus-within .ui-dropzone__surface {
    outline: 2px solid var(--front-accent);
    outline-offset: 3px;
  }
  .ui-dropzone.has-error .ui-dropzone__surface {
    border-color: #b42318;
  }
  .ui-dropzone__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 16px;
    background: var(--front-white);
    color: var(--front-accent);
    box-shadow: 0 14px 28px -24px var(--front-ink);
  }
  .ui-dropzone__surface strong {
    color: var(--front-ink);
    font: 800 15px 'Manrope', sans-serif;
  }
  .ui-dropzone__surface > span:not(.ui-dropzone__icon):not(.ui-dropzone__action) {
    color: var(--front-muted);
    font: 600 12px/1.5 'Manrope', sans-serif;
  }
  .ui-dropzone__action {
    margin-top: 6px;
    color: var(--front-accent);
    font: 800 12px 'Manrope', sans-serif;
  }
  .front-warranty-form__submit {
    justify-self: start;
  }
  .front-warranty-registration__details {
    padding: 22px;
  }
  .front-warranty-registration__product {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .front-warranty-registration__product img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 12px;
    background: var(--front-quiet-subtle);
  }
  .front-warranty-registration__product div {
    display: grid;
    gap: 5px;
  }
  .front-warranty-registration__product strong {
    color: var(--front-ink);
    font: 800 16px/1.35 'Sora', sans-serif;
  }
  .front-warranty-registration__product span, .front-warranty-registration__documents p {
    color: var(--front-muted);
    font: 650 13px/1.5 'Manrope', sans-serif;
  }
  .front-warranty-registration__meta {
    display: grid;
    gap: 12px;
    margin: 0;
  }
  .front-warranty-registration__meta div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--front-border);
  }
  .front-warranty-registration__meta dt {
    color: var(--front-muted);
    font: 650 13px 'Manrope', sans-serif;
  }
  .front-warranty-registration__meta dd {
    margin: 0;
    color: var(--front-ink);
    font: 800 13px 'Manrope', sans-serif;
    text-align: right;
  }
  .front-warranty-registration__documents article {
    padding: 18px;
  }
  .front-warranty-registration__documents h2 {
    margin: 0 0 14px;
    color: var(--front-ink);
    font: 800 15px 'Sora', sans-serif;
  }
  .front-warranty-registration__documents img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 10px;
    background: var(--front-quiet-subtle);
  }
  .front-account-savings__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .front-account-savings__chart-card {
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 2.5vw, 26px);
    border: 1px solid var(--front-border);
    border-radius: 18px;
    background: radial-gradient(circle at 100% 0, var(--front-accent), transparent 30%), linear-gradient(180deg, var(--front-white), var(--front-quiet));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--front-accent) 7%, transparent), transparent 30%), linear-gradient(180deg, var(--front-white), color-mix(in srgb, var(--front-quiet) 58%, var(--front-white)));
    }
    box-shadow: 0 24px 58px -48px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 58px -48px color-mix(in srgb, var(--front-ink) 44%, transparent);
    }
  }
  .front-account-savings__chart-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--front-accent), var(--front-accent));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(180deg, var(--front-accent), color-mix(in srgb, var(--front-accent) 20%, transparent));
    }
  }
  .front-account-savings__chart-heading {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .front-account-savings__chart-heading > .ms {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--front-accent) 16%, var(--front-border));
    }
    border-radius: 12px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 7%, var(--front-white));
    }
    color: var(--front-accent);
    font-size: 23px;
  }
  .front-account-savings__chart-card h3 {
    margin: 0;
    color: var(--front-ink);
    font: 800 18px/1.3 'Sora', sans-serif;
  }
  .front-account-savings__chart-card p {
    margin: 6px 0 0;
    color: var(--front-text-muted);
    font: 650 13px/1.5 'Manrope', sans-serif;
  }
  .front-account-savings__chart {
    width: 100%;
    height: 360px;
    min-height: 360px;
    margin-top: 18px;
  }
  .front-distributor-dashboard__overview {
    gap: 18px;
  }
  .front-distributor-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .front-distributor-offer-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
  }
  .front-distributor-offer-totals__card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 158px;
    display: grid;
    align-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid var(--front-border);
    border-radius: 20px;
    background: radial-gradient(circle at 100% 0, var(--total-accent), transparent 42%), var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--total-accent) 11%, transparent), transparent 42%), var(--front-white);
    }
    box-shadow: 0 24px 56px -46px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 56px -46px color-mix(in srgb, var(--front-ink) 52%, transparent);
    }
  }
  .front-distributor-offer-totals__card::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -50px;
    right: -38px;
    width: 130px;
    height: 130px;
    border: 1px solid var(--total-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--total-accent) 13%, transparent);
    }
    border-radius: 50%;
  }
  .front-distributor-offer-totals__card--customer {
    --total-accent: var(--front-ink);
  }
  .front-distributor-offer-totals__card--distributor {
    --total-accent: var(--front-accent);
    border-color: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-accent) 22%, var(--front-border));
    }
  }
  .front-distributor-offer-totals__heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
  }
  .front-distributor-offer-totals__heading > .ms {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 13px;
    background: var(--total-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--total-accent) 9%, var(--front-white));
    }
    color: var(--total-accent);
    font-size: 23px;
  }
  .front-distributor-offer-totals__heading div {
    min-width: 0;
    display: grid;
    gap: 4px;
  }
  .front-distributor-offer-totals__heading small {
    color: var(--front-ink);
    font: 800 13px/1.3 'Manrope', sans-serif;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  .front-distributor-offer-totals__heading p {
    margin: 0;
    color: var(--front-muted);
    font: 650 12px/1.4 'Manrope', sans-serif;
  }
  .front-distributor-offer-totals__card > strong {
    color: var(--front-ink);
    font: 800 clamp(25px, 3vw, 34px)/1 'Sora', sans-serif;
    letter-spacing: -.035em;
  }
  .front-distributor-offer-totals__card--distributor > strong {
    color: var(--front-accent);
  }
  .front-distributor-offer-totals__card > strong span {
    color: var(--front-muted);
    font: 800 11px/1 'Manrope', sans-serif;
    letter-spacing: .04em;
  }
  .front-distributor-dashboard__work, .front-distributor-dashboard__performance {
    display: grid;
    gap: 18px;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid var(--front-border);
    border-radius: 22px;
    background: var(--front-white);
    box-shadow: var(--front-shadow-soft);
  }
  .front-distributor-dashboard__security-frame .trusted-device-settings {
    margin: 0;
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid var(--front-border);
    border-radius: 20px;
    background: var(--front-white);
    box-shadow: var(--front-shadow-soft);
  }
  .front-distributor-dashboard__charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .front-distributor-dashboard__chart {
    height: 300px;
    min-height: 300px;
  }
  .front-distributor-dashboard__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .front-distributor-dashboard__details article, .front-distributor-dashboard__details a {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--front-border);
    border-radius: 14px;
    background: var(--front-white);
    color: var(--front-ink);
    text-decoration: none;
  }
  .front-distributor-dashboard__details a {
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  .front-distributor-dashboard__details a:hover {
    border-color: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-accent) 34%, var(--front-border));
    }
    box-shadow: 0 18px 38px -34px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 18px 38px -34px color-mix(in srgb, var(--front-ink) 42%, transparent);
    }
    transform: translateY(-1px);
  }
  .front-distributor-dashboard__details .ms {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 8%, var(--front-white));
    }
    color: var(--front-accent);
    font-size: 24px;
  }
  .front-distributor-dashboard__details div {
    min-width: 0;
    display: grid;
    gap: 4px;
  }
  .front-distributor-dashboard__details small {
    color: var(--front-muted);
    font: 750 12px/1.3 'Manrope', sans-serif;
  }
  .front-distributor-dashboard__details strong {
    overflow: hidden;
    color: var(--front-ink);
    font: 800 14px/1.35 'Sora', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .front-support-page {
    width: min(100%, var(--layout-content-max));
    margin: 0 auto;
    padding: 44px var(--layout-gutter) 72px;
    display: grid;
    gap: 24px;
  }
  .front-support-page__intro-action {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 8px 15px;
    border: 1px solid var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--front-accent) 24%, var(--front-border));
    }
    border-radius: 12px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 5%, var(--front-white));
    }
    color: var(--front-ink);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .front-support-page__intro-action:hover {
    border-color: var(--front-accent);
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 9%, var(--front-white));
    }
    transform: translateY(-1px);
  }
  .front-support-page__intro-action > .ms {
    color: var(--front-accent);
    font-size: 24px;
  }
  .front-support-page__intro-action span:last-child {
    display: grid;
    gap: 2px;
  }
  .front-support-page__intro-action small {
    color: var(--front-muted);
    font: 750 10px/1.2 'Manrope', sans-serif;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  .front-support-page__intro-action strong {
    font: 800 15px/1.25 'Sora', sans-serif;
  }
  .front-support-page__hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    align-items: center;
    gap: clamp(28px, 5vw, 70px);
    overflow: hidden;
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--front-accent) 30%, #17202b);
    }
    border-radius: 26px;
    background: radial-gradient(circle at 92% 14%, var(--front-accent), transparent 30%), linear-gradient(140deg, #101820 0%, #202c37 68%, #16232d 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--front-accent) 34%, transparent), transparent 30%), linear-gradient(140deg, #101820 0%, #202c37 68%, #16232d 100%);
    }
    box-shadow: 0 30px 80px -48px rgb(15 24 32 / 88%);
  }
  .front-support-page__hero .front-section__eyebrow {
    color: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-accent) 70%, #fff);
    }
  }
  .front-support-page__hero h1 {
    margin: 8px 0 0;
    color: #fff;
    font: 800 clamp(30px, 4vw, 44px)/1.08 'Sora', sans-serif;
    letter-spacing: -.035em;
  }
  .front-support-page__hero p {
    max-width: 720px;
    margin: 14px 0 0;
    color: rgb(255 255 255 / 70%);
    font: 650 16px/1.65 'Manrope', sans-serif;
  }
  .front-support-page__hero-action {
    width: fit-content;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 12px 14px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 15px;
    background: rgb(255 255 255 / 8%);
    color: #fff;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
  }
  .front-support-page__hero-action:hover {
    border-color: rgb(255 255 255 / 34%);
    background: rgb(255 255 255 / 13%);
    transform: translateY(-1px);
  }
  .front-support-page__hero-action > .ms:first-child {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--front-accent);
  }
  .front-support-page__hero-action span:nth-child(2) {
    display: grid;
    gap: 2px;
  }
  .front-support-page__hero-action small {
    color: rgb(255 255 255 / 62%);
    font: 750 11px/1.2 'Manrope', sans-serif;
  }
  .front-support-page__hero-action strong {
    font: 800 16px/1.25 'Sora', sans-serif;
  }
  .front-support-page__visual {
    position: relative;
    min-height: 250px;
    display: grid;
    place-items: center;
  }
  .front-support-page__visual::before {
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%;
    content: '';
  }
  .front-support-page__visual-ring {
    width: 138px;
    height: 138px;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 42px;
    background: linear-gradient(145deg, rgb(255 255 255 / 17%), rgb(255 255 255 / 6%));
    color: #fff;
    box-shadow: 0 28px 60px -32px #000;
    transform: rotate(-6deg);
  }
  .front-support-page__visual-ring .ms {
    font-size: 68px;
    font-variation-settings: 'FILL' 1;
    transform: rotate(6deg);
  }
  .front-support-page__visual-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    background: rgb(10 18 25 / 72%);
    color: #fff;
    font: 800 11px/1.2 'Manrope', sans-serif;
    backdrop-filter: blur(10px);
  }
  .front-support-page__visual-chip .ms {
    color: var(--front-accent);
    font-size: 18px;
  }
  .front-support-page__visual-chip--top {
    top: 28px;
    right: 0;
  }
  .front-support-page__visual-chip--bottom {
    bottom: 25px;
    left: 0;
  }
  .front-support-page__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 18px;
  }
  .front-support-page__grid article {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid var(--front-border);
    border-radius: 20px;
    background: var(--front-white);
    box-shadow: 0 22px 52px -44px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 22px 52px -44px color-mix(in srgb, var(--front-ink) 45%, transparent);
    }
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  .front-support-page__grid article:hover {
    border-color: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-accent) 28%, var(--front-border));
    }
    box-shadow: 0 30px 64px -46px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 30px 64px -46px color-mix(in srgb, var(--front-ink) 58%, transparent);
    }
    transform: translateY(-2px);
  }
  .front-support-page__grid article > .ms {
    width: 50px;
    height: 50px;
    display: grid;
    flex: 0 0 50px;
    place-items: center;
    border-radius: 14px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 9%, var(--front-white));
    }
    color: var(--front-accent);
    font-size: 28px;
  }
  .front-support-page__card-label {
    display: block;
    margin-bottom: 6px;
    color: var(--front-accent);
    font: 800 12px/1.3 'Manrope', sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .front-support-page__phone h2 {
    margin: 0;
    color: var(--front-ink);
    font: 800 20px/1.3 'Sora', sans-serif;
  }
  .front-support-page__phone a {
    display: inline-block;
    margin-top: 7px;
    color: var(--front-ink);
    font: 800 clamp(20px, 2.6vw, 29px)/1.2 'Sora', sans-serif;
    text-decoration: none;
  }
  .front-support-page__phone a:hover {
    color: var(--front-accent);
  }
  .front-support-page__phone p, .front-support-page__hours dd {
    margin: 8px 0 0;
    color: var(--front-muted);
    font: 650 13px/1.55 'Manrope', sans-serif;
  }
  .front-support-page__hours h2 {
    margin: 0;
    color: var(--front-ink);
    font: 800 20px/1.3 'Sora', sans-serif;
  }
  .front-support-page__hours dl {
    margin: 16px 0 0;
    display: grid;
    gap: 14px;
  }
  .front-support-page__hours dl div {
    display: grid;
    gap: 2px;
  }
  .front-support-page__hours dt {
    color: var(--front-ink);
    font: 800 13px/1.4 'Manrope', sans-serif;
  }
  .front-support-page__preparation {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    align-items: center;
    gap: 28px;
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--front-accent) 18%, var(--front-border));
    }
    border-radius: 20px;
    background: linear-gradient(135deg, var(--front-accent), var(--front-white));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in srgb, var(--front-accent) 5%, var(--front-white)), var(--front-white));
    }
  }
  .front-support-page__preparation-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  .front-support-page__preparation-heading > .ms {
    width: 46px;
    height: 46px;
    display: grid;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 14px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 10%, var(--front-white));
    }
    color: var(--front-accent);
    font-size: 25px;
  }
  .front-support-page__preparation h2 {
    margin: 5px 0 0;
    color: var(--front-ink);
    font: 800 21px/1.25 'Sora', sans-serif;
  }
  .front-support-page__preparation p {
    margin: 7px 0 0;
    color: var(--front-muted);
    font: 650 13px/1.55 'Manrope', sans-serif;
  }
  .front-support-page__preparation ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .front-support-page__preparation li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--front-border);
    border-radius: 12px;
    background: var(--front-white);
    color: var(--front-ink);
    font: 750 13px/1.35 'Manrope', sans-serif;
  }
  .front-support-page__preparation li .ms {
    color: var(--front-accent);
    font-size: 20px;
  }
  .front-account-offers {
    display: grid;
    gap: 12px;
  }
  .front-account-offer-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .front-account-offer-filters__states {
    display: inline-flex;
    gap: 4px;
    margin: 0;
    border: 1px solid var(--front-border);
    border-radius: 11px;
    padding: 4px;
    background: var(--front-white);
  }
  .front-account-offer-filters__state input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .front-account-offer-filters__state span {
    display: inline-flex;
    align-items: center;
    height: 36px;
    border-radius: 8px;
    padding-inline: 14px;
    color: var(--front-muted);
    font: 750 13px 'Manrope', sans-serif;
    cursor: pointer;
  }
  .front-account-offer-filters__state input:checked + span {
    background: var(--front-ink);
    color: var(--front-white);
  }
  .front-account-offer-filters__state input:focus-visible + span {
    outline: 2px solid var(--front-accent);
    outline-offset: 2px;
  }
  .front-account-offer-filters__search {
    flex: 1 1 260px;
    max-width: 360px;
  }
  .front-account-offer-filters__empty {
    margin: 0;
    color: var(--front-muted);
    font: 650 14px 'Manrope', sans-serif;
  }
  [data-offer-filter-target='item'][hidden] {
    display: none !important;
  }
  .front-account-offer-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) minmax(170px, auto) auto;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--front-border);
    border-radius: 15px;
    background: var(--front-white);
    padding: 16px;
    box-shadow: 0 16px 36px -34px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 16px 36px -34px color-mix(in srgb, var(--front-ink) 38%, transparent);
    }
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  @keyframes front-action-card-pulse {
    0%, 100% {
      border-color: color-mix(in srgb, var(--front-danger) 48%, var(--front-border));
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--front-danger) 0%, transparent);
    }
    50% {
      border-color: var(--front-danger);
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--front-danger) 12%, transparent);
    }
  }
  @keyframes front-action-icon-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--front-danger) 28%, transparent);
    }
    50% {
      transform: scale(1.07);
      box-shadow: 0 0 0 8px color-mix(in srgb, var(--front-danger) 0%, transparent);
    }
  }
  .front-account-offer-card.is-action-required {
    border-color: var(--front-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-danger) 55%, var(--front-border));
    }
    background: linear-gradient(90deg, var(--front-danger), var(--front-white) 34%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, color-mix(in srgb, var(--front-danger) 5%, var(--front-white)), var(--front-white) 34%);
    }
    animation: front-action-card-pulse 2.2s ease-in-out infinite;
  }
  .front-account-offer-card:hover {
    border-color: var(--front-border-strong);
    box-shadow: 0 20px 42px -34px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 20px 42px -34px color-mix(in srgb, var(--front-ink) 48%, transparent);
    }
    transform: translateY(-1px);
  }
  .front-account-offer-card__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 9%, var(--front-white));
    }
    color: var(--front-accent);
  }
  .front-account-offer-card__icon--blue {
    background: #2563eb;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, #2563eb 9%, var(--front-white));
    }
    color: #1d4ed8;
  }
  .front-account-offer-card__icon--alert {
    border-radius: 999px;
    background: var(--front-danger);
    color: var(--front-white);
    animation: front-action-icon-pulse 1.55s ease-in-out infinite;
  }
  .front-account-offer-card__icon .ms {
    font-size: 25px;
  }
  .front-account-offer-card__main {
    min-width: 0;
  }
  .front-account-offer-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  .front-account-offer-card__heading strong, .front-account-offer-card__heading span {
    display: block;
  }
  .front-account-offer-card__heading strong {
    color: var(--front-ink);
    font: 800 15px/1.3 'Manrope', sans-serif;
  }
  .front-account-offer-card__heading div > span {
    margin-top: 3px;
    color: var(--front-muted);
    font: 700 12px/1.3 'Manrope', sans-serif;
  }
  .front-account-offer-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 10px;
    color: var(--front-muted);
    font: 700 12px/1.3 'Manrope', sans-serif;
  }
  .front-account-offer-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .front-account-offer-card__meta .ms {
    font-size: 16px;
  }
  .front-account-offer-card__meta .front-account-offer-card__price {
    color: var(--front-ink);
    font: 850 14px/1.2 'Manrope', sans-serif;
  }
  .front-account-offer-card__status {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 6px;
    border-inline: 1px solid var(--front-border);
    padding-inline: 18px;
    text-align: center;
  }
  .front-account-offer-card__status > span {
    color: var(--front-danger);
    font: 850 10px/1.2 'Manrope', sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .front-account-offer-card__action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    padding: 0 11px;
    color: var(--front-accent);
    font: 800 13px/1 'Manrope', sans-serif;
    white-space: nowrap;
    transition: background .16s ease;
  }
  .front-account-offer-card__action:hover, .front-account-offer-card__action:focus-visible {
    background: var(--front-quiet);
    outline: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .front-account-offer-card.is-action-required, .front-account-offer-card__icon--alert {
      animation: none;
    }
  }
  .front-offer-page {
    width: min(100%, var(--layout-content-max));
  }
  .front-offer-page__back {
    display: flex;
    margin: -8px 0 14px -10px;
  }
  .front-offer-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
  .front-offer-heading h1 {
    margin-top: 7px;
    color: var(--front-ink);
    font: 800 clamp(25px, 3vw, 36px)/1.1 'Sora', sans-serif;
  }
  .front-offer-heading p {
    margin-top: 8px;
    color: var(--front-muted);
    font: 700 14px/1.4 'Manrope', sans-serif;
  }
  .front-offer-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: clamp(24px, 4vw, 52px);
    margin-top: 26px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--front-border);
    border-radius: 24px;
    background: radial-gradient(circle at 100% 0, var(--front-accent), transparent 32%), linear-gradient(145deg, var(--front-white), var(--front-quiet));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--front-accent) 5%, transparent), transparent 32%), linear-gradient(145deg, var(--front-white), color-mix(in srgb, var(--front-quiet) 64%, var(--front-white)));
    }
    padding: clamp(22px, 3.5vw, 38px);
    box-shadow: 0 28px 72px -56px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 28px 72px -56px color-mix(in srgb, var(--front-ink) 48%, transparent);
    }
  }
  .front-offer-overview::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: clamp(80px, 14vw, 180px);
    height: 3px;
    background: var(--front-accent);
  }
  .front-offer-overview__status {
    min-width: 0;
  }
  .front-offer-overview__status-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    float: left;
    margin: 0 14px 8px 0;
    border-radius: 14px;
    background: var(--front-ink);
    color: var(--front-white);
    box-shadow: 0 14px 30px -20px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--front-ink) 65%, transparent);
    }
  }
  .front-offer-overview__status-icon .ms {
    font-size: 27px;
  }
  .front-offer-overview__eyebrow {
    color: var(--front-accent);
    font: 850 11px/1.2 'Manrope', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .front-offer-overview__status h2 {
    margin-top: 7px;
    color: var(--front-ink);
    font: 800 clamp(21px, 2.2vw, 29px)/1.15 'Sora', sans-serif;
  }
  .front-offer-overview__status > div > p {
    max-width: 620px;
    margin-top: 9px;
    color: var(--front-body);
    font: 650 14px/1.6 'Manrope', sans-serif;
  }
  .front-offer-progress {
    clear: both;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid var(--front-border);
    border-radius: 16px;
    background: var(--front-quiet);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-quiet) 72%, var(--front-white));
    }
    padding: 17px 14px 15px;
  }
  .front-offer-progress__step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    color: var(--front-muted);
    text-align: center;
  }
  .front-offer-progress__step::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 18px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--front-border);
  }
  .front-offer-progress__step:first-child::before {
    content: none;
  }
  .front-offer-progress__marker {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--front-border);
    border-radius: 999px;
    background: var(--front-white);
    color: var(--front-muted);
    box-shadow: 0 8px 18px -15px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 18px -15px color-mix(in srgb, var(--front-ink) 55%, transparent);
    }
  }
  .front-offer-progress__marker .ms {
    font-size: 19px;
  }
  .front-offer-progress__step.is-complete::before, .front-offer-progress__step.is-current::before {
    background: var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-success) 45%, var(--front-border));
    }
  }
  .front-offer-progress__content {
    display: grid;
    gap: 3px;
  }
  .front-offer-progress__content strong {
    color: var(--front-body);
    font: 800 12px/1.25 'Manrope', sans-serif;
  }
  .front-offer-progress__content small {
    color: var(--front-muted);
    font: 650 10px/1.2 'Manrope', sans-serif;
  }
  .front-offer-progress__step.is-complete .front-offer-progress__marker {
    border-color: var(--front-success);
    background: var(--front-success);
    color: var(--front-white);
  }
  .front-offer-progress__step.is-current .front-offer-progress__marker {
    border-color: var(--front-ink);
    background: var(--front-ink);
    color: var(--front-white);
    box-shadow: 0 0 0 5px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--front-ink) 8%, transparent);
    }
  }
  .front-offer-progress__step.is-complete .front-offer-progress__content strong, .front-offer-progress__step.is-current .front-offer-progress__content strong {
    color: var(--front-ink);
  }
  .front-offer-progress__step.is-current .front-offer-progress__content small {
    color: var(--front-accent);
    font-weight: 800;
  }
  .front-offer-progress__step.is-failed {
    color: var(--front-danger);
  }
  .front-offer-progress__step.is-failed .front-offer-progress__marker {
    border-color: var(--front-danger);
    background: var(--front-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-danger) 10%, var(--front-white));
    }
    color: var(--front-danger);
  }
  .front-offer-overview__pricing {
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 13px;
    border-left: 1px solid var(--front-border);
    padding: 8px 0 8px clamp(24px, 4vw, 48px);
    background: transparent;
  }
  .front-offer-overview__catalog, .front-offer-overview__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }
  .front-offer-overview__catalog span, .front-offer-overview__total span {
    color: var(--front-muted);
    font: 750 12px/1.3 'Manrope', sans-serif;
  }
  .front-offer-overview__catalog del {
    color: var(--front-body);
    font: 750 14px/1.2 'Manrope', sans-serif;
  }
  .front-offer-overview__total {
    border-block: 1px solid var(--front-border);
    padding-block: 15px;
  }
  .front-offer-overview__total strong {
    color: var(--front-accent);
    font: 850 clamp(21px, 2vw, 27px)/1 'Sora', sans-serif;
    white-space: nowrap;
  }
  .front-offer-overview__saving {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    background: var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-success) 10%, var(--front-white));
    }
    padding: 9px;
    color: var(--front-success);
    font: 850 13px/1.3 'Manrope', sans-serif;
    text-align: center;
  }
  .front-offer-products {
    margin-top: 34px;
  }
  .front-offer-products__table {
    border-color: var(--front-border);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-border) 86%, var(--front-ink));
    }
    border-radius: 18px;
    box-shadow: 0 24px 58px -50px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 58px -50px color-mix(in srgb, var(--front-ink) 45%, transparent);
    }
  }
  .front-offer-products__table .ui-table__head {
    background: linear-gradient(180deg, var(--front-quiet-subtle), var(--front-quiet));
    color: var(--front-text-muted);
  }
  .front-offer-products__table .ui-table__row {
    transition: background-color .16s ease, box-shadow .16s ease;
  }
  .front-offer-products__table .ui-table__row:hover {
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 2.5%, var(--front-white));
    }
    box-shadow: inset 3px 0 0 var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 3px 0 0 color-mix(in srgb, var(--front-accent) 72%, transparent);
    }
  }
  .front-offer-products__table .front-wishlist-product__media {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-color: var(--front-line-strong);
    background: var(--front-quiet-subtle);
  }
  .front-offer-products__table .front-wishlist-product strong {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
  }
  .front-offer-quantity {
    min-width: 34px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--front-border);
    border-radius: 9px;
    background: var(--front-quiet);
    color: var(--front-ink);
    font: 800 13px/1 'Manrope', sans-serif;
  }
  .front-offer-note-cell {
    display: block;
    max-width: 230px;
    color: var(--front-text-muted);
    font: 650 13px/1.45 'Manrope', sans-serif;
  }
  .front-offer-line-total {
    color: var(--front-ink);
    font: 850 15px/1.2 'Sora', sans-serif;
    white-space: nowrap;
  }
  .front-offer-products__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
  }
  .front-offer-products__head h2, .front-offer-decision__head h2 {
    margin-top: 6px;
    color: var(--front-ink);
    font: 800 23px/1.15 'Sora', sans-serif;
  }
  .front-offer-products__head > span {
    color: var(--front-muted);
    font: 750 12px/1.3 'Manrope', sans-serif;
  }
  .front-offer-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
    border: 1px solid var(--front-border);
    border-radius: 13px;
    background: var(--front-quiet-subtle);
    padding: 17px;
  }
  .front-offer-note > .ms {
    color: var(--front-accent);
    font-size: 24px;
  }
  .front-offer-note h2 {
    color: var(--front-ink);
    font: 800 14px/1.3 'Manrope', sans-serif;
  }
  .front-offer-note p {
    margin-top: 5px;
    color: var(--front-body);
    font: 650 14px/1.55 'Manrope', sans-serif;
    white-space: pre-line;
  }
  .front-offer-decision {
    margin-top: 34px;
    border-top: 1px solid var(--front-border);
    padding-top: 28px;
  }
  .front-offer-decision__head p {
    max-width: 680px;
    margin-top: 8px;
    color: var(--front-muted);
    font: 650 14px/1.55 'Manrope', sans-serif;
  }
  .front-offer-decision__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
  }
  .front-offer-decision__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--front-border);
    border-radius: 15px;
    background: var(--front-white);
    padding: 20px;
  }
  .front-offer-decision__card--accept {
    border-color: var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-success) 30%, var(--front-border));
    }
    background: var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-success) 5%, var(--front-white));
    }
  }
  .front-offer-decision__card--refuse {
    border-color: var(--front-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-danger) 24%, var(--front-border));
    }
  }
  .front-offer-decision__card > .ms {
    color: var(--front-success);
    font-size: 27px;
  }
  .front-offer-decision__card--refuse > .ms {
    color: var(--front-danger);
  }
  .front-offer-decision__card h3, .front-offer-decision__card label {
    color: var(--front-ink);
    font: 800 16px/1.25 'Manrope', sans-serif;
  }
  .front-offer-decision__card p {
    color: var(--front-muted);
    font: 650 13px/1.5 'Manrope', sans-serif;
  }
  .front-offer-decision__card .ui-control {
    width: 100%;
  }
  .front-offer-decision__card .ui-button {
    margin-top: auto;
  }
  @media (max-width: 760px) {
    .front-account-offer-card {
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: start;
      gap: 12px;
    }
    .front-account-offer-card__icon {
      width: 42px;
      height: 42px;
    }
    .front-account-offer-card__heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 8px;
    }
    .front-account-offer-card__status {
      grid-column: 1 / -1;
      border-inline: 0;
      border-top: 1px solid var(--front-border);
      padding: 12px 0 0;
    }
    .front-account-offer-card__action {
      grid-column: 1 / -1;
      justify-content: center;
      border-top: 1px solid var(--front-border);
      border-radius: 0;
      padding-top: 12px;
    }
    .front-offer-heading, .front-offer-products__head {
      align-items: flex-start;
      flex-direction: column;
    }
    .front-offer-overview {
      grid-template-columns: 1fr;
    }
    .front-offer-overview__pricing {
      border-top: 1px solid var(--front-border);
      border-left: 0;
      padding: 22px 0 0;
    }
    .front-offer-progress {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .front-offer-progress__step {
      min-height: 56px;
      grid-template-columns: 38px 1fr;
      align-items: center;
      justify-items: start;
      gap: 10px;
      text-align: left;
    }
    .front-offer-progress__step::before {
      top: 38px;
      right: auto;
      bottom: auto;
      left: 18px;
      width: 2px;
      height: 56px;
    }
    .front-offer-progress__step:first-child::before {
      content: '';
    }
    .front-offer-progress__step:last-child::before {
      content: none;
    }
    .front-offer-decision__actions {
      grid-template-columns: 1fr;
    }
  }
  .front-price-offer-highlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr);
    gap: 32px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--front-success) 42%, var(--front-border));
    }
    border-radius: 22px;
    background: radial-gradient(circle at 100% 0, var(--front-success), transparent 42%), linear-gradient(135deg, var(--front-white), var(--front-success));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--front-success) 18%, transparent), transparent 42%), linear-gradient(135deg, var(--front-white), color-mix(in srgb, var(--front-success) 7%, var(--front-white)));
    }
    padding: clamp(24px, 4vw, 42px);
    box-shadow: 0 26px 70px -48px var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 26px 70px -48px color-mix(in srgb, var(--front-success) 70%, var(--front-ink));
    }
  }
  .front-price-offer-highlight__intro h2 {
    margin-top: 12px;
    color: var(--front-ink);
    font: 800 clamp(24px, 3vw, 36px)/1.12 'Sora', sans-serif;
  }
  .front-price-offer-highlight__intro p {
    max-width: 600px;
    margin-top: 12px;
    color: var(--front-muted);
    font: 650 15px/1.65 'Manrope', sans-serif;
  }
  .front-price-offer-highlight__eyebrow, .front-price-offer-highlight__saving {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--front-success);
    font: 850 12px/1.2 'Manrope', sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .front-price-offer-highlight__prices {
    display: grid;
    gap: 14px;
    border-radius: 18px;
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 92%, transparent);
    }
    padding: 22px;
    box-shadow: 0 18px 50px -40px var(--front-ink);
  }
  .front-price-offer-highlight__catalog, .front-price-offer-highlight__sam {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }
  .front-price-offer-highlight__catalog span, .front-price-offer-highlight__sam span {
    color: var(--front-muted);
    font: 750 13px/1.4 'Manrope', sans-serif;
  }
  .front-price-offer-highlight__catalog del {
    color: var(--front-muted);
    font: 700 17px/1.2 'Manrope', sans-serif;
  }
  .front-price-offer-highlight__sam {
    border-block: 1px solid var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-block: 1px solid color-mix(in srgb, var(--front-success) 24%, var(--front-border));
    }
    padding-block: 16px;
  }
  .front-price-offer-highlight__sam strong {
    color: var(--front-success);
    font: 850 clamp(20px, 2.2vw, 27px)/1 'Sora', sans-serif;
  }
  .front-price-offer-highlight__saving {
    width: 100%;
    justify-content: center;
    border: 1px solid var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--front-success) 34%, transparent);
    }
    border-radius: 10px;
    background: var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-success) 10%, var(--front-white));
    }
    padding: 10px 12px;
    color: var(--front-success);
    font: 850 clamp(14px, 1.45vw, 17px)/1.25 'Sora', sans-serif;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
  }
  .front-price-offer-highlight__saving .ms {
    font-size: 1.1em;
  }
  .front-price-offer-line-price {
    display: grid;
    gap: 2px;
  }
  .front-price-offer-line-price del {
    color: var(--front-muted);
    font-size: 12px;
  }
  .front-price-offer-line-price strong {
    color: var(--front-accent);
    font: 850 16px/1.2 'Sora', sans-serif;
  }
  .front-price-offer-line-price span {
    color: var(--front-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  @media (max-width: 760px) {
    .front-price-offer-highlight {
      grid-template-columns: 1fr;
      gap: 22px;
    }
    .front-price-offer-highlight__catalog, .front-price-offer-highlight__sam {
      align-items: flex-start;
      flex-direction: column;
    }
    .front-price-offer-highlight__saving {
      justify-content: flex-start;
      text-align: left;
      white-space: normal;
    }
  }
  .front-account-wishlists {
    display: grid;
    gap: 16px;
  }
  .front-wishlist-detail__back {
    display: flex;
  }
  .front-wishlist-detail__intro {
    align-items: center;
  }
  .front-account-wishlist__actions {
    display: grid;
    justify-items: end;
    gap: 8px;
  }
  .front-account-wishlist__actions form {
    margin: 0;
  }
  .front-wishlist-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
    color: var(--front-muted);
    font: 700 13px/1.4 'Manrope', sans-serif;
  }
  .front-wishlist-detail__total {
    display: grid;
    flex: 0 0 auto;
    gap: 5px;
    text-align: right;
  }
  .front-wishlist-detail__total span {
    color: var(--front-muted);
    font: 800 12px/1.2 'Manrope', sans-serif;
    text-transform: uppercase;
  }
  .front-wishlist-detail__total strong {
    color: var(--front-accent);
    font: 800 28px/1.1 'Sora', sans-serif;
  }
  .front-wishlist-detail__toolbar, .front-wishlist-detail__rename, .front-wishlist-detail__toolbar-actions, .front-wishlist-detail__row-actions, .front-wishlist-product {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .front-wishlist-detail__toolbar {
    justify-content: space-between;
    padding: 14px;
    border: 1px solid var(--front-border);
    border-radius: 14px;
    background: var(--front-white);
  }
  .front-wishlist-detail__rename {
    width: min(560px, 100%);
    flex-direction: column;
    align-items: stretch;
  }
  .front-wishlist-detail__row-actions {
    justify-content: flex-end;
  }
  .front-wishlist-product__media {
    width: 54px;
    height: 54px;
    display: grid;
    flex: 0 0 54px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--front-border);
    border-radius: 10px;
    background: var(--front-white);
  }
  .front-wishlist-product__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .front-wishlist-product div {
    min-width: 180px;
    display: grid;
    gap: 4px;
  }
  .front-wishlist-product strong {
    color: var(--front-ink);
    font: 800 14px/1.3 'Manrope', sans-serif;
  }
  .front-wishlist-product span {
    color: var(--front-muted);
    font: 700 12px/1.2 'Manrope', sans-serif;
  }
  .front-wishlist-detail__quantity, .front-wishlist-detail__comment {
    border: 1px solid var(--front-border);
    border-radius: 9px;
    background: var(--front-white);
    color: var(--front-ink);
    font: 700 14px 'Manrope', sans-serif;
    outline: none;
  }
  .front-wishlist-detail__quantity:focus, .front-wishlist-detail__comment:focus {
    border-color: var(--front-accent);
    box-shadow: 0 0 0 3px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--front-accent) 16%, transparent);
    }
  }
  .front-wishlist-detail__quantity {
    width: 82px;
    min-height: 40px;
    padding: 0 9px;
  }
  .front-wishlist-detail__comment {
    width: min(280px, 100%);
    min-height: 54px;
    padding: 8px 9px;
    resize: vertical;
  }
  .front-account-wishlist {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--front-border);
    border-radius: 16px;
    background: var(--front-white);
    box-shadow: var(--front-shadow-soft);
  }
  .front-account-wishlist__header, .front-account-wishlist__rename, .front-account-wishlist-item, .front-account-wishlist-item__form {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .front-account-wishlist__header {
    justify-content: space-between;
  }
  .front-account-wishlist__rename {
    flex: 1;
    min-width: 0;
  }
  .front-account-wishlist__name {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--front-border);
    border-radius: 10px;
    background: var(--front-quiet-subtle);
    color: var(--front-ink);
    padding: 0 13px;
    font: 800 18px 'Sora', sans-serif;
    outline: none;
  }
  .front-account-wishlist__name:focus, .front-account-wishlist-item input:focus, .front-account-wishlist-item textarea:focus {
    border-color: var(--front-accent);
    box-shadow: 0 0 0 3px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--front-accent) 16%, transparent);
    }
  }
  .front-account-wishlist__items {
    display: grid;
    gap: 10px;
  }
  .front-account-wishlist-item {
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--front-border);
    border-radius: 14px;
    background: var(--front-quiet-subtle);
  }
  .front-account-wishlist-item__media {
    width: 82px;
    min-height: 82px;
    display: grid;
    place-items: center;
    flex: 0 0 82px;
    border-radius: 12px;
    background: var(--front-white);
    overflow: hidden;
  }
  .front-account-wishlist-item__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .front-account-wishlist-item__form {
    flex: 1;
    min-width: 0;
    align-items: stretch;
  }
  .front-account-wishlist-item__summary {
    min-width: 190px;
    flex: 1.2;
    display: grid;
    align-content: center;
    gap: 4px;
  }
  .front-account-wishlist-item__summary span, .front-account-wishlist-item__quantity span, .front-account-wishlist-item__comment span {
    color: var(--front-muted);
    font: 800 12px/1.2 'Manrope', sans-serif;
    text-transform: uppercase;
  }
  .front-account-wishlist-item__summary a {
    color: var(--front-ink);
    font: 800 15px/1.25 'Manrope', sans-serif;
    text-decoration: none;
  }
  .front-account-wishlist-item__summary small {
    color: var(--front-accent);
    font: 800 13px 'Manrope', sans-serif;
  }
  .front-account-wishlist-item__quantity, .front-account-wishlist-item__comment {
    display: grid;
    gap: 6px;
  }
  .front-account-wishlist-item__quantity {
    width: 96px;
    flex: 0 0 96px;
  }
  .front-account-wishlist-item input, .front-account-wishlist-item textarea {
    width: 100%;
    border: 1px solid var(--front-border);
    border-radius: 10px;
    background: var(--front-white);
    color: var(--front-ink);
    font: 700 14px 'Manrope', sans-serif;
    outline: none;
  }
  .front-account-wishlist-item input {
    height: 42px;
    padding: 0 10px;
  }
  .front-account-wishlist-item textarea {
    min-height: 42px;
    resize: vertical;
    padding: 9px 10px;
  }
  .front-account-wishlist-item__comment {
    flex: 1;
    min-width: 180px;
  }
  .front-account-wishlist-item__actions, .front-account-wishlist-item__delete {
    display: flex;
    align-items: flex-end;
  }
  .front-icon-button--danger {
    color: var(--front-danger);
  }
  .front-icon-button--danger:hover {
    border-color: var(--front-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-danger) 42%, var(--front-border));
    }
    background: var(--front-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-danger) 8%, var(--front-white));
    }
    color: var(--front-danger);
  }
  .front-account-empty {
    min-height: 116px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 22px;
    border: 1px dashed var(--front-border);
    border-radius: 14px;
    color: var(--front-muted);
    text-align: center;
    font: 800 14px/1.45 'Manrope', sans-serif;
  }
  .front-account-empty .ms {
    color: var(--front-accent);
    font-size: 34px;
  }
  .front-account-empty h2, .front-account-empty p {
    margin: 0;
  }
  .front-account-empty h2 {
    color: var(--front-ink);
    font: 800 22px/1.2 'Sora', sans-serif;
  }
  .front-account-empty--large {
    min-height: 260px;
    background: var(--front-white);
  }
  .product-add-list {
    width: 100%;
    margin: 20px 0 30px 0;
  }
  .front-button-pdf {
    width: 100%;
    height: 48px;
    border-radius: 11px;
    margin-bottom: 20px;
  }
  .front-hero__stats {
    display: flex;
    gap: 26px;
    margin-top: 34px;
  }
  .front-hero__stat-value {
    color: var(--front-ink);
    font: 800 24px 'Sora', sans-serif;
  }
  .front-hero__stat-label {
    color: var(--front-text-muted);
    font: 500 13px 'Manrope', sans-serif;
  }
  .front-divider {
    width: 1px;
    background: var(--front-line);
  }
  .front-hero-media {
    position: relative;
    max-width: 1500px;
    justify-self: end;
  }
  .front-hero-media__frame {
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    background: var(--front-quiet);
    border: 1px solid var(--front-line-strong);
    display: grid;
    place-items: center;
    box-shadow: 0 30px 70px -30px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--front-ink) 25%, transparent);
    }
    overflow: hidden;
  }
  .front-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .front-hero-media__image {
    padding: 42px;
  }
  .front-placeholder {
    color: var(--front-placeholder);
    font: 600 11px 'JetBrains Mono', monospace;
    letter-spacing: .08em;
  }
  .front-compatibility {
    position: absolute;
    bottom: 22px;
    left: -26px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    border: 1px solid var(--front-soft-border);
    background: var(--front-white);
    padding: 14px 18px;
    box-shadow: 0 16px 40px -12px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--front-ink) 18%, transparent);
    }
  }
  .front-compatibility__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-success) 10%, transparent);
    }
    color: var(--front-success);
    display: grid;
    place-items: center;
  }
  .front-compatibility__title {
    display: block;
    color: var(--front-ink);
    font: 700 14px 'Manrope', sans-serif;
  }
  .front-compatibility__meta {
    color: var(--front-text-muted);
    font: 500 12.5px 'Manrope', sans-serif;
  }
  .front-selector {
    margin-top: 42px;
  }
  .front-selector__panel, .front-stats {
    background: var(--front-ink);
    background-image: radial-gradient(140% 140% at 0% 0%, var(--front-ink-soft), var(--front-ink) 55%);
  }
  .front-selector__panel {
    border-radius: 20px;
    padding: 30px 34px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: end;
  }
  .front-selector__intro {
    max-width: 210px;
  }
  .front-selector__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--front-accent-light);
    font: 700 11px 'JetBrains Mono', monospace;
    letter-spacing: .06em;
    margin-bottom: 9px;
  }
  .front-selector__title {
    color: var(--front-white);
    font: 700 22px/1.18 'Sora', sans-serif;
    margin: 0;
    letter-spacing: -.01em;
  }
  .front-selector__fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
  }
  .front-field {
    display: block;
    min-width: 0;
  }
  .front-field__label {
    display: block;
    color: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-white) 50%, transparent);
    }
    font: 700 12px 'Manrope', sans-serif;
    margin-bottom: 8px;
    letter-spacing: .02em;
  }
  .front-select-wrap {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
  }
  .front-select {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    border: 1px solid var(--front-border);
    background: var(--front-white);
    color: var(--front-ink);
    font: 700 15px 'Manrope', sans-serif;
    padding: 0 36px 0 14px;
    outline: none;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 1px 0 var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 0 color-mix(in srgb, var(--front-white) 80%, transparent);
    }
    transition: border-color .16s, background .16s, box-shadow .16s, color .16s;
  }
  .front-select.front-select--native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    box-shadow: none;
  }
  .front-select:hover {
    border-color: var(--front-border-strong);
    background: var(--front-quiet-subtle);
  }
  .front-select:focus {
    border-color: var(--front-accent);
    background: var(--front-white);
    box-shadow: 0 0 0 4px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--front-accent) 16%, transparent);
    }
  }
  .front-select:disabled {
    cursor: not-allowed;
    opacity: .68;
    background: var(--front-soft);
    color: var(--front-muted);
  }
  .front-select-wrap .ms {
    position: absolute;
    right: 11px;
    top: 13px;
    font-size: 22px;
    color: var(--front-muted);
    pointer-events: none;
  }
  .front-select-wrap--icon .ms.front-select-wrap__icon {
    left: 13px;
    right: auto;
  }
  .front-custom-select__button {
    width: 100%;
    min-width: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 10px;
    border: 1px solid var(--front-border);
    background: var(--front-white);
    color: var(--front-ink);
    cursor: pointer;
    font: 800 15px 'Manrope', sans-serif;
    padding: 0 12px 0 14px;
    text-align: left;
    transition: border-color .16s, background .16s, box-shadow .16s, color .16s;
  }
  .front-select-wrap--icon .front-custom-select__button {
    padding-left: 42px;
  }
  .front-custom-select__button span:first-child {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .front-custom-select__button span.front-custom-select__label, .front-custom-select__option {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .front-custom-select__flag {
    width: 24px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--front-ink) 18%, transparent);
    }
  }
  .front-custom-select__button:hover, .front-select-wrap.is-open .front-custom-select__button {
    border-color: var(--front-accent);
    background: var(--front-white);
    box-shadow: 0 0 0 4px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--front-accent) 12%, transparent);
    }
  }
  .front-custom-select__button:disabled {
    cursor: not-allowed;
    opacity: .68;
    background: var(--front-soft);
    color: var(--front-muted);
    box-shadow: none;
  }
  .front-custom-select__button .ms {
    position: static;
    color: var(--front-accent);
    font-size: 22px;
    pointer-events: none;
    transition: transform .16s;
  }
  .front-select-wrap.is-open .front-custom-select__button .ms {
    transform: rotate(180deg);
  }
  .front-select-wrap.is-open {
    z-index: 170;
  }
  .front-custom-select__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 7px);
    z-index: 130;
    display: grid;
    gap: 4px;
    max-height: 260px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--front-border);
    border-radius: 12px;
    background: var(--front-white);
    box-shadow: 0 24px 50px -32px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--front-ink) 60%, transparent);
    }
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .16s, transform .16s;
  }
  .front-select-wrap.is-open .front-custom-select__menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .front-custom-select__option {
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--front-ink);
    cursor: pointer;
    font: 700 13px/1.25 'Manrope', sans-serif;
    padding: 9px 10px;
    text-align: left;
    transition: background .14s, color .14s;
  }
  .front-custom-select__option:hover, .front-custom-select__option[aria-selected="true"] {
    background: var(--front-soft);
    color: var(--front-accent);
  }
  .front-custom-select__option:disabled {
    cursor: not-allowed;
    opacity: .55;
  }
  .front-selector .front-select {
    border-color: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-white) 22%, transparent);
    }
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 96%, var(--front-ink));
    }
    color: var(--front-ink);
  }
  .front-selector .front-select:hover, .front-selector .front-select:focus {
    border-color: var(--front-accent-light);
    background: var(--front-white);
  }
  .front-selector .front-select-wrap .ms {
    color: var(--front-accent);
  }
  .front-selector .front-custom-select__button {
    border-color: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--front-white) 22%, transparent);
    }
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 96%, var(--front-ink));
    }
    color: var(--front-ink);
  }
  .front-trust {
    margin-top: 14px;
    padding-bottom: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .front-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--front-line);
    background: var(--front-quiet-subtle);
  }
  .front-trust__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 8%, transparent);
    }
    color: var(--front-accent);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 22px;
  }
  .front-trust__title {
    display: block;
    color: var(--front-ink);
    font: 700 14.5px 'Manrope', sans-serif;
    margin-bottom: 3px;
  }
  .front-trust__desc {
    color: var(--front-text-muted);
    font: 500 13px/1.4 'Manrope', sans-serif;
  }
  .front-section {
    margin-top: 40px;
  }
  .front-section--catalog {
    margin-top: 36px;
  }
  .front-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 22px;
  }
  .front-section__eyebrow {
    color: var(--front-accent);
    font: 800 13px 'Manrope', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .front-section__title {
    color: var(--front-ink);
    font: 700 30px/1.12 'Sora', sans-serif;
    letter-spacing: -.02em;
    margin: 8px 0 0;
  }
  .front-section__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border-radius: 9px;
    border: 1px solid var(--front-border);
    color: var(--front-ink);
    font: 800 15px 'Manrope', sans-serif;
    text-decoration: none;
    transition: background .15s;
  }
  .front-section__link:hover {
    background: var(--front-quiet);
  }
  .front-grid {
    display: grid;
    gap: 14px;
  }
  .front-grid--categories {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
  .front-grid--products {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 16px;
  }
  .front-category-card {
    display: block;
    border: 1px solid var(--front-line);
    border-radius: 16px;
    padding: 20px;
    background: var(--front-white);
    transition: all .18s;
  }
  .front-category-card:hover {
    border-color: var(--front-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -16px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--front-ink) 20%, transparent);
    }
  }
  .front-category-card__label {
    display: block;
    color: var(--front-ink);
    font: 700 15px 'Manrope', sans-serif;
    margin-bottom: 10px;
  }
  .front-category-card__count {
    color: var(--front-muted);
    font: 500 13px 'JetBrains Mono', monospace;
  }
  .front-product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--front-line);
    border-radius: 20px;
    overflow: hidden;
    background: var(--front-white);
    box-shadow: 0 14px 34px -30px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 14px 34px -30px color-mix(in srgb, var(--front-ink) 38%, transparent);
    }
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .front-product-card:hover {
    transform: translateY(-4px);
    border-color: var(--front-border-strong);
    box-shadow: 0 24px 42px -28px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 42px -28px color-mix(in srgb, var(--front-ink) 48%, transparent);
    }
  }
  .front-product-card__media-link:focus-visible, .front-product-card__name:focus-visible {
    outline: 3px solid var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 3px solid color-mix(in srgb, var(--front-accent) 32%, transparent);
    }
    outline-offset: -3px;
  }
  .front-product-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: radial-gradient(circle at 76% 18%, var(--front-accent), transparent 34%), var(--front-quiet);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--front-accent) 8%, transparent), transparent 34%), var(--front-quiet);
    }
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .front-product-card__image {
    padding: 18px;
    transition: transform .24s ease;
  }
  .front-product-card:hover .front-product-card__image {
    transform: scale(1.055);
  }
  .front-product-card__badge {
    position: absolute;
    top: 11px;
    left: 11px;
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-success) 12%, var(--front-white));
    }
    padding-inline: 9px;
    color: var(--front-success);
    font: 800 10px/1 'Manrope', sans-serif;
    box-shadow: 0 8px 20px -14px rgb(0 0 0 / 55%);
  }
  .front-product-card__badge--low_stock {
    background: #fff6df;
    color: #9a6500;
  }
  .front-product-card__badge--out_of_stock {
    background: #f7e9e7;
    color: var(--front-danger);
  }
  .front-product-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px 16px 17px;
  }
  .front-product-card__meta {
    min-height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
  }
  .front-product-card__ref {
    color: var(--front-muted);
    font: 500 11.5px 'JetBrains Mono', monospace;
  }
  .front-product-card__category {
    max-width: 58%;
    overflow: hidden;
    border-radius: 999px;
    background: var(--front-soft);
    padding: 5px 8px;
    color: var(--front-text-muted);
    font: 700 10px/1 'Manrope', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .front-product-card__name {
    display: block;
    color: var(--front-ink);
    font: 700 15px/1.32 'Manrope', sans-serif;
    margin-bottom: 12px;
    transition: color .15s;
  }
  .front-product-card__name:hover {
    color: var(--front-accent);
  }
  .front-product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    border-top: 1px solid var(--front-line);
    padding-top: 13px;
  }
  .front-product-card__price {
    color: var(--front-ink);
    font: 800 19px 'Sora', sans-serif;
  }
  .front-product-card__tax {
    color: var(--front-muted);
    font: 600 11px 'Manrope', sans-serif;
    margin-left: 4px;
  }
  .front-icon-button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--front-border);
    background: var(--front-white);
    color: var(--front-ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .15s;
  }
  .front-icon-button:hover {
    background: var(--front-accent);
    border-color: var(--front-accent);
    color: var(--front-white);
  }
  .front-stats {
    margin-top: 48px;
  }
  .front-stats__inner {
    padding-block: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .front-stats__value {
    color: var(--front-white);
    font: 800 36px 'Sora', sans-serif;
    letter-spacing: -.02em;
  }
  .front-stats__label {
    color: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--front-white) 55%, transparent);
    }
    font: 500 14px 'Manrope', sans-serif;
    margin-top: 4px;
  }
  .front-seo {
    max-width: var(--layout-readable-max);
    margin: 48px auto 0;
    padding: 0 var(--layout-gutter) 60px;
  }
  .front-seo__title {
    color: var(--front-ink);
    font: 700 24px/1.22 'Sora', sans-serif;
    letter-spacing: -.01em;
    margin: 0 0 16px;
  }
  .front-seo__text {
    color: var(--front-body);
    font: 400 16px/1.7 'Manrope', sans-serif;
    margin: 0 0 14px;
  }
  .front-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
  }
  .front-tag {
    color: var(--front-text);
    background: var(--front-soft);
    border-radius: 99px;
    padding: 7px 14px;
    font: 600 13.5px 'Manrope', sans-serif;
    transition: background .15s;
  }
  .front-tag:hover {
    background: var(--front-border);
  }
  .front-catalog-page {
    padding-top: 28px;
  }
  .catalog-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
    overflow: hidden;
    border-radius: 30px;
    background: radial-gradient(circle at 82% 8%, var(--front-accent), transparent 30%), linear-gradient(135deg, #20242a, var(--front-ink) 66%, #0c0e11);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--front-accent) 30%, transparent), transparent 30%), linear-gradient(135deg, #20242a, var(--front-ink) 66%, #0c0e11);
    }
    padding: clamp(34px, 5vw, 68px);
    box-shadow: 0 32px 72px -50px rgb(0 0 0 / 82%);
  }
  .catalog-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -80px;
    bottom: -150px;
    width: 380px;
    height: 380px;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 50%;
    box-shadow: 0 0 0 56px rgb(255 255 255 / 2.5%);
  }
  .catalog-hero__copy {
    position: relative;
    z-index: 1;
  }
  .catalog-hero__title {
    max-width: 980px;
    color: var(--front-white);
    font: 820 clamp(38px, 4.5vw, 62px)/1.03 'Sora', sans-serif;
    letter-spacing: -.038em;
    margin: 0 0 18px;
  }
  .catalog-hero__description {
    max-width: 860px;
    color: rgb(255 255 255 / 68%);
    font: 520 17px/1.65 'Manrope', sans-serif;
    margin: 0;
  }
  .catalog-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 28px;
  }
  .catalog-hero__features > span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 999px;
    background: rgb(255 255 255 / 7%);
    padding-inline: 12px;
    color: rgb(255 255 255 / 78%);
    font: 700 11px/1.25 'Manrope', sans-serif;
    backdrop-filter: blur(12px);
  }
  .catalog-hero__features .ms {
    color: var(--front-accent-light);
    font-size: 18px;
  }
  .catalog-hero__stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .catalog-hero__stats div {
    min-width: 0;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 12px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 20px;
    background: rgb(255 255 255 / 9%);
    padding: clamp(18px, 2.5vw, 26px);
    backdrop-filter: blur(18px);
  }
  .catalog-hero__stats div > .ms {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--front-accent);
    color: var(--front-white);
    font-size: 21px;
  }
  .catalog-hero__stats div > span:last-child {
    display: grid;
    gap: 4px;
  }
  .catalog-hero__stat-value {
    color: var(--front-white);
    font: 820 27px/1 'Sora', sans-serif;
  }
  .catalog-hero__stat-label {
    color: rgb(255 255 255 / 56%);
    font: 700 11px/1.35 'Manrope', sans-serif;
  }
  .catalog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
    padding-top: 26px;
    scroll-margin-top: 92px;
  }
  .catalog-sidebar {
    display: grid;
    gap: 14px;
  }
  .catalog-filter, .catalog-seo-links, .catalog-results, .catalog-empty {
    border: 1px solid var(--front-line);
    border-radius: 20px;
    background: var(--front-white);
    box-shadow: 0 16px 36px -30px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 16px 36px -30px color-mix(in srgb, var(--front-ink) 35%, transparent);
    }
  }
  .catalog-filter {
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(165px, .7fr) minmax(220px, 1.2fr) minmax(180px, .85fr) minmax(180px, .85fr) auto;
    align-items: end;
    gap: 14px;
    padding: 18px;
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 94%, transparent);
    }
    backdrop-filter: blur(16px);
    transition: opacity .38s ease, box-shadow .52s ease, border-color .52s ease, transform .52s ease, background .52s ease, border-radius .52s ease, left .52s ease, top .52s ease, width .52s ease, padding .52s ease;
  }
  .catalog-filter__hierarchy {
    display: contents;
  }
  .catalog-filter--clone {
    position: fixed;
    z-index: 140;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-18px);
    will-change: top, left, width, opacity, transform, border-radius, box-shadow;
  }
  .catalog-filter--clone.is-fixed {
    border-color: transparent;
    border-radius: 0;
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 97%, transparent);
    }
    box-shadow: 0 18px 44px -32px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 18px 44px -32px color-mix(in srgb, var(--front-ink) 52%, transparent);
    }
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .catalog-filter__head {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
  }
  .catalog-filter__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--front-soft);
    color: var(--front-accent);
  }
  .catalog-filter__title, .catalog-seo-links__title {
    display: block;
    color: var(--front-ink);
    font: 800 14px 'Manrope', sans-serif;
  }
  .front-link-button-reset {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
  }
  .catalog-filter__count {
    display: block;
    color: var(--front-muted);
    font: 700 12px 'JetBrains Mono', monospace;
    margin-top: 2px;
  }
  .catalog-filter .front-field__label {
    color: var(--front-muted);
  }
  .catalog-filter .front-select {
    border-color: var(--front-border);
    background: var(--front-white);
    color: var(--front-ink);
  }
  .catalog-filter .front-select-wrap .ms, .front-input-wrap .ms {
    color: var(--front-muted);
  }
  .front-input-wrap {
    position: relative;
    display: block;
  }
  .front-input-wrap .ms {
    position: absolute;
    left: 13px;
    top: 12px;
    font-size: 22px;
    pointer-events: none;
  }
  .front-phone-field__controls {
    display: grid;
    grid-template-columns: minmax(142px, 156px) minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }
  .front-phone-field__controls .front-select-wrap, .front-phone-field__controls .ui-select-wrap, .front-phone-field__controls .front-input-wrap {
    height: 48px;
  }
  .front-phone-field__country, .front-phone-field__country > .ui-select-wrap, .front-phone-field__country .ui-custom-select__button {
    width: 100%;
  }
  .front-phone-field__country .ui-custom-select__button {
    justify-content: space-between;
    padding-inline: 10px 8px;
  }
  .front-phone-field__country .ui-custom-select__button > span:first-child, .front-phone-field__country .ui-custom-select__option {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .front-phone-field__country .front-custom-select__flag {
    width: 24px;
    height: 18px;
  }
  .front-phone-field__controls .front-select, .front-phone-field__controls .front-input {
    height: 100%;
    min-height: 48px;
  }
  .front-phone-field__controls .front-select {
    background: var(--front-quiet-subtle);
  }
  .front-phone-field__help {
    margin: 7px 0 0;
    color: var(--front-muted);
    font: 650 12px/1.45 'Manrope', sans-serif;
  }
  .front-input {
    width: 100%;
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--front-border);
    background: var(--front-quiet-subtle);
    color: var(--front-ink);
    font: 600 14px 'Manrope', sans-serif;
    padding: 0 14px 0 42px;
    outline: none;
  }
  .front-input:focus, .catalog-filter .front-select:focus {
    border-color: var(--front-accent);
    background: var(--front-white);
    box-shadow: 0 0 0 4px var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--front-accent) 16%, transparent);
    }
  }
  .catalog-filter__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
  }
  .catalog-filter__submit {
    height: 44px;
    border-radius: 10px;
    padding-inline: 18px;
    white-space: nowrap;
  }
  .catalog-filter__reset {
    color: var(--front-muted);
    text-align: center;
    text-decoration: none;
    font: 800 13px 'Manrope', sans-serif;
  }
  .catalog-filter__reset:hover {
    color: var(--front-accent);
  }
  .catalog-seo-links {
    display: grid;
    gap: 8px;
    padding: 16px;
  }
  .catalog-seo-links__title {
    margin-bottom: 4px;
  }
  .catalog-seo-links__item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 7px 9px;
    border-radius: 10px;
    color: var(--front-text);
    text-decoration: none;
    font: 800 13px 'Manrope', sans-serif;
    transition: background .15s, color .15s;
  }
  .catalog-seo-links__item:hover {
    background: var(--front-soft);
    color: var(--front-accent);
  }
  .catalog-seo-links__item .ms {
    color: var(--front-accent);
    font-size: 20px;
  }
  .catalog-results {
    padding: clamp(18px, 2.5vw, 30px);
    background: var(--front-quiet);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-quiet) 72%, var(--front-white));
    }
  }
  .catalog-results__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
  }
  .catalog-results__title {
    color: var(--front-ink);
    font: 800 27px/1.18 'Sora', sans-serif;
    letter-spacing: -.015em;
    margin: 0;
  }
  .catalog-results__count {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--front-white);
    padding-inline: 13px;
    color: var(--front-text-muted);
    white-space: nowrap;
    font: 800 12px 'JetBrains Mono', monospace;
    box-shadow: inset 0 0 0 1px var(--front-line);
  }
  .catalog-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
  }
  .catalog-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding-inline: 10px;
    border-radius: 999px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 10%, var(--front-soft));
    }
    color: var(--front-accent);
    text-decoration: none;
    font: 800 12px 'Manrope', sans-serif;
  }
  .catalog-active-filter .ms {
    font-size: 16px;
  }
  .catalog-results__grid {
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
  }
  .catalog-load-more {
    display: flex;
    width: 100%;
    min-height: 72px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }
  .catalog-load-more__bars {
    height: 34px;
    display: none;
    align-items: center;
    gap: 6px;
  }
  .catalog-load-more__bars span {
    width: 5px;
    height: 18px;
    border-radius: 999px;
    background: var(--front-accent);
    animation: catalog-loader-pulse .82s ease-in-out infinite;
    opacity: .45;
    transform-origin: center;
  }
  .catalog-load-more__bars span:nth-child(2) {
    animation-delay: .12s;
  }
  .catalog-load-more__bars span:nth-child(3) {
    animation-delay: .24s;
  }
  .catalog-load-more.is-loading .catalog-load-more__bars {
    display: inline-flex;
  }
  @keyframes catalog-loader-pulse {
    0%, 100% {
      opacity: .4;
      transform: scaleY(.65);
    }
    50% {
      opacity: 1;
      transform: scaleY(1.45);
    }
  }
  .catalog-empty {
    display: grid;
    justify-items: center;
    padding: 54px 24px;
    text-align: center;
  }
  .catalog-empty__icon {
    color: var(--front-muted);
    font-size: 42px;
    margin-bottom: 10px;
  }
  .catalog-empty__title {
    color: var(--front-ink);
    font: 800 22px 'Sora', sans-serif;
    margin: 0 0 8px;
  }
  .catalog-empty__text {
    max-width: 420px;
    color: var(--front-body);
    font: 500 15px/1.55 'Manrope', sans-serif;
    margin: 0 0 18px;
  }
  .catalog-empty__button {
    height: 42px;
    padding-inline: 18px;
    border-radius: 10px;
  }
  .catalog-seo {
    padding-bottom: 74px;
  }
  .front-product-page {
    padding-top: 16px;
  }
  .product-detail__breadcrumb {
    padding-top: 0;
    padding-bottom: 14px;
  }
  .product-detail__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--front-muted);
    font: 600 12px 'Manrope', sans-serif;
  }
  .product-detail__crumbs a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--front-soft);
    padding-inline: 11px;
    color: var(--front-text-muted);
    text-decoration: none;
    transition: color .15s;
  }
  .product-detail__crumbs a:hover {
    color: var(--front-accent);
  }
  .product-detail__current {
    color: var(--front-ink);
    font-weight: 600;
  }
  .product-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    border: 1px solid var(--front-line);
    border-radius: 28px;
    background: radial-gradient(circle at 4% 0, var(--front-accent), transparent 30%), var(--front-quiet);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 4% 0, color-mix(in srgb, var(--front-accent) 6%, transparent), transparent 30%), color-mix(in srgb, var(--front-quiet) 72%, var(--front-white));
    }
    padding: clamp(20px, 3.5vw, 46px);
    box-shadow: 0 28px 70px -54px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 28px 70px -54px color-mix(in srgb, var(--front-ink) 48%, transparent);
    }
  }
  .product-gallery__main {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }
  .product-gallery__image {
    padding: clamp(34px, 6vw, 76px);
    filter: drop-shadow(0 28px 22px rgb(0 0 0 / 14%));
    transition: transform .24s ease, opacity .18s ease;
  }
  .product-gallery__main:hover .product-gallery__image {
    transform: scale(1.035);
  }
  .product-gallery__zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 90%, transparent);
    }
  }
  .product-gallery__zoom:hover {
    background: var(--front-white);
  }
  .product-gallery__thumbs {
    display: flex;
    gap: 11px;
    margin-top: 13px;
  }
  .product-gallery__thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid var(--front-border);
    background: var(--front-quiet);
    cursor: pointer;
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: border-color .15s;
  }
  .product-gallery__thumb:hover, .product-gallery__thumb.is-active {
    border-color: var(--front-accent);
  }
  .product-gallery__image.is-changing {
    opacity: .35;
  }
  .product-gallery__nav {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--front-border);
    border-radius: 999px;
    background: var(--front-white);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-white) 88%, transparent);
    }
    color: var(--front-ink);
    box-shadow: 0 10px 24px -18px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--front-ink) 60%, transparent);
    }
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .18s ease, background .15s, border-color .15s;
  }
  .product-gallery__nav svg {
    width: 20px;
    height: 20px;
  }
  .product-gallery__nav--previous {
    left: 14px;
  }
  .product-gallery__nav--next {
    right: 14px;
  }
  .product-gallery__main:hover .product-gallery__nav, .product-gallery__nav:focus-visible {
    opacity: 1;
  }
  .product-gallery__nav:hover {
    background: var(--front-white);
    border-color: var(--front-accent);
  }
  .product-gallery__counter {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-ink) 72%, transparent);
    }
    color: var(--front-white);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
  }
  .product-gallery__thumbs {
    overflow-x: auto;
    padding-block: 2px;
    scrollbar-width: thin;
  }
  .product-gallery__thumb {
    flex: 0 0 auto;
    padding: 6px;
    background: var(--front-white);
  }
  .product-gallery__thumb:focus-visible {
    outline: 2px solid var(--front-accent);
    outline-offset: 2px;
  }
  .product-gallery__thumb.is-active {
    box-shadow: 0 0 0 1px var(--front-accent);
  }
  .product-gallery__thumb-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .72;
    transition: opacity .15s;
  }
  .product-gallery__thumb:hover .product-gallery__thumb-image, .product-gallery__thumb.is-active .product-gallery__thumb-image {
    opacity: 1;
  }
  @media (hover: none) {
    .product-gallery__nav {
      opacity: 1;
    }
  }
  .product-detail__purchase {
    position: sticky;
    top: 90px;
    border: 1px solid var(--front-line);
    border-radius: 22px;
    background: var(--front-white);
    padding: clamp(22px, 3vw, 34px);
    box-shadow: 0 24px 52px -42px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 24px 52px -42px color-mix(in srgb, var(--front-ink) 56%, transparent);
    }
  }
  .product-detail__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .product-detail__brand {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--front-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-accent) 9%, var(--front-white));
    }
    padding-inline: 10px;
    color: var(--front-accent);
    font: 700 12px 'Manrope', sans-serif;
    letter-spacing: .03em;
  }
  .product-detail__dot {
    width: 4px;
    height: 4px;
    border-radius: 99px;
    background: var(--front-border-strong);
  }
  .product-detail__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--front-text-muted);
    font: 600 12.5px 'Manrope', sans-serif;
  }
  .product-detail__rating .ms {
    color: var(--front-accent);
    font-size: 16px;
  }
  .product-detail__title {
    color: var(--front-ink);
    font: 820 clamp(28px, 3vw, 40px)/1.12 'Sora', sans-serif;
    letter-spacing: -.02em;
    margin: 0 0 10px;
  }
  .product-detail__summary {
    max-width: 620px;
    color: var(--front-body);
    font: 500 15.5px/1.65 'Manrope', sans-serif;
    margin: 0 0 16px;
  }
  .product-detail__refs {
    display: flex;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
  }
  .product-detail__ref {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    background: var(--front-quiet-subtle);
    padding-inline: 9px;
    color: var(--front-text-muted);
    font: 500 13px 'JetBrains Mono', monospace;
  }
  .product-detail__ref strong {
    color: var(--front-ink);
    font-weight: 600;
  }
  .product-detail__price-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 10px;
  }
  .product-detail__price {
    color: var(--front-ink);
    font: 800 36px 'Sora', sans-serif;
    letter-spacing: -.02em;
  }
  .product-detail__tax {
    color: var(--front-text-muted);
    font: 700 14px 'Manrope', sans-serif;
    padding-bottom: 6px;
  }
  .product-detail__ttc {
    color: var(--front-muted);
    font: 500 14px 'Manrope', sans-serif;
    padding-bottom: 6px;
  }
  .product-detail__stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--front-success);
    background: var(--front-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--front-success) 9%, transparent);
    }
    padding: 6px 12px;
    border-radius: 99px;
    margin-bottom: 22px;
    font: 700 13px 'Manrope', sans-serif;
  }
  .product-detail__stock::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--front-success);
  }
  .product-detail__stock--low_stock {
    background: #fff6df;
    color: #946100;
  }
  .product-detail__stock--low_stock::before {
    background: #d28a00;
  }
  .product-detail__stock--out_of_stock {
    background: #f7e9e7;
    color: var(--front-danger);
  }
  .product-detail__stock--out_of_stock::before {
    background: var(--front-danger);
  }
  .product-panel {
    border: 1px solid var(--front-line);
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 18px;
    background: var(--front-quiet-subtle);
  }
  .product-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--front-ink);
    font: 700 12.5px 'Manrope', sans-serif;
    margin-bottom: 10px;
  }
  .product-panel__title .ms {
    color: var(--front-accent);
    font-size: 18px;
  }
  .product-panel__row {
    display: flex;
    gap: 9px;
  }
  .front-control-button {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 18px;
    border-radius: 9px;
    border: 1px solid var(--front-border);
    background: var(--front-white);
    color: var(--front-text);
    cursor: pointer;
    text-decoration: none;
    font: 800 14px 'Manrope', sans-serif;
    transition: border-color .15s, background .15s, color .15s;
  }
  .front-control-button:hover {
    border-color: var(--front-accent);
    background: var(--front-accent);
    color: var(--front-white);
  }
  .front-control-button:disabled, .front-control-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
    background: var(--front-soft);
    color: var(--front-muted);
    border-color: var(--front-border);
  }
  .product-panel__success {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    color: var(--front-success);
    font: 600 12.5px 'Manrope', sans-serif;
  }
  .product-quantity {
    display: flex;
    gap: 11px;
    margin-bottom: 22px;
  }
  .product-quantity__stepper {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    border: 1px solid var(--front-border);
    border-radius: 11px;
    height: 54px;
    overflow: hidden;
  }
  .product-quantity__button {
    width: 46px;
    height: 100%;
    border: 0;
    background: var(--front-white);
    color: var(--front-text);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s;
  }
  .product-quantity__button:hover {
    background: var(--front-soft);
  }
  .product-quantity__value {
    width: 46px;
    text-align: center;
    color: var(--front-ink);
    font: 700 17px 'Sora', sans-serif;
  }
  .product-tabs {
    margin-top: 30px;
    border: 1px solid var(--front-line);
    border-radius: 22px;
    background: var(--front-white);
    padding: 10px clamp(16px, 3vw, 30px) 28px;
    box-shadow: 0 20px 48px -44px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 20px 48px -44px color-mix(in srgb, var(--front-ink) 46%, transparent);
    }
  }
  .product-tabs__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .product-tabs__list {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--front-line);
    overflow-x: auto;
  }
  .product-tabs__tab {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid transparent;
    color: var(--front-text-muted);
    cursor: pointer;
    padding: 0 18px;
    white-space: nowrap;
    font: 800 15px 'Manrope', sans-serif;
    transition: color .15s, border-color .15s;
  }
  .product-tabs__tab:hover {
    color: var(--front-ink);
  }
  .product-tabs__count {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 99px;
    background: var(--front-soft);
    color: var(--front-text);
    font: 800 11px 'Manrope', sans-serif;
  }
  .product-tabs__panel {
    display: none;
    padding-top: 24px;
  }
  #product-tab-description:checked ~ .product-tabs__list label[for="product-tab-description"], #product-tab-characteristics:checked ~ .product-tabs__list label[for="product-tab-characteristics"], #product-tab-technical-sheet:checked ~ .product-tabs__list label[for="product-tab-technical-sheet"], #product-tab-documents:checked ~ .product-tabs__list label[for="product-tab-documents"] {
    color: var(--front-accent);
    border-bottom-color: var(--front-accent);
  }
  #product-tab-description:checked ~ .product-tabs__panel--description, #product-tab-characteristics:checked ~ .product-tabs__panel--characteristics, #product-tab-technical-sheet:checked ~ .product-tabs__panel--technical-sheet, #product-tab-documents:checked ~ .product-tabs__panel--documents {
    display: block;
  }
  .product-tabs__prose {
    max-width: var(--layout-readable-max);
    color: var(--front-body);
    font: 500 16px/1.75 'Manrope', sans-serif;
  }
  .product-tabs__empty {
    color: var(--front-muted);
    font: 600 14px 'Manrope', sans-serif;
    margin: 0;
  }
  .product-characteristics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    max-width: 1180px;
    margin: 0;
  }
  .product-characteristics__row {
    display: grid;
    grid-template-columns: minmax(140px, .7fr) minmax(0, 1fr);
    gap: 18px;
    border-bottom: 1px solid var(--front-line);
    padding: 15px 0;
  }
  .product-characteristics dt {
    color: var(--front-muted);
    font: 700 13px 'Manrope', sans-serif;
  }
  .product-characteristics dd {
    color: var(--front-ink);
    font: 700 14px 'Manrope', sans-serif;
    margin: 0;
    overflow-wrap: anywhere;
  }
  .product-documents {
    display: grid;
    gap: 18px;
  }
  .product-document {
    border: 1px solid var(--front-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--front-white);
  }
  .product-document__head {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--front-line);
    padding: 10px 14px 10px 18px;
  }
  .product-document__title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--front-ink);
    font: 800 14px 'Manrope', sans-serif;
  }
  .product-document__title .ms {
    flex: 0 0 auto;
    color: var(--front-accent);
    font-size: 22px;
  }
  .product-document__title span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product-document__link {
    flex: 0 0 auto;
    height: 38px;
  }
  .product-document__viewer {
    display: block;
    width: 100%;
    height: min(72vh, 720px);
    min-height: 460px;
    border: 0;
    background: var(--front-quiet);
  }
  .product-related-section {
    margin-top: 52px;
  }
  .front-legal {
    display: grid;
    grid-template-columns: minmax(240px, .55fr) minmax(0, 1.25fr);
    gap: clamp(36px, 6vw, 90px);
    padding-block: 64px 80px;
  }
  .front-legal__header {
    align-self: start;
    position: sticky;
    top: 106px;
  }
  .front-legal__header h1 {
    margin: 10px 0 16px;
    color: var(--front-ink);
    font: 800 clamp(34px, 4vw, 48px)/1.08 'Sora', sans-serif;
    letter-spacing: -.025em;
  }
  .front-legal__header p {
    margin: 0 0 16px;
    color: var(--front-body);
    font: 550 16px/1.7 'Manrope', sans-serif;
  }
  .front-legal__header small {
    color: var(--front-muted);
    font: 700 12px/1.4 'Manrope', sans-serif;
  }
  .front-legal__content {
    display: grid;
    gap: 16px;
  }
  .front-legal__content section {
    border: 1px solid var(--front-line);
    border-radius: 16px;
    background: var(--front-white);
    padding: clamp(20px, 3vw, 30px);
  }
  .front-legal__content h2 {
    margin: 0 0 12px;
    color: var(--front-ink);
    font: 800 21px/1.25 'Sora', sans-serif;
  }
  .front-legal__content p, .front-legal__content li, .front-legal__content address {
    color: var(--front-body);
    font: 550 15px/1.72 'Manrope', sans-serif;
  }
  .front-legal__content p {
    margin: 0;
  }
  .front-legal__content p + p {
    margin-top: 12px;
  }
  .front-legal__content ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
  }
  .front-legal__content address {
    font-style: normal;
  }
  .front-legal__content a {
    color: var(--front-accent-strong);
    font-weight: 800;
  }
  .front-error {
    min-height: 100vh;
    display: grid;
    place-content: center;
    gap: 28px;
    padding: 32px var(--layout-gutter);
    background: radial-gradient(circle at 20% 15%, var(--front-accent), transparent 32%), var(--front-quiet-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--front-accent) 9%, transparent), transparent 32%), var(--front-quiet-subtle);
    }
    color: var(--front-ink);
    font-family: 'Manrope', sans-serif;
  }
  .front-error__brand {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 10px;
    color: var(--front-ink);
    text-decoration: none;
  }
  .front-error__brand > span:last-child {
    display: grid;
  }
  .front-error__brand strong {
    font: 800 19px/1.1 'Sora', sans-serif;
  }
  .front-error__brand small {
    color: var(--front-muted);
    font: 700 9px/1.3 'Manrope', sans-serif;
    letter-spacing: .1em;
  }
  .front-error__card {
    width: min(100%, 680px);
    border: 1px solid var(--front-line);
    border-radius: 22px;
    background: var(--front-white);
    padding: clamp(28px, 6vw, 58px);
    text-align: center;
    box-shadow: 0 30px 70px -46px var(--front-ink);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 30px 70px -46px color-mix(in srgb, var(--front-ink) 48%, transparent);
    }
  }
  .front-error__code {
    margin: 16px 0 4px;
    color: var(--front-accent);
    font: 800 clamp(56px, 12vw, 96px)/1 'Sora', sans-serif;
    letter-spacing: -.05em;
  }
  .front-error__card h1 {
    margin: 0;
    color: var(--front-ink);
    font: 800 clamp(27px, 5vw, 38px)/1.15 'Sora', sans-serif;
  }
  .front-error__message {
    max-width: 520px;
    margin: 15px auto 0;
    color: var(--front-body);
    font: 550 16px/1.65 'Manrope', sans-serif;
  }
  .front-error__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
  }
  .front-error__actions .ui-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-width: 1px;
    border-style: solid;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color .16s, background .16s, color .16s, box-shadow .16s, transform .16s;
  }
  .front-error__actions .ui-button:focus-visible {
    outline: 3px solid var(--app-ring);
    outline-offset: 3px;
  }
  .front-error__support {
    margin: 24px 0 0;
    color: var(--front-muted);
    font: 650 13px/1.55 'Manrope', sans-serif;
  }
  .front-error__support a {
    color: var(--front-accent-strong);
    font-weight: 800;
  }
  @media (max-width: 1180px) {
    .front-container {
      padding-inline: var(--layout-gutter-compact);
    }
    .front-footer__grid {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }
    .front-footer__bottom {
      flex-wrap: wrap;
    }
    .front-header__inner {
      height: auto;
      min-height: 70px;
      flex-wrap: wrap;
      padding-block: 10px;
    }
    .front-mobile-menu-button {
      display: grid;
      margin-left: auto;
    }
    .front-nav {
      display: none;
    }
    .front-distributor-nav {
      width: 100%;
      display: flex;
      order: 3;
      margin-left: 0;
      overflow-x: auto;
      padding-bottom: 2px;
    }
    .front-distributor-nav form {
      display: flex;
    }
    .front-search {
      max-width: none;
    }
    .front-hero, .catalog-hero, .front-register, .ui-auth-shell__layout, .product-detail__layout {
      grid-template-columns: 1fr;
    }
    .product-detail__purchase {
      position: static;
    }
    .ui-auth-shell {
      align-items: start;
    }
    .ui-auth-shell__layout {
      gap: 30px;
      padding-block: 34px;
    }
    .ui-auth-shell__logo {
      margin-bottom: 34px;
    }
    .ui-auth-shell__title {
      max-width: 720px;
      font-size: 42px;
    }
    .front-register__hero {
      position: static;
      padding-top: 0;
    }
    .front-register__title {
      max-width: 720px;
      font-size: 42px;
    }
    .front-hero-media {
      max-width: 520px;
      justify-self: center;
    }
    .front-selector__panel {
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    .front-selector__intro {
      max-width: none;
    }
    .front-grid--categories {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .front-grid--products, .catalog-results__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 900px) {
    .front-legal {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .front-legal__header {
      position: static;
    }
    .front-account-completion__body {
      grid-template-columns: 140px minmax(0, 1fr);
      gap: 24px;
    }
    .front-account-completion__score {
      width: 136px;
    }
    .front-account-completion__score strong {
      font-size: 35px;
    }
    .front-account-completion__checklist {
      grid-template-columns: 1fr;
    }
    .front-account-layout {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .front-account-sidebar {
      position: static;
      overflow-x: auto;
      padding: 0 0 8px;
      border-right: 0;
      border-bottom: 1px solid var(--front-border);
      scrollbar-width: thin;
    }
    .front-account-layout .front-account-tabs {
      width: max-content;
      min-width: 100%;
      flex-direction: row;
      gap: 6px;
    }
    .front-account-layout .front-account-tabs__item {
      width: auto;
      min-width: max-content;
    }
    .front-account-layout .front-account-tabs__item::before {
      top: auto;
      right: 12px;
      bottom: -9px;
      left: 12px;
      width: auto;
      height: 3px;
    }
    .front-account-dashboard__overview, .front-account-dashboard__profile-grid, .front-account-security-frame, .front-support-page__hero, .front-support-page__preparation {
      grid-template-columns: 1fr;
    }
    .front-account-dashboard__overview {
      padding-bottom: 24px;
    }
    .front-account-dashboard__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: -24px 18px 0;
    }
    .front-support-page__visual {
      display: none;
    }
    .is-native-shell .front-header {
      top: env(safe-area-inset-top);
    }
    .front-main {
      padding-top: 0;
    }
    .front-header__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 44px auto;
      min-height: auto;
      gap: 10px;
      padding-block: 14px;
    }
    .front-logo {
      min-width: 0;
    }
    .front-actions {
      width: auto;
      min-width: 0;
      justify-content: end;
    }
    .front-search {
      grid-column: 1 / -1;
      order: 3;
      width: 100%;
      height: 46px;
      margin-left: 0;
    }
    .front-header-panel {
      position: static;
      display: none;
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    .front-header-panel.is-open {
      display: block;
    }
    .front-flyout--catalog {
      max-width: none;
    }
    .catalog-layout, .product-summary {
      grid-template-columns: 1fr;
    }
    .catalog-sidebar {
      position: static;
    }
    .catalog-results__head {
      align-items: start;
      flex-direction: column;
    }
    .catalog-filter {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .catalog-filter__head, .catalog-filter__actions {
      grid-column: 1 / -1;
    }
    .catalog-filter__actions {
      justify-content: flex-start;
    }
    .front-grid--categories, .front-grid--products, .catalog-results__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .front-stats__inner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 640px) {
    .catalog-hero {
      border-radius: 20px;
      padding: 30px 20px;
    }
    .catalog-hero__features {
      display: grid;
    }
    .catalog-hero__stats {
      grid-template-columns: 1fr;
    }
    .product-detail__layout {
      border-radius: 18px;
      padding: 12px;
    }
    .product-gallery__main, .product-detail__purchase, .product-tabs {
      border-radius: 16px;
    }
    .product-detail__purchase {
      padding: 19px;
    }
    .product-tabs {
      padding-inline: 14px;
    }
    .front-account-completion__heading {
      align-items: flex-start;
      flex-direction: column;
    }
    .front-account-completion__level {
      align-self: stretch;
      justify-content: center;
    }
    .front-account-completion__body {
      grid-template-columns: 1fr;
    }
    .front-account-completion__score {
      width: 144px;
      justify-self: center;
    }
    .front-account-security__heading, .front-footer__bottom {
      align-items: flex-start;
      flex-direction: column;
    }
    .front-account-security__status {
      align-self: stretch;
      border-radius: 12px;
    }
    .front-footer__legal-links {
      justify-content: flex-start;
    }
    .front-error__actions {
      display: grid;
    }
    .front-container {
      padding-inline: var(--layout-gutter-compact);
    }
    .front-footer__grid {
      grid-template-columns: 1fr;
      padding-block: 38px 30px;
    }
    .front-footer__category-links {
      grid-template-columns: 1fr;
    }
    .front-footer__bottom {
      align-items: stretch;
      flex-direction: column;
    }
    .front-header__inner {
      grid-template-columns: minmax(0, 1fr) 44px;
    }
    .front-search__kbd {
      display: none;
    }
    .front-actions {
      grid-column: 1 / -1;
    }
    .front-account, .front-account-menu {
      display: none;
    }
    .front-search {
      min-width: 0;
    }
    .front-hero {
      padding-top: 24px;
      gap: 28px;
    }
    .front-hero__title, .catalog-hero__title {
      font-size: 34px;
      line-height: 1.1;
    }
    .front-hero__description, .catalog-hero__description, .front-register__subtitle {
      font-size: 15.5px;
    }
    .front-button, .front-link-button, .front-button-selector {
      width: 100%;
    }
    .front-hero__stats, .catalog-hero__stats div, .product-panel__row, .product-quantity {
      flex-direction: column;
      align-items: stretch;
    }
    .front-divider {
      width: 100%;
      height: 1px;
    }
    .front-selector__panel, .front-register__form, .ui-auth-shell__panel, .catalog-results, .catalog-filter, .product-panel {
      border-radius: 12px;
      padding: 16px;
    }
    .catalog-filter {
      grid-template-columns: 1fr;
    }
    .catalog-filter--clone.catalog-filter--mobile-native {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px;
      max-height: min(72vh, 430px);
      overflow-y: auto;
      padding: 12px 14px 14px;
      overscroll-behavior: contain;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .catalog-filter__head {
      grid-column: 1 / -1;
      min-height: 32px;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .catalog-filter__icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      font-size: 18px;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .catalog-filter__title {
      font-size: 13px;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .catalog-filter__count, .catalog-filter--clone.catalog-filter--mobile-native .front-field__label {
      display: none;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .front-field:first-of-type, .catalog-filter--clone.catalog-filter--mobile-native .catalog-filter__actions {
      grid-column: 1 / -1;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .front-input, .catalog-filter--clone.catalog-filter--mobile-native .front-select {
      height: 42px;
      border-radius: 9px;
      font-size: 13px;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .front-select.front-select--native {
      position: static;
      width: 100%;
      height: 42px;
      margin: 0;
      padding: 0 32px 0 12px;
      overflow: visible;
      clip: auto;
      white-space: normal;
      border: 1px solid var(--front-border);
      box-shadow: 0 1px 0 var(--front-white);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 1px 0 color-mix(in srgb, var(--front-white) 80%, transparent);
      }
      appearance: auto;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .front-custom-select__button, .catalog-filter--clone.catalog-filter--mobile-native .front-custom-select__menu {
      display: none;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .catalog-filter__actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 42px;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .catalog-filter__submit {
      width: 100%;
      height: 42px;
    }
    .catalog-filter--clone.catalog-filter--mobile-native .catalog-filter__reset {
      min-height: 42px;
      padding-inline: 4px;
    }
    .catalog-filter__actions {
      align-items: stretch;
      flex-direction: column;
    }
    .catalog-filter__reset {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .front-selector__panel {
      gap: 18px;
    }
    .front-selector__fields, .front-register__grid, .front-grid--categories, .front-grid--products, .catalog-results__grid, .front-stats__inner {
      grid-template-columns: 1fr;
    }
    .front-section__header {
      align-items: flex-start;
      flex-direction: column;
    }
    .front-account-dashboard {
      padding-top: 28px;
    }
    .front-account-dashboard__hero, .front-account-panel__head, .front-account-wishlist__header {
      align-items: stretch;
      flex-direction: column;
    }
    .front-account-dashboard__hero-actions {
      width: 100%;
      justify-content: stretch;
    }
    .front-account-dashboard__hero-actions > *, .front-account-dashboard__hero-actions .ui-button {
      width: 100%;
    }
    .front-wishlist-detail__total {
      text-align: left;
    }
    .front-account-wishlist__actions {
      justify-items: stretch;
    }
    .front-wishlist-detail__toolbar, .front-wishlist-detail__rename, .front-wishlist-detail__toolbar-actions {
      align-items: stretch;
      flex-direction: column;
    }
    .front-wishlist-detail__toolbar-actions .ui-button {
      width: 100%;
    }
    .front-account-dashboard__stats, .front-distributor-dashboard__stats, .front-distributor-offer-totals, .front-distributor-dashboard__charts, .front-distributor-dashboard__details, .front-support-page__grid, .front-account-savings__stats, .front-account-wishlist-item, .front-account-wishlist-item__form {
      grid-template-columns: 1fr;
    }
    .front-account-dashboard__overview .front-account-dashboard__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .front-account-dashboard__overview {
      gap: 12px;
      padding-bottom: 0;
    }
    .front-account-dashboard__stats {
      margin: 0;
    }
    .front-phone-field__controls {
      grid-template-columns: minmax(136px, 148px) minmax(0, 1fr);
    }
    .front-account-dashboard__stats {
      display: grid;
    }
    .front-support-page {
      padding-top: 28px;
    }
    .front-support-page__hero-action {
      width: 100%;
    }
    .front-support-page__preparation-heading {
      flex-direction: column;
    }
    .front-account-wishlist-item, .front-account-wishlist-item__form {
      display: grid;
    }
    .front-account-wishlist-item__media, .front-account-wishlist-item__quantity, .front-account-wishlist-item__comment {
      width: 100%;
      flex-basis: auto;
    }
    .front-account-wishlist-item__media {
      min-height: 160px;
    }
    .front-account-wishlist-item__actions, .front-account-wishlist-item__delete, .front-account-wishlist-item__actions .front-button {
      width: 100%;
    }
    .product-characteristics {
      grid-template-columns: 1fr;
    }
    .locale-switcher {
      width: 100%;
    }
    .locale-switcher__summary {
      justify-content: center;
      width: 100%;
      min-height: 44px;
    }
    .product-gallery__image {
      padding: 18px;
    }
    .product-tabs {
      margin-top: 30px;
    }
    .product-tabs__tab {
      padding-inline: 12px;
    }
    .product-document__head {
      align-items: stretch;
      flex-direction: column;
    }
    .product-document__link {
      width: 100%;
    }
    .product-document__viewer {
      min-height: 360px;
      height: 62vh;
    }
    .front-warranty-form__grid, .front-warranty-form__uploads, .front-warranty-registration__details, .front-warranty-registration__documents {
      grid-template-columns: 1fr;
    }
    .front-page-intro {
      align-items: stretch;
      flex-direction: column;
      gap: 14px;
    }
    .front-page-intro__identity {
      align-items: stretch;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .front-page-intro__mark {
      width: 54px;
      height: 54px;
    }
    .front-page-intro__actions {
      width: 100%;
      justify-content: stretch;
    }
    .front-page-intro__actions > *, .front-page-intro__actions .ui-button {
      width: 100%;
    }
    .front-warranty-registration__product {
      align-items: flex-start;
    }
  }
  @media (max-width: 430px) {
    .front-container {
      padding-inline: var(--layout-gutter-compact);
    }
    .front-header__inner {
      gap: 8px;
    }
    .front-logo__image {
      width: 150px;
      height: 44px;
    }
    .front-logo__image img {
      width: 230px;
    }
    .front-mobile-menu {
      padding-inline: 8px;
    }
    .front-mobile-menu__sheet {
      border-radius: 20px;
    }
    .front-mobile-menu__actions {
      grid-template-columns: 1fr;
    }
    .front-register {
      padding-top: 34px;
      padding-bottom: 46px;
    }
    .front-register__title, .ui-auth-shell__title {
      font-size: 34px;
      line-height: 1.08;
    }
    .ui-auth-shell__layout {
      padding-block: 24px;
    }
    .ui-auth-shell__logo {
      margin-bottom: 26px;
    }
    .ui-auth-shell__tools {
      display: grid;
      grid-template-columns: 1fr auto;
    }
    .front-register__company-row {
      display: grid;
      justify-content: stretch;
    }
    .front-register__company-row strong {
      text-align: left;
    }
  }
}
textarea {
  padding-block: .75rem;
  line-height: 1.5;
}
textarea.ui-control {
  padding-inline: .875rem;
}
.form-state-message {
  display: flex;
  gap: .5rem;
  margin-top: .375rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  color: #b42318;
}
.form-state-message::before {
  content: "!";
  font-weight: 700;
}
.form-state-counter {
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--front-muted, var(--app-muted, #667085));
  text-align: right;
}
.form-state-counter--limit {
  color: #b54708;
  font-weight: 600;
}
.form-state-summary {
  margin-top: .75rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--front-muted, var(--app-muted, #667085));
}
.form-state-invalid .front-input, .form-state-invalid .front-select, .form-state-invalid .front-select-trigger, input.form-state-invalid, select.form-state-invalid, textarea.form-state-invalid {
  border-color: #b42318;
}
.ui-dropzone.form-state-invalid .ui-dropzone__surface {
  border-color: #b42318;
}
[data-form-state-target~="submit"][aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}
@keyframes form-state-autofill {
  from {
    outline-color: inherit;
  }
  to {
    outline-color: inherit;
  }
}
input:-webkit-autofill {
  animation-name: form-state-autofill;
  animation-duration: 1ms;
}
@layer utilities {
  :root {
    --front-white: #fff;
    --front-ink: #0e1116;
    --front-ink-soft: #1a1f26;
    --front-ink-mid: #15191f;
    --front-text: #2b313b;
    --front-body: #4a515c;
    --front-text-muted: #6b7280;
    --front-muted: #969ca6;
    --front-placeholder: #a6abb3;
    --front-accent: #e2001a;
    --front-accent-light: #ff6b7a;
    --front-danger: #c62333;
    --front-success: #117a50;
    --front-line: #eceef1;
    --front-line-strong: #e9ecef;
    --front-border: #e4e7eb;
    --front-border-strong: #c7cbd1;
    --front-soft: #f1f3f5;
    --front-quiet: #f7f8fa;
    --front-quiet-subtle: #fbfbfc;
    --front-soft-border: #f1f3f5;
  }
  @keyframes sam-fade-up {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .sam-fade-up {
    animation: sam-fade-up .4s ease;
  }
  ::selection {
    background: var(--front-accent);
    color: var(--front-white);
  }
}
.data-transfer-steps {
  overflow-x: auto;
  padding: 2px 0 8px;
}
.admin-shell .dashboard-chart {
  width: 100%;
  height: 400px;
  min-height: 400px;
  overflow: hidden;
  border: 1px solid var(--app-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--app-accent) 8%, var(--app-border));
  }
  border-radius: 16px;
  background: radial-gradient(circle at 100% 0, var(--app-accent), transparent 32%), linear-gradient(180deg, var(--app-surface-solid), var(--app-surface-muted));
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--app-accent) 6%, transparent), transparent 32%), linear-gradient(180deg, var(--app-surface-solid), color-mix(in srgb, var(--app-surface-muted) 44%, var(--app-surface-solid)));
  }
  box-shadow: 0 20px 48px -44px var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 20px 48px -44px color-mix(in srgb, var(--app-text) 38%, transparent);
  }
}
.admin-leaderboard-podium-scroll {
  overflow-x: auto;
  margin-top: 32px;
  padding: 24px 8px 4px;
}
.admin-leaderboard-podium {
  min-width: 640px;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  margin: 0 auto;
}
.admin-leaderboard-podium__place {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
}
.admin-leaderboard-podium__place.is-rank-1 {
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
}
.admin-leaderboard-podium__place.is-rank-2 {
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
}
.admin-leaderboard-podium__place.is-rank-3 {
  z-index: 1;
  grid-column: 3;
  grid-row: 1;
}
.admin-leaderboard-podium__person {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0 10px 14px;
}
.admin-leaderboard-podium__medal {
  font-size: 40px;
  filter: drop-shadow(0 8px 10px rgb(15 23 42 / 18%));
}
.admin-leaderboard-podium__person h3 {
  max-width: 100%;
  overflow: hidden;
  color: var(--app-text);
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-leaderboard-podium__person span {
  color: var(--app-muted);
  font-size: 12px;
}
.admin-leaderboard-podium__person strong {
  color: var(--app-text);
  font-size: 14px;
}
.admin-leaderboard-podium__step {
  min-height: 112px;
  display: grid;
  place-content: center;
  border: 1px solid rgb(255 255 255 / 42%);
  border-bottom: 0;
  color: #422006;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), 0 16px 34px -30px rgb(15 23 42 / 62%);
}
.is-rank-1 .admin-leaderboard-podium__step {
  min-height: 190px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(145deg, #fde68a, #f59e0b 72%);
}
.is-rank-2 .admin-leaderboard-podium__step {
  min-height: 142px;
  border-radius: 18px 0 0;
  background: linear-gradient(145deg, #f1f5f9, #94a3b8 78%);
  color: #1e293b;
}
.is-rank-3 .admin-leaderboard-podium__step {
  border-radius: 0 18px 0 0;
  background: linear-gradient(145deg, #fed7aa, #c2410c 82%);
  color: #431407;
}
.admin-leaderboard-podium__step strong {
  font: 900 52px/1 'Sora', sans-serif;
}
.admin-leaderboard-podium__step span {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.admin-account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
  gap: 20px;
  align-items: start;
}
.admin-account-layout__side {
  display: grid;
  gap: 20px;
}
.admin-account-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: radial-gradient(circle at 100% 0, var(--app-accent), transparent 35%), var(--app-surface-solid);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--app-accent) 5%, transparent), transparent 35%), var(--app-surface-solid);
  }
  box-shadow: 0 22px 48px -42px var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 22px 48px -42px color-mix(in srgb, var(--app-text) 45%, transparent);
  }
}
.admin-account-card--profile {
  min-height: 100%;
}
.admin-account-card--devices {
  grid-column: 1 / -1;
}
.admin-account-card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-account-card__heading > .ms {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
  font-size: 22px;
}
.admin-account-card__heading h2 {
  margin: 0;
  color: var(--app-text);
  font-size: 16px;
  font-weight: 750;
}
.admin-account-card__heading p {
  margin: 3px 0 0;
  color: var(--app-muted);
  font-size: 13px;
}
@media (max-width: 960px) {
  .admin-account-layout {
    grid-template-columns: 1fr;
  }
  .admin-account-card--devices {
    grid-column: auto;
  }
}
.admin-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.admin-shell .ts-wrapper {
  position: relative;
  width: 100%;
  min-height: 50px;
  font-family: 'Manrope', sans-serif;
}
.admin-shell .ts-control {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--app-border);
  border-radius: 14px;
  background: var(--app-surface-solid) !important;
  padding: 10px 44px 10px 42px;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: 0 8px 24px -22px var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 8px 24px -22px color-mix(in srgb, var(--app-text) 55%, transparent);
  }
  cursor: text;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}
.admin-shell .ts-control::before {
  content: "search";
  position: absolute;
  left: 14px;
  color: var(--app-muted);
  font: 400 20px/1 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 20;
  pointer-events: none;
  transition: color .16s ease;
}
.admin-shell .ts-wrapper.focus .ts-control, .admin-shell .ts-control:hover {
  border-color: var(--app-accent);
  background: var(--app-surface-solid);
  box-shadow: 0 0 0 4px var(--app-ring), 0 16px 32px -26px var(--app-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 4px var(--app-ring), 0 16px 32px -26px color-mix(in srgb, var(--app-accent) 70%, transparent);
  }
}
.admin-shell .ts-wrapper.focus .ts-control::before {
  color: var(--app-accent);
}
.admin-shell .ts-wrapper.sam-autocomplete-source--error .ts-control {
  border-color: rgb(239 68 68);
}
.admin-shell .ts-wrapper.sam-autocomplete-source--error.focus .ts-control {
  box-shadow: 0 0 0 4px rgb(239 68 68 / 18%);
}
.admin-shell .ts-control > input {
  min-width: 7rem;
  flex: 1 1 auto;
  color: var(--app-text);
  font: 600 14px/1.35 'Manrope', sans-serif;
}
.admin-shell .ts-control > input::placeholder {
  color: var(--app-muted);
  opacity: 1;
}
.admin-shell .ts-wrapper.single .ts-control::after {
  right: 15px;
  margin-top: -2px;
  border-width: 5px 4px 0;
  border-color: var(--app-muted) transparent transparent;
  transition: transform .16s ease;
}
.admin-shell .ts-wrapper.single.dropdown-active .ts-control::after {
  border-width: 5px 4px 0;
  border-color: var(--app-accent) transparent transparent;
  transform: rotate(180deg);
}
.admin-shell .ts-dropdown {
  z-index: 300;
  margin-top: 9px;
  overflow: clip;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: var(--app-surface-solid);
  color: var(--app-text);
  box-shadow: 0 28px 64px -28px rgba(14, 17, 22, .48);
  font-family: 'Manrope', sans-serif;
}
.admin-shell .ts-dropdown-content {
  max-height: 280px;
  padding: 7px;
  overscroll-behavior: contain;
}
.admin-shell .ts-dropdown .option {
  margin: 2px 0;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}
.admin-shell .ts-dropdown .option:hover, .admin-shell .ts-dropdown .option.active {
  background: var(--app-accent-soft);
  border-color: var(--app-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-accent) 15%, transparent);
  }
  color: var(--app-accent-strong);
}
.admin-shell .ts-dropdown .no-results, .admin-shell .ts-dropdown .loading-more-results, .admin-shell .ts-dropdown .no-more-results {
  padding: 13px;
  color: var(--app-muted);
  font-size: 13px;
  text-align: center;
}
.admin-shell .ts-wrapper .clear-button {
  right: 32px;
  color: var(--app-muted);
  font-size: 18px;
  line-height: 1;
}
.admin-shell .ts-wrapper .clear-button:hover {
  color: var(--app-accent);
}
.customer-notification-preview__status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border-radius: 999px;
  background: var(--app-surface-muted);
  padding: 4px 9px;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.customer-notification-preview__status[data-enabled="true"] {
  background: var(--app-status);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--app-status) 13%, var(--app-surface-solid));
  }
  color: var(--app-status);
}
.data-transfer-steps ol {
  min-width: 580px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.data-transfer-steps li {
  position: relative;
}
.data-transfer-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--app-border);
}
.data-transfer-steps li.is-complete:not(:last-child)::after {
  background: var(--app-status);
}
.data-transfer-steps li > a, .data-transfer-steps li > span {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--app-muted);
  text-align: center;
  text-decoration: none;
}
.data-transfer-steps__number {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--app-border);
  border-radius: 999px;
  background: var(--app-surface-solid);
  font-size: 12px;
  font-weight: 800;
}
.data-transfer-steps__label {
  max-width: 100px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
.data-transfer-steps li.is-current .data-transfer-steps__number {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: #fff;
  box-shadow: 0 0 0 5px var(--app-accent-soft);
}
.data-transfer-steps li.is-current .data-transfer-steps__label {
  color: var(--app-text);
}
.data-transfer-steps li.is-complete .data-transfer-steps__number {
  border-color: var(--app-status);
  color: var(--app-status);
}
.data-transfer-feature-grid {
  display: grid;
  gap: 12px;
}
.data-transfer-feature {
  cursor: pointer;
}
.data-transfer-feature > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.data-transfer-feature > span:not(.data-transfer-feature__icon) {
  display: grid;
  gap: 3px;
}
.data-transfer-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 14px;
  transition: .18s ease;
}
.data-transfer-feature:has(input:checked) {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
  box-shadow: 0 0 0 3px var(--app-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 9%, transparent);
  }
}
.data-transfer-feature__icon, .data-transfer-hero-icon {
  width: 46px;
  height: 46px;
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 13px;
  background: var(--app-surface-muted);
  color: var(--app-accent);
}
.data-transfer-feature strong {
  font-size: 14px;
}
.data-transfer-feature small {
  color: var(--app-muted);
  font-size: 12px;
}
.data-transfer-dropzone__surface {
  min-height: 260px;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 28px;
  border: 1.5px dashed var(--app-border-strong);
  border-radius: 16px;
  background: var(--app-surface-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--app-surface-muted) 68%, transparent);
  }
  text-align: center;
  transition: .18s ease;
}
.data-transfer-dropzone__surface:hover, .data-transfer-dropzone__surface.is-dragging, .data-transfer-dropzone__surface.has-file {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
}
.data-transfer-dropzone__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 5px;
  border-radius: 16px;
  background: var(--app-surface-solid);
  color: var(--app-accent);
  box-shadow: 0 14px 28px -24px var(--app-text);
}
.data-transfer-dropzone__surface strong {
  font-size: 15px;
}
.data-transfer-dropzone__surface > span:not(.data-transfer-dropzone__icon):not(.data-transfer-dropzone__action) {
  color: var(--app-muted);
  font-size: 12px;
}
.data-transfer-dropzone__action {
  margin-top: 7px;
  color: var(--app-accent);
  font-size: 12px;
  font-weight: 800;
}
.data-transfer-dropzone.has-error .data-transfer-dropzone__surface {
  border-color: var(--app-accent);
}
.flatpickr-calendar.sam-date-picker {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 14px;
  background: var(--app-surface-solid);
  box-shadow: 0 24px 60px -28px var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--app-text) 45%, transparent);
  }
  font-family: 'Sora', sans-serif;
}
.sam-date-picker .flatpickr-months, .sam-date-picker .flatpickr-weekdays {
  background: var(--app-surface-muted);
}
.sam-date-picker .flatpickr-current-month, .sam-date-picker .flatpickr-current-month input.cur-year, .sam-date-picker span.flatpickr-weekday {
  color: var(--app-text);
  font-weight: 700;
}
.sam-date-picker .flatpickr-day {
  border-radius: 9px;
  color: var(--app-text);
}
.sam-date-picker .flatpickr-day:hover, .sam-date-picker .flatpickr-day:focus {
  border-color: var(--app-accent-soft);
  background: var(--app-accent-soft);
}
.sam-date-picker .flatpickr-day.today {
  border-color: var(--app-accent);
}
.sam-date-picker .flatpickr-day.selected, .sam-date-picker .flatpickr-day.selected:hover, .sam-date-picker .flatpickr-day.selected:focus {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: #fff;
}
.sam-date-picker .flatpickr-day.flatpickr-disabled, .sam-date-picker .flatpickr-day.prevMonthDay, .sam-date-picker .flatpickr-day.nextMonthDay {
  color: var(--app-muted);
}
.data-transfer-centered {
  display: grid;
  justify-items: center;
  padding: 20px 0;
  text-align: center;
}
.data-transfer-centered .data-transfer-hero-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 17px;
  border-radius: 18px;
}
.data-transfer-hero-icon.is-success {
  color: var(--app-status);
}
.data-transfer-centered h3 {
  font-size: 19px;
  font-weight: 800;
}
.data-transfer-centered > p {
  max-width: 580px;
  margin-top: 6px;
  color: var(--app-muted);
  font-size: 13px;
}
.data-transfer-summary {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.data-transfer-summary > div {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface-muted);
}
.data-transfer-summary strong {
  color: var(--app-text);
  font-size: 22px;
  font-weight: 800;
}
.data-transfer-summary span {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 700;
}
.data-transfer-errors {
  max-height: 280px;
  display: grid;
  gap: 7px;
  overflow: auto;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--app-accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--app-accent) 25%, var(--app-border));
  }
  border-radius: 12px;
  background: var(--app-accent-soft);
}
.data-transfer-errors > div {
  display: grid;
  gap: 1px;
  font-size: 12px;
}
.data-transfer-errors span {
  color: var(--app-muted);
}
@media (max-width: 640px) {
  .data-transfer-summary {
    grid-template-columns: 1fr;
  }
}
@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-divide-y-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-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: 0px;
}
@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-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;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@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-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: 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-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;
    }
  }
}