/* VENDOR - Tailwind CSS v4.2.1 compiled output, taken verbatim from the
   recovered production stylesheet (lines 1-6061). Do not hand-edit:
   it is generated. See reports/asset-mapping.md. */
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

    :root,
    :host {
      --shimmer-angle: 20deg
    }

    *,
    :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-scroll-snap-strictness: proximity;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
      --scroll-fade-t: 0px;
      --scroll-fade-b: 0px;
      --scroll-fade-s: 0px;
      --scroll-fade-e: 0px;
      --scroll-fade-mask: initial;
      --shimmer-image: initial;
      --shimmer-text-fill: initial
    }
  }
}

@layer theme {

  :root,
  :host {
    --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-lg: 32rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-tight: -.025em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --default-mono-font-family: var(--font-mono);
    --color-border: var(--border)
  }
}

@layer base {

  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }

  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    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;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative
  }

  sub {
    bottom: -.25em
  }

  sup {
    top: -.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 {
    vertical-align: middle;
    display: block
  }

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

  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }

  :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)) {
      ::placeholder {
        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 {
    padding-block: 0
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0
  }

  ::-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]) {
    appearance: button
  }

  ::file-selector-button {
    appearance: button
  }

  ::-webkit-inner-spin-button {
    height: auto
  }

  ::-webkit-outer-spin-button {
    height: auto
  }

  [hidden]:where(:not([hidden=until-found])) {
    display: none !important
  }
}

@layer components;

@layer utilities {
  .\@container\/card-header {
    container: card-header/inline-size
  }

  .\@container\/field-group {
    container: field-group/inline-size
  }

  .pointer-events-none {
    pointer-events: none
  }

  .invisible {
    visibility: hidden
  }

  .visible {
    visibility: visible
  }

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

  .absolute {
    position: absolute
  }

  .fixed {
    position: fixed
  }

  .relative {
    position: relative
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0)
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0)
  }

  .inset-x-2 {
    inset-inline: calc(var(--spacing) * 2)
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0)
  }

  .inset-s-1\/2 {
    inset-inline-start: 50%
  }

  .start {
    inset-inline-start: var(--spacing)
  }

  .end {
    inset-inline-end: var(--spacing)
  }

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

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

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

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

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

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

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

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

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

  .top-auto {
    top: auto
  }

  .top-full {
    top: 100%
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .left-auto {
    left: auto
  }

  .isolate {
    isolation: isolate
  }

  .z-10 {
    z-index: 10
  }

  .z-20 {
    z-index: 20
  }

  .z-50 {
    z-index: 50
  }

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

  .order-first {
    order: -9999
  }

  .order-last {
    order: 9999
  }

  .col-start-2 {
    grid-column-start: 2
  }

  .row-span-2 {
    grid-row: span 2/span 2
  }

  .row-start-1 {
    grid-row-start: 1
  }

  .m-0\! {
    margin: calc(var(--spacing) * 0) !important
  }

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

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

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

  .mx-auto {
    margin-inline: auto
  }

  .-my-2 {
    margin-block: calc(var(--spacing) * -2)
  }

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

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

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

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

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

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

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

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

  .mt-auto {
    margin-top: auto
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2)
  }

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

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

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

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

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

  .ml-auto {
    margin-left: auto
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
  }

  .block {
    display: block
  }

  .contents {
    display: contents
  }

  .flex {
    display: flex
  }

  .grid {
    display: grid
  }

  .hidden {
    display: none
  }

  .inline-flex {
    display: inline-flex
  }

  .table {
    display: table
  }

  .table-caption {
    display: table-caption
  }

  .table-cell {
    display: table-cell
  }

  .table-row {
    display: table-row
  }

  .field-sizing-content {
    field-sizing: content
  }

  .aspect-square {
    aspect-ratio: 1
  }

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

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

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

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

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

  .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-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6)
  }

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

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

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

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

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

  .size-auto {
    width: auto;
    height: auto
  }

  .size-full {
    width: 100%;
    height: 100%
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .h-\[calc\(--spacing\(5\.5\)\)\] {
    height: calc(calc(var(--spacing) * 5.5))
  }

  .h-\[calc\(100\%-1px\)\] {
    height: calc(100% - 1px)
  }

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

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

  .h-auto {
    height: auto
  }

  .h-full {
    height: 100%
  }

  .h-max {
    height: max-content
  }

  .h-px {
    height: 1px
  }

  .h-svh {
    height: 100svh
  }

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

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

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

  .max-h-96 {
    max-height: calc(var(--spacing) * 96)
  }

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

  .max-h-\[min\(calc\(--spacing\(96\)---spacing\(9\)\)\,calc\(var\(--available-height\)---spacing\(9\)\)\)\] {
    max-height: min(calc(calc(var(--spacing) * 96) - calc(var(--spacing) * 9)), calc(var(--available-height) - calc(var(--spacing) * 9)))
  }

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

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

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

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

  .min-h-full {
    min-height: 100%
  }

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

  .w-\(--anchor-width\) {
    width: var(--anchor-width)
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .w-auto {
    width: auto
  }

  .w-fit {
    width: fit-content
  }

  .w-full {
    width: 100%
  }

  .w-max {
    width: max-content
  }

  .w-px {
    width: 1px
  }

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

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

  .max-w-\[80\%\] {
    max-width: 80%
  }

  .max-w-\[calc\(100\%-2rem\)\] {
    max-width: calc(100% - 2rem)
  }

  .max-w-full {
    max-width: 100%
  }

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

  .max-w-none {
    max-width: none
  }

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

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

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

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

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

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

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

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

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

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

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

  .min-w-\[calc\(var\(--anchor-width\)\+--spacing\(7\)\)\] {
    min-width: calc(var(--anchor-width) + calc(var(--spacing) * 7))
  }

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

  .flex-1 {
    flex: 1
  }

  .shrink-0 {
    flex-shrink: 0
  }

  .grow {
    flex-grow: 1
  }

  .grow-0 {
    flex-grow: 0
  }

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

  .caption-bottom {
    caption-side: bottom
  }

  .border-collapse {
    border-collapse: collapse
  }

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

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

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

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

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

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

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

  .origin-\(--transform-origin\) {
    transform-origin: var(--transform-origin)
  }

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

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

  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

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

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

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

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

  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

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

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

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

  .translate-y-\[calc\(-50\%_-_2px\)\] {
    --tw-translate-y: calc(-50% - 2px);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .rotate-45 {
    rotate: 45deg
  }

  .rotate-90 {
    rotate: 90deg
  }

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

  .scroll-fade-x {
    --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    --scroll-fade-inline: linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s, 0px), #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%)
  }

  .scroll-fade-x:where([dir=rtl], [dir=rtl] *) {
    --scroll-fade-inline: linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s, 0px), #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%)
  }

  .scroll-fade-x {
    -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
    -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
    -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
    -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
    mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
    -webkit-mask-composite: source-in;
    -webkit-mask-composite: source-in;
    -webkit-mask-composite: source-in;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect
  }

  @supports (animation-timeline:scroll()) {
    .scroll-fade-x {
      animation: 1ms ease-in-out scroll-fade-reveal-s, 1ms ease-in-out scroll-fade-reveal-e;
      animation-timeline: scroll(self inline), scroll(self inline);
      animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
      animation-fill-mode: both
    }
  }

  @supports not (animation-timeline:scroll()) {
    .scroll-fade-x {
      --scroll-fade-s: var(--_scroll-fade-size-s);
      --scroll-fade-e: var(--_scroll-fade-size-e)
    }
  }

  .scroll-fade-b {
    --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    --scroll-fade-mask: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--scroll-fade-b, 0px)), transparent 100%);
    -webkit-mask-image: var(--scroll-fade-mask);
    -webkit-mask-image: var(--scroll-fade-mask);
    -webkit-mask-image: var(--scroll-fade-mask);
    -webkit-mask-image: var(--scroll-fade-mask);
    mask-image: var(--scroll-fade-mask);
    -webkit-mask-composite: source-in;
    -webkit-mask-composite: source-in;
    -webkit-mask-composite: source-in;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect
  }

  @supports (animation-timeline:scroll()) {
    .scroll-fade-b {
      animation: 1ms ease-in-out scroll-fade-reveal-b;
      animation-timeline: scroll(self y);
      animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
      animation-fill-mode: both
    }
  }

  @supports not (animation-timeline:scroll()) {
    .scroll-fade-b {
      --scroll-fade-b: var(--_scroll-fade-size-b)
    }
  }

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

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

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

  .animate-spin {
    animation: var(--animate-spin)
  }

  .cursor-default {
    cursor: default
  }

  .cursor-text {
    cursor: text
  }

  .touch-none {
    touch-action: none
  }

  .resize-none {
    resize: none
  }

  .snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness)
  }

  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory
  }

  .scroll-my-1 {
    scroll-margin-block: calc(var(--spacing) * 1)
  }

  .scroll-px-1 {
    scroll-padding-inline: calc(var(--spacing) * 1)
  }

  .scroll-py-1 {
    scroll-padding-block: calc(var(--spacing) * 1)
  }

  .list-disc {
    list-style-type: disc
  }

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

  .appearance-none {
    appearance: none
  }

  .auto-rows-min {
    grid-auto-rows: min-content
  }

  .grid-cols-\[0_1fr\] {
    grid-template-columns: 0 1fr
  }

  .grid-rows-\[auto_1fr\] {
    grid-template-rows: auto 1fr
  }

  .grid-rows-\[auto_auto\] {
    grid-template-rows: auto auto
  }

  .flex-col {
    flex-direction: column
  }

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

  .flex-row {
    flex-direction: row
  }

  .flex-wrap {
    flex-wrap: wrap
  }

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

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

  .items-center {
    align-items: center
  }

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

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

  .items-stretch {
    align-items: stretch
  }

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

  .justify-center {
    justify-content: center
  }

  .justify-start {
    justify-content: flex-start
  }

  .justify-items-start {
    justify-items: start
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5)
  }

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

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

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

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

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

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

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

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

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

  .gap-\[--spacing\(var\(--gap\)\)\] {
    gap: calc(var(--spacing) * var(--gap))
  }

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

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5)
  }

  .self-end {
    align-self: flex-end
  }

  .self-start {
    align-self: flex-start
  }

  .self-stretch {
    align-self: stretch
  }

  .justify-self-end {
    justify-self: flex-end
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }

  .overflow-auto {
    overflow: auto
  }

  .overflow-hidden {
    overflow: hidden
  }

  .overflow-x-auto {
    overflow-x: auto
  }

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

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

  .overscroll-contain {
    overscroll-behavior: contain
  }

  .overscroll-x-contain {
    overscroll-behavior-x: contain
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl)
  }

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

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

  .rounded-\[calc\(var\(--radius\)-5px\)\] {
    border-radius: calc(var(--radius) - 5px)
  }

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

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

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

  .rounded-md {
    border-radius: var(--radius-md)
  }

  .rounded-none {
    border-radius: 0
  }

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

  .rounded-xl {
    border-radius: var(--radius-xl)
  }

  .rounded-xs {
    border-radius: var(--radius-xs)
  }

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

  .rounded-tl-sm {
    border-top-left-radius: var(--radius-sm)
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .bg-\[Canvas\] {
    background-color: canvas
  }

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

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

  .bg-black\/50 {
    background-color: #00000080
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .bg-clip-padding {
    background-clip: padding-box
  }

  .fill-current {
    fill: currentColor
  }

  .fill-foreground {
    fill: var(--foreground)
  }

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

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

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

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

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

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

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

  .p-\[3px\] {
    padding: 3px
  }

  .p-px {
    padding: 1px
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .text-center {
    text-align: center
  }

  .text-left {
    text-align: left
  }

  .align-middle {
    vertical-align: middle
  }

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

  .font-sans {
    font-family: Inter, SF Pro Display, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
  }

  .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-sm\/relaxed {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed)
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .text-balance {
    text-wrap: balance
  }

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

  .whitespace-nowrap {
    white-space: nowrap
  }

  .text-\[CanvasText\] {
    color: canvastext
  }

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

  .text-background {
    color: var(--background)
  }

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

  .text-current {
    color: currentColor
  }

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

  .text-foreground,
  .text-foreground\/60 {
    color: var(--foreground)
  }

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

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

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

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

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

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

  .text-white {
    color: var(--color-white)
  }

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

  .underline-offset-4 {
    text-underline-offset: 4px
  }

  .opacity-0 {
    opacity: 0
  }

  .opacity-50 {
    opacity: .5
  }

  .opacity-60 {
    opacity: .6
  }

  .opacity-70 {
    opacity: .7
  }

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

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

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

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

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

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

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

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

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

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

  .ring-2 {
    --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)
  }

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

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

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

  .ring-foreground\/10 {
    --tw-ring-color: var(--foreground)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .ring-foreground\/10 {
      --tw-ring-color: color-mix(in oklab, var(--foreground) 10%, transparent)
    }
  }

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

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

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

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

  @media (forced-colors:active) {
    .outline-hidden {
      outline-offset: 2px;
      outline: 2px solid #0000
    }
  }

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

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

  .transition {
    transition-property: color, background-color, border-color, 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-\[color\,box-shadow\] {
    transition-property: color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

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

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

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

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

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

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

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

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

  .transition-shadow {
    transition-property: box-shadow;
    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))
  }

  .transition-none {
    transition-property: none
  }

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

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

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

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

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

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

  .contain-content {
    contain: content
  }

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

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

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

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

  .\[--cell-size\:--spacing\(8\)\] {
    --cell-size: calc(var(--spacing) * 8)
  }

  .\[contain-intrinsic-size\:auto_10rem\] {
    contain-intrinsic-size: auto 10rem
  }

  .\[content-visibility\:auto\] {
    content-visibility: auto
  }

  .paused {
    animation-play-state: paused
  }

  .running {
    animation-play-state: running
  }

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

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

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

  .group-has-data-\[size\=lg\]\/avatar-group\:size-10:is(:where(.group\/avatar-group):has([data-size=lg]) *) {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10)
  }

  .group-has-data-\[size\=sm\]\/avatar-group\:size-6:is(:where(.group\/avatar-group):has([data-size=sm]) *) {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6)
  }

  .group-has-data-\[slot\=combobox-clear\]\/input-group\:hidden:is(:where(.group\/input-group):has([data-slot=combobox-clear]) *) {
    display: none
  }

  .group-has-data-\[slot\=message-footer\]\/message\:-translate-y-8:is(:where(.group\/message):has([data-slot=message-footer]) *) {
    --tw-translate-y: calc(var(--spacing) * -8);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .group-has-data-\[variant\=ghost\]\/message\:px-0:is(:where(.group\/message):has([data-variant=ghost]) *) {
    padding-inline: calc(var(--spacing) * 0)
  }

  .group-has-\[\[data-orientation\=horizontal\]\]\/field\:text-balance:is(:where(.group\/field):has([data-orientation=horizontal]) *) {
    text-wrap: balance
  }

  .group-has-\[\[data-slot\=item-description\]\]\/item\:translate-y-0\.5:is(:where(.group\/item):has([data-slot=item-description]) *) {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .group-has-\[\[data-slot\=item-description\]\]\/item\:self-start:is(:where(.group\/item):has([data-slot=item-description]) *) {
    align-self: flex-start
  }

  .group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.group\/input-group):has(>input) *) {
    padding-top: calc(var(--spacing) * 2.5)
  }

  .group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.group\/input-group):has(>input) *) {
    padding-bottom: calc(var(--spacing) * 2.5)
  }

  .group-data-empty\/combobox-content\:flex:is(:where(.group\/combobox-content)[data-empty] *) {
    display: flex
  }

  .group-data-\[align\=end\]\/bubble\:self-end:is(:where(.group\/bubble)[data-align=end] *) {
    align-self: flex-end
  }

  .group-data-\[align\=end\]\/message\:justify-end:is(:where(.group\/message)[data-align=end] *) {
    justify-content: flex-end
  }

  .group-data-\[align\=end\]\/message\:self-end:is(:where(.group\/message)[data-align=end] *) {
    align-self: flex-end
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled=true] *) {
    pointer-events: none
  }

  .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled=true] *),
  .group-data-\[disabled\=true\]\/field\:opacity-50:is(:where(.group\/field)[data-disabled=true] *),
  .group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.group\/input-group)[data-disabled=true] *) {
    opacity: .5
  }

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

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

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

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

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

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

  .group-data-\[orientation\=horizontal\]\/tabs\:h-9:is(:where(.group\/tabs)[data-orientation=horizontal] *) {
    height: calc(var(--spacing) * 9)
  }

  .group-data-\[orientation\=vertical\]\/attachment\:absolute:is(:where(.group\/attachment)[data-orientation=vertical] *) {
    position: absolute
  }

  .group-data-\[orientation\=vertical\]\/attachment\:top-3:is(:where(.group\/attachment)[data-orientation=vertical] *) {
    top: calc(var(--spacing) * 3)
  }

  .group-data-\[orientation\=vertical\]\/attachment\:right-3:is(:where(.group\/attachment)[data-orientation=vertical] *) {
    right: calc(var(--spacing) * 3)
  }

  .group-data-\[orientation\=vertical\]\/attachment\:w-full:is(:where(.group\/attachment)[data-orientation=vertical] *) {
    width: 100%
  }

  .group-data-\[orientation\=vertical\]\/attachment\:gap-1:is(:where(.group\/attachment)[data-orientation=vertical] *) {
    gap: calc(var(--spacing) * 1)
  }

  .group-data-\[orientation\=vertical\]\/attachment\:px-1:is(:where(.group\/attachment)[data-orientation=vertical] *) {
    padding-inline: calc(var(--spacing) * 1)
  }

  .group-data-\[orientation\=vertical\]\/tabs\:h-fit:is(:where(.group\/tabs)[data-orientation=vertical] *) {
    height: fit-content
  }

  .group-data-\[orientation\=vertical\]\/tabs\:w-full:is(:where(.group\/tabs)[data-orientation=vertical] *) {
    width: 100%
  }

  .group-data-\[orientation\=vertical\]\/tabs\:flex-col:is(:where(.group\/tabs)[data-orientation=vertical] *) {
    flex-direction: column
  }

  .group-data-\[orientation\=vertical\]\/tabs\:justify-start:is(:where(.group\/tabs)[data-orientation=vertical] *) {
    justify-content: flex-start
  }

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

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

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

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

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

  .group-data-\[size\=default\]\/avatar\:size-2\.5:is(:where(.group\/avatar)[data-size=default] *) {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5)
  }

  .group-data-\[size\=default\]\/switch\:size-4:is(:where(.group\/switch)[data-size=default] *) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4)
  }

  .group-data-\[size\=lg\]\/avatar\:size-3:is(:where(.group\/avatar)[data-size=lg] *) {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3)
  }

  .group-data-\[size\=sm\]\/alert-dialog-content\:grid:is(:where(.group\/alert-dialog-content)[data-size=sm] *) {
    display: grid
  }

  .group-data-\[size\=sm\]\/alert-dialog-content\:grid-cols-2:is(:where(.group\/alert-dialog-content)[data-size=sm] *) {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .group-data-\[size\=sm\]\/attachment\:w-8:is(:where(.group\/attachment)[data-size=sm] *) {
    width: calc(var(--spacing) * 8)
  }

  .group-data-\[size\=sm\]\/avatar\:size-2:is(:where(.group\/avatar)[data-size=sm] *) {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2)
  }

  .group-data-\[size\=sm\]\/avatar\:text-xs:is(:where(.group\/avatar)[data-size=sm] *) {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height))
  }

  .group-data-\[size\=sm\]\/switch\:size-3:is(:where(.group\/switch)[data-size=sm] *) {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3)
  }

  .group-data-\[size\=xs\]\/attachment\:w-7:is(:where(.group\/attachment)[data-size=xs] *) {
    width: calc(var(--spacing) * 7)
  }

  .group-data-\[size\=xs\]\/attachment\:rounded-md:is(:where(.group\/attachment)[data-size=xs] *) {
    border-radius: var(--radius-md)
  }

  .group-data-\[state\=done\]\/attachment\:opacity-100:is(:where(.group\/attachment)[data-state=done] *) {
    opacity: 1
  }

  .group-data-\[state\=error\]\/attachment\:bg-destructive\/10:is(:where(.group\/attachment)[data-state=error] *) {
    background-color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .group-data-\[state\=error\]\/attachment\:bg-destructive\/10:is(:where(.group\/attachment)[data-state=error] *) {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent)
    }
  }

  .group-data-\[state\=error\]\/attachment\:text-destructive:is(:where(.group\/attachment)[data-state=error] *),
  .group-data-\[state\=error\]\/attachment\:text-destructive\/80:is(:where(.group\/attachment)[data-state=error] *) {
    color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .group-data-\[state\=error\]\/attachment\:text-destructive\/80:is(:where(.group\/attachment)[data-state=error] *) {
      color: color-mix(in oklab, var(--destructive) 80%, transparent)
    }
  }

  .group-data-\[state\=idle\]\/attachment\:opacity-100:is(:where(.group\/attachment)[data-state=idle] *) {
    opacity: 1
  }

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

  .group-data-\[state\=processing\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state=processing] *) {
    --_spread: var(--shimmer-spread, calc(3ch + 40px));
    --_base: currentColor;
    --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* .2)));
    background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), var(--_highlight) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, var(--_highlight) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))))
  }

  @supports (color:color-mix(in lab, red, red)) {
    .group-data-\[state\=processing\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state=processing] *) {
      background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))))
    }
  }

  .group-data-\[state\=processing\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state=processing] *) {
    background-repeat: no-repeat;
    background-size: calc(200% + var(--_spread) * 2) 100%;
    -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
    animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text
  }

  @media (prefers-color-scheme:dark) {
    .group-data-\[state\=processing\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state=processing] *) {
      --_highlight: var(--shimmer-color, oklch(from currentColor max(.8, calc(l + .4)) c h / calc(alpha + .4)))
    }
  }

  .group-data-\[state\=processing\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state=processing] *):where([dir=rtl], [dir=rtl] *) {
    animation-direction: reverse
  }

  .group-data-\[state\=uploading\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state=uploading] *) {
    --_spread: var(--shimmer-spread, calc(3ch + 40px));
    --_base: currentColor;
    --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* .2)));
    background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), var(--_highlight) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, var(--_highlight) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))))
  }

  @supports (color:color-mix(in lab, red, red)) {
    .group-data-\[state\=uploading\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state=uploading] *) {
      background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))))
    }
  }

  .group-data-\[state\=uploading\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state=uploading] *) {
    background-repeat: no-repeat;
    background-size: calc(200% + var(--_spread) * 2) 100%;
    -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
    animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text
  }

  @media (prefers-color-scheme:dark) {
    .group-data-\[state\=uploading\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state=uploading] *) {
      --_highlight: var(--shimmer-color, oklch(from currentColor max(.8, calc(l + .4)) c h / calc(alpha + .4)))
    }
  }

  .group-data-\[state\=uploading\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state=uploading] *):where([dir=rtl], [dir=rtl] *) {
    animation-direction: reverse
  }

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

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

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

  .group-data-\[variant\=line\]\/tabs-list\:bg-transparent:is(:where(.group\/tabs-list)[data-variant=line] *) {
    background-color: #0000
  }

  .group-data-\[variant\=outline\]\/field-group\:-mb-2:is(:where(.group\/field-group)[data-variant=outline] *) {
    margin-bottom: calc(var(--spacing) * -2)
  }

  .group-data-\[variant\=separator\]\/marker\:flex-none:is(:where(.group\/marker)[data-variant=separator] *) {
    flex: none
  }

  .group-data-\[variant\=separator\]\/marker\:text-center:is(:where(.group\/marker)[data-variant=separator] *) {
    text-align: center
  }

  .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=bottom] *) {
    display: block
  }

  .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=bottom] *),
  .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=top] *) {
    text-align: center
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:top-full:is(:where(.group\/navigation-menu)[data-viewport=false] *) {
    top: 100%
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5:is(:where(.group\/navigation-menu)[data-viewport=false] *) {
    margin-top: calc(var(--spacing) * 1.5)
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden:is(:where(.group\/navigation-menu)[data-viewport=false] *) {
    overflow: hidden
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md:is(:where(.group\/navigation-menu)[data-viewport=false] *) {
    border-radius: var(--radius-md)
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:border:is(:where(.group\/navigation-menu)[data-viewport=false] *) {
    border-style: var(--tw-border-style);
    border-width: 1px
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover:is(:where(.group\/navigation-menu)[data-viewport=false] *) {
    background-color: var(--popover)
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground:is(:where(.group\/navigation-menu)[data-viewport=false] *) {
    color: var(--popover-foreground)
  }

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

  .group-data-\[viewport\=false\]\/navigation-menu\:duration-200:is(:where(.group\/navigation-menu)[data-viewport=false] *) {
    --tw-duration: .2s;
    transition-duration: .2s
  }

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

  .peer-disabled\:opacity-50:is(:where(.peer):disabled~*) {
    opacity: .5
  }

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

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

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

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

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

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

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

  .file\:inline-flex::file-selector-button {
    display: inline-flex
  }

  .file\:h-7::file-selector-button {
    height: calc(var(--spacing) * 7)
  }

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

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

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

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

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

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

  .before\:mr-1:before {
    content: var(--tw-content);
    margin-right: calc(var(--spacing) * 1)
  }

  .before\:h-px:before {
    content: var(--tw-content);
    height: 1px
  }

  .before\:min-w-0:before {
    content: var(--tw-content);
    min-width: calc(var(--spacing) * 0)
  }

  .before\:flex-1:before {
    content: var(--tw-content);
    flex: 1
  }

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

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

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

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

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

  .after\:ml-1:after {
    content: var(--tw-content);
    margin-left: calc(var(--spacing) * 1)
  }

  .after\:h-px:after {
    content: var(--tw-content);
    height: 1px
  }

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

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

  .after\:min-w-0:after {
    content: var(--tw-content);
    min-width: calc(var(--spacing) * 0)
  }

  .after\:flex-1:after {
    content: var(--tw-content);
    flex: 1
  }

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

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

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

  .after\:opacity-0:after {
    content: var(--tw-content);
    opacity: 0
  }

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

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

  .group-data-\[orientation\=horizontal\]\/tabs\:after\:inset-x-0:is(:where(.group\/tabs)[data-orientation=horizontal] *):after {
    content: var(--tw-content);
    inset-inline: calc(var(--spacing) * 0)
  }

  .group-data-\[orientation\=horizontal\]\/tabs\:after\:bottom-\[-5px\]:is(:where(.group\/tabs)[data-orientation=horizontal] *):after {
    content: var(--tw-content);
    bottom: -5px
  }

  .group-data-\[orientation\=horizontal\]\/tabs\:after\:h-0\.5:is(:where(.group\/tabs)[data-orientation=horizontal] *):after {
    content: var(--tw-content);
    height: calc(var(--spacing) * .5)
  }

  .group-data-\[orientation\=vertical\]\/tabs\:after\:inset-y-0:is(:where(.group\/tabs)[data-orientation=vertical] *):after {
    content: var(--tw-content);
    inset-block: calc(var(--spacing) * 0)
  }

  .group-data-\[orientation\=vertical\]\/tabs\:after\:-right-1:is(:where(.group\/tabs)[data-orientation=vertical] *):after {
    content: var(--tw-content);
    right: calc(var(--spacing) * -1)
  }

  .group-data-\[orientation\=vertical\]\/tabs\:after\:w-0\.5:is(:where(.group\/tabs)[data-orientation=vertical] *):after {
    content: var(--tw-content);
    width: calc(var(--spacing) * .5)
  }

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

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

  .last\:mt-0:last-child {
    margin-top: calc(var(--spacing) * 0)
  }

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

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .hover\:ring-4:hover {
      --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\:z-10:focus {
    z-index: 10
  }

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

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

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

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

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

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

  @media (forced-colors:active) {
    .focus\:outline-hidden:focus {
      outline-offset: 2px;
      outline: 2px solid #0000
    }
  }

  .focus-visible\:z-10:focus-visible {
    z-index: 10
  }

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

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

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

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

  .focus-visible\:ring-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-\[3px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .focus-visible\:ring-destructive\/20:focus-visible {
    --tw-ring-color: var(--destructive)
  }

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

  .focus-visible\:ring-ring:focus-visible,
  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: var(--ring)
  }

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

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

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

  @media (forced-colors:active) {
    .focus-visible\:outline-hidden:focus-visible {
      outline-offset: 2px;
      outline: 2px solid #0000
    }
  }

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

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

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

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

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

  :where([data-side=left]) .in-data-\[side\=left\]\:cursor-w-resize {
    cursor: w-resize
  }

  :where([data-side=right]) .in-data-\[side\=right\]\:cursor-e-resize {
    cursor: e-resize
  }

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

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

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

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

  .has-disabled\:pointer-events-none:has(:disabled) {
    pointer-events: none
  }

  .has-disabled\:cursor-not-allowed:has(:disabled) {
    cursor: not-allowed
  }

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

  .has-aria-invalid\:border-destructive:has([aria-invalid=true]) {
    border-color: var(--destructive)
  }

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

  .has-aria-invalid\:ring-destructive\/20:has([aria-invalid=true]) {
    --tw-ring-color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .has-aria-invalid\:ring-destructive\/20:has([aria-invalid=true]) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent)
    }
  }

  .has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_auto_1fr\]:has([data-slot=alert-dialog-media]) {
    grid-template-rows: auto auto 1fr
  }

  .has-data-\[slot\=alert-dialog-media\]\:gap-x-6:has([data-slot=alert-dialog-media]) {
    column-gap: calc(var(--spacing) * 6)
  }

  .has-data-\[slot\=attachment-content\]\:w-30:has([data-slot=attachment-content]) {
    width: calc(var(--spacing) * 30)
  }

  .has-data-\[slot\=attachment-content\]\:px-1\.5:has([data-slot=attachment-content]) {
    padding-inline: calc(var(--spacing) * 1.5)
  }

  .has-data-\[slot\=attachment-content\]\:px-2:has([data-slot=attachment-content]) {
    padding-inline: calc(var(--spacing) * 2)
  }

  .has-data-\[slot\=attachment-content\]\:px-2\.5:has([data-slot=attachment-content]) {
    padding-inline: calc(var(--spacing) * 2.5)
  }

  .has-data-\[slot\=attachment-content\]\:py-1:has([data-slot=attachment-content]) {
    padding-block: calc(var(--spacing) * 1)
  }

  .has-data-\[slot\=attachment-content\]\:py-1\.5:has([data-slot=attachment-content]) {
    padding-block: calc(var(--spacing) * 1.5)
  }

  .has-data-\[slot\=attachment-content\]\:py-2:has([data-slot=attachment-content]) {
    padding-block: calc(var(--spacing) * 2)
  }

  .has-data-\[slot\=attachment-media\]\:p-1:has([data-slot=attachment-media]) {
    padding: calc(var(--spacing) * 1)
  }

  .has-data-\[slot\=attachment-media\]\:p-1\.5:has([data-slot=attachment-media]) {
    padding: calc(var(--spacing) * 1.5)
  }

  .has-data-\[slot\=attachment-media\]\:p-2:has([data-slot=attachment-media]) {
    padding: calc(var(--spacing) * 2)
  }

  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]) {
    grid-template-columns: 1fr auto
  }

  .has-data-\[slot\=combobox-chip\]\:px-1\.5:has([data-slot=combobox-chip]) {
    padding-inline: calc(var(--spacing) * 1.5)
  }

  .has-data-\[slot\=combobox-chip-remove\]\:pr-0:has([data-slot=combobox-chip-remove]) {
    padding-right: calc(var(--spacing) * 0)
  }

  .has-data-\[state\=checked\]\:border-primary:has([data-state=checked]) {
    border-color: var(--primary)
  }

  .has-data-\[state\=checked\]\:bg-primary\/5:has([data-state=checked]) {
    background-color: var(--primary)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .has-data-\[state\=checked\]\:bg-primary\/5:has([data-state=checked]) {
      background-color: color-mix(in oklab, var(--primary) 5%, transparent)
    }
  }

  .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring:has([data-slot=input-group-control]:focus-visible) {
    border-color: var(--ring)
  }

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

  .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot=input-group-control]:focus-visible) {
    --tw-ring-color: var(--ring)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot=input-group-control]:focus-visible) {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent)
    }
  }

  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive:has([data-slot][aria-invalid=true]) {
    border-color: var(--destructive)
  }

  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid=true]) {
    --tw-ring-color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid=true]) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent)
    }
  }

  .has-\[button\]\:p-0:has(:is(button)) {
    padding: calc(var(--spacing) * 0)
  }

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

  .has-\[\>\[data-align\=block-end\]\]\:h-auto:has(>[data-align=block-end]) {
    height: auto
  }

  .has-\[\>\[data-align\=block-end\]\]\:flex-col:has(>[data-align=block-end]) {
    flex-direction: column
  }

  .has-\[\>\[data-align\=block-start\]\]\:h-auto:has(>[data-align=block-start]) {
    height: auto
  }

  .has-\[\>\[data-align\=block-start\]\]\:flex-col:has(>[data-align=block-start]) {
    flex-direction: column
  }

  .has-\[\>\[data-slot\=button-group\]\]\:gap-2:has(>[data-slot=button-group]) {
    gap: calc(var(--spacing) * 2)
  }

  .has-\[\>\[data-slot\=checkbox-group\]\]\:gap-3:has(>[data-slot=checkbox-group]) {
    gap: calc(var(--spacing) * 3)
  }

  .has-\[\>\[data-slot\=field-content\]\]\:items-start:has(>[data-slot=field-content]) {
    align-items: flex-start
  }

  .has-\[\>\[data-slot\=field\]\]\:w-full:has(>[data-slot=field]) {
    width: 100%
  }

  .has-\[\>\[data-slot\=field\]\]\:flex-col:has(>[data-slot=field]) {
    flex-direction: column
  }

  .has-\[\>\[data-slot\=field\]\]\:rounded-md:has(>[data-slot=field]) {
    border-radius: var(--radius-md)
  }

  .has-\[\>\[data-slot\=field\]\]\:border:has(>[data-slot=field]) {
    border-style: var(--tw-border-style);
    border-width: 1px
  }

  .has-\[\>\[data-slot\=radio-group\]\]\:gap-3:has(>[data-slot=radio-group]) {
    gap: calc(var(--spacing) * 3)
  }

  .has-\[\>button\]\:mr-\[-0\.45rem\]:has(>button) {
    margin-right: -.45rem
  }

  .has-\[\>button\]\:ml-\[-0\.45rem\]:has(>button) {
    margin-left: -.45rem
  }

  .has-\[\>kbd\]\:mr-\[-0\.35rem\]:has(>kbd) {
    margin-right: -.35rem
  }

  .has-\[\>kbd\]\:ml-\[-0\.35rem\]:has(>kbd) {
    margin-left: -.35rem
  }

  .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
    grid-template-columns: calc(var(--spacing) * 4) 1fr
  }

  .has-\[\>svg\]\:gap-x-3:has(>svg) {
    column-gap: calc(var(--spacing) * 3)
  }

  .has-\[\>svg\]\:p-0:has(>svg) {
    padding: calc(var(--spacing) * 0)
  }

  .has-\[\>svg\]\:px-1\.5:has(>svg) {
    padding-inline: calc(var(--spacing) * 1.5)
  }

  .has-\[\>svg\]\:px-2:has(>svg) {
    padding-inline: calc(var(--spacing) * 2)
  }

  .has-\[\>svg\]\:px-2\.5:has(>svg) {
    padding-inline: calc(var(--spacing) * 2.5)
  }

  .has-\[\>svg\]\:px-3:has(>svg) {
    padding-inline: calc(var(--spacing) * 3)
  }

  .has-\[\>svg\]\:px-4:has(>svg) {
    padding-inline: calc(var(--spacing) * 4)
  }

  .has-\[\>textarea\]\:h-auto:has(>textarea) {
    height: auto
  }

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

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

  .aria-invalid\:border-destructive[aria-invalid=true] {
    border-color: var(--destructive)
  }

  .aria-invalid\:ring-destructive\/20[aria-invalid=true] {
    --tw-ring-color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .aria-invalid\:ring-destructive\/20[aria-invalid=true] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent)
    }
  }

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

  .aria-\[orientation\=horizontal\]\:h-px[aria-orientation=horizontal] {
    height: 1px
  }

  .aria-\[orientation\=horizontal\]\:w-full[aria-orientation=horizontal] {
    width: 100%
  }

  .aria-\[orientation\=horizontal\]\:after\:left-0[aria-orientation=horizontal]:after {
    content: var(--tw-content);
    left: calc(var(--spacing) * 0)
  }

  .aria-\[orientation\=horizontal\]\:after\:h-1[aria-orientation=horizontal]:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 1)
  }

  .aria-\[orientation\=horizontal\]\:after\:w-full[aria-orientation=horizontal]:after {
    content: var(--tw-content);
    width: 100%
  }

  .aria-\[orientation\=horizontal\]\:after\:translate-x-0[aria-orientation=horizontal]:after {
    content: var(--tw-content);
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .aria-\[orientation\=horizontal\]\:after\:-translate-y-1\/2[aria-orientation=horizontal]:after {
    content: var(--tw-content);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .aria-\[orientation\=vertical\]\:flex-col[aria-orientation=vertical] {
    flex-direction: column
  }

  .data-empty\:p-0[data-empty] {
    padding: calc(var(--spacing) * 0)
  }

  .data-highlighted\:bg-accent[data-highlighted] {
    background-color: var(--accent)
  }

  .data-highlighted\:text-accent-foreground[data-highlighted] {
    color: var(--accent-foreground)
  }

  .data-pressed\:bg-transparent[data-pressed] {
    background-color: #0000
  }

  :is(.group-data-\[align\=end\]\/message\:\*\:data-slot\:self-end:is(:where(.group\/message)[data-align=end] *)>*)[data-slot] {
    align-self: flex-end
  }

  .data-\[active\=false\]\:pointer-events-none[data-active=false] {
    pointer-events: none
  }

  .data-\[active\=false\]\:scale-95[data-active=false] {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
  }

  .data-\[active\=false\]\:opacity-0[data-active=false] {
    opacity: 0
  }

  .data-\[active\=false\]\:duration-400[data-active=false] {
    --tw-duration: .4s;
    transition-duration: .4s
  }

  .data-\[active\=false\]\:ease-\[cubic-bezier\(0\.7\,0\,0\.84\,0\)\][data-active=false] {
    --tw-ease: cubic-bezier(.7, 0, .84, 0);
    transition-timing-function: cubic-bezier(.7, 0, .84, 0)
  }

  .data-\[active\=true\]\:z-10[data-active=true] {
    z-index: 10
  }

  .data-\[active\=true\]\:translate-y-0[data-active=true] {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[active\=true\]\:scale-100[data-active=true] {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
  }

  .data-\[active\=true\]\:border-ring[data-active=true] {
    border-color: var(--ring)
  }

  .data-\[active\=true\]\:bg-accent\/50[data-active=true] {
    background-color: var(--accent)
  }

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

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

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

  .data-\[active\=true\]\:opacity-100[data-active=true] {
    opacity: 1
  }

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

  .data-\[active\=true\]\:ring-ring\/50[data-active=true] {
    --tw-ring-color: var(--ring)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .data-\[active\=true\]\:ring-ring\/50[data-active=true] {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent)
    }
  }

  .data-\[active\=true\]\:ease-\[cubic-bezier\(0\.23\,1\,0\.32\,1\)\][data-active=true] {
    --tw-ease: cubic-bezier(.23, 1, .32, 1);
    transition-timing-function: cubic-bezier(.23, 1, .32, 1)
  }

  @media (hover:hover) {
    .data-\[active\=true\]\:hover\:bg-accent[data-active=true]:hover {
      background-color: var(--accent)
    }
  }

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

  .data-\[active\=true\]\:aria-invalid\:border-destructive[data-active=true][aria-invalid=true] {
    border-color: var(--destructive)
  }

  .data-\[active\=true\]\:aria-invalid\:ring-destructive\/20[data-active=true][aria-invalid=true] {
    --tw-ring-color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .data-\[active\=true\]\:aria-invalid\:ring-destructive\/20[data-active=true][aria-invalid=true] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent)
    }
  }

  .data-\[align\=end\]\:flex-row-reverse[data-align=end] {
    flex-direction: row-reverse
  }

  .data-\[align\=end\]\:self-end[data-align=end] {
    align-self: flex-end
  }

  .data-\[chips\=true\]\:min-w-\(--anchor-width\)[data-chips=true] {
    min-width: var(--anchor-width)
  }

  .data-\[direction\=end\]\:bottom-4[data-direction=end] {
    bottom: calc(var(--spacing) * 4)
  }

  .data-\[direction\=end\]\:data-\[active\=false\]\:translate-y-full[data-direction=end][data-active=false] {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[direction\=start\]\:top-4[data-direction=start] {
    top: calc(var(--spacing) * 4)
  }

  .data-\[direction\=start\]\:data-\[active\=false\]\:-translate-y-full[data-direction=start][data-active=false] {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

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

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

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

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

  .data-\[error\=true\]\:text-destructive[data-error=true] {
    color: var(--destructive)
  }

  .data-\[inset\]\:pl-8[data-inset] {
    padding-left: calc(var(--spacing) * 8)
  }

  .data-\[invalid\=true\]\:text-destructive[data-invalid=true] {
    color: var(--destructive)
  }

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

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

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

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

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

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

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

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

  .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation=horizontal] {
    height: calc(var(--spacing) * 1.5)
  }

  .data-\[orientation\=horizontal\]\:h-full[data-orientation=horizontal] {
    height: 100%
  }

  .data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal] {
    height: 1px
  }

  .data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal] {
    width: 100%
  }

  .data-\[orientation\=horizontal\]\:flex-col[data-orientation=horizontal] {
    flex-direction: column
  }

  .data-\[orientation\=vertical\]\:h-auto[data-orientation=vertical] {
    height: auto
  }

  .data-\[orientation\=vertical\]\:h-full[data-orientation=vertical] {
    height: 100%
  }

  .data-\[orientation\=vertical\]\:min-h-44[data-orientation=vertical] {
    min-height: calc(var(--spacing) * 44)
  }

  .data-\[orientation\=vertical\]\:w-1\.5[data-orientation=vertical] {
    width: calc(var(--spacing) * 1.5)
  }

  .data-\[orientation\=vertical\]\:w-auto[data-orientation=vertical] {
    width: auto
  }

  .data-\[orientation\=vertical\]\:w-full[data-orientation=vertical] {
    width: 100%
  }

  .data-\[orientation\=vertical\]\:w-px[data-orientation=vertical] {
    width: 1px
  }

  .data-\[orientation\=vertical\]\:flex-col[data-orientation=vertical] {
    flex-direction: column
  }

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

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

  .data-\[range-end\=true\]\:rounded-r-md[data-range-end=true] {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md)
  }

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

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

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

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

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

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

  .data-\[range-start\=true\]\:rounded-l-md[data-range-start=true] {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md)
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .data-\[size\=default\]\:h-9[data-size=default] {
    height: calc(var(--spacing) * 9)
  }

  .data-\[size\=default\]\:h-\[1\.15rem\][data-size=default] {
    height: 1.15rem
  }

  .data-\[size\=default\]\:w-8[data-size=default] {
    width: calc(var(--spacing) * 8)
  }

  .data-\[size\=lg\]\:size-10[data-size=lg] {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10)
  }

  .data-\[size\=sm\]\:size-6[data-size=sm] {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6)
  }

  .data-\[size\=sm\]\:h-3\.5[data-size=sm] {
    height: calc(var(--spacing) * 3.5)
  }

  .data-\[size\=sm\]\:h-8[data-size=sm] {
    height: calc(var(--spacing) * 8)
  }

  .data-\[size\=sm\]\:w-6[data-size=sm] {
    width: calc(var(--spacing) * 6)
  }

  .data-\[size\=sm\]\:max-w-xs[data-size=sm] {
    max-width: var(--container-xs)
  }

  .data-\[size\=sm\]\:py-1[data-size=sm] {
    padding-block: calc(var(--spacing) * 1)
  }

  :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90>*)[data-slot=alert-description] {
    color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90>*)[data-slot=alert-description] {
      color: color-mix(in oklab, var(--destructive) 90%, transparent)
    }
  }

  :is(.\*\:data-\[slot\=attachment\]\:flex-none>*)[data-slot=attachment] {
    flex: none
  }

  :is(.\*\:data-\[slot\=attachment\]\:snap-start>*)[data-slot=attachment] {
    scroll-snap-align: start
  }

  :is(.\*\:data-\[slot\=avatar\]\:ring-2>*)[data-slot=avatar] {
    --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)
  }

  :is(.\*\:data-\[slot\=avatar\]\:ring-background>*)[data-slot=avatar] {
    --tw-ring-color: var(--background)
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:rounded-none>*)[data-slot=bubble-content] {
    border-radius: 0
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:border-border>*)[data-slot=bubble-content] {
    border-color: var(--border)
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-\[oklch\(from_var\(--primary\)_0\.93_calc\(c\*0\.4\)_h\)\]>*)[data-slot=bubble-content] {
    background-color: oklch(from var(--primary) .93 calc(c * .4) h)
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-background>*)[data-slot=bubble-content] {
    background-color: var(--background)
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-destructive\/10>*)[data-slot=bubble-content] {
    background-color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=bubble-content\]\:bg-destructive\/10>*)[data-slot=bubble-content] {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent)
    }
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-primary>*)[data-slot=bubble-content] {
    background-color: var(--primary)
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-secondary>*)[data-slot=bubble-content] {
    background-color: var(--secondary)
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-transparent>*)[data-slot=bubble-content] {
    background-color: #0000
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:p-0>*)[data-slot=bubble-content] {
    padding: calc(var(--spacing) * 0)
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:text-destructive>*)[data-slot=bubble-content] {
    color: var(--destructive)
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:text-foreground>*)[data-slot=bubble-content] {
    color: var(--foreground)
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:text-primary-foreground>*)[data-slot=bubble-content] {
    color: var(--primary-foreground)
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:text-secondary-foreground>*)[data-slot=bubble-content] {
    color: var(--secondary-foreground)
  }

  .data-\[slot\=checkbox-group\]\:gap-3[data-slot=checkbox-group] {
    gap: calc(var(--spacing) * 3)
  }

  :is(.\*\*\:data-\[slot\=command-input-wrapper\]\:h-12 *)[data-slot=command-input-wrapper] {
    height: calc(var(--spacing) * 12)
  }

  :is(.\*\:data-\[slot\=input-group\]\:m-1>*)[data-slot=input-group] {
    margin: calc(var(--spacing) * 1)
  }

  :is(.\*\:data-\[slot\=input-group\]\:mb-0>*)[data-slot=input-group] {
    margin-bottom: calc(var(--spacing) * 0)
  }

  :is(.\*\:data-\[slot\=input-group\]\:h-8>*)[data-slot=input-group] {
    height: calc(var(--spacing) * 8)
  }

  :is(.\*\:data-\[slot\=input-group\]\:border-input\/30>*)[data-slot=input-group] {
    border-color: var(--input)
  }

  @supports (color:color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=input-group\]\:border-input\/30>*)[data-slot=input-group] {
      border-color: color-mix(in oklab, var(--input) 30%, transparent)
    }
  }

  :is(.\*\:data-\[slot\=input-group\]\:bg-input\/30>*)[data-slot=input-group] {
    background-color: var(--input)
  }

  @supports (color:color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=input-group\]\:bg-input\/30>*)[data-slot=input-group] {
      background-color: color-mix(in oklab, var(--input) 30%, transparent)
    }
  }

  :is(.\*\:data-\[slot\=input-group\]\:shadow-none>*)[data-slot=input-group] {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  :is(.\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:ring-0 *)[data-slot=navigation-menu-link]:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  :is(.\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:outline-none *)[data-slot=navigation-menu-link]:focus {
    --tw-outline-style: none;
    outline-style: none
  }

  :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1>*)[data-slot=select-value] {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
  }

  :is(.\*\:data-\[slot\=select-value\]\:flex>*)[data-slot=select-value] {
    display: flex
  }

  :is(.\*\:data-\[slot\=select-value\]\:items-center>*)[data-slot=select-value] {
    align-items: center
  }

  :is(.\*\:data-\[slot\=select-value\]\:gap-2>*)[data-slot=select-value] {
    gap: calc(var(--spacing) * 2)
  }

  :is(.group-data-\[orientation\=vertical\]\/attachment\:\*\:data-\[slot\=spinner\]\:size-6\!:is(:where(.group\/attachment)[data-orientation=vertical] *)>*)[data-slot=spinner] {
    width: calc(var(--spacing) * 6) !important;
    height: calc(var(--spacing) * 6) !important
  }

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

  .data-\[spacing\=0\]\:shadow-none[data-spacing="0"] {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .data-\[spacing\=0\]\:first\:rounded-l-md[data-spacing="0"]:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md)
  }

  .data-\[spacing\=0\]\:last\:rounded-r-md[data-spacing="0"]:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md)
  }

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

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

  .group-data-\[variant\=default\]\/tabs-list\:data-\[state\=active\]\:shadow-sm:is(:where(.group\/tabs-list)[data-variant=default] *)[data-state=active] {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:bg-transparent:is(:where(.group\/tabs-list)[data-variant=line] *)[data-state=active] {
    background-color: #0000
  }

  .group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:shadow-none:is(:where(.group\/tabs-list)[data-variant=line] *)[data-state=active] {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:after\:opacity-100:is(:where(.group\/tabs-list)[data-variant=line] *)[data-state=active]:after {
    content: var(--tw-content);
    opacity: 1
  }

  .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state=checked] {
    --tw-translate-x: calc(100% - 2px);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[state\=checked\]\:border-primary[data-state=checked] {
    border-color: var(--primary)
  }

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

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

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

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

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

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

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

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

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

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

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

  .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out:is(:where(.group\/navigation-menu)[data-viewport=false] *)[data-state=closed] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0:is(:where(.group\/navigation-menu)[data-viewport=false] *)[data-state=closed] {
    --tw-exit-opacity: 0
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95:is(:where(.group\/navigation-menu)[data-viewport=false] *)[data-state=closed] {
    --tw-exit-scale: .95
  }

  .data-\[state\=error\]\:border-destructive\/30[data-state=error] {
    border-color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .data-\[state\=error\]\:border-destructive\/30[data-state=error] {
      border-color: color-mix(in oklab, var(--destructive) 30%, transparent)
    }
  }

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

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

  .data-\[state\=idle\]\:border-dashed[data-state=idle] {
    --tw-border-style: dashed;
    border-style: dashed
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in:is(:where(.group\/navigation-menu)[data-viewport=false] *)[data-state=open] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0:is(:where(.group\/navigation-menu)[data-viewport=false] *)[data-state=open] {
    --tw-enter-opacity: 0
  }

  .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95:is(:where(.group\/navigation-menu)[data-viewport=false] *)[data-state=open] {
    --tw-enter-scale: .95
  }

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

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

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

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

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

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

  .data-\[variant\=destructive\]\:text-destructive[data-variant=destructive] {
    color: var(--destructive)
  }

  .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus {
    background-color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent)
    }
  }

  .data-\[variant\=destructive\]\:focus\:text-destructive[data-variant=destructive]:focus {
    color: var(--destructive)
  }

  .data-\[variant\=ghost\]\:max-w-full[data-variant=ghost] {
    max-width: 100%
  }

  .data-\[variant\=label\]\:text-sm[data-variant=label] {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height))
  }

  .data-\[variant\=legend\]\:text-base[data-variant=legend] {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height))
  }

  .data-\[variant\=line\]\:rounded-none[data-variant=line] {
    border-radius: 0
  }

  .data-\[spacing\=0\]\:data-\[variant\=outline\]\:border-l-0[data-spacing="0"][data-variant=outline] {
    border-left-style: var(--tw-border-style);
    border-left-width: 0
  }

  .data-\[spacing\=0\]\:data-\[variant\=outline\]\:first\:border-l[data-spacing="0"][data-variant=outline]:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px
  }

  .data-\[spacing\=default\]\:data-\[variant\=outline\]\:shadow-xs[data-spacing=default][data-variant=outline] {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction=bottom] {
    inset-inline: calc(var(--spacing) * 0)
  }

  .data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction=bottom] {
    bottom: calc(var(--spacing) * 0)
  }

  .data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction=bottom] {
    margin-top: calc(var(--spacing) * 24)
  }

  .data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction=bottom] {
    max-height: 80vh
  }

  .data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction=bottom] {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg)
  }

  .data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction=bottom] {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px
  }

  .data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction=left] {
    inset-block: calc(var(--spacing) * 0)
  }

  .data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction=left] {
    left: calc(var(--spacing) * 0)
  }

  .data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction=left] {
    width: 75%
  }

  .data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction=left] {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px
  }

  .data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction=right] {
    inset-block: calc(var(--spacing) * 0)
  }

  .data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction=right] {
    right: calc(var(--spacing) * 0)
  }

  .data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction=right] {
    width: 75%
  }

  .data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction=right] {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px
  }

  .data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction=top] {
    inset-inline: calc(var(--spacing) * 0)
  }

  .data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction=top] {
    top: calc(var(--spacing) * 0)
  }

  .data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction=top] {
    margin-bottom: calc(var(--spacing) * 24)
  }

  .data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction=top] {
    max-height: 80vh
  }

  .data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction=top] {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg)
  }

  .data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction=top] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px
  }

  .nth-last-2\:-mt-1:nth-last-child(2) {
    margin-top: calc(var(--spacing) * -1)
  }

  @media (width>=40rem) {
    .sm\:inset-x-auto {
      inset-inline: auto
    }

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

    .sm\:bottom-auto {
      bottom: auto
    }

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

    .sm\:block {
      display: block
    }

    .sm\:flex {
      display: flex
    }

    .sm\:w-full {
      width: 100%
    }

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

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

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

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

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

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

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

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

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

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

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

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:row-span-2:is(:where(.group\/alert-dialog-content)[data-size=default] *) {
      grid-row: span 2/span 2
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:place-items-start:is(:where(.group\/alert-dialog-content)[data-size=default] *) {
      place-items: start
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:text-left:is(:where(.group\/alert-dialog-content)[data-size=default] *) {
      text-align: left
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:group-has-data-\[slot\=alert-dialog-media\]\/alert-dialog-content\:col-start-2:is(:where(.group\/alert-dialog-content)[data-size=default] *):is(:where(.group\/alert-dialog-content):has([data-slot=alert-dialog-media]) *) {
      grid-column-start: 2
    }

    .sm\:group-data-\[size\=default\]\/alert-dialog-content\:has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_1fr\]:is(:where(.group\/alert-dialog-content)[data-size=default] *):has([data-slot=alert-dialog-media]) {
      grid-template-rows: auto 1fr
    }

    .data-\[size\=default\]\:sm\:max-w-lg[data-size=default] {
      max-width: var(--container-lg)
    }

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

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

    .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction=left],
    .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction=right] {
      max-width: var(--container-sm)
    }
  }

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

    .md\:block {
      display: block
    }

    .md\:flex {
      display: flex
    }

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

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

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

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

    .md\:p-12 {
      padding: calc(var(--spacing) * 12)
    }

    .md\:text-left {
      text-align: left
    }

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

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

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

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

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

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

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

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

  @container field-group (width>=28rem) {
    .\@md\/field-group\:flex-row {
      flex-direction: row
    }

    .\@md\/field-group\:items-center {
      align-items: center
    }

    .\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:items-start:has(>[data-slot=field-content]) {
      align-items: flex-start
    }
  }

  .rtl\:translate-x-1\/2:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir=rtl], [dir=rtl] *) {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  @media (prefers-color-scheme:dark) {
    .dark\:border-input {
      border-color: var(--input)
    }

    .dark\:bg-destructive\/60 {
      background-color: var(--destructive)
    }

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

    .dark\:bg-input\/30 {
      background-color: var(--input)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:bg-input\/30 {
        background-color: color-mix(in oklab, var(--input) 30%, transparent)
      }
    }

    .dark\:bg-transparent {
      background-color: #0000
    }

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

    @media (hover:hover) {
      .dark\:hover\:bg-accent\/50:hover {
        background-color: var(--accent)
      }

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

      .dark\:hover\:bg-input\/50:hover {
        background-color: var(--input)
      }

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

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

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

    .dark\:focus-visible\:ring-destructive\/40:focus-visible {
      --tw-ring-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:focus-visible\:ring-destructive\/40:focus-visible {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent)
      }
    }

    .dark\:has-aria-invalid\:border-destructive\/50:has([aria-invalid=true]) {
      border-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:has-aria-invalid\:border-destructive\/50:has([aria-invalid=true]) {
        border-color: color-mix(in oklab, var(--destructive) 50%, transparent)
      }
    }

    .dark\:has-aria-invalid\:ring-destructive\/40:has([aria-invalid=true]) {
      --tw-ring-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:has-aria-invalid\:ring-destructive\/40:has([aria-invalid=true]) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent)
      }
    }

    .dark\:has-data-\[state\=checked\]\:bg-primary\/10:has([data-state=checked]) {
      background-color: var(--primary)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:has-data-\[state\=checked\]\:bg-primary\/10:has([data-state=checked]) {
        background-color: color-mix(in oklab, var(--primary) 10%, transparent)
      }
    }

    .dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:has([data-slot][aria-invalid=true]) {
      --tw-ring-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:has([data-slot][aria-invalid=true]) {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent)
      }
    }

    .dark\:aria-invalid\:ring-destructive\/40[aria-invalid=true] {
      --tw-ring-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:aria-invalid\:ring-destructive\/40[aria-invalid=true] {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent)
      }
    }

    .dark\:data-\[active\=true\]\:aria-invalid\:ring-destructive\/40[data-active=true][aria-invalid=true] {
      --tw-ring-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:data-\[active\=true\]\:aria-invalid\:ring-destructive\/40[data-active=true][aria-invalid=true] {
        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent)
      }
    }

    :is(.dark\:\*\:data-\[slot\=bubble-content\]\:bg-\[oklch\(from_var\(--primary\)_0\.3_calc\(c\*0\.4\)_h\)\]>*)[data-slot=bubble-content] {
      background-color: oklch(from var(--primary) .3 calc(c * .4) h)
    }

    :is(.dark\:\*\:data-\[slot\=bubble-content\]\:bg-destructive\/20>*)[data-slot=bubble-content] {
      background-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
      :is(.dark\:\*\:data-\[slot\=bubble-content\]\:bg-destructive\/20>*)[data-slot=bubble-content] {
        background-color: color-mix(in oklab, var(--destructive) 20%, transparent)
      }
    }

    .dark\:data-\[state\=active\]\:border-input[data-state=active] {
      border-color: var(--input)
    }

    .dark\:data-\[state\=active\]\:bg-input\/30[data-state=active] {
      background-color: var(--input)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:data-\[state\=active\]\:bg-input\/30[data-state=active] {
        background-color: color-mix(in oklab, var(--input) 30%, transparent)
      }
    }

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

    .dark\:group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:border-transparent:is(:where(.group\/tabs-list)[data-variant=line] *)[data-state=active] {
      border-color: #0000
    }

    .dark\:group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:bg-transparent:is(:where(.group\/tabs-list)[data-variant=line] *)[data-state=active] {
      background-color: #0000
    }

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

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

    .dark\:data-\[state\=unchecked\]\:bg-foreground[data-state=unchecked] {
      background-color: var(--foreground)
    }

    .dark\:data-\[state\=unchecked\]\:bg-input\/80[data-state=unchecked] {
      background-color: var(--input)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:data-\[state\=unchecked\]\:bg-input\/80[data-state=unchecked] {
        background-color: color-mix(in oklab, var(--input) 80%, transparent)
      }
    }

    .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20[data-variant=destructive]:focus {
      background-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20[data-variant=destructive]:focus {
        background-color: color-mix(in oklab, var(--destructive) 20%, transparent)
      }
    }
  }

  @media (pointer:coarse) {
    .pointer-coarse\:size-5 {
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5)
    }

    .pointer-coarse\:px-3 {
      padding-inline: calc(var(--spacing) * 3)
    }

    .pointer-coarse\:py-2 {
      padding-block: calc(var(--spacing) * 2)
    }

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

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

  .data-open\:fade-in-0:where([data-state=open]),
  .data-open\:fade-in-0:where([data-open]:not([data-open=false])) {
    --tw-enter-opacity: 0
  }

  .data-open\:zoom-in-95:where([data-state=open]),
  .data-open\:zoom-in-95:where([data-open]:not([data-open=false])) {
    --tw-enter-scale: .95
  }

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

  .data-closed\:fade-out-0:where([data-state=closed]),
  .data-closed\:fade-out-0:where([data-closed]:not([data-closed=false])) {
    --tw-exit-opacity: 0
  }

  .data-closed\:zoom-out-95:where([data-state=closed]),
  .data-closed\:zoom-out-95:where([data-closed]:not([data-closed=false])) {
    --tw-exit-scale: .95
  }

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

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

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

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

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

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

  @media (forced-colors:active) {
    .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer {
      outline-offset: 2px;
      outline: 2px solid #0000
    }
  }

  .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke=\#ccc],
  .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke=\#ccc] {
    stroke: var(--border)
  }

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

  @media (forced-colors:active) {
    .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector {
      outline-offset: 2px;
      outline: 2px solid #0000
    }
  }

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

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

  @media (forced-colors:active) {
    .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface {
      outline-offset: 2px;
      outline: 2px solid #0000
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .\[\&_img\]\:size-full img {
    width: 100%;
    height: 100%
  }

  .\[\&_img\]\:object-cover img {
    object-fit: cover
  }

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

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

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

  .data-\[direction\=start\]\:\[\&_svg\]\:rotate-180[data-direction=start] svg {
    rotate: 180deg
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3)
  }

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

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*=size-]),
  .group-data-\[orientation\=vertical\]\/attachment\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6:is(:where(.group\/attachment)[data-orientation=vertical] *) svg:not([class*=size-]) {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6)
  }

  .group-data-\[size\=xs\]\/attachment\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5:is(:where(.group\/attachment)[data-size=xs] *) svg:not([class*=size-]) {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5)
  }

  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]) {
    color: var(--muted-foreground)
  }

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

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

  .\[\&\+\[data-slot\=item-content\]\]\:flex-none+[data-slot=item-content] {
    flex: none
  }

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

  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
    padding-right: calc(var(--spacing) * 0)
  }

  .\[\.border-b\]\:pb-3.border-b {
    padding-bottom: calc(var(--spacing) * 3)
  }

  .\[\.border-b\]\:pb-6.border-b {
    padding-bottom: calc(var(--spacing) * 6)
  }

  .\[\.border-t\]\:pt-3.border-t {
    padding-top: calc(var(--spacing) * 3)
  }

  .\[\.border-t\]\:pt-6.border-t {
    padding-top: calc(var(--spacing) * 6)
  }

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

  .\[a\]\:underline:is(a) {
    text-decoration-line: underline
  }

  .\[a\]\:underline-offset-3:is(a) {
    text-underline-offset: 3px
  }

  .\[a\]\:transition-colors:is(a) {
    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))
  }

  :is(.\*\:\[a\]\:underline>*):is(a) {
    text-decoration-line: underline
  }

  :is(.\*\:\[a\]\:underline-offset-3>*):is(a) {
    text-underline-offset: 3px
  }

  @media (hover:hover) {
    .\[a\]\:hover\:bg-accent\/50:is(a):hover {
      background-color: var(--accent)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .\[a\]\:hover\:bg-accent\/50:is(a):hover {
        background-color: color-mix(in oklab, var(--accent) 50%, transparent)
      }
    }

    .\[a\]\:hover\:text-foreground:is(a):hover,
    :is(.\*\:\[a\]\:hover\:text-foreground>*):is(a):hover {
      color: var(--foreground)
    }
  }

  .\[button\]\:text-left:is(button) {
    text-align: left
  }

  .\[button\,a\]\:transition-colors:is(button, a) {
    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))
  }

  .\[button\,a\]\:outline-none:is(button, a) {
    --tw-outline-style: none;
    outline-style: none
  }

  .\[button\,a\]\:focus-visible\:border-ring:is(button, a):focus-visible {
    border-color: var(--ring)
  }

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

  .\[button\,a\]\:focus-visible\:ring-ring\/50:is(button, a):focus-visible {
    --tw-ring-color: var(--ring)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .\[button\,a\]\:focus-visible\:ring-ring\/50:is(button, a):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent)
    }
  }

  :is(.\*\:\[img\]\:aspect-square>*):is(img) {
    aspect-ratio: 1
  }

  :is(.\*\:\[img\]\:w-full>*):is(img) {
    width: 100%
  }

  :is(.\*\:\[img\]\:object-cover>*):is(img) {
    object-fit: cover
  }

  :is(.\*\:\[span\]\:last\:flex>*):is(span):last-child {
    display: flex
  }

  :is(.\*\:\[span\]\:last\:items-center>*):is(span):last-child {
    align-items: center
  }

  :is(.\*\:\[span\]\:last\:gap-2>*):is(span):last-child {
    gap: calc(var(--spacing) * 2)
  }

  :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive\![data-variant=destructive]>*):is(svg) {
    color: var(--destructive) !important
  }

  :is(.\*\:\[svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-8>*):is(svg:not([class*=size-])) {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8)
  }

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

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

  .\[\&\>\*\]\:w-full>* {
    width: 100%
  }

  .\[\&\>\*\]\:focus-visible\:relative>:focus-visible {
    position: relative
  }

  .\[\&\>\*\]\:focus-visible\:z-10>:focus-visible {
    z-index: 10
  }

  .\[\&\>\*\]\:data-\[slot\=field\]\:p-4>[data-slot=field] {
    padding: calc(var(--spacing) * 4)
  }

  @container field-group (width>=28rem) {
    .\@md\/field-group\:\[\&\>\*\]\:w-auto>* {
      width: auto
    }
  }

  .\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none>:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0
  }

  .\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none>:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
  }

  .\[\&\>\*\:not\(\:first-child\)\]\:border-t-0>:not(:first-child) {
    border-top-style: var(--tw-border-style);
    border-top-width: 0
  }

  .\[\&\>\*\:not\(\:first-child\)\]\:border-l-0>:not(:first-child) {
    border-left-style: var(--tw-border-style);
    border-left-width: 0
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-none>:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none>:not(:last-child) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
  }

  .\[\&\>\.sr-only\]\:w-auto>.sr-only {
    width: auto
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[color-mix\(in_oklch\,var\(--muted\)\,var\(--foreground\)_5\%\)\]>[data-slot=bubble-content]:is(button, a):hover {
    background-color: var(--muted)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[color-mix\(in_oklch\,var\(--muted\)\,var\(--foreground\)_5\%\)\]>[data-slot=bubble-content]:is(button, a):hover {
      background-color: color-mix(in oklch, var(--muted), var(--foreground) 5%)
    }
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]>[data-slot=bubble-content]:is(button, a):hover {
    background-color: var(--secondary)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]>[data-slot=bubble-content]:is(button, a):hover {
      background-color: color-mix(in oklch, var(--secondary), var(--foreground) 5%)
    }
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[oklch\(from_var\(--primary\)_0\.88_calc\(c\*0\.5\)_h\)\]>[data-slot=bubble-content]:is(button, a):hover {
    background-color: oklch(from var(--primary) .88 calc(c * .5) h)
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-destructive\/20>[data-slot=bubble-content]:is(button, a):hover {
    background-color: var(--destructive)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-destructive\/20>[data-slot=bubble-content]:is(button, a):hover {
      background-color: color-mix(in oklab, var(--destructive) 20%, transparent)
    }
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-primary\/80>[data-slot=bubble-content]:is(button, a):hover {
    background-color: var(--primary)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-primary\/80>[data-slot=bubble-content]:is(button, a):hover {
      background-color: color-mix(in oklab, var(--primary) 80%, transparent)
    }
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:text-foreground>[data-slot=bubble-content]:is(button, a):hover {
    color: var(--foreground)
  }

  @media (prefers-color-scheme:dark) {
    .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[oklch\(from_var\(--primary\)_0\.35_calc\(c\*0\.5\)_h\)\]>[data-slot=bubble-content]:is(button, a):hover {
      background-color: oklch(from var(--primary) .35 calc(c * .5) h)
    }

    .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-destructive\/30>[data-slot=bubble-content]:is(button, a):hover {
      background-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-destructive\/30>[data-slot=bubble-content]:is(button, a):hover {
        background-color: color-mix(in oklab, var(--destructive) 30%, transparent)
      }
    }

    .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-input\/30>[data-slot=bubble-content]:is(button, a):hover {
      background-color: var(--input)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-input\/30>[data-slot=bubble-content]:is(button, a):hover {
        background-color: color-mix(in oklab, var(--input) 30%, transparent)
      }
    }
  }

  .\[\&\>\[data-slot\=field-group\]\]\:gap-4>[data-slot=field-group] {
    gap: calc(var(--spacing) * 4)
  }

  .\[\&\>\[data-slot\=field-label\]\]\:flex-auto>[data-slot=field-label] {
    flex: auto
  }

  @container field-group (width>=28rem) {
    .\@md\/field-group\:\[\&\>\[data-slot\=field-label\]\]\:flex-auto>[data-slot=field-label] {
      flex: auto
    }
  }

  .has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md:has(:is(select[aria-hidden=true]:last-child))>[data-slot=select-trigger]:last-of-type {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md)
  }

  .\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=w-]) {
    width: fit-content
  }

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

  :is(.has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content])>[role=checkbox], .has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content]) [role=radio]) {
    margin-top: 1px
  }

  @container field-group (width>=28rem) {
    :is(.\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content])>[role=checkbox], .\@md\/field-group\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content]) [role=radio]) {
      margin-top: 1px
    }
  }

  .\[\&\>a\]\:underline>a {
    text-decoration-line: underline
  }

  .\[\&\>a\]\:underline-offset-4>a {
    text-underline-offset: 4px
  }

  .\[\&\>a\:hover\]\:text-primary>a:hover {
    color: var(--primary)
  }

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

  .\[\&\>input\]\:flex-1>input {
    flex: 1
  }

  .has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(>[data-align=block-end])>input {
    padding-top: calc(var(--spacing) * 3)
  }

  .has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(>[data-align=block-start])>input {
    padding-bottom: calc(var(--spacing) * 3)
  }

  .has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2:has(>[data-align=inline-end])>input {
    padding-right: calc(var(--spacing) * 2)
  }

  .has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2:has(>[data-align=inline-start])>input {
    padding-left: calc(var(--spacing) * 2)
  }

  .\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\]>kbd {
    border-radius: calc(var(--radius) - 5px)
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .\[\&\>svg\]\:translate-y-0\.5>svg {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .\[\&\>svg\]\:text-current>svg {
    color: currentColor
  }

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

  .group-has-data-\[size\=lg\]\/avatar-group\:\[\&\>svg\]\:size-5:is(:where(.group\/avatar-group):has([data-size=lg]) *)>svg {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5)
  }

  .group-has-data-\[size\=sm\]\/avatar-group\:\[\&\>svg\]\:size-3:is(:where(.group\/avatar-group):has([data-size=sm]) *)>svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3)
  }

  .group-data-\[size\=default\]\/avatar\:\[\&\>svg\]\:size-2:is(:where(.group\/avatar)[data-size=default] *)>svg,
  .group-data-\[size\=lg\]\/avatar\:\[\&\>svg\]\:size-2:is(:where(.group\/avatar)[data-size=lg] *)>svg {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2)
  }

  .group-data-\[size\=sm\]\/avatar\:\[\&\>svg\]\:hidden:is(:where(.group\/avatar)[data-size=sm] *)>svg {
    display: none
  }

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

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

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

  .\[\&\[aria-orientation\=horizontal\]\>div\]\:rotate-90[aria-orientation=horizontal]>div {
    rotate: 90deg
  }

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

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

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

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

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

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

  [data-slot=tooltip-content] .\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/20 {
    background-color: var(--background)
  }

  @supports (color:color-mix(in lab, red, red)) {
    [data-slot=tooltip-content] .\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/20 {
      background-color: color-mix(in oklab, var(--background) 20%, transparent)
    }
  }

  [data-slot=tooltip-content] .\[\[data-slot\=tooltip-content\]_\&\]\:text-background {
    color: var(--background)
  }

  @media (prefers-color-scheme:dark) {
    [data-slot=tooltip-content] .dark\:\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/10 {
      background-color: var(--background)
    }

    @supports (color:color-mix(in lab, red, red)) {
      [data-slot=tooltip-content] .dark\:\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/10 {
        background-color: color-mix(in oklab, var(--background) 10%, transparent)
      }
    }
  }

  [data-variant=legend]+.\[\[data-variant\=legend\]\+\&\]\:-mt-1\.5 {
    margin-top: calc(var(--spacing) * -1.5)
  }

  @media (hover:hover) {
    a.\[a\&\]\:hover\:bg-accent:hover {
      background-color: var(--accent)
    }

    a.\[a\&\]\:hover\:bg-destructive\/90:hover {
      background-color: var(--destructive)
    }

    @supports (color:color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent)
      }
    }

    a.\[a\&\]\:hover\:bg-primary\/90:hover {
      background-color: var(--primary)
    }

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

    a.\[a\&\]\:hover\:bg-secondary\/90:hover {
      background-color: var(--secondary)
    }

    @supports (color:color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-secondary\/90:hover {
        background-color: color-mix(in oklab, var(--secondary) 90%, transparent)
      }
    }

    a.\[a\&\]\:hover\:text-accent-foreground:hover {
      color: var(--accent-foreground)
    }

    a.\[a\&\]\:hover\:underline:hover {
      text-decoration-line: underline
    }
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@property --scroll-fade-t {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0
}

@property --scroll-fade-b {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0
}

@property --scroll-fade-s {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0
}

@property --scroll-fade-e {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0
}

@property --scroll-fade-mask {
  syntax: "*";
  inherits: false
}

@property --shimmer-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 20deg
}

@property --shimmer-image {
  syntax: "*";
  inherits: false
}

@property --shimmer-text-fill {
  syntax: "*";
  inherits: false
}

@media (prefers-reduced-motion:reduce) {
  .shimmer {
    -webkit-text-fill-color: currentColor;
    background-image: none;
    animation: none
  }
}

/* AMIR MARKETS application stylesheet - the hand-written half of the
   recovered production CSS (lines 6062-28071), verbatim. This is the
   file to edit for design changes. */
:root {
  --ink: #101915;
  --green: #1e7d59;
  --green2: #25a975;
  --mint: #dff4e9;
  --paper: #f3f4ef;
  --card: #fff;
  --line: #dfe3dc;
  --muted: #707972;
  --soft: #e9ece6;
  --gold: #b9852d;
  --red: #c85151;
  --background: var(--paper);
  --foreground: var(--ink);
  --card-foreground: var(--ink);
  --popover: var(--card);
  --popover-foreground: var(--ink);
  --primary: var(--ink);
  --primary-foreground: #fff;
  --secondary: var(--soft);
  --secondary-foreground: var(--ink);
  --muted-foreground: var(--muted);
  --accent: var(--mint);
  --accent-foreground: var(--ink);
  --destructive: var(--red);
  --border: var(--line);
  --input: var(--line);
  --ring: var(--green);
  --radius: 14px
}

.auth-success .success-shell {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 1320px
}

.auth-success .auth-complete-card {
  margin-inline: auto
}

@media (width>=1101px) {
  [data-slot=dialog-content] {
    margin: 0 !important;
    inset: 50% auto auto 50% !important;
    transform: none !important
  }
}

.navigator-launcher {
  background: linear-gradient(145deg, #0e1413f7, #070a0cf7);
  border-color: #55e6b24d;
  width: min(380px, 100vw - 32px);
  animation: 3s ease-in-out infinite navigator-breathe;
  bottom: 22px;
  left: 50%;
  right: auto;
  transform: translate(-50%);
  box-shadow: 0 28px 90px #0000008f, 0 0 0 1px #55e6b20a, inset 0 1px #ffffff0d
}

.tour-live-target {
  outline-offset: 7px;
  animation: 1.7s ease-in-out infinite tour-target-pulse;
  position: relative;
  z-index: 62 !important;
  outline: 2px solid #55e6b2f2 !important;
  box-shadow: 0 0 0 12px #55e6b217, 0 28px 100px #00000094 !important
}

.tour-pointer-layer {
  z-index: 75;
  pointer-events: none;
  width: 100vw;
  height: 100dvh;
  position: fixed;
  inset: 0;
  overflow: visible
}

.tour-pointer-layer path:not([d^=M0]) {
  fill: none;
  stroke: #55e6b2;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-dasharray: 8 8;
  filter: drop-shadow(0 0 8px #55e6b2cc);
  animation: .8s linear infinite tour-line-flow
}

.tour-pointer-layer marker path {
  fill: #55e6b2
}

.tour-pointer-layer circle {
  fill: #55e6b22e;
  stroke: #55e6b2;
  stroke-width: 2px;
  transform-box: fill-box;
  transform-origin: 50%;
  animation: 1.25s ease-in-out infinite tour-dot-pulse
}

.future-day-preview {
  background: linear-gradient(145deg, #7da5ff12, #030608b8);
  border: 1px solid #7da5ff38;
  border-radius: 22px;
  margin-top: 14px;
  padding: 18px
}

.future-day-preview>header {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  display: flex
}

.future-day-preview>header span {
  color: #8ca9f0;
  letter-spacing: .14em;
  font-size: 8px;
  font-weight: 800
}

.future-day-preview>header b {
  color: #aab2af;
  font-size: 10px;
  font-weight: 560
}

.future-day-preview>div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid
}

.future-day-preview article {
  background: #070a0cb8;
  border: 1px solid #ffffff14;
  border-radius: 16px;
  grid-template-columns: auto 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 122px;
  padding: 14px;
  display: grid;
  position: relative
}

.future-day-preview article.future-main-event {
  background: radial-gradient(circle at 90% 14%, #7da5ff38, #0000 34%), #0d121a;
  border-color: #7da5ff80;
  transform: translateY(-4px);
  box-shadow: 0 18px 50px #3a508b33
}

.future-day-preview time {
  color: #f1efe9;
  font-size: 18px;
  font-weight: 720
}

.future-day-preview article>i {
  background: #58635f;
  border-radius: 50%;
  width: 7px;
  height: 7px
}

.future-day-preview .future-main-event>i {
  background: #7da5ff;
  box-shadow: 0 0 14px #7da5ff
}

.future-day-preview article span {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex
}

.future-day-preview small {
  color: #73807b;
  letter-spacing: .12em;
  font-size: 7px;
  font-weight: 800
}

.future-day-preview .future-main-event small {
  color: #8ca9f0
}

.future-day-preview article b {
  color: #edf0eb;
  font-size: 13px
}

.future-day-preview article em {
  color: #818c87;
  font-size: 9px;
  font-style: normal;
  line-height: 1.35
}

.future-day-preview article>svg {
  color: #7da5ff;
  width: 20px
}

@keyframes navigator-breathe {

  0%,
  to {
    box-shadow: 0 28px 90px #0000008f, 0 0 0 1px #55e6b20a
  }

  50% {
    box-shadow: 0 28px 90px #0000008f, 0 0 0 7px #55e6b212
  }
}

@keyframes navigator-arrive {
  0% {
    opacity: 0;
    transform: translate(-50%, 24px)scale(.96)
  }

  to {
    opacity: 1;
    transform: translate(-50%)scale(1)
  }
}

@keyframes tour-target-pulse {
  50% {
    outline-offset: 11px
  }
}

@keyframes tour-line-flow {
  to {
    stroke-dashoffset: -16px
  }
}

@keyframes tour-dot-pulse {
  50% {
    opacity: .45;
    transform: scale(1.75)
  }
}

@media (width<=760px) {
  .navigator-launcher {
    left: 12px;
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    width: auto;
    min-width: 0;
    height: 58px;
    padding: 8px 10px;
    transform: none
  }

  .navigator-launcher>span {
    display: flex
  }

  .navigator-launcher>svg {
    display: block
  }

  .navigator-launcher b {
    font-size: 11px
  }

  .navigator-launcher small {
    font-size: 8px
  }

  .guided-amir-tour {
    left: 8px;
    right: 8px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(410px, 100dvh - 150px);
    animation-name: navigator-mobile-arrive;
    transform: none
  }

  .guided-amir-tour p {
    -webkit-line-clamp: initial;
    display: block;
    overflow: visible
  }

  .tour-pointer-layer {
    display: none
  }

  .tour-live-target {
    outline-offset: 4px;
    box-shadow: 0 0 0 7px #55e6b21a, 0 22px 70px #0000008f !important
  }

  .future-day-preview {
    padding: 12px
  }

  .future-day-preview>header {
    display: block
  }

  .future-day-preview>header b {
    margin-top: 5px;
    display: block
  }

  .future-day-preview>div {
    grid-template-columns: 1fr
  }

  .future-day-preview article {
    min-height: 78px
  }

  .future-day-preview article.future-main-event {
    transform: none
  }

  [data-slot=dialog-content] {
    transform: none !important
  }
}

@keyframes navigator-mobile-arrive {
  0% {
    opacity: 0;
    transform: translateY(24px)scale(.97)
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1)
  }
}

:root {
  scrollbar-gutter: stable;
  --am-obsidian: #050708;
  --am-surface: #0a0d0f;
  --am-surface-raised: #0e1214;
  --am-ivory: #f2efe8;
  --am-muted: #8f9996;
  --am-mint: #55e6b2;
  --am-champagne: #d7b978;
  --am-blue: #7da5ff;
  --am-violet: #a88aff;
  --am-coral: #ff806d;
  --am-hairline: #f2efe818;
  --am-radius: 24px;
  --am-ease: cubic-bezier(.2, .8, .2, 1)
}

body {
  color: var(--am-ivory);
  font-optical-sizing: auto;
  text-rendering: optimizelegibility;
  background: var(--am-obsidian);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI Variable, Segoe UI, Arial, sans-serif
}

button,
input,
textarea,
select {
  font: inherit
}

button {
  -webkit-tap-highlight-color: transparent
}

.page {
  animation: am-page-in .55s var(--am-ease) both
}

.page-title h1,
.guest-copy h1,
.strategy-world-preview h2,
.generated-deal-card h2 {
  text-wrap: balance;
  font-weight: 690 !important
}

.page-title h1,
.guest-copy h1 {
  letter-spacing: -.052em !important
}

[data-slot=button],
.guest-actions>button,
.signal-primary-action>button,
.next-session-action {
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--am-ease), border-color .22s ease, background-color .22s ease, box-shadow .22s ease !important
}

[data-slot=button]:after,
.guest-actions>button:after {
  content: "";
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0000, #ffffff38, #0000);
  width: 34%;
  position: absolute;
  inset: -1px auto -1px -45%;
  transform: skew(-18deg)
}

[data-slot=button]:hover,
.guest-actions>button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px #0000003d !important
}

[data-slot=button]:hover:after,
.guest-actions>button:hover:after {
  opacity: 1;
  animation: am-button-sweep .65s var(--am-ease)
}

[data-slot=button]:active,
.guest-actions>button:active,
.strategy-choice-list>button:active {
  transform: scale(.985) !important
}

.signal-pulse-mark {
  width: 180px;
  height: 72px;
  color: var(--am-mint);
  pointer-events: none;
  overflow: visible
}

.signal-pulse-mark.compact {
  width: 116px;
  height: 46px
}

.signal-pulse-mark path,
.signal-pulse-mark circle {
  vector-effect: non-scaling-stroke
}

.signal-pulse-mark .pulse-rail {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px)
}

@supports (color:color-mix(in lab, red, red)) {
  .signal-pulse-mark .pulse-rail {
    filter: drop-shadow(0 0 9px color-mix(in srgb, currentColor 38%, transparent))
  }
}

.signal-pulse-mark .pulse-rail {
  stroke-dasharray: 240;
  animation: am-pulse-draw 2.8s var(--am-ease) infinite
}

.signal-pulse-mark .pulse-node {
  fill: var(--am-obsidian);
  stroke: currentColor;
  stroke-width: 2px
}

.signal-pulse-mark .pulse-node-b {
  fill: currentColor;
  transform-origin: 99px 39px;
  animation: 1.9s ease-in-out infinite am-node-breathe
}

.signal-pulse-mark .pulse-window {
  fill: none;
  stroke: var(--am-champagne);
  stroke-width: 1px;
  opacity: .7
}

.guest-preview>.signal-pulse-mark {
  z-index: 4;
  opacity: .9;
  position: absolute;
  top: 26px;
  right: 28px
}

.next-signal>.signal-pulse-mark {
  z-index: 3;
  opacity: .45;
  color: #8df4cf;
  position: absolute;
  top: 76px;
  right: 30px
}

.strategy-drop>.signal-pulse-mark {
  color: var(--am-champagne);
  opacity: .42;
  position: absolute;
  top: 18px;
  right: 18px
}

.strategy-sigil {
  color: currentColor;
  width: 100%;
  height: 100%;
  overflow: visible
}

.strategy-sigil * {
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: 50%
}

.strategy-sigil .sigil-boundary,
.strategy-sigil .sigil-orbit,
.strategy-sigil .sigil-beam,
.strategy-sigil .sigil-candle,
.strategy-sigil .sigil-direction,
.strategy-sigil .sigil-link,
.strategy-sigil .sigil-level,
.strategy-sigil .sigil-breakout,
.strategy-sigil .sigil-return,
.strategy-sigil .sigil-trend-line,
.strategy-sigil .sigil-trend-shadow {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round
}

.strategy-sigil .sigil-boundary {
  opacity: .18;
  stroke-width: 1px
}

.strategy-sigil .sigil-core,
.strategy-sigil .sigil-target,
.strategy-sigil .sigil-node {
  fill: currentColor
}

.strategy-sigil .sigil-orbit {
  opacity: .54;
  stroke-width: 1px
}

.strategy-sigil .orbit-b {
  stroke-dasharray: 5 5
}

.strategy-sigil .sigil-choice {
  fill: #0c1210;
  stroke: currentColor;
  stroke-width: 1.5px
}

.strategy-sigil .sigil-choice.chosen {
  fill: currentColor
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-sigil .sigil-choice.chosen {
    fill: color-mix(in srgb, currentColor 20%, #0c1210)
  }
}

.strategy-sigil .sigil-check {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round
}

.strategy-sigil .sigil-trend-shadow {
  opacity: .22;
  stroke-width: 8px
}

.strategy-sigil.is-active {
  filter: drop-shadow(0 0 12px)
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-sigil.is-active {
    filter: drop-shadow(0 0 12px color-mix(in srgb, currentColor 45%, transparent))
  }
}

.strategy-sigil.is-active.sigil-bot .sigil-beam {
  animation: 2.6s linear infinite am-radar
}

.strategy-sigil.is-active.sigil-bot .orbit-b {
  animation: 7s linear infinite am-orbit
}

.strategy-sigil.is-active.sigil-rapid .sigil-candle {
  animation: 1.8s ease-in-out infinite am-candle
}

.strategy-sigil.is-active.sigil-rapid .b {
  animation-delay: .15s
}

.strategy-sigil.is-active.sigil-rapid .c {
  animation-delay: .3s
}

.strategy-sigil.is-active.sigil-starter .sigil-check {
  animation: 2.1s ease-in-out infinite am-check
}

.strategy-sigil.is-active.sigil-precision .sigil-target {
  animation: 1.5s ease-in-out infinite am-node-breathe
}

.strategy-sigil.is-active.sigil-trend .sigil-trend-line {
  stroke-dasharray: 120;
  animation: 3s linear infinite am-trend
}

.guest:before {
  content: "";
  pointer-events: none;
  opacity: .24;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  position: fixed;
  inset: 0
}

.guest-copy h1 {
  max-width: 850px;
  color: var(--am-ivory) !important;
  font-weight: 650 !important
}

.guest-copy h1 em {
  text-shadow: 0 0 48px #55e6b21f;
  font-style: normal;
  color: #73e4bb !important
}

.guest-facts {
  border-top-color: #f2efe81a !important
}

.guest-facts b {
  font-weight: 620 !important
}

.next-signal .signal-main h2 {
  font-weight: 610 !important
}

.next-signal .signal-main strong {
  color: #72e6ba !important
}

.next-lesson,
.level-preview {
  box-shadow: inset 0 1px #ffffff09;
  background: linear-gradient(150deg, #101319, #0b0e12) !important
}

.trade-generator-dialog.strategy-world {
  --world-glow: var(--strategy-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .trade-generator-dialog.strategy-world {
    --world-glow: color-mix(in srgb, var(--strategy-accent) 18%, transparent)
  }
}

.trade-generator-dialog.strategy-world {
  isolation: isolate;
  border-color: var(--strategy-accent) !important
}

@supports (color:color-mix(in lab, red, red)) {
  .trade-generator-dialog.strategy-world {
    border-color: color-mix(in srgb, var(--strategy-accent) 35%, #232b28) !important;
    background: radial-gradient(circle at 87% 8%, var(--world-glow), transparent 31%), radial-gradient(circle at 12% 94%, color-mix(in srgb, var(--strategy-accent) 7%, transparent), transparent 35%), linear-gradient(155deg, #0d1212, #07090a 72%) !important
  }
}

.trade-generator-dialog.strategy-world:before {
  content: "";
  z-index: -1;
  opacity: .26;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, #0000 0 74px, #ffffff06 75px), repeating-linear-gradient(0deg, #0000 0 74px, #ffffff05 75px);
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle at 70% 35%, #000, #0000 75%);
  mask-image: radial-gradient(circle at 70% 35%, #000, #0000 75%)
}

.generator-progress {
  background: #ffffff14 !important;
  height: 2px !important
}

.generator-progress i {
  box-shadow: 0 0 18px var(--strategy-accent);
  transition: width .55s var(--am-ease) !important
}

.strategy-picker {
  gap: 20px
}

.strategy-choice-list {
  align-content: center;
  gap: 9px
}

.strategy-choice-list>button {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #0b0f0fb8;
  border-color: #f2efe816;
  border-radius: 18px;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  min-height: 76px
}

@supports (color:color-mix(in lab, red, red)) {

  .strategy-choice-list>button:hover,
  .strategy-choice-list>button.active {
    border-color: color-mix(in srgb, var(--strategy-accent) 65%, transparent);
    background: linear-gradient(100deg, color-mix(in srgb, var(--strategy-accent) 12%, #0c1110), #0a0d0d 72%)
  }

  .strategy-choice-list>button>i {
    background: color-mix(in srgb, var(--strategy-accent) 8%, #101514)
  }
}

.strategy-choice-list b {
  color: #e9e8e3;
  font-size: 15px;
  font-weight: 610
}

.strategy-choice-list small {
  font-weight: 710
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-world-preview {
    background: radial-gradient(circle at 76% 14%, color-mix(in srgb, var(--strategy-accent) 16%, transparent), transparent 28%), linear-gradient(145deg, color-mix(in srgb, var(--strategy-muted) 52%, #0b0f0f), #070a0b 72%)
  }
}

.strategy-world-preview:before,
.strategy-world-preview:after {
  border-color: var(--strategy-accent);
  width: 420px;
  height: 220px
}

@supports (color:color-mix(in lab, red, red)) {

  .strategy-world-preview:before,
  .strategy-world-preview:after {
    border-color: color-mix(in srgb, var(--strategy-accent) 22%, transparent)
  }

  .strategy-mark {
    background: radial-gradient(circle, color-mix(in srgb, var(--strategy-accent) 14%, #0d1412), #0b0e0f 68%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--strategy-accent) 28%, transparent), 0 0 70px color-mix(in srgb, var(--strategy-accent) 13%, transparent)
  }
}

.strategy-world-preview>strong {
  font-weight: 560
}

.generated-deal-card h2 {
  font-weight: 610 !important
}

.strategy-world.theme-bot,
.theme-bot {
  --strategy-accent: #55e6b2;
  --strategy-muted: #123d31
}

.strategy-world.theme-rapid,
.theme-rapid {
  --strategy-accent: #ff806d;
  --strategy-muted: #4b211d
}

.strategy-world.theme-starter,
.theme-starter {
  --strategy-accent: #7da5ff;
  --strategy-muted: #1a315d
}

.strategy-world.theme-precision,
.theme-precision {
  --strategy-accent: #a88aff;
  --strategy-muted: #34225c
}

.strategy-world.theme-trend,
.theme-trend {
  --strategy-accent: #d7b978;
  --strategy-muted: #46371d
}

@media (width<=760px) {
  :root {
    --am-radius: 20px
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip !important
  }

  .page {
    overflow-x: clip !important
  }

  .page-title h1,
  .guest-copy h1 {
    font-weight: 620 !important
  }

  .guest-head {
    background: #050708e6 !important
  }

  .guest-hero {
    background: 0 0 !important
  }

  .guest-copy h1 {
    font-size: clamp(48px, 14vw, 66px) !important;
    line-height: .96 !important
  }

  .guest-copy>p {
    font-size: 17px !important;
    line-height: 1.52 !important
  }

  .guest-preview>.signal-pulse-mark {
    width: 112px;
    top: 16px;
    right: 15px
  }

  .next-signal>.signal-pulse-mark {
    opacity: .28;
    width: 92px;
    top: 65px;
    right: 10px
  }

  .next-signal .signal-tech,
  .next-signal .signal-facts span:nth-child(2) {
    display: none !important
  }

  .trade-generator-dialog.strategy-world {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(91dvh, 920px) !important;
    padding: 20px 16px max(18px, env(safe-area-inset-bottom)) !important;
    border-width: 1px 0 0 !important;
    border-radius: 26px 26px 0 0 !important;
    inset: auto 0 0 !important;
    overflow: hidden auto !important;
    transform: none !important
  }

  .trade-generator-dialog.strategy-world>button[data-slot=dialog-close] {
    top: 16px !important;
    right: 14px !important
  }

  .trade-generator-dialog [data-slot=dialog-title] {
    max-width: calc(100% - 48px);
    font-size: 24px !important
  }

  .strategy-picker {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0
  }

  .strategy-choice-list {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 9px;
    max-width: 100%;
    padding: 2px 1px 8px;
    display: flex;
    overflow-x: auto
  }

  .strategy-choice-list::-webkit-scrollbar {
    display: none
  }

  .strategy-choice-list>button {
    scroll-snap-align: start;
    flex: 0 0 150px;
    grid-template-columns: 40px minmax(0, 1fr);
    min-width: 150px;
    min-height: 82px;
    padding: 10px
  }

  .strategy-choice-list>button:hover,
  .strategy-choice-list>button.active {
    transform: none
  }

  .strategy-choice-list>button>i {
    width: 40px;
    height: 40px
  }

  .strategy-choice-list>button>i .strategy-sigil {
    width: 33px;
    height: 33px
  }

  .strategy-choice-list>button>svg:last-child {
    display: none
  }

  .strategy-choice-list small {
    font-size: 7px;
    line-height: 1.25
  }

  .strategy-choice-list b {
    font-size: 14px
  }

  .strategy-world-preview {
    border-radius: 22px;
    min-height: 284px;
    padding: 20px
  }

  .strategy-mark {
    border-radius: 24px;
    width: 82px;
    height: 82px;
    top: 18px;
    left: auto;
    right: 18px
  }

  .strategy-mark>.strategy-sigil {
    width: 62px;
    height: 62px
  }

  .strategy-world-preview h2 {
    max-width: 70%;
    font-size: 34px !important
  }

  .strategy-world-preview>strong {
    max-width: 75%;
    font-size: 14px
  }

  .strategy-world-preview>p {
    margin: 9px 0 13px;
    font-size: 12px
  }

  .strategy-world-preview>div:last-child {
    gap: 5px
  }

  .strategy-world-preview>div:last-child span {
    padding: 6px 8px;
    font-size: 9px
  }

  .generator-option-grid {
    grid-template-columns: 1fr !important
  }

  .generator-context-line {
    min-height: 58px
  }

  .generated-deal-card>.strategy-sigil {
    width: 62px;
    height: 62px;
    top: 16px;
    right: 14px
  }

  .generator-dialog-actions {
    z-index: 6;
    background: linear-gradient(#0000, #080b0b 30%);
    padding-top: 10px;
    position: sticky;
    bottom: 0
  }

  .generator-dialog-actions [data-slot=button] {
    min-height: 54px
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important
  }
}

.app.page-learn {
  --realm: #8b9dff;
  --realm-rgb: 139, 157, 255
}

.app.page-community {
  --realm: #77a2ff;
  --realm-rgb: 119, 162, 255
}

.app.page-challenges {
  --realm: #d7b978;
  --realm-rgb: 215, 185, 120
}

.app.page-rewards {
  --realm: #e2c88d;
  --realm-rgb: 226, 200, 141
}

.app.page-levels,
.app.page-access {
  --realm: #c9aa70;
  --realm-rgb: 201, 170, 112
}

.app.page-notifications {
  --realm: #ff8879;
  --realm-rgb: 255, 136, 121
}

.app.page-profile,
.app.page-support {
  --realm: #86b8ac;
  --realm-rgb: 134, 184, 172
}

.app.page-learn .main>main,
.app.page-community .main>main,
.app.page-challenges .main>main,
.app.page-rewards .main>main,
.app.page-levels .main>main,
.app.page-access .main>main,
.app.page-notifications .main>main,
.app.page-profile .main>main,
.app.page-support .main>main {
  isolation: isolate;
  position: relative
}

.app[class*=page-] .main>main:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background: radial-gradient(circle at 70% 10%, rgba(var(--realm-rgb, 85, 230, 178), .12), transparent 52%), repeating-linear-gradient(90deg, transparent 0 89px, rgba(var(--realm-rgb, 85, 230, 178), .032) 90px), repeating-linear-gradient(0deg, transparent 0 89px, rgba(var(--realm-rgb, 85, 230, 178), .025) 90px);
  width: min(56vw, 760px);
  height: 420px;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(145deg, #000, #0000 73%);
  mask-image: linear-gradient(145deg, #000, #0000 73%)
}

.app[class*=page-] .page-title>div:first-child>span,
.app[class*=page-] .page-title>span {
  color: var(--realm, var(--am-mint)) !important
}

.page-learn .learning-summary {
  background: radial-gradient(circle at 84% 18%, #8b9dff1f, #0000 28%), linear-gradient(145deg, #10131d, #0a0d11 72%) !important;
  border-color: #8b9dff3d !important;
  box-shadow: inset 3px 0 #8b9dff, 0 24px 60px #0003 !important
}

.page-learn .lesson-list,
.page-learn .lesson-player,
.page-learn .learning-next-card {
  background: linear-gradient(150deg, #10141c, #0a0d10) !important;
  border-color: #8b9dff29 !important
}

.page-learn .lesson-player .video {
  background: radial-gradient(circle at 52%, #8b9dff29, #0000 28%), linear-gradient(145deg, #111726, #080b0f) !important
}

.page-learn .lesson-list button.selected {
  background: linear-gradient(90deg, #8b9dff21, #0000) !important;
  border-color: #8b9dff85 !important;
  box-shadow: inset 3px 0 #8b9dff !important
}

.page-learn .learning-next-card {
  box-shadow: inset 0 1px #ffffff0a
}

.community-page.room-free {
  --room: #7da5ff;
  --room-rgb: 125, 165, 255
}

.community-page.room-family {
  --room: #55e6b2;
  --room-rgb: 85, 230, 178
}

.community-page.room-ots-250 {
  --room: #d7b978;
  --room-rgb: 215, 185, 120
}

.community-page.room-ots-500 {
  --room: #a88aff;
  --room-rgb: 168, 138, 255
}

.community-page.room-exclusive {
  --room: #efcf8d;
  --room-rgb: 239, 207, 141
}

.community-page.room-gold {
  --room: #d4a437;
  --room-rgb: 212, 164, 55
}

.community-page .mobile-room-trigger,
.community-page .community-chat,
.community-page .community-rooms {
  border-color: rgba(var(--room-rgb), .22) !important;
  background: radial-gradient(circle at 92% 0, rgba(var(--room-rgb), .1), transparent 31%), linear-gradient(150deg, #0e1216, #090c0e 74%) !important
}

.community-page .mobile-room-trigger>i,
.community-page .community-chat header span,
.community-page .community-chat .pinned svg {
  color: var(--room) !important
}

.community-page .chat-feed>p>i {
  border-color: rgba(var(--room-rgb), .32) !important;
  background: rgba(var(--room-rgb), .11) !important;
  color: var(--room) !important
}

.page-challenges .active-challenge {
  background: radial-gradient(circle at 14%, #d7b9781c, #0000 25%), linear-gradient(145deg, #17140e, #0c0e0e 72%) !important;
  border-color: #d7b97847 !important;
  box-shadow: inset 0 1px #ffffff0a, 0 24px 70px #0000003d !important
}

.page-challenges .challenge-number {
  color: #e4c886 !important;
  background: radial-gradient(circle, #d7b97821, #0000 68%) !important;
  border-color: #d7b9785c !important
}

.page-challenges .available-list .challenge-choice {
  background: linear-gradient(145deg, #101416, #0a0d0e) !important;
  border-color: #f2efe817 !important
}

.page-challenges .available-list .challenge-choice:hover {
  transform: translateY(-2px);
  border-color: #d7b97852 !important
}

.page-rewards .reward-summary {
  background: linear-gradient(145deg, #19150e, #0b0d0d 74%) !important;
  border-color: #e2c88d42 !important;
  box-shadow: inset 3px 0 #e2c88d !important
}

.page-rewards .reward-grid>button {
  background: radial-gradient(circle at 80% 12%, #e2c88d14, #0000 28%), linear-gradient(150deg, #111312, #090c0d) !important;
  border-color: #e2c88d26 !important
}

.page-rewards .reward-grid>button.claimable {
  border-color: #55e6b26b !important;
  box-shadow: 0 0 0 1px #55e6b20d, 0 22px 50px #0003 !important
}

.page-levels .level-current,
.page-access .access-current {
  background: radial-gradient(circle at 88% 24%, #c9aa7029, #0000 28%), linear-gradient(145deg, #1a150e, #0b0c0c 72%) !important;
  border-color: #c9aa7047 !important;
  box-shadow: inset 3px 0 #c9aa70, 0 28px 76px #0000003d !important
}

.page-levels .level-list article.current {
  background: linear-gradient(100deg, #c9aa701f, #0b0e0e 72%) !important;
  border-color: #c9aa7075 !important
}

@media (width<=760px) {
  .app[class*=page-] .main>main:before {
    opacity: .28;
    width: 100%;
    height: 260px
  }

  .page-learn .learn-layout {
    display: block !important
  }

  .page-learn .lesson-list {
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    gap: 8px;
    max-width: 100%;
    margin-bottom: 12px;
    overflow-x: auto;
    display: flex !important
  }

  .page-learn .lesson-list button {
    scroll-snap-align: start;
    flex: 0 0 178px;
    min-width: 178px
  }

  .page-learn .learning-summary,
  .page-learn .lesson-player,
  .page-challenges .active-challenge,
  .page-rewards .reward-summary,
  .page-levels .level-current {
    border-radius: 22px !important
  }

  .page-challenges .active-challenge {
    grid-template-columns: 72px minmax(0, 1fr) !important
  }

  .page-challenges .active-challenge>div:last-child {
    grid-column: 1/-1
  }

  .page-rewards .reward-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important
  }

  .page-rewards .reward-grid>button {
    min-height: 180px !important;
    padding: 16px !important
  }
}

@keyframes am-page-in {
  0% {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes am-button-sweep {
  0% {
    left: -45%
  }

  to {
    left: 120%
  }
}

@keyframes am-pulse-draw {
  0% {
    stroke-dashoffset: 240px;
    opacity: .35
  }

  35%,
  72% {
    stroke-dashoffset: 0;
    opacity: 1
  }

  to {
    stroke-dashoffset: -240px;
    opacity: .35
  }
}

@keyframes am-node-breathe {

  0%,
  to {
    opacity: .55;
    transform: scale(.82)
  }

  50% {
    opacity: 1;
    transform: scale(1.35)
  }
}

@keyframes am-radar {
  to {
    transform: rotate(360deg)
  }
}

@keyframes am-orbit {
  to {
    transform: rotate(-360deg)
  }
}

@keyframes am-candle {

  0%,
  to {
    opacity: .65;
    transform: translateY(2px)
  }

  50% {
    opacity: 1;
    transform: translateY(-3px)
  }
}

@keyframes am-check {

  0%,
  65%,
  to {
    opacity: .45
  }

  25%,
  45% {
    opacity: 1;
    filter: drop-shadow(0 0 6px)
  }
}

@keyframes am-trend {
  0% {
    stroke-dashoffset: 120px
  }

  to {
    stroke-dashoffset: -120px
  }
}

.community-page .mobile-room-trigger {
  --room-accent: #7fa7ff;
  border: 1px solid var(--room-accent);
  grid-template-columns: 42px 1fr auto 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  margin: 0 0 12px;
  padding: 11px 14px;
  display: grid
}

@supports (color:color-mix(in lab, red, red)) {
  .community-page .mobile-room-trigger {
    border: 1px solid color-mix(in srgb, var(--room-accent) 44%, #2b3732)
  }
}

.community-page .mobile-room-trigger {
  background: var(--room-accent);
  border-radius: 17px
}

@supports (color:color-mix(in lab, red, red)) {
  .community-page .mobile-room-trigger {
    background: color-mix(in srgb, var(--room-accent) 10%, #101713)
  }
}

.community-page .mobile-room-trigger {
  color: #e7eeeb;
  text-align: left
}

.community-page.room-family .mobile-room-trigger {
  --room-accent: #dbaf61
}

.community-page.room-ots-250 .mobile-room-trigger {
  --room-accent: #5be0ad
}

.community-page.room-ots-500 .mobile-room-trigger {
  --room-accent: #a687ff
}

.community-page.room-exclusive .mobile-room-trigger {
  --room-accent: #f07582
}

.community-page .mobile-room-trigger>i {
  background: var(--room-accent);
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid
}

@supports (color:color-mix(in lab, red, red)) {
  .community-page .mobile-room-trigger>i {
    background: color-mix(in srgb, var(--room-accent) 17%, #17201c)
  }
}

.community-page .mobile-room-trigger>i {
  color: var(--room-accent)
}

.community-page .mobile-room-trigger svg {
  width: 18px
}

.community-page .mobile-room-trigger>span {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex
}

.community-page .mobile-room-trigger small {
  color: #87938d;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 800
}

.community-page .mobile-room-trigger b {
  font-size: 17px
}

.community-page .mobile-room-trigger em {
  color: var(--room-accent);
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-style: normal;
  display: flex
}

.community-page .mobile-room-trigger em i {
  background: currentColor;
  border-radius: 50%;
  width: 6px;
  height: 6px
}

.community-page .community-shell {
  min-height: 560px;
  display: block
}

.community-page .community-chat {
  width: 100%;
  min-height: 560px
}

.available-list>.challenge-choice {
  color: #e8efec;
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-top: 1px solid #29332f;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 82px;
  margin: 0;
  padding: 13px 15px;
  display: grid
}

.available-list>.challenge-choice:hover {
  background: #5be0ad0e
}

.available-list>.challenge-choice>svg:first-child {
  color: #5be0ad;
  width: 22px
}

.available-list>.challenge-choice>div {
  min-width: 0
}

.available-list>.challenge-choice h3 {
  margin: 0 0 5px;
  font-size: 16px;
  line-height: 1.2
}

.available-list>.challenge-choice p {
  color: #8d9993;
  margin: 0;
  font-size: 12px
}

.available-list>.challenge-choice>span {
  color: #5be0ad;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
  display: flex
}

.available-list>.challenge-choice>span svg,
.available-list>.challenge-choice>svg:last-child {
  width: 18px
}

@media (width<=760px) {

  .community-page .community-shell,
  .community-page .community-chat {
    min-height: calc(100dvh - 245px) !important
  }

  .available-list>.challenge-choice {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 74px;
    padding: 11px 12px
  }

  .available-list>.challenge-choice h3 {
    font-size: 15px
  }

  .available-list>.challenge-choice p {
    font-size: 11px
  }
}

.trade-generator-dialog.strategy-world {
  overflow: hidden;
  border-color: var(--strategy-accent, #55e1af) !important;
  width: min(920px, 100vw - 32px) !important;
  max-width: 920px !important
}

@supports (color:color-mix(in lab, red, red)) {
  .trade-generator-dialog.strategy-world {
    border-color: color-mix(in srgb, var(--strategy-accent, #55e1af) 38%, #26332e) !important;
    background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--strategy-accent, #55e1af) 15%, transparent), transparent 30%), #0b1210 !important
  }
}

.theme-bot {
  --strategy-accent: #52e1ad;
  --strategy-muted: #164c3a
}

.theme-rapid {
  --strategy-accent: #ff795f;
  --strategy-muted: #57241d
}

.theme-starter {
  --strategy-accent: #70a7ff;
  --strategy-muted: #1e3458
}

.theme-precision {
  --strategy-accent: #a989ff;
  --strategy-muted: #342558
}

.theme-trend {
  --strategy-accent: #e5b75f;
  --strategy-muted: #4f3c1d
}

.strategy-picker {
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
  gap: 15px;
  min-height: 430px;
  display: grid
}

.strategy-choice-list {
  gap: 8px;
  display: grid
}

.strategy-choice-list>button {
  color: #dce5e1;
  text-align: left;
  background: #121b17d1;
  border: 1px solid #29352f;
  border-radius: 15px;
  grid-template-columns: 42px 1fr 18px;
  align-items: center;
  gap: 11px;
  min-height: 72px;
  padding: 11px 13px;
  transition: border-color .2s, transform .2s, background .2s;
  display: grid
}

.strategy-choice-list>button:hover,
.strategy-choice-list>button.active {
  border-color: var(--strategy-accent);
  transform: translate(3px)
}

@supports (color:color-mix(in lab, red, red)) {

  .strategy-choice-list>button:hover,
  .strategy-choice-list>button.active {
    border-color: color-mix(in srgb, var(--strategy-accent) 65%, #2a3631);
    background: color-mix(in srgb, var(--strategy-muted) 32%, #111916)
  }
}

.strategy-choice-list>button>i {
  background: var(--strategy-accent);
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-choice-list>button>i {
    background: color-mix(in srgb, var(--strategy-accent) 14%, #14201b)
  }
}

.strategy-choice-list>button>i {
  color: var(--strategy-accent)
}

.strategy-choice-list>button>i svg,
.strategy-choice-list>button>svg {
  width: 18px
}

.strategy-choice-list>button>span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.strategy-choice-list small {
  color: var(--strategy-accent);
  letter-spacing: .11em;
  font-size: 8px;
  font-weight: 850
}

.strategy-choice-list b {
  font-size: 14px
}

.strategy-world-preview {
  border: 1px solid var(--strategy-accent);
  flex-direction: column;
  justify-content: flex-end;
  min-height: 430px;
  padding: 28px;
  display: flex;
  position: relative;
  overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-world-preview {
    border: 1px solid color-mix(in srgb, var(--strategy-accent) 35%, #26312d)
  }
}

.strategy-world-preview {
  background: linear-gradient(135deg, var(--strategy-muted), #0a100e 70%);
  border-radius: 22px
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-world-preview {
    background: linear-gradient(135deg, color-mix(in srgb, var(--strategy-muted) 62%, #0c1311), #0a100e 70%)
  }
}

.strategy-world-preview:before,
.strategy-world-preview:after {
  content: "";
  border: 1px solid var(--strategy-accent);
  width: 360px;
  height: 180px;
  position: absolute;
  top: -36px;
  right: -110px
}

@supports (color:color-mix(in lab, red, red)) {

  .strategy-world-preview:before,
  .strategy-world-preview:after {
    border: 1px solid color-mix(in srgb, var(--strategy-accent) 30%, transparent)
  }
}

.strategy-world-preview:before,
.strategy-world-preview:after {
  border-radius: 50%;
  transform: rotate(-15deg)
}

.strategy-world-preview:after {
  opacity: .55;
  top: 36px;
  right: -160px
}

.strategy-mark {
  border: 1px solid var(--strategy-accent);
  place-items: center;
  width: 92px;
  height: 92px;
  display: grid;
  position: absolute;
  top: 28px;
  left: 28px
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-mark {
    border: 1px solid color-mix(in srgb, var(--strategy-accent) 45%, transparent)
  }
}

.strategy-mark {
  background: var(--strategy-accent);
  border-radius: 27px
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-mark {
    background: color-mix(in srgb, var(--strategy-accent) 12%, #101815)
  }
}

.strategy-mark {
  color: var(--strategy-accent);
  box-shadow: 0 0 48px var(--strategy-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-mark {
    box-shadow: 0 0 48px color-mix(in srgb, var(--strategy-accent) 16%, transparent)
  }
}

.strategy-mark>svg {
  width: 36px;
  height: 36px
}

.strategy-mark>i {
  background: var(--strategy-accent);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 16px var(--strategy-accent);
  border-radius: 50%;
  position: absolute
}

.strategy-mark>i:first-of-type {
  top: 11px;
  right: 12px
}

.strategy-mark>i:nth-of-type(2) {
  opacity: .5;
  bottom: 9px;
  left: 14px
}

.strategy-world-preview>span {
  color: var(--strategy-accent);
  letter-spacing: .13em;
  font-size: 10px;
  font-weight: 850
}

.strategy-world-preview h2 {
  color: #f3f7f5;
  letter-spacing: -.055em;
  margin: 8px 0 1px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: .98
}

.strategy-world-preview>strong {
  color: var(--strategy-accent);
  font-size: 16px
}

.strategy-world-preview>p {
  color: #9aa7a1;
  max-width: 530px;
  margin: 14px 0 20px;
  font-size: 13px;
  line-height: 1.55
}

.strategy-world-preview>div:last-child {
  gap: 8px;
  display: flex
}

.strategy-world-preview>div:last-child span,
.generator-context-line {
  align-items: center;
  gap: 7px;
  display: flex
}

.strategy-world-preview>div:last-child span {
  border: 1px solid var(--strategy-accent);
  padding: 8px 10px
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-world-preview>div:last-child span {
    border: 1px solid color-mix(in srgb, var(--strategy-accent) 24%, #29342f)
  }
}

.strategy-world-preview>div:last-child span {
  color: #bbc5c0;
  border-radius: 999px;
  font-size: 11px
}

.strategy-world-preview>div:last-child svg {
  width: 14px;
  color: var(--strategy-accent)
}

.generator-context-line {
  border: 1px solid var(--strategy-accent);
  grid-column: 1/-1;
  min-height: 62px;
  padding: 10px 13px
}

@supports (color:color-mix(in lab, red, red)) {
  .generator-context-line {
    border: 1px solid color-mix(in srgb, var(--strategy-accent) 30%, #29342f)
  }
}

.generator-context-line {
  background: var(--strategy-muted);
  border-radius: 14px
}

@supports (color:color-mix(in lab, red, red)) {
  .generator-context-line {
    background: color-mix(in srgb, var(--strategy-muted) 22%, #101714)
  }
}

.generator-context-line {
  color: var(--strategy-accent)
}

.generator-context-line>svg {
  width: 22px
}

.generator-context-line>span {
  flex-direction: column;
  gap: 2px;
  display: flex
}

.generator-context-line small {
  color: #85928c;
  font-size: 9px
}

.generator-context-line b {
  color: #e7eeeb;
  font-size: 14px
}

.strategy-world .generator-option-grid button.active,
.strategy-world .generator-dialog-actions [data-slot=button]:not([data-variant=outline]) {
  border-color: var(--strategy-accent) !important;
  background: var(--strategy-accent) !important;
  color: #07100d !important
}

.strategy-world .analysis-orbit,
.generated-deal-card[class*=theme-] {
  border-color: var(--strategy-accent)
}

@supports (color:color-mix(in lab, red, red)) {

  .strategy-world .analysis-orbit,
  .generated-deal-card[class*=theme-] {
    border-color: color-mix(in srgb, var(--strategy-accent) 45%, #26332e)
  }
}

.strategy-world .analysis-orbit>svg,
.strategy-world .signal-analysis-card>p,
.strategy-world .analysis-checks .done,
.generated-deal-card[class*=theme-]>strong,
.generated-deal-card[class*=theme-]>span {
  color: var(--strategy-accent) !important
}

.generated-deal-card[class*=theme-] {
  background: radial-gradient(circle at 80% 22%, var(--strategy-accent), transparent 34%), #101915
}

@supports (color:color-mix(in lab, red, red)) {
  .generated-deal-card[class*=theme-] {
    background: radial-gradient(circle at 80% 22%, color-mix(in srgb, var(--strategy-accent) 17%, transparent), transparent 34%), #101915
  }
}

.generated-deal-card>small {
  color: #9da9a3;
  margin-top: 13px;
  font-size: 11px;
  display: block
}

.challenge-actions {
  align-items: center;
  gap: 8px;
  display: flex
}

.challenge-actions>button:first-child {
  color: #98a59f;
  background: 0 0;
  border: 0;
  font-size: 11px;
  font-weight: 750
}

.available-list article.accepted {
  background: #17342a59;
  border-color: #4fe0ac59
}

.mechanic-dialog {
  color: #eef3f0 !important;
  background: #0e1512 !important;
  border: 1px solid #2d3a34 !important;
  border-radius: 22px !important;
  gap: 17px !important;
  width: min(590px, 100vw - 24px) !important;
  max-width: 590px !important;
  padding: 24px !important
}

.mechanic-dialog [data-slot=dialog-title] {
  color: #f4f7f5;
  font-size: 25px
}

.mechanic-dialog [data-slot=dialog-description] {
  color: #8f9b95
}

.mechanic-purpose,
.mechanic-rules article,
.ticket-context,
.pocket-manage-status {
  align-items: center;
  gap: 11px;
  display: flex
}

.mechanic-purpose {
  color: #52dfac;
  background: #1d453647;
  border: 1px solid #50e0ad47;
  border-radius: 16px;
  padding: 16px
}

.mechanic-purpose>svg {
  width: 24px
}

.mechanic-purpose span,
.mechanic-rules article span,
.ticket-context span,
.pocket-manage-status span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.mechanic-purpose small,
.mechanic-rules small,
.ticket-context small,
.pocket-manage-status small {
  color: #7f8c86;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 800
}

.mechanic-purpose b,
.mechanic-rules b,
.ticket-context b,
.pocket-manage-status b {
  color: #e4ebe7;
  font-size: 13px
}

.mechanic-rules {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid
}

.mechanic-rules article {
  background: #111a16;
  border: 1px solid #29352f;
  border-radius: 14px;
  min-height: 76px;
  padding: 12px
}

.mechanic-rules article>svg {
  color: #61d8ad;
  width: 19px
}

.mechanic-note {
  color: #aeb8b3;
  background: #49371833;
  border-left: 2px solid #d9ad5e;
  margin: 0;
  padding: 11px 13px;
  font-size: 11px;
  line-height: 1.5
}

.reward-grid>button {
  min-height: 220px;
  color: inherit;
  text-align: left;
  background: #111815;
  border: 1px solid #29342f;
  border-radius: 18px;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  display: flex;
  position: relative
}

.reward-grid>button>div {
  color: #d9ad5e;
  background: #19231f;
  border-radius: 14px;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid
}

.reward-grid>button>div svg {
  width: 24px
}

.reward-grid>button>span {
  color: #a590ff;
  letter-spacing: .11em;
  margin-top: 22px;
  font-size: 9px;
  font-weight: 850
}

.reward-grid>button>h3 {
  color: #eef3f0;
  margin: 7px 0 4px;
  font-size: 18px
}

.reward-grid>button>p {
  color: #88958f;
  margin: 0;
  font-size: 12px
}

.reward-grid>button>svg {
  color: #74817b;
  width: 18px;
  position: absolute;
  bottom: 20px;
  right: 20px
}

.reward-grid>button.claimable {
  background: radial-gradient(circle at 90% 0, #9070e72e, #0000 40%), #111815;
  border-color: #a989ff6b
}

.reward-detail-art {
  color: #b69aff;
  background: radial-gradient(circle, #a989ff33, #0000 62%), #111816;
  border: 1px solid #a989ff59;
  border-radius: 18px;
  place-items: center;
  min-height: 165px;
  display: grid
}

.reward-detail-art svg {
  filter: drop-shadow(0 0 22px #a989ff59);
  width: 58px;
  height: 58px
}

.notification-inbox,
.support-categories,
.support-faq {
  background: #101713;
  border: 1px solid #29342f;
  border-radius: 20px;
  margin-top: 16px;
  overflow: hidden
}

.notification-inbox>header,
.support-categories>header,
.support-faq>header {
  justify-content: space-between;
  align-items: end;
  padding: 21px 23px 14px;
  display: flex
}

.notification-inbox>header div,
.support-categories>header,
.support-faq>header {
  color: #88958f
}

.notification-inbox header span,
.support-categories header span,
.support-faq header span {
  color: #58dbae;
  letter-spacing: .12em;
  font-size: 9px;
  font-weight: 850
}

.notification-inbox header h2,
.support-categories header h2,
.support-faq header h2 {
  color: #edf3ef;
  margin: 5px 0 0;
  font-size: 20px
}

.notification-inbox>header button {
  color: #8f9c96;
  background: 0 0;
  border: 0;
  font-size: 10px
}

.notification-inbox>button {
  color: #dce4e0;
  text-align: left;
  background: 0 0;
  border: 0;
  border-top: 1px solid #26312d;
  grid-template-columns: 42px 1fr auto 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 12px 22px;
  display: grid
}

.notification-inbox>button>i {
  color: #55dfae;
  background: #17221d;
  border-radius: 12px;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid
}

.notification-inbox>button>i.lesson {
  color: #8e9cff;
  background: #1b1d31
}

.notification-inbox>button>i.reward {
  color: #ddb25f;
  background: #2a2215
}

.notification-inbox>button svg {
  width: 18px
}

.notification-inbox>button>span {
  flex-direction: column;
  gap: 4px;
  display: flex
}

.notification-inbox>button small {
  color: #7f8c86;
  font-size: 11px
}

.notification-inbox>button em {
  color: #7e8b85;
  font-size: 10px;
  font-style: normal
}

.notification-test {
  background: #101713;
  border: 1px solid #29342f;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 12px;
  padding: 15px 18px;
  display: flex
}

.notification-test>span {
  color: #dce4e0;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex
}

.notification-test svg {
  color: #58dbae;
  width: 18px
}

.quiet-fields {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid
}

.quiet-fields label,
.ticket-category,
.ticket-message {
  color: #9aa6a0;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  display: flex
}

.quiet-fields input,
.ticket-category select,
.ticket-message textarea {
  color: #eef3f0;
  min-height: 49px;
  font: inherit;
  background: #111916;
  border: 1px solid #2e3a35;
  border-radius: 12px;
  padding: 11px 13px
}

.ticket-message textarea {
  resize: vertical;
  min-height: 115px
}

.support-hero {
  background: radial-gradient(circle at 90% 15%, #45e0a82e, #0000 30%), linear-gradient(135deg, #11261f, #0f1613 65%);
  border: 1px solid #55e0ae52;
  border-radius: 22px;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  min-height: 210px;
  padding: 30px;
  display: flex
}

.support-hero>div {
  max-width: 620px
}

.support-hero span {
  color: #54dfad;
  letter-spacing: .12em;
  font-size: 9px;
  font-weight: 850
}

.support-hero h2 {
  color: #f1f5f3;
  letter-spacing: -.035em;
  margin: 7px 0;
  font-size: 30px
}

.support-hero p {
  color: #98a49e;
  margin: 0;
  font-size: 13px;
  line-height: 1.55
}

.support-categories>div {
  grid-template-columns: 1fr 1fr;
  display: grid
}

.support-categories>div>button {
  color: #dce4e0;
  text-align: left;
  background: 0 0;
  border: 0;
  border-top: 1px solid #26312d;
  grid-template-columns: 40px 1fr 18px;
  align-items: center;
  gap: 11px;
  min-height: 85px;
  padding: 14px 20px;
  display: grid
}

.support-categories>div>button:nth-child(odd) {
  border-right: 1px solid #26312d
}

.support-categories>div>button>svg:first-child {
  color: #59dbad;
  width: 21px
}

.support-categories>div>button>svg:last-child {
  color: #63706a;
  width: 17px
}

.support-categories button span {
  flex-direction: column;
  gap: 4px;
  display: flex
}

.support-categories button small {
  color: #7f8c86;
  font-size: 10px
}

.support-status-card {
  background: #101713;
  border: 1px solid #29342f;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 17px 20px;
  display: flex
}

.support-status-card>div {
  align-items: center;
  gap: 11px;
  display: flex
}

.support-status-card svg {
  color: #58dbae;
  width: 19px
}

.support-status-card span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.support-status-card small {
  color: #7f8c86;
  font-size: 9px
}

.support-status-card b {
  color: #dde5e1;
  font-size: 12px
}

.support-status-card button {
  color: #58dbae;
  background: 0 0;
  border: 0;
  font-size: 11px
}

.support-faq>button {
  color: #dce4e0;
  text-align: left;
  background: 0 0;
  border: 0;
  border-top: 1px solid #26312d;
  grid-template-columns: 1fr 18px;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 62px;
  padding: 15px 22px;
  display: grid
}

.support-faq>button>span {
  flex-direction: column;
  gap: 9px;
  display: flex
}

.support-faq>button small {
  color: #93a099;
  max-width: 760px;
  font-size: 11px;
  line-height: 1.55
}

.support-faq>button>svg {
  width: 17px;
  transition: transform .2s
}

.support-faq>button.open>svg {
  transform: rotate(90deg)
}

.ticket-context,
.pocket-manage-status {
  color: #57dfad;
  background: #183b2e40;
  border: 1px solid #50e0ad40;
  border-radius: 13px;
  padding: 13px
}

.ticket-success {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 18px;
  display: flex
}

.ticket-success>svg {
  color: #58dfad;
  background: #50e0ad26;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  padding: 13px
}

.ticket-success h2 {
  color: #f0f4f2;
  margin: 5px 0 0;
  font-size: 32px
}

.ticket-success p {
  color: #8f9b95;
  margin: 0 0 10px;
  font-size: 12px
}

.settings-list {
  gap: 8px;
  display: grid
}

.settings-list button,
.settings-list article {
  color: #dfe7e3;
  text-align: left;
  background: #111916;
  border: 1px solid #2a3631;
  border-radius: 13px;
  grid-template-columns: 36px 1fr 18px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 11px 13px;
  display: grid
}

.settings-list button>svg:first-child,
.settings-list article>svg:first-child {
  color: #58dfad;
  width: 19px
}

.settings-list button>span,
.settings-list article>span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.settings-list button small,
.settings-list article small {
  color: #7e8b85;
  font-size: 10px
}

@media (width<=760px) {
  .trade-generator-dialog.strategy-world {
    overflow-y: auto;
    border-radius: 24px 24px 16px 16px !important;
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 17px 14px !important;
    top: auto !important;
    bottom: 6px !important;
    transform: translate(-50%) !important
  }

  .strategy-picker {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .strategy-choice-list {
    grid-template-columns: 1fr 1fr
  }

  .strategy-choice-list>button {
    grid-template-columns: 35px 1fr;
    min-height: 66px;
    padding: 9px
  }

  .strategy-choice-list>button>i {
    border-radius: 10px;
    width: 35px;
    height: 35px
  }

  .strategy-choice-list>button>svg {
    display: none
  }

  .strategy-choice-list small {
    font-size: 7px
  }

  .strategy-world-preview {
    min-height: 250px;
    padding: 20px
  }

  .strategy-mark {
    border-radius: 18px;
    width: 58px;
    height: 58px;
    top: 18px;
    left: auto;
    right: 18px
  }

  .strategy-mark>svg {
    width: 24px;
    height: 24px
  }

  .strategy-world-preview h2 {
    font-size: 36px
  }

  .strategy-world-preview>p {
    margin: 10px 0 14px;
    font-size: 11px
  }

  .strategy-world-preview>div:last-child {
    flex-wrap: wrap
  }

  .mechanic-dialog {
    max-height: calc(100dvh - 12px);
    overflow-y: auto;
    border-radius: 24px 24px 16px 16px !important;
    padding: 19px 15px !important;
    top: auto !important;
    bottom: 6px !important;
    transform: translate(-50%) !important
  }

  .mechanic-rules {
    grid-template-columns: 1fr
  }

  .challenge-actions {
    justify-content: space-between;
    width: 100%
  }

  .reward-grid>button {
    min-height: 155px;
    padding: 17px
  }

  .reward-grid>button>span {
    margin-top: 14px
  }

  .notification-inbox>header {
    align-items: center
  }

  .notification-inbox>header button {
    display: none
  }

  .notification-inbox>button {
    grid-template-columns: 38px 1fr 16px;
    padding: 11px 14px
  }

  .notification-inbox>button>em {
    display: none
  }

  .notification-test {
    flex-direction: column;
    align-items: flex-start
  }

  .notification-test [data-slot=button] {
    width: 100%
  }

  .support-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 270px;
    padding: 21px
  }

  .support-hero h2 {
    font-size: 26px
  }

  .support-hero [data-slot=button] {
    width: 100%;
    margin-top: auto
  }

  .support-categories>div {
    grid-template-columns: 1fr
  }

  .support-categories>div>button:nth-child(odd) {
    border-right: 0
  }

  .support-status-card {
    flex-direction: column;
    align-items: flex-start
  }

  .quiet-fields {
    grid-template-columns: 1fr
  }
}

.signal-route-map {
  background: #0f1815c7;
  border: 1px solid #7b918733;
  border-radius: 18px;
  grid-template-columns: 1fr 22px 1fr 22px 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px;
  display: grid
}

.signal-route-map>svg {
  color: #65736c;
  width: 18px
}

.signal-route-map>span {
  grid-template-rows: auto auto;
  grid-template-columns: 34px 1fr;
  align-content: center;
  column-gap: 11px;
  min-height: 62px;
  display: grid
}

.signal-route-map>span>i {
  color: #9aa69f;
  border: 1px solid #3a4741;
  border-radius: 50%;
  grid-row: 1/3;
  align-self: center;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  display: grid
}

.signal-route-map>span.active>i {
  color: #67edbc;
  background: #48d7a61f;
  border-color: #48d7a6
}

.signal-route-map b {
  color: #f4f7f5;
  font-size: 13px
}

.signal-route-map small {
  color: #8e9b95;
  font-size: 11px
}

.session-origin-strip {
  background: #0f1815c7;
  border: 1px solid #7b918733;
  border-radius: 17px;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 14px;
  display: flex
}

.session-origin-strip>button {
  color: #dce5e0;
  background: #121b18;
  border: 1px solid #33413b;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 750;
  display: inline-flex
}

.session-origin-strip>button svg,
.session-origin-strip>svg {
  width: 17px
}

.session-origin-strip>svg {
  color: #5b6862
}

.session-origin-strip>span {
  flex-direction: column;
  gap: 2px;
  display: flex
}

.session-origin-strip small {
  color: #718079;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 800
}

.session-origin-strip b,
.session-origin-strip strong {
  color: #f1f5f3;
  font-size: 13px
}

.session-origin-strip strong {
  color: #69e8b8;
  margin-left: auto
}

.pocket-bridge-card {
  background: radial-gradient(circle at 0 0, #48d7a61a, #0000 38%), #0e1714e0;
  border: 1px solid #52cfa147;
  border-radius: 20px;
  grid-template-columns: minmax(260px, .8fr) 1.2fr;
  align-items: center;
  gap: 28px;
  padding: 22px 24px;
  display: grid
}

.pocket-bridge-copy>span {
  color: #67e8b8;
  letter-spacing: .1em;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 850;
  display: flex
}

.pocket-bridge-copy>span svg {
  width: 17px
}

.pocket-bridge-copy h2 {
  color: #f4f7f5;
  margin: 8px 0 5px;
  font-size: 19px;
  font-weight: 760
}

.pocket-bridge-copy p {
  color: #9ba7a1;
  margin: 0;
  font-size: 12px;
  line-height: 1.55
}

.pocket-bridge-steps {
  grid-template-columns: 1fr 18px 1fr 18px 1fr;
  align-items: center;
  gap: 8px;
  display: grid
}

.pocket-bridge-steps>svg {
  color: #5c6963;
  width: 16px
}

.pocket-bridge-steps>span {
  background: #070d0b7a;
  border: 1px solid #2e3a35;
  border-radius: 14px;
  grid-template-rows: auto auto;
  grid-template-columns: 28px 1fr;
  align-content: center;
  column-gap: 9px;
  min-height: 72px;
  padding: 9px;
  display: grid
}

.pocket-bridge-steps i {
  color: #9daba4;
  background: #1d2a25;
  border-radius: 50%;
  grid-row: 1/3;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  display: grid
}

.pocket-bridge-steps i svg {
  width: 14px
}

.pocket-bridge-steps .done i {
  color: #07100d;
  background: #3fd29c
}

.pocket-bridge-steps b {
  color: #e7eeea;
  font-size: 12px
}

.pocket-bridge-steps small {
  color: #829089;
  font-size: 10px
}

@media (width<=760px) {
  .signal-route-map {
    grid-template-columns: 1fr auto;
    padding: 11px 13px
  }

  .signal-route-map>span {
    min-height: 50px
  }

  .signal-route-map>span:not(:first-child),
  .signal-route-map>svg:first-of-type {
    display: none
  }

  .signal-route-map:after {
    content: "Дальше → Сделка";
    color: #87a098;
    font-size: 12px;
    font-weight: 700
  }

  .signal-route-map b {
    font-size: 15px
  }

  .signal-route-map small {
    font-size: 12px
  }

  .session-origin-strip {
    gap: 10px;
    min-height: 68px;
    padding: 10px
  }

  .session-origin-strip>button {
    justify-content: center;
    width: 42px;
    padding: 0;
    font-size: 0
  }

  .session-origin-strip>svg {
    display: none
  }

  .session-origin-strip>span {
    min-width: 0
  }

  .session-origin-strip small {
    font-size: 10px !important
  }

  .session-origin-strip b {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
    font-size: 14px;
    overflow: hidden
  }

  .session-origin-strip strong {
    text-align: right;
    max-width: 105px;
    font-size: 12px
  }

  .pocket-bridge-card {
    padding: 16px;
    display: block
  }

  .pocket-bridge-copy h2 {
    font-size: 20px
  }

  .pocket-bridge-copy p {
    color: #aeb9b3;
    font-size: 14px
  }

  .pocket-bridge-steps {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 7px;
    margin-top: 15px
  }

  .pocket-bridge-steps>svg {
    display: none
  }

  .pocket-bridge-steps>span {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-height: 84px;
    display: flex
  }

  .pocket-bridge-steps b {
    font-size: 12px
  }

  .pocket-bridge-steps small {
    font-size: 11px
  }
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  margin: 0
}

button,
a {
  font: inherit;
  -webkit-tap-highlight-color: transparent
}

button {
  cursor: pointer
}

button:focus-visible,
a:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #1e7d5959
}

svg {
  stroke-width: 1.8px
}

.logo {
  white-space: nowrap;
  align-items: center;
  gap: 11px;
  display: flex
}

.logo>span {
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  place-items: center;
  width: 35px;
  height: 35px;
  font-size: 15px;
  font-weight: 900;
  display: grid;
  position: relative;
  overflow: hidden
}

.logo>span i {
  border: 1px solid #ffffff38;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -7px;
  right: -8px
}

.logo>div {
  flex-direction: column;
  gap: 2px;
  display: flex
}

.plain-label {
  letter-spacing: .14em;
  color: var(--green);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800
}

.guest {
  background: #f7f8f4;
  min-height: 100vh
}

.guest-head {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  max-width: 1240px;
  height: 78px;
  margin: auto;
  padding: 0 26px;
  display: flex
}

.guest-head nav {
  gap: 30px;
  display: flex
}

.guest-head nav a {
  color: #667068;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none
}

.guest-head [data-slot=button] {
  border-radius: 10px;
  height: 41px;
  font-size: 10px
}

.guest-hero {
  grid-template-columns: 1.1fr .7fr;
  align-items: center;
  gap: 85px;
  max-width: 1240px;
  min-height: 650px;
  margin: auto;
  padding: 80px 32px;
  display: grid
}

.guest-copy h1 {
  letter-spacing: -.065em;
  margin: 23px 0;
  font-size: clamp(55px, 6.2vw, 84px);
  font-weight: 820;
  line-height: .96
}

.guest-copy h1 em {
  color: var(--green);
  font-style: normal
}

.guest-copy>p {
  color: #6f7871;
  max-width: 590px;
  font-size: 16px;
  line-height: 1.65
}

.guest-actions {
  align-items: center;
  gap: 21px;
  margin-top: 31px;
  display: flex
}

.guest-actions [data-slot=button] {
  border-radius: 12px;
  height: 51px;
  padding: 0 21px;
  font-weight: 800
}

.guest-actions>button:last-child {
  color: #657068;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  display: flex
}

.guest-actions svg {
  width: 16px
}

.guest-facts {
  gap: 36px;
  margin-top: 52px;
  display: flex
}

.guest-facts span {
  flex-direction: column;
  gap: 4px;
  display: flex
}

.guest-preview {
  background: var(--ink);
  color: #fff;
  border-radius: 25px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 80px #14221b29
}

.guest-preview:after {
  content: "";
  border: 1px solid #ffffff12;
  border-radius: 50%;
  width: 230px;
  height: 230px;
  position: absolute;
  top: -100px;
  right: -105px
}

.preview-head {
  color: #9da9a1;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  display: flex
}

.preview-head>span {
  align-items: center;
  gap: 7px;
  display: flex
}

.preview-head i {
  background: #8ee2b5;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  animation: 1.8s infinite pulse;
  box-shadow: 0 0 0 5px #8ee2b51a
}

.preview-head b {
  color: #8ee2b5
}

.preview-signal h2 {
  margin: 9px 0;
  font-size: 27px
}

.preview-signal strong {
  color: #8ee2b5;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  display: flex
}

.preview-signal strong svg {
  width: 20px;
  transform: rotate(-45deg)
}

.preview-actions {
  border: 1px solid #ffffff1a;
  border-radius: 11px;
  grid-template-columns: 1fr 1fr;
  display: grid
}

.preview-actions span {
  color: #b5bdb8;
  border-right: 1px solid #ffffff1a;
  align-items: center;
  gap: 6px;
  padding: 11px;
  font-size: 8px;
  display: flex
}

.preview-actions span:last-child {
  border: 0
}

.preview-actions svg {
  color: #8ee2b5;
  width: 13px
}

.guest-preview>[data-slot=button] {
  width: 100%;
  height: 43px;
  color: var(--ink);
  background: #fff;
  margin-top: 14px;
  font-size: 9px;
  font-weight: 800
}

.who,
.free-offer,
.how,
.guest-levels {
  max-width: 1240px;
  margin: auto;
  padding: 100px 32px
}

.who {
  border-top: 1px solid var(--line);
  grid-template-columns: .7fr 1.3fr;
  gap: 70px;
  display: grid
}

.who h2,
.free-offer h2,
.how h2,
.guest-levels h2 {
  letter-spacing: -.045em;
  margin: 13px 0;
  font-size: 40px;
  line-height: 1.08
}

.who-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid
}

.who-grid article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  min-height: 190px;
  padding: 22px
}

.who-grid article:last-child {
  background: #f0f0eb;
  grid-column: 1/3;
  min-height: 130px
}

.who-grid svg {
  width: 20px;
  color: var(--green)
}

.who-grid .not-for svg {
  color: #7a827c
}

.who-grid h3 {
  margin: 25px 0 8px;
  font-size: 15px
}

.who-grid p {
  color: #707972;
  font-size: 10px;
  line-height: 1.55
}

.free-offer {
  background: var(--ink);
  color: #fff;
  max-width: none;
  padding-left: max(32px, 50vw - 588px);
  padding-right: max(32px, 50vw - 588px)
}

.free-offer header {
  max-width: 600px
}

.free-offer header p,
.guest-levels header p {
  color: #87938b;
  font-size: 11px
}

.free-offer>div {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 35px 0 24px;
  display: grid
}

.free-offer article {
  background: #ffffff09;
  border: 1px solid #ffffff1a;
  border-radius: 15px;
  flex-direction: column;
  min-height: 190px;
  padding: 19px;
  display: flex
}

.free-offer article svg {
  color: #8ee2b5;
  width: 22px
}

.free-offer h3 {
  margin: 29px 0 7px;
  font-size: 15px
}

.free-offer article p {
  color: #8d9991;
  font-size: 9px
}

.free-offer article span {
  color: #8ee2b5;
  margin-top: auto;
  font-size: 8px;
  font-weight: 750
}

.free-offer>[data-slot=button] {
  height: 45px;
  color: var(--ink);
  background: #fff;
  font-size: 9px
}

.how>header {
  text-align: center
}

.how>div {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 38px;
  display: grid
}

.how article {
  border-left: 1px solid var(--line);
  min-height: 155px;
  padding: 20px
}

.how article>b {
  color: var(--green);
  font-size: 9px
}

.how article h3 {
  margin: 29px 0 8px;
  font-size: 15px
}

.how article p {
  color: #707972;
  font-size: 9px;
  line-height: 1.55
}

.guest-levels {
  border-top: 1px solid var(--line)
}

.guest-levels header {
  max-width: 610px
}

.guest-levels>div {
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin: 35px 0 25px;
  display: grid
}

.guest-levels article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 15px;
  flex-direction: column;
  min-height: 220px;
  padding: 17px;
  display: flex
}

.guest-levels article>span {
  color: #8b948e;
  font-size: 8px
}

.guest-levels article h3 {
  margin: 38px 0 8px;
  font-size: 16px
}

.guest-levels article p {
  color: #707972;
  font-size: 8px;
  line-height: 1.5
}

.guest-levels article>b {
  color: var(--green);
  margin-top: auto;
  font-size: 8px
}

.guest-levels>[data-slot=button] {
  height: 44px;
  font-size: 9px
}

.app {
  background: var(--paper);
  min-height: 100vh
}

.sidebar {
  background: var(--ink);
  color: #fff;
  z-index: 20;
  flex-direction: column;
  width: 226px;
  padding: 27px 17px 20px;
  display: flex;
  position: fixed;
  inset: 0 auto 0 0;
  /* БОКОВОЕ МЕНЮ, КОТОРОЕ НЕ ПОМЕЩАЕТСЯ, ПРОКРУЧИВАЕТСЯ, А НЕ НАЕЗЖАЕТ САМО НА СЕБЯ.

     Замер на обычном ноутбучном экране 1280×900, ступень ОТС 250: карточка ступени внизу
     занимает 774–886 по высоте, а пункт меню «Разговор» — 755–799. Они пересекаются, то
     есть последний пункт меню перечёркнут карточкой. Прибор наложений нашёл это на каждом
     из шести экранов сразу — признак не экрана, а рамы.

     Меню — столбец фиксированной высоты, и его содержимое просто не влезало: ничего не
     сжималось и не пряталось, блоки налезали друг на друга. Теперь столбец прокручивается,
     а карточка ступени не ужимается до нечитаемой (`flex-shrink: 0` ниже) — это два разных
     ответа на «не влезает», и второй без первого превращает наезд в раздавленную карточку. */
  overflow-y: auto;
  overscroll-behavior: contain
}
.sidebar > * { flex-shrink: 0 }

.sidebar .logo>span {
  color: var(--ink);
  background: #fff
}

.sidebar .logo small {
  color: #7f8c84
}

.sidebar nav {
  flex-direction: column;
  gap: 2px;
  margin-top: 43px;
  display: flex;
  /* СПИСОК РАЗДЕЛОВ, КОТОРОМУ НЕ ХВАТИЛО ВЫСОТЫ, ПРОКРУЧИВАЕТСЯ, А НЕ ВЫЛИВАЕТСЯ НАРУЖУ.

     Замер на 1280×900: сам список занимает 134–764, а его последняя кнопка «Разговор»
     стоит на 755–799 — то есть дети вылезли за собственную рамку на 35 пикселей и попали
     под карточку ступени (774–886). Человек видит перечёркнутый пункт меню и не может в
     него попасть.

     Причина в правиле flexbox, а не в этом экране: список — сжимаемый элемент столбца, и
     при нехватке места он ужимается НИЖЕ высоты своего содержимого. По умолчанию у такого
     элемента `min-height: auto`, из-за чего содержимое не обрезается и не прокручивается,
     а просто выходит за границы. `min-height: 0` возвращает ему право быть меньше
     содержимого, а `overflow-y: auto` даёт содержимому прокрутку вместо разлива.

     Прокрутка родителя (`.sidebar`) этого не решала: наружу выливался не столбец целиком,
     а дети одного из его элементов — родитель о переполнении даже не знал, его
     scrollHeight равнялся clientHeight. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain
}

.sidebar nav button {
  color: #86928a;
  text-align: left;
  background: 0 0;
  border: 0;
  border-radius: 9px;
  grid-template-columns: 19px 1fr auto;
  align-items: center;
  gap: 10px;
  height: 41px;
  padding: 0 11px;
  font-size: 10px;
  font-weight: 700;
  display: grid
}

.sidebar nav svg {
  width: 16px
}

.sidebar nav button.active {
  color: #fff;
  background: #ffffff17
}

.sidebar nav button>i {
  background: #8ee2b5;
  border-radius: 50%;
  width: 5px;
  height: 5px
}

.side-level {
  background: #ffffff0a;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  margin-top: auto;
  padding: 13px
}

.side-level>b {
  margin: 7px 0;
  font-size: 16px;
  display: block
}

.side-level button {
  color: #8ee2b5;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-size: 7px;
  font-weight: 750;
  display: flex
}

.main {
  min-height: 100vh;
  margin-left: 226px
}

.app-head {
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  z-index: 15;
  background: #f3f4efe0;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 34px;
  display: flex;
  position: sticky;
  top: 0
}

.mobile-logo {
  display: none
}

.demo-switch {
  background: #e5e8e2;
  border-radius: 9px;
  align-items: center;
  gap: 2px;
  padding: 3px;
  display: flex
}

.demo-switch>span {
  color: #7b847e;
  padding: 0 7px;
  font-size: 7px
}

.demo-switch button {
  color: #727b74;
  background: 0 0;
  border: 0;
  border-radius: 7px;
  height: 28px;
  padding: 0 9px;
  font-size: 8px;
  font-weight: 750
}

.head-right {
  align-items: center;
  gap: 9px;
  display: flex
}

.notify {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
  position: relative
}

.notify i {
  background: var(--red);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 7px;
  right: 7px
}

.avatar {
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 9px;
  font-weight: 850;
  display: grid
}

.main>main {
  max-width: 1270px;
  margin: auto;
  padding: 42px 40px 90px
}

.page {
  flex-direction: column;
  gap: 21px;
  display: flex;
  /* ОДНА ШИРИНА КОЛОНКИ НА ВЕСЬ КАБИНЕТ (25.09).

     Амир, про несколько экранов сразу: «мне не нравится вот такое большое отображение,
     вот текст маленький например, открываешь какую-то из этих штук и она вылетает на весь
     экран… нужно как-то компактно сделать, и не только здесь, а везде где такие аномалии
     на сайте существуют… везде должна быть пропорциональность».

     У `.page` не было предела ширины вовсе, поэтому на мониторе 1440 каждая карточка
     растягивалась во всю ширину: семь клеток дня по 180 пикселей под одну галочку, строка
     пояснения в девятьсот пикселей при кегле 13. Мелкое содержимое плавало в огромных
     коробках — это и есть «непропорционально», и чинить его по одному экрану бессмысленно:
     причина одна на все.

     980px — мера по строке текста: примерно 75–80 знаков в строке при нашем кегле, дальше
     глаз теряет начало следующей строки. Мобильным это ничего не меняет: там ширина и так
     меньше предела.
     Ширина задаётся через `width`, а не `max-width`, и селектором `.main .page`. Первая
     попытка поставила `max-width: 980px` прямо на `.page` — и не сработала: ниже в том же
     файле живёт общий сторож переполнения
     `.app, .main, .main>main, .page, .page>* { min-width: 0; max-width: 100% }`,
     который идёт позже и при равной силе селектора побеждает. Замер это и показал:
     колонка осталась 1063px. Сторож трогает `min-width` и `max-width`, но не `width` —
     поэтому оба правила теперь живут рядом, не отменяя друг друга. */
  width: min(100%, 980px);
  margin-inline: auto
}

.page-title {
  justify-content: space-between;
  align-items: flex-end;
  display: flex
}

.page-title>div:first-child>span,
.next-lesson>span,
.next-level>span,
.all-sections header span,
.home-challenge>div:nth-child(2)>span,
.learning-summary>div>span,
.lesson-info>span,
.free-strategies header span,
.active-challenge>div:nth-child(2)>span,
.reward-summary span,
.level-current span {
  letter-spacing: .11em;
  color: #7a837c;
  font-size: 8px;
  font-weight: 800
}

.page-title h1 {
  letter-spacing: -.045em;
  margin: 7px 0 4px;
  font-size: 35px
}

.page-title p {
  color: #727b74;
  margin: 0;
  font-size: 10px
}

.page-title.simple h1 {
  margin-top: 0
}

.balance-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 13px;
  grid-template-columns: 1fr auto;
  min-width: 175px;
  padding: 11px 14px;
  display: grid
}

.balance-card b {
  grid-row: 2;
  font-size: 21px
}

.balance-card button {
  color: var(--green);
  background: 0 0;
  border: 0;
  grid-area: 1/2/3;
  align-items: center;
  font-size: 7px;
  display: flex
}

.next-actions {
  grid-template-columns: 1.2fr .85fr .65fr;
  gap: 11px;
  display: grid
}

.next-signal,
.next-lesson,
.next-level {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  flex-direction: column;
  min-height: 285px;
  padding: 18px;
  display: flex
}

.next-signal {
  background: var(--ink);
  color: #fff
}

.next-signal header {
  color: #9aa69e;
  justify-content: space-between;
  font-size: 7px;
  display: flex
}

.next-signal header>span {
  align-items: center;
  gap: 6px;
  display: flex
}

.next-signal header i {
  background: #8ee2b5;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.8s infinite pulse;
  box-shadow: 0 0 0 4px #8ee2b51a
}

.next-signal header b {
  color: #8ee2b5
}

.next-signal>div {
  margin: auto 0
}

.next-signal strong {
  color: #8ee2b5;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  display: flex
}

.next-signal strong svg {
  width: 17px;
  transform: rotate(-45deg)
}

.next-signal [data-slot=button] {
  height: 38px;
  color: var(--ink);
  background: #fff;
  font-size: 8px
}

.next-lesson [data-slot=progress],
.next-level [data-slot=progress] {
  background: #e0e4de;
  height: 4px;
  margin-top: auto
}

.next-lesson [data-slot=progress-indicator],
.next-level [data-slot=progress-indicator] {
  background: var(--green)
}

.next-level>svg {
  width: 28px;
  color: var(--gold);
  margin: 30px 0 10px
}

.next-level h2 {
  margin: 0;
  font-size: 20px
}

.next-level>small {
  color: #7a837c;
  margin-top: 6px;
  font-size: 7px
}

.next-level>button {
  color: var(--green);
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding: 0;
  font-size: 7px;
  font-weight: 750;
  display: flex
}

.all-sections {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  padding: 21px
}

.all-sections header {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 15px;
  display: flex
}

.all-sections h2 {
  margin: 5px 0 0;
  font-size: 18px
}

.all-sections>div {
  grid-template-columns: 1fr 1fr;
  display: grid
}

.all-sections>div>button {
  border: 0;
  border-top: 1px solid var(--line);
  text-align: left;
  min-height: 67px;
  color: var(--ink);
  background: 0 0;
  grid-template-columns: 32px 1fr 14px;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  display: grid
}

.all-sections>div>button:nth-child(odd) {
  border-right: 1px solid var(--line)
}

.all-sections>div>button>svg:first-child {
  width: 17px;
  color: var(--green)
}

.all-sections>div>button>svg:last-child {
  color: #9ba39d;
  width: 12px
}

.all-sections button span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.home-challenge {
  background: #f8faef;
  border: 1px solid #d4dbc9;
  border-radius: 16px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 16px 18px;
  display: grid
}

.challenge-progress-circle {
  border: 5px solid #dfe9ce;
  border-top-color: #90b759;
  border-radius: 50%;
  place-items: center;
  width: 57px;
  height: 57px;
  display: grid;
  position: relative
}

.challenge-progress-circle small {
  color: #738064;
  font-size: 6px;
  position: absolute;
  bottom: 8px
}

.home-challenge h3 {
  margin: 5px 0 2px;
  font-size: 12px
}

.home-challenge p {
  color: #768068;
  margin: 0;
  font-size: 7px
}

.simple-tabs,
.history-tabs {
  scrollbar-width: none;
  gap: 5px;
  display: flex;
  overflow-x: auto
}

.simple-tabs button,
.history-tabs button {
  border: 1px solid var(--line);
  color: #707972;
  white-space: nowrap;
  background: #fff;
  border-radius: 9px;
  height: 36px;
  padding: 0 13px;
  font-size: 8px;
  font-weight: 750
}

.simple-tabs button.active,
.history-tabs button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff
}

.signal-list,
.history-table,
.available-list,
.level-list,
.profile-links {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  overflow: hidden
}

.signal-list>header,
.available-list>header {
  border-bottom: 1px solid var(--line);
  color: #707972;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  padding: 0 17px;
  font-size: 8px;
  display: flex
}

.signal-list>article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 85px 1fr 120px 130px;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 0 17px;
  display: grid
}

.signal-list>article:last-child {
  border: 0
}

.signal-status {
  align-items: center;
  gap: 7px;
  display: flex
}

.signal-status i {
  border-radius: 50%;
  width: 7px;
  height: 7px
}

.signal-status i.live {
  background: var(--green2);
  box-shadow: 0 0 0 4px #25a9751a
}

.signal-status i.soon {
  background: #b0b8b2
}

.signal-list p {
  color: #7c857e;
  margin: 0;
  font-size: 7px
}

.signal-list article>strong {
  color: var(--green);
  align-items: center;
  gap: 4px;
  font-size: 10px;
  display: flex
}

.signal-list article>strong svg {
  width: 15px;
  transform: rotate(-45deg)
}

.explain-card {
  background: #edf7f1;
  border: 1px solid #cadfd3;
  border-radius: 14px;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  display: flex
}

.explain-card>svg {
  width: 18px;
  color: var(--green)
}

.explain-card p {
  color: #6c796f;
  margin: 3px 0 0;
  font-size: 7px
}

.learning-summary {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 15px;
  grid-template-columns: 170px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 15px 18px;
  display: grid
}

.learning-summary>div {
  flex-direction: column;
  display: flex
}

.learning-summary p {
  color: #757f78;
  margin: 2px 0;
  font-size: 7px
}

.learning-summary [data-slot=progress] {
  background: #e3e7e1;
  height: 5px
}

.learning-summary>span {
  color: #747e76;
  font-size: 7px
}

.learn-layout {
  grid-template-columns: 270px 1fr;
  gap: 11px;
  display: grid
}

.lesson-list,
.lesson-player {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  overflow: hidden
}

.lesson-list button {
  text-align: left;
  color: #727b74;
  background: 0 0;
  border: 1px solid #0000;
  border-radius: 10px;
  grid-template-columns: 29px 1fr 12px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 62px;
  padding: 7px;
  display: grid
}

.lesson-list button>i {
  border: 1px solid var(--line);
  border-radius: 50%;
  place-items: center;
  width: 27px;
  height: 27px;
  font-size: 7px;
  font-style: normal;
  display: grid
}

.lesson-list button span {
  flex-direction: column;
  display: flex
}

.lesson-list button b {
  margin-top: 3px;
  font-size: 8px
}

.lesson-list button.done i {
  color: var(--green)
}

.lesson-list button.locked {
  opacity: .45
}

.lesson-player {
  grid-template-columns: .9fr 1.1fr;
  min-height: 355px;
  display: grid
}

.video {
  background: var(--ink);
  place-items: center;
  display: grid;
  position: relative
}

.video>span {
  width: 55px;
  height: 55px;
  color: var(--ink);
  background: #fff;
  border-radius: 50%;
  place-items: center;
  display: grid
}

.video>span svg {
  width: 19px;
  fill: var(--ink)
}

.video>small {
  color: #8d9991;
  font-size: 7px;
  position: absolute;
  top: 14px;
  left: 15px
}

.video>i {
  background: #344039;
  height: 3px;
  position: absolute;
  bottom: 14px;
  left: 15px;
  right: 15px
}

.video>i b {
  background: #8ee2b5;
  width: 48%;
  height: 100%;
  display: block
}

.lesson-info {
  flex-direction: column;
  padding: 27px;
  display: flex
}

.lesson-info>span {
  color: var(--green);
  font-size: 7px;
  font-weight: 800
}

.lesson-info h2 {
  margin: 8px 0;
  font-size: 23px
}

.lesson-info>div {
  gap: 13px;
  margin: 16px 0;
  display: flex
}

.lesson-info>div span {
  color: #727b74;
  align-items: center;
  gap: 4px;
  font-size: 7px;
  display: flex
}

.lesson-info>div svg {
  width: 11px;
  color: var(--green)
}

.lesson-info [data-slot=button] {
  height: 38px;
  margin-top: auto;
  font-size: 7px
}

.free-strategies {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 19px
}

.free-strategies h2 {
  margin: 4px 0 14px;
  font-size: 17px
}

.free-strategies>div {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  display: grid
}

.free-strategies article {
  border: 1px solid var(--line);
  border-radius: 11px;
  flex-direction: column;
  min-height: 120px;
  padding: 12px;
  display: flex
}

.free-strategies article>b {
  color: #8b938d;
  font-size: 7px
}

.free-strategies article svg {
  width: 18px;
  color: var(--green);
  margin: 19px 0 10px
}

.free-strategies h3 {
  margin: 0;
  font-size: 10px
}

.free-strategies p {
  color: #7a837c;
  font-size: 7px
}

.history-tabs button {
  align-items: center;
  gap: 6px;
  display: flex
}

.history-tabs svg {
  width: 13px
}

.history-table>header,
.history-table>article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1.45fr .7fr .8fr .8fr;
  align-items: center;
  gap: 13px;
  min-height: 50px;
  padding: 0 17px;
  display: grid
}

.history-table>article:last-child {
  border: 0
}

.history-table>header {
  color: #858d87;
  background: #f4f5f1;
  min-height: 41px;
  font-size: 7px;
  font-weight: 750
}

.history-table>article span {
  font-size: 8px
}

.history-table span.positive {
  color: var(--green);
  font-weight: 750
}

.history-table span.negative {
  color: var(--red);
  font-weight: 750
}

.history-table span>i {
  background: #adb5af;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  display: inline-block
}

.history-table span>i.skip {
  background: #927fc0
}

.wallet-hero {
  background: var(--ink);
  color: #fff;
  border-radius: 19px;
  grid-template-columns: 1fr .7fr;
  align-items: center;
  gap: 50px;
  min-height: 260px;
  padding: 29px;
  display: grid
}

.wallet-hero span {
  color: #8b978f;
  font-size: 8px;
  font-weight: 750
}

.wallet-hero h1 {
  letter-spacing: -.055em;
  margin: 11px 0 2px;
  font-size: 51px
}

.wallet-hero p {
  color: #88948c;
  font-size: 8px
}

.wallet-hero [data-slot=button] {
  height: 39px;
  color: var(--ink);
  background: #fff;
  margin-top: 18px;
  font-size: 8px
}

.wallet-progress {
  background: #ffffff0a;
  border: 1px solid #ffffff1a;
  border-radius: 14px;
  padding: 21px
}

.wallet-progress h2 {
  margin: 8px 0 19px;
  font-size: 16px
}

.wallet-progress [data-slot=progress] {
  background: #364139;
  height: 5px
}

.wallet-progress [data-slot=progress-indicator] {
  background: #8ee2b5
}

.money-cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  display: grid
}

.money-cards article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 13px;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 82px;
  padding: 13px;
  display: grid
}

.money-cards svg {
  width: 17px;
  color: var(--green)
}

.money-cards span {
  flex-direction: column;
  display: flex
}

.money-cards b {
  font-size: 8px
}

.money-cards small {
  color: #7b847e;
  font-size: 6px
}

.active-challenge {
  background: #f8faef;
  border: 1px solid #d5dfc9;
  border-radius: 17px;
  grid-template-columns: 100px 1fr 150px;
  align-items: center;
  gap: 20px;
  min-height: 230px;
  padding: 24px;
  display: grid
}

.challenge-number {
  border: 7px solid #dce7ca;
  border-top-color: #8fb35b;
  border-radius: 50%;
  place-items: center;
  width: 90px;
  height: 90px;
  display: grid;
  position: relative
}

.challenge-number small {
  font-size: 7px;
  position: absolute;
  bottom: 18px
}

.active-challenge h2 {
  margin: 7px 0;
  font-size: 21px
}

.active-challenge p {
  color: #737e6b;
  font-size: 8px;
  line-height: 1.5
}

.active-challenge [data-slot=progress] {
  background: #e0e7d3;
  height: 5px;
  margin-top: 18px
}

.active-challenge [data-slot=progress-indicator] {
  background: #89a953
}

.active-challenge>div:last-child {
  text-align: center;
  border-left: 1px solid #d7dfcd;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 120px;
  display: flex
}

.active-challenge>div:last-child small {
  color: #7a846e;
  font-size: 6px
}

.active-challenge>div:last-child svg {
  width: 25px;
  color: var(--gold);
  margin: 10px
}

.available-list>header h2 {
  font-size: 13px
}

.available-list>article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 28px 1fr 170px 90px;
  align-items: center;
  gap: 10px;
  min-height: 75px;
  padding: 0 16px;
  display: grid
}

.available-list>article:last-child {
  border: 0
}

.available-list>article>svg {
  width: 17px;
  color: var(--green)
}

.available-list h3 {
  margin: 0;
  font-size: 9px
}

.available-list p {
  color: #778079;
  margin: 3px 0;
  font-size: 7px
}

.available-list article>span {
  flex-direction: column;
  display: flex
}

.available-list article>span small {
  color: #7e8780;
  font-size: 6px
}

.reward-summary {
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  align-items: center;
  gap: 18px;
  min-height: 130px;
  padding: 22px;
  display: flex
}

.reward-summary>svg {
  color: #e2b55d;
  width: 39px
}

.reward-summary h2 {
  margin: 5px 0;
  font-size: 21px
}

.reward-summary p {
  color: #8c9890;
  margin: 0;
  font-size: 8px
}

.reward-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  display: grid
}

.reward-grid article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 15px;
  min-height: 235px;
  padding: 16px;
  position: relative
}

.reward-grid article>div {
  background: #eff2ec;
  border-radius: 11px;
  place-items: center;
  height: 75px;
  display: grid
}

.reward-grid article>div svg {
  width: 29px;
  color: var(--green)
}

.reward-grid article>span {
  color: #79827b;
  margin-top: 16px;
  font-size: 6px;
  font-weight: 800;
  display: block
}

.reward-grid h3 {
  margin: 7px 0;
  font-size: 13px
}

.reward-grid p {
  color: #737c75;
  font-size: 7px;
  line-height: 1.4
}

.reward-grid article.progress {
  border-color: #e1d4ad
}

.reward-grid article.progress>div svg {
  color: var(--gold)
}

.reward-grid article.locked {
  opacity: .6
}

.reward-grid article>svg {
  width: 14px;
  position: absolute;
  bottom: 14px;
  right: 14px
}

.level-current {
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  min-height: 155px;
  padding: 25px;
  display: flex
}

.level-current h1 {
  margin: 7px 0;
  font-size: 34px
}

.level-current p {
  color: #8e9a92;
  font-size: 8px
}

.level-current>svg {
  color: #dcb25f;
  width: 55px
}

.level-list>article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 38px 1fr 90px;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 0 18px;
  display: grid
}

.level-list>article:last-child {
  border: 0
}

.level-list article>div {
  border: 1px solid var(--line);
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid
}

.level-list article>div svg {
  color: #8a938d;
  width: 14px
}

.level-list article>span small {
  color: #88908a;
  font-size: 6px
}

.level-list h2 {
  margin: 3px 0;
  font-size: 13px
}

.level-list p {
  color: #747d76;
  margin: 0;
  font-size: 7px
}

.level-list article>strong {
  color: #7c857e;
  text-align: right;
  font-size: 7px
}

.level-list article.current svg,
.level-list article.current strong {
  color: var(--green)
}

/* Платная ступень — кнопка, а не надпись: раньше человек жал «Оформить
   подписку» на этом экране и ничего не происходило. Ведёт на «Доступ». */
.level-list article>.level-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: transparent;
  color: var(--green);
  font-size: 7px;
  font-weight: 700;
  padding: 5px 9px;
  cursor: pointer;
  text-align: right;
  white-space: nowrap
}

.level-list article>.level-cta svg {
  width: 9px;
  height: 9px
}

.level-list article>.level-cta:hover {
  background: color-mix(in srgb, var(--green) 12%, transparent)
}

.level-list article>.level-cta:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px
}

.profile-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  grid-template-columns: 59px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 21px;
  display: grid
}

.big-avatar {
  background: var(--ink);
  color: #fff;
  border-radius: 15px;
  place-items: center;
  width: 57px;
  height: 57px;
  font-weight: 850;
  display: grid
}

.profile-card small {
  color: #858d87;
  font-size: 6px
}

.profile-card h2 {
  margin: 4px 0 2px;
  font-size: 19px
}

.profile-card p {
  color: #747d76;
  margin: 0;
  font-size: 7px
}

.profile-links {
  grid-template-columns: 1fr 1fr;
  display: grid
}

.profile-links button {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  min-height: 73px;
  color: var(--ink);
  background: 0 0;
  grid-template-columns: 26px 1fr 13px;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  display: grid
}

.profile-links button:nth-child(2n) {
  border-right: 0
}

.profile-links button:nth-child(n+3) {
  border-bottom: 0
}

.profile-links svg {
  width: 16px;
  color: var(--green)
}

.profile-links button>svg:last-child {
  color: #9ba39d;
  width: 11px
}

.profile-links span {
  flex-direction: column;
  display: flex
}

.profile-links small {
  color: #747d76;
  font-size: 7px
}

.more-grid {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  display: grid
}

.more-grid button {
  border: 1px solid var(--line);
  height: 76px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border-radius: 13px;
  grid-template-columns: 28px 1fr 14px;
  align-items: center;
  padding: 0 15px;
  display: grid
}

.more-grid svg {
  width: 17px;
  color: var(--green)
}

.more-grid button>svg:last-child {
  color: #9ca49e;
  width: 11px
}

.mobile-nav {
  display: none
}

@keyframes pulse {
  50% {
    opacity: .5
  }
}

@media (width<=1050px) {
  .next-actions {
    grid-template-columns: 1fr 1fr
  }

  .next-level {
    grid-column: 1/3;
    min-height: 180px
  }

  .signal-list>article {
    grid-template-columns: 70px 1fr 100px
  }

  .signal-list article>[data-slot=button] {
    grid-column: 1/4;
    margin-bottom: 12px
  }

  .learn-layout {
    grid-template-columns: 230px 1fr
  }

  .lesson-player {
    grid-template-columns: 1fr
  }

  .video {
    min-height: 230px
  }

  .reward-grid {
    grid-template-columns: 1fr 1fr
  }

  .guest-hero {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .guest-preview {
    max-width: 600px
  }

  .who {
    grid-template-columns: 1fr
  }

  .free-offer>div,
  .guest-levels>div {
    grid-template-columns: 1fr 1fr
  }
}

@media (width<=760px) {
  .guest-head {
    height: 66px;
    padding: 0 15px
  }

  .guest-head nav {
    display: none
  }

  .guest-head [data-slot=button] {
    height: 36px;
    font-size: 8px
  }

  .guest-head .logo small {
    display: none
  }

  .guest-hero {
    padding: 52px 17px
  }

  .guest-copy h1 {
    font-size: 49px
  }

  .guest-copy>p {
    font-size: 14px
  }

  .guest-actions {
    flex-direction: column;
    align-items: flex-start
  }

  .guest-facts {
    justify-content: space-between;
    gap: 14px
  }

  .guest-facts b {
    font-size: 15px
  }

  .guest-preview {
    padding: 18px
  }

  .who,
  .how,
  .guest-levels {
    padding: 65px 17px
  }

  .who h2,
  .free-offer h2,
  .how h2,
  .guest-levels h2 {
    font-size: 32px
  }

  .who-grid {
    grid-template-columns: 1fr
  }

  .who-grid article:last-child {
    grid-column: 1
  }

  .free-offer {
    padding: 65px 17px
  }

  .free-offer>div,
  .guest-levels>div {
    scrollbar-width: none;
    margin-right: -17px;
    padding-right: 17px;
    display: flex;
    overflow-x: auto
  }

  .free-offer article,
  .guest-levels article {
    min-width: 220px
  }

  .how>div {
    grid-template-columns: 1fr 1fr
  }

  .sidebar {
    display: none
  }

  .main {
    margin-left: 0
  }

  .app-head {
    height: 64px;
    padding: 0 13px
  }

  .mobile-logo {
    display: block
  }

  .mobile-logo .logo>div,
  .demo-switch>span {
    display: none
  }

  .main>main {
    padding: 27px 13px 92px
  }

  .page {
    gap: 15px
  }

  .page-title {
    align-items: flex-start
  }

  .page-title h1 {
    font-size: 28px
  }

  .page-title>div:first-child>span {
    font-size: 7px
  }

  .page-title p {
    line-height: 1.4
  }

  .balance-card {
    min-width: 122px;
    padding: 9px
  }

  .balance-card b {
    font-size: 18px
  }

  .balance-card button {
    font-size: 0
  }

  .next-actions {
    grid-template-columns: 1fr
  }

  .next-signal,
  .next-lesson,
  .next-level {
    grid-column: 1;
    min-height: 250px
  }

  .next-level {
    min-height: 210px
  }

  .all-sections {
    padding: 17px 12px
  }

  .all-sections>div {
    grid-template-columns: 1fr
  }

  .all-sections>div>button:nth-child(odd) {
    border-right: 0
  }

  .home-challenge {
    grid-template-columns: auto 1fr
  }

  .home-challenge [data-slot=button] {
    grid-column: 1/3;
    width: 100%
  }

  .mobile-nav {
    z-index: 30;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: #101915f5;
    border-radius: 17px;
    grid-template-columns: repeat(5, 1fr);
    height: 64px;
    padding: 4px;
    display: grid;
    position: fixed;
    bottom: 8px;
    left: 8px;
    right: 8px
  }

  .mobile-nav button {
    color: #7f8c84;
    background: 0 0;
    border: 0;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    font-size: 7px;
    display: flex;
    position: relative
  }

  .mobile-nav svg {
    width: 17px
  }

  .mobile-nav button.active {
    color: #fff;
    background: #ffffff17
  }

  .mobile-nav button.active svg {
    color: #8ee2b5
  }

  .mobile-nav button>i {
    background: #8ee2b5;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    position: absolute;
    top: 6px;
    right: 25%
  }

  .simple-tabs {
    margin-right: -13px
  }

  .signal-list>article {
    grid-template-columns: 60px 1fr 85px;
    gap: 7px;
    padding: 11px
  }

  .signal-list article>[data-slot=button] {
    grid-column: 1/4;
    width: 100%;
    margin: 0
  }

  .learning-summary,
  .learn-layout {
    grid-template-columns: 1fr
  }

  .lesson-list {
    scrollbar-width: none;
    display: flex;
    overflow-x: auto
  }

  .lesson-list button {
    min-width: 205px
  }

  .lesson-player {
    grid-template-columns: 1fr
  }

  .video {
    min-height: 220px
  }

  .lesson-info {
    padding: 21px 17px
  }

  .free-strategies>div {
    scrollbar-width: none;
    display: flex;
    overflow-x: auto
  }

  .free-strategies article {
    min-width: 150px
  }

  .history-table {
    overflow-x: auto
  }

  .history-table>header,
  .history-table>article {
    min-width: 650px
  }

  .wallet-hero {
    grid-template-columns: 1fr;
    padding: 22px
  }

  .wallet-hero h1 {
    font-size: 42px
  }

  .money-cards {
    grid-template-columns: 1fr
  }

  .active-challenge {
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 17px
  }

  .challenge-number {
    width: 72px;
    height: 72px
  }

  .active-challenge>div:last-child {
    border-top: 1px solid #d7dfcd;
    border-left: 0;
    grid-column: 1/3;
    height: 90px
  }

  .available-list>article {
    grid-template-columns: 25px 1fr;
    padding: 12px
  }

  .available-list article>span,
  .available-list [data-slot=button] {
    grid-column: 2
  }

  .available-list [data-slot=button] {
    width: 100%
  }

  .reward-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px
  }

  .reward-grid article {
    min-height: 215px;
    padding: 12px
  }

  .level-list>article {
    grid-template-columns: 34px 1fr;
    padding: 13px
  }

  .level-list article>strong {
    text-align: left;
    grid-column: 2
  }

  .profile-card {
    grid-template-columns: 55px 1fr
  }

  .profile-card [data-slot=button] {
    grid-column: 1/3;
    width: 100%
  }

  .profile-links {
    grid-template-columns: 1fr
  }

  .profile-links button {
    border-right: 0;
    border-bottom: 1px solid var(--line) !important
  }

  .profile-links button:last-child {
    border-bottom: 0 !important
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important
  }
}

:root {
  --ink: #0a0d0f;
  --green: #46d6a0;
  --green2: #46d6a0;
  --mint: #152b24;
  --paper: #090c0e;
  --card: #121719;
  --line: #ffffff17;
  --muted: #818b87;
  --soft: #171d1f;
  --gold: #c9a36a;
  --red: #ee6b72;
  --background: var(--paper);
  --foreground: #f2f3ef;
  --card-foreground: #f2f3ef;
  --popover: #121719;
  --popover-foreground: #f2f3ef;
  --primary: #f2f3ef;
  --primary-foreground: #0a0d0f;
  --secondary: #1b2224;
  --secondary-foreground: #f2f3ef;
  --accent: #172922;
  --accent-foreground: #f2f3ef;
  --border: var(--line);
  --input: var(--line)
}

body {
  background: var(--paper);
  color: #f2f3ef
}

.guest {
  color: #f2f3ef;
  background: #090c0e;
  position: relative
}

.guest:before,
.app:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 80% -5%, #46d6a012, #0000 27%), linear-gradient(#ffffff03 1px, #0000 1px) 0 0/100% 72px;
  position: fixed;
  inset: 0
}

.logo>span {
  color: #0a0d0f;
  background: #f1f2ed
}

.logo small {
  color: #6d7874
}

.plain-label {
  color: var(--green)
}

.guest-head {
  border-color: var(--line);
  z-index: 2;
  position: relative
}

.guest-head nav a {
  color: #8a9490
}

.guest-head [data-slot=button] {
  color: #090c0e;
  background: #f2f3ef;
  border: 0;
  font-weight: 800
}

.guest-hero {
  z-index: 1;
  position: relative
}

.guest-copy h1 {
  color: #f3f4f0
}

.guest-actions [data-slot=button] {
  background: var(--green);
  color: #07120e
}

.guest-actions>button:last-child {
  color: #87918d
}

.guest-facts small {
  color: #75807c
}

.guest-preview {
  background: linear-gradient(145deg, #161c1e, #0e1214);
  border: 1px solid #ffffff1c;
  box-shadow: 0 35px 100px #00000059
}

.guest-preview:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(125deg, #0000 45%, #46d6a00a);
  position: absolute;
  inset: 0
}

.guest-preview>[data-slot=button] {
  background: var(--green);
  color: #07120e
}

.who {
  border-color: var(--line)
}

.who-grid article {
  border-color: var(--line);
  background: #111618
}

.who-grid p,
.system-intro p {
  color: #838d89
}

.free-offer {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #0f1416
}

.free-offer article {
  background: #151b1d
}

.how article p {
  color: #7f8985
}

.guest-levels {
  border-color: var(--line)
}

.guest-levels header p {
  color: #89938f
}

.guest-levels article {
  border-color: var(--line);
  background: #111618
}

.guest-levels article p {
  color: #838d89
}

.guest-levels>[data-slot=button] {
  color: #0a0d0f;
  background: #f2f3ef
}

.app {
  color: #f2f3ef;
  background: #090c0e
}

.sidebar {
  border-right: 1px solid var(--line);
  background: #080b0d
}

.sidebar .logo>span {
  background: var(--green);
  color: #07120e
}

.sidebar nav button {
  color: #707b77
}

.sidebar nav button.active {
  color: #fff;
  background: linear-gradient(90deg, #46d6a021, #46d6a005);
  border: 1px solid #46d6a021
}

.sidebar nav button.active svg {
  color: var(--green)
}

.side-level {
  background: linear-gradient(145deg, #c9a36a1a, #ffffff06);
  border-color: #c9a36a33
}

.side-level button {
  color: var(--gold)
}

.main {
  background: 0 0
}

.app-head {
  border-color: var(--line);
  background: #090c0edb
}

.demo-switch {
  background: #161c1e
}

.demo-switch button {
  color: #737e79
}

.demo-switch button.active {
  color: #fff;
  box-shadow: none;
  background: #2a3231
}

.notify {
  border-color: var(--line);
  color: #c8ceca;
  background: #121719
}

.avatar {
  background: linear-gradient(135deg, var(--green), #9eb8ff);
  color: #07120e
}

.main>main {
  position: relative
}

.page-title h1 {
  color: #f2f3ef
}

.page-title p {
  color: #7c8682
}

.page-title>div:first-child>span {
  color: #68736f
}

.balance-card {
  border-color: var(--line);
  background: linear-gradient(145deg, #151b1d, #111517)
}

.balance-card small {
  color: #77817d
}

.balance-card button {
  color: var(--green)
}

.next-actions {
  grid-template-columns: 1.5fr .8fr .65fr;
  align-items: stretch
}

.next-signal {
  background: radial-gradient(circle at 75% 20%, #46d6a01f, #0000 35%), linear-gradient(145deg, #151d1a, #0e1312);
  border-color: #46d6a03b;
  min-height: 330px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 65px #0003
}

.next-signal:after {
  content: "";
  border: 1px solid #46d6a014;
  border-radius: 50%;
  width: 260px;
  height: 260px;
  position: absolute;
  bottom: -120px;
  right: -120px
}

.next-signal h2 {
  font-size: 31px
}

.next-signal [data-slot=button] {
  background: var(--green);
  color: #07120e;
  z-index: 2;
  position: relative
}

.next-lesson {
  background: radial-gradient(circle at 90% 0, #6c7add26, #0000 34%), linear-gradient(145deg, #171a24, #11151b);
  border-color: #8996e82e;
  min-height: 330px
}

.next-lesson h2 {
  color: #f0f1f4;
  font-size: 22px
}

.next-lesson p {
  color: #858b98
}

.next-lesson [data-slot=progress] {
  background: #262b37
}

.next-lesson [data-slot=progress-indicator] {
  background: #92a1ff
}

.next-lesson [data-slot=button] {
  color: #d8dced;
  background: #ffffff0a;
  border-color: #ffffff21
}

.next-level {
  background: radial-gradient(circle at 75% 5%, #c9a36a29, #0000 35%), linear-gradient(145deg, #1c1915, #131313);
  border-color: #c9a36a33;
  min-height: 330px
}

.next-level>span {
  color: #a7895d
}

.next-level p,
.next-level>small {
  color: #8d8272
}

.next-level [data-slot=progress] {
  background: #332b22
}

.next-level [data-slot=progress-indicator] {
  background: var(--gold)
}

.next-level>button {
  color: var(--gold)
}

.all-sections {
  border-color: var(--line);
  background: #101517;
  padding: 24px
}

.all-sections header>small {
  color: #66716d
}

.all-sections>div>button {
  border-color: var(--line);
  color: #eef0ed;
  transition: background .18s, transform .18s
}

.all-sections>div>button:hover {
  background: #171d1f;
  transform: translate(2px)
}

.all-sections>div>button>svg:first-child {
  color: #82908a;
  width: 20px
}

.all-sections>div>button:first-child>svg:first-child,
.all-sections>div>button:nth-child(2)>svg:first-child {
  color: var(--green)
}

.all-sections>div>button:nth-child(5)>svg:first-child,
.all-sections>div>button:nth-child(6)>svg:first-child {
  color: var(--gold)
}

.all-sections>div>button>svg:last-child {
  color: #596460
}

.all-sections button small {
  color: #707b76
}

.home-challenge {
  background: linear-gradient(135deg, #c9a36a17, #46d6a00b);
  border-color: #c9a36a33
}

.home-challenge p {
  color: #858177
}

.home-challenge [data-slot=button] {
  color: #e3dfd8;
  background: #ffffff0a;
  border-color: #ffffff21
}

.challenge-progress-circle {
  border-color: #302b22;
  border-top-color: var(--gold)
}

.simple-tabs button,
.history-tabs button {
  border-color: var(--line);
  color: #7c8782;
  background: #111618
}

.signal-list,
.history-table,
.available-list,
.level-list,
.profile-links {
  border-color: var(--line);
  background: #101517
}

.signal-list>header,
.available-list>header {
  border-color: var(--line);
  color: #75807b
}

.signal-list>article {
  border-color: var(--line)
}

.signal-list article small,
.signal-list p {
  color: #727d78
}

.signal-list article>strong {
  color: var(--green)
}

.signal-list article>[data-slot=button] {
  background: var(--green);
  color: #07120e
}

.signal-list article.locked>[data-slot=button] {
  color: #858f8a;
  border-color: var(--line);
  background: 0 0
}

.explain-card {
  background: #46d6a00e;
  border-color: #46d6a02b
}

.explain-card b {
  color: #dce8e2
}

.explain-card p {
  color: #74827b
}

.learning-summary {
  border-color: var(--line);
  background: linear-gradient(135deg, #12191a, #101418)
}

.learning-summary [data-slot=progress] {
  background: #242b2a
}

.lesson-list,
.lesson-player {
  border-color: var(--line);
  background: #101517
}

.lesson-list button>i {
  border-color: var(--line)
}

.lesson-info>p {
  color: #7d8782
}

.lesson-info [data-slot=button] {
  background: var(--green);
  color: #07120e
}

.free-strategies {
  border-color: var(--line);
  background: #101517
}

.free-strategies article {
  border-color: var(--line);
  background: #141a1c
}

.free-strategies p {
  color: #727d78
}

.history-table>header {
  color: #68736e;
  background: #0d1113
}

.history-table>header,
.history-table>article {
  border-color: var(--line)
}

.wallet-hero {
  background: radial-gradient(circle at 18% 30%, #46d6a01c, #0000 31%), linear-gradient(145deg, #141b19, #0d1112);
  border: 1px solid #46d6a02e
}

.wallet-progress {
  border-color: var(--line);
  background: #ffffff09
}

.money-cards article {
  border-color: var(--line);
  background: #111618
}

.money-cards small {
  color: #727d78
}

.active-challenge {
  background: linear-gradient(145deg, #c9a36a17, #101614);
  border-color: #c9a36a33
}

.active-challenge p {
  color: #837f74
}

.active-challenge>div:last-child {
  border-color: #c9a36a29
}

.challenge-number {
  border-color: #302b22;
  border-top-color: var(--gold)
}

.available-list>article {
  border-color: var(--line)
}

.available-list p {
  color: #717c77
}

.reward-summary {
  background: radial-gradient(circle at 85% 30%, #c9a36a21, #0000 30%), linear-gradient(145deg, #1a1713, #101315);
  border: 1px solid #c9a36a2e
}

.reward-grid article {
  border-color: var(--line);
  background: #111618
}

.reward-grid article>div {
  background: #171d1f
}

.reward-grid article.progress {
  background: linear-gradient(145deg, #c9a36a14, #111618);
  border-color: #c9a36a33
}

.reward-grid p {
  color: #737e79
}

.level-current {
  background: radial-gradient(circle at 85% 20%, #c9a36a21, #0000 25%), linear-gradient(145deg, #191714, #101315);
  border: 1px solid #c9a36a2e
}

.level-list>article,
.level-list article>div {
  border-color: var(--line)
}

.level-list p {
  color: #717c77
}

.level-list article.current {
  background: #46d6a00f
}

.level-list article.current>div {
  background: #14221d;
  border-color: #46d6a040
}

.profile-card {
  border-color: var(--line);
  background: linear-gradient(145deg, #141a1c, #101517)
}

.big-avatar {
  background: linear-gradient(135deg, var(--green), #9aafff);
  color: #07120e
}

.profile-links button {
  color: #eef0ed;
  border-color: var(--line)
}

.profile-links button:hover {
  background: #171d1f
}

.profile-links small {
  color: #727d78
}

.more-grid button {
  border-color: var(--line);
  color: #eef0ed;
  background: #111618
}

.more-grid button:hover {
  background: #171d1f
}

@media (width<=1050px) {
  .next-level {
    background: radial-gradient(circle at 88% 10%, #c9a36a2e, #0000 28%), linear-gradient(145deg, #1c1915, #131313)
  }
}

@media (width<=760px) {
  .guest-head [data-slot=button] {
    background: var(--green)
  }

  .next-actions {
    grid-template-columns: 1fr
  }

  .next-signal {
    min-height: 300px
  }

  .next-lesson,
  .next-level {
    min-height: 240px
  }

  .all-sections {
    padding: 18px 12px
  }

  .mobile-nav {
    border: 1px solid var(--line);
    background: #090d0ef5
  }

  .mobile-nav button.active {
    background: #46d6a01c
  }

  .mobile-nav button.active svg {
    color: var(--green)
  }
}

:root {
  --muted: #a2ada8
}

body {
  font-size: 16px;
  line-height: 1.5
}

.logo {
  gap: 13px
}

.logo>span {
  border-radius: 12px;
  width: 40px;
  height: 40px;
  font-size: 17px
}

.logo b {
  letter-spacing: .09em;
  font-size: 14px
}

.logo small {
  color: #93a09a;
  font-size: 11px
}

.plain-label {
  letter-spacing: .12em;
  font-size: 12px
}

.guest-head {
  max-width: 1440px;
  height: 84px;
  padding: 0 34px
}

.guest-head nav {
  gap: 36px
}

.guest-head [data-slot=button] {
  height: 48px;
  padding: 0 20px;
  font-size: 14px
}

.guest-hero {
  gap: 90px;
  max-width: 1440px;
  min-height: 720px;
  padding: 88px 44px
}

.guest-copy>p {
  color: #b2bbb7;
  font-size: 18px;
  line-height: 1.65
}

.guest-actions [data-slot=button] {
  height: 56px;
  padding: 0 26px;
  font-size: 15px
}

.guest-facts b {
  font-size: 24px
}

.preview-head {
  color: #aeb8b3;
  font-size: 12px
}

.preview-signal small {
  color: #9ca8a2;
  font-size: 12px
}

.preview-signal strong {
  font-size: 22px
}

.preview-signal p {
  color: #a6b1ab;
  font-size: 13px
}

.preview-actions span {
  color: #c2c9c5;
  padding: 15px;
  font-size: 12px
}

.guest-preview>[data-slot=button] {
  height: 50px;
  font-size: 14px
}

.who,
.free-offer,
.how,
.guest-levels {
  max-width: 1440px;
  padding-top: 110px;
  padding-bottom: 110px
}

.who h2,
.free-offer h2,
.how h2,
.guest-levels h2 {
  font-size: 48px
}

.who-grid h3,
.free-offer h3,
.how article h3 {
  font-size: 20px
}

.who-grid p,
.free-offer article p,
.how article p,
.guest-levels header p,
.guest-levels article p {
  color: #a4aea9;
  font-size: 14px;
  line-height: 1.6
}

.free-offer header p {
  color: #a4aea9;
  font-size: 16px
}

.free-offer article span,
.how article>b,
.guest-levels article>span,
.guest-levels article>b {
  font-size: 12px
}

.free-offer>[data-slot=button],
.guest-levels>[data-slot=button] {
  height: 50px;
  font-size: 14px
}

.guest-levels article h3 {
  font-size: 21px
}

.sidebar {
  width: 268px;
  padding: 30px 20px 24px
}

.sidebar nav button {
  color: #9aa5a0;
  border-radius: 12px;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  height: 52px;
  padding: 0 14px;
  font-size: 14px
}

.sidebar nav svg {
  width: 20px;
  height: 20px
}

.side-level {
  border-radius: 15px;
  padding: 17px
}

.side-level small {
  color: #9ca69f;
  font-size: 11px
}

.side-level>b {
  margin: 9px 0;
  font-size: 21px
}

.side-level button {
  font-size: 12px
}

.side-level svg {
  width: 14px
}

.app-head {
  height: 76px;
  padding: 0 36px
}

.demo-switch {
  padding: 4px
}

.demo-switch>span {
  padding: 0 9px;
  font-size: 11px
}

.demo-switch button {
  height: 34px;
  padding: 0 13px;
  font-size: 12px
}

.notify,
.avatar {
  border-radius: 12px;
  width: 42px;
  height: 42px
}

.notify svg {
  width: 18px
}

.avatar {
  font-size: 12px
}

.page-title>div:first-child>span,
.next-lesson>span,
.next-level>span,
.all-sections header span,
.home-challenge>div:nth-child(2)>span,
.learning-summary>div>span,
.lesson-info>span,
.free-strategies header span,
.active-challenge>div:nth-child(2)>span,
.reward-summary span,
.level-current span {
  letter-spacing: .11em;
  color: #9aa59f;
  font-size: 12px
}

.page-title h1 {
  margin: 10px 0 7px;
  font-size: 46px;
  line-height: 1.06
}

.page-title p {
  color: #a5afaa;
  font-size: 16px
}

.page-title.simple {
  min-height: 82px
}

.balance-card {
  border-radius: 15px;
  min-width: 215px;
  padding: 14px 17px
}

.balance-card b {
  font-size: 28px
}

.balance-card button {
  gap: 5px;
  font-size: 12px
}

.balance-card svg {
  width: 14px
}

[data-slot=button] {
  min-height: 44px;
  font-size: 14px
}

button {
  line-height: 1.2
}

.next-actions {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .82fr) minmax(270px, .68fr);
  gap: 16px
}

.next-signal,
.next-lesson,
.next-level {
  border-radius: 20px;
  min-height: 360px;
  padding: 24px
}

.next-signal header {
  color: #adb8b2;
  font-size: 12px
}

.next-signal header i {
  width: 8px;
  height: 8px
}

.next-signal small {
  color: #a5b0aa;
  font-size: 12px
}

.next-signal h2 {
  margin: 12px 0;
  font-size: 42px;
  line-height: 1.05
}

.next-signal strong svg {
  width: 23px
}

.next-signal p {
  color: #a7b2ac;
  font-size: 14px
}

.next-signal [data-slot=button] {
  height: 54px;
  font-size: 14px;
  font-weight: 800
}

.next-lesson h2 {
  margin: 38px 0 12px;
  font-size: 30px;
  line-height: 1.15
}

.next-lesson p,
.next-level p {
  color: #a9b0bb;
  font-size: 14px;
  line-height: 1.55
}

.next-lesson [data-slot=progress],
.next-level [data-slot=progress] {
  height: 6px
}

.next-lesson [data-slot=button] {
  height: 48px;
  margin-top: 16px;
  font-size: 13px
}

.next-level>svg {
  width: 38px;
  height: 38px;
  margin: 37px 0 15px
}

.next-level>small {
  color: #a79b89;
  font-size: 13px
}

.next-level>button {
  font-size: 13px
}

.next-level>button svg {
  width: 15px
}

.all-sections {
  border-radius: 20px;
  padding: 28px
}

.all-sections header {
  margin-bottom: 18px
}

.all-sections h2 {
  margin-top: 7px;
  font-size: 26px
}

.all-sections header>small {
  color: #909b96;
  font-size: 12px
}

.all-sections>div>button {
  grid-template-columns: 40px 1fr 18px;
  gap: 12px;
  min-height: 88px;
  padding: 0 16px
}

.all-sections>div>button>svg:first-child {
  width: 23px;
  height: 23px
}

.all-sections>div>button>svg:last-child {
  width: 16px
}

.all-sections button span {
  gap: 5px
}

.all-sections button small {
  color: #98a39e;
  font-size: 12px
}

.home-challenge {
  gap: 18px;
  padding: 20px 22px
}

.challenge-progress-circle {
  width: 68px;
  height: 68px
}

.challenge-progress-circle b {
  font-size: 19px
}

.challenge-progress-circle small {
  font-size: 10px
}

.home-challenge h3 {
  font-size: 17px
}

.home-challenge p {
  color: #a7a194;
  font-size: 13px
}

.home-challenge [data-slot=button] {
  height: 44px;
  font-size: 13px
}

.simple-tabs button,
.history-tabs button {
  height: 44px;
  padding: 0 17px;
  font-size: 13px
}

.signal-list>header,
.available-list>header {
  color: #9da8a2;
  height: 58px;
  padding: 0 21px;
  font-size: 12px
}

.signal-list>article {
  grid-template-columns: 112px 1fr 150px 150px;
  gap: 18px;
  min-height: 102px;
  padding: 0 21px
}

.signal-status span {
  font-size: 13px
}

.signal-list article small {
  color: #9aa59f;
  font-size: 12px
}

.signal-list h3 {
  margin: 5px 0;
  font-size: 18px
}

.signal-list p {
  color: #98a39e;
  font-size: 12px
}

.signal-list article>strong {
  font-size: 15px
}

.signal-list article>strong svg {
  width: 19px
}

.explain-card {
  gap: 14px;
  padding: 18px 20px
}

.explain-card>svg {
  width: 22px
}

.explain-card b {
  font-size: 14px
}

.learning-summary {
  grid-template-columns: 210px 1fr auto;
  padding: 20px 23px
}

.learning-summary p,
.learning-summary>span {
  color: #9ba6a0;
  font-size: 12px
}

.lesson-list {
  padding: 10px
}

.lesson-list button {
  grid-template-columns: 38px 1fr 16px;
  gap: 11px;
  min-height: 78px;
  padding: 10px
}

.lesson-list button>i {
  width: 36px;
  height: 36px;
  font-size: 11px
}

.lesson-list button>i svg {
  width: 15px
}

.lesson-list button small {
  color: #9aa49f;
  font-size: 11px
}

.lesson-list button>svg {
  width: 15px
}

.lesson-player {
  min-height: 430px
}

.video>small,
.lesson-info>span {
  font-size: 12px
}

.lesson-info>p {
  color: #a5afaa;
  font-size: 14px;
  line-height: 1.65
}

.lesson-info>div span {
  color: #a1aba6;
  font-size: 12px
}

.lesson-info>div svg {
  width: 15px
}

.lesson-info [data-slot=button] {
  height: 48px;
  font-size: 14px
}

.free-strategies {
  padding: 24px
}

.free-strategies h2 {
  font-size: 25px
}

.free-strategies article {
  min-height: 150px;
  padding: 17px
}

.free-strategies article>b {
  font-size: 11px
}

.free-strategies p {
  color: #99a49f;
  font-size: 12px;
  line-height: 1.5
}

.wallet-hero small,
.money-cards small,
.active-challenge p,
.reward-summary p,
.reward-grid p,
.level-current p,
.level-list p,
.profile-card p,
.profile-links small {
  color: #9ea8a3;
  font-size: 13px;
  line-height: 1.5
}

.wallet-hero h1 {
  font-size: 56px
}

.money-cards h2,
.reward-summary h2 {
  font-size: 28px
}

.money-cards article {
  min-height: 145px;
  padding: 22px
}

.active-challenge h2 {
  font-size: 25px
}

.available-list>article {
  min-height: 92px
}

.available-list h3 {
  font-size: 16px
}

.available-list p {
  font-size: 12px
}

.available-list article>span b {
  font-size: 13px
}

.available-list [data-slot=button] {
  height: 44px;
  font-size: 13px
}

.reward-summary {
  min-height: 160px;
  padding: 28px
}

.reward-summary>svg {
  width: 48px
}

.reward-grid {
  gap: 14px
}

.reward-grid article {
  min-height: 285px;
  padding: 20px
}

.reward-grid article>span {
  font-size: 11px
}

.reward-grid h3 {
  font-size: 18px
}

.level-current {
  min-height: 190px;
  padding: 30px
}

.level-current h1 {
  font-size: 46px
}

.level-list>article {
  grid-template-columns: 48px 1fr 120px;
  min-height: 112px;
  padding: 0 22px
}

.level-list article>div {
  width: 44px;
  height: 44px
}

.level-list article>div svg {
  width: 19px
}

.level-list article>span small {
  font-size: 11px
}

.level-list article>strong {
  font-size: 12px
}

.profile-card {
  grid-template-columns: 72px 1fr auto;
  gap: 17px;
  padding: 26px
}

.big-avatar {
  width: 68px;
  height: 68px;
  font-size: 18px
}

.profile-card small {
  font-size: 11px
}

.profile-card h2 {
  font-size: 26px
}

.profile-card [data-slot=button] {
  height: 44px;
  font-size: 13px
}

.profile-links button {
  grid-template-columns: 34px 1fr 16px;
  gap: 12px;
  min-height: 92px;
  padding: 0 21px
}

.profile-links svg {
  width: 21px
}

.profile-links b {
  font-size: 15px
}

.profile-links small {
  font-size: 12px
}

.more-grid button {
  grid-template-columns: 36px 1fr 16px;
  height: 92px;
  padding: 0 20px
}

.more-grid svg {
  width: 22px
}

.more-grid b {
  font-size: 15px
}

@media (width<=1200px) {
  .main>main {
    padding-left: 34px;
    padding-right: 34px
  }

  .next-actions {
    grid-template-columns: 1.3fr 1fr
  }

  .next-level {
    grid-column: 1/3;
    min-height: 220px
  }

  .next-level>svg {
    margin: 18px 0 10px
  }

  .learn-layout {
    grid-template-columns: 280px 1fr
  }
}

@media (width<=760px) {
  body {
    font-size: 16px
  }

  .guest-head {
    height: 70px;
    padding: 0 16px
  }

  .guest-head [data-slot=button] {
    height: 42px;
    font-size: 13px
  }

  .guest-hero {
    padding: 54px 18px
  }

  .guest-copy h1 {
    font-size: 46px
  }

  .guest-copy>p {
    font-size: 17px
  }

  .guest-facts small,
  .preview-head,
  .preview-signal small {
    font-size: 11px
  }

  .preview-signal h2 {
    font-size: 32px
  }

  .preview-signal p,
  .preview-actions span {
    font-size: 12px
  }

  .who-grid p,
  .free-offer article p,
  .how article p,
  .guest-levels article p {
    font-size: 14px
  }

  .sidebar {
    display: none
  }

  .main {
    margin-left: 0
  }

  .app-head {
    height: 68px;
    padding: 0 15px
  }

  .main>main {
    padding: 30px 16px 108px
  }

  .page {
    gap: 18px
  }

  .page-title h1 {
    font-size: 34px
  }

  .page-title p {
    font-size: 15px
  }

  .page-title>div:first-child>span {
    font-size: 11px
  }

  .page-title {
    gap: 12px
  }

  .balance-card {
    min-width: 135px;
    padding: 10px 12px
  }

  .balance-card small {
    font-size: 10px
  }

  .balance-card b {
    font-size: 22px
  }

  .next-actions {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .next-signal,
  .next-lesson,
  .next-level {
    grid-column: 1;
    min-height: 300px;
    padding: 21px
  }

  .next-signal h2 {
    font-size: 35px
  }

  .next-signal strong {
    font-size: 21px
  }

  .next-lesson {
    min-height: 280px
  }

  .next-level {
    min-height: 255px
  }

  .next-lesson h2 {
    margin-top: 28px;
    font-size: 27px
  }

  .next-level h2 {
    font-size: 27px
  }

  .all-sections {
    padding: 22px 15px
  }

  .all-sections h2 {
    font-size: 24px
  }

  .all-sections header>small {
    display: none
  }

  .all-sections>div {
    grid-template-columns: 1fr
  }

  .all-sections>div>button {
    min-height: 84px;
    padding: 0 8px
  }

  .all-sections button b {
    font-size: 15px
  }

  .all-sections button small {
    font-size: 12px
  }

  .mobile-nav {
    height: 76px;
    padding: 5px;
    bottom: 8px;
    left: 8px;
    right: 8px
  }

  .mobile-nav button {
    gap: 4px;
    font-size: 11px
  }

  .mobile-nav svg {
    width: 21px;
    height: 21px
  }

  .signal-list>article {
    grid-template-columns: 78px 1fr 90px;
    gap: 10px;
    padding: 14px
  }

  .signal-list article>[data-slot=button] {
    grid-column: 1/4;
    width: 100%
  }

  .learn-layout {
    grid-template-columns: 1fr
  }

  .lesson-list button {
    min-width: 245px
  }

  .lesson-info {
    padding: 25px 20px
  }

  .lesson-info h2 {
    font-size: 28px
  }

  .reward-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .reward-grid article {
    min-height: 230px
  }

  .profile-card {
    grid-template-columns: 64px 1fr
  }

  .profile-card [data-slot=button] {
    grid-column: 1/3;
    width: 100%
  }

  .profile-links,
  .more-grid {
    grid-template-columns: 1fr
  }
}

.sidebar .logo b,
.guest-head .logo b,
.page-title h1,
.next-signal h2,
.next-signal strong,
.next-lesson h2,
.next-level h2,
.balance-card b,
.all-sections h2 {
  font-family: Arial Black, Inter, SF Pro Display, sans-serif
}

.app:before {
  background: radial-gradient(circle at 66% -8%, #46d6a01a, #0000 30%), linear-gradient(#ffffff04 1px, #0000 1px) 0 0/100% 80px
}

.sidebar {
  background: linear-gradient(#070a0c 0%, #090d0f 65%, #0c0e0e 100%)
}

.sidebar:after {
  content: "AM / 01";
  writing-mode: vertical-rl;
  letter-spacing: .24em;
  color: #46d6a047;
  font: 800 10px/1 ui-monospace, monospace;
  position: absolute;
  bottom: 24px;
  right: -1px
}

.sidebar nav button {
  font-weight: 650
}

.sidebar nav button.active {
  border-left: 3px solid var(--green);
  background: linear-gradient(90deg, #46d6a02e, #46d6a006);
  font-weight: 900;
  box-shadow: inset 18px 0 40px #46d6a006
}

.page-title {
  align-items: center;
  padding-bottom: 8px;
  position: relative
}

.page-title:after {
  content: "";
  background: var(--green);
  width: 76px;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 18px #46d6a080
}

.page-title h1 {
  letter-spacing: -.055em;
  font-weight: 900
}

.page-title h1 strong {
  color: var(--green);
  font: inherit
}

.page-title p {
  font-weight: 550
}

.page-title>div:first-child>span {
  color: #b8c2bd;
  font-weight: 800
}

.balance-card {
  border-color: #ffffff24;
  box-shadow: 0 18px 40px #0000002e
}

.balance-card b {
  letter-spacing: -.04em;
  font-weight: 900
}

.next-signal {
  border: 1px solid #46d6a061;
  border-left: 4px solid var(--green);
  background: radial-gradient(circle at 82% 28%, #46d6a02e, #0000 30%), linear-gradient(145deg, #13221c 0%, #0b1110 58%, #080c0d 100%);
  border-radius: 6px 24px 24px 6px;
  grid-area: 1/1/3;
  min-height: 660px;
  padding: 30px 32px 32px;
  box-shadow: 0 32px 90px #00000061, inset 0 1px #ffffff0d
}

.next-signal:before {
  content: "LIVE";
  letter-spacing: -.08em;
  color: #ffffff06;
  pointer-events: none;
  font: 900 clamp(72px, 8vw, 124px)/.8 Arial Black, sans-serif;
  position: absolute;
  top: 73px;
  right: 28px
}

.next-signal:after {
  border-color: #46d6a026;
  width: 460px;
  height: 460px;
  bottom: -210px;
  right: -210px;
  box-shadow: 0 0 0 72px #46d6a005, 0 0 0 144px #46d6a003
}

.next-signal header {
  letter-spacing: .08em;
  border-bottom: 1px solid #ffffff1a;
  padding-bottom: 20px;
  font-size: 12px;
  font-weight: 850
}

.next-signal header b {
  letter-spacing: .04em;
  background: #46d6a014;
  border: 1px solid #46d6a042;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 11px
}

.signal-main {
  z-index: 1;
  position: relative;
  margin: auto 0 !important
}

.signal-main>small {
  letter-spacing: .14em;
  font-weight: 850;
  color: #a9b7b0 !important;
  font-size: 12px !important
}

.next-signal h2 {
  letter-spacing: -.065em;
  margin: 19px 0 18px;
  font-size: clamp(50px, 5.1vw, 78px);
  font-weight: 950;
  line-height: .94
}

.next-signal h2 em {
  color: #81908a;
  font-style: normal;
  font-weight: 650
}

.next-signal strong {
  text-transform: uppercase;
  letter-spacing: -.035em;
  font-size: 30px;
  font-weight: 950
}

.next-signal strong svg {
  stroke-width: 2.6px;
  width: 31px;
  height: 31px
}

.signal-facts {
  z-index: 2;
  border: 1px solid #ffffff1a;
  border-radius: 14px;
  grid-template-columns: 1fr .62fr 1.15fr;
  margin: 0 0 18px;
  display: grid;
  position: relative;
  overflow: hidden
}

.signal-facts span {
  border-right: 1px solid #ffffff1a;
  flex-direction: column;
  justify-content: center;
  min-height: 78px;
  padding: 16px 18px;
  display: flex
}

.signal-facts span:last-child {
  border: 0
}

.signal-facts small {
  letter-spacing: .12em;
  color: #7e8d86 !important;
  font-size: 10px !important
}

.signal-facts b {
  color: #edf2ef;
  margin-top: 6px;
  font: 850 14px/1.2 Inter, sans-serif
}

.next-signal [data-slot=button] {
  letter-spacing: -.01em;
  border-radius: 12px;
  height: 62px;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 14px 38px #46d6a029
}

.next-signal [data-slot=button] svg {
  width: 19px
}

.next-lesson,
.next-level {
  border-radius: 18px;
  grid-column: 2;
  min-height: 322px;
  padding: 25px
}

.next-lesson {
  background: linear-gradient(140deg, #1a1e31, #10141e);
  border-top: 3px solid #92a1ff;
  grid-row: 1
}

.next-level {
  border-top: 3px solid var(--gold);
  background: linear-gradient(140deg, #241d14, #121313);
  grid-row: 2
}

.next-lesson h2 {
  letter-spacing: -.045em;
  margin: 32px 0 12px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.08
}

.next-lesson h2 strong {
  color: #fff;
  font-weight: 950
}

.next-lesson>span,
.next-level>span {
  letter-spacing: .12em;
  font-weight: 850
}

.next-lesson>span {
  color: #aab3ff
}

.next-lesson p {
  font-size: 13px
}

.next-lesson [data-slot=button] {
  font-weight: 800
}

.next-level h2 {
  letter-spacing: -.055em;
  font-size: 40px;
  font-weight: 950
}

.next-level p {
  font-weight: 650
}

.next-level>button {
  letter-spacing: -.01em;
  font-weight: 900
}

.all-sections {
  background: linear-gradient(135deg, #111719, #0d1214);
  border-left: 4px solid #ffffff2e;
  border-radius: 8px 22px 22px 8px
}

.all-sections h2 {
  letter-spacing: -.045em;
  font-size: 30px;
  font-weight: 900
}

.all-sections>div>button {
  position: relative
}

.all-sections>div>button:after {
  content: "";
  background: var(--green);
  height: 2px;
  transition: right .22s;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 100%
}

.all-sections>div>button:hover:after {
  right: 0
}

.all-sections button b {
  font-size: 16px;
  font-weight: 900
}

.all-sections button small {
  font-weight: 550
}

.home-challenge {
  border-left: 4px solid var(--gold);
  border-radius: 8px 18px 18px 8px
}

@media (width<=1200px) {
  .next-actions {
    grid-template-columns: 1.35fr .85fr
  }

  .next-signal {
    min-height: 600px
  }

  .next-signal h2 {
    font-size: 56px
  }

  .next-lesson,
  .next-level {
    grid-column: 2
  }

  .next-level {
    min-height: 0
  }

  .signal-facts {
    grid-template-columns: 1fr 1fr
  }

  .signal-facts span:last-child {
    display: none
  }
}

@media (width<=900px) {
  .next-actions {
    grid-template-rows: auto;
    grid-template-columns: 1fr
  }

  .next-signal,
  .next-lesson,
  .next-level {
    grid-area: auto/1
  }

  .next-signal {
    min-height: 560px
  }

  .next-lesson,
  .next-level {
    min-height: 280px
  }
}

@media (width<=760px) {
  .page-title:after {
    width: 54px
  }

  .page-title h1 {
    line-height: 1
  }

  .balance-card {
    align-self: flex-start
  }

  .next-signal {
    border-left-width: 3px;
    min-height: 520px;
    padding: 23px 21px 22px
  }

  .next-signal:before {
    font-size: 62px;
    top: 73px;
    right: 17px
  }

  .next-signal header {
    align-items: center;
    gap: 10px
  }

  .next-signal header b {
    padding: 6px 8px;
    font-size: 9px
  }

  .next-signal h2 {
    margin: 16px 0;
    font-size: 48px
  }

  .next-signal strong {
    font-size: 25px
  }

  .signal-facts {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 14px
  }

  .signal-facts span {
    min-height: 68px;
    padding: 12px
  }

  .signal-facts span:last-child {
    display: none
  }

  .signal-facts b {
    font-size: 13px
  }

  .next-signal [data-slot=button] {
    height: 58px
  }

  .next-lesson,
  .next-level {
    min-height: 270px
  }

  .next-lesson h2 {
    font-size: 27px
  }

  .next-level h2 {
    font-size: 36px
  }

  .all-sections {
    border-left-width: 3px
  }

  .all-sections h2 {
    font-size: 27px
  }
}

.page-title.simple {
  align-items: flex-start;
  min-height: 105px
}

.page-title.simple h1 {
  letter-spacing: -.06em;
  font-family: Arial Black, Inter, sans-serif;
  font-size: 54px;
  font-weight: 950
}

.page-title.simple p {
  max-width: 760px;
  font-size: 15px
}

.page:has(.learning-summary) .page-title:after {
  background: #96a4ff;
  box-shadow: 0 0 18px #96a4ff73
}

.page:has(.history-table) .page-title:after {
  background: #72b7ff;
  box-shadow: 0 0 18px #72b7ff66
}

.page:has(.wallet-hero) .page-title:after {
  background: var(--green)
}

.page:has(.active-challenge) .page-title:after {
  background: var(--gold);
  box-shadow: 0 0 18px #c9a36a6b
}

.page:has(.reward-grid) .page-title:after {
  background: var(--gold);
  box-shadow: 0 0 18px #c9a36a6b
}

.page:has(.level-current) .page-title:after {
  background: var(--gold);
  box-shadow: 0 0 18px #c9a36a6b
}

.page:has(.profile-card) .page-title:after {
  background: #78a7ff;
  box-shadow: 0 0 18px #78a7ff66
}

.next-actions {
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1.48fr) minmax(285px, .78fr) minmax(260px, .68fr);
  gap: 15px
}

.next-signal,
.next-lesson,
.next-level {
  grid-area: auto;
  min-height: 440px
}

.next-signal {
  padding: 25px 27px 26px
}

.next-signal:before {
  font-size: 82px;
  top: 67px;
  right: 22px
}

.next-signal:after {
  width: 330px;
  height: 330px;
  bottom: -165px;
  right: -160px;
  box-shadow: 0 0 0 52px #46d6a005, 0 0 0 104px #46d6a003
}

.next-signal header {
  padding-bottom: 16px
}

.signal-main {
  margin: 34px 0 27px !important
}

.next-signal h2 {
  margin: 15px 0 13px;
  font-size: clamp(46px, 4.1vw, 66px)
}

.next-signal strong {
  font-size: 26px
}

.signal-facts span {
  min-height: 68px;
  padding: 12px 14px
}

.signal-facts span:last-child {
  display: none
}

.signal-facts {
  grid-template-columns: 1.2fr .8fr;
  margin-bottom: 14px
}

.next-signal [data-slot=button] {
  height: 56px
}

.next-lesson,
.next-level {
  padding: 23px
}

.next-lesson h2 {
  margin: 30px 0 10px;
  font-size: 27px
}

.next-level>svg {
  margin: 26px 0 10px
}

.next-level h2 {
  font-size: 38px
}

.simple-tabs {
  gap: 8px
}

.simple-tabs button {
  letter-spacing: .02em;
  border-radius: 999px;
  font-family: ui-monospace, monospace;
  font-weight: 800
}

.signal-list {
  background: 0 0;
  border: 0;
  flex-direction: column;
  gap: 10px;
  display: flex;
  overflow: visible
}

.signal-list>header {
  border: 1px solid var(--line);
  letter-spacing: .06em;
  background: #0d1214;
  border-radius: 12px;
  height: 54px;
  padding: 0 18px;
  font: 800 12px/1 ui-monospace, monospace
}

.signal-list>article {
  background: linear-gradient(135deg, #12191a, #0e1315);
  border-radius: 14px;
  min-height: 104px;
  padding: 0 20px;
  border: 1px solid var(--line) !important
}

.signal-list>article:first-of-type {
  background: radial-gradient(circle at 70% 10%, #46d6a01a, #0000 28%), linear-gradient(135deg, #14211c, #0d1312);
  min-height: 148px;
  border-color: #46d6a04d !important;
  border-left: 4px solid var(--green) !important
}

.signal-list>article:first-of-type h3 {
  letter-spacing: -.045em;
  font: 950 30px/1 Arial Black, Inter, sans-serif
}

.signal-list h3 {
  font-family: Arial Black, Inter, sans-serif;
  font-weight: 900
}

.signal-list article>strong {
  text-transform: uppercase;
  font-family: Arial Black, Inter, sans-serif;
  font-weight: 900
}

.signal-list article>[data-slot=button] {
  border-radius: 10px;
  font-weight: 900
}

.signal-list article.locked {
  opacity: .68;
  background: #0b0f11
}

.explain-card {
  border-left: 4px solid var(--green);
  border-radius: 5px 14px 14px 5px
}

.learning-summary {
  background: radial-gradient(circle at 80% 20%, #96a4ff1f, #0000 30%), linear-gradient(135deg, #161a2a, #0f1419);
  border-left: 4px solid #96a4ff;
  border-radius: 5px 18px 18px 5px;
  min-height: 132px;
  padding: 24px 27px
}

.learning-summary b {
  letter-spacing: -.055em;
  font: 950 43px/1 Arial Black, Inter, sans-serif
}

.learning-summary [data-slot=progress] {
  height: 9px
}

.learning-summary [data-slot=progress-indicator] {
  background: #96a4ff
}

.learn-layout {
  grid-template-columns: 320px 1fr;
  gap: 16px
}

.lesson-list {
  border-left: 3px solid #96a4ff59;
  border-radius: 5px 17px 17px 5px
}

.lesson-list button {
  border-radius: 9px
}

.lesson-list button.selected {
  background: linear-gradient(90deg, #96a4ff29, #96a4ff09);
  border-color: #96a4ff59 #96a4ff59 #96a4ff59 #96a4ff;
  border-left-style: solid;
  border-left-width: 4px;
  box-shadow: 0 12px 30px #0000001f
}

.lesson-list button.selected>i {
  color: #0b0e12;
  background: #96a4ff;
  border-color: #96a4ff;
  font-weight: 900
}

.lesson-player {
  border-color: #96a4ff2e;
  border-radius: 18px;
  min-height: 470px
}

.video {
  border-right: 1px solid #96a4ff24
}

.video>span {
  background: #96a4ff;
  width: 72px;
  height: 72px
}

.lesson-info h2 {
  letter-spacing: -.05em;
  font: 950 38px/1.05 Arial Black, Inter, sans-serif
}

.lesson-info>span {
  color: #aeb7ff;
  font-family: ui-monospace, monospace
}

.free-strategies {
  border-top: 3px solid #96a4ff;
  border-radius: 18px
}

.free-strategies article {
  border-radius: 13px
}

.free-strategies article:first-child {
  background: linear-gradient(145deg, #96a4ff24, #141a1c);
  border-color: #96a4ff47
}

.history-tabs {
  gap: 8px
}

.history-tabs button {
  border-radius: 999px;
  font-weight: 850
}

.history-table {
  background: 0 0;
  border: 0;
  flex-direction: column;
  gap: 8px;
  display: flex;
  overflow: visible
}

.history-table>header,
.history-table>article {
  grid-template-columns: 1.45fr .7fr .8fr .8fr;
  padding: 0 20px
}

.history-table>header {
  letter-spacing: .08em;
  color: #8e9b95;
  background: #0d1215;
  border: 0;
  border-radius: 11px;
  min-height: 46px;
  font: 800 11px/1 ui-monospace, monospace
}

.history-table>article {
  background: linear-gradient(135deg, #111719, #0e1315);
  border-radius: 13px;
  min-height: 76px;
  border: 1px solid var(--line) !important
}

.history-table>article span {
  font-size: 13px;
  font-weight: 650
}

.history-table>article span:first-child {
  font-weight: 850
}

.history-table span.positive,
.history-table span.negative {
  border-radius: 999px;
  justify-self: start;
  padding: 7px 10px
}

.history-table span.positive {
  background: #46d6a01a
}

.history-table span.negative {
  background: #ee6b721a
}

.wallet-hero {
  border-left: 4px solid var(--green);
  background: radial-gradient(circle at 74% 25%, #46d6a024, #0000 29%), linear-gradient(145deg, #14211c, #0b1111);
  border-radius: 6px 22px 22px 6px;
  min-height: 330px;
  padding: 35px 38px
}

.wallet-hero span {
  letter-spacing: .11em;
  font: 850 12px/1 ui-monospace, monospace
}

.wallet-hero h1 {
  letter-spacing: -.07em;
  margin: 18px 0 8px;
  font: 950 82px/.95 Arial Black, Inter, sans-serif
}

.wallet-hero p {
  font-size: 13px
}

.wallet-hero [data-slot=button] {
  background: var(--green);
  height: 52px;
  font-size: 14px;
  font-weight: 950
}

.wallet-progress {
  border-radius: 16px;
  padding: 27px
}

.wallet-progress h2 {
  font: 900 25px/1.1 Arial Black, Inter, sans-serif
}

.money-cards {
  gap: 12px
}

.money-cards article {
  border-top: 3px solid var(--green);
  border-radius: 14px;
  min-height: 138px;
  padding: 22px;
  position: relative
}

.money-cards article:nth-child(2) {
  border-top-color: #72b7ff
}

.money-cards article:nth-child(3) {
  border-top-color: var(--gold)
}

.money-cards b {
  font-size: 14px;
  font-weight: 900
}

.money-cards strong {
  font: 900 22px/1 Arial Black, Inter, sans-serif
}

.money-cards svg {
  width: 24px
}

.active-challenge {
  border-left: 4px solid var(--gold);
  background: radial-gradient(circle at 80% 20%, #c9a36a24, #0000 30%), linear-gradient(145deg, #1d1913, #0f1413);
  border-radius: 6px 22px 22px 6px;
  grid-template-columns: 150px 1fr 190px;
  min-height: 300px;
  padding: 30px 34px
}

.challenge-number {
  border-width: 10px;
  width: 126px;
  height: 126px
}

.challenge-number b {
  font: 950 42px/1 Arial Black, Inter, sans-serif
}

.challenge-number small {
  font-size: 11px;
  bottom: 24px
}

.active-challenge h2 {
  letter-spacing: -.045em;
  font: 950 34px/1.05 Arial Black, Inter, sans-serif
}

.active-challenge>div:last-child {
  height: 160px
}

.active-challenge>div:last-child svg {
  width: 37px
}

.active-challenge>div:last-child b {
  font-size: 13px
}

.available-list {
  background: 0 0;
  border: 0;
  flex-direction: column;
  gap: 8px;
  display: flex;
  overflow: visible
}

.available-list>header {
  border: 1px solid var(--line);
  background: #0d1214;
  border-radius: 12px
}

.available-list>header h2 {
  font: 900 18px/1 Arial Black, Inter, sans-serif
}

.available-list>article {
  background: #111719;
  border-radius: 13px;
  min-height: 94px;
  padding: 0 20px;
  border: 1px solid var(--line) !important
}

.available-list>article>svg {
  width: 23px
}

.available-list h3,
.available-list [data-slot=button] {
  font-weight: 900
}

.reward-summary {
  border-left: 4px solid var(--gold);
  background: radial-gradient(circle at 82% 20%, #c9a36a2e, #0000 31%), linear-gradient(145deg, #211a11, #101414);
  border-radius: 6px 22px 22px 6px;
  min-height: 210px;
  padding: 34px
}

.reward-summary>svg {
  width: 65px;
  height: 65px
}

.reward-summary h2 {
  letter-spacing: -.05em;
  font: 950 43px/1 Arial Black, Inter, sans-serif
}

.reward-grid {
  grid-template-columns: 1.15fr 1.15fr .85fr .85fr;
  gap: 12px
}

.reward-grid article {
  border-top: 3px solid #56615c;
  border-radius: 16px;
  min-height: 300px
}

.reward-grid article.earned {
  border-top-color: var(--green)
}

.reward-grid article.progress {
  border-top-color: var(--gold)
}

.reward-grid article>div {
  height: 105px
}

.reward-grid h3 {
  font-family: Arial Black, Inter, sans-serif;
  font-weight: 900
}

.reward-grid article.earned>div {
  background: #46d6a017
}

.reward-grid article.progress>div {
  background: #c9a36a17
}

.level-current {
  border-left: 4px solid var(--gold);
  border-radius: 6px 22px 22px 6px;
  min-height: 250px;
  padding: 35px 38px
}

.level-current h1 {
  letter-spacing: -.065em;
  font: 950 62px/.95 Arial Black, Inter, sans-serif
}

.level-current>svg {
  width: 82px;
  height: 82px
}

.level-list {
  background: 0 0;
  border: 0;
  flex-direction: column;
  gap: 8px;
  display: flex;
  overflow: visible
}

.level-list>article {
  background: #101618;
  border-radius: 14px;
  min-height: 105px;
  padding: 0 24px;
  position: relative;
  border: 1px solid var(--line) !important
}

.level-list>article:before {
  content: "";
  background: #303937;
  width: 2px;
  height: 10px;
  position: absolute;
  top: 100%;
  left: 45px
}

.level-list>article:last-child:before {
  display: none
}

.level-list article.current {
  background: linear-gradient(90deg, #46d6a01f, #101618);
  border-color: #46d6a052 !important;
  border-left: 4px solid var(--green) !important
}

.level-list h2 {
  font-family: Arial Black, Inter, sans-serif;
  font-weight: 900
}

.level-list article.current h2 {
  font-size: 23px
}

.level-list article.current>div {
  box-shadow: 0 0 24px #46d6a029
}

.profile-card {
  background: radial-gradient(circle at 78% 20%, #78a7ff1f, #0000 30%), linear-gradient(145deg, #151b25, #101517);
  border-left: 4px solid #78a7ff;
  border-radius: 6px 20px 20px 6px;
  min-height: 190px;
  padding: 30px
}

.big-avatar {
  border-radius: 22px;
  width: 92px;
  height: 92px;
  font: 950 25px/1 Arial Black, Inter, sans-serif
}

.profile-card h2 {
  letter-spacing: -.045em;
  font: 950 36px/1 Arial Black, Inter, sans-serif
}

.profile-links {
  background: 0 0;
  border: 0;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  overflow: visible
}

.profile-links button {
  background: #111719;
  border-radius: 14px;
  min-height: 112px;
  padding: 0 22px;
  border: 1px solid var(--line) !important
}

.profile-links button:hover {
  background: linear-gradient(135deg, #78a7ff14, #151b1e);
  border-color: #78a7ff47 !important
}

.profile-links b {
  font-size: 17px;
  font-weight: 900
}

.profile-links svg {
  color: #78a7ff
}

.more-grid {
  gap: 12px
}

.more-grid button {
  border-top: 3px solid #46d6a073;
  border-radius: 14px;
  height: 110px;
  font-weight: 900
}

@media (width<=1250px) {
  .next-actions {
    grid-template-rows: auto auto;
    grid-template-columns: 1.25fr 1fr
  }

  .next-signal {
    grid-area: 1/1/3;
    min-height: 600px
  }

  .next-lesson {
    grid-area: 1/2
  }

  .next-level {
    grid-area: 2/2
  }

  .signal-facts span:last-child {
    display: none
  }

  .reward-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (width<=900px) {
  .next-actions {
    grid-template-rows: auto;
    grid-template-columns: 1fr
  }

  .next-signal,
  .next-lesson,
  .next-level {
    grid-area: auto/1
  }

  .next-signal {
    min-height: 500px
  }

  .learn-layout {
    grid-template-columns: 1fr
  }

  .active-challenge {
    grid-template-columns: 120px 1fr
  }

  .active-challenge>div:last-child {
    border-top: 1px solid #c9a36a29;
    border-left: 0;
    grid-column: 1/3
  }

  .reward-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (width<=760px) {
  .page-title.simple {
    min-height: 92px
  }

  .page-title.simple h1 {
    font-size: 38px
  }

  .next-signal {
    min-height: 470px
  }

  .signal-main {
    margin: 28px 0 24px !important
  }

  .next-signal h2 {
    font-size: 46px
  }

  .signal-list>article,
  .signal-list>article:first-of-type {
    min-height: 0;
    padding: 18px 15px
  }

  .signal-list>article:first-of-type h3 {
    font-size: 24px
  }

  .learning-summary {
    grid-template-columns: 1fr;
    padding: 22px
  }

  .learning-summary b {
    font-size: 38px
  }

  .lesson-player {
    min-height: 0
  }

  .lesson-info h2 {
    font-size: 31px
  }

  .history-table {
    overflow-x: auto
  }

  .history-table>header,
  .history-table>article {
    min-width: 650px
  }

  .wallet-hero {
    grid-template-columns: 1fr;
    min-height: 430px;
    padding: 26px 23px
  }

  .wallet-hero h1 {
    font-size: 62px
  }

  .money-cards {
    grid-template-columns: 1fr
  }

  .active-challenge {
    grid-template-columns: 92px 1fr;
    padding: 23px 19px
  }

  .challenge-number {
    border-width: 7px;
    width: 88px;
    height: 88px
  }

  .challenge-number b {
    font-size: 30px
  }

  .active-challenge h2 {
    font-size: 27px
  }

  .available-list>article {
    grid-template-columns: 30px 1fr;
    padding: 17px
  }

  .reward-summary {
    min-height: 180px;
    padding: 25px
  }

  .reward-summary h2 {
    font-size: 36px
  }

  .reward-grid {
    grid-template-columns: 1fr
  }

  .level-current {
    min-height: 210px;
    padding: 27px 23px
  }

  .level-current h1 {
    font-size: 48px
  }

  .level-current>svg {
    width: 58px
  }

  .profile-card {
    grid-template-columns: 70px 1fr;
    padding: 24px
  }

  .big-avatar {
    width: 68px;
    height: 68px
  }

  .profile-card h2 {
    font-size: 28px
  }

  .profile-links {
    grid-template-columns: 1fr
  }
}

:root {
  --font-ui: "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Segoe UI Variable Display", "Avenir Next", "Segoe UI", Inter, sans-serif;
  --font-data: "Cascadia Mono", "SFMono-Regular", Consolas, monospace
}

body,
button,
input {
  font-family: var(--font-ui);
  letter-spacing: 0;
  font-weight: 480
}

.logo b,
.page-title h1,
.page-title.simple h1,
.next-signal h2,
.next-signal strong,
.next-lesson h2,
.next-level h2,
.balance-card b,
.all-sections h2,
.signal-list h3,
.learning-summary b,
.lesson-info h2,
.wallet-hero h1,
.wallet-progress h2,
.money-cards strong,
.active-challenge h2,
.challenge-number b,
.reward-summary h2,
.reward-grid h3,
.level-current h1,
.level-list h2,
.profile-card h2,
.big-avatar {
  font-family: var(--font-display) !important;
  font-weight: 760 !important
}

.page-title h1,
.page-title.simple h1 {
  letter-spacing: -.045em
}

.next-signal h2,
.wallet-hero h1,
.level-current h1 {
  letter-spacing: -.055em
}

.page-title>div:first-child>span,
.next-signal header,
.next-signal small,
.signal-facts,
.next-lesson>span,
.next-level>span,
.all-sections header span,
.balance-card small {
  font-family: var(--font-data)
}

.sidebar {
  padding-bottom: 18px
}

.sidebar nav {
  scrollbar-width: none;
  gap: 18px;
  margin-top: 24px;
  overflow-y: auto
}

.nav-group {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.sidebar nav button {
  height: 42px;
  font-size: 13px
}

.side-level {
  margin-top: 16px
}

.demo-switch button {
  font-weight: 650
}

.demo-switch button.active {
  font-weight: 800
}

.live-page .page-title:after {
  background: var(--green)
}

.session-steps {
  border: 1px solid var(--line);
  background: #0f1416;
  border-radius: 14px;
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  overflow: hidden
}

.session-steps>span {
  border-right: 1px solid var(--line);
  color: #66736d;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 0 17px;
  display: flex
}

.session-steps>span:last-child {
  border: 0
}

.session-steps i {
  width: 28px;
  height: 28px;
  font-style: normal;
  font: 750 11px/1 var(--font-data);
  border: 1px solid #35403b;
  border-radius: 50%;
  place-items: center;
  display: grid
}

.session-steps svg {
  width: 13px
}

.session-steps b {
  font-size: 13px
}

.session-steps .active {
  color: #eef3f0;
  background: #46d6a00b
}

.session-steps .active i {
  background: var(--green);
  border-color: var(--green);
  color: #07120e
}

.war-room {
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .72fr);
  gap: 15px;
  display: grid
}

.war-signal {
  border: 1px solid #46d6a047;
  border-left: 4px solid var(--green);
  background: radial-gradient(circle at 78% 18%, #46d6a026, #0000 31%), linear-gradient(145deg, #14211c, #0b1111);
  border-radius: 6px 22px 22px 6px;
  flex-direction: column;
  min-height: 590px;
  padding: 28px;
  display: flex
}

.war-signal>header {
  font: 750 11px/1 var(--font-data);
  letter-spacing: .08em;
  color: #a6b3ad;
  border-bottom: 1px solid #ffffff1a;
  justify-content: space-between;
  padding-bottom: 18px;
  display: flex
}

.war-signal>header span {
  align-items: center;
  gap: 8px;
  display: flex
}

.war-signal>header i {
  background: var(--green);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 5px #46d6a01a
}

.war-signal>header b {
  color: #7fe3bc
}

.war-signal>div:nth-child(2) {
  margin: auto 0
}

.war-signal>div:nth-child(2)>small {
  font: 720 11px/1 var(--font-data);
  letter-spacing: .12em;
  color: #93a19a
}

.war-signal h2 {
  font: 760 clamp(50px, 5vw, 78px)/.95 var(--font-display);
  letter-spacing: -.055em;
  margin: 17px 0
}

.war-signal h2 em {
  color: #82918a;
  font-style: normal;
  font-weight: 580
}

.war-signal strong {
  color: var(--green);
  font: 760 28px/1 var(--font-display);
  text-transform: uppercase;
  align-items: center;
  gap: 9px;
  display: flex
}

.war-signal strong svg {
  width: 29px;
  transform: rotate(-45deg)
}

.risk-strip {
  border: 1px solid #ffffff1a;
  border-radius: 13px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 15px;
  display: grid;
  overflow: hidden
}

.risk-strip span {
  border-right: 1px solid #ffffff1a;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
  padding: 13px;
  display: flex
}

.risk-strip span:last-child {
  border: 0
}

.risk-strip small {
  font: 700 9px/1 var(--font-data);
  letter-spacing: .09em;
  color: #708078
}

.risk-strip b {
  margin-top: 7px;
  font-size: 13px
}

.decision-actions {
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
  margin: 0 !important;
  display: grid !important
}

.decision-actions [data-slot=button] {
  height: 54px;
  font-weight: 760
}

.decision-actions [data-slot=button]:first-child {
  background: var(--green);
  color: #07120e
}

.stage-action {
  background: #46d6a00f;
  border: 1px solid #46d6a02e;
  border-radius: 13px;
  grid-template-columns: 35px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  min-height: 76px !important;
  margin: 0 !important;
  display: grid !important
}

.stage-action>svg {
  width: 25px;
  color: var(--green)
}

.stage-action div {
  flex-direction: column;
  display: flex
}

.stage-action b {
  font-size: 14px
}

.stage-action p {
  color: #93a19a;
  margin: 3px 0;
  font-size: 11px
}

.stage-action [data-slot=button] {
  height: 43px;
  font-size: 12px
}

.session-room {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #141a24, #0d1216);
  border-top: 3px solid #78a7ff;
  border-radius: 18px;
  flex-direction: column;
  min-height: 590px;
  display: flex;
  overflow: hidden
}

.session-room>header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  padding: 21px;
  display: flex
}

.session-room>header span {
  font: 750 10px/1 var(--font-data);
  letter-spacing: .1em;
  color: #94a8ff
}

.session-room h3 {
  margin: 7px 0 0;
  font-size: 18px
}

.session-room>header>b {
  color: #8d9a94;
  font-size: 11px
}

.room-feed {
  flex-direction: column;
  gap: 17px;
  padding: 18px;
  display: flex
}

.room-feed p,
.chat-feed p {
  grid-template-columns: 34px 1fr;
  gap: 10px;
  margin: 0;
  display: grid
}

.room-feed p>i,
.chat-feed p>i {
  color: #dce6e1;
  background: #25302c;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
  display: grid
}

.room-feed p>span,
.chat-feed p>span {
  color: #c2cbc6;
  font-size: 12px;
  line-height: 1.45
}

.room-feed p b,
.chat-feed p b {
  color: #fff;
  font-size: 12px;
  display: block
}

.room-feed p small,
.chat-feed p small {
  color: #68756f;
  margin-left: 7px;
  font-size: 10px;
  font-weight: 500
}

.open-community {
  color: #dfe8fa;
  background: #78a7ff12;
  border: 1px solid #78a7ff33;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 46px;
  margin: auto 18px 18px;
  font-size: 13px;
  font-weight: 700;
  display: flex
}

.open-community svg {
  width: 17px
}

.community-page .page-title:after {
  background: #78a7ff;
  box-shadow: 0 0 18px #78a7ff66
}

.community-shell {
  grid-template-columns: 330px 1fr;
  gap: 14px;
  min-height: 630px;
  display: grid
}

.room-list,
.community-chat {
  border: 1px solid var(--line);
  background: #101618;
  border-radius: 17px;
  overflow: hidden
}

.room-list {
  flex-direction: column;
  padding: 10px;
  display: flex
}

.room-list>header {
  height: 50px;
  font: 750 10px/1 var(--font-data);
  letter-spacing: .09em;
  color: #7d8a84;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  display: flex
}

.room-list>header b {
  color: #78a7ff
}

.room-list>button {
  color: #87948e;
  text-align: left;
  background: 0 0;
  border: 1px solid #0000;
  border-radius: 11px;
  grid-template-columns: 37px 1fr 20px;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 8px 10px;
  display: grid
}

.room-list>button>i {
  background: #181f21;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-style: normal;
  display: grid
}

.room-list>button svg {
  width: 18px
}

.room-list>button>span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.room-list>button b {
  color: #dce2df;
  font-size: 14px
}

.room-list>button small {
  font-size: 11px
}

.room-list>button em {
  color: #08101a;
  background: #78a7ff;
  border-radius: 50%;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  display: grid
}

.room-list>button.active {
  color: #a8c3ff;
  background: linear-gradient(90deg, #78a7ff21, #78a7ff06);
  border-color: #78a7ff40
}

.room-list>button.active>i {
  color: #07101a;
  background: #78a7ff
}

.guest-pass {
  background: #c9a36a12;
  border: 1px solid #c9a36a38;
  border-radius: 12px;
  gap: 11px;
  margin-top: auto;
  padding: 15px;
  display: flex
}

.guest-pass>svg {
  width: 22px;
  color: var(--gold)
}

.guest-pass span {
  flex-direction: column;
  display: flex
}

.guest-pass b {
  font-size: 13px
}

.guest-pass small {
  color: #9a8e7c;
  font-size: 11px;
  line-height: 1.4
}

.community-chat {
  flex-direction: column;
  display: flex
}

.community-chat>header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  min-height: 92px;
  padding: 20px 23px;
  display: flex
}

.community-chat>header span {
  font: 750 10px/1 var(--font-data);
  letter-spacing: .1em;
  color: #8ea9ec
}

.community-chat h2 {
  font: 740 23px/1.15 var(--font-display);
  margin: 8px 0 0
}

.community-chat>header>b {
  color: #8c9993;
  font-size: 11px
}

.chat-feed {
  flex-direction: column;
  gap: 19px;
  padding: 22px;
  display: flex;
  overflow: auto
}

.pinned {
  background: #78a7ff0f;
  border: 1px solid #78a7ff2e;
  border-radius: 12px;
  gap: 10px;
  padding: 13px;
  display: flex
}

.pinned>svg {
  color: #78a7ff;
  width: 20px
}

.pinned span {
  flex-direction: column;
  display: flex
}

.pinned b {
  font-size: 12px
}

.pinned small {
  color: #97a7ba;
  margin-top: 3px;
  font-size: 11px
}

.chat-feed p>i {
  background: #1d2630
}

.chat-feed p>span {
  font-size: 13px
}

.chat-feed p b em {
  color: #78a7ff;
  margin-left: 5px;
  font-size: 9px;
  font-style: normal
}

.chat-compose {
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr 48px;
  gap: 9px;
  margin-top: auto;
  padding: 14px;
  display: grid
}

.chat-compose input {
  border: 1px solid var(--line);
  color: #fff;
  background: #0b1012;
  border-radius: 11px;
  outline: none;
  height: 48px;
  padding: 0 15px;
  font-size: 13px
}

.chat-compose input:focus {
  border-color: #78a7ff66
}

.chat-compose [data-slot=button] {
  color: #08101a;
  background: #78a7ff;
  height: 48px
}

.locked-room {
  text-align: center;
  max-width: 360px;
  margin: auto;
  padding: 30px
}

.locked-room>svg {
  width: 45px;
  color: var(--gold)
}

.locked-room h3 {
  font: 750 25px/1.1 var(--font-display)
}

.locked-room p {
  color: #8b9791;
  font-size: 13px
}

.locked-room [data-slot=button] {
  background: var(--gold);
  color: #130f08
}

.signal-rooms {
  border: 1px solid var(--line);
  background: #101618;
  border-radius: 16px;
  padding: 22px
}

.signal-rooms>header span {
  font: 750 10px/1 var(--font-data);
  letter-spacing: .1em;
  color: #7f8b85
}

.signal-rooms h2 {
  font: 740 24px/1 var(--font-display);
  margin: 7px 0 16px
}

.signal-rooms>div {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  display: grid
}

.signal-rooms button {
  border: 1px solid var(--line);
  color: #fff;
  text-align: left;
  background: #131a1c;
  border-radius: 12px;
  grid-template-columns: 15px 1fr 14px;
  align-items: center;
  gap: 9px;
  min-height: 76px;
  padding: 0 14px;
  display: grid
}

.signal-rooms button>i {
  background: #68756f;
  border-radius: 50%;
  width: 8px;
  height: 8px
}

.signal-rooms button>i.live {
  background: var(--green);
  box-shadow: 0 0 0 5px #46d6a017
}

.signal-rooms button>span {
  flex-direction: column;
  display: flex
}

.signal-rooms button b {
  font-size: 13px
}

.signal-rooms button small {
  color: #7e8a84;
  margin-top: 3px;
  font-size: 10px
}

.signal-rooms button>svg {
  width: 14px
}

.signal-rooms button.locked {
  opacity: .58
}

.access-page .page-title:after {
  background: var(--gold)
}

.access-hero {
  border: 1px solid #c9a36a38;
  border-left: 4px solid var(--gold);
  background: radial-gradient(circle at 80% 20%, #c9a36a24, #0000 28%), linear-gradient(145deg, #211a12, #101414);
  border-radius: 6px 20px 20px 6px;
  justify-content: space-between;
  align-items: center;
  min-height: 220px;
  padding: 32px;
  display: flex
}

.access-hero span,
.access-states>header span {
  font: 750 10px/1 var(--font-data);
  letter-spacing: .1em;
  color: #a48b63
}

.access-hero h2 {
  font: 760 44px/1 var(--font-display);
  letter-spacing: -.045em;
  margin: 12px 0
}

.access-hero p {
  color: #a69e91;
  font-size: 14px
}

.access-hero>svg {
  width: 70px;
  color: var(--gold)
}

.subscription-card {
  border: 1px solid #c9a36a38;
  background: #111719;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.subscription-card>header span {
  font: 750 10px/1 var(--font-data);
  letter-spacing: .1em;
  color: #a48b63
}

.subscription-card .sub-note {
  color: #a69e91;
  font-size: 14px
}

.subscription-card .sub-offer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start
}

.subscription-card .sub-price {
  color: #d8cfc0;
  font-size: 15px;
  line-height: 1.5
}

.subscription-card .sub-error {
  color: #e0794f;
  font-size: 13px
}

.subscription-card .sub-line {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.subscription-card .sub-line b {
  font: 760 18px/1.2 var(--font-display);
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.subscription-card .sub-line b>svg {
  width: 18px;
  color: var(--gold)
}

.subscription-card .sub-line small {
  color: #a69e91;
  font-size: 13px;
  line-height: 1.5
}

.subscription-card .sub-rooms {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #17211d;
  border: 1px solid #2f6f4e40;
  color: #c9d6c9 !important
}

.subscription-card .sub-processing {
  display: flex;
  gap: 14px;
  align-items: flex-start
}

.subscription-card .sub-processing>svg {
  width: 22px;
  color: var(--gold);
  flex: none;
  margin-top: 2px
}

.subscription-card .sub-processing b {
  font: 760 17px/1.2 var(--font-display);
  display: block;
  margin-bottom: 4px
}

.subscription-card .sub-processing small {
  color: #a69e91;
  font-size: 13px;
  line-height: 1.5
}

.entitlement-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  display: grid
}

.entitlement-grid article {
  border: 1px solid var(--line);
  background: #111719;
  border-top: 3px solid #58635e;
  border-radius: 15px;
  flex-direction: column;
  min-height: 185px;
  padding: 21px;
  display: flex
}

.entitlement-grid article.active {
  border-top-color: var(--green)
}

.entitlement-grid article:nth-child(2) {
  border-top-color: #78a7ff
}

.entitlement-grid article:nth-child(3) {
  border-top-color: var(--gold)
}

.entitlement-grid article>span {
  font: 750 9px/1 var(--font-data);
  letter-spacing: .1em;
  color: #78857f
}

.entitlement-grid h3 {
  font: 750 25px/1 var(--font-display);
  margin: 22px 0 8px
}

.entitlement-grid p {
  color: #8d9993;
  margin: 0;
  font-size: 12px
}

.entitlement-grid article>b {
  color: #aab4af;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 12px;
  display: flex
}

.entitlement-grid article>b svg {
  width: 16px
}

.access-states {
  border: 1px solid var(--line);
  background: #101618;
  border-radius: 16px;
  padding: 23px
}

.access-states h2 {
  font: 740 25px/1 var(--font-display);
  margin: 8px 0 18px
}

.access-states>div {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  display: grid
}

.access-states article {
  border: 1px solid var(--line);
  background: #131a1c;
  border-radius: 12px;
  gap: 10px;
  min-height: 102px;
  padding: 14px;
  display: flex
}

.access-states article>i {
  background: #1b2224;
  border-radius: 9px;
  place-items: center;
  width: 31px;
  height: 31px;
  display: grid
}

.access-states article>i svg {
  width: 16px
}

.access-states article>i.ok {
  color: var(--green)
}

.access-states article>i.wait {
  color: #78a7ff
}

.access-states article>i.grace {
  color: var(--gold)
}

.access-states article>span {
  flex-direction: column;
  display: flex
}

.access-states article b {
  font-size: 13px
}

.access-states article small {
  color: #7e8a84;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.4
}

.recovery-card,
.quiet-hours {
  border: 1px solid var(--line);
  background: #111719;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 17px 20px;
  display: flex
}

.recovery-card>div,
.quiet-hours>span {
  align-items: center;
  gap: 13px;
  display: flex
}

.recovery-card>div>svg,
.quiet-hours>svg {
  color: #78a7ff;
  width: 26px
}

.recovery-card span,
.quiet-hours span {
  flex-direction: column;
  display: flex
}

.recovery-card b,
.quiet-hours b {
  font-size: 14px
}

.recovery-card small,
.quiet-hours small {
  color: #84908a;
  margin-top: 4px;
  font-size: 11px
}

.recovery-card [data-slot=button] {
  font-weight: 700
}

.notifications-page .page-title:after {
  background: #78a7ff
}

.notification-summary {
  background: radial-gradient(circle at 78% 15%, #78a7ff21, #0000 30%), linear-gradient(145deg, #171d29, #101517);
  border: 1px solid #78a7ff33;
  border-left: 4px solid #78a7ff;
  border-radius: 6px 19px 19px 6px;
  align-items: center;
  gap: 24px;
  min-height: 180px;
  padding: 29px;
  display: flex
}

.notification-summary>svg {
  color: #78a7ff;
  width: 50px
}

.notification-summary span {
  font: 750 10px/1 var(--font-data);
  letter-spacing: .1em;
  color: #8eabec
}

.notification-summary h2 {
  font: 750 34px/1 var(--font-display);
  margin: 10px 0
}

.notification-summary p {
  color: #91a09a;
  font-size: 13px
}

.channel-matrix {
  border: 1px solid var(--line);
  background: #101618;
  border-radius: 16px;
  overflow: hidden
}

.channel-matrix>header {
  border-bottom: 1px solid var(--line);
  height: 54px;
  font: 750 10px/1 var(--font-data);
  letter-spacing: .09em;
  color: #7b8882;
  justify-content: space-between;
  align-items: center;
  padding: 0 19px;
  display: flex
}

.channel-matrix>header>div {
  gap: 34px;
  display: flex
}

.channel-matrix>article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 35px 1fr 52px 85px;
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding: 0 19px;
  display: grid
}

.channel-matrix>article:last-child {
  border: 0
}

.channel-matrix>article>svg {
  color: #78a7ff;
  width: 21px
}

.channel-matrix>article>span {
  flex-direction: column;
  display: flex
}

.channel-matrix article b {
  font-size: 14px
}

.channel-matrix article small {
  color: #7f8c86;
  margin-top: 4px;
  font-size: 11px
}

.channel-matrix article>button {
  background: #29312f;
  border: 0;
  border-radius: 999px;
  width: 42px;
  height: 24px;
  padding: 3px;
  position: relative
}

.channel-matrix article>button i {
  background: #738079;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: transform .2s;
  display: block
}

.channel-matrix article>button.on {
  background: #46d6a040
}

.channel-matrix article>button.on i {
  background: var(--green);
  transform: translate(18px)
}

.channel-matrix article>em {
  color: #87938d;
  font-size: 11px;
  font-style: normal
}

.quiet-hours>svg {
  flex: none
}

.quiet-hours>span {
  align-items: flex-start;
  margin-right: auto
}

.admin-page .page-title:after {
  background: #ff7d74;
  box-shadow: 0 0 18px #ff7d7459
}

.admin-status {
  background: linear-gradient(135deg, #ff7d7412, #111719);
  border: 1px solid #ff7d742e;
  border-left: 4px solid #ff7d74;
  border-radius: 6px 16px 16px 6px;
  justify-content: space-between;
  align-items: center;
  min-height: 112px;
  padding: 23px;
  display: flex
}

.admin-status span,
.admin-workbench header span {
  font: 750 10px/1 var(--font-data);
  letter-spacing: .1em;
  color: #d88c86
}

.admin-status h2 {
  font: 740 27px/1 var(--font-display);
  margin: 8px 0
}

.admin-status>b {
  color: #9eaaa4;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex
}

.admin-status>b i {
  background: var(--green);
  border-radius: 50%;
  width: 8px;
  height: 8px
}

.admin-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  display: grid
}

.admin-grid button {
  border: 1px solid var(--line);
  color: #fff;
  text-align: left;
  background: #111719;
  border-radius: 13px;
  grid-template-columns: 34px 1fr 15px;
  align-items: center;
  gap: 10px;
  min-height: 102px;
  padding: 0 17px;
  display: grid
}

.admin-grid button>svg:first-child {
  color: #ff8c83;
  width: 22px
}

.admin-grid button>svg:last-child {
  color: #59655f;
  width: 14px
}

.admin-grid button>span {
  flex-direction: column;
  display: flex
}

.admin-grid small {
  color: #7f8b85;
  margin-top: 4px;
  font-size: 10px
}

.admin-workbench {
  grid-template-columns: 1.4fr .6fr;
  gap: 12px;
  display: grid
}

.admin-workbench>article,
.admin-workbench>aside {
  border: 1px solid var(--line);
  background: #101618;
  border-radius: 16px;
  padding: 23px
}

.admin-workbench>article>header {
  justify-content: space-between;
  align-items: center;
  display: flex
}

.admin-workbench h2 {
  font: 750 27px/1 var(--font-display);
  margin: 8px 0
}

.admin-workbench header svg {
  color: #ff8c83;
  width: 25px
}

.admin-fields {
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 19px 0;
  display: grid
}

.admin-fields label {
  border: 1px solid var(--line);
  color: #78857f;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  min-height: 70px;
  padding: 12px;
  font-size: 10px;
  display: flex
}

.admin-fields label b {
  color: #e6ece8;
  margin-top: 6px;
  font-size: 13px
}

.admin-check {
  background: #46d6a00d;
  border: 1px solid #46d6a029;
  border-radius: 11px;
  gap: 10px;
  padding: 13px;
  display: flex
}

.admin-check>svg {
  width: 22px;
  color: var(--green)
}

.admin-check span {
  flex-direction: column;
  display: flex
}

.admin-check b {
  font-size: 12px
}

.admin-check small {
  color: #7f8d86;
  margin-top: 3px;
  font-size: 10px
}

.admin-workbench>article>[data-slot=button] {
  color: #150907;
  background: #ff8c83;
  width: 100%;
  height: 48px;
  margin-top: 14px;
  font-weight: 750
}

.admin-workbench>aside>header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  display: flex
}

.admin-workbench>aside>header b {
  font-size: 26px
}

.admin-workbench>aside>button {
  border: 0;
  border-top: 1px solid var(--line);
  color: #cbd3cf;
  text-align: left;
  background: 0 0;
  grid-template-columns: 9px 1fr 14px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 62px;
  padding: 0 4px;
  font-size: 12px;
  display: grid
}

.admin-workbench>aside>button i {
  border-radius: 50%;
  width: 7px;
  height: 7px
}

.admin-workbench i.red {
  background: #ff7d74
}

.admin-workbench i.gold {
  background: var(--gold)
}

.admin-workbench i.blue {
  background: #78a7ff
}

.admin-workbench>aside>button svg {
  width: 13px
}

@media (width<=1100px) {
  .war-room {
    grid-template-columns: 1fr
  }

  .session-room {
    min-height: 480px
  }

  .community-shell {
    grid-template-columns: 280px 1fr
  }

  .access-states>div,
  .admin-grid {
    grid-template-columns: 1fr 1fr
  }

  .admin-workbench,
  .signal-rooms>div {
    grid-template-columns: 1fr
  }
}

@media (width<=760px) {
  .demo-switch button:last-child {
    display: none
  }

  .session-steps>span {
    justify-content: center;
    min-height: 58px;
    padding: 0
  }

  .session-steps b {
    display: none
  }

  .war-signal {
    min-height: 540px;
    padding: 21px
  }

  .war-signal>header {
    gap: 10px;
    font-size: 9px
  }

  .war-signal>header b {
    text-align: right
  }

  .war-signal h2 {
    font-size: 49px
  }

  .risk-strip {
    grid-template-columns: 1fr 1fr
  }

  .risk-strip span:nth-child(n+3) {
    display: none
  }

  .decision-actions {
    grid-template-columns: 1fr !important
  }

  .stage-action {
    grid-template-columns: 30px 1fr !important
  }

  .stage-action [data-slot=button] {
    grid-column: 1/3;
    width: 100%
  }

  .session-room {
    min-height: 450px
  }

  .community-shell {
    grid-template-columns: 1fr
  }

  .room-list {
    max-height: none
  }

  .community-chat {
    min-height: 520px
  }

  .signal-rooms {
    padding: 17px
  }

  .entitlement-grid,
  .access-states>div {
    grid-template-columns: 1fr
  }

  .recovery-card,
  .quiet-hours {
    flex-direction: column;
    align-items: flex-start
  }

  .recovery-card [data-slot=button],
  .quiet-hours [data-slot=button] {
    width: 100%
  }

  .notification-summary {
    align-items: flex-start;
    padding: 23px
  }

  .notification-summary h2 {
    font-size: 29px
  }

  .channel-matrix>header>div {
    display: none
  }

  .channel-matrix>article {
    grid-template-columns: 30px 1fr 44px;
    padding: 13px
  }

  .channel-matrix article>em {
    display: none
  }

  .admin-grid {
    grid-template-columns: 1fr
  }

  .admin-fields {
    grid-template-columns: 1fr 1fr
  }

  .nav-group>small {
    display: none
  }
}

:root {
  --ink: #070a0a;
  --green: #55f2b2;
  --green2: #55f2b2;
  --mint: #10251d;
  --paper: #080b0c;
  --card: #111617c7;
  --line: #e6f1eb1b;
  --muted: #84918c;
  --soft: #13191a;
  --gold: #e3bc78;
  --red: #ff786f;
  --background: #080b0c;
  --foreground: #f4f7f5;
  --card-foreground: #f4f7f5;
  --primary: #55f2b2;
  --primary-foreground: #06110d;
  --secondary: #151b1c;
  --secondary-foreground: #eef3f0;
  --border: var(--line);
  --input: var(--line);
  --ring: #55f2b2;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Bahnschrift", "Segoe UI Variable Display", "Avenir Next", "Segoe UI", sans-serif;
  --font-data: "Cascadia Mono", "SFMono-Regular", Consolas, monospace
}

html {
  background: #080b0c
}

body {
  color: #f4f7f5;
  font-family: var(--font-ui);
  background: #080b0c;
  font-size: 15px
}

body::selection {
  color: #05100c;
  background: #55f2b2
}

h1,
h2,
h3,
b,
strong {
  font-family: var(--font-display)
}

.app,
.guest {
  color: #f4f7f5;
  isolation: isolate;
  background: #080b0c;
  overflow-x: hidden
}

.app {
  background: radial-gradient(circle at 72% -10%, #4aecae13, #0000 31%), #080b0c
}

.main,
.guest-main {
  z-index: 2;
  position: relative
}

.main>main {
  max-width: 1420px;
  padding: 50px clamp(28px, 4.4vw, 76px) 110px
}

.page {
  gap: 28px
}

.market-atmosphere {
  z-index: 0;
  opacity: .16;
  filter: blur(.15px);
  pointer-events: none;
  width: min(920px, 67vw);
  height: 620px;
  position: fixed;
  top: -14vh;
  right: -11vw;
  -webkit-mask-image: linear-gradient(150deg, #000 0%, #0000 75%);
  mask-image: linear-gradient(150deg, #000 0%, #0000 75%)
}

.market-atmosphere .market-canvas {
  width: 100%;
  height: 100%
}

.market-code {
  font: 700 10px/1 var(--font-data);
  letter-spacing: .28em;
  color: #82ffd0;
  position: absolute;
  top: 14%;
  right: 10%
}

.market-canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  overflow: visible
}

.chart-grid {
  fill: none;
  stroke: #d1e6db13;
  stroke-width: 1px
}

.chart-area {
  fill: url(#marketArea)
}

.chart-line-glow {
  fill: none;
  stroke: url(#marketLine);
  stroke-width: 3px;
  filter: url(#marketGlow);
  stroke-dasharray: 10 6;
  animation: 9s linear infinite marketFlow
}

.candles line {
  stroke-width: 2px
}

.candles rect {
  stroke-width: 0
}

.candles .up line {
  stroke: #55f2b2
}

.candles .up rect {
  fill: #55f2b2
}

.candles .down line {
  stroke: #ff786f
}

.candles .down rect {
  fill: #ff786f
}

.chart-pulse {
  fill: #e3bc78;
  filter: url(#marketGlow);
  animation: 1.8s ease-in-out infinite pulse
}

@keyframes marketFlow {
  to {
    stroke-dashoffset: -160px
  }
}

.sidebar {
  background: linear-gradient(#070a0afc, #080b0cf6);
  border-right: 1px solid #ffffff13;
  width: 250px;
  padding: 30px 20px 22px;
  box-shadow: 28px 0 80px #00000040
}

.main {
  margin-left: 250px
}

.logo>span {
  border-radius: 4px 14px 14px;
  width: 42px;
  height: 42px;
  box-shadow: 0 0 32px #55f2b229;
  color: #06110d !important;
  background: linear-gradient(135deg, #55f2b2, #8df8d0) !important
}

.logo b {
  font: 760 13px/1 var(--font-display);
  letter-spacing: .1em;
  color: #f7faf8
}

.logo small {
  font: 500 8px/1.2 var(--font-ui);
  color: #66746e
}

.sidebar nav {
  gap: 20px;
  margin-top: 38px
}

.nav-group>small {
  color: #52605a;
  font: 650 9px/1 var(--font-data);
  letter-spacing: .16em;
  padding: 0 13px 6px
}

.sidebar nav button {
  color: #74817b;
  border-radius: 4px 12px 12px 4px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  transition: all .2s
}

.sidebar nav button:hover {
  color: #e9efec;
  transform: translate(3px)
}

.sidebar nav button.active {
  color: #fff;
  box-shadow: none;
  background: linear-gradient(90deg, #55f2b222, #55f2b204);
  border-left: 2px solid #55f2b2
}

.side-level {
  background: linear-gradient(145deg, #e3bc7817, #ffffff05);
  border: 1px solid #e3bc7833;
  border-radius: 4px 16px 16px 4px;
  padding: 17px
}

.side-level small {
  font: 650 8px var(--font-data);
  letter-spacing: .12em;
  color: #9f8b68
}

.side-level>b {
  color: #f2d7a6;
  font-size: 22px
}

.side-level button {
  color: #e3bc78;
  font-size: 10px
}

.app-head {
  -webkit-backdrop-filter: blur(24px)saturate(130%);
  backdrop-filter: blur(24px)saturate(130%);
  background: #080b0cb8;
  border-color: #ffffff13;
  height: 78px;
  padding: 0 clamp(28px, 4.4vw, 76px)
}

.demo-switch {
  background: #ffffff0b;
  border: 1px solid #ffffff12;
  border-radius: 12px
}

.demo-switch>span {
  color: #69766f;
  font-size: 9px
}

.demo-switch button {
  color: #738078;
  font-size: 10px
}

.demo-switch button.active {
  color: #08110d;
  background: #eaf3ee;
  box-shadow: 0 6px 18px #00000038
}

.notify,
.avatar {
  color: #eef4f1;
  background: #101617;
  border-color: #ffffff1c
}

.avatar {
  color: #06100c;
  background: linear-gradient(135deg, #55f2b2, #809fff)
}

.mobile-nav {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: #080b0ceb;
  border-top-color: #ffffff1a
}

.page-title {
  border-bottom: 1px solid #ffffff14;
  align-items: center;
  min-height: 150px;
  padding: 22px 0
}

.page-title:after {
  display: none
}

.page-title>div:first-child {
  z-index: 2;
  position: relative
}

.page-title>div:first-child>span {
  font: 650 10px/1 var(--font-data);
  letter-spacing: .17em;
  color: #55f2b2
}

.page-title h1,
.page-title.simple h1 {
  font: 690 clamp(42px, 4vw, 66px)/.92 var(--font-display);
  letter-spacing: -.055em;
  color: #f8fbf9;
  margin: 15px 0 10px
}

.page-title p {
  color: #87938e;
  max-width: 650px;
  font-size: 14px;
  line-height: 1.5
}

.page-title h1 strong {
  color: #55f2b2
}

.title-market {
  opacity: .85;
  width: 390px;
  height: 125px;
  position: relative;
  overflow: hidden
}

.title-market:after {
  content: "";
  background: linear-gradient(90deg, #0000, #55f2b2, #0000);
  height: 1px;
  position: absolute;
  inset: auto 0 0
}

.title-market .market-canvas {
  opacity: .7
}

.title-market b {
  font: 650 9px/1 var(--font-data);
  letter-spacing: .14em;
  color: #93a49d;
  position: absolute;
  top: 5px;
  right: 4px
}

.balance-card {
  background: linear-gradient(135deg, #fff1, #ffffff06);
  border-color: #ffffff1f;
  border-radius: 4px 16px 16px 4px;
  min-width: 210px;
  padding: 16px 18px;
  box-shadow: 0 22px 50px #00000047
}

.balance-card small {
  color: #819089;
  font-size: 9px
}

.balance-card b {
  color: #fff;
  font-size: 30px
}

.balance-card button {
  color: #55f2b2;
  font-size: 9px
}

.next-signal,
.war-signal,
.wallet-hero,
.level-current,
.access-hero,
.notification-summary,
.admin-status,
.reward-summary,
.active-challenge {
  box-shadow: 0 35px 100px #00000052, inset 0 1px #ffffff0b
}

.next-signal {
  background: radial-gradient(circle at 82% 28%, #55f2b230, #0000 26%), linear-gradient(145deg, #12241d, #09100e 58%, #070a0b);
  border: 1px solid #55f2b24d;
  border-left: 3px solid #55f2b2;
  border-radius: 4px 28px 28px 4px;
  min-height: 690px;
  padding: 36px;
  position: relative;
  overflow: hidden
}

.next-signal:before {
  content: "LIVE";
  font: 700 clamp(90px, 11vw, 170px)/.75 var(--font-display);
  letter-spacing: -.09em;
  color: #ffffff07;
  position: absolute;
  top: 18%;
  right: 4%
}

.next-signal:after {
  content: "";
  border: 1px solid #55f2b221;
  border-radius: 50%;
  width: 560px;
  height: 560px;
  position: absolute;
  bottom: -260px;
  right: -180px;
  box-shadow: 0 0 0 90px #55f2b205, 0 0 0 180px #55f2b203
}

.next-signal header,
.signal-main,
.signal-facts,
.next-signal>[data-slot=button] {
  z-index: 2;
  position: relative
}

.next-signal h2 {
  font: 690 clamp(60px, 6.3vw, 94px)/.88 var(--font-display);
  letter-spacing: -.07em
}

.next-signal h2 em {
  color: #819088
}

.next-signal strong {
  color: #55f2b2;
  font-size: 32px
}

.next-signal>[data-slot=button] {
  color: #06110d;
  background: #55f2b2;
  border-radius: 4px 14px 14px 4px;
  height: 64px;
  font-size: 15px
}

.next-lesson,
.next-level {
  background: #0f1416db;
  border-color: #ffffff1c;
  border-radius: 20px;
  box-shadow: 0 22px 60px #00000038
}

.next-lesson {
  background: radial-gradient(circle at 90% 0, #8097ff29, #0000 40%), #111522;
  border-top: 2px solid #8da2ff
}

.next-level {
  background: radial-gradient(circle at 80% 10%, #e3bc7829, #0000 45%), #17130f;
  border-top: 2px solid #e3bc78
}

.all-sections {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #0f1415b3;
  border-left: 2px solid #ffffff2e;
  border-radius: 4px 22px 22px 4px
}

.all-sections h2 {
  font-size: 32px
}

.all-sections>div>button {
  color: #e9efec
}

.all-sections>div>button:hover {
  background: linear-gradient(90deg, #55f2b212, #0000)
}

.all-sections button b {
  font-size: 15px
}

.all-sections button small {
  font-size: 11px
}

.home-challenge {
  background: linear-gradient(100deg, #e3bc781f, #111515d6);
  border-color: #e3bc7833 #e3bc7833 #e3bc7833 #e3bc78;
  border-left-style: solid;
  border-left-width: 3px;
  border-radius: 4px 18px 18px 4px
}

.simple-tabs button,
.history-tabs button {
  color: #84908a;
  background: #ffffff09;
  border-color: #ffffff1a;
  border-radius: 999px;
  height: 42px;
  font-size: 11px
}

.simple-tabs button.active,
.history-tabs button.active {
  color: #07100c;
  background: #eef5f1;
  border-color: #eef5f1
}

.signal-list {
  background: 0 0;
  border: 0;
  border-radius: 0
}

.signal-list>header {
  color: #8b9892;
  font: 600 10px var(--font-data);
  border: 0;
  border-bottom: 1px solid #ffffff1f;
  padding: 0 4px
}

.signal-list>article {
  background: linear-gradient(90deg, #ffffff05, #0000);
  border-bottom: 1px solid #ffffff18;
  grid-template-columns: 100px 1fr 150px 160px;
  min-height: 116px;
  padding: 0 20px;
  transition: background .2s, transform .2s;
  position: relative
}

.signal-list>article:hover {
  background: linear-gradient(90deg, #55f2b212, #55f2b203);
  transform: translate(4px)
}

.signal-list article.locked {
  color: #64716a;
  background: #ffffff05
}

.signal-list h3 {
  font-size: 22px
}

.signal-list article small,
.signal-list article p,
.signal-status span {
  font-size: 10px
}

.signal-list article>strong {
  color: #55f2b2;
  font-size: 15px
}

.signal-list article>[data-slot=button] {
  height: 42px;
  font-size: 10px
}

.explain-card {
  color: #dfe9e4;
  background: #55f2b20f;
  border-color: #55f2b22b;
  border-radius: 4px 14px 14px 4px
}

.explain-card p {
  color: #819088;
  font-size: 11px
}

.learning-summary {
  background: linear-gradient(100deg, #8097ff1f, #101517c7);
  border-color: #8097ff29;
  border-left-style: solid;
  border-left-width: 3px;
  border-radius: 4px 18px 18px 4px;
  padding: 22px 26px
}

.learning-summary b {
  font-size: 32px
}

.learning-summary p,
.learning-summary>span {
  font-size: 10px
}

.lesson-list,
.lesson-player,
.free-strategies {
  background: #0e1314cc;
  border-color: #ffffff1a
}

.lesson-list {
  border-radius: 4px 18px 18px 4px
}

.lesson-list button {
  color: #87938d
}

.lesson-list button.selected {
  color: #f5f8f6;
  background: linear-gradient(90deg, #55f2b21c, #0000);
  border-color: #55f2b238
}

.lesson-list button b {
  font-size: 11px
}

.lesson-player {
  border-radius: 20px;
  min-height: 480px;
  box-shadow: 0 35px 100px #00000052
}

.video {
  background: radial-gradient(circle at 50% 45%, #55f2b21f, #0000 35%), repeating-linear-gradient(0deg, #0000 0 59px, #ffffff06 60px), #070b0b
}

.video:before {
  content: "AMIR / METHOD";
  font: 650 10px var(--font-data);
  letter-spacing: .22em;
  color: #ffffff1f;
  position: absolute;
  left: -28px;
  transform: rotate(-90deg)
}

.lesson-info {
  padding: 42px
}

.lesson-info h2 {
  font-size: 40px
}

.lesson-info>p {
  font-size: 13px
}

.free-strategies {
  border-radius: 18px;
  padding: 25px
}

.free-strategies article {
  background: linear-gradient(145deg, #ffffff0a, #ffffff03);
  border-color: #ffffff17;
  min-height: 160px
}

.free-strategies h3 {
  font-size: 14px
}

.wallet-hero {
  background: radial-gradient(circle at 72% 25%, #e3bc7833, #0000 30%), linear-gradient(140deg, #211a10, #0c1010 65%);
  border-left: 3px solid #e3bc78;
  border-radius: 4px 26px 26px 4px;
  min-height: 350px
}

.wallet-hero h1 {
  color: #f6deb2;
  font-size: clamp(68px, 8vw, 118px)
}

.wallet-progress {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #070a0a8c;
  border-color: #e3bc782e
}

.money-cards article {
  background: #101516b8;
  border-color: #ffffff1a;
  border-radius: 4px 15px 15px 4px
}

.money-cards strong {
  font-size: 22px
}

.level-current {
  background: radial-gradient(circle at 82% 35%, #e3bc7838, #0000 27%), linear-gradient(140deg, #241a0f, #0d1110);
  border-color: #e3bc7838 #e3bc7838 #e3bc7838 #e3bc78;
  border-left-style: solid;
  border-left-width: 3px;
  border-radius: 4px 26px 26px 4px;
  min-height: 300px
}

.level-current h1 {
  color: #f2d59d;
  font-size: clamp(65px, 8vw, 112px)
}

.level-list {
  background: 0 0;
  border: 0;
  border-radius: 0
}

.level-list article {
  background: linear-gradient(90deg, #ffffff06, #0000);
  border-bottom: 1px solid #ffffff1a;
  min-height: 120px
}

.level-list article.current {
  background: linear-gradient(90deg, #e3bc7821, #0000);
  border-left: 2px solid #e3bc78
}

.level-list h2 {
  font-size: 25px
}

.active-challenge {
  background: radial-gradient(circle at 16%, #e3bc782e, #0000 24%), linear-gradient(135deg, #1d1710, #101414);
  border-left: 3px solid #e3bc78;
  border-radius: 4px 24px 24px 4px;
  min-height: 320px
}

.challenge-number {
  border-color: #e3bc78 #e3bc7833 #e3bc7833;
  width: 150px;
  height: 150px;
  box-shadow: 0 0 50px #e3bc7814
}

.challenge-number b {
  font-size: 58px
}

.available-list {
  background: 0 0;
  border: 0;
  border-radius: 0
}

.available-list>article {
  border-bottom: 1px solid #ffffff1a;
  min-height: 105px
}

.reward-summary {
  background: radial-gradient(circle at 15%, #e3bc782e, #0000 24%), #15120e;
  border-left: 3px solid #e3bc78;
  border-radius: 4px 24px 24px 4px;
  min-height: 250px
}

.reward-summary svg {
  color: #e3bc78;
  width: 70px
}

.reward-summary h2 {
  font-size: 48px
}

.reward-grid article {
  background: linear-gradient(145deg, #ffffff0d, #ffffff03);
  border-color: #ffffff1a;
  border-radius: 4px 20px 20px 4px;
  min-height: 260px
}

.reward-grid article.earned {
  background: linear-gradient(145deg, #e3bc7824, #111413db);
  border-color: #e3bc7840
}

.community-shell {
  grid-template-columns: 350px 1fr;
  min-height: 700px
}

.room-list,
.community-chat,
.signal-rooms {
  background: #0d1215d1;
  border-color: #7ea1ff26
}

.room-list {
  border-radius: 4px 18px 18px 4px
}

.room-list>button {
  border-radius: 3px 12px 12px 3px
}

.room-list>button.active {
  background: linear-gradient(90deg, #7ea1ff2b, #0000);
  border-left: 2px solid #7ea1ff
}

.community-chat {
  background: radial-gradient(circle at 90% 0, #7ea1ff1a, #0000 32%), #0c1114e6;
  border-radius: 20px
}

.community-chat h2 {
  font-size: 30px
}

.signal-rooms {
  border-left: 2px solid #7ea1ff;
  border-radius: 4px 18px 18px 4px
}

.signal-rooms button {
  background: #ffffff07;
  border-color: #ffffff14
}

.access-hero {
  background: radial-gradient(circle at 78% 35%, #e3bc782e, #0000 27%), linear-gradient(140deg, #20180f, #0d1110);
  border-left: 3px solid #e3bc78;
  min-height: 300px
}

.access-hero h2 {
  font-size: 62px
}

.access-hero>svg {
  opacity: .72;
  width: 110px
}

.entitlement-grid article,
.access-states,
.recovery-card {
  background: #101516c2;
  border-color: #ffffff1a
}

.entitlement-grid article {
  border-radius: 4px 17px 17px 4px;
  min-height: 220px
}

.entitlement-grid h3 {
  font-size: 32px
}

.notification-summary {
  background: radial-gradient(circle at 78% 30%, #7ea1ff30, #0000 28%), linear-gradient(140deg, #151c2b, #0c1112);
  border-left: 3px solid #7ea1ff;
  min-height: 260px
}

.notification-summary>svg {
  width: 76px
}

.notification-summary h2 {
  font-size: 52px
}

.channel-matrix,
.quiet-hours {
  background: #0f1416c7;
  border-color: #ffffff1a
}

.channel-matrix {
  border-radius: 4px 18px 18px 4px
}

.channel-matrix>article {
  min-height: 96px
}

.admin-status {
  background: radial-gradient(circle at 80% 35%, #ff786f29, #0000 26%), linear-gradient(135deg, #211414, #0e1212);
  border-left: 3px solid #ff786f;
  border-radius: 4px 26px 26px 4px;
  min-height: 230px;
  padding: 38px
}

.admin-status:after {
  content: "08 / 08";
  font: 700 clamp(70px, 8vw, 120px)/.8 var(--font-display);
  letter-spacing: -.08em;
  color: #ffffff09;
  pointer-events: none;
  position: absolute;
  right: 5%
}

.admin-status h2 {
  max-width: 720px;
  font-size: 52px
}

.admin-grid {
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 12px
}

.admin-grid button {
  background: linear-gradient(145deg, #ffffff0e, #ffffff04);
  border-color: #ffffff1a;
  border-radius: 4px 18px 18px 4px;
  min-height: 145px;
  padding: 22px;
  transition: transform .2s, border-color .2s
}

.admin-grid button:hover {
  border-color: #ff786f4d;
  transform: translateY(-4px)
}

.admin-grid button:first-child {
  background: radial-gradient(circle at 75% 20%, #ff786f21, #0000 35%), #111515;
  grid-row: span 2;
  min-height: 302px
}

.admin-grid button:first-child>svg {
  width: 42px
}

.admin-grid b {
  font-size: 18px
}

.admin-grid small {
  font-size: 11px
}

.admin-workbench {
  grid-template-columns: 1.5fr .5fr
}

.admin-workbench>article,
.admin-workbench>aside {
  background: #0f1415d1;
  border-color: #ffffff1a;
  border-radius: 4px 20px 20px 4px
}

.admin-workbench h2 {
  font-size: 42px
}

.admin-fields label {
  background: #ffffff06;
  border-color: #ffffff17;
  min-height: 92px
}

.admin-workbench>article>[data-slot=button] {
  color: #190908;
  background: #ff867e;
  border-radius: 4px 12px 12px 4px;
  height: 58px
}

.guest-head {
  z-index: 3;
  border-color: #ffffff17;
  height: 92px;
  position: relative
}

.guest-head nav a {
  color: #84918b;
  font-size: 11px
}

.guest-head [data-slot=button] {
  color: #06110d;
  background: #eef5f1
}

.guest-hero {
  z-index: 2;
  min-height: 820px;
  padding-top: 95px;
  position: relative
}

.guest-copy h1 {
  font: 680 clamp(68px, 7.4vw, 112px)/.86 var(--font-display);
  letter-spacing: -.075em;
  color: #f7faf8
}

.guest-copy>p {
  color: #8a9690;
  font-size: 17px
}

.guest-actions [data-slot=button] {
  color: #06110d;
  background: #55f2b2;
  border-radius: 4px 14px 14px 4px;
  height: 60px;
  font-size: 13px
}

.guest-actions>button:last-child {
  color: #a1aca7;
  font-size: 12px
}

.guest-facts {
  border-top: 1px solid #ffffff1a;
  padding-top: 26px
}

.guest-facts b {
  color: #fff;
  font-size: 32px
}

.guest-facts small {
  color: #77847d;
  font-size: 10px
}

.guest-preview {
  background: linear-gradient(145deg, #12241deb, #070c0bf5);
  border: 1px solid #55f2b240;
  border-left: 3px solid #55f2b2;
  border-radius: 4px 28px 28px 4px;
  min-height: 580px;
  padding: 28px;
  box-shadow: 0 50px 140px #00000080
}

.guest-preview .market-canvas {
  opacity: .28
}

.guest-preview>div,
.guest-preview>[data-slot=button] {
  z-index: 2;
  position: relative
}

.preview-signal {
  padding: 125px 6px 80px
}

.preview-signal h2 {
  font-size: 46px
}

.preview-signal strong {
  color: #55f2b2;
  font-size: 24px
}

.guest-preview>[data-slot=button] {
  background: #eef5f1;
  height: 56px
}

.who,
.free-offer,
.how,
.guest-levels {
  z-index: 2;
  border-color: #ffffff1a;
  position: relative
}

.who h2,
.free-offer h2,
.how h2,
.guest-levels h2 {
  color: #f5f8f6;
  font-size: 55px
}

.who-grid article,
.guest-levels article,
.free-offer article {
  color: #f2f6f3;
  background: #ffffff09;
  border-color: #ffffff1a
}

.who-grid article:last-child {
  background: #ff786f0b
}

.who-grid p,
.guest-levels article p,
.free-offer article p,
.how article p {
  color: #85918b;
  font-size: 11px
}

.free-offer {
  background: #0a0e0f
}

.free-offer article {
  border-radius: 4px 17px 17px 4px
}

.how article {
  border-color: #ffffff1a
}

.guest-levels article {
  border-radius: 4px 18px 18px 4px
}

.guest-levels article.active {
  background: linear-gradient(145deg, #55f2b221, #ffffff06);
  border-color: #55f2b240
}

@media (width<=1100px) {
  .title-market {
    width: 280px
  }

  .admin-grid {
    grid-template-columns: 1fr 1fr
  }

  .admin-grid button:first-child {
    grid-row: auto;
    min-height: 145px
  }

  .community-shell {
    grid-template-columns: 300px 1fr
  }
}

@media (width<=760px) {
  .main>main {
    padding: 28px 16px 96px
  }

  .page {
    gap: 18px
  }

  .market-atmosphere {
    opacity: .11;
    width: 110vw;
    right: -55vw
  }

  .page-title {
    min-height: 126px;
    padding: 10px 0 18px
  }

  .page-title h1,
  .page-title.simple h1 {
    font-size: 42px
  }

  .page-title p {
    font-size: 12px
  }

  .title-market {
    opacity: .34;
    width: 240px;
    height: 105px;
    position: absolute;
    right: -90px
  }

  .balance-card {
    min-width: 122px
  }

  .balance-card b {
    font-size: 22px
  }

  .next-signal {
    min-height: 560px;
    padding: 23px 20px
  }

  .next-signal h2 {
    font-size: 52px
  }

  .next-signal strong {
    font-size: 25px
  }

  .next-lesson,
  .next-level {
    min-height: 270px
  }

  .all-sections h2 {
    font-size: 26px
  }

  .signal-list>article {
    grid-template-columns: 1fr auto;
    gap: 10px;
    min-height: 130px;
    padding: 18px 6px
  }

  .signal-list article>.signal-status {
    grid-column: 1/3
  }

  .signal-list article>strong {
    justify-self: start
  }

  .signal-list article>[data-slot=button] {
    justify-self: end
  }

  .lesson-player {
    min-height: 620px
  }

  .lesson-info {
    padding: 25px
  }

  .lesson-info h2 {
    font-size: 32px
  }

  .wallet-hero,
  .level-current,
  .active-challenge,
  .access-hero,
  .notification-summary,
  .admin-status {
    min-height: 260px;
    padding: 24px
  }

  .wallet-hero h1 {
    font-size: 68px
  }

  .level-current h1 {
    font-size: 62px
  }

  .access-hero h2,
  .notification-summary h2,
  .admin-status h2 {
    font-size: 37px
  }

  .admin-status:after {
    font-size: 60px
  }

  .admin-grid,
  .admin-workbench,
  .community-shell {
    grid-template-columns: 1fr
  }

  .guest-head nav {
    display: none
  }

  .guest-hero {
    grid-template-columns: 1fr;
    gap: 48px;
    min-height: auto;
    padding: 70px 22px
  }

  .guest-copy h1 {
    font-size: 57px
  }

  .guest-preview {
    min-height: 500px
  }

  .who {
    grid-template-columns: 1fr
  }

  .who h2,
  .free-offer h2,
  .how h2,
  .guest-levels h2 {
    font-size: 40px
  }
}

@media (prefers-reduced-motion:reduce) {

  .chart-line-glow,
  .chart-pulse {
    animation: none
  }

  .sidebar nav button,
  .signal-list>article,
  .admin-grid button {
    transition: none
  }
}

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Avenir Next", "Segoe UI Variable Display", "Segoe UI", sans-serif
}

body {
  font-family: var(--font-ui);
  font-weight: 400
}

h1,
h2,
h3,
b,
strong {
  font-family: var(--font-display);
  font-variation-settings: "wght" 620
}

.page-title h1,
.page-title.simple h1 {
  font-weight: 620
}

.guest-copy h1 {
  font-weight: 600
}

.next-signal h2,
.war-signal h2,
.wallet-hero h1,
.level-current h1 {
  font-weight: 610
}

.next-signal strong,
.war-signal strong {
  font-weight: 620
}

.next-lesson h2,
.next-lesson h2 strong,
.next-level h2,
.all-sections h2,
.lesson-info h2,
.community-chat h2,
.access-hero h2,
.notification-summary h2,
.admin-status h2,
.admin-workbench h2 {
  font-weight: 610
}

.all-sections button b,
.sidebar nav button,
.demo-switch button,
.signal-list h3,
.lesson-list button b {
  font-weight: 560
}

.balance-card b,
.money-cards strong {
  font-weight: 620
}

@media (width<=760px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden
  }

  .app {
    width: 100%;
    min-width: 0;
    overflow-x: hidden
  }

  .sidebar {
    display: none !important
  }

  .main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important
  }

  .main>main {
    overflow: hidden;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 24px 15px calc(104px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important
  }

  .app-head {
    width: 100%;
    height: 68px;
    padding: 0 15px
  }

  .mobile-logo {
    display: block
  }

  .mobile-logo .logo>div {
    display: none
  }

  .mobile-logo .logo>span {
    width: 36px;
    height: 36px
  }

  .demo-switch {
    margin-left: 8px
  }

  .demo-switch>span {
    display: none
  }

  .demo-switch button {
    padding: 0 8px
  }

  .head-right {
    margin-left: auto
  }

  .page {
    gap: 16px;
    width: 100%;
    min-width: 0
  }

  .page>* {
    min-width: 0;
    max-width: 100%
  }

  .page-title {
    width: 100%;
    min-height: 112px;
    padding: 4px 0 16px;
    overflow: hidden
  }

  .page-title h1,
  .page-title.simple h1 {
    letter-spacing: -.042em;
    margin: 11px 0 8px;
    font-size: 36px;
    line-height: 1
  }

  .page-title p {
    max-width: 82%;
    font-size: 12px;
    line-height: 1.4
  }

  .page-title>div:first-child>span {
    font-size: 8px
  }

  .title-market {
    opacity: .25;
    width: 250px;
    height: 105px;
    right: -118px
  }

  .balance-card {
    min-width: 108px;
    padding: 10px 11px
  }

  .balance-card button {
    display: none
  }

  .balance-card b {
    font-size: 21px
  }

  .next-actions {
    gap: 13px;
    width: 100%;
    flex-direction: column !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    display: flex !important
  }

  .next-signal,
  .next-lesson,
  .next-level {
    grid-area: auto !important;
    width: 100% !important;
    min-width: 0 !important
  }

  .next-signal {
    border-radius: 3px 20px 20px 3px;
    min-height: 470px;
    padding: 20px 18px
  }

  .next-signal:before {
    font-size: 62px;
    top: 84px;
    right: 8px
  }

  .next-signal:after {
    width: 300px;
    height: 300px;
    bottom: -140px;
    right: -170px
  }

  .next-signal header {
    gap: 8px;
    font-size: 9px
  }

  .next-signal header b {
    text-align: right;
    max-width: 125px;
    line-height: 1.35
  }

  .next-signal h2 {
    letter-spacing: -.05em;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: .94;
    font-size: 43px !important
  }

  .next-signal strong {
    font-size: 23px
  }

  .signal-facts {
    width: 100%;
    grid-template-columns: 1fr 1fr !important
  }

  .signal-facts span {
    min-width: 0;
    padding: 11px
  }

  .signal-facts span:last-child {
    display: none
  }

  .signal-facts b {
    font-size: 12px
  }

  .next-signal>[data-slot=button] {
    height: 54px;
    font-size: 13px
  }

  .next-lesson,
  .next-level {
    min-height: 235px;
    padding: 21px
  }

  .next-lesson h2 {
    margin-top: 25px;
    font-size: 27px
  }

  .next-level h2 {
    font-size: 34px
  }

  .all-sections {
    width: 100%;
    padding: 17px 14px
  }

  .all-sections header {
    align-items: flex-start
  }

  .all-sections header>small {
    display: none
  }

  .all-sections h2 {
    font-size: 25px
  }

  .all-sections>div {
    grid-template-columns: 1fr !important
  }

  .all-sections>div>button {
    width: 100%;
    min-height: 66px;
    padding: 0 4px;
    border-right: 0 !important
  }

  .all-sections button b {
    font-size: 14px
  }

  .all-sections button small {
    font-size: 10px
  }

  .home-challenge {
    grid-template-columns: auto 1fr;
    padding: 14px
  }

  .home-challenge>[data-slot=button] {
    grid-column: 1/3;
    width: 100%
  }

  .simple-tabs,
  .history-tabs {
    width: calc(100% + 30px);
    margin-left: -15px;
    padding: 0 15px
  }

  .signal-list>header {
    padding: 0
  }

  .signal-list>article {
    gap: 10px;
    width: 100%;
    min-height: 132px;
    padding: 17px 4px;
    grid-template-columns: minmax(0, 1fr) auto !important
  }

  .signal-list article>.signal-status {
    grid-column: 1/3
  }

  .signal-list h3 {
    font-size: 20px
  }

  .signal-list article>[data-slot=button] {
    max-width: 145px
  }

  .explain-card {
    padding: 13px
  }

  .explain-card p {
    font-size: 10px;
    line-height: 1.45
  }

  .learning-summary {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    display: flex
  }

  .learning-summary b {
    font-size: 28px
  }

  .learn-layout {
    flex-direction: column;
    width: 100%;
    display: flex
  }

  .lesson-list {
    width: 100%
  }

  .lesson-player {
    flex-direction: column;
    width: 100%;
    min-height: 0;
    display: flex
  }

  .video {
    width: 100%;
    min-height: 260px
  }

  .lesson-info {
    padding: 22px
  }

  .lesson-info h2 {
    font-size: 29px
  }

  .lesson-info>p {
    font-size: 12px
  }

  .free-strategies>div {
    grid-template-columns: 1fr 1fr
  }

  .free-strategies article {
    min-height: 145px
  }

  .history-table {
    width: 100%;
    overflow-x: auto
  }

  .history-table>header,
  .history-table>article {
    min-width: 650px
  }

  .wallet-hero {
    flex-direction: column;
    min-height: 0;
    padding: 23px;
    display: flex
  }

  .wallet-hero h1 {
    font-size: 62px
  }

  .wallet-progress {
    width: 100%;
    margin-top: 18px
  }

  .money-cards {
    grid-template-columns: 1fr
  }

  .money-cards article {
    width: 100%
  }

  .active-challenge {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 23px;
    display: flex
  }

  .challenge-number {
    width: 105px;
    height: 105px
  }

  .challenge-number b {
    font-size: 42px
  }

  .available-list>article {
    grid-template-columns: 36px 1fr;
    gap: 10px;
    padding: 16px 4px
  }

  .available-list>article>span,
  .available-list>article>[data-slot=button] {
    grid-column: 2
  }

  .reward-grid {
    grid-template-columns: 1fr 1fr
  }

  .reward-grid article {
    min-height: 210px;
    padding: 17px
  }

  .reward-summary {
    min-height: 210px;
    padding: 24px
  }

  .reward-summary h2 {
    font-size: 37px
  }

  .level-current {
    min-height: 220px;
    padding: 23px
  }

  .level-current h1 {
    font-size: 56px
  }

  .level-list article {
    grid-template-columns: 38px 1fr;
    min-height: 130px;
    padding: 15px 3px
  }

  .level-list article>strong {
    grid-column: 2
  }

  .community-shell {
    flex-direction: column;
    width: 100%;
    min-height: 0;
    display: flex
  }

  .room-list,
  .community-chat {
    width: 100%
  }

  .room-list {
    max-height: none
  }

  .community-chat {
    min-height: 560px
  }

  .community-chat>header {
    padding: 17px
  }

  .community-chat h2 {
    font-size: 23px
  }

  .chat-feed {
    padding: 16px
  }

  .signal-rooms {
    width: 100%
  }

  .signal-rooms>div {
    grid-template-columns: 1fr
  }

  .access-hero,
  .notification-summary,
  .admin-status {
    min-height: 210px;
    padding: 22px
  }

  .access-hero h2,
  .notification-summary h2,
  .admin-status h2 {
    font-size: 34px
  }

  .access-hero>svg {
    width: 58px
  }

  .entitlement-grid,
  .admin-grid,
  .access-states>div {
    grid-template-columns: 1fr
  }

  .channel-matrix {
    width: 100%
  }

  .channel-matrix>article {
    grid-template-columns: 28px minmax(0, 1fr) 44px;
    padding: 12px
  }

  .admin-status:after {
    font-size: 50px
  }

  .admin-workbench {
    grid-template-columns: 1fr
  }

  .admin-fields {
    grid-template-columns: 1fr 1fr
  }

  .admin-workbench>article,
  .admin-workbench>aside {
    padding: 18px
  }

  .admin-workbench h2 {
    font-size: 32px
  }

  .profile-card {
    flex-direction: column;
    align-items: flex-start;
    display: flex
  }

  .profile-card>[data-slot=button],
  .profile-links {
    width: 100%
  }

  .more-grid {
    grid-template-columns: 1fr
  }

  .mobile-nav {
    z-index: 100;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    background: #080c0cf0;
    border: 1px solid #ffffff1f;
    border-radius: 20px;
    grid-template-columns: repeat(5, 1fr);
    width: auto;
    height: 70px;
    padding: 6px;
    position: fixed;
    box-shadow: 0 18px 60px #0000008c;
    display: grid !important
  }

  .mobile-nav button {
    border-radius: 14px;
    min-width: 0;
    height: 58px
  }

  .mobile-nav button span {
    font-size: 10px
  }

  .mobile-nav button svg {
    width: 20px
  }

  .mobile-nav button.active {
    background: #55f2b21f
  }

  .market-atmosphere {
    opacity: .08;
    width: 125vw;
    right: -65vw
  }

  .guest-head {
    padding: 0 17px
  }

  .guest-head .logo small {
    display: none
  }

  .guest-head [data-slot=button] {
    padding: 0 10px;
    font-size: 9px
  }

  .guest-hero {
    padding: 56px 18px
  }

  .guest-copy h1 {
    font-size: 48px;
    line-height: .91
  }

  .guest-copy>p {
    font-size: 14px
  }

  .guest-actions {
    flex-direction: column;
    align-items: stretch
  }

  .guest-actions [data-slot=button] {
    width: 100%
  }

  .guest-actions>button:last-child {
    justify-content: center
  }

  .guest-facts {
    gap: 18px
  }

  .guest-facts b {
    font-size: 25px
  }

  .guest-preview {
    width: 100%;
    min-height: 470px;
    padding: 20px
  }

  .preview-signal {
    padding: 105px 4px 65px
  }

  .preview-signal h2 {
    font-size: 36px
  }

  .who,
  .free-offer,
  .how,
  .guest-levels {
    padding: 70px 18px
  }

  .who-grid {
    grid-template-columns: 1fr
  }

  .who-grid article:last-child {
    grid-column: auto
  }

  .who h2,
  .free-offer h2,
  .how h2,
  .guest-levels h2 {
    font-size: 34px
  }

  .free-offer>div,
  .how>div,
  .guest-levels>div {
    grid-template-columns: 1fr
  }

  .free-offer article,
  .guest-levels article {
    min-height: 170px
  }
}

.app,
.guest {
  isolation: isolate;
  position: relative;
  overflow-x: clip
}

.market-atmosphere {
  z-index: 0;
  opacity: .24;
  filter: none;
  pointer-events: none;
  width: min(1120px, 76vw);
  height: 760px;
  position: absolute;
  top: 72px;
  right: -5vw;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(145deg, #000 0 48%, #000000b8 67%, #0000 94%);
  mask-image: linear-gradient(145deg, #000 0 48%, #000000b8 67%, #0000 94%)
}

.market-atmosphere .market-canvas {
  transform-origin: 50%;
  width: 104%;
  height: 610px;
  inset: 80px -4% auto auto;
  transform: rotate(-2deg)scale(1.02)
}

.market-aura {
  z-index: -1;
  filter: blur(22px);
  background: radial-gradient(circle at 62% 42%, #55f2b22e, #55f2b209 31%, #0000 67%);
  border-radius: 50%;
  animation: 7s ease-in-out infinite auraBreath;
  position: absolute;
  inset: 3% 4% 9% 7%
}

.market-orbit {
  border: 1px solid #77ffcc1c;
  border-radius: 50%;
  position: absolute;
  transform: rotate(-18deg)
}

.market-orbit:before,
.market-orbit:after {
  content: "";
  background: #7affca;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  box-shadow: 0 0 18px #55f2b2f2
}

.orbit-one {
  width: 560px;
  height: 290px;
  animation: 12s ease-in-out infinite orbitFloat;
  top: 13%;
  right: 2%
}

.orbit-one:before {
  top: 18%;
  left: 11%
}

.orbit-one:after {
  background: #e3bc78;
  bottom: 22%;
  right: 8%
}

.orbit-two {
  opacity: .58;
  width: 370px;
  height: 720px;
  animation: 16s ease-in-out infinite reverse orbitFloat;
  top: -15%;
  right: 19%
}

.orbit-two:before {
  top: 4%;
  right: 23%
}

.orbit-two:after {
  background: #7ea1ff;
  bottom: 23%;
  left: 9%
}

.market-code {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #070f0c7a;
  border-left: 2px solid #55f2b2;
  padding: 8px 10px;
  top: 8%;
  right: 8%
}

.market-hud {
  z-index: 2;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #080e0d94;
  border: 1px solid #ffffff17;
  border-left: 2px solid #55f2b2b8;
  border-radius: 2px 10px 10px 2px;
  flex-direction: column;
  gap: 5px;
  min-width: 142px;
  padding: 11px 13px;
  display: flex;
  position: absolute;
  box-shadow: 0 18px 50px #0000002e
}

.market-hud small {
  font: 600 7px/1 var(--font-data);
  letter-spacing: .18em;
  color: #64746c
}

.market-hud b {
  font: 650 9px/1.2 var(--font-data);
  letter-spacing: .08em;
  color: #d9e5df
}

.hud-session {
  top: 54%;
  right: 4%
}

.hud-volume {
  border-left-color: #7ea1ff;
  top: 14%;
  right: 43%
}

.hud-risk {
  border-left-color: #e3bc78;
  bottom: 9%;
  right: 25%
}

.market-beacon {
  border: 2px solid #55f2b2;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: 2.2s ease-out infinite beacon;
  position: absolute;
  top: 38%;
  right: 13%;
  box-shadow: 0 0 0 9px #55f2b20e, 0 0 0 20px #55f2b206, 0 0 30px #55f2b273
}

.market-pulse-strip {
  z-index: 3;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: linear-gradient(100deg, #55f2b213, #0c1112d6 30%, #0c1112b3);
  border: 1px solid #ffffff17;
  border-left: 3px solid #55f2b2;
  border-radius: 3px 15px 15px 3px;
  grid-template-columns: 1.15fr repeat(4, 1fr);
  min-height: 82px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 55px #00000026
}

.market-pulse-strip:before {
  content: "";
  background: linear-gradient(90deg, #0000, #80ffd014, #0000);
  width: 18%;
  animation: 8s ease-in-out infinite tapeSweep;
  position: absolute;
  inset: 0 auto 0 -22%;
  transform: skew(-18deg)
}

.market-pulse-strip>header,
.market-pulse-strip>div {
  z-index: 1;
  border-right: 1px solid #ffffff13;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  display: flex;
  position: relative
}

.market-pulse-strip>header i {
  background: #55f2b2;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  animation: 1.8s ease-in-out infinite pulse;
  box-shadow: 0 0 0 6px #55f2b217
}

.market-pulse-strip>header span {
  font: 650 9px/1 var(--font-data);
  letter-spacing: .15em;
  color: #9aa9a2
}

.market-pulse-strip>header b {
  font: 700 7px/1 var(--font-data);
  letter-spacing: .12em;
  color: #75f5c2;
  border: 1px solid #55f2b238;
  border-radius: 6px;
  margin-left: auto;
  padding: 5px 7px
}

.market-pulse-strip>div {
  grid-template-columns: 1fr auto;
  align-content: center;
  display: grid
}

.market-pulse-strip>div small {
  font: 600 8px/1 var(--font-data);
  letter-spacing: .1em;
  color: #6f7e77
}

.market-pulse-strip>div strong {
  font: 650 12px/1 var(--font-data);
  color: #75f5c2
}

.market-pulse-strip>div.down strong {
  color: #ff877f
}

.market-pulse-strip>div.live strong {
  color: #e3bc78;
  font-size: 10px
}

.pulse-spark {
  grid-column: 1/3;
  align-items: end;
  gap: 3px;
  height: 13px;
  margin-top: 5px;
  display: flex
}

.pulse-spark i {
  background: #55f2b242;
  border-radius: 2px 2px 0 0;
  width: 10px;
  height: 4px;
  display: block
}

.pulse-spark i:nth-child(2) {
  height: 7px
}

.pulse-spark i:nth-child(3) {
  height: 5px
}

.pulse-spark i:nth-child(4) {
  height: 11px
}

.pulse-spark i:nth-child(5) {
  background: #55f2b2;
  height: 8px
}

.down .pulse-spark i {
  background: #ff786f45
}

.down .pulse-spark i:last-child {
  background: #ff786f
}

.live .pulse-spark i {
  background: #e3bc7840
}

.live .pulse-spark i:last-child {
  background: #e3bc78
}

.signal-tech {
  z-index: 3;
  font: 600 8px/1 var(--font-data);
  letter-spacing: .11em;
  color: #607169;
  align-items: center;
  gap: 15px;
  display: flex;
  position: absolute;
  top: 116px;
  right: 35px
}

.signal-tech span {
  align-items: center;
  gap: 6px;
  display: flex
}

.signal-tech i {
  background: #55f2b2;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 11px #55f2b2bf
}

.next-signal {
  box-shadow: 0 35px 100px #0000004d, inset 0 1px #ffffff06
}

.next-signal .signal-main:after {
  content: "";
  z-index: -1;
  background: repeating-linear-gradient(90deg, #0000 0 69px, #55f2b206 70px), repeating-linear-gradient(0deg, #0000 0 49px, #55f2b205 50px);
  position: absolute;
  inset: -34px -36px;
  -webkit-mask-image: linear-gradient(90deg, #000, #0000 82%);
  mask-image: linear-gradient(90deg, #000, #0000 82%)
}

.page>section {
  animation: .6s both sectionRise
}

.page>section:nth-of-type(2) {
  animation-delay: 60ms
}

.page>section:nth-of-type(3) {
  animation-delay: .12s
}

@keyframes auraBreath {
  50% {
    opacity: .68;
    transform: scale(1.06)
  }
}

@keyframes orbitFloat {
  50% {
    transform: rotate(-13deg)translate(-18px, 13px)
  }
}

@keyframes beacon {

  70%,
  to {
    box-shadow: 0 0 0 22px #55f2b200, 0 0 0 42px #55f2b200, 0 0 30px #55f2b259
  }
}

@keyframes tapeSweep {

  0%,
  24% {
    left: -22%
  }

  68%,
  to {
    left: 116%
  }
}

@keyframes sectionRise {
  0% {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (width<=760px) {
  .market-atmosphere {
    opacity: .13;
    width: 165vw;
    height: 490px;
    position: absolute;
    top: 66px;
    right: -74vw;
    -webkit-mask-image: linear-gradient(145deg, #000 0 42%, #0000 86%);
    mask-image: linear-gradient(145deg, #000 0 42%, #0000 86%)
  }

  .market-atmosphere .market-canvas {
    height: 420px;
    top: 28px
  }

  .market-hud {
    display: none
  }

  .market-code {
    font-size: 7px;
    top: 7%;
    right: 48%
  }

  .market-orbit {
    opacity: .45
  }

  .orbit-one {
    width: 420px;
    height: 225px;
    top: 2%;
    right: 20%
  }

  .orbit-two {
    display: none
  }

  .market-beacon {
    top: 36%;
    right: 47%
  }

  .market-pulse-strip {
    scrollbar-width: none;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    width: calc(100% + 30px);
    min-height: 72px;
    margin-left: -15px;
    display: flex;
    overflow-x: auto
  }

  .market-pulse-strip::-webkit-scrollbar {
    display: none
  }

  .market-pulse-strip>header,
  .market-pulse-strip>div {
    flex: 0 0 142px;
    padding: 0 14px
  }

  .market-pulse-strip>header {
    flex-basis: 128px
  }

  .market-pulse-strip>div {
    display: grid
  }

  .market-pulse-strip>div small {
    font-size: 7px
  }

  .market-pulse-strip>div strong {
    font-size: 11px
  }

  .signal-tech {
    gap: 10px;
    top: 82px;
    left: 19px;
    right: auto
  }

  .signal-tech span:last-child {
    display: none
  }

  .next-signal .signal-main:after {
    left: -18px;
    right: -18px
  }
}

@media (prefers-reduced-motion:reduce) {

  .market-aura,
  .market-orbit,
  .market-beacon,
  .market-pulse-strip:before,
  .page>section {
    animation: none
  }
}

.app {
  --section-accent: #55f2b2;
  --section-rgb: 85, 242, 178
}

.app.page-learn {
  --section-accent: #91a1ff;
  --section-rgb: 145, 161, 255
}

.app.page-community {
  --section-accent: #7ea1ff;
  --section-rgb: 126, 161, 255
}

.app.page-history {
  --section-accent: #65d7e5;
  --section-rgb: 101, 215, 229
}

.app.page-balance,
.app.page-levels,
.app.page-access {
  --section-accent: #e3bc78;
  --section-rgb: 227, 188, 120
}

.app.page-challenges,
.app.page-rewards {
  --section-accent: #f0a86e;
  --section-rgb: 240, 168, 110
}

.app.page-admin {
  --section-accent: #ff786f;
  --section-rgb: 255, 120, 111
}

.app .page-title>div:first-child>span,
.app .page-title h1 strong,
.app .balance-card button {
  color: var(--section-accent)
}

.app .title-market:after {
  background: linear-gradient(90deg, transparent, var(--section-accent), transparent)
}

.app .sidebar nav button.active svg,
.app .all-sections>div>button>svg:first-child {
  color: var(--section-accent)
}

.app .sidebar nav button.active {
  background: linear-gradient(90deg, rgba(var(--section-rgb), .13), rgba(var(--section-rgb), .02));
  border-color: rgba(var(--section-rgb), .17)
}

.app .market-aura {
  background: radial-gradient(circle at 62% 42%, rgba(var(--section-rgb), .2), rgba(var(--section-rgb), .035) 31%, transparent 67%)
}

.app .market-code,
.app .market-hud {
  border-left-color: var(--section-accent)
}

.auth-page {
  isolation: isolate;
  color: #f5f8f6;
  background: radial-gradient(circle at 72% 8%, #55f2b21c, #0000 31%), #080b0c;
  min-height: 100vh;
  position: relative;
  overflow: hidden
}

.auth-head {
  z-index: 4;
  border-bottom: 1px solid #ffffff16;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  height: 90px;
  margin: auto;
  padding: 0 28px;
  display: flex;
  position: relative
}

.auth-head>button {
  color: #8c9892;
  background: 0 0;
  border: 0;
  font-size: 11px
}

.auth-shell {
  z-index: 2;
  grid-template-columns: 1.08fr .72fr;
  align-items: center;
  gap: 90px;
  max-width: 1220px;
  min-height: calc(100vh - 90px);
  margin: auto;
  padding: 72px 32px 90px;
  display: grid;
  position: relative
}

.auth-story h1 {
  font: 600 clamp(58px, 6vw, 88px)/.9 var(--font-display);
  letter-spacing: -.065em;
  margin: 22px 0 28px
}

.auth-story h1 em {
  color: #55f2b2;
  font-style: normal
}

.auth-story>p {
  color: #85928c;
  max-width: 610px;
  font-size: 16px;
  line-height: 1.7
}

.auth-proof {
  border: 1px solid #ffffff14;
  border-radius: 4px 18px 18px 4px;
  gap: 1px;
  margin-top: 45px;
  display: grid;
  overflow: hidden
}

.auth-proof article {
  background: #ffffff06;
  border-bottom: 1px solid #ffffff13;
  align-items: center;
  gap: 15px;
  min-height: 82px;
  padding: 16px 18px;
  display: flex
}

.auth-proof article:last-child {
  border: 0
}

.auth-proof svg {
  color: #55f2b2;
  width: 20px
}

.auth-proof span {
  flex-direction: column;
  gap: 4px;
  display: flex
}

.auth-proof b {
  font-size: 13px
}

.auth-proof small {
  color: #77847e;
  font-size: 10px
}

.auth-card {
  background: linear-gradient(150deg, #18221ff5, #0a0e0ff5);
  border: 1px solid #ffffff1f;
  border-top: 2px solid #55f2b2;
  border-radius: 4px 24px 24px 4px;
  padding: 30px;
  box-shadow: 0 40px 120px #00000073, inset 0 1px #ffffff0a
}

.auth-tabs {
  background: #0a0f10;
  border-radius: 12px;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  display: grid
}

.auth-tabs button {
  color: #69756f;
  background: 0 0;
  border: 0;
  border-radius: 9px;
  height: 40px;
  font-size: 11px
}

.auth-tabs button.active {
  color: #fff;
  background: #1d2925;
  box-shadow: 0 8px 22px #00000047
}

.auth-card>header {
  padding: 32px 2px 25px
}

.auth-card>header small {
  font: 650 8px var(--font-data);
  letter-spacing: .15em;
  color: #55f2b2
}

.auth-card h2 {
  letter-spacing: -.045em;
  margin: 9px 0;
  font-size: 32px
}

.auth-card>header p {
  color: #7d8983;
  margin: 0;
  font-size: 11px
}

.auth-card [data-slot=button] {
  border-radius: 4px 12px 12px 4px;
  width: 100%;
  height: 52px;
  font-size: 11px
}

.telegram-auth {
  color: #06110d !important;
  background: #55f2b2 !important
}

/* ГЛАВНАЯ КНОПКА ВХОДА — ССЫЛКА, А НЕ Button (29.09). Форму кнопкам входа даёт
   `[data-slot=button]`; на экране входа «Продолжить через Telegram» — обычная ссылка в
   бота, и форма к ней не приходила: строчный текст на зелёной подложке читался как
   выделенный текст, а не как первый шаг новичка. */
a.telegram-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 4px 12px 12px 4px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box
}

a.telegram-auth svg {
  width: 18px;
  height: 18px;
  flex: none
}

.auth-divider {
  color: #59645f;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  font-size: 9px;
  display: flex
}

.auth-divider:before,
.auth-divider:after {
  content: "";
  background: #ffffff14;
  flex: 1;
  height: 1px
}

.auth-card form {
  flex-direction: column;
  gap: 13px;
  display: flex
}

.auth-card label {
  color: #84918a;
  flex-direction: column;
  gap: 7px;
  font-size: 9px;
  display: flex
}

.auth-card input {
  color: #fff;
  width: 100%;
  height: 48px;
  font: 500 12px var(--font-ui);
  background: #ffffff09;
  border: 1px solid #ffffff1c;
  border-radius: 3px 10px 10px 3px;
  outline: none;
  padding: 0 14px
}

.auth-card input:focus {
  border-color: #55f2b280;
  box-shadow: 0 0 0 3px #55f2b20f
}

.auth-card form [data-slot=button] {
  color: #07110d;
  background: #eef5f1;
  margin-top: 5px
}

.auth-terms {
  text-align: center;
  color: #59655f;
  margin: 17px 0 0;
  font-size: 8px;
  line-height: 1.5
}

.success-shell {
  place-items: center;
  display: grid
}

.auth-complete-card {
  text-align: center;
  background: radial-gradient(circle at 50% 0, #55f2b221, #0000 40%), #0d1312;
  border: 1px solid #55f2b238;
  border-top: 3px solid #55f2b2;
  border-radius: 4px 28px 28px 4px;
  width: min(690px, 100%);
  padding: 54px;
  box-shadow: 0 50px 140px #00000080
}

.auth-check {
  color: #07110d;
  background: #55f2b2;
  border-radius: 50%;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 25px;
  display: grid;
  box-shadow: 0 0 0 15px #55f2b20e
}

.auth-complete-card>small {
  font: 650 9px var(--font-data);
  letter-spacing: .15em;
  color: #55f2b2
}

.auth-complete-card h1 {
  margin: 12px 0;
  font-size: 50px
}

.auth-complete-card>p {
  color: #85918b;
  max-width: 540px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.6
}

.auth-ready-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 32px 0;
  display: grid
}

.auth-ready-grid span {
  background: #ffffff06;
  border: 1px solid #ffffff17;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 90px;
  padding: 15px;
  display: flex
}

.auth-ready-grid svg {
  color: #55f2b2;
  width: 20px
}

.auth-ready-grid b {
  font-size: 10px
}

.auth-complete-card>[data-slot=button] {
  color: #07110d;
  background: #55f2b2;
  width: 100%;
  height: 56px
}

.ecosystem-layer {
  z-index: 2;
  grid-template-columns: 1.25fr .64fr .64fr;
  gap: 14px;
  display: grid;
  position: relative
}

.ecosystem-layer>article {
  color: #eef4f0;
  cursor: pointer;
  border: 1px solid #ffffff1a;
  min-height: 310px;
  padding: 25px;
  position: relative;
  overflow: hidden
}

.daily-route {
  background: linear-gradient(140deg, #121a18f5, #0a0e0feb);
  border-radius: 4px 22px 22px 4px
}

.daily-route>header {
  justify-content: space-between;
  align-items: flex-start;
  display: flex
}

.daily-route header span,
.strategy-drop>span {
  font: 650 8px var(--font-data);
  letter-spacing: .16em;
  color: #6f7c76
}

.daily-route h2 {
  margin: 7px 0;
  font-size: 29px
}

.daily-route header>b {
  font: 650 10px var(--font-data);
  color: #55f2b2;
  border: 1px solid #55f2b22e;
  border-radius: 8px;
  padding: 8px 10px
}

.route-line {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 58px;
  display: grid;
  position: relative
}

.route-line:before {
  content: "";
  background: linear-gradient(90deg, #55f2b2 0 48%, #ffffff1a 48%);
  height: 1px;
  position: absolute;
  top: 19px;
  left: 9%;
  right: 9%
}

.route-line button {
  z-index: 1;
  color: #65716b;
  text-align: left;
  background: 0 0;
  border: 0;
  padding: 0 8px;
  position: relative
}

.route-line button>i {
  background: #111718;
  border: 1px solid #ffffff21;
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid
}

.route-line button>i svg {
  width: 15px
}

.route-line button.done>i {
  color: #07110d;
  background: #55f2b2;
  border-color: #55f2b2
}

.route-line button.active>i {
  color: #55f2b2;
  border-color: #55f2b2;
  box-shadow: 0 0 0 8px #55f2b20d
}

.route-line button>span {
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
  display: flex
}

.route-line small {
  font: 600 7px var(--font-data);
  letter-spacing: .1em;
  color: #607069
}

.route-line b {
  color: #dfe7e3;
  font-size: 12px
}

.route-line em {
  font-size: 8px;
  font-style: normal
}

.strategy-drop {
  background: radial-gradient(circle at 80% 12%, #977aff42, #0000 31%), linear-gradient(145deg, #191629, #0f1218);
  border-radius: 22px 4px 22px 22px
}

.strategy-drop>svg {
  color: #ab9aff;
  width: 38px;
  height: 38px;
  margin: 37px 0 20px
}

.strategy-drop h2 {
  letter-spacing: -.045em;
  margin: 0;
  font-size: 34px;
  line-height: .96
}

.strategy-drop p {
  color: #8d8a9b;
  max-width: 230px;
  font-size: 10px;
  line-height: 1.55
}

.strategy-drop>button {
  color: #b9acff;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 7px;
  padding: 0;
  font-size: 9px;
  display: flex;
  position: absolute;
  bottom: 24px;
  left: 25px
}

.strategy-drop>button svg {
  width: 12px
}

.drop-orbit {
  border: 1px solid #b9acff21;
  border-radius: 50%;
  width: 230px;
  height: 230px;
  position: absolute;
  top: -80px;
  right: -75px;
  box-shadow: 0 0 0 35px #b9acff06, 0 0 0 70px #b9acff04
}

.drop-orbit i {
  background: #b9acff;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  box-shadow: 0 0 16px #8979ff
}

.drop-orbit i:first-child {
  top: 100px;
  left: 16px
}

.drop-orbit i:nth-child(2) {
  bottom: 13px;
  right: 38px
}

.drop-orbit i:nth-child(3) {
  background: #55f2b2;
  bottom: -38px;
  left: 100px
}

.community-pulse {
  background: radial-gradient(circle at 50% 30%, #7ea1ff2e, #0000 34%), linear-gradient(145deg, #121925, #0e1217);
  border-radius: 4px 22px 22px
}

.community-pulse header {
  font: 650 8px var(--font-data);
  letter-spacing: .12em;
  color: #8797aa;
  justify-content: space-between;
  align-items: center;
  display: flex
}

.community-pulse header span {
  align-items: center;
  gap: 7px;
  display: flex
}

.community-pulse header i {
  background: #7ea1ff;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 5px #7ea1ff14
}

.community-pulse header b {
  color: #a8beff
}

.chat-orbit {
  align-items: center;
  margin: 43px 0 24px;
  display: flex
}

.chat-orbit span {
  background: linear-gradient(135deg, #26395a, #171e2b);
  border: 3px solid #121925;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: -9px;
  font-size: 9px;
  display: grid
}

.chat-orbit span:first-child {
  color: #07110d;
  background: linear-gradient(135deg, #55f2b2, #337760);
  margin-left: 0
}

.chat-orbit span:last-child {
  color: #8da2cf;
  background: #11161d
}

.community-pulse h2 {
  margin: 0;
  font-size: 27px
}

.community-pulse>p {
  color: #8490a0;
  font-size: 10px
}

.room-tags {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
  position: absolute;
  bottom: 22px;
  left: 25px;
  right: 25px
}

.room-tags span {
  font: 600 7px var(--font-data);
  letter-spacing: .06em;
  color: #7f91b0;
  border: 1px solid #7ea1ff24;
  border-radius: 6px;
  padding: 5px 7px
}

@media (width<=1100px) {
  .ecosystem-layer {
    grid-template-columns: 1fr 1fr
  }

  .daily-route {
    grid-column: 1/3
  }

  .auth-shell {
    gap: 48px
  }
}

@media (width<=760px) {
  .auth-page {
    overflow-x: hidden
  }

  .auth-head {
    height: 70px;
    padding: 0 17px
  }

  .auth-head .logo>div {
    display: none
  }

  .auth-shell {
    flex-direction: column;
    gap: 38px;
    min-height: auto;
    padding: 46px 17px 90px;
    display: flex
  }

  .auth-story h1 {
    font-size: 46px
  }

  .auth-story>p {
    font-size: 13px
  }

  .auth-proof {
    margin-top: 28px
  }

  .auth-card {
    width: 100%;
    padding: 22px 18px
  }

  .auth-card h2 {
    font-size: 28px
  }

  .auth-complete-card {
    padding: 36px 19px
  }

  .auth-complete-card h1 {
    font-size: 38px
  }

  .auth-ready-grid {
    grid-template-columns: 1fr
  }

  .auth-ready-grid span {
    min-height: 68px
  }

  .ecosystem-layer {
    flex-direction: column;
    display: flex
  }

  .ecosystem-layer>article {
    width: 100%;
    min-height: 285px
  }

  .daily-route {
    min-height: 510px
  }

  .route-line {
    grid-template-columns: 1fr;
    margin-top: 30px;
    padding-left: 5px
  }

  .route-line:before {
    background: linear-gradient(#55f2b2 0 48%, #ffffff1a 48%);
    width: 1px;
    height: auto;
    inset: 20px auto 22px 24px
  }

  .route-line button {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    min-height: 91px;
    display: grid
  }

  .route-line button>span {
    margin-top: 3px
  }

  .strategy-drop,
  .community-pulse {
    min-height: 310px
  }

  .strategy-drop h2 {
    font-size: 36px
  }
}

.pocket-onboarding {
  overflow: auto
}

.pocket-shell {
  z-index: 2;
  max-width: 1240px;
  margin: auto;
  padding: 32px 32px 90px;
  position: relative
}

.binding-progress {
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  width: min(620px, 100%);
  margin: 0 auto 45px;
  display: grid
}

.binding-progress>span {
  color: #66736d;
  align-items: center;
  gap: 8px;
  display: flex
}

.binding-progress>span i {
  width: 30px;
  height: 30px;
  font-style: normal;
  font: 650 9px var(--font-data);
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  place-items: center;
  display: grid
}

.binding-progress>span svg {
  width: 13px
}

.binding-progress>span b {
  font-size: 10px
}

.binding-progress>span.done {
  color: #8b9992
}

.binding-progress>span.done i {
  color: #75f5c2;
  background: #1e5d48;
  border-color: #2a8d68
}

.binding-progress>span.active {
  color: #eef5f1
}

.binding-progress>span.active i {
  color: #06110d;
  background: #55f2b2;
  border-color: #55f2b2;
  box-shadow: 0 0 0 8px #55f2b20e
}

.binding-progress>em {
  background: linear-gradient(90deg, #55f2b28c, #ffffff1a);
  height: 1px;
  margin: 0 12px
}

.pocket-layout {
  grid-template-columns: 1fr .8fr;
  align-items: center;
  gap: 80px;
  display: grid
}

.pocket-copy h1 {
  font: 600 clamp(56px, 6vw, 86px)/.9 var(--font-display);
  letter-spacing: -.065em;
  margin: 20px 0 25px
}

.pocket-copy h1 em {
  color: #55f2b2;
  font-style: normal
}

.pocket-copy>p {
  color: #87938d;
  max-width: 600px;
  font-size: 15px;
  line-height: 1.65
}

.identity-chain {
  border: 1px solid #ffffff16;
  border-radius: 4px 18px 18px 4px;
  max-width: 590px;
  margin-top: 39px;
  overflow: hidden
}

.identity-chain article {
  background: #ffffff06;
  border-bottom: 1px solid #ffffff13;
  grid-template-columns: 35px 1fr 24px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 13px 17px;
  display: grid
}

.identity-chain article:last-child {
  border: 0
}

.identity-chain article>span {
  width: 32px;
  height: 32px;
  font: 650 8px var(--font-data);
  color: #738079;
  border: 1px solid #ffffff1c;
  border-radius: 50%;
  place-items: center;
  display: grid
}

.identity-chain article>div {
  flex-direction: column;
  gap: 4px;
  display: flex
}

.identity-chain b {
  font-size: 12px
}

.identity-chain small {
  color: #6f7b75;
  font-size: 9px
}

.identity-chain article>svg {
  color: #55f2b2;
  width: 17px
}

.identity-chain article.current {
  background: linear-gradient(90deg, #55f2b217, #ffffff05)
}

.identity-chain article.current>span {
  color: #07110d;
  background: #55f2b2;
  border-color: #55f2b2
}

.pocket-card {
  background: linear-gradient(150deg, #15201cf7, #090d0efa);
  border: 1px solid #ffffff1f;
  border-top: 3px solid #55f2b2;
  border-radius: 4px 25px 25px 4px;
  padding: 31px;
  box-shadow: 0 45px 130px #00000080, inset 0 1px #ffffff09
}

.pocket-card>header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  display: flex
}

.pocket-card header small {
  font: 650 8px var(--font-data);
  letter-spacing: .15em;
  color: #55f2b2
}

.pocket-card h2 {
  letter-spacing: -.04em;
  margin: 8px 0;
  font-size: 30px
}

.pocket-card header>svg {
  color: #55f2b2;
  width: 35px
}

.pocket-card>label {
  color: #86938c;
  flex-direction: column;
  gap: 8px;
  font-size: 9px;
  display: flex
}

.pocket-input {
  background: #ffffff09;
  border: 1px solid #ffffff1f;
  border-radius: 3px 13px 13px 3px;
  grid-template-columns: 46px 1fr;
  height: 58px;
  display: grid;
  overflow: hidden
}

.pocket-input>span {
  font: 650 9px var(--font-data);
  color: #55f2b2;
  border-right: 1px solid #ffffff1a;
  place-items: center;
  display: grid
}

.pocket-input input {
  color: #fff;
  width: 100%;
  font: 600 16px var(--font-data);
  letter-spacing: .08em;
  background: 0 0;
  border: 0;
  outline: none;
  padding: 0 14px
}

.verification-state {
  background: #ffffff06;
  border: 1px solid #ffffff17;
  border-radius: 3px 11px 11px 3px;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  margin: 14px 0;
  padding: 12px 14px;
  display: flex
}

.verification-state>svg {
  color: #77847e;
  flex: none;
  width: 19px
}

.verification-state span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.verification-state b {
  font-size: 10px
}

.verification-state small {
  color: #748079;
  font-size: 8px;
  line-height: 1.4
}

.verification-state.checking>svg {
  color: #91a1ff;
  animation: 1.2s linear infinite spin
}

.verification-state.verified {
  background: #55f2b20f;
  border-color: #55f2b238
}

.verification-state.verified>svg {
  color: #55f2b2
}

.verification-state.error {
  background: #ff786f0d;
  border-color: #ff786f38
}

.verification-state.error>svg {
  color: #ff786f
}

.verification-state.waiting>svg {
  color: #e3bc78
}

.pocket-card>[data-slot=button] {
  color: #07110d;
  background: #55f2b2;
  border-radius: 3px 12px 12px 3px;
  width: 100%;
  height: 54px
}

.no-pocket {
  border-top: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 15px 0 0;
  display: flex
}

.no-pocket>span {
  flex-direction: column;
  gap: 4px;
  display: flex
}

.no-pocket b {
  font-size: 10px
}

.no-pocket small {
  color: #6f7b75;
  max-width: 290px;
  font-size: 8px;
  line-height: 1.4
}

.no-pocket>button {
  color: #55f2b2;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 8px;
  display: flex
}

.no-pocket>button svg {
  width: 11px
}

.binding-security {
  color: #59665f;
  gap: 8px;
  margin: 17px 0 0;
  font-size: 8px;
  line-height: 1.5;
  display: flex
}

.binding-security svg {
  flex: none;
  width: 14px
}

.pocket-identity-card {
  background: radial-gradient(circle at 92% 10%, #55f2b21c, #0000 31%), #0f1514d1;
  border: 1px solid #55f2b226;
  border-left: 3px solid #55f2b2;
  border-radius: 4px 20px 20px 4px;
  padding: 27px;
  position: relative;
  overflow: hidden
}

.pocket-identity-card>header {
  justify-content: space-between;
  align-items: flex-start;
  display: flex
}

.pocket-identity-card header>div>span {
  font: 650 8px var(--font-data);
  letter-spacing: .13em;
  color: #55f2b2;
  align-items: center;
  gap: 8px;
  display: flex
}

.pocket-identity-card header>div>span i {
  background: #55f2b2;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 6px #55f2b212
}

.pocket-identity-card h2 {
  margin: 9px 0 5px;
  font-size: 30px
}

.pocket-identity-card header p {
  color: #7e8a84;
  margin: 0;
  font-size: 10px
}

.pocket-identity-card header>svg {
  color: #55f2b2;
  width: 40px
}

.identity-evidence {
  grid-template-columns: 1fr 34px 1fr 34px 1fr;
  align-items: center;
  gap: 5px;
  margin-top: 24px;
  display: grid
}

.identity-evidence article {
  background: #ffffff06;
  border: 1px solid #ffffff17;
  border-radius: 3px 12px 12px 3px;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
  padding: 15px;
  display: flex
}

.identity-evidence article small {
  font: 600 7px var(--font-data);
  letter-spacing: .1em;
  color: #63716a
}

.identity-evidence article b {
  font: 650 14px var(--font-data);
  color: #e6eeea
}

.identity-evidence article span {
  color: #55f2b2;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  font-size: 8px;
  display: flex
}

.identity-evidence article span svg {
  width: 11px
}

.identity-evidence>i {
  color: #55625c;
  place-items: center;
  display: grid
}

.identity-evidence>i svg {
  width: 14px
}

.identity-details {
  background: #ffffff14;
  border: 1px solid #ffffff14;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 10px;
  display: grid
}

.identity-details>span {
  background: #101615;
  flex-direction: column;
  gap: 5px;
  min-height: 67px;
  padding: 12px;
  display: flex
}

.identity-details b {
  font-size: 8px
}

.identity-details small {
  color: #6f7c75;
  font-size: 8px
}

.identity-toggle {
  color: #55f2b2;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
  font-size: 8px;
  display: flex
}

.identity-toggle svg {
  width: 11px
}

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

@media (width<=760px) {
  .pocket-shell {
    padding: 24px 16px 90px
  }

  .binding-progress {
    margin-bottom: 35px
  }

  .binding-progress>span b {
    display: none
  }

  .binding-progress>em {
    margin: 0 7px
  }

  .pocket-layout {
    flex-direction: column;
    gap: 38px;
    display: flex
  }

  .pocket-copy h1 {
    font-size: 47px
  }

  .pocket-copy>p {
    font-size: 13px
  }

  .pocket-card {
    width: 100%;
    padding: 23px 18px
  }

  .pocket-card h2 {
    font-size: 27px
  }

  .no-pocket {
    flex-direction: column;
    align-items: flex-start
  }

  .identity-evidence {
    grid-template-columns: 1fr
  }

  .identity-evidence>i {
    transform: rotate(90deg)
  }

  .identity-details {
    grid-template-columns: 1fr 1fr
  }

  .pocket-identity-card {
    padding: 21px 16px
  }

  .pocket-identity-card h2 {
    font-size: 24px
  }

  .pocket-identity-card header>svg {
    width: 28px
  }

  .pocket-identity-card header p,
  .identity-toggle {
    font-size: 9px
  }
}

.session-os-page {
  --session-green: #55f2b2;
  --session-blue: #8da2ff;
  --session-red: #ff786f;
  --session-gold: #e3bc78;
  gap: 16px
}

.session-account-strip {
  background: linear-gradient(90deg, #55f2b212, #0f1415e0 35%, #0f1415bf);
  border: 1px solid #ffffff1a;
  border-radius: 4px 16px 16px 4px;
  grid-template-columns: 1.5fr .65fr .65fr auto;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 0 19px;
  display: grid;
  box-shadow: 0 18px 55px #0000002e
}

.session-account-strip>div {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  display: flex
}

.session-account-strip small {
  font: 650 7px/1 var(--font-data);
  letter-spacing: .13em;
  color: #6e7d76
}

.session-account-strip b {
  color: #edf4f0;
  font-size: 12px
}

.session-account-identity {
  grid-template-columns: 34px 1fr;
  align-items: center;
  display: grid !important
}

.session-account-identity>svg {
  width: 25px;
  color: var(--session-green)
}

.session-account-identity span {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  display: flex
}

.session-account-strip>button {
  color: var(--session-green);
  white-space: nowrap;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  display: flex
}

.session-account-strip>button svg {
  width: 12px
}

.session-stage-nav {
  background: #0c1112c7;
  border: 1px solid #ffffff1a;
  border-radius: 4px 15px 15px 4px;
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  overflow: hidden
}

.session-stage-nav>span {
  color: #59665f;
  border-right: 1px solid #ffffff14;
  grid-template-columns: 31px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 13px 16px;
  display: grid;
  position: relative
}

.session-stage-nav>span:last-child {
  border: 0
}

.session-stage-nav>span:after {
  content: "";
  background: var(--session-green);
  height: 2px;
  transition: right .35s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 100%
}

.session-stage-nav>span>i {
  width: 29px;
  height: 29px;
  font: 650 9px var(--font-data);
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  place-items: center;
  font-style: normal;
  display: grid
}

.session-stage-nav>span>i svg {
  width: 12px
}

.session-stage-nav>span>span {
  flex-direction: column;
  gap: 4px;
  display: flex
}

.session-stage-nav b {
  color: #8a9690;
  font-size: 11px
}

.session-stage-nav small {
  color: #58655e;
  font-size: 7px
}

.session-stage-nav>span.done,
.session-stage-nav>span.active {
  color: #d8e4de;
  background: linear-gradient(90deg, #55f2b20e, #0000)
}

.session-stage-nav>span.done>i {
  color: var(--session-green);
  border-color: #55f2b259
}

.session-stage-nav>span.active>i {
  background: var(--session-green);
  border-color: var(--session-green);
  color: #06110d;
  box-shadow: 0 0 0 7px #55f2b20d
}

.session-stage-nav>span.active b {
  color: #fff
}

.session-stage-nav>span.active:after,
.session-stage-nav>span.done:after {
  right: 0
}

.session-stage-nav>span.skipped {
  opacity: .38
}

.session-stage-nav>span.skipped>i {
  border-style: dashed
}

.session-os-grid {
  grid-template-columns: minmax(0, 1.48fr) minmax(300px, .52fr);
  align-items: start;
  gap: 14px;
  display: grid
}

.session-signal-command {
  border: 1px solid #55f2b23d;
  border-left: 3px solid var(--session-green);
  background: radial-gradient(circle at 82% 18%, #55f2b221, #0000 29%), linear-gradient(145deg, #12201b, #0a0f10 64%);
  border-radius: 4px 24px 24px 4px;
  min-height: 670px;
  padding: 27px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 42px 115px #00000061, inset 0 1px #ffffff0a
}

.session-signal-command:before {
  content: "AM / 01";
  font: 700 clamp(70px, 8vw, 124px)/.8 var(--font-display);
  letter-spacing: -.08em;
  color: #ffffff06;
  pointer-events: none;
  position: absolute;
  top: 118px;
  right: 22px
}

.session-signal-command>* {
  z-index: 2;
  position: relative
}

.session-signal-head {
  min-height: 42px;
  font: 650 8px/1.2 var(--font-data);
  letter-spacing: .11em;
  border-bottom: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  display: flex
}

.session-signal-head>span {
  color: #a9b6b0;
  align-items: center;
  gap: 9px;
  display: flex
}

.session-signal-head>span i {
  background: var(--session-green);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  animation: 1.8s ease-in-out infinite sessionPulse;
  box-shadow: 0 0 0 6px #55f2b20f, 0 0 18px #55f2b299
}

.session-signal-head>b {
  color: var(--session-green);
  align-items: center;
  gap: 7px;
  display: flex
}

.session-signal-head>b svg {
  width: 13px
}

.session-signal-body {
  align-items: center;
  min-height: 268px;
  display: flex;
  position: relative
}

.session-signal-body>div:first-child {
  z-index: 2;
  position: relative
}

.session-signal-body small {
  font: 650 8px var(--font-data);
  letter-spacing: .16em;
  color: #8b9992
}

.session-signal-body h2 {
  font: 620 clamp(53px, 5.4vw, 82px)/.88 var(--font-display);
  letter-spacing: -.07em;
  color: #fff;
  margin: 17px 0 12px
}

.session-signal-body h2 em {
  color: #77867f;
  font-style: normal;
  font-weight: 500
}

.session-signal-body strong {
  text-transform: uppercase;
  color: var(--session-green);
  align-items: center;
  gap: 10px;
  font-size: 27px;
  font-weight: 620;
  display: flex
}

.session-signal-body strong svg {
  width: 27px;
  transform: rotate(-45deg)
}

.session-market-mark {
  opacity: .63;
  width: 58%;
  height: 185px;
  position: absolute;
  bottom: 8px;
  right: -28px;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 24%);
  mask-image: linear-gradient(90deg, #0000, #000 24%)
}

.session-market-mark>span {
  background: #ffffff0b;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0
}

.session-market-mark>span:first-child {
  left: 20%
}

.session-market-mark>span:nth-child(2) {
  left: 40%
}

.session-market-mark>span:nth-child(3) {
  left: 60%
}

.session-market-mark>span:nth-child(4) {
  left: 80%
}

.session-market-mark:before,
.session-market-mark:after {
  content: "";
  background: #ffffff0a;
  height: 1px;
  position: absolute;
  left: 0;
  right: 0
}

.session-market-mark:before {
  top: 33%
}

.session-market-mark:after {
  top: 66%
}

.session-market-mark svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible
}

.session-market-mark path:first-child {
  fill: none;
  stroke: var(--session-green);
  stroke-width: 2px;
  filter: drop-shadow(0 0 8px #55f2b2a6);
  stroke-dasharray: 520;
  stroke-dashoffset: 520px;
  animation: 2.2s .2s forwards sessionDraw
}

.session-market-mark path:last-child {
  fill: #55f2b20f;
  stroke: 0
}

.session-facts {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #04080857;
  border: 1px solid #ffffff1a;
  border-radius: 3px 13px 13px 3px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 16px;
  display: grid;
  overflow: hidden
}

.session-facts>span {
  border-right: 1px solid #ffffff17;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 73px;
  padding: 14px;
  display: flex
}

.session-facts>span:last-child {
  border: 0
}

.session-facts small {
  font: 650 7px var(--font-data);
  letter-spacing: .12em;
  color: #65736c
}

.session-facts b {
  color: #e7eeea;
  font-size: 12px
}

.session-decision-panel,
.session-result-panel {
  background: linear-gradient(100deg, #55f2b212, #ffffff05);
  border: 1px solid #ffffff17;
  border-radius: 3px 15px 15px 3px;
  grid-template-columns: 1fr .88fr;
  align-items: center;
  gap: 24px;
  min-height: 160px;
  padding: 21px;
  display: grid
}

.session-decision-panel small,
.session-deal-cockpit>div:last-child>small,
.session-result-panel>div:first-child>small,
.session-review-copy>small {
  font: 650 7px var(--font-data);
  letter-spacing: .15em;
  color: var(--session-green)
}

.session-decision-panel h3,
.session-deal-cockpit h3,
.session-result-panel h3,
.session-review-copy h3 {
  letter-spacing: -.03em;
  margin: 8px 0;
  font-size: 24px
}

.session-decision-panel p,
.session-deal-cockpit p,
.session-result-panel p,
.session-review-copy>p {
  color: #7e8b84;
  margin: 0;
  font-size: 10px;
  line-height: 1.55
}

.session-decision-actions,
.session-deal-actions,
.session-review-actions {
  flex-direction: column;
  gap: 8px;
  display: flex
}

.session-decision-actions [data-slot=button],
.session-deal-actions [data-slot=button],
.session-review-actions [data-slot=button] {
  border-radius: 3px 11px 11px 3px;
  height: 48px;
  font-size: 10px
}

.session-decision-actions [data-slot=button]:first-child,
.session-deal-actions [data-slot=button]:first-child,
.session-review-actions [data-slot=button]:first-child {
  background: var(--session-green);
  color: #06110d
}

.session-decision-actions svg,
.session-deal-actions svg,
.session-review-actions svg {
  width: 15px
}

.session-deal-cockpit {
  background: linear-gradient(110deg, #8da2ff14, #ffffff04);
  border: 1px solid #8da2ff2e;
  border-radius: 3px 16px 16px 3px;
  grid-template-columns: 210px 1fr;
  align-items: center;
  gap: 25px;
  min-height: 194px;
  padding: 20px;
  display: grid
}

.session-amount-orb {
  aspect-ratio: 1;
  background: radial-gradient(circle, #55f2b221, #55f2b206 66%, #0000 68%);
  border: 1px solid #55f2b238;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  box-shadow: inset 0 0 45px #55f2b20f, 0 0 55px #55f2b20a
}

.session-amount-orb small {
  font: 650 7px var(--font-data);
  letter-spacing: .13em;
  color: #78867f
}

.session-amount-orb strong {
  font: 620 42px var(--font-display);
  letter-spacing: -.055em;
  color: #fff;
  margin: 10px 0 5px
}

.session-amount-orb span {
  text-align: center;
  color: #718078;
  max-width: 130px;
  font-size: 8px;
  line-height: 1.4
}

.session-deal-actions {
  grid-template-columns: 1.3fr 1fr;
  margin-top: 17px;
  display: grid
}

.session-deal-actions [data-slot=button]:disabled {
  opacity: .35;
  cursor: not-allowed
}

.session-result-panel {
  background: linear-gradient(100deg, #8da2ff12, #ffffff04);
  border-color: #8da2ff2e;
  grid-template-columns: .9fr 1.1fr
}

.session-result-panel>div:first-child>small {
  color: var(--session-blue)
}

.session-outcome-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  display: grid
}

.session-outcome-grid button {
  color: #e4ece8;
  text-align: left;
  background: #ffffff06;
  border: 1px solid #ffffff1a;
  border-radius: 3px 11px 11px 3px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 4px;
  min-height: 112px;
  padding: 13px;
  transition: transform .2s, border-color .2s;
  display: flex
}

.session-outcome-grid button:hover {
  transform: translateY(-3px)
}

.session-outcome-grid button>svg {
  width: 18px;
  margin-bottom: auto
}

.session-outcome-grid button.win>svg {
  color: var(--session-green);
  transform: rotate(-45deg)
}

.session-outcome-grid button.loss>svg {
  color: var(--session-red);
  transform: rotate(45deg)
}

.session-outcome-grid button.flat>svg {
  color: var(--session-blue)
}

.session-outcome-grid b {
  font-size: 12px
}

.session-outcome-grid small {
  color: #718078;
  font-size: 7px;
  line-height: 1.35
}

.session-review-panel {
  background: linear-gradient(115deg, #e3bc7814, #ffffff04);
  border: 1px solid #e3bc7833;
  border-radius: 3px 17px 17px 3px;
  grid-template-columns: 180px 1fr;
  gap: 29px;
  min-height: 288px;
  padding: 23px;
  display: grid
}

.session-discipline-score {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex
}

.session-discipline-score>span {
  border: 1px solid #e3bc7840;
  border-top-color: var(--session-gold);
  background: radial-gradient(circle, #e3bc781f, #0000 65%);
  border-radius: 50%;
  justify-content: center;
  align-items: baseline;
  width: 145px;
  height: 145px;
  display: flex;
  box-shadow: 0 0 0 9px #e3bc7806
}

.session-discipline-score strong {
  letter-spacing: -.06em;
  color: #f0d6a8;
  align-self: center;
  font-size: 47px;
  font-weight: 580
}

.session-discipline-score small {
  font: 650 8px var(--font-data);
  color: #796f5e;
  align-self: center
}

.session-discipline-score>b {
  color: #b7ab95;
  margin-top: 14px;
  font-size: 10px
}

.session-review-copy>small {
  color: var(--session-gold)
}

.session-review-checks {
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0;
  display: flex
}

.session-review-checks span {
  color: #95a49c;
  background: #55f2b209;
  border: 1px solid #55f2b21f;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  font-size: 7px;
  display: flex
}

.session-review-checks svg {
  width: 10px;
  color: var(--session-green)
}

.session-review-copy label {
  flex-direction: column;
  gap: 6px;
  display: flex
}

.session-review-copy label>span {
  color: #77847d;
  font-size: 8px
}

.session-review-copy textarea {
  resize: vertical;
  color: #fff;
  min-height: 54px;
  font: 400 10px var(--font-ui);
  background: #00000038;
  border: 1px solid #ffffff1a;
  border-radius: 3px 9px 9px 3px;
  outline: none;
  padding: 10px 12px
}

.session-review-copy textarea:focus {
  border-color: #e3bc7859
}

.session-review-actions {
  grid-template-columns: 1.3fr 1fr;
  margin-top: 10px;
  display: grid
}

.session-review-actions [data-slot=button]:first-child {
  background: var(--session-gold);
  color: #151008
}

.session-control-rail {
  flex-direction: column;
  gap: 13px;
  display: flex
}

.session-risk-guard,
.session-room-v2 {
  background: #0e1314e0;
  border: 1px solid #ffffff1a;
  border-radius: 4px 18px 18px 4px;
  padding: 21px
}

.session-risk-guard {
  border-top: 2px solid var(--session-green);
  background: radial-gradient(circle at 90% 0, #55f2b21a, #0000 34%), #0e1413
}

.session-risk-guard>header,
.session-room-v2>header {
  justify-content: space-between;
  align-items: flex-start;
  display: flex
}

.session-risk-guard header small,
.session-room-v2 header small {
  font: 650 7px var(--font-data);
  letter-spacing: .15em;
  color: #6f7d76
}

.session-risk-guard h3,
.session-room-v2 h3 {
  margin: 7px 0 0;
  font-size: 19px
}

.session-risk-guard header>svg {
  width: 26px;
  color: var(--session-green)
}

.session-risk-ladder {
  border-top: 1px solid #ffffff14;
  margin: 24px 0 16px
}

.session-risk-ladder>span {
  color: #68756e;
  border-bottom: 1px solid #ffffff14;
  grid-template-columns: 29px 55px 1fr 18px;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  display: grid
}

.session-risk-ladder i {
  font: 650 7px var(--font-data);
  color: #55635c;
  font-style: normal
}

.session-risk-ladder b {
  font-size: 17px
}

.session-risk-ladder small {
  font-size: 8px
}

.session-risk-ladder svg {
  width: 13px
}

.session-risk-ladder .current {
  color: #eaf2ee;
  background: linear-gradient(90deg, #55f2b214, #0000)
}

.session-risk-ladder .current i,
.session-risk-ladder .current b {
  color: var(--session-green)
}

.session-risk-ladder .locked {
  opacity: .55
}

.session-risk-ladder .stop b {
  color: var(--session-red);
  letter-spacing: .08em;
  font-size: 12px
}

.session-risk-guard>p {
  color: #68756e;
  margin: 0;
  font-size: 8px;
  line-height: 1.55
}

.session-room-v2 {
  border-top: 2px solid var(--session-blue);
  background: radial-gradient(circle at 90% 0, #8da2ff1a, #0000 34%), #10141b
}

.session-room-v2>header {
  border-bottom: 1px solid #ffffff14;
  padding-bottom: 17px
}

.session-room-v2 header>b {
  color: #91a4b5;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  display: flex
}

.session-room-v2 header>b i {
  background: var(--session-green);
  border-radius: 50%;
  width: 5px;
  height: 5px
}

.session-room-message {
  border-bottom: 1px solid #ffffff12;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  padding: 13px 0;
  display: grid
}

.session-room-message>i {
  color: #cbd7e7;
  width: 28px;
  height: 28px;
  font: 650 7px var(--font-data);
  background: #202a35;
  border-radius: 8px;
  place-items: center;
  font-style: normal;
  display: grid
}

.session-room-message.featured>i {
  background: linear-gradient(135deg, var(--session-green), #287157);
  color: #07110d
}

.session-room-message p {
  color: #8f9ca8;
  margin: 0;
  font-size: 8px;
  line-height: 1.45
}

.session-room-message p>b {
  color: #e7edf4;
  margin-bottom: 3px;
  font-size: 9px;
  display: block
}

.session-room-message p small {
  color: #56636f;
  margin-left: 5px;
  font-size: 7px
}

.session-room-v2>button {
  color: #b9c6e7;
  background: #8da2ff0d;
  border: 1px solid #8da2ff29;
  border-radius: 3px 9px 9px 3px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 41px;
  margin-top: 14px;
  font-size: 9px;
  display: flex
}

.session-room-v2>button svg {
  width: 13px
}

.session-truth-note {
  background: #55f2b209;
  border: 1px solid #55f2b21f;
  border-radius: 3px 13px 13px 3px;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 14px 17px;
  display: flex
}

.session-truth-note>svg {
  width: 22px;
  color: var(--session-green);
  flex: none
}

.session-truth-note b {
  font-size: 10px
}

.session-truth-note p {
  color: #6f7c75;
  margin: 4px 0 0;
  font-size: 8px;
  line-height: 1.45
}

@keyframes sessionPulse {
  50% {
    opacity: .45;
    box-shadow: 0 0 0 10px #55f2b200, 0 0 25px #55f2b2cc
  }
}

@keyframes sessionDraw {
  to {
    stroke-dashoffset: 0
  }
}

@media (width<=1100px) {
  .session-os-grid {
    grid-template-columns: 1fr
  }

  .session-control-rail {
    grid-template-columns: 1fr 1fr;
    display: grid
  }

  .session-signal-command {
    min-height: auto
  }
}

@media (width<=760px) {
  .session-os-page {
    gap: 12px
  }

  .session-os-page .page-title {
    min-height: 112px
  }

  .session-account-strip {
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    padding: 14px
  }

  .session-account-identity {
    border-bottom: 1px solid #ffffff14;
    grid-column: 1/3;
    padding-bottom: 12px
  }

  .session-account-strip>button {
    border-top: 1px solid #ffffff14;
    grid-column: 1/3;
    justify-content: center;
    min-height: 32px
  }

  .session-stage-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .session-stage-nav>span {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 62px;
    padding: 8px 2px;
    display: flex
  }

  .session-stage-nav>span>i {
    width: 24px;
    height: 24px
  }

  .session-stage-nav>span>span small {
    display: none
  }

  .session-stage-nav b {
    font-size: 8px
  }

  .session-signal-command {
    border-radius: 3px 17px 17px 3px;
    padding: 18px 15px
  }

  .session-signal-command:before {
    font-size: 75px;
    top: 110px
  }

  .session-signal-head {
    gap: 12px;
    font-size: 7px
  }

  .session-signal-head>b {
    text-align: right;
    max-width: 135px
  }

  .session-signal-body {
    min-height: 225px
  }

  .session-signal-body h2 {
    max-width: 300px;
    font-size: 47px;
    line-height: .9
  }

  .session-signal-body strong {
    font-size: 23px
  }

  .session-market-mark {
    opacity: .42;
    width: 82%;
    height: 145px;
    right: -40px
  }

  .session-facts {
    grid-template-columns: 1fr 1fr
  }

  .session-facts>span {
    min-height: 62px
  }

  .session-facts>span:nth-child(2) {
    border-right: 0
  }

  .session-facts>span:nth-child(-n+2) {
    border-bottom: 1px solid #ffffff17
  }

  .session-decision-panel,
  .session-result-panel {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 17px
  }

  .session-decision-panel h3,
  .session-deal-cockpit h3,
  .session-result-panel h3,
  .session-review-copy h3 {
    font-size: 21px
  }

  .session-decision-actions {
    grid-template-columns: 1fr;
    display: grid
  }

  .session-deal-cockpit {
    grid-template-columns: 1fr;
    padding: 18px
  }

  .session-amount-orb {
    justify-self: center;
    width: 168px
  }

  .session-deal-actions,
  .session-review-actions,
  .session-outcome-grid {
    grid-template-columns: 1fr
  }

  .session-outcome-grid button {
    grid-template-columns: 25px 1fr;
    justify-content: start;
    align-items: center;
    min-height: 77px;
    display: grid
  }

  .session-outcome-grid button>svg {
    grid-row: 1/3;
    margin: 0
  }

  .session-review-panel {
    grid-template-columns: 1fr;
    padding: 18px
  }

  .session-discipline-score>span {
    width: 120px;
    height: 120px
  }

  .session-discipline-score strong {
    font-size: 40px
  }

  .session-control-rail {
    display: flex
  }

  .session-risk-guard,
  .session-room-v2 {
    padding: 18px
  }

  .session-truth-note {
    align-items: flex-start
  }
}

@media (prefers-reduced-motion:reduce) {

  .session-signal-head>span i,
  .session-market-mark path:first-child {
    stroke-dashoffset: 0;
    animation: none
  }
}

.signal-hub-page {
  --hub-green: #55f2b2;
  --hub-blue: #8da2ff;
  --hub-violet: #b39cff;
  --hub-gold: #e3bc78;
  gap: 15px
}

.signal-hub-summary {
  background: linear-gradient(90deg, #55f2b212, #0f1415db 36%, #0f1415b8);
  border: 1px solid #ffffff1a;
  border-radius: 4px 16px 16px 4px;
  grid-template-columns: 1.55fr repeat(3, .72fr);
  align-items: center;
  gap: 17px;
  min-height: 76px;
  padding: 0 18px;
  display: grid
}

.signal-hub-summary>div {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  display: flex
}

.signal-hub-summary small {
  font: 650 7px/1 var(--font-data);
  letter-spacing: .13em;
  color: #6c7973
}

.signal-hub-summary b {
  color: #edf4f0;
  font-size: 12px
}

.signal-hub-identity {
  grid-template-columns: 34px 1fr;
  align-items: center;
  display: grid !important
}

.signal-hub-identity>svg {
  width: 24px;
  color: var(--hub-green)
}

.signal-hub-identity>span {
  flex-direction: column;
  gap: 5px;
  display: flex
}

.signal-hub-tabs {
  scrollbar-width: none;
  align-items: center;
  gap: 5px;
  display: flex;
  overflow-x: auto
}

.signal-hub-tabs::-webkit-scrollbar {
  display: none
}

.signal-hub-tabs button {
  color: #718078;
  background: #ffffff06;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  min-width: max-content;
  height: 38px;
  padding: 0 16px;
  font-size: 9px
}

.signal-hub-tabs button.active {
  color: #07110d;
  background: #eef5f1;
  border-color: #eef5f1
}

.signal-hub-workspace {
  grid-template-columns: 350px minmax(0, 1fr);
  align-items: stretch;
  gap: 13px;
  display: grid
}

.signal-stream-list {
  background: #0d1213de;
  border: 1px solid #ffffff1a;
  border-radius: 4px 18px 18px 4px;
  min-height: 700px;
  overflow: hidden
}

.signal-stream-list>header {
  border-bottom: 1px solid #ffffff17;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  padding: 15px 17px;
  display: flex
}

.signal-stream-list header>span {
  flex-direction: column;
  gap: 5px;
  display: flex
}

.signal-stream-list header small {
  font: 650 7px var(--font-data);
  letter-spacing: .15em;
  color: var(--hub-green)
}

.signal-stream-list header b {
  color: #9aa7a0;
  font-size: 10px
}

.signal-stream-list header>svg {
  color: #627069;
  width: 17px
}

.signal-stream-list>div {
  scrollbar-width: thin;
  scrollbar-color: #29322e transparent;
  max-height: 628px;
  overflow: auto
}

.signal-stream-list button {
  color: #7b8882;
  text-align: left;
  background: 0 0;
  border: 0;
  border-bottom: 1px solid #ffffff13;
  grid-template-columns: 32px 1fr 24px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 78px;
  padding: 12px 14px;
  transition: background .2s, color .2s;
  display: grid
}

.signal-stream-list button:hover {
  background: #ffffff06
}

.signal-stream-list button.active {
  color: #eef5f1;
  box-shadow: inset 2px 0 var(--hub-green);
  background: linear-gradient(90deg, #55f2b21f, #55f2b204)
}

.signal-stream-list button.locked {
  opacity: .55
}

.stream-state {
  background: #ffffff08;
  border: 1px solid #ffffff1a;
  border-radius: 9px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-style: normal;
  display: grid
}

.stream-state svg {
  width: 14px
}

.stream-state.live {
  color: var(--hub-green);
  background: #55f2b214;
  border-color: #55f2b23b;
  box-shadow: 0 0 24px #55f2b20d
}

.stream-state.soon {
  color: var(--hub-blue)
}

.signal-stream-list button>span {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex
}

.signal-stream-list button small {
  font: 650 7px var(--font-data);
  letter-spacing: .11em;
  color: #63716a
}

.signal-stream-list button b {
  color: inherit;
  font-size: 11px
}

.signal-stream-list button em {
  color: #647169;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  font-style: normal;
  overflow: hidden
}

.signal-stream-list button>strong {
  font: 650 9px var(--font-data);
  color: #57645e
}

.signal-command-card {
  border: 1px solid #55f2b240;
  border-left: 3px solid var(--hub-green);
  background: radial-gradient(circle at 82% 19%, #55f2b226, #0000 29%), linear-gradient(145deg, #12211c, #080d0e 67%);
  border-radius: 4px 24px 24px 4px;
  flex-direction: column;
  min-width: 0;
  min-height: 700px;
  padding: 27px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 42px 115px #00000061, inset 0 1px #ffffff0a
}

.signal-command-card:before {
  content: "SIGNAL";
  color: #ffffff06;
  font: 700 clamp(74px, 9vw, 140px) / .8 var(--font-display);
  letter-spacing: -.08em;
  pointer-events: none;
  position: absolute;
  top: 122px;
  right: -10px
}

.signal-command-card.locked {
  border-color: #e3bc7838;
  border-left-color: var(--hub-gold);
  background: radial-gradient(circle at 82% 19%, #e3bc781f, #0000 29%), linear-gradient(145deg, #201a12, #0b0e0e 67%)
}

.signal-command-card>* {
  z-index: 2;
  position: relative
}

.signal-command-card>header {
  border-bottom: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  min-height: 43px;
  padding-bottom: 18px;
  display: flex
}

.signal-command-card>header>span {
  color: #a6b4ad;
  font: 650 8px var(--font-data);
  letter-spacing: .13em;
  align-items: center;
  gap: 9px;
  display: flex
}

.signal-command-card>header>span i {
  background: #718078;
  border-radius: 50%;
  width: 7px;
  height: 7px
}

.signal-command-card>header>span i.live {
  background: var(--hub-green);
  box-shadow: 0 0 0 6px #55f2b212, 0 0 18px #55f2b28c
}

.signal-command-card>header>div {
  align-items: center;
  gap: 11px;
  display: flex
}

.signal-command-card>header button {
  color: #718078;
  background: #ffffff06;
  border: 1px solid #ffffff1a;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 10px;
  font-size: 7px;
  display: flex
}

.signal-command-card>header button.active {
  color: var(--hub-green);
  border-color: #55f2b22e
}

.signal-command-card>header button svg {
  width: 12px
}

.signal-command-card>header>div>b {
  color: var(--hub-green);
  font: 650 8px var(--font-data)
}

.signal-command-main {
  align-items: center;
  min-height: 365px;
  display: flex;
  position: relative
}

.signal-command-main>div:first-child {
  z-index: 2;
  position: relative
}

.signal-command-main small {
  color: #8b9992;
  font: 650 8px var(--font-data);
  letter-spacing: .16em;
  text-transform: uppercase
}

.signal-command-main h2 {
  color: #fff;
  max-width: 690px;
  font: 620 clamp(60px, 6.5vw, 102px) / .86 var(--font-display);
  letter-spacing: -.075em;
  margin: 18px 0 13px
}

.signal-command-main h2 em {
  color: #77867f;
  font-style: normal;
  font-weight: 500
}

.signal-command-main strong {
  color: var(--hub-green);
  text-transform: uppercase;
  align-items: center;
  gap: 10px;
  font-size: 29px;
  font-weight: 620;
  display: flex
}

.signal-command-main strong svg {
  width: 29px;
  transform: rotate(-45deg)
}

.signal-command-chart {
  opacity: .58;
  width: 66%;
  height: 210px;
  position: absolute;
  bottom: 27px;
  right: -28px;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 23%);
  mask-image: linear-gradient(90deg, #0000, #000 23%)
}

.signal-command-chart>span {
  background: #ffffff0a;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0
}

.signal-command-chart>span:first-child {
  left: 16.6%
}

.signal-command-chart>span:nth-child(2) {
  left: 33.2%
}

.signal-command-chart>span:nth-child(3) {
  left: 49.8%
}

.signal-command-chart>span:nth-child(4) {
  left: 66.4%
}

.signal-command-chart>span:nth-child(5) {
  left: 83%
}

.signal-command-chart:before,
.signal-command-chart:after {
  content: "";
  background: #ffffff0a;
  height: 1px;
  position: absolute;
  left: 0;
  right: 0
}

.signal-command-chart:before {
  top: 33%
}

.signal-command-chart:after {
  top: 66%
}

.signal-command-chart svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.signal-command-chart path:first-child {
  fill: none;
  stroke: var(--hub-green);
  stroke-width: 2px;
  filter: drop-shadow(0 0 7px #55f2b2a6)
}

.signal-command-chart path:last-child {
  fill: #55f2b20d
}

.signal-trade-generator {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #03070763;
  border: 1px solid #ffffff1a;
  border-radius: 3px 16px 16px 3px;
  grid-template-rows: 1fr 52px;
  grid-template-columns: 180px 1fr;
  gap: 12px 17px;
  min-height: 200px;
  margin-top: auto;
  padding: 17px;
  display: grid
}

.signal-generated-amount {
  background: radial-gradient(circle at 50% 40%, #55f2b21c, #0000 69%);
  border: 1px solid #55f2b22e;
  border-radius: 3px 12px 12px 3px;
  flex-direction: column;
  grid-row: 1/3;
  justify-content: center;
  padding: 18px;
  display: flex
}

.signal-generated-amount small,
.signal-generator-facts small {
  color: #6c7a73;
  font: 650 7px var(--font-data);
  letter-spacing: .12em
}

.signal-generated-amount strong {
  color: #fff;
  letter-spacing: -.055em;
  margin: 8px 0 4px;
  font-size: 43px;
  font-weight: 580
}

.signal-generated-amount span {
  color: #78867f;
  font-size: 8px
}

.signal-generator-facts {
  border: 1px solid #ffffff14;
  border-radius: 3px 10px 10px 3px;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  overflow: hidden
}

.signal-generator-facts>span {
  border-right: 1px solid #ffffff14;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 78px;
  padding: 12px;
  display: flex
}

.signal-generator-facts>span:last-child {
  border: 0
}

.signal-generator-facts b {
  color: #dce5e0;
  font-size: 9px
}

.signal-trade-generator>[data-slot=button] {
  background: var(--hub-green);
  color: #06110d;
  border-radius: 3px 11px 11px 3px;
  height: 52px;
  font-size: 10px
}

.signal-trade-generator>[data-slot=button] svg {
  width: 14px
}

.signal-access-gate {
  background: #e3bc780b;
  border: 1px solid #e3bc782e;
  border-radius: 3px 15px 15px 3px;
  grid-template-columns: 1fr 190px;
  align-items: center;
  gap: 20px;
  min-height: 184px;
  margin-top: auto;
  padding: 20px;
  display: grid
}

.signal-access-gate>div {
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 15px;
  display: grid
}

.signal-access-gate>div>svg {
  width: 34px;
  color: var(--hub-gold)
}

.signal-access-gate small {
  color: var(--hub-gold);
  font: 650 7px var(--font-data);
  letter-spacing: .13em
}

.signal-access-gate h3 {
  margin: 7px 0;
  font-size: 23px
}

.signal-access-gate p {
  color: #867e70;
  margin: 0;
  font-size: 9px;
  line-height: 1.5
}

.signal-access-gate>[data-slot=button] {
  background: var(--hub-gold);
  color: #151008;
  height: 50px;
  font-size: 9px
}

.signal-day-schedule {
  background: #0e1314c7;
  border: 1px solid #ffffff1a;
  border-radius: 4px 18px 18px 4px;
  padding: 23px
}

.signal-day-schedule>header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  display: flex
}

.signal-day-schedule header small {
  color: var(--hub-green);
  font: 650 7px var(--font-data);
  letter-spacing: .14em
}

.signal-day-schedule h2 {
  margin: 6px 0 0;
  font-size: 26px
}

.signal-day-schedule header>span {
  color: #718078;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  display: flex
}

.signal-day-schedule header>span svg {
  width: 13px
}

.signal-day-schedule>div {
  grid-template-columns: repeat(6, 1fr);
  margin-top: 27px;
  display: grid;
  position: relative
}

.signal-day-schedule>div:before {
  content: "";
  background: linear-gradient(90deg, var(--hub-green) 0 25%, #ffffff1a 25%);
  height: 1px;
  position: absolute;
  top: 35px;
  left: 5%;
  right: 5%
}

.signal-day-schedule button {
  z-index: 2;
  color: #66736d;
  text-align: left;
  background: 0 0;
  border: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  padding: 0 8px;
  display: flex;
  position: relative
}

.signal-day-schedule button small {
  font: 650 8px var(--font-data)
}

.signal-day-schedule button i {
  background: #56635d;
  border: 3px solid #13191a;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 9px 0;
  box-shadow: 0 0 0 1px #ffffff1f
}

.signal-day-schedule button.live i {
  background: var(--hub-green);
  box-shadow: 0 0 0 1px var(--hub-green), 0 0 18px #55f2b275
}

.signal-day-schedule button b {
  color: #dce5e0;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 10px;
  overflow: hidden
}

.signal-day-schedule button span {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 7px;
  overflow: hidden
}

.signal-hub-truth {
  background: #55f2b209;
  border: 1px solid #55f2b21f;
  border-radius: 3px 13px 13px 3px;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 74px;
  padding: 14px 17px;
  display: grid
}

.signal-hub-truth>svg {
  width: 22px;
  color: var(--hub-green)
}

.signal-hub-truth b {
  font-size: 10px
}

.signal-hub-truth p {
  color: #6f7c75;
  margin: 4px 0 0;
  font-size: 8px;
  line-height: 1.45
}

.signal-hub-truth [data-slot=button] {
  height: 39px;
  font-size: 8px
}

@media (width<=1100px) {
  .signal-hub-workspace {
    grid-template-columns: 300px minmax(0, 1fr)
  }

  .signal-generated-amount {
    grid-row: auto
  }

  .signal-trade-generator {
    grid-template-rows: auto;
    grid-template-columns: 1fr
  }

  .signal-generated-amount {
    min-height: 115px
  }

  .signal-command-main h2 {
    font-size: 64px
  }
}

@media (width<=760px) {
  .signal-hub-page {
    gap: 12px
  }

  .signal-hub-summary {
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    padding: 14px
  }

  .signal-hub-identity {
    border-bottom: 1px solid #ffffff14;
    grid-column: 1/3;
    padding-bottom: 12px
  }

  .signal-hub-summary>div:last-child {
    display: none
  }

  .signal-hub-tabs button {
    height: 36px;
    padding: 0 14px
  }

  .signal-hub-workspace {
    flex-direction: column;
    display: flex
  }

  .signal-stream-list {
    min-height: 0
  }

  .signal-stream-list>div {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    max-height: none;
    display: flex;
    overflow-x: auto
  }

  .signal-stream-list>div::-webkit-scrollbar {
    display: none
  }

  .signal-stream-list button {
    scroll-snap-align: start;
    border-bottom: 0;
    border-right: 1px solid #ffffff13;
    flex: 0 0 238px;
    min-height: 94px
  }

  .signal-command-card {
    border-radius: 3px 18px 18px 3px;
    min-height: 635px;
    padding: 18px 15px
  }

  .signal-command-card:before {
    font-size: 70px;
    top: 128px
  }

  .signal-command-card>header {
    align-items: center
  }

  .signal-command-card>header>div>b {
    display: none
  }

  .signal-command-card>header button {
    justify-content: center;
    width: 31px;
    padding: 0;
    font-size: 0
  }

  .signal-command-main {
    min-height: 285px
  }

  .signal-command-main h2 {
    max-width: 305px;
    font-size: 49px
  }

  .signal-command-main strong {
    font-size: 23px
  }

  .signal-command-chart {
    opacity: .4;
    width: 90%;
    height: 155px;
    right: -45px
  }

  .signal-trade-generator {
    padding: 13px
  }

  .signal-generated-amount {
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 102px;
    padding: 14px;
    display: grid
  }

  .signal-generated-amount strong {
    grid-area: 1/2/3;
    font-size: 37px
  }

  .signal-generator-facts {
    grid-template-columns: 1fr 1fr
  }

  .signal-generator-facts>span {
    min-height: 65px
  }

  .signal-generator-facts>span:last-child {
    display: none
  }

  .signal-access-gate {
    grid-template-columns: 1fr;
    padding: 16px
  }

  .signal-access-gate>div {
    grid-template-columns: 35px 1fr
  }

  .signal-access-gate>div>svg {
    width: 27px
  }

  .signal-access-gate h3 {
    font-size: 20px
  }

  .signal-day-schedule {
    padding: 18px 15px;
    overflow: hidden
  }

  .signal-day-schedule>header {
    flex-direction: column;
    align-items: flex-start
  }

  .signal-day-schedule>div {
    scrollbar-width: none;
    margin-top: 22px;
    display: flex;
    overflow-x: auto
  }

  .signal-day-schedule>div::-webkit-scrollbar {
    display: none
  }

  .signal-day-schedule>div:before {
    left: 16px;
    right: -440px
  }

  .signal-day-schedule button {
    flex: 0 0 118px
  }

  .signal-hub-truth {
    grid-template-columns: 22px 1fr;
    align-items: flex-start
  }

  .signal-hub-truth [data-slot=button] {
    grid-column: 1/3;
    width: 100%
  }

  .signal-hub-page .page-title {
    min-height: 94px;
    padding-bottom: 12px
  }

  .signal-hub-page .page-title h1 {
    margin: 9px 0 6px;
    font-size: 37px
  }

  .signal-hub-page .page-title p {
    max-width: 300px;
    font-size: 10px;
    line-height: 1.35
  }

  .signal-hub-page .page-title .title-market,
  .signal-hub-page .page-title .balance-card {
    display: none
  }

  .signal-hub-summary {
    min-height: 54px;
    padding: 10px 13px;
    display: block
  }

  .signal-hub-summary>div:not(.signal-hub-identity) {
    display: none
  }

  .signal-hub-identity {
    border: 0;
    grid-template-columns: 29px 1fr;
    min-height: 34px;
    padding: 0
  }

  .signal-hub-identity>svg {
    width: 19px
  }

  .signal-hub-summary small {
    font-size: 6px
  }

  .signal-hub-summary b {
    font-size: 10px
  }

  .signal-hub-tabs {
    gap: 6px
  }

  .signal-hub-tabs button {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    display: none
  }

  .signal-hub-tabs button:first-child,
  .signal-hub-tabs button:nth-child(3) {
    display: block
  }

  .signal-hub-workspace {
    gap: 12px
  }

  .signal-command-card {
    order: 1;
    min-height: 474px;
    padding: 15px 13px
  }

  .signal-command-card:before,
  .signal-command-chart {
    display: none
  }

  .signal-command-card>header {
    min-height: 36px;
    padding-bottom: 12px
  }

  .signal-command-card>header>span {
    font-size: 6px
  }

  .signal-command-card>header button {
    height: 28px
  }

  .signal-command-main {
    align-items: center;
    min-height: 205px
  }

  .signal-command-main small {
    font-size: 6px
  }

  .signal-command-main h2 {
    max-width: 100%;
    margin: 13px 0 10px;
    font-size: 44px;
    line-height: .9
  }

  .signal-command-main strong {
    gap: 7px;
    font-size: 20px
  }

  .signal-command-main strong svg {
    width: 21px
  }

  .signal-trade-generator {
    flex-direction: column;
    gap: 9px;
    min-height: 168px;
    margin-top: 0;
    padding: 11px;
    display: flex
  }

  .signal-generated-amount {
    grid-template-columns: 1fr auto;
    min-height: 72px;
    padding: 11px 12px
  }

  .signal-generated-amount small {
    font-size: 6px
  }

  .signal-generated-amount strong {
    font-size: 34px
  }

  .signal-generated-amount span {
    font-size: 7px
  }

  .signal-generator-facts {
    display: none
  }

  .signal-trade-generator>[data-slot=button] {
    height: 52px;
    min-height: 52px;
    font-size: 11px
  }

  .signal-access-gate {
    min-height: 178px;
    margin-top: 0
  }

  .signal-stream-list {
    border-radius: 3px 14px 14px 3px;
    order: 2
  }

  .signal-stream-list>header {
    min-height: 48px;
    padding: 10px 13px
  }

  .signal-stream-list header small {
    font-size: 0
  }

  .signal-stream-list header small:after {
    content: "ДРУГИЕ ПОТОКИ";
    font-size: 7px
  }

  .signal-stream-list header b,
  .signal-stream-list header>svg {
    display: none
  }

  .signal-stream-list button {
    flex-basis: 176px;
    grid-template-columns: 27px 1fr;
    gap: 8px;
    min-height: 76px;
    padding: 9px 10px
  }

  .stream-state {
    width: 27px;
    height: 27px
  }

  .signal-stream-list button em,
  .signal-stream-list button>strong {
    display: none
  }

  .signal-stream-list button b {
    font-size: 10px
  }

  .signal-day-schedule,
  .signal-hub-truth {
    display: none
  }
}

@media (width>=761px) {
  .app main .page small {
    font-size: max(10px, .625rem) !important;
    line-height: 1.35 !important
  }

  .app main .page p {
    font-size: max(12px, .75rem);
    line-height: 1.5
  }

  /* ЗДЕСЬ БЫЛ ТОТ ЖЕ ПОЛ-ПОТОЛОК, ЧТО И В product.css (25.09).

     Кнопка шириной 946px несла текст кеглем 11 — замер на живом. Правило писалось как
     нижняя граница «не мельче одиннадцати», но селектор `.app main .page button` сильнее
     компонентного `[data-slot="button"]` с его 15px и потому выигрывал всегда, работая
     верхней границей.

     Копий оказалось ДВЕ, в двух файлах, и первую правку это обесценило: убрал одну —
     кегль на живом не изменился, потому что вторая делала ровно то же. Поэтому правка
     обязана искаться по всему стилевому слою, а не по одному файлу. */

  .session-signal-head,
  .signal-command-card>header>span,
  .signal-command-card>header>div>b {
    font-size: 11px
  }

  .session-risk-ladder i,
  .session-room-message>i,
  .session-room-message p small,
  .signal-stream-list button small,
  .signal-stream-list button em,
  .signal-day-schedule button span {
    font-size: 10px
  }

  .session-room-message p,
  .session-risk-guard>p,
  .signal-stream-list button b,
  .signal-generator-facts b {
    font-size: 11px
  }

  .session-room-message p>b,
  .session-room-v2>button,
  .signal-command-card>header button {
    font-size: 12px
  }
}

@media (width<=760px) {
  .main>main {
    padding: 15px 15px calc(102px + env(safe-area-inset-bottom)) !important
  }

  .app-head {
    height: 58px
  }

  .page {
    gap: 14px
  }

  .page-title,
  .signal-hub-page .page-title,
  .session-os-page .page-title {
    min-height: auto;
    padding: 13px 0 15px
  }

  .page-title>div:first-child>span {
    letter-spacing: .1em;
    font-size: 11px !important
  }

  .page-title h1,
  .page-title.simple h1,
  .signal-hub-page .page-title h1 {
    letter-spacing: -.045em;
    margin: 9px 0 7px;
    font-size: 36px;
    line-height: .98
  }

  .page-title p,
  .signal-hub-page .page-title p {
    color: #aab4af;
    max-width: 340px;
    font-size: 15px !important;
    line-height: 1.45 !important
  }

  .page-title .title-market,
  .page-title .balance-card {
    display: none !important
  }

  .app main .page p {
    color: #a5b0aa;
    font-size: 15px !important;
    line-height: 1.5 !important
  }

  .app main .page small {
    font-size: 12px !important;
    line-height: 1.35 !important
  }

  .app main .page button,
  .app main .page [data-slot=button] {
    font-size: 14px
  }

  .mobile-nav {
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    height: 74px;
    padding: 5px
  }

  .mobile-nav button {
    gap: 4px;
    min-width: 0;
    font-size: 12px
  }

  .mobile-nav button svg {
    width: 21px;
    height: 21px
  }

  .home-page .market-pulse-strip,
  .home-page .ecosystem-layer,
  .home-page .all-sections,
  .home-page .home-challenge,
  .home-page .next-level {
    display: none !important
  }

  .home-page .today-grid {
    flex-direction: column;
    gap: 13px;
    display: flex
  }

  .home-page .next-signal {
    min-height: 475px;
    padding: 21px 18px
  }

  .home-page .next-signal header {
    font-size: 12px
  }

  .home-page .next-signal h2 {
    font-size: 50px
  }

  .home-page .next-signal strong {
    font-size: 25px
  }

  .home-page .next-signal [data-slot=button] {
    min-height: 56px;
    font-size: 16px
  }

  .home-page .next-lesson {
    min-height: 230px;
    padding: 20px
  }

  .home-page .next-lesson h2 {
    font-size: 27px
  }

  .home-page .next-lesson [data-slot=button] {
    min-height: 52px;
    font-size: 15px
  }

  .signal-hub-summary {
    min-height: 60px;
    padding: 11px 14px
  }

  .signal-hub-summary small {
    font-size: 11px !important
  }

  .signal-hub-summary b {
    font-size: 14px
  }

  .signal-hub-tabs button {
    height: 44px;
    font-size: 14px !important
  }

  .signal-command-card {
    min-height: 500px;
    padding: 17px 15px
  }

  .signal-command-card>header {
    min-height: 42px
  }

  .signal-command-card>header>span {
    font-size: 11px
  }

  .signal-command-card>header button {
    width: 38px;
    height: 38px
  }

  .signal-command-main {
    min-height: 220px
  }

  .signal-command-main small {
    font-size: 11px !important
  }

  .signal-command-main h2 {
    margin: 15px 0 12px;
    font-size: 49px
  }

  .signal-command-main strong {
    font-size: 24px
  }

  .signal-trade-generator {
    min-height: 180px;
    padding: 12px
  }

  .signal-generated-amount {
    min-height: 82px
  }

  .signal-generated-amount small {
    font-size: 11px !important
  }

  .signal-generated-amount strong {
    font-size: 38px
  }

  .signal-generated-amount span {
    color: #a5b0aa;
    font-size: 13px
  }

  .signal-trade-generator>[data-slot=button] {
    height: 58px;
    min-height: 58px;
    font-size: 16px
  }

  .signal-stream-list>header {
    min-height: 55px
  }

  .signal-stream-list header small:after {
    font-size: 11px
  }

  .signal-stream-list button {
    flex-basis: 205px;
    min-height: 91px
  }

  .signal-stream-list button small {
    font-size: 11px !important
  }

  .signal-stream-list button b {
    font-size: 15px
  }

  .stream-state {
    width: 34px;
    height: 34px
  }

  .session-account-strip {
    min-height: 60px;
    padding: 10px 14px;
    display: block
  }

  .session-account-strip>div:not(.session-account-identity),
  .session-account-strip>button {
    display: none
  }

  .session-account-identity {
    border: 0;
    grid-template-columns: 31px 1fr;
    min-height: 38px;
    padding: 0
  }

  .session-account-identity small {
    font-size: 11px !important
  }

  .session-account-identity b {
    font-size: 14px
  }

  .session-stage-nav {
    display: block
  }

  .session-stage-nav>span {
    display: none
  }

  .session-stage-nav>span.active {
    text-align: left;
    grid-template-columns: 34px 1fr;
    gap: 11px;
    min-height: 62px;
    padding: 10px 13px;
    display: grid
  }

  .session-stage-nav>span.active>i {
    width: 32px;
    height: 32px
  }

  .session-stage-nav>span.active>span small {
    color: #98a49e;
    display: block;
    font-size: 12px !important
  }

  .session-stage-nav>span.active b {
    font-size: 15px
  }

  .session-os-grid {
    display: block
  }

  .session-control-rail,
  .session-truth-note {
    display: none !important
  }

  .session-signal-command {
    min-height: 530px;
    padding: 18px 16px
  }

  .session-signal-head {
    min-height: 39px;
    padding-bottom: 13px;
    font-size: 11px
  }

  .session-signal-head>b {
    max-width: 145px;
    font-size: 11px
  }

  .session-signal-body {
    min-height: 208px
  }

  .session-signal-body small {
    font-size: 11px !important
  }

  .session-signal-body h2 {
    max-width: 100%;
    margin: 14px 0 11px;
    font-size: 47px
  }

  .session-signal-body strong {
    font-size: 24px
  }

  .session-market-mark {
    display: none
  }

  .session-facts {
    grid-template-columns: 1fr 1fr
  }

  .session-facts>span {
    min-height: 68px;
    padding: 11px
  }

  .session-facts>span:nth-child(n+3) {
    display: none
  }

  .session-facts small {
    font-size: 11px !important
  }

  .session-facts b {
    font-size: 14px
  }

  .session-decision-panel,
  .session-result-panel {
    min-height: 210px;
    padding: 17px 15px
  }

  .session-decision-panel>div:first-child>small,
  .session-result-panel>div:first-child>small,
  .session-deal-cockpit>div:last-child>small,
  .session-review-copy>small {
    font-size: 11px !important
  }

  .session-decision-panel h3,
  .session-deal-cockpit h3,
  .session-result-panel h3,
  .session-review-copy h3 {
    margin: 8px 0;
    font-size: 23px
  }

  .session-decision-actions [data-slot=button],
  .session-deal-actions [data-slot=button],
  .session-review-actions [data-slot=button] {
    height: 56px;
    min-height: 56px;
    font-size: 15px
  }

  .session-decision-actions [data-slot=button]:first-child {
    order: -1
  }

  .session-deal-cockpit,
  .session-review-panel {
    padding: 17px 15px
  }

  .session-amount-orb {
    width: 145px
  }

  .session-outcome-grid button {
    min-height: 82px;
    font-size: 14px
  }

  .session-outcome-grid b {
    font-size: 15px
  }

  .learning-summary,
  .wallet-hero,
  .level-current,
  .active-challenge,
  .reward-summary,
  .access-hero,
  .notification-summary,
  .admin-status {
    padding: 21px 18px
  }

  .learning-summary b,
  .money-cards strong,
  .profile-card h2,
  .community-chat h2 {
    font-size: 25px
  }

  .lesson-list button,
  .profile-links button,
  .room-list>button,
  .channel-matrix>article {
    min-height: 64px
  }

  .lesson-list button b,
  .profile-links button b,
  .room-list button b,
  .channel-matrix b {
    font-size: 15px
  }

  .lesson-info h2 {
    font-size: 31px
  }

  .lesson-info [data-slot=button],
  .profile-card [data-slot=button],
  .active-challenge [data-slot=button],
  .access-hero [data-slot=button] {
    min-height: 54px;
    font-size: 15px
  }
}

.signal-hub-page>.signal-route-map,
.signal-hub-page>.signal-hub-summary,
.signal-hub-page>.signal-hub-tabs,
.signal-hub-page>.signal-hub-workspace,
.signal-hub-page>.signal-day-schedule,
.signal-hub-page>.signal-hub-truth {
  display: none !important
}

.signal-mode-switch {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid
}

.signal-mode-switch>button {
  color: #8b9992;
  text-align: left;
  background: #0d1512d9;
  border: 1px solid #293631;
  border-radius: 18px;
  grid-template-columns: 42px 1fr 20px;
  align-items: center;
  gap: 13px;
  min-height: 94px;
  padding: 14px 17px;
  transition: all .16s;
  display: grid
}

.signal-mode-switch>button:hover,
.signal-mode-switch>button.active {
  color: #54e6b2;
  background: radial-gradient(circle at 0 0, #40d9a221, #0000 45%), #101c18;
  border-color: #4adea78c
}

.signal-mode-switch>button>svg:first-child {
  background: #47d8a417;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  padding: 9px
}

.signal-mode-switch>button>svg:last-child {
  width: 18px
}

.signal-mode-switch span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.signal-mode-switch small {
  color: #74817b;
  letter-spacing: .11em;
  font-size: 9px;
  font-weight: 850
}

.signal-mode-switch b {
  color: #edf3f0;
  font-size: 17px;
  font-weight: 770
}

.signal-mode-switch em {
  color: #8d9993;
  font-size: 11px;
  font-style: normal
}

.signal-now-grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid
}

.otc-bot-card,
.strategy-scanner-card {
  background: #0d1512e6;
  border: 1px solid #293630;
  border-radius: 22px;
  flex-direction: column;
  min-height: 510px;
  padding: 23px;
  display: flex;
  position: relative;
  overflow: hidden
}

.otc-bot-card {
  background: radial-gradient(circle at 85% 15%, #44e1a824, #0000 34%), linear-gradient(150deg, #11241d 0%, #0b1210 70%);
  border-color: #41dca466
}

.strategy-scanner-card {
  background: radial-gradient(circle at 90% 5%, #7e84ff1f, #0000 35%), linear-gradient(150deg, #171925 0%, #0d1112 70%)
}

.otc-bot-card>header,
.strategy-scanner-card>header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 42px;
  display: flex
}

.otc-bot-card>header span,
.strategy-scanner-card>header span {
  color: #5be7b5;
  letter-spacing: .1em;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 850;
  display: inline-flex
}

.strategy-scanner-card>header span {
  color: #aaa9ff
}

.otc-bot-card>header svg,
.strategy-scanner-card>header svg {
  width: 17px
}

.otc-bot-card>header b,
.strategy-scanner-card>header b {
  color: #9ca9a2;
  border: 1px solid #33413b;
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 10px
}

.otc-bot-card>div>small,
.strategy-scanner-card>div>small {
  color: #66756e;
  letter-spacing: .12em;
  font-size: 9px;
  font-weight: 850
}

.otc-bot-card h2,
.strategy-scanner-card h2 {
  color: #f5f8f6;
  letter-spacing: -.035em;
  max-width: 540px;
  margin: 10px 0;
  font-size: clamp(25px, 2vw, 35px);
  font-weight: 760;
  line-height: 1.06
}

.otc-bot-card p,
.strategy-scanner-card p {
  color: #a3afa9;
  max-width: 560px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55
}

.signal-machine-line {
  grid-template-columns: 1fr 18px 1fr 18px 1fr;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 16px 0;
  display: grid
}

.signal-machine-line>svg {
  color: #46544d;
  width: 16px
}

.signal-machine-line>span {
  grid-template-rows: auto auto;
  grid-template-columns: 27px 1fr;
  align-content: center;
  gap: 2px 8px;
  min-height: 72px;
  display: grid
}

.signal-machine-line i {
  color: #54dfad;
  background: #49dba61f;
  border-radius: 50%;
  grid-row: 1/3;
  align-self: center;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  display: grid
}

.signal-machine-line b {
  color: #e1e8e4;
  font-size: 11px
}

.signal-machine-line small {
  color: #718078;
  font-size: 9px
}

.otc-bot-card>[data-slot=button],
.strategy-scanner-card>[data-slot=button] {
  color: #07130f;
  background: #47d8a5;
  border: 0;
  width: 100%;
  min-height: 56px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 820
}

.strategy-scanner-card>[data-slot=button] {
  color: #0d0d18;
  background: #a5a4ff
}

.strategy-picker {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 20px 0 14px;
  display: grid
}

.strategy-picker>button {
  color: #6e7974;
  text-align: left;
  background: #0a0c118f;
  border: 1px solid #30343f;
  border-radius: 13px;
  grid-template-columns: 31px 1fr;
  align-items: center;
  gap: 9px;
  min-height: 67px;
  padding: 9px;
  display: grid
}

.strategy-picker>button.active {
  color: #aaa9ff;
  background: #8f8ef51a;
  border-color: #8f8ef5
}

.strategy-picker>button>i {
  background: #8f8ef514;
  border-radius: 9px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid
}

.strategy-picker svg {
  width: 15px
}

.strategy-picker span {
  flex-direction: column;
  gap: 2px;
  display: flex
}

.strategy-picker b {
  color: #e5e6ec;
  font-size: 11px
}

.strategy-picker small {
  color: #747b83;
  font-size: 9px
}

.scheduled-session-board {
  background: #0d1512e6;
  border: 1px solid #293630;
  border-radius: 22px;
  padding: 23px
}

.scheduled-session-board>header {
  border-bottom: 1px solid #27332e;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 20px;
  display: flex
}

.scheduled-session-board>header small {
  color: #55dfad;
  letter-spacing: .11em;
  font-size: 9px;
  font-weight: 850
}

.scheduled-session-board>header h2 {
  color: #f1f5f3;
  margin: 7px 0 5px;
  font-size: 25px
}

.scheduled-session-board>header p {
  color: #98a49e;
  max-width: 650px;
  margin: 0;
  font-size: 12px
}

.scheduled-session-board>header>span {
  color: #a6b1ab;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex
}

.scheduled-session-board>header svg {
  width: 17px
}

.scheduled-session-list {
  position: relative
}

.scheduled-session-list:before {
  content: "";
  background: #33413b;
  width: 1px;
  position: absolute;
  top: 39px;
  bottom: 39px;
  left: 99px
}

.scheduled-session-list>article {
  border-bottom: 1px solid #26312d;
  grid-template-columns: 70px 20px 1fr auto 190px;
  align-items: center;
  gap: 18px;
  min-height: 105px;
  padding: 15px 0;
  display: grid
}

.scheduled-session-list>article:last-child {
  border-bottom: 0
}

.scheduled-session-list time {
  color: #e7eeea;
  font-size: 18px;
  font-weight: 760
}

.session-timeline-dot {
  z-index: 1;
  background: #65736c;
  border: 3px solid #101815;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 1px #415048
}

.scheduled-session-list article.live .session-timeline-dot {
  background: #4be0ab;
  box-shadow: 0 0 0 1px #4be0ab, 0 0 18px #4be0aba6
}

.scheduled-session-list article>div small {
  color: #718078;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800
}

.scheduled-session-list h3 {
  color: #edf3f0;
  margin: 4px 0 2px;
  font-size: 16px
}

.scheduled-session-list p {
  color: #8c9992;
  margin: 0;
  font-size: 11px
}

.scheduled-state {
  color: #87958e;
  letter-spacing: .08em;
  background: #1a2420;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 9px;
  font-weight: 850
}

.scheduled-session-list article.live .scheduled-state {
  color: #58e3b0;
  background: #48daa51f
}

.scheduled-session-list [data-slot=button] {
  justify-self: stretch;
  min-height: 46px;
  font-size: 11px
}

.scheduled-session-list article.locked {
  opacity: .7
}

@media (width<=760px) {
  .signal-mode-switch {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .signal-mode-switch>button {
    grid-template-columns: 36px 1fr 18px;
    min-height: 78px;
    padding: 11px 13px
  }

  .signal-mode-switch>button>svg:first-child {
    width: 35px;
    height: 35px;
    padding: 8px
  }

  .signal-mode-switch b {
    font-size: 15px
  }

  .signal-mode-switch em {
    font-size: 12px
  }

  .signal-now-grid {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .otc-bot-card,
  .strategy-scanner-card {
    min-height: auto;
    padding: 18px 16px
  }

  .otc-bot-card>header,
  .strategy-scanner-card>header {
    margin-bottom: 24px
  }

  .otc-bot-card h2,
  .strategy-scanner-card h2 {
    font-size: 27px
  }

  .otc-bot-card p,
  .strategy-scanner-card p {
    font-size: 14px
  }

  .signal-machine-line {
    grid-template-columns: 1fr 1fr 1fr;
    margin: 16px 0 8px
  }

  .signal-machine-line>svg {
    display: none
  }

  .signal-machine-line>span {
    border: 1px solid #2b3832;
    border-radius: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 84px;
    padding: 9px;
    display: flex
  }

  .signal-machine-line b {
    font-size: 12px
  }

  .signal-machine-line small {
    font-size: 10px
  }

  .strategy-picker {
    grid-template-columns: 1fr;
    margin: 17px 0 12px
  }

  .strategy-picker>button {
    min-height: 62px
  }

  .strategy-picker b {
    font-size: 14px
  }

  .strategy-picker small {
    font-size: 12px
  }

  .otc-bot-card>[data-slot=button],
  .strategy-scanner-card>[data-slot=button] {
    min-height: 56px;
    margin-top: 10px;
    font-size: 15px
  }

  .scheduled-session-board {
    padding: 17px 14px
  }

  .scheduled-session-board>header {
    display: block
  }

  .scheduled-session-board>header h2 {
    font-size: 24px
  }

  .scheduled-session-board>header p {
    font-size: 14px
  }

  .scheduled-session-board>header>span {
    margin-top: 12px
  }

  .scheduled-session-list:before {
    left: 58px
  }

  .scheduled-session-list>article {
    grid-template-columns: 44px 12px 1fr;
    gap: 8px;
    padding: 15px 0
  }

  .scheduled-session-list time {
    font-size: 15px
  }

  .scheduled-session-list article>div small {
    font-size: 10px !important
  }

  .scheduled-session-list h3 {
    font-size: 16px
  }

  .scheduled-session-list p {
    font-size: 12px
  }

  .scheduled-state {
    grid-column: 3;
    justify-self: start
  }

  .scheduled-session-list [data-slot=button] {
    grid-column: 3;
    min-height: 50px;
    font-size: 13px
  }
}

.app .page-title .title-market,
.app .page-title p {
  display: none !important
}

.app .page-title {
  min-height: auto;
  padding-bottom: 8px
}

.signal-hub-page>.signal-mode-switch,
.signal-hub-page>.signal-now-grid,
.signal-hub-page>.signal-route-map,
.signal-hub-page>.signal-hub-summary,
.signal-hub-page>.signal-hub-tabs,
.signal-hub-page>.signal-hub-workspace,
.signal-hub-page>.signal-day-schedule,
.signal-hub-page>.signal-hub-truth {
  display: none !important
}

.signal-minimal-home {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .65fr);
  gap: 14px;
  display: grid
}

.signal-primary-action,
.next-session-action {
  background: #0d1714;
  border: 1px solid #2a3933;
  border-radius: 24px;
  min-height: 330px
}

.signal-primary-action {
  background: radial-gradient(circle at 75% 10%, #47dfa72e, #0000 35%), linear-gradient(145deg, #12271f 0%, #0a1210 72%);
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 28px;
  display: flex
}

.signal-primary-action>span,
.next-session-action>span {
  color: #58e4b2;
  letter-spacing: .1em;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 850;
  display: flex
}

.signal-primary-action>span i {
  background: #52e6b1;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 14px #52e6b1bf
}

.signal-primary-action h2 {
  color: #f4f8f6;
  letter-spacing: -.055em;
  margin: 12px 0 5px;
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 760;
  line-height: .96
}

.signal-primary-action p {
  color: #a2afa8;
  margin: 0 0 24px;
  font-size: 15px
}

.signal-primary-action [data-slot=button] {
  color: #06120e;
  background: #4be0ab;
  border: 0;
  min-width: 280px;
  min-height: 58px;
  font-size: 15px;
  font-weight: 820
}

.next-session-action {
  color: #edf3f0;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
  display: flex
}

.next-session-action>span {
  color: #9ba8a1
}

.next-session-action>span svg {
  width: 17px
}

.next-session-action strong {
  color: #f5f8f6;
  letter-spacing: -.05em;
  margin-top: auto;
  font-size: 58px;
  font-weight: 720
}

.next-session-action b {
  margin-top: 3px;
  font-size: 17px
}

.next-session-action small {
  color: #59e2b0;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 750;
  display: flex
}

.next-session-action small svg {
  width: 15px
}

.signal-back-action {
  color: #9da9a3;
  background: 0 0;
  border: 0;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  display: flex
}

.signal-back-action svg {
  width: 17px;
  transform: rotate(180deg)
}

[data-slot=dialog-overlay] {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #020605cc !important
}

.trade-generator-dialog {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  color: #f4f7f5 !important;
  background: #0d1512 !important;
  border: 1px solid #33423b !important;
  border-radius: 24px !important;
  gap: 18px !important;
  width: min(560px, 100vw - 24px) !important;
  max-width: 560px !important;
  padding: 24px !important;
  box-shadow: 0 34px 100px #000000a6 !important
}

.trade-generator-dialog [data-slot=dialog-description] {
  color: #7e8c85;
  font-size: 12px
}

.trade-generator-dialog [data-slot=dialog-close] {
  color: #a8b3ad;
  border: 1px solid #324039;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid
}

.generator-progress {
  background: #25302b;
  border-radius: 99px;
  height: 4px;
  overflow: hidden
}

.generator-progress i {
  border-radius: inherit;
  background: #4be0ab;
  height: 100%;
  transition: width .18s;
  display: block
}

.generator-choice-list {
  gap: 8px;
  display: grid
}

.generator-choice-list>button {
  color: #9aa7a0;
  text-align: left;
  background: #111b17;
  border: 1px solid #2b3832;
  border-radius: 14px;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 11px 13px;
  display: grid
}

.generator-choice-list>button.active,
.generator-option-grid>button.active {
  color: #56e1af;
  background: #46daa51c;
  border-color: #50dda9
}

.generator-choice-list>button>i {
  background: #1c2924;
  border-radius: 11px;
  place-items: center;
  width: 35px;
  height: 35px;
  display: grid
}

.generator-choice-list svg {
  width: 17px
}

.generator-choice-list span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.generator-choice-list b {
  color: #edf2ef;
  font-size: 15px
}

.generator-choice-list small {
  color: #7f8c85;
  font-size: 12px
}

.generator-option-grid {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  display: grid
}

.generator-option-grid>button {
  color: #d9e1dd;
  background: #111a17;
  border: 1px solid #2d3a34;
  border-radius: 14px;
  min-height: 70px;
  padding: 12px;
  font-size: 15px;
  font-weight: 750
}

.generator-option-grid.duration>button {
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex
}

.generator-option-grid svg {
  width: 18px
}

.generated-deal-card {
  background: radial-gradient(circle at 85% 15%, #45e0a72e, #0000 38%), #102019;
  border: 1px solid #49dea873;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  min-height: 270px;
  padding: 24px;
  display: flex
}

.generated-deal-card>span {
  color: #59e4b1;
  letter-spacing: .1em;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 850;
  display: flex
}

.generated-deal-card>span i {
  background: #4ae0aa;
  border-radius: 50%;
  width: 8px;
  height: 8px
}

.generated-deal-card h2 {
  color: #f6f9f7;
  letter-spacing: -.05em;
  margin: 17px 0 6px;
  font-size: 48px;
  font-weight: 720
}

.generated-deal-card>strong {
  color: #55e1af;
  align-items: center;
  gap: 8px;
  font-size: 23px;
  display: flex
}

.generated-deal-card>strong svg {
  width: 23px;
  transform: rotate(90deg)
}

.generated-deal-card>div {
  gap: 8px;
  margin-top: 28px;
  display: flex
}

.generated-deal-card>div b {
  color: #ced8d3;
  border: 1px solid #32423a;
  border-radius: 11px;
  padding: 10px 13px;
  font-size: 13px
}

.generator-dialog-actions {
  gap: 9px;
  display: flex
}

.generator-dialog-actions [data-slot=button] {
  flex: 1;
  min-height: 54px;
  font-size: 14px;
  font-weight: 800
}

.generator-dialog-actions [data-slot=button]:last-child {
  color: #06120e;
  background: #4be0ab;
  border: 0
}

.session-os-page>:not(.compact-trade-flow) {
  display: none !important
}

.compact-trade-flow {
  flex-direction: column;
  justify-content: center;
  align-self: center;
  width: min(690px, 100%);
  min-height: calc(100dvh - 160px);
  margin: 0 auto;
  display: flex
}

.compact-trade-flow>header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex
}

.compact-trade-flow>header>button {
  color: #9da9a3;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  display: flex
}

.compact-trade-flow>header>button svg {
  width: 17px;
  transform: rotate(180deg)
}

.compact-trade-flow>header>span {
  color: #58e2b0;
  letter-spacing: .1em;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 850;
  display: flex
}

.compact-trade-flow>header>span i {
  background: #50e0ad;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 14px #50e0adb3
}

.compact-deal-card,
.compact-trade-done {
  background: radial-gradient(circle at 80% 12%, #46e0a829, #0000 35%), #0d1915;
  border: 1px solid #49dda773;
  border-radius: 26px;
  flex-direction: column;
  justify-content: center;
  min-height: 540px;
  padding: 38px;
  display: flex
}

.compact-deal-card h1 {
  color: #f7faf8;
  letter-spacing: -.065em;
  margin: 0;
  font-size: clamp(54px, 7vw, 88px);
  font-weight: 700;
  line-height: .95
}

.compact-deal-card>strong {
  color: #55e1af;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  font-size: 30px;
  display: flex
}

.compact-deal-card>strong.down {
  color: #ff817c
}

.compact-deal-card>strong svg {
  width: 28px;
  transform: rotate(90deg)
}

.compact-deal-card>strong.down svg {
  transform: rotate(-90deg)
}

.compact-deal-facts {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 50px;
  display: grid
}

.compact-deal-facts>span {
  background: #04090759;
  border: 1px solid #2e3c35;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 78px;
  padding: 14px 16px;
  display: flex
}

.compact-deal-facts small {
  color: #728079;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 800
}

.compact-deal-facts b {
  color: #edf3f0;
  font-size: 18px
}

.compact-deal-action {
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  display: flex
}

.compact-deal-action [data-slot=button] {
  color: #06120e;
  background: #4be0ab;
  border: 0;
  min-height: 60px;
  font-size: 16px;
  font-weight: 820
}

.compact-deal-action>button:last-child,
.compact-trade-done>button:last-child {
  color: #829089;
  background: 0 0;
  border: 0;
  min-height: 40px;
  font-size: 12px
}

.compact-result-choice {
  margin-top: 28px
}

.compact-result-choice h2 {
  color: #eef3f0;
  margin: 0 0 12px;
  font-size: 19px
}

.compact-result-choice>div {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  display: grid
}

.compact-result-choice button {
  color: #dce5e0;
  background: #111b17;
  border: 1px solid #334039;
  border-radius: 13px;
  min-height: 58px
}

.compact-result-choice button.win {
  color: #58e2b0;
  border-color: #48dda673
}

.compact-result-choice button.loss {
  color: #ff817c;
  border-color: #ff716c66
}

.compact-trade-done {
  text-align: center;
  align-items: center
}

.compact-trade-done>i {
  color: #06120e;
  background: #4be0ab;
  border-radius: 50%;
  place-items: center;
  width: 70px;
  height: 70px;
  display: grid
}

.compact-trade-done>i svg {
  width: 31px;
  height: 31px
}

.compact-trade-done h1 {
  color: #f4f7f5;
  margin: 22px 0 7px;
  font-size: 38px
}

.compact-trade-done p {
  color: #95a29b;
  margin: 0 0 25px;
  font-size: 14px
}

.compact-trade-done [data-slot=button] {
  color: #06120e;
  background: #4be0ab;
  border: 0;
  width: min(360px, 100%);
  min-height: 56px;
  font-weight: 800
}

.pocket-identity-card.compact {
  background: #101a16;
  border: 1px solid #2d3b35;
  border-radius: 18px;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 15px 18px;
  display: grid
}

.pocket-identity-card.compact>svg {
  color: #53dfad;
  background: #49dca71a;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  padding: 9px
}

.pocket-identity-card.compact>span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.pocket-identity-card.compact small {
  color: #718078;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 800
}

.pocket-identity-card.compact b {
  color: #eef3f0;
  font-size: 16px
}

.pocket-identity-card.compact>button {
  color: #62e1b2;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 750;
  display: flex
}

.pocket-identity-card.compact>button svg {
  width: 15px
}

.profile-card>div:nth-child(2)>small,
.profile-card>div:nth-child(2)>p {
  display: none !important
}

@media (width<=760px) {
  .app .page-title {
    padding: 0
  }

  .signal-minimal-home {
    grid-template-columns: 1fr
  }

  .signal-primary-action {
    min-height: 350px;
    padding: 22px 18px
  }

  .signal-primary-action h2 {
    font-size: 49px
  }

  .signal-primary-action p {
    font-size: 15px
  }

  .signal-primary-action [data-slot=button] {
    width: 100%;
    min-width: 0
  }

  .next-session-action {
    min-height: 190px;
    padding: 19px
  }

  .next-session-action strong {
    font-size: 44px
  }

  .trade-generator-dialog {
    max-height: calc(100dvh - 16px);
    border-radius: 24px 24px 18px 18px !important;
    padding: 20px 16px !important;
    top: auto !important;
    bottom: 8px !important;
    transform: translate(-50%) !important
  }

  .trade-generator-dialog [data-slot=dialog-title] {
    padding-right: 34px;
    font-size: 25px
  }

  .generator-choice-list>button {
    min-height: 59px
  }

  .generator-option-grid {
    grid-template-columns: 1fr
  }

  .generator-option-grid>button {
    min-height: 58px
  }

  .generated-deal-card {
    min-height: 250px;
    padding: 19px
  }

  .generated-deal-card h2 {
    font-size: 38px
  }

  .compact-trade-flow {
    justify-content: flex-start;
    min-height: calc(100dvh - 120px)
  }

  .compact-deal-card,
  .compact-trade-done {
    border-radius: 22px;
    min-height: calc(100dvh - 205px);
    padding: 24px 18px
  }

  .compact-deal-card h1 {
    font-size: 54px
  }

  .compact-deal-card>strong {
    font-size: 27px
  }

  .compact-deal-facts {
    margin-top: auto
  }

  .compact-deal-facts>span {
    min-height: 72px
  }

  .compact-deal-action {
    margin-top: 10px
  }

  .compact-result-choice {
    margin-top: auto
  }

  .compact-trade-done h1 {
    font-size: 31px
  }

  .pocket-identity-card.compact {
    grid-template-columns: 38px 1fr auto;
    padding: 13px
  }

  .pocket-identity-card.compact>svg {
    width: 37px;
    height: 37px
  }

  .pocket-identity-card.compact b {
    font-size: 14px
  }

  .pocket-identity-card.compact>button {
    font-size: 0
  }
}

.home-page>.market-pulse-strip,
.home-page>.ecosystem-layer,
.home-page>.all-sections,
.home-page>.home-challenge,
.next-signal .signal-tech,
.next-signal .signal-facts,
.next-signal .signal-main>small,
.scheduled-session-list article>div>small,
.scheduled-session-list article>div>p {
  display: none !important
}

.home-page .next-actions {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .68fr) minmax(235px, .55fr) !important
}

.learning-summary~.learn-layout {
  grid-template-columns: 1fr !important
}

.learning-summary~.learn-layout>.lesson-list,
.learning-summary~.free-strategies {
  display: none !important
}

.learning-summary~.learn-layout .lesson-player {
  max-width: 980px
}

.wallet-hero~.explain-card {
  display: none !important
}

.wallet-hero {
  min-height: 330px
}

.wallet-hero>div:first-child {
  max-width: 560px
}

.reward-summary,
.reward-grid+.explain-card,
.level-list[data-current="0"] article:nth-child(n+3),
.level-list[data-current="4"] article:not(:nth-child(5)),
.access-page .access-states {
  display: none !important
}

.compact-auto-result {
  background: #4ae0aa12;
  border: 1px solid #4ae0aa52;
  border-radius: 16px;
  margin-top: 28px;
  padding: 20px
}

.compact-auto-result>span {
  color: #55e1af;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  display: flex
}

.compact-auto-result>span svg {
  width: 18px
}

.compact-auto-result h2 {
  color: #f1f6f3;
  margin: 16px 0 6px;
  font-size: 23px
}

.compact-auto-result p {
  color: #94a29b;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55
}

.compact-auto-result [data-slot=button] {
  color: #06120e;
  background: #4be0ab;
  border: 0;
  width: 100%;
  min-height: 54px;
  font-weight: 800
}

.signal-help-link {
  color: #92a19a;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex
}

.signal-help-link svg {
  width: 16px
}

.signal-guide-dialog {
  color: #f4f7f5 !important;
  background: #0d1512 !important;
  border: 1px solid #33423b !important;
  border-radius: 24px !important;
  gap: 18px !important;
  width: min(520px, 100vw - 24px) !important;
  max-width: 520px !important;
  padding: 25px !important
}

.signal-guide-dialog [data-slot=dialog-title] {
  color: #f5f8f6;
  letter-spacing: -.035em;
  font-size: 27px
}

.signal-guide-dialog [data-slot=dialog-description] {
  color: #8d9a93
}

.signal-guide-steps {
  gap: 9px;
  display: grid
}

.signal-guide-steps article {
  background: #111b17;
  border: 1px solid #2b3933;
  border-radius: 15px;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 13px;
  display: grid
}

.signal-guide-steps article>i {
  color: #55e1af;
  background: #4ae0aa1f;
  border-radius: 11px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-style: normal;
  font-weight: 850;
  display: grid
}

.signal-guide-steps article>span {
  flex-direction: column;
  gap: 4px;
  display: flex
}

.signal-guide-steps b {
  color: #edf3f0;
  font-size: 15px
}

.signal-guide-steps small {
  color: #8d9b94;
  font-size: 12px;
  line-height: 1.45
}

.signal-guide-dialog>[data-slot=button] {
  color: #06120e;
  background: #4be0ab;
  border: 0;
  min-height: 55px;
  font-weight: 820
}

.signal-analysis-card {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 330px;
  display: flex
}

.analysis-orbit {
  background: radial-gradient(circle, #49e1a929, #0000 65%);
  border: 1px solid #4ce0ab52;
  border-radius: 50%;
  place-items: center;
  width: 98px;
  height: 98px;
  display: grid;
  position: relative
}

.analysis-orbit:before,
.analysis-orbit:after {
  content: "";
  border: 1px solid #4ce0ab21;
  border-radius: 50%;
  animation: 4s linear infinite analysis-spin;
  position: absolute;
  inset: -12px
}

.analysis-orbit:after {
  border-style: dashed;
  animation-duration: 7s;
  animation-direction: reverse;
  inset: -24px
}

.analysis-orbit>svg {
  color: #55e1af;
  width: 33px
}

.analysis-orbit>i {
  background: #55e1af;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  box-shadow: 0 0 12px #55e1afcc
}

.analysis-orbit>i:first-of-type {
  top: -15px
}

.analysis-orbit>i:nth-of-type(2) {
  bottom: 9px;
  right: -4px
}

.analysis-orbit>i:nth-of-type(3) {
  bottom: 19px;
  left: -8px
}

@keyframes analysis-spin {
  to {
    transform: rotate(360deg)
  }
}

.signal-analysis-card h2 {
  color: #f3f7f5;
  margin: 34px 0 3px;
  font-size: 24px
}

.signal-analysis-card>p {
  color: #57e1af;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800
}

.signal-analysis-card>[data-slot=progress] {
  width: min(350px, 100%)
}

.analysis-checks {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  width: min(400px, 100%);
  margin-top: 20px;
  display: grid
}

.analysis-checks>span {
  color: #66736c;
  text-align: left;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  transition: color .18s;
  display: flex
}

.analysis-checks>span.done {
  color: #b6c3bc
}

.analysis-checks>span>i {
  border: 1px solid #334039;
  border-radius: 50%;
  place-items: center;
  width: 19px;
  height: 19px;
  display: grid
}

.analysis-checks>span.done>i {
  color: #55e1af;
  background: #4ce0ab1c;
  border-color: #4ce0ab66
}

.analysis-checks svg {
  width: 11px
}

.learning-next-card {
  background: #101814;
  border: 1px solid #293630;
  border-radius: 18px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 112px;
  margin-top: 14px;
  padding: 20px 22px;
  display: flex
}

.learning-next-card>div>span {
  color: #8f9c95;
  letter-spacing: .11em;
  font-size: 9px;
  font-weight: 850
}

.learning-next-card h3 {
  color: #edf3f0;
  margin: 5px 0 3px;
  font-size: 20px
}

.learning-next-card p {
  color: #8d9a93;
  margin: 0;
  font-size: 13px
}

.learning-next-card>span {
  color: #b4c0ba;
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  display: flex
}

.learning-next-card>span svg {
  width: 16px
}

@media (width<=760px) {
  .home-page .next-actions {
    grid-template-columns: 1fr !important
  }

  .home-page .next-level {
    display: none !important
  }

  .home-page .next-lesson {
    min-height: 220px
  }

  .learning-summary>div p {
    display: none !important
  }

  .wallet-hero {
    min-height: 310px
  }

  .available-list article,
  .reward-grid article {
    min-height: 132px
  }

  .community-shell {
    min-height: calc(100dvh - 170px)
  }

  .community-chat>header span,
  .community-chat>header>b {
    display: none !important
  }

  .notifications-page .channel-matrix article {
    min-height: 64px
  }

  .compact-auto-result {
    margin-top: auto;
    padding: 17px
  }

  .signal-guide-dialog {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    border-radius: 24px 24px 18px 18px !important;
    padding: 20px 16px !important;
    top: auto !important;
    bottom: 8px !important;
    transform: translate(-50%) !important
  }

  .signal-guide-dialog [data-slot=dialog-title] {
    padding-right: 34px;
    font-size: 24px
  }

  .signal-analysis-card {
    min-height: 360px
  }

  .analysis-checks {
    grid-template-columns: 1fr
  }

  .learning-next-card {
    align-items: flex-start;
    padding: 17px
  }

  .learning-next-card>span {
    font-size: 0
  }
}

html,
body {
  max-width: 100%;
  overflow-x: hidden
}

.app,
.main,
.main>main,
.page,
.page>*,
.community-shell,
.community-chat,
.strategy-picker,
.trade-generator-dialog {
  min-width: 0;
  max-width: 100%
}

.mobile-room-trigger {
  display: none
}

.room-picker-dialog {
  --room-accent: #7fa7ff
}

.mobile-room-list {
  gap: 9px;
  display: grid
}

.mobile-room-list .room-choice {
  --room-accent: #7fa7ff;
  color: #dfe7e3;
  text-align: left;
  background: #111916;
  border: 1px solid #2b3732;
  border-radius: 15px;
  grid-template-columns: 42px 1fr 20px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 72px;
  padding: 11px 13px;
  display: grid
}

.mobile-room-list .room-choice.room-family {
  --room-accent: #dbaf61
}

.mobile-room-list .room-choice.room-ots-250 {
  --room-accent: #5be0ad
}

.mobile-room-list .room-choice.room-ots-500 {
  --room-accent: #a687ff
}

.mobile-room-list .room-choice.room-exclusive {
  --room-accent: #f07582
}

.mobile-room-list .room-choice.active {
  border-color: var(--room-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .mobile-room-list .room-choice.active {
    border-color: color-mix(in srgb, var(--room-accent) 62%, #2b3732)
  }
}

.mobile-room-list .room-choice.active {
  background: var(--room-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .mobile-room-list .room-choice.active {
    background: color-mix(in srgb, var(--room-accent) 13%, #111916)
  }
}

.mobile-room-list .room-choice>i {
  background: var(--room-accent);
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid
}

@supports (color:color-mix(in lab, red, red)) {
  .mobile-room-list .room-choice>i {
    background: color-mix(in srgb, var(--room-accent) 15%, #17201c)
  }
}

.mobile-room-list .room-choice>i {
  color: var(--room-accent)
}

.mobile-room-list .room-choice svg {
  width: 18px
}

.mobile-room-list .room-choice>span {
  flex-direction: column;
  gap: 3px;
  display: flex
}

.mobile-room-list .room-choice b {
  font-size: 15px
}

.mobile-room-list .room-choice small {
  color: #85918b;
  font-size: 10px
}

@media (width<=760px) {
  .main>main {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important
  }

  .page {
    width: 100%;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important
  }

  .page-title.simple {
    min-height: auto !important;
    margin: 0 0 14px !important;
    padding: 20px 0 13px !important
  }

  .page-title.simple h1 {
    overflow-wrap: anywhere;
    max-width: 100%;
    margin-top: 7px !important;
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.02 !important
  }

  .page-title.simple p,
  .page-title.simple .title-market {
    display: none !important
  }

  .auth-page:not(.pocket-onboarding):not(.auth-success) .auth-shell {
    padding: 18px 15px calc(38px + env(safe-area-inset-bottom)) !important;
    gap: 0 !important
  }

  .auth-page:not(.pocket-onboarding):not(.auth-success) .auth-story {
    display: none !important
  }

  .auth-page:not(.pocket-onboarding):not(.auth-success) .auth-card {
    border-radius: 22px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px 16px !important
  }

  .auth-page:not(.pocket-onboarding):not(.auth-success) .auth-card header {
    margin-top: 18px
  }

  .auth-page:not(.pocket-onboarding):not(.auth-success) .auth-card h2 {
    font-size: 30px !important
  }

  .trade-generator-dialog.strategy-world,
  .signal-guide-dialog,
  .mechanic-dialog {
    inset: auto 6px calc(6px + env(safe-area-inset-bottom)) 6px !important;
    top: auto !important;
    left: 6px !important;
    right: 6px !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - 18px - env(safe-area-inset-top)) !important;
    border-radius: 24px 24px 16px 16px !important;
    margin: 0 !important;
    padding: 17px 14px !important;
    position: fixed !important;
    overflow: hidden auto !important;
    transform: none !important
  }

  .trade-generator-dialog.strategy-world [data-slot=dialog-header],
  .mechanic-dialog [data-slot=dialog-header] {
    padding-right: 34px
  }

  .trade-generator-dialog.strategy-world [data-slot=dialog-title],
  .mechanic-dialog [data-slot=dialog-title] {
    overflow-wrap: anywhere;
    max-width: 100%;
    line-height: 1.08;
    font-size: 23px !important
  }

  .strategy-picker {
    min-height: 0 !important;
    display: block !important
  }

  .strategy-choice-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    display: grid !important
  }

  .strategy-choice-list>button {
    width: 100%;
    min-width: 0;
    min-height: 70px !important;
    transform: none !important
  }

  .strategy-choice-list>button>span {
    min-width: 0
  }

  .strategy-choice-list>button b {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }

  .strategy-world-preview {
    margin-top: 10px;
    min-height: 220px !important
  }

  .generator-option-grid {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important
  }

  .generator-context-line {
    grid-column: 1/-1 !important
  }

  .generator-dialog-actions {
    z-index: 3;
    background: linear-gradient(#0b1210bf, #0b1210 28%);
    position: sticky;
    bottom: -17px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    margin: 10px -14px -17px !important
  }

  .generator-dialog-actions [data-slot=button] {
    min-width: 0 !important
  }

  .mobile-room-trigger {
    --room-accent: #7fa7ff;
    border: 1px solid var(--room-accent);
    grid-template-columns: 40px 1fr auto 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 64px;
    margin: 0 0 10px;
    padding: 10px 12px;
    display: grid
  }

  @supports (color:color-mix(in lab, red, red)) {
    .mobile-room-trigger {
      border: 1px solid color-mix(in srgb, var(--room-accent) 42%, #2b3732)
    }
  }

  .mobile-room-trigger {
    background: var(--room-accent);
    border-radius: 16px
  }

  @supports (color:color-mix(in lab, red, red)) {
    .mobile-room-trigger {
      background: color-mix(in srgb, var(--room-accent) 10%, #101713)
    }
  }

  .mobile-room-trigger {
    color: #dfe7e3;
    text-align: left
  }

  .room-family .mobile-room-trigger {
    --room-accent: #dbaf61
  }

  .room-ots-250 .mobile-room-trigger {
    --room-accent: #5be0ad
  }

  .room-ots-500 .mobile-room-trigger {
    --room-accent: #a687ff
  }

  .room-exclusive .mobile-room-trigger {
    --room-accent: #f07582
  }

  .mobile-room-trigger>i {
    background: var(--room-accent);
    border-radius: 12px;
    place-items: center;
    width: 40px;
    height: 40px;
    display: grid
  }

  @supports (color:color-mix(in lab, red, red)) {
    .mobile-room-trigger>i {
      background: color-mix(in srgb, var(--room-accent) 17%, #17201c)
    }
  }

  .mobile-room-trigger>i {
    color: var(--room-accent)
  }

  .mobile-room-trigger>i svg,
  .mobile-room-trigger>svg {
    width: 18px
  }

  .mobile-room-trigger>span {
    flex-direction: column;
    gap: 2px;
    display: flex
  }

  .mobile-room-trigger small {
    color: #7f8b85;
    letter-spacing: .1em;
    font-size: 8px;
    font-weight: 850
  }

  .mobile-room-trigger b {
    font-size: 16px
  }

  .mobile-room-trigger em {
    color: var(--room-accent);
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-style: normal;
    display: flex
  }

  .mobile-room-trigger em i {
    background: var(--room-accent);
    border-radius: 50%;
    width: 6px;
    height: 6px
  }

  .community-shell {
    min-height: calc(100dvh - 245px) !important;
    display: block !important
  }

  .community-shell>.room-list {
    display: none !important
  }

  .community-chat {
    border-radius: 18px !important;
    min-height: calc(100dvh - 245px) !important
  }

  .community-chat>header {
    min-height: 88px !important;
    padding: 16px !important
  }

  .community-chat>header h2 {
    max-width: 100%;
    line-height: 1.12;
    font-size: 21px !important
  }

  .chat-feed {
    padding: 13px !important
  }

  .chat-feed>p {
    grid-template-columns: 34px 1fr !important;
    gap: 9px !important
  }

  .chat-feed>p>span {
    overflow-wrap: anywhere;
    min-width: 0
  }

  .signal-rooms {
    display: none !important
  }

  .active-challenge {
    min-height: 210px !important;
    padding: 18px !important
  }

  .available-list {
    background: 0 0 !important;
    border: 0 !important;
    margin-top: 12px !important
  }

  .available-list>header {
    border: 0 !important;
    min-height: 52px !important;
    padding: 0 2px 9px !important
  }

  .available-list>header h2 {
    font-size: 20px !important
  }

  .available-list article {
    margin-bottom: 8px;
    border: 1px solid #2b3732 !important;
    border-radius: 15px !important;
    grid-template-columns: 40px 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 82px !important;
    padding: 11px 12px !important;
    display: grid !important
  }

  .available-list article>svg {
    width: 21px !important;
    margin: 0 !important
  }

  .available-list article>div:not(.challenge-actions) p,
  .available-list article>span,
  .available-list .challenge-actions [data-slot=button] {
    display: none !important
  }

  .available-list article h3 {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important
  }

  .challenge-actions {
    width: auto !important
  }

  .challenge-actions>button:first-child {
    color: #0000;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 0;
    overflow: hidden
  }

  .challenge-actions>button:first-child:after {
    content: "›";
    color: #91a099;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 25px;
    display: grid
  }

  .reward-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important
  }

  .reward-grid>button {
    min-height: 150px !important
  }
}

.guest:before {
  opacity: .55 !important;
  background-color: #0000 !important;
  background-image: linear-gradient(#ffffff05 1px, #0000 1px), linear-gradient(90deg, #ffffff04 1px, #0000 1px) !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: repeat, repeat !important;
  background-size: 76px 76px !important;
  background-attachment: scroll, scroll !important;
  background-origin: padding-box, padding-box !important;
  background-clip: border-box, border-box !important
}

.guest .market-atmosphere {
  opacity: .085 !important;
  filter: saturate(.55)hue-rotate(18deg) !important
}

.guest .market-aura {
  background: radial-gradient(circle at 62% 42%, #687caa29, #687caa06 34%, #0000 68%) !important
}

.guest-copy h1 em {
  text-shadow: 0 0 36px #d8bb7b17;
  color: #d8bb7b !important
}

.guest-copy>p,
.guest-facts small {
  color: #929a98 !important
}

.guest-actions [data-slot=button],
.guest-head [data-slot=button] {
  color: #080a0a !important;
  background: #e7e1d4 !important;
  border-color: #e7e1d4 !important;
  box-shadow: 0 14px 42px #0000004d !important
}

.guest-preview {
  background: linear-gradient(155deg, #d8bb7b0e, #090d0ef5 38%, #070a0b) !important;
  border-color: #d8bb7b4d !important;
  box-shadow: 0 38px 110px #00000085, inset 0 1px #ffffff09 !important
}

.community-chat {
  background: radial-gradient(circle at 88% 5%, var(--room-accent, #8296c8), transparent 32%), #0a0d0f !important;
  border-color: #ffffff16 !important
}

@supports (color:color-mix(in lab, red, red)) {
  .community-chat {
    background: radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--room-accent, #8296c8) 8%, transparent), transparent 32%), #0a0d0f !important
  }
}

.community-chat {
  box-shadow: 0 28px 80px #00000042, inset 0 1px #ffffff06 !important
}

.community-chat>header {
  border-bottom-color: var(--room-accent, #8296c8) !important
}

@supports (color:color-mix(in lab, red, red)) {
  .community-chat>header {
    border-bottom-color: color-mix(in srgb, var(--room-accent, #8296c8) 24%, #ffffff12) !important
  }
}

.community-chat>header {
  background: linear-gradient(105deg, var(--room-accent, #8296c8), transparent 58%) !important
}

@supports (color:color-mix(in lab, red, red)) {
  .community-chat>header {
    background: linear-gradient(105deg, color-mix(in srgb, var(--room-accent, #8296c8) 8%, transparent), transparent 58%) !important
  }
}

.community-page.room-free {
  --room-accent: #7998dc
}

.community-page.room-family {
  --room-accent: #d2ad6c
}

.community-page.room-ots-250 {
  --room-accent: #63b99a
}

.community-page.room-ots-500 {
  --room-accent: #8c79c9
}

.community-page.room-exclusive {
  --room-accent: #be7885
}

.community-page .mobile-room-trigger {
  background: linear-gradient(100deg, var(--room-accent), #0a0d0f 70%) !important
}

@supports (color:color-mix(in lab, red, red)) {
  .community-page .mobile-room-trigger {
    background: linear-gradient(100deg, color-mix(in srgb, var(--room-accent) 12%, #0a0d0f), #0a0d0f 70%) !important
  }
}

.community-page .mobile-room-trigger {
  border-color: var(--room-accent) !important
}

@supports (color:color-mix(in lab, red, red)) {
  .community-page .mobile-room-trigger {
    border-color: color-mix(in srgb, var(--room-accent) 40%, #ffffff14) !important
  }
}

.community-page .mobile-room-trigger {
  box-shadow: inset 0 1px #ffffff06, 0 18px 50px #0003 !important
}

.mobile-room-list .room-choice {
  background: linear-gradient(100deg, var(--room-accent), #0b0f11 72%) !important
}

@supports (color:color-mix(in lab, red, red)) {
  .mobile-room-list .room-choice {
    background: linear-gradient(100deg, color-mix(in srgb, var(--room-accent) 10%, #0b0f11), #0b0f11 72%) !important
  }
}

.mobile-room-list .room-choice {
  border-color: var(--room-accent) !important
}

@supports (color:color-mix(in lab, red, red)) {
  .mobile-room-list .room-choice {
    border-color: color-mix(in srgb, var(--room-accent) 25%, #ffffff14) !important
  }
}

@media (width<=1100px) {

  [data-slot=dialog-content],
  .trade-generator-dialog.strategy-world,
  .signal-guide-dialog,
  .mechanic-dialog {
    inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px !important;
    top: auto !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - 18px - env(safe-area-inset-top)) !important;
    box-sizing: border-box !important;
    --tw-translate-x: 0px !important;
    --tw-translate-y: 0px !important;
    border-radius: 24px 24px 16px 16px !important;
    margin: 0 !important;
    position: fixed !important;
    left: 8px !important;
    overflow: hidden auto !important;
    transform: none !important
  }
}

@media (width<=760px) {
  .guest {
    background: radial-gradient(circle at 88% 7%, #62749e13, #0000 28%), #050708 !important
  }

  .guest-hero {
    background: 0 0 !important
  }

  .guest-copy h1 {
    color: #f0eee8 !important
  }

  .guest-actions [data-slot=button] {
    min-height: 58px !important
  }

  .more-grid {
    overflow: hidden;
    background: #0a0d0f !important;
    border: 1px solid #ffffff16 !important;
    border-radius: 22px !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 14px !important;
    display: grid !important;
    box-shadow: 0 26px 70px #00000040 !important
  }

  .more-grid button {
    min-height: 68px !important;
    box-shadow: none !important;
    background: 0 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #ffffff12 !important;
    border-radius: 0 !important;
    padding: 0 5px !important
  }

  .more-grid button:last-child {
    border-bottom: 0 !important
  }

  .more-grid button>svg:first-child {
    color: #8799c4 !important;
    width: 20px !important
  }

  .more-grid button:nth-child(2)>svg:first-child,
  .more-grid button:nth-child(3)>svg:first-child,
  .more-grid button:nth-child(4)>svg:first-child {
    color: #c4a66d !important
  }

  .more-grid button:nth-child(6)>svg:first-child,
  .more-grid button:nth-child(7)>svg:first-child {
    color: #6fae98 !important
  }

  .more-grid b {
    font-size: 16px !important;
    font-weight: 650 !important
  }
}

body {
  color: var(--am-ivory) !important;
  background: var(--am-obsidian) !important;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI Variable, Segoe UI, Arial, sans-serif !important
}

.guest {
  background: radial-gradient(circle at 73% 13%, #57706817, #0000 29%), radial-gradient(circle at 18% 72%, #be9d5c0b, #0000 31%), #050708 !important
}

.guest-head {
  -webkit-backdrop-filter: blur(18px)saturate(125%);
  backdrop-filter: blur(18px)saturate(125%);
  background: #050708c7 !important;
  border-bottom-color: #f2efe813 !important
}

.guest-copy h1,
.page-title h1 {
  color: var(--am-ivory) !important;
  letter-spacing: -.052em !important;
  font-weight: 650 !important
}

.guest-copy h1 em {
  color: #73e4bb !important
}

.guest-copy>p {
  color: #929d99 !important
}

.guest-preview {
  isolation: isolate;
  background: linear-gradient(145deg, #111a17eb, #070a0bfa) !important;
  border-color: #79d5b43d !important;
  box-shadow: 0 34px 90px #00000075, inset 0 1px #ffffff0b !important
}

.next-signal {
  isolation: isolate;
  background: radial-gradient(circle at 84% 18%, #55e6b21b, #0000 25%), linear-gradient(145deg, #0b1512, #07100e 70%) !important;
  border-color: #55e6b252 !important;
  box-shadow: 0 32px 86px #00000057, inset 0 1px #ffffff0a !important
}

.next-signal h2,
.next-signal strong,
.next-lesson h2,
.level-preview h2 {
  font-weight: 620 !important
}

.next-lesson {
  background: linear-gradient(150deg, #101319, #0b0e12) !important
}

.level-preview {
  background: linear-gradient(150deg, #17130d, #0b0b0b 76%) !important
}

.trade-generator-dialog.strategy-world {
  isolation: isolate;
  overflow: hidden;
  border-color: var(--strategy-accent) !important;
  width: min(920px, 100vw - 32px) !important;
  max-width: 920px !important
}

@supports (color:color-mix(in lab, red, red)) {
  .trade-generator-dialog.strategy-world {
    border-color: color-mix(in srgb, var(--strategy-accent) 35%, #232b28) !important
  }
}

.trade-generator-dialog.strategy-world {
  background: radial-gradient(circle at 87% 8%, var(--strategy-accent), transparent 31%), radial-gradient(circle at 12% 94%, var(--strategy-accent), transparent 35%), linear-gradient(155deg, #0d1212, #07090a 72%) !important
}

@supports (color:color-mix(in lab, red, red)) {
  .trade-generator-dialog.strategy-world {
    background: radial-gradient(circle at 87% 8%, color-mix(in srgb, var(--strategy-accent) 18%, transparent), transparent 31%), radial-gradient(circle at 12% 94%, color-mix(in srgb, var(--strategy-accent) 7%, transparent), transparent 35%), linear-gradient(155deg, #0d1212, #07090a 72%) !important
  }
}

.trade-generator-dialog.strategy-world {
  box-shadow: 0 42px 130px #000000b3, inset 0 1px #ffffff0e !important
}

.trade-generator-dialog [data-slot=dialog-title] {
  color: var(--am-ivory) !important;
  letter-spacing: -.035em !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 650 !important
}

.strategy-choice-list>button {
  background: #0b0f0fc7 !important;
  border-color: #f2efe816 !important;
  border-radius: 18px !important;
  grid-template-columns: 48px minmax(0, 1fr) 18px !important;
  min-height: 76px !important
}

.strategy-choice-list>button:hover,
.strategy-choice-list>button.active {
  border-color: var(--strategy-accent) !important
}

@supports (color:color-mix(in lab, red, red)) {

  .strategy-choice-list>button:hover,
  .strategy-choice-list>button.active {
    border-color: color-mix(in srgb, var(--strategy-accent) 65%, transparent) !important
  }
}

.strategy-choice-list>button:hover,
.strategy-choice-list>button.active {
  background: linear-gradient(100deg, var(--strategy-accent), #0a0d0d 72%) !important
}

@supports (color:color-mix(in lab, red, red)) {

  .strategy-choice-list>button:hover,
  .strategy-choice-list>button.active {
    background: linear-gradient(100deg, color-mix(in srgb, var(--strategy-accent) 12%, #0c1110), #0a0d0d 72%) !important
  }
}

.strategy-choice-list>button:hover,
.strategy-choice-list>button.active {
  box-shadow: inset 3px 0 var(--strategy-accent), 0 10px 34px #00000038 !important
}

.strategy-choice-list>button>i {
  background: var(--strategy-accent) !important;
  border-radius: 15px !important;
  width: 48px !important;
  height: 48px !important
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-choice-list>button>i {
    background: color-mix(in srgb, var(--strategy-accent) 8%, #101514) !important
  }
}

.strategy-choice-list>button>i .strategy-sigil {
  width: 38px !important;
  height: 38px !important
}

.strategy-world-preview {
  background: radial-gradient(circle at 76% 14%, var(--strategy-accent), transparent 28%), linear-gradient(145deg, var(--strategy-muted), #070a0b 72%) !important;
  border-radius: 28px !important;
  min-height: 452px !important;
  padding: 32px !important
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-world-preview {
    background: radial-gradient(circle at 76% 14%, color-mix(in srgb, var(--strategy-accent) 16%, transparent), transparent 28%), linear-gradient(145deg, color-mix(in srgb, var(--strategy-muted) 52%, #0b0f0f), #070a0b 72%) !important
  }
}

.strategy-world-preview {
  box-shadow: inset 0 1px #ffffff0d, 0 25px 60px #0000004d !important
}

.strategy-mark {
  background: radial-gradient(circle, var(--strategy-accent), #0b0e0f 68%) !important;
  border: 0 !important;
  border-radius: 34px !important;
  width: 116px !important;
  height: 116px !important
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-mark {
    background: radial-gradient(circle, color-mix(in srgb, var(--strategy-accent) 14%, #0d1412), #0b0e0f 68%) !important
  }
}

.strategy-mark {
  box-shadow: 0 0 0 1px var(--strategy-accent), 0 0 70px var(--strategy-accent) !important
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-mark {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--strategy-accent) 28%, transparent), 0 0 70px color-mix(in srgb, var(--strategy-accent) 13%, transparent) !important
  }
}

.strategy-mark>.strategy-sigil {
  width: 86px !important;
  height: 86px !important
}

.strategy-world-preview h2 {
  font-weight: 620 !important
}

.generator-context-line>.strategy-sigil {
  flex: 0 0 38px;
  width: 38px !important;
  height: 38px !important
}

.analysis-orbit>.strategy-sigil {
  width: 68px !important;
  height: 68px !important
}

.generated-deal-card {
  position: relative;
  overflow: hidden
}

.generated-deal-card>.strategy-sigil {
  width: 88px;
  height: 88px;
  color: var(--strategy-accent);
  opacity: .58;
  position: absolute;
  top: 22px;
  right: 22px
}

@media (width<=760px) {

  html,
  body,
  .page {
    max-width: 100% !important;
    overflow-x: clip !important
  }

  .guest-head {
    background: #050708eb !important
  }

  .guest-hero {
    background: 0 0 !important
  }

  .guest-copy h1 {
    font-size: clamp(48px, 14vw, 66px) !important;
    font-weight: 620 !important;
    line-height: .96 !important
  }

  .guest-copy>p {
    font-size: 17px !important;
    line-height: 1.52 !important
  }

  .next-signal .signal-tech,
  .next-signal .signal-facts span:nth-child(2) {
    display: none !important
  }

  .trade-generator-dialog.strategy-world {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(91dvh, 920px) !important;
    padding: 20px 16px max(18px, env(safe-area-inset-bottom)) !important;
    border-width: 1px 0 0 !important;
    border-radius: 26px 26px 0 0 !important;
    inset: auto 0 0 !important;
    overflow: hidden auto !important;
    transform: none !important
  }

  .trade-generator-dialog [data-slot=dialog-title] {
    max-width: calc(100% - 48px);
    font-size: 24px !important
  }

  .strategy-picker {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    min-height: 0 !important
  }

  .strategy-choice-list {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 9px !important;
    max-width: 100% !important;
    padding: 2px 1px 8px !important;
    display: flex !important;
    overflow-x: auto !important
  }

  .strategy-choice-list>button {
    scroll-snap-align: start;
    flex: 0 0 150px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-width: 150px !important;
    min-height: 82px !important;
    padding: 10px !important
  }

  .strategy-choice-list>button>svg:last-child {
    display: none !important
  }

  .strategy-choice-list>button>i {
    width: 40px !important;
    height: 40px !important
  }

  .strategy-choice-list>button>i .strategy-sigil {
    width: 33px !important;
    height: 33px !important
  }

  .strategy-world-preview {
    border-radius: 22px !important;
    min-height: 284px !important;
    padding: 20px !important
  }

  .strategy-mark {
    border-radius: 24px !important;
    width: 82px !important;
    height: 82px !important;
    top: 18px !important;
    left: auto !important;
    right: 18px !important
  }

  .strategy-mark>.strategy-sigil {
    width: 62px !important;
    height: 62px !important
  }

  .strategy-world-preview h2 {
    max-width: 70%;
    font-size: 34px !important
  }

  .strategy-world-preview>strong {
    max-width: 76%;
    font-size: 14px !important
  }

  .strategy-world-preview>p {
    margin: 9px 0 13px !important;
    font-size: 12px !important
  }

  .generator-option-grid {
    grid-template-columns: 1fr !important
  }

  .generated-deal-card>.strategy-sigil {
    width: 62px;
    height: 62px;
    top: 16px;
    right: 14px
  }

  .generator-dialog-actions {
    z-index: 6;
    background: linear-gradient(#0000, #080b0b 30%);
    padding-top: 10px;
    bottom: 0;
    position: sticky !important
  }
}

.strategy-world-preview {
  min-height: 500px !important
}

.strategy-essence {
  z-index: 2;
  border: 1px solid var(--strategy-accent);
  max-width: 570px;
  margin-top: 18px;
  padding: 13px 15px 14px;
  position: relative
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-essence {
    border: 1px solid color-mix(in srgb, var(--strategy-accent) 22%, #ffffff12)
  }
}

.strategy-essence {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #05080870;
  border-radius: 15px
}

.strategy-essence>small {
  letter-spacing: .14em;
  margin-bottom: 5px;
  font-weight: 750;
  display: block;
  color: var(--strategy-accent) !important;
  font-size: 8px !important
}

.strategy-essence>p {
  color: #c1c8c5;
  margin: 0;
  font-size: 12px;
  line-height: 1.48
}

.strategy-mechanic {
  z-index: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
  display: grid;
  position: relative
}

.strategy-mechanic:before {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, transparent, var(--strategy-accent), transparent);
  opacity: .48;
  height: 1px;
  position: absolute;
  top: 16px;
  left: 16%;
  right: 16%
}

.strategy-mechanic>span {
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: 62px;
  border: 1px solid var(--strategy-accent) !important;
  align-items: flex-start !important;
  gap: 7px !important;
  padding: 9px 10px !important;
  display: flex !important
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-mechanic>span {
    border: 1px solid color-mix(in srgb, var(--strategy-accent) 18%, #ffffff0f) !important
  }
}

.strategy-mechanic>span {
  background: var(--strategy-accent) !important;
  border-radius: 13px !important
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-mechanic>span {
    background: color-mix(in srgb, var(--strategy-accent) 5%, #070a0ad1) !important
  }
}

.strategy-mechanic>span {
  color: #d9ddda !important
}

.strategy-mechanic>span>i {
  border: 1px solid var(--strategy-accent);
  place-items: center;
  width: 17px;
  height: 17px;
  display: grid
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-mechanic>span>i {
    border: 1px solid color-mix(in srgb, var(--strategy-accent) 55%, transparent)
  }
}

.strategy-mechanic>span>i {
  color: var(--strategy-accent);
  box-shadow: 0 0 14px var(--strategy-accent);
  background: #090d0c;
  border-radius: 50%;
  font-size: 8px;
  font-style: normal
}

@supports (color:color-mix(in lab, red, red)) {
  .strategy-mechanic>span>i {
    box-shadow: 0 0 14px color-mix(in srgb, var(--strategy-accent) 16%, transparent)
  }
}

.strategy-mechanic>span>b {
  color: #d9ddda;
  text-overflow: ellipsis;
  font-size: 9px;
  font-weight: 610;
  line-height: 1.25;
  overflow: hidden
}

.strategy-meta {
  z-index: 2;
  gap: 7px;
  margin-top: 10px;
  display: flex;
  position: relative
}

.strategy-meta>span {
  color: #9fa9a5;
  border: 1px solid #ffffff14;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  font-size: 10px;
  display: flex
}

.strategy-meta svg {
  width: 13px;
  color: var(--strategy-accent)
}

@media (width<=760px) {
  .strategy-world-preview {
    justify-content: flex-end !important;
    min-height: 348px !important
  }

  .strategy-world-preview h2 {
    margin-top: 5px !important
  }

  .strategy-essence {
    margin-top: 10px;
    padding: 10px 11px
  }

  .strategy-essence>p {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 11px;
    line-height: 1.4;
    display: -webkit-box;
    overflow: hidden
  }

  .strategy-mechanic {
    gap: 5px;
    margin-top: 7px
  }

  .strategy-mechanic>span {
    min-height: 54px;
    padding: 7px !important
  }

  .strategy-mechanic>span>b {
    font-size: 8px
  }

  .strategy-meta {
    margin-top: 7px
  }

  .strategy-meta>span {
    padding: 5px 7px;
    font-size: 8px
  }
}

.amir-navigator {
  --navigator-accent: var(--am-mint);
  isolation: isolate;
  border: 1px solid var(--navigator-accent);
  grid-template-columns: 72px minmax(0, 1fr) minmax(260px, 330px);
  align-items: center;
  gap: 24px;
  margin: 0 0 18px;
  padding: 26px 28px 30px;
  display: grid;
  position: relative;
  overflow: hidden
}

@supports (color:color-mix(in lab, red, red)) {
  .amir-navigator {
    border: 1px solid color-mix(in srgb, var(--navigator-accent) 26%, #ffffff17)
  }
}

.amir-navigator {
  background: radial-gradient(circle at 7% 28%, var(--navigator-accent), transparent 24%), linear-gradient(118deg, #101614 0%, #0b100f 54%, #080b0c 100%);
  border-radius: 28px
}

@supports (color:color-mix(in lab, red, red)) {
  .amir-navigator {
    background: radial-gradient(circle at 7% 28%, color-mix(in srgb, var(--navigator-accent) 13%, transparent), transparent 24%), linear-gradient(118deg, #101614 0%, #0b100f 54%, #080b0c 100%)
  }
}

.amir-navigator {
  box-shadow: 0 34px 90px #00000052, inset 0 1px #ffffff0b
}

.navigator-telegram-linked {
  --navigator-accent: #7da5ff
}

.navigator-pocket-linked,
.navigator-ftd-review {
  --navigator-accent: #d7b978
}

.navigator-ftd-confirmed,
.navigator-first-value,
.navigator-active {
  --navigator-accent: #55e6b2
}

.amir-navigator:before {
  content: "AM / NEXT";
  z-index: -1;
  color: var(--navigator-accent);
  position: absolute;
  top: -22px;
  right: 25%
}

@supports (color:color-mix(in lab, red, red)) {
  .amir-navigator:before {
    color: color-mix(in srgb, var(--navigator-accent) 6%, transparent)
  }
}

.amir-navigator:before {
  letter-spacing: -.08em;
  white-space: nowrap;
  font-size: clamp(72px, 8.5vw, 136px);
  font-weight: 760
}

.amir-navigator:after {
  content: "";
  z-index: -1;
  background: linear-gradient(105deg, transparent 52%, var(--navigator-accent));
  position: absolute;
  inset: 0
}

@supports (color:color-mix(in lab, red, red)) {
  .amir-navigator:after {
    background: linear-gradient(105deg, transparent 52%, color-mix(in srgb, var(--navigator-accent) 4%, transparent))
  }
}

.amir-navigator:after {
  pointer-events: none
}

.navigator-identity {
  border: 1px solid var(--navigator-accent);
  align-self: start;
  place-items: center;
  width: 68px;
  height: 68px;
  display: grid;
  position: relative
}

@supports (color:color-mix(in lab, red, red)) {
  .navigator-identity {
    border: 1px solid color-mix(in srgb, var(--navigator-accent) 45%, transparent)
  }
}

.navigator-identity {
  background: radial-gradient(circle at 35% 28%, var(--navigator-accent), transparent 42%), #0b100f;
  border-radius: 22px
}

@supports (color:color-mix(in lab, red, red)) {
  .navigator-identity {
    background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--navigator-accent) 32%, transparent), transparent 42%), #0b100f
  }
}

.navigator-identity {
  box-shadow: 0 0 42px var(--navigator-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .navigator-identity {
    box-shadow: 0 0 42px color-mix(in srgb, var(--navigator-accent) 12%, transparent)
  }
}

.navigator-identity>span {
  color: #f3f1ea;
  letter-spacing: -.06em;
  font-size: 28px;
  font-weight: 720
}

.navigator-identity>i {
  background: var(--navigator-accent);
  width: 16px;
  height: 16px;
  box-shadow: 0 0 16px var(--navigator-accent);
  border: 4px solid #0b100f;
  border-radius: 50%;
  position: absolute;
  bottom: -3px;
  right: -3px
}

.navigator-message {
  min-width: 0
}

.navigator-kicker {
  color: var(--navigator-accent);
  letter-spacing: .16em;
  margin-bottom: 9px;
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  font-weight: 750;
  display: block
}

.navigator-message h2 {
  color: #f2efe8;
  letter-spacing: -.045em;
  text-wrap: balance;
  max-width: 760px;
  margin: 0;
  font-size: clamp(24px, 2.25vw, 36px);
  font-weight: 610;
  line-height: 1.06
}

.navigator-message>p {
  color: #a8b0ad;
  max-width: 740px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55
}

.navigator-proof {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
  display: flex
}

.navigator-proof>span {
  border: 1px solid var(--navigator-accent);
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  display: flex
}

@supports (color:color-mix(in lab, red, red)) {
  .navigator-proof>span {
    border: 1px solid color-mix(in srgb, var(--navigator-accent) 18%, #ffffff0f)
  }
}

.navigator-proof>span {
  color: #bcc5c1;
  background: #04070752;
  border-radius: 999px;
  font-size: 10px
}

.navigator-proof svg {
  width: 12px;
  height: 12px;
  color: var(--navigator-accent)
}

.navigator-decision {
  background: #0407089e;
  border: 1px solid #ffffff16;
  border-radius: 19px;
  flex-direction: column;
  gap: 9px;
  padding: 17px;
  display: flex;
  box-shadow: inset 0 1px #ffffff06
}

.navigator-decision>small {
  color: #7f8986;
  letter-spacing: .14em;
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  font-weight: 700
}

.navigator-decision [data-slot=button] {
  justify-content: space-between;
  min-height: 52px;
  font-size: 13px;
  font-weight: 700;
  background: var(--navigator-accent) !important;
  color: #06100c !important;
  box-shadow: 0 14px 40px var(--navigator-accent) !important;
  border: 0 !important;
  border-radius: 14px !important
}

@supports (color:color-mix(in lab, red, red)) {
  .navigator-decision [data-slot=button] {
    box-shadow: 0 14px 40px color-mix(in srgb, var(--navigator-accent) 13%, transparent) !important
  }
}

.navigator-decision [data-slot=button] svg {
  width: 16px
}

.navigator-decision>span {
  color: #68716e;
  text-align: center;
  font-size: 9px
}

.navigator-route {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  display: grid;
  position: absolute;
  bottom: 10px;
  left: 28px;
  right: 28px
}

.navigator-route>i {
  background: #ffffff12;
  border-radius: 2px;
  height: 2px;
  overflow: hidden
}

.navigator-route>i.done {
  background: var(--navigator-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .navigator-route>i.done {
    background: color-mix(in srgb, var(--navigator-accent) 42%, #ffffff12)
  }
}

.navigator-route>i.current {
  background: linear-gradient(90deg, var(--navigator-accent) 0 58%, #ffffff12 58%);
  box-shadow: 0 0 10px var(--navigator-accent)
}

@supports (color:color-mix(in lab, red, red)) {
  .navigator-route>i.current {
    box-shadow: 0 0 10px color-mix(in srgb, var(--navigator-accent) 30%, transparent)
  }
}

.amir-context-guide {
  max-width: 1360px;
  animation: am-page-in .4s var(--am-ease) both;
  background: linear-gradient(100deg, #7da5ff17, #0a0d0ff0 40%, #0a0d0ff0);
  border: 1px solid #7da5ff33;
  border-radius: 18px;
  grid-template-columns: 44px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 14px;
  margin: 0 auto 20px;
  padding: 14px 16px;
  display: grid;
  position: relative;
  box-shadow: 0 20px 55px #00000038, inset 0 1px #ffffff06
}

.context-amir {
  color: #eff1f5;
  background: radial-gradient(circle at 35% 25%, #7da5ff47, #0000 48%), #0c1116;
  border: 1px solid #7da5ff6b;
  border-radius: 13px;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 17px;
  font-weight: 720;
  display: grid
}

.amir-context-guide span {
  color: #96b2ff;
  letter-spacing: .15em;
  margin-bottom: 4px;
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  font-weight: 740;
  display: block
}

.amir-context-guide p {
  color: #b3bbb8;
  max-width: 980px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5
}

.amir-context-guide>button {
  color: #77817e;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 22px
}

.amir-context-guide>button:hover {
  color: #e8e9e6;
  background: #ffffff0d
}

@media (width<=1100px) {
  .amir-navigator {
    grid-template-columns: 58px minmax(0, 1fr)
  }

  .navigator-identity {
    border-radius: 18px;
    width: 56px;
    height: 56px
  }

  .navigator-decision {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    display: grid
  }
}

@media (width<=760px) {
  .amir-navigator {
    background: radial-gradient(circle at 6% 12%, var(--navigator-accent), transparent 28%), linear-gradient(145deg, #0f1513, #080b0c 76%);
    border-radius: 22px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 14px;
    padding: 18px 16px 22px
  }

  @supports (color:color-mix(in lab, red, red)) {
    .amir-navigator {
      background: radial-gradient(circle at 6% 12%, color-mix(in srgb, var(--navigator-accent) 12%, transparent), transparent 28%), linear-gradient(145deg, #0f1513, #080b0c 76%)
    }
  }

  .amir-navigator:before {
    opacity: .72;
    font-size: 58px;
    top: 3px;
    right: -10px
  }

  .navigator-identity {
    border-radius: 14px;
    width: 42px;
    height: 42px
  }

  .navigator-identity>span {
    font-size: 20px
  }

  .navigator-identity>i {
    border-width: 3px;
    width: 13px;
    height: 13px
  }

  .navigator-kicker {
    margin-top: 2px;
    margin-bottom: 7px;
    font-size: 8px
  }

  .navigator-message h2 {
    letter-spacing: -.038em;
    max-width: none;
    font-size: 22px;
    line-height: 1.08
  }

  .navigator-message>p {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    overflow: hidden
  }

  .navigator-proof {
    gap: 6px;
    margin-top: 11px
  }

  .navigator-proof>span {
    padding: 6px 8px;
    font-size: 9px
  }

  .navigator-decision {
    box-shadow: none;
    background: 0 0;
    border: 0;
    grid-column: 1/-1;
    gap: 7px;
    padding: 0
  }

  .navigator-decision>small,
  .navigator-decision>span {
    display: none
  }

  .navigator-decision [data-slot=button] {
    width: 100%;
    min-height: 54px;
    padding-inline: 16px;
    font-size: 13px
  }

  .navigator-route {
    gap: 4px;
    bottom: 9px;
    left: 16px;
    right: 16px
  }

  .amir-context-guide {
    border-radius: 16px;
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    gap: 10px;
    margin: 0 0 12px;
    padding: 11px 10px
  }

  .context-amir {
    border-radius: 11px;
    width: 34px;
    height: 34px;
    font-size: 15px
  }

  .amir-context-guide span {
    font-size: 7px
  }

  .amir-context-guide p {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 11px;
    line-height: 1.42;
    display: -webkit-box;
    overflow: hidden
  }

  .amir-context-guide>button {
    width: 28px;
    height: 28px;
    font-size: 19px
  }
}

.navigator-launcher {
  z-index: 44;
  color: #edf0eb;
  -webkit-backdrop-filter: blur(18px)saturate(130%);
  backdrop-filter: blur(18px)saturate(130%);
  cursor: pointer;
  background: #080c0eeb;
  border: 1px solid #7da5ff40;
  border-radius: 18px;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  min-width: 238px;
  padding: 10px 12px;
  display: grid;
  position: fixed;
  bottom: 22px;
  right: 22px;
  box-shadow: 0 24px 70px #0000007a, inset 0 1px #ffffff0a
}

.navigator-launcher>i {
  color: #f1f0eb;
  background: radial-gradient(circle at 32% 26%, #7da5ff40, #0000 50%), #0c1116;
  border: 1px solid #7da5ff6b;
  border-radius: 13px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 16px;
  font-style: normal;
  font-weight: 720;
  display: grid
}

.navigator-launcher>span {
  flex-direction: column;
  align-items: flex-start;
  display: flex
}

.navigator-launcher b {
  font-size: 12px;
  font-weight: 680
}

.navigator-launcher small {
  color: #7f8a86;
  font-size: 9px
}

.navigator-launcher>svg {
  color: #7da5ff;
  width: 16px
}

.guided-amir-tour {
  z-index: 80;
  color: #f1efe9;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  width: min(430px, 100vw - 32px);
  animation: am-page-in .4s var(--am-ease) both;
  background: radial-gradient(circle at 8% 12%, #7da5ff21, #0000 28%), linear-gradient(145deg, #0d1216fa, #070a0cfa);
  border: 1px solid #7da5ff4d;
  border-radius: 24px;
  padding: 16px;
  position: fixed;
  bottom: 24px;
  right: 24px;
  box-shadow: 0 36px 120px #000000ad, inset 0 1px #ffffff0d
}

.guided-amir-tour>header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  display: flex
}

.guided-amir-tour>header span {
  color: #91adf5;
  letter-spacing: .14em;
  align-items: center;
  gap: 7px;
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  font-weight: 740;
  display: flex
}

.guided-amir-tour>header span i {
  background: #7da5ff;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 12px #7da5ff
}

.guided-amir-tour>header button {
  color: #7f8986;
  cursor: pointer;
  background: #ffffff0a;
  border: 0;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 20px
}

.guided-amir-tour>div {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 13px;
  display: grid
}

.tour-avatar {
  color: #f2f0e9;
  background: radial-gradient(circle at 34% 24%, #55e6b238, #0000 48%), #0b1210;
  border: 1px solid #55e6b261;
  border-radius: 15px;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 19px;
  font-style: normal;
  font-weight: 720;
  display: grid
}

.guided-amir-tour>div small {
  color: #55e6b2;
  letter-spacing: .13em;
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  font-weight: 720
}

.guided-amir-tour h3 {
  color: #f2efe8;
  letter-spacing: -.035em;
  margin: 5px 0 8px;
  font-size: 20px;
  font-weight: 620;
  line-height: 1.12
}

.guided-amir-tour p {
  color: #a4adaa;
  margin: 0;
  font-size: 12px;
  line-height: 1.5
}

.guided-amir-tour>[data-slot=button] {
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 700;
  color: #080b0c !important;
  background: #f0eee7 !important;
  border: 0 !important;
  border-radius: 14px !important
}

.app[class*=tour-step-]:after {
  content: "";
  z-index: 52;
  pointer-events: none;
  background: #01030470;
  animation: .25s both am-page-in;
  position: fixed;
  inset: 0
}

.tour-step-0 .amir-navigator,
.tour-step-1 .signal-primary-action,
.tour-step-2 .lesson-player,
.tour-step-3 .community-chat,
.tour-step-4 .next-level-preview-callout {
  position: relative;
  z-index: 60 !important;
  box-shadow: 0 0 0 2px #7da5ffe6, 0 0 0 9px #7da5ff1a, 0 34px 100px #000000a8 !important
}

.tour-step-1 .signal-primary-action:after,
.tour-step-2 .lesson-player:after,
.tour-step-3 .community-chat:after,
.tour-step-4 .next-level-preview-callout:after {
  content: "СМОТРИ СЮДА";
  color: #071018;
  letter-spacing: .12em;
  background: #7da5ff;
  border-radius: 999px;
  padding: 6px 9px;
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 7px;
  font-weight: 800;
  position: absolute;
  top: -12px;
  right: 18px
}

.next-level-preview-callout {
  background: radial-gradient(circle at 88% 15%, #7da5ff1a, #0000 26%), linear-gradient(130deg, #10151b, #090c0f);
  border: 1px solid #7da5ff38;
  border-radius: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  padding: 24px;
  display: grid;
  box-shadow: 0 28px 70px #00000040
}

.next-level-preview-callout span,
.future-learning-unlock span {
  color: #8ca9f0;
  letter-spacing: .14em;
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  font-weight: 740
}

.next-level-preview-callout h2 {
  color: #f0eee8;
  letter-spacing: -.035em;
  margin: 7px 0;
  font-size: 24px;
  font-weight: 620
}

.next-level-preview-callout p {
  color: #939d99;
  margin: 0;
  font-size: 12px
}

.next-level-preview-callout [data-slot=button] {
  min-height: 52px;
  color: #080b0c !important;
  background: #e9e7e0 !important
}

.future-cabinet-dialog {
  background: radial-gradient(circle at 82% 8%, #7da5ff21, #0000 30%), linear-gradient(150deg, #10151b, #070a0c 74%) !important;
  border-color: #7da5ff4d !important;
  width: min(960px, 100vw - 32px) !important;
  max-width: 960px !important;
  overflow: hidden !important;
  box-shadow: 0 46px 150px #000000bf, inset 0 1px #ffffff0d !important
}

.future-cabinet-dialog [data-slot=dialog-title] {
  color: #f1efe9 !important;
  letter-spacing: -.045em !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 620 !important
}

.future-level-rail {
  grid-template-columns: 1fr 42px 1fr;
  align-items: center;
  gap: 10px;
  display: grid
}

.future-level-rail>span {
  background: #05080a94;
  border: 1px solid #ffffff14;
  border-radius: 16px;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  display: flex
}

.future-level-rail>span.future {
  background: #7da5ff14;
  border-color: #7da5ff5c;
  box-shadow: 0 0 38px #7da5ff17
}

.future-level-rail small {
  color: #788481;
  letter-spacing: .13em;
  font-size: 8px
}

.future-level-rail b {
  color: #eef0eb;
  font-size: 20px;
  font-weight: 650
}

.future-level-rail em {
  color: #919b97;
  font-size: 10px;
  font-style: normal
}

.future-level-rail>i {
  color: #7da5ff;
  place-items: center;
  display: grid
}

.future-level-rail>i svg {
  width: 18px
}

.future-cabinet-stage {
  background: #0306088c;
  border: 1px solid #ffffff12;
  border-radius: 22px;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  display: grid
}

.future-cabinet-stage>aside {
  border-right: 1px solid #ffffff12;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  display: flex
}

.future-cabinet-stage>aside>b {
  color: #64706c;
  letter-spacing: .14em;
  margin-bottom: 6px;
  font-size: 8px
}

.future-cabinet-stage>aside>span {
  color: #b8c0bd;
  border-radius: 11px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 9px;
  font-size: 11px;
  display: grid
}

.future-cabinet-stage>aside>span:nth-child(2),
.future-cabinet-stage>aside>span:nth-child(3),
.future-cabinet-stage>aside>span:nth-child(4) {
  color: #edf0eb;
  background: #7da5ff14
}

.future-cabinet-stage>aside svg {
  color: #7da5ff;
  width: 15px
}

.future-cabinet-stage>aside i {
  color: #071018;
  background: #7da5ff;
  border-radius: 99px;
  padding: 3px 5px;
  font-size: 6px;
  font-style: normal;
  font-weight: 800
}

.future-cabinet-stage>div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid
}

.future-stage-label {
  color: #8ca9f0;
  letter-spacing: .14em;
  grid-column: 1/-1;
  font-size: 8px;
  font-weight: 740
}

.future-cabinet-stage article {
  background: linear-gradient(150deg, #7da5ff13, #0a0d10d1);
  border: 1px solid #7da5ff2e;
  border-radius: 16px;
  flex-direction: column;
  justify-content: space-between;
  min-height: 166px;
  padding: 14px;
  display: flex
}

.future-cabinet-stage article>svg {
  color: #7da5ff;
  width: 24px
}

.future-cabinet-stage article small {
  color: #7d9cec;
  letter-spacing: .12em;
  font-size: 7px
}

.future-cabinet-stage article h3 {
  color: #f0eee8;
  margin: 5px 0;
  font-size: 16px;
  font-weight: 640
}

.future-cabinet-stage article p {
  color: #89938f;
  margin: 0;
  font-size: 10px;
  line-height: 1.42
}

.future-cabinet-actions {
  margin-top: 14px
}

.future-cabinet-actions [data-slot=button] {
  width: 100%;
  min-height: 54px;
  color: #071018 !important;
  background: #7da5ff !important
}

.future-cabinet-actions>small {
  color: #76817d;
  text-align: center;
  margin-top: 8px;
  font-size: 9px;
  display: block
}

.future-preview-bar {
  z-index: 46;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #0e141bf0;
  border-bottom: 1px solid #7da5ff3d;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 22px;
  display: grid;
  position: sticky;
  top: 0
}

.future-preview-bar span {
  color: #dfe7ff;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 680;
  display: flex
}

.future-preview-bar span svg {
  color: #7da5ff;
  width: 15px
}

.future-preview-bar small {
  color: #7f8a94;
  font-size: 9px
}

.future-preview-bar button {
  color: #91adf5;
  cursor: pointer;
  background: 0 0;
  border: 0;
  font-size: 10px
}

.future-nav-badge {
  color: #071018;
  background: #7da5ff;
  border-radius: 99px;
  margin-left: auto;
  padding: 3px 5px;
  font-size: 6px;
  font-style: normal;
  font-weight: 850
}

.future-preview-active .side-level {
  background: linear-gradient(145deg, #7da5ff1a, #0b0e11) !important;
  border-color: #7da5ff59 !important
}

.future-preview-active .navigator-launcher {
  display: none
}

.future-preview-active .next-level,
.future-preview-active .scheduled-session-list article:nth-child(3) {
  border-color: #7da5ff75 !important;
  box-shadow: 0 0 0 1px #7da5ff1f, 0 24px 70px #344b8429 !important
}

.scheduled-session-list article.preview-unlock {
  opacity: 1 !important;
  background: linear-gradient(100deg, #7da5ff17, #0a0d0ff0) !important;
  border-style: solid !important;
  position: relative !important
}

.scheduled-session-list article.preview-unlock:before {
  content: "ПОЯВИТСЯ НА OTS 500";
  color: #8ca9f0;
  letter-spacing: .12em;
  font-size: 7px;
  font-weight: 800;
  position: absolute;
  top: 8px;
  right: 12px
}

.future-learning-unlock {
  background: linear-gradient(105deg, #7da5ff1a, #0a0e12 65%);
  border: 1px solid #7da5ff47;
  border-radius: 18px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  display: grid
}

.future-learning-unlock>svg {
  color: #7da5ff;
  width: 24px
}

.future-learning-unlock h3 {
  color: #edf0eb;
  margin: 4px 0;
  font-size: 15px;
  font-weight: 640
}

.future-learning-unlock p {
  color: #88938f;
  margin: 0;
  font-size: 10px
}

.future-learning-unlock button {
  color: #91adf5;
  cursor: pointer;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  display: flex
}

.future-learning-unlock button svg {
  width: 14px
}

@media (width<=760px) {
  .navigator-launcher {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    border-radius: 16px;
    grid-template-columns: 1fr;
    width: 48px;
    min-width: 0;
    height: 48px;
    padding: 4px;
    display: grid
  }

  .navigator-launcher>i {
    width: 38px;
    height: 38px
  }

  .navigator-launcher>span,
  .navigator-launcher>svg {
    display: none
  }

  .guided-amir-tour {
    right: 8px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    border-radius: 22px;
    width: calc(100vw - 16px);
    padding: 14px
  }

  .guided-amir-tour>div {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px
  }

  .tour-avatar {
    border-radius: 13px;
    width: 38px;
    height: 38px;
    font-size: 16px
  }

  .guided-amir-tour h3 {
    font-size: 17px
  }

  .guided-amir-tour p {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 11px;
    display: -webkit-box;
    overflow: hidden
  }

  .guided-amir-tour>[data-slot=button] {
    min-height: 48px;
    margin-top: 12px
  }

  .tour-step-3 .mobile-room-trigger {
    position: relative;
    z-index: 60 !important;
    box-shadow: 0 0 0 2px #7da5ffe6, 0 0 0 8px #7da5ff1a, 0 28px 80px #0009 !important
  }

  .tour-step-3 .community-chat {
    z-index: auto !important;
    box-shadow: none !important
  }

  .app[class*=tour-step-] .mobile-nav {
    z-index: 51 !important
  }

  .next-level-preview-callout {
    border-radius: 20px;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px
  }

  .next-level-preview-callout h2 {
    font-size: 20px
  }

  .next-level-preview-callout [data-slot=button] {
    width: 100%
  }

  .future-cabinet-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    padding: 18px 14px max(16px, env(safe-area-inset-bottom)) !important;
    border-width: 1px 0 0 !important;
    border-radius: 26px 26px 0 0 !important;
    inset: auto 0 0 !important;
    overflow-y: auto !important
  }

  .future-cabinet-dialog [data-slot=dialog-title] {
    font-size: 28px !important
  }

  .future-level-rail {
    grid-template-columns: 1fr 28px 1fr;
    gap: 6px
  }

  .future-level-rail>span {
    padding: 10px
  }

  .future-level-rail b {
    font-size: 16px
  }

  .future-level-rail em {
    font-size: 8px
  }

  .future-cabinet-stage {
    grid-template-columns: 1fr;
    padding: 8px
  }

  .future-cabinet-stage>aside {
    border-bottom: 1px solid #ffffff12;
    border-right: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 6px;
    display: grid
  }

  .future-cabinet-stage>aside>b {
    grid-column: 1/-1
  }

  .future-cabinet-stage>aside>span {
    grid-template-columns: 14px minmax(0, 1fr);
    min-height: 40px;
    padding: 0 6px;
    font-size: 9px
  }

  .future-cabinet-stage>aside>span:last-child,
  .future-cabinet-stage>aside i {
    display: none
  }

  .future-cabinet-stage>div {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    max-width: 100%;
    padding: 4px 0;
    display: flex;
    overflow-x: auto
  }

  .future-stage-label {
    display: none
  }

  .future-cabinet-stage article {
    scroll-snap-align: start;
    flex: 0 0 230px;
    min-width: 230px;
    min-height: 146px
  }

  .future-preview-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 48px;
    padding: 0 12px
  }

  .future-preview-bar small {
    display: none
  }

  .future-preview-bar span,
  .future-preview-bar button {
    font-size: 9px
  }

  .future-learning-unlock {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 12px
  }

  .future-learning-unlock button {
    grid-column: 2
  }
}

.navigator-launcher {
  background: linear-gradient(145deg, #0e1413f7, #070a0cf7);
  border-color: #55e6b24d;
  width: min(380px, 100vw - 32px);
  animation: 3s ease-in-out infinite navigator-breathe;
  bottom: 22px;
  left: 50%;
  right: auto;
  transform: translate(-50%)
}

.navigator-launcher>svg {
  color: #55e6b2
}

.guided-amir-tour {
  background: radial-gradient(circle at 11% 10%, #55e6b226, #0000 28%), linear-gradient(145deg, #0d1312fc, #06090bfc);
  border-color: #55e6b257;
  width: min(520px, 100vw - 32px);
  animation: .48s cubic-bezier(.2, .8, .2, 1) both navigator-arrive;
  bottom: 28px;
  left: 50%;
  right: auto;
  transform: translate(-50%)
}

.guided-amir-tour>header span {
  color: #71e8bb
}

.guided-amir-tour>header span i {
  background: #55e6b2;
  box-shadow: 0 0 14px #55e6b2
}

.app[class*=tour-step-]:after {
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  background: #01030429
}

@media (width>=1101px) {
  [data-slot=dialog-content] {
    margin: 0 !important;
    inset: 50% auto auto 50% !important;
    transform: none !important
  }
}

@media (width<=760px) {
  .navigator-launcher {
    left: 12px;
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    width: auto;
    height: 58px;
    padding: 8px 10px;
    transform: none
  }

  .navigator-launcher>span {
    display: flex
  }

  .navigator-launcher>svg {
    display: block
  }

  .guided-amir-tour {
    left: 8px;
    right: 8px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(410px, 100dvh - 150px);
    animation-name: navigator-mobile-arrive;
    transform: none
  }

  .guided-amir-tour p {
    -webkit-line-clamp: initial;
    display: block;
    overflow: visible
  }

  .tour-pointer-layer {
    display: none
  }

  [data-slot=dialog-content] {
    transform: none !important
  }
}

.amir-quick-nav {
  width: min(560px, 100vw - 32px);
  padding: 18px
}

.amir-quick-nav .quick-nav-intro {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 15px;
  display: grid
}

.amir-quick-nav .quick-nav-intro h3 {
  margin-bottom: 5px;
  font-size: 24px
}

.amir-quick-nav .quick-nav-intro p {
  color: #8b9691;
  font-size: 13px
}

.quick-nav-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid
}

.quick-nav-actions>button {
  color: #edf1ed;
  text-align: left;
  cursor: pointer;
  background: #ffffff09;
  border: 1px solid #ffffff1a;
  border-radius: 16px;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 76px;
  padding: 12px;
  display: grid
}

.quick-nav-actions>button:hover,
.quick-nav-actions>button:focus-visible {
  background: #55e6b214;
  border-color: #55e6b273;
  outline: none
}

.quick-nav-actions>button>svg:first-child {
  color: #55e6b2;
  width: 20px
}

.quick-nav-actions>button>svg:last-child {
  color: #6f7b76;
  width: 15px
}

.quick-nav-actions span {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex
}

.quick-nav-actions b {
  font-size: 14px;
  font-weight: 650
}

.quick-nav-actions small {
  color: #84908b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden
}

@media (width<=760px) {
  .amir-quick-nav {
    border-radius: 22px;
    max-height: none;
    padding: 14px
  }

  .amir-quick-nav .quick-nav-intro {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 12px
  }

  .amir-quick-nav .quick-nav-intro h3 {
    margin: 3px 0;
    font-size: 20px
  }

  .amir-quick-nav .quick-nav-intro p {
    font-size: 12px
  }

  .quick-nav-actions {
    grid-template-columns: 1fr 1fr;
    gap: 7px
  }

  .quick-nav-actions>button {
    border-radius: 14px;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    min-height: 72px;
    padding: 10px
  }

  .quick-nav-actions>button>svg:first-child {
    width: 18px
  }

  .quick-nav-actions>button>svg:last-child {
    display: none
  }

  .quick-nav-actions b {
    font-size: 13px;
    line-height: 1.15
  }

  .quick-nav-actions small {
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 11px;
    display: -webkit-box;
    overflow: hidden
  }
}

.forgot-password {
  cursor: pointer;
  color: #79e8bc !important;
  background: 0 0 !important;
  border: 0 !important;
  justify-self: start !important;
  min-height: 36px !important;
  margin: -4px 0 4px !important;
  font-size: 14px !important;
  font-weight: 650 !important
}

.forgot-password:hover,
.forgot-password:focus-visible {
  outline: none;
  text-decoration: underline;
  color: #b5f6dc !important
}

.recovery-dialog form {
  gap: 14px;
  display: grid
}

.recovery-dialog form label {
  color: #aab4af;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
  display: grid
}

.recovery-dialog form input {
  color: #f2f5f2;
  background: #ffffff0a;
  border: 1px solid #ffffff21;
  border-radius: 13px;
  outline: none;
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  font-size: 16px
}

.recovery-dialog form input:focus {
  border-color: #55e6b294;
  box-shadow: 0 0 0 3px #55e6b21a
}

@media (width<=760px) {

  .page main p,
  .page article p,
  .mechanic-dialog p,
  .amir-context-guide p,
  .guided-amir-tour p {
    font-size: max(14px, 1em) !important;
    line-height: 1.48 !important
  }

  .page button,
  .mechanic-dialog button,
  .guided-amir-tour button {
    min-height: 44px
  }
}

@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-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity
}

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

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid
}

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

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

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

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

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid
}

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

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

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

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

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

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

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

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

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

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

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

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

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: ""
}

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

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

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

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

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

@keyframes accordion-down {
  0% {
    height: 0
  }

  to {
    height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto))
  }
}

@keyframes accordion-up {
  0% {
    height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto))
  }

  to {
    height: 0
  }
}

@keyframes caret-blink {

  0%,
  70%,
  to {
    opacity: 1
  }

  20%,
  50% {
    opacity: 0
  }
}

@keyframes scroll-fade-reveal-b {
  0% {
    --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))))
  }

  to {
    --scroll-fade-b: 0px
  }
}

@keyframes scroll-fade-reveal-s {
  0% {
    --scroll-fade-s: 0px
  }

  to {
    --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))))
  }
}

@keyframes scroll-fade-reveal-e {
  0% {
    --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))))
  }

  to {
    --scroll-fade-e: 0px
  }
}

@keyframes tw-shimmer {
  0% {
    background-position: 100% 0
  }

  to {
    background-position: 0 0
  }
}
/* ── «Мой счёт» ─────────────────────────────────────────────────────────────
   Сумма — главный объект экрана, поэтому она крупная и одна. Состояния «не
   знаем» и «устарело» получают ТОТ ЖЕ размер, что и число: правда о молчании
   источника не должна выглядеть мелкой сноской рядом с крупной цифрой. */
.account-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--line);
  background: #111719;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px
}

.account-figure>span,
.account-side>span {
  display: block;
  font-size: 7px;
  letter-spacing: .14em;
  color: #7c857e;
  margin-bottom: 8px
}

.account-figure h1 {
  font-size: 40px;
  line-height: 1.05;
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums
}

.account-figure p,
.account-side p {
  font-size: 9px;
  color: #7c857e;
  margin: 0;
  line-height: 1.5
}

.account-figure p.is-stale {
  color: #b08a3c
}

.account-side {
  border-left: 1px solid var(--line);
  padding-left: 14px
}

.account-side h2 {
  font-size: 15px;
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums
}

.account-why {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: #111719;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px
}

.account-why>i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: #b08a3c
}

.account-why>i svg {
  width: 13px;
  height: 13px
}

.account-why b {
  display: block;
  font-size: 11px;
  margin-bottom: 4px
}

.account-why p {
  font-size: 9px;
  color: #7c857e;
  margin: 0 0 10px;
  line-height: 1.6
}

.account-why button {
  margin-top: 2px
}

.account-hint {
  font-size: 9px;
  color: #a9b3ab;
  line-height: 1.6;
  margin: 0
}

.account-link {
  display: inline-block;
  font-size: 9px;
  color: var(--green);
  border-bottom: 1px solid var(--green);
  text-decoration: none
}

.account-tier,
.account-sub {
  border: 1px solid var(--line);
  background: #111719;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px
}

.account-tier header span,
.account-sub header span {
  font-size: 7px;
  letter-spacing: .14em;
  color: #7c857e
}

.account-tier b {
  display: block;
  font-size: 20px;
  margin: 8px 0 6px
}

.account-tier p,
.account-sub small {
  font-size: 9px;
  color: #7c857e;
  line-height: 1.6;
  margin: 0
}

.account-tier p s {
  text-decoration: none;
  color: #a9b3ab
}

.account-sub-line {
  margin-top: 8px
}

.account-sub-line b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 4px
}

.account-sub-line b svg {
  width: 13px;
  height: 13px;
  color: var(--green)
}

.account-sub-line small {
  display: block;
  margin-bottom: 10px
}

@media (max-width:720px) {
  .account-hero {
    grid-template-columns: 1fr;
    padding: 16px
  }

  .account-figure h1 {
    font-size: 32px
  }

  .account-side {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 12px
  }
}

/* ── подключение счёта на «Моём счёте» ──────────────────────────────────────
   Ответ сервера показывается ТЕМ ЖЕ блоком и для удачи, и для отказа: разное
   оформление у «получилось» и «не получилось» — это уже мнение экрана о том,
   что случилось, а мнение здесь только одно, серверное. Отличается лишь цвет. */
.pocket-connect {
  display: block;
  margin-top: 10px
}

.pocket-connect>label {
  display: block;
  font-size: 7px;
  letter-spacing: .14em;
  color: #7c857e;
  margin-bottom: 6px;
  text-transform: uppercase
}

.pocket-connect-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap
}

.pocket-connect-row input {
  flex: 1 1 180px;
  min-width: 0;
  background: #ffffff09;
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  color: #f4f7f5;
  font-size: 13px;
  padding: 0 12px;
  height: 40px;
  font-variant-numeric: tabular-nums
}

.pocket-connect-row input::placeholder {
  color: #6b746d
}

.pocket-connect-row input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px
}

.pocket-connect-row button {
  flex: 0 0 auto;
  height: 40px
}

.pocket-answer {
  display: block;
  margin-top: 10px;
  border-left: 2px solid var(--green);
  padding-left: 10px;
  font-size: 9px;
  line-height: 1.6;
  color: #7c857e
}

.pocket-answer.is-bad {
  border-left-color: #b0603c
}

.pocket-answer b {
  display: block;
  font-size: 11px;
  color: #f4f7f5;
  margin-bottom: 3px
}

.pocket-answer a {
  display: inline-block;
  margin-top: 6px
}

/* ── ПОЛУЭКРАН: 761–1100px ────────────────────────────────────────────────
   Между мобильной раскладкой (≤760px) и десктопной кабинет оставался в
   худшем из двух миров: меню занимало фиксированные 226px, а сетки держали
   несколько колонок — контенту доставалось ~780px, колонка сжималась до
   ~370px, и заголовок в неё не влезал, вылезая за карточку.

   Причины классовые, а не пиксельные, поэтому лечим их, а не один экран:
     · элементы сетки по умолчанию имеют min-width:auto и ОТКАЗЫВАЮТСЯ
       сжиматься под длинное слово — отсюда вылезание и обрезка;
     · у крупного заголовка нижняя граница шрифта была 46px: она не зависела
       от ширины колонки, поэтому «сжать» его было нечем. */
.next-actions>*,
.learn-layout>*,
.lesson-player>*,
.history-summary>*,
.more-grid>* {
  min-width: 0
}

.next-signal h2 {
  font-size: clamp(30px, 4.1vw, 66px)
}

/* СПЕЦИФИЧНОСТЬ, А НЕ ПОРЯДОК. У этой сетки накопилось 17 правил
   grid-template-columns из разных поколений правок, и побеждает не последнее,
   а самое специфичное — `.home-page .next-actions` с жёсткими минимумами
   minmax(280px) и minmax(235px). На ~640px доступной ширины они забирают 515px,
   первой колонке остаётся 112px, и заголовок в ней режется. Поэтому здесь
   селектор той же силы: правило на один класс проигрывало молча. */
@media (width<=1100px) {

  /* !important здесь не «на всякий случай», а вынужденно: раскладка главной
     закреплена `!important`, и единственный брейкпоинт, который её перебивал, —
     760px, тоже `!important`. Без равной силы полосу 761–1100 починить нельзя. */
  .next-actions,
  .home-page .next-actions {
    grid-template-columns: minmax(0, 1fr) !important
  }

  /* Сброс ДЛЯ ВСЕХ детей, а не для двух названных: ребёнок с `grid-column: 1/3`
     при одной заданной колонке создаёт ВТОРУЮ неявную — сетка снова становится
     двухколоночной, хотя в правиле колонка одна. Именно это и происходило. */
  .next-actions>*,
  .learn-layout>* {
    grid-column: auto !important;
    /* И РЯДЫ ТОЖЕ. Герой растянут `grid-row: 1/3`, а карточки прибиты к рядам 1 и 2.
       При одной колонке они в неё не помещаются, и браузер молча создаёт ВТОРУЮ
       неявную — сетка снова двухколоночная, хотя в правиле колонка одна. Сброса
       только колонок было недостаточно: держали ряды. */
    grid-row: auto !important
  }

  .learn-layout,
  .learn-page .learn-layout {
    grid-template-columns: minmax(0, 1fr) !important
  }
}

/* Отметка и отказ в уроке. Состояние «пройден» и «закрыт» выглядят одинаково
   спокойно: это факты, а не награда и не наказание. */
.lesson-done {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #7c857e;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px
}

.lesson-done svg {
  width: 13px;
  height: 13px;
  color: var(--green)
}

.lesson-error {
  color: #d08a6a;
  font-size: 9px;
  margin-top: 8px
}

/* ── Комнаты уровня ─────────────────────────────────────────────────────── */
.rooms-panel {
  border: 1px solid var(--line);
  background: #111719;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px
}

.rooms-panel>header span {
  font-size: 7px;
  letter-spacing: .14em;
  color: #7c857e
}

.room-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit
}

.room-row:last-of-type {
  border-bottom: 0
}

.room-row>i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--green)
}

.room-row>i svg {
  width: 13px;
  height: 13px
}

.room-row b {
  display: block;
  font-size: 12px
}

.room-row small {
  font-size: 8px;
  color: #7c857e
}

.room-row>svg {
  width: 14px;
  height: 14px;
  color: #7c857e
}

.rooms-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 9px;
  line-height: 1.6;
  color: #7c857e;
  margin: 10px 0 0
}

.rooms-note svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  margin-top: 2px
}

/* ── ДЕКОРАЦИЯ НЕ ДВИГАЕТ СТРАНИЦУ ──────────────────────────────────────────
   Фоновый график рисуется слоем шире экрана (671px при 375px), и на телефоне
   страница ездила вбок: человек тянет её вправо и видит пустоту. Слой у себя
   обрезает, но САМ был шире родителя — поэтому ограничиваем его, а не гасим
   декорацию и не подпираем каждый экран отдельно. */
.market-atmosphere {
  max-width: 100%;
  overflow: hidden
}

.session-screen,
.auth-page {
  overflow-x: clip
}

/* ШАПКА ЖИВЫХ ЭКРАНОВ «Призы» и «Челленджи».
   Своя запись, а не `.reward-summary`: тот класс в восстановленной сборке погашен
   правилом `display:none !important` (в музейной копии он прятал выдуманную сводку).
   Живой экран, надевший его, молча исчезал бы — и как раз у людей верхней ступени,
   которым здесь показывается честное «челленджа нет». */
.prize-summary {
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  align-items: center;
  gap: 18px;
  min-height: 130px;
  padding: 22px;
  display: flex
}

.prize-summary>svg {
  color: #e2b55d;
  width: 39px;
  flex: none
}

.prize-summary span {
  letter-spacing: .11em;
  color: #7a837c;
  font-size: 9px;
  font-weight: 800
}

.prize-summary h2 {
  margin: 5px 0;
  font-size: 21px
}

.prize-summary p {
  color: #8c9890;
  margin: 0;
  font-size: 12px;
  line-height: 1.5
}

/* СОБЫТИЯ АККАУНТА И ОТМЕТКИ. Класс существовал, стилей у него не было вовсе —
   поэтому `<b>` и `<small>` печатались вплотную, и человек читал «Конфликт
   привязкибраузер». Слипшиеся слова выглядят как испорченные данные, хотя данные целы. */
.history-list {
  border: 1px solid #29332f;
  border-radius: 16px;
  overflow: hidden
}

.history-list>article {
  align-items: center;
  gap: 14px;
  display: flex;
  justify-content: space-between;
  padding: 13px 16px
}

.history-list>article+article {
  border-top: 1px solid #29332f
}

.history-list>article>div {
  min-width: 0;
  gap: 3px;
  display: flex;
  flex-direction: column
}

.history-list>article b {
  font-size: 14px;
  line-height: 1.25
}

.history-list>article small {
  color: #8d9993;
  font-size: 12px;
  line-height: 1.35
}

.history-list>article>span {
  color: #74817b;
  white-space: nowrap;
  font-size: 12px;
  font-variant-numeric: tabular-nums
}

/* ПОПОЛНЕНИЕ И ДВИЖЕНИЯ НА ЭКРАНЕ СЧЁТА. Человек приходит сюда за двумя вопросами:
   сколько у меня и как это изменить. Второй вопрос до сих пор оставался без кнопки. */
.account-topup {
  /* ЦВЕТ ТЕКСТА ИДЁТ ЗА ЗАЛИВКОЙ СТУПЕНИ (26.09, замер контраста на живом).
     Здесь стоял почти чёрный `#04120c` — он подобран под зелёную заливку Free. Ступени
     подменяют у этой кнопки только ФОН, а цвет букв остаётся прежним: на синем ОТС 250 и
     красном Эксклюзиве контраст падает до 3.44 при норме 4.5, и это ровно то, что владелец
     назвал «текст не читабелен». Берём цвет из той же переменной, что и остальные кнопки
     ступени: тогда он меняется вместе с заливкой, а не вопреки ей. */
  color: var(--t-ink, #04120c);
  background: linear-gradient(180deg, #6ef2b6, #34d399);
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex
}

.account-topup svg {
  width: 16px
}

.account-moves {
  margin-top: 18px
}

.account-moves>header {
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  display: flex
}

.account-moves>header span {
  letter-spacing: .11em;
  color: #7a837c;
  font-size: 9px;
  font-weight: 800
}

.account-moves>header b {
  color: #6ef2b6;
  font-size: 15px;
  font-variant-numeric: tabular-nums
}

.account-moves-note {
  color: #74817b;
  margin: 10px 2px 0;
  font-size: 12px;
  line-height: 1.45
}

/* ═══ ПАЛИТРА СТУПЕНИ ═══════════════════════════════════════════════════════
   Один набор переменных на весь кабинет: цвет ступени человека и мягкое свечение
   под ним. Задаётся атрибутом `data-tier` на корне — экраны ничего не знают о
   ступени и не заводят своих условий, поэтому добавить шестую ступень значит
   дописать сюда одну строку, а не искать её по компонентам.

   Цвета названы владельцем 10.09: Free — белый, Семья — оранжевый, ОТС 250 — синий,
   Эксклюзив — красный, GOLD — золото. Для ОТС 500 своего цвета он не называл;
   поставлен продолжением синей линии (глубокая бирюза), чтобы рост читался как
   переход внутри одного семейства. Скажет другой — меняется одна строка. */
.app {
  --tier-color: #d8dee6;
  --tier-soft: #d8dee61a;
  --tier-glow: #d8dee60d
}

.app[data-tier="1"] {
  --tier-color: #e2a552;
  --tier-soft: #e2a5522e;
  --tier-glow: #e2a55214
}

.app[data-tier="2"] {
  --tier-color: #58a6ff;
  --tier-soft: #58a6ff2e;
  --tier-glow: #58a6ff14
}

.app[data-tier="3"] {
  --tier-color: #2ee6c5;
  --tier-soft: #2ee6c52e;
  --tier-glow: #2ee6c514
}

.app[data-tier="4"] {
  --tier-color: #ff5f56;
  --tier-soft: #ff5f562e;
  --tier-glow: #ff5f5614
}

.app[data-tier="5"] {
  --tier-color: #f5c451;
  --tier-soft: #f5c4512e;
  --tier-glow: #f5c45114
}

/* Где ступень видно. Не перекрашиваем интерфейс целиком: цвет ступени — это акцент,
   а не новая тема. Слишком много цвета читается как другой продукт, а не как уровень. */
.app .level-badge,
.app .sidebar>.level-badge {
  background: linear-gradient(160deg, var(--tier-soft), #0000 78%);
  border: 1px solid var(--tier-soft)
}

.app .level-badge b,
.app .level-current b,
.app .account-tier b {
  color: var(--tier-color)
}

.app .level-list>article.current {
  border-color: var(--tier-soft);
  background: linear-gradient(150deg, var(--tier-glow), #0000 62%)
}

.app .level-list>article.current>div {
  color: var(--tier-color);
  border-color: var(--tier-soft)
}

.app .level-list>article.current span b {
  color: var(--tier-color)
}

/* Та же одна ширина, но селектором посильнее: если общий сторож переполнения когда-нибудь
   переедет ниже по файлу, колонка не расползётся обратно молча. */
.main .page { width: min(100%, 980px); margin-inline: auto; }
/*
 * The recovered app was server-rendered straight into <body>: `.guest` and
 * `.app` were direct children of the body element, and the stylesheet is
 * written against that. Vite mounts React into `#root`, so the wrapper is made
 * layout-transparent to keep the box tree — and therefore the rendering —
 * identical to the recovered original.
 */
#root {
  display: contents;
}
/*
 * States the recovered prototype never had: loading, failed, and the age gate.
 *
 * A separate file on purpose. `app.css` is the recovered stylesheet and is held
 * byte-stable for pixel parity — nothing here touches it. Every value below is
 * one of the product's own `--am-*` tokens, so these screens are the same
 * material as the rest of the cabinet, not a second design.
 */

.session-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--am-obsidian);
  color: var(--am-ivory);
}

.session-card {
  width: min(520px, 100%);
  background: var(--am-surface);
  border: 1px solid var(--am-hairline);
  border-radius: var(--am-radius);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.session-card > small {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--am-muted);
}

.session-card h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  text-wrap: balance;
}

.session-card p {
  margin: 0;
  color: var(--am-muted);
  line-height: 1.6;
}

.session-card .session-terms {
  color: var(--am-ivory);
  background: var(--am-surface-raised);
  border: 1px solid var(--am-hairline);
  border-radius: 14px;
  padding: 16px 18px;
}

.session-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.session-actions button,
.session-actions a {
  appearance: none;
  border: 1px solid var(--am-hairline);
  background: transparent;
  color: var(--am-ivory);
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s var(--am-ease), background 0.2s var(--am-ease);
}

.session-actions .primary {
  background: var(--am-mint);
  border-color: var(--am-mint);
  color: var(--am-obsidian);
  font-weight: 600;
}

.session-actions button:hover,
.session-actions a:hover {
  border-color: var(--am-mint);
}

.session-actions .primary:hover {
  filter: brightness(1.06);
}

.session-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

.session-actions button:focus-visible,
.session-actions a:focus-visible {
  outline: 2px solid var(--am-mint);
  outline-offset: 3px;
}

/* Failure says what happened and what to do — never an empty screen. */
.session-card.is-error {
  border-color: color-mix(in srgb, var(--am-coral) 45%, var(--am-hairline));
}

.session-card.is-error small {
  color: var(--am-coral);
}

/* Loading is a held shape, not a spinner: the cabinet is dark and a bright
   spinner on first paint reads as an error. */
.session-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.session-skeleton i {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: var(--am-surface-raised);
  animation: session-breathe 1.6s var(--am-ease) infinite;
}

.session-skeleton i:nth-child(2) {
  width: 76%;
  animation-delay: 0.12s;
}

.session-skeleton i:nth-child(3) {
  width: 52%;
  animation-delay: 0.24s;
}

@keyframes session-breathe {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-skeleton i {
    animation: none;
    opacity: 0.6;
  }
}

/* Money withheld. Shown wherever a number would otherwise stand, so the
   absence reads as a known state rather than a missing value. */
.money-withheld {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--am-muted);
  font-size: 13px;
  line-height: 1.4;
}

.money-withheld b {
  color: var(--am-ivory);
  font-weight: 600;
}

/* ── Shared states: loading · empty · error · locked ────────────────────────
   Same card geometry as the recovered surfaces, so a state never looks like a
   different product. Nothing here touches app.css, which is held byte-stable
   for pixel parity. */

.am-state {
  background: var(--am-surface);
  border: 1px solid var(--am-hairline);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--am-ivory);
}

.am-state > small {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--am-muted);
}

.am-state b {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.am-state p {
  margin: 0;
  color: var(--am-muted);
  font-size: 14px;
  line-height: 1.55;
}

.am-state button,
.am-state a {
  align-self: flex-start;
  appearance: none;
  border: 1px solid var(--am-hairline);
  background: transparent;
  color: var(--am-ivory);
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: border-color 0.2s var(--am-ease);
}

.am-state button:hover,
.am-state a:hover {
  border-color: var(--am-mint);
}

.am-state button:focus-visible,
.am-state a:focus-visible {
  outline: 2px solid var(--am-mint);
  outline-offset: 3px;
}

.am-state button svg,
.am-state a svg {
  width: 15px;
  height: 15px;
}

.am-state-error {
  border-color: color-mix(in srgb, var(--am-coral) 40%, var(--am-hairline));
}

.am-state-error b {
  color: var(--am-coral);
}

.am-state-locked .am-state-lock {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--am-surface-raised);
  border: 1px solid var(--am-hairline);
  color: var(--am-muted);
}

.am-state-locked .am-state-lock svg {
  width: 16px;
  height: 16px;
}

/* A row of state cards inside a page keeps the page's own rhythm. */
.am-state + .am-state {
  margin-top: 12px;
}
/*
 * Surfaces the product needed and the prototype never had.
 *
 * Every value is one of the recovered `--am-*` tokens, and the card geometry is
 * the recovered one: 18px radius, hairline border, obsidian ground. This is the
 * same material as the rest of the cabinet — a person moving between a recovered
 * screen and a live one should not be able to tell where the seam is.
 *
 * `app.css` is untouched; it is held byte-stable so the 64 recovered states stay
 * at pixel parity.
 */

/*
 * Everything below is scoped to `.am-live`, the class the product shell puts on
 * its root. Some class names (`.room-list`, `.next-signal`) also exist in the
 * recovered stylesheet, and an unscoped rule here would silently restyle the
 * museum copy — breaking the very parity these two builds exist to keep apart.
 */

/* ── shared card ─────────────────────────────────────────────────────────── */
.am-live .signal-stream-card,
.am-live .history-summary > article,
.am-live .history-list > article,
.am-live .learn-list > article,
.am-live .notice-list > article,
.am-live .room-list > article,
.am-live .queue-list > article,
.am-live .cap-list > article,
.am-live .levels-ladder > article,
.am-live .learn-progress,
.am-live .learn-pick,
.am-live .profile-hero {
  background: var(--am-surface);
  border: 1px solid var(--am-hairline);
  border-radius: 18px;
  color: var(--am-ivory);
}

/* ── signals ─────────────────────────────────────────────────────────────── */
.am-live .signal-stream-list,
.am-live .signal-locked-list,
.am-live .history-list,
.am-live .learn-list,
.am-live .notice-list,
.am-live .room-list,
.am-live .queue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 26px;
}

.am-live .signal-stream-card {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.am-live .signal-stream-card > header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.am-live .signal-stream-card > header b {
  font-size: 18px;
  font-weight: 600;
}

.am-live .signal-otc {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--am-hairline);
  color: var(--am-muted);
}

.am-live .signal-stream-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.am-live .signal-stream-facts span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.am-live .signal-stream-facts small,
.am-live .learn-progress small,
.am-live .learn-pick small,
.am-live .profile-hero small,
.am-live .history-summary small {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--am-muted);
}

.am-live .signal-stream-facts b {
  font-size: 15px;
  font-weight: 600;
}

.am-live .signal-countdown {
  color: var(--am-mint);
  font-size: 14px;
}

.am-live .signal-countdown b {
  font-variant-numeric: tabular-nums;
}

.am-live .signal-closed {
  color: var(--am-muted);
  font-size: 14px;
}

.am-live .signal-stream-result {
  font-size: 14px;
}

.am-live .res-win {
  color: var(--am-mint);
}
.am-live .res-loss {
  color: var(--am-coral);
}
.am-live .res-undecided {
  color: var(--am-muted);
}

.am-live .signal-my-mark {
  margin: 0;
  font-size: 14px;
  color: var(--am-muted);
}

.am-live .signal-my-mark b {
  color: var(--am-ivory);
}

.am-live .signal-my-mark em {
  font-style: normal;
  color: var(--am-champagne);
}

.am-live .signal-open,
.am-live .learn-list button,
.am-live .notice-list button,
.am-live .room-list button {
  appearance: none;
  align-self: flex-start;
  border: 1px solid var(--am-hairline);
  background: transparent;
  color: var(--am-ivory);
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s var(--am-ease);
}

.am-live .signal-open:hover,
.am-live .learn-list button:hover,
.am-live .notice-list button:hover,
.am-live .room-list button:hover {
  border-color: var(--am-mint);
}

.am-live .signal-open svg,
.am-live .learn-list button svg,
.am-live .notice-list button svg,
.am-live .room-list button svg {
  width: 15px;
  height: 15px;
}

/* ── session choices ─────────────────────────────────────────────────────── */
.am-live .session-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}

.am-live .session-choice {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--am-surface);
  border: 1px solid var(--am-hairline);
  border-radius: 14px;
  padding: 15px 18px;
  color: var(--am-ivory);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.2s var(--am-ease);
}

.am-live .session-choice span {
  flex: 1;
}

.am-live .session-choice em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--am-champagne);
}

.am-live .session-choice:hover:not(:disabled) {
  border-color: var(--am-mint);
}

.am-live .session-choice.over-limit {
  border-color: color-mix(in srgb, var(--am-champagne) 35%, var(--am-hairline));
}

.am-live .session-choice.chosen {
  border-color: var(--am-mint);
}

.am-live .session-choice:disabled {
  opacity: 0.5;
  cursor: default;
}

.am-live .session-choice svg {
  width: 15px;
  height: 15px;
  color: var(--am-muted);
}

/* ── history ─────────────────────────────────────────────────────────────── */
.am-live .history-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 14px 0 26px;
}

.am-live .history-summary > article {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.am-live .history-summary b {
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.am-live .history-summary span {
  font-size: 12px;
  color: var(--am-muted);
}

.am-live .history-summary > article.warn b {
  color: var(--am-champagne);
}

.am-live .history-list > article {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.am-live .history-list > article > div {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.am-live .history-list b {
  font-size: 15px;
  font-weight: 600;
}

.am-live .history-list small,
.am-live .learn-list small,
.am-live .notice-list small,
.am-live .room-list small,
.am-live .queue-list small,
.am-live .cap-list small,
.am-live .levels-ladder small {
  font-size: 13px;
  color: var(--am-muted);
  line-height: 1.45;
}

.am-live .history-list > article > span {
  font-size: 13px;
  color: var(--am-muted);
  font-variant-numeric: tabular-nums;
}

.am-live .history-list > article em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--am-champagne);
}

.am-live .history-list > article.over-limit {
  border-color: color-mix(in srgb, var(--am-champagne) 32%, var(--am-hairline));
}

/* ── learning ────────────────────────────────────────────────────────────── */
.am-live .learn-progress {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0;
}

.am-live .learn-progress > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.am-live .learn-progress b {
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.am-live .learn-progress span {
  font-size: 13px;
  color: var(--am-muted);
}

.am-live .learn-progress p {
  margin: 0;
  font-size: 14px;
  color: var(--am-muted);
}

.am-live .learn-progress p b {
  font-size: 14px;
  color: var(--am-ivory);
}

.am-live .learn-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--am-surface-raised);
  overflow: hidden;
}

.am-live .learn-bar i {
  display: block;
  height: 100%;
  background: var(--am-mint);
  transition: width 0.4s var(--am-ease);
}

.am-live .learn-list > article {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.am-live .learn-list > article > div {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.am-live .learn-num {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--am-surface-raised);
  border: 1px solid var(--am-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--am-muted);
}

.am-live .learn-list > article.done .learn-num {
  color: var(--am-mint);
  border-color: color-mix(in srgb, var(--am-mint) 40%, var(--am-hairline));
}

.am-live .learn-num svg {
  width: 15px;
  height: 15px;
}

.am-live .learn-pick {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 26px;
}

.am-live .learn-pick b {
  font-size: 17px;
  font-weight: 600;
}

.am-live .learn-pick p {
  margin: 0;
  color: var(--am-muted);
  font-size: 14px;
}

.am-live .learn-pick button {
  align-self: flex-start;
  appearance: none;
  border: 1px solid var(--am-hairline);
  background: transparent;
  color: var(--am-ivory);
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* ── notifications ───────────────────────────────────────────────────────── */
.am-live .notice-list > article {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.am-live .notice-list > article > div {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.am-live .notice-list b {
  font-size: 15px;
  font-weight: 600;
}

.am-live .notice-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--am-surface-raised);
  border: 1px solid var(--am-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--am-muted);
}

.am-live .notice-icon svg {
  width: 15px;
  height: 15px;
}

.am-live .notice-list > article.unread .notice-icon {
  color: var(--am-mint);
  border-color: color-mix(in srgb, var(--am-mint) 40%, var(--am-hairline));
}

.am-live .notice-list > article.read {
  opacity: 0.62;
}

.am-live .notice-at {
  font-size: 12px;
  color: var(--am-muted);
  font-variant-numeric: tabular-nums;
}

/* ── rooms ───────────────────────────────────────────────────────────────── */
.am-live .room-list > article {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.am-live .room-list > article > div {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.am-live .room-icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: var(--am-surface-raised);
  border: 1px solid var(--am-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--am-muted);
}

.am-live .room-icon svg {
  width: 16px;
  height: 16px;
}

.am-live .room-list > article.room-locked {
  opacity: 0.72;
}

/* ── access ladder ───────────────────────────────────────────────────────── */
.am-live .levels-ladder,
.am-live .cap-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 26px;
}

.am-live .levels-ladder > article,
.am-live .cap-list > article {
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.am-live .levels-ladder > article > div,
.am-live .cap-list > article > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.am-live .levels-ladder b,
.am-live .cap-list b {
  font-size: 15px;
  font-weight: 600;
}

.am-live .level-mark,
.am-live .cap-list > article > span {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--am-surface-raised);
  border: 1px solid var(--am-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--am-muted);
}

.am-live .level-mark svg,
.am-live .cap-list > article > span svg {
  width: 15px;
  height: 15px;
}

.am-live .levels-ladder > article.reached .level-mark,
.am-live .cap-list > article.granted > span {
  color: var(--am-mint);
  border-color: color-mix(in srgb, var(--am-mint) 40%, var(--am-hairline));
}

.am-live .levels-ladder > article.current {
  border-color: color-mix(in srgb, var(--am-mint) 45%, var(--am-hairline));
}

.am-live .levels-ladder em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--am-mint);
}

.am-live .levels-ladder > article.locked,
.am-live .cap-list > article.denied {
  opacity: 0.66;
}

/* ── staff queues ────────────────────────────────────────────────────────── */
.am-live .queue-list > article {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.am-live .queue-list > article > div {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.am-live .queue-row.conflict {
  border-color: color-mix(in srgb, var(--am-coral) 40%, var(--am-hairline));
}

.am-live .queue-row.pending {
  border-color: color-mix(in srgb, var(--am-champagne) 32%, var(--am-hairline));
}

.am-live .queue-list > article > span {
  font-size: 12px;
  color: var(--am-muted);
  font-variant-numeric: tabular-nums;
}

/* ── profile ─────────────────────────────────────────────────────────────── */
.am-live .profile-hero {
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0 22px;
  flex-wrap: wrap;
}

.am-live .profile-hero > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.am-live .profile-hero h2 {
  margin: 0;
  font-size: 22px;
}

.am-live .profile-hero p {
  margin: 0;
  color: var(--am-muted);
  font-size: 14px;
}

/* ── chat thread ─────────────────────────────────────────────────────────── */
.am-live .chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 22px;
}

.am-live .chat-thread > article {
  max-width: min(72ch, 88%);
  background: var(--am-surface);
  border: 1px solid var(--am-hairline);
  border-radius: 16px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.am-live .chat-thread > article.mine {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--am-mint) 32%, var(--am-hairline));
}

.am-live .chat-thread > article p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* UX-4: the timestamp gets its own line instead of running into the text. */
.am-live .chat-thread > article footer {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 11px;
  color: var(--am-muted);
}

.am-live .chat-thread > article footer em {
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── section headings inside live pages ──────────────────────────────────── */
.am-live .page > h2.plain-label {
  margin: 26px 0 0;
}

@media (max-width: 720px) {
  .am-live .signal-stream-card,
  .am-live .history-list > article,
  .am-live .learn-list > article,
  .am-live .notice-list > article,
  .am-live .room-list > article,
  .am-live .queue-list > article {
    padding: 15px 16px;
  }

  /* UX-14: tap targets stay comfortable on a phone. */
  .am-live .signal-open,
  .am-live .session-choice,
  .am-live .learn-list button,
  .am-live .notice-list button,
  .am-live .room-list button,
  .am-live .am-state button,
  .am-live .am-state a {
    min-height: 44px;
  }
}

/* Audience self-reports sit visually below the outcome and read quieter: they are
   context, not a result. */
.am-live .signal-audience {
  margin: 0;
  font-size: 13px;
  color: var(--am-muted);
}

.am-live .signal-audience em {
  font-style: normal;
  opacity: 0.8;
}

/* Settle buttons: one action per outcome, small and dense — this is a queue that
   gets worked through, not a form. */
.am-live .settle-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.am-live .settle-row button {
  appearance: none;
  border: 1px solid var(--am-hairline);
  background: transparent;
  color: var(--am-ivory);
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-height: 36px;
  transition: border-color 0.2s var(--am-ease);
}

.am-live .settle-row button:hover:not(:disabled) {
  border-color: var(--am-mint);
}

.am-live .settle-row button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ── СТРАТЕГИИ ────────────────────────────────────────────────────────────────
   Карточка раскрывается на месте, а не уводит на отдельный экран: человек
   сравнивает четыре схемы между собой, и уход-возврат ломает именно сравнение. */
.am-live .strategy-list > article > button {
  width: 100%;
}
/* Название и параметры обязаны стоять В ДВЕ СТРОКИ: в одну «Стратегия «2 из 3»» и
   «30 секунд» слипаются в «3»30», и человек читает мусор вместо таймфрейма. */
.am-live .strategy-list > article > button > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}
.am-live .strategy-list > article > button > div small {
  color: var(--am-muted);
}
/* ЗАКРЫТАЯ СТУПЕНЬЮ КАРТОЧКА. Она стоит в том же списке, но приглушена и не нажимается:
   раскрывать нечего — правил сервер не присылал. Замок справа там же, где у открытых
   стрелка, чтобы разница читалась одним взглядом по колонке, а не по цвету текста. */
.am-live .strategy-list > article.strategy-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  opacity: 0.62;
}
.am-live .strategy-list > article.strategy-locked > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.am-live .strategy-list > article.strategy-locked b {
  overflow-wrap: anywhere;
}
.am-live .strategy-list > article.strategy-locked small {
  color: var(--am-muted);
}
.am-live .strategy-list > article.strategy-locked svg {
  flex: 0 0 auto;
}
.am-live .strategy-body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.am-live .strategy-body > p {
  margin: 0;
  color: var(--am-ivory);
  line-height: 1.55;
}
.am-live .strategy-body > small {
  letter-spacing: 0.09em;
  color: var(--am-muted);
  font-size: 11px;
}
.am-live .strategy-body ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--am-ivory);
  line-height: 1.5;
}
.am-live .strategy-body ul li b {
  color: var(--am-champagne);
}
/* ── ПУТЬ ЧТЕНИЯ ВНУТРИ КАРТОЧКИ (26.09) ──────────────────────────────────────
   Владелец: «там просто набит текст… как это читать, как это использовать». Разделы
   разбора отличались ТОЛЬКО подписью капсом и шли подряд с одинаковым зазором 10px,
   поэтому глаз не находил, где кончается «как настроить» и начинается «когда входим», —
   это и есть простыня. Разделитель здесь не украшение: он единственное, что превращает
   шесть тем в шесть шагов.

   Зазор карточки теперь держат сами разделы (у каждого своя линия и свой отступ), иначе
   двойной отступ разносил бы карточку по высоте на пустоту. */
.am-live .strategy-body {
  gap: 0;
}
/* Что это за стратегия — одной строкой и крупнее остального: с этой строки человек
   решает, читать ли дальше. */
.am-live .strategy-body > p.strategy-one-line {
  margin: 2px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--am-ivory);
}
/* Оговорки (видео нет · сигналов нет · по тексту не повторить) — тихой сноской у линии,
   а не двумя блоками в рамках: в рамках они читались как авария и вытесняли сам разбор
   ниже экрана. Смысл и место те же — до настройки, а не после первой сделки. */
.am-live .strategy-note {
  margin: 14px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--am-hairline);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.am-live .strategy-note b {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--am-ivory);
}
.am-live .strategy-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--am-muted);
}
.am-live .strategy-block {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--am-hairline);
}
/* Заголовок раздела — вопрос человека («когда входим»), а не название поля. Капс мелкий
   и тусклый: он метка раздела, а не соперник тексту правила. */
.am-live .strategy-block > h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--am-muted);
}
.am-live .strategy-block > p {
  margin: 0 0 7px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--am-ivory);
}
.am-live .strategy-block > p:last-child {
  margin-bottom: 0;
}
/* Настройка — таблица «подпись → значение». Список с точками требовал читать «Актив —
   любой актив с приставкой OTC» целиком, чтобы понять, про что строка; здесь подпись
   стоит слева и сканируется глазом за один проход.
   Селектор с `ul.` — потому что общее правило `.strategy-body ul` специфичнее одного
   класса и иначе вернуло бы точки и отступ. */
.am-live .strategy-body ul.strategy-setup {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.am-live .strategy-body ul.strategy-setup > li {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 10px;
  align-items: baseline;
}
.am-live .strategy-body ul.strategy-setup > li.wide {
  grid-template-columns: 1fr;
}
.am-live .strategy-body ul.strategy-setup > li > small {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--am-muted);
}
.am-live .strategy-body ul.strategy-setup > li > b {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--am-ivory);
}
/* Что пропускаем — обычный список, но без champagne-выделения: здесь нет подписей,
   есть условия отказа, и все они равны по весу. */
.am-live .strategy-body ul.strategy-skip {
  gap: 8px;
}
/* Автор описал только одну сторону — его же фраза, тихо, под плашками направления. */
.am-live .strategy-onesided {
  display: block;
  margin-top: 8px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--am-muted);
}
/* Ссылки — последний шаг пути, поэтому свой отступ у них больше не нужен: его держит
   раздел. */
.am-live .strategy-block .strategy-links {
  margin-top: 0;
}

/* На узком экране подпись и значение настройки не делят 104px + текст: подпись уходит
   строкой выше, иначе значение рвётся по два слова в строку. */
@media (max-width: 420px) {
  .am-live .strategy-body ul.strategy-setup > li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.am-live .strategy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.am-live .strategy-links a,
.am-live .strategy-links span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--am-hairline);
  border-radius: 999px;
  color: var(--am-ivory);
  text-decoration: none;
  font-size: 13px;
}
.am-live .strategy-links a:hover {
  border-color: var(--am-champagne);
}
.am-live .strategy-links span {
  color: var(--am-muted);
}
.am-live .strategy-links svg {
  width: 15px;
  height: 15px;
}

/* ── ПУЛЬТ ПОДВЕДЕНИЯ ─────────────────────────────────────────────────────────
   Один сигнал в фокусе и крупные цели. 153 сигнала руками — это работа, где
   промах не «может случиться», а случится: кнопка меньше пальца стоит ошибки в
   каноне, который потом читают и Telegram, и витрина. */
.am-live .settle-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 14px 0;
}
.am-live .settle-filters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.am-live .settle-filters small {
  letter-spacing: 0.09em;
  color: var(--am-muted);
  font-size: 11px;
}
.am-live .settle-filters select,
.am-live .settle-filters input,
.am-live .settle-filters button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--am-hairline);
  border-radius: 12px;
  background: var(--am-surface-raised);
  color: var(--am-ivory);
  font: inherit;
}
.am-live .settle-console {
  border: 1px solid var(--am-hairline);
  border-radius: var(--am-radius);
  background: var(--am-surface-raised);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.am-live .settle-console > header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.am-live .settle-console > header small {
  letter-spacing: 0.09em;
  color: var(--am-muted);
  font-size: 11px;
}
.am-live .settle-console > header b {
  font-size: 20px;
  line-height: 1.3;
}
.am-live .settle-console > header span {
  color: var(--am-muted);
  font-size: 13px;
}
.am-live .settle-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--am-hairline);
  overflow: hidden;
}
.am-live .settle-progress i {
  display: block;
  height: 100%;
  background: var(--am-mint);
  transition: width 240ms var(--am-ease);
}
.am-live .settle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.am-live .settle-actions button {
  flex: 1 1 96px;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--am-hairline);
  border-radius: 14px;
  background: transparent;
  color: var(--am-ivory);
  cursor: pointer;
  transition: border-color 160ms var(--am-ease), background 160ms var(--am-ease);
}
.am-live .settle-actions button b {
  font-size: 17px;
}
.am-live .settle-actions button small {
  color: var(--am-muted);
  font-size: 11px;
}
.am-live .settle-actions button:hover:not(:disabled) {
  border-color: var(--am-ivory);
}
.am-live .settle-actions .win:hover:not(:disabled) {
  border-color: var(--am-mint);
}
.am-live .settle-actions .loss:hover:not(:disabled) {
  border-color: var(--am-coral);
}
.am-live .settle-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}
.am-live .settle-actions .undo,
.am-live .settle-actions .skip {
  flex: 1 1 120px;
}
.am-live .settle-console > footer {
  color: var(--am-muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.am-live .settle-console > footer b {
  color: var(--am-ivory);
}

/* ── ПОДПИСЬ АВТОРА И ПОЛЕ ВВОДА ──────────────────────────────────────────────
   Подпись стоит НАД репликой: человек должен знать, кто говорит, до того как
   прочтёт, а не после. Помощник отличается и цветом полосы, а не только словом —
   слово можно проскочить глазами, полосу нет. */
.am-live .chat-thread > article .chat-author {
  display: block;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--am-muted);
  margin-bottom: 5px;
}
.am-live .chat-thread > article.assistant {
  border-left: 2px solid var(--am-blue);
}
.am-live .chat-thread > article.assistant .chat-author {
  color: var(--am-blue);
}
.am-live .chat-composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--am-hairline);
  border-radius: var(--am-radius);
  background: var(--am-surface-raised);
}
/* ПОЛЕ ДЛЯ ПИСЬМА МЕНЕДЖЕРУ НЕ ЗАСТАВЛЯЕТ СЕБЯ РАСТЯГИВАТЬ (владелец 26.09: «блок
   "Напишите менеджеру" требует ручного увеличения»).

   Было: три строки высотой 76px и уголок для растягивания в правом нижнем углу. Человек
   писал вопрос, текст уползал под край, и чтобы увидеть написанное целиком, приходилось
   тянуть уголок мышью — на телефоне этого уголка нет вовсе. Поле, которое нужно чинить
   руками перед каждым вопросом, читается как недоделанное, и вопрос пишут короче, чем
   собирались, — а это и есть то самое сообщение, по которому менеджер должен понять
   человека.

   Стало: поле сразу в рост нескольких строк и растёт само по мере набора (высоту
   пересчитывает экран разговора). Уголок оставлен — тот, кому нужно ещё больше, им
   по-прежнему пользуется, но теперь это выбор, а не обязанность. */
.am-live .chat-composer textarea {
  width: 100%;
  resize: vertical;
  min-height: 132px;
  max-height: 360px;
  padding: 12px;
  border: 1px solid var(--am-hairline);
  border-radius: 14px;
  background: var(--am-surface);
  color: var(--am-ivory);
  font: inherit;
  /* Ровно 16px — и ради читаемости, и потому что Safari на iPhone сам приближает
     страницу, когда в поле шрифт мельче 16px: человек получал увеличенный экран, из
     которого потом выбирался руками. Стоит ПОСЛЕ `font: inherit`: короткая запись
     `font` сбрасывает кегль, и правило выше неё не действовало бы. */
  font-size: 16px;
  line-height: 1.5;
}
.am-live .chat-composer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.am-live .chat-composer-row button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--am-mint);
  color: #04231a;
  font-weight: 600;
  cursor: pointer;
}
.am-live .chat-composer-row button:disabled {
  opacity: 0.45;
  cursor: default;
}
.am-live .chat-composer-row small {
  color: var(--am-muted);
}
.am-live .chat-note {
  margin: 0;
  color: var(--am-muted);
  font-size: 13px;
}
.am-live .chat-note.failed {
  color: var(--am-coral);
}

/* Полнота стратегии — свёрнутый список, а не стена значков: он нужен тому, кто
   спросил «а всё ли тут есть», и мешает тому, кто просто читает правило. */
.am-live .strategy-completeness > summary {
  cursor: pointer;
  color: var(--am-muted);
  font-size: 13px;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.am-live .strategy-completeness ul {
  margin: 8px 0 0;
  padding-left: 4px;
  list-style: none;
  gap: 4px;
}
.am-live .strategy-completeness li.ok { color: var(--am-ivory); }
.am-live .strategy-completeness li.na { color: var(--am-muted); }
.am-live .strategy-completeness li.miss { color: var(--am-coral); }