/*! tailwindcss v4.3.0 | 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)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-teal-200: oklch(91% .096 180.426);
    --color-teal-300: oklch(85.5% .138 181.071);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-teal-500: oklch(70.4% .14 182.503);
    --color-sky-300: oklch(82.8% .111 230.318);
    --color-rose-100: oklch(94.1% .03 12.58);
    --color-rose-200: oklch(89.2% .058 10.001);
    --color-rose-300: oklch(81% .117 11.638);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-slate-50: oklch(98.4% .003 247.858);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-slate-950: oklch(12.9% .042 264.695);
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-xl: 36rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --blur-sm: 8px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@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;
    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 {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

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

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

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

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

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

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

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

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

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

  .table {
    display: table;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .h-full {
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

  .w-full {
    width: 100%;
  }

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

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

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

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

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

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

  .flex-1 {
    flex: 1;
  }

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

  .grow {
    flex-grow: 1;
  }

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

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

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

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

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

  .grid-cols-\[120px_1fr\] {
    grid-template-columns: 120px 1fr;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .rounded {
    border-radius: .25rem;
  }

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

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

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

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

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

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

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

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

  .border-\[color\:var\(--danger\)\]\/80 {
    border-color: var(--danger);
  }

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

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

  .border-\[color\:var\(--line-strong\)\] {
    border-color: var(--line-strong);
  }

  .border-amber-400\/25 {
    border-color: #fcbb0040;
  }

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

  .border-amber-500\/20 {
    border-color: #f99c0033;
  }

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

  .border-amber-500\/30 {
    border-color: #f99c004d;
  }

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

  .border-emerald-500\/30 {
    border-color: #00bb7f4d;
  }

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

  .border-emerald-500\/40 {
    border-color: #00bb7f66;
  }

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

  .border-rose-500\/40 {
    border-color: #ff235766;
  }

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

  .border-teal-300\/30 {
    border-color: #46ecd54d;
  }

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

  .border-teal-400\/25 {
    border-color: #00d3bd40;
  }

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

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

  .border-white\/10 {
    border-color: #ffffff1a;
  }

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

  .border-white\/15 {
    border-color: #ffffff26;
  }

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

  .border-white\/20 {
    border-color: #fff3;
  }

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

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

  .bg-\[color\:var\(--bg-elev-1\)\] {
    background-color: var(--bg-elev-1);
  }

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

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

  .bg-\[color\:var\(--teal-500\)\] {
    background-color: var(--teal-500);
  }

  .bg-amber-500\/10 {
    background-color: #f99c001a;
  }

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

  .bg-emerald-500\/10 {
    background-color: #00bb7f1a;
  }

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

  .bg-rose-500\/10 {
    background-color: #ff23571a;
  }

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

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

  .bg-slate-900\/40 {
    background-color: #0f172b66;
  }

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

  .bg-slate-900\/50 {
    background-color: #0f172b80;
  }

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

  .bg-slate-900\/55 {
    background-color: #0f172b8c;
  }

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

  .bg-slate-900\/80 {
    background-color: #0f172bcc;
  }

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

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

  .bg-slate-950\/40 {
    background-color: #02061866;
  }

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

  .bg-slate-950\/50 {
    background-color: #02061880;
  }

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

  .bg-slate-950\/60 {
    background-color: #02061899;
  }

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

  .bg-slate-950\/70 {
    background-color: #020618b3;
  }

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

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

  .bg-teal-500\/15 {
    background-color: #00baa726;
  }

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

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

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

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

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

  .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-5 {
    padding: calc(var(--spacing) * 5);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .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-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[0\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-\[0\.18em\] {
    --tw-tracking: .18em;
    letter-spacing: .18em;
  }

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

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

  .\[overflow-wrap\:anywhere\] {
    overflow-wrap: anywhere;
  }

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

  .break-all {
    word-break: break-all;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .text-\[color\:var\(--fg\)\] {
    color: var(--fg);
  }

  .text-\[color\:var\(--fg-2\)\] {
    color: var(--fg-2);
  }

  .text-\[color\:var\(--fg-3\)\] {
    color: var(--fg-3);
  }

  .text-\[color\:var\(--fg-on-accent\)\] {
    color: var(--fg-on-accent);
  }

  .text-amber-100 {
    color: var(--color-amber-100);
  }

  .text-amber-200 {
    color: var(--color-amber-200);
  }

  .text-amber-300 {
    color: var(--color-amber-300);
  }

  .text-emerald-100 {
    color: var(--color-emerald-100);
  }

  .text-emerald-200 {
    color: var(--color-emerald-200);
  }

  .text-rose-100 {
    color: var(--color-rose-100);
  }

  .text-rose-200 {
    color: var(--color-rose-200);
  }

  .text-rose-300 {
    color: var(--color-rose-300);
  }

  .text-sky-300 {
    color: var(--color-sky-300);
  }

  .text-slate-50 {
    color: var(--color-slate-50);
  }

  .text-slate-100 {
    color: var(--color-slate-100);
  }

  .text-slate-200 {
    color: var(--color-slate-200);
  }

  .text-slate-300 {
    color: var(--color-slate-300);
  }

  .text-slate-400 {
    color: var(--color-slate-400);
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-slate-950 {
    color: var(--color-slate-950);
  }

  .text-teal-200 {
    color: var(--color-teal-200);
  }

  .text-teal-300 {
    color: var(--color-teal-300);
  }

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

  .text-white\/40 {
    color: #fff6;
  }

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

  .text-white\/55 {
    color: #ffffff8c;
  }

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

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .shadow-\[var\(--sh-2\)\] {
    --tw-shadow: var(--sh-2);
    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);
  }

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

  .shadow-teal-500\/10 {
    --tw-shadow-color: #00baa71a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-teal-500\/10 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-teal-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-teal-500\/25 {
    --tw-shadow-color: #00baa740;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-teal-500\/25 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-teal-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .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, );
  }

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

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

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

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

  .transition-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));
  }

  .duration-\[var\(--dur-2\)\] {
    --tw-duration: var(--dur-2);
    transition-duration: var(--dur-2);
  }

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

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

  .placeholder\:text-\[color\:var\(--fg-3\)\]::placeholder {
    color: var(--fg-3);
  }

  @media (hover: hover) {
    .hover\:border-\[color\:var\(--teal-500\)\]:hover {
      border-color: var(--teal-500);
    }

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

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

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

    .hover\:bg-\[color\:var\(--line\)\]:hover {
      background-color: var(--line);
    }

    .hover\:bg-\[color\:var\(--teal-400\)\]:hover {
      background-color: var(--teal-400);
    }

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

    .hover\:text-\[color\:var\(--fg\)\]:hover {
      color: var(--fg);
    }

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

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

  .focus\:border-\[color\:var\(--teal-400\)\]:focus {
    border-color: var(--teal-400);
  }

  .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-\[color\:var\(--accent-soft\)\]:focus {
    --tw-ring-color: var(--accent-soft);
  }

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

  .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-\[color\:var\(--teal-400\)\]:focus-visible {
    --tw-ring-color: var(--teal-400);
  }

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

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

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

  .active\:translate-y-\[-1px\]:active {
    --tw-translate-y: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:shadow-\[inset_0_0_0_1px_rgba\(6\,37\,32\,0\.45\)\]:active {
    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #06252073);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

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

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

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

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
    cursor: not-allowed;
  }

  @media (min-width: 40rem) {
    .sm\:w-auto {
      width: auto;
    }

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

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

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

    .sm\:grid-cols-\[1fr_96px\] {
      grid-template-columns: 1fr 96px;
    }

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

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

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

:root {
  font-family: var(--ff-sans), "Schibsted Grotesk", ui-sans-serif, system-ui;
  font-synthesis: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 2px;
}

button, input, textarea, select {
  font: inherit;
}

html, body, #root {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html, body {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

html {
  font-size: 16px;
}

body {
  touch-action: pan-y;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.t-caption {
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.4;
}

.t-secondary {
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.45;
}

.t-body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.t-emphasis {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.t-section {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.t-title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

.t-hero {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.t-num {
  font-family: var(--ff-mono), "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

:root {
  --app-header-h: 52px;
  --app-navrow-h: 44px;
  --app-bottomnav-h: 60px;
  --app-top-inset: calc(var(--app-header-h) + env(safe-area-inset-top, 0px));
  --app-top-inset-with-nav: calc(var(--app-header-h) + var(--app-navrow-h) + env(safe-area-inset-top, 0px));
  --app-scroll-pad-bottom: calc(var(--app-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 16px);
}

.app-scroll {
  height: 100svh;
  padding-top: var(--app-top-inset);
  padding-bottom: var(--app-scroll-pad-bottom);
  -webkit-overflow-scrolling: touch;
  overflow: hidden auto;
}

.app-scroll.has-navrow {
  padding-top: var(--app-top-inset-with-nav);
}

.app-pad-bottomnav {
  padding-bottom: var(--app-scroll-pad-bottom);
}

@media (max-width: 699px) {
  .admin-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .admin-widget-grid > [data-widget-tile] {
    grid-column: span 1 !important;
  }
}

@media (max-width: 419px) {
  .admin-widget-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.imp-ghost-icon:hover {
  background: var(--bg-elev-2);
  color: var(--fg);
}

.imp-ghost-icon:active {
  background: var(--accent-soft);
}

.imp-ghost-icon:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@keyframes impSpin {
  to {
    transform: rotate(360deg);
  }
}

.imp-spin {
  transform-origin: 50%;
  animation: .9s linear infinite impSpin;
}

@keyframes impToastIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-onboarding-toast {
  animation: impToastIn .22s var(--ease-out, cubic-bezier(.22, .61, .36, 1));
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

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

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

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

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

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

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

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

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

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

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

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

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

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

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

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

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

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

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

@property --tw-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;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* =======================================================================
   STRATA — Foundations  (dark-mode default)
   - Type: Schibsted Grotesk + JetBrains Mono  (locked)
   - Palette: Torch (primary), Spring (2nd), Carbon (neutrals), Bone (light)
   - Default theme: DARK. Light is opt-in via [data-theme="light"] / .light.
   ======================================================================= */

:root {
  /* ── Brand colors ──────────────────────────────────────────────────── */
  /* TORCH — primary accent · CTAs, focus, attention. Stops 200–600 canonical. */
  --torch-200:      #FFD7BA;
  --torch-300:      #FFA66B;
  --torch-400:      #FF7F33;
  --torch-500:      #FF5C00;
  --torch-600:      #D14800;
  --torch-700:      #8C3000;

  /* SPRING — 2nd accent · live, success, supporting. */
  --spring-200:     #B7EBD7;
  --spring-300:     #6CD5AE;
  --spring-400:     #2EC795;
  --spring-500:     #14B881;
  --spring-600:     #0E9669;
  --spring-700:     #0A6B4C;

  /* CARBON — true-neutral foundation. Stops 50–700 are the working scale; ink = 700. */
  --n-50:           #F8F8F6;
  --n-100:          #F0F0EE;
  --n-200:          #E1E1DE;
  --n-300:          #C4C4C0;
  --n-400:          #9E9E9A;
  --n-500:          #6E6E6E;
  --n-600:          #4A4A4A;
  --n-700:          #2A2A2A;

  --carbon:         var(--n-700);     /* ink · darkest neutral */
  --bone:           var(--n-50);      /* lightest fg / off-state on dark */

  /* Convenience aliases (kept stable for downstream use) */
  --accent:         var(--torch-500);
  --accent-hover:   var(--torch-400);
  --accent-press:   var(--torch-600);
  --accent-soft:    var(--torch-200);
  --accent-ink:     #6B2700;
  --accent-2:       var(--spring-500);

  /* legacy aliases (do not remove — old cards reference these) */
  --ember:          var(--torch-500);
  --ember-press:    var(--torch-600);
  --ember-soft:     var(--torch-200);
  --ember-ink:      #6B2700;
  --ink:            var(--carbon);
  --moss:           var(--spring-600);
  --moss-soft:      var(--spring-200);

  /* ── Semantic — DARK (default) ─────────────────────────────────────── */
  --bg:             #0F0F0F;
  --bg-elev-1:      #181818;
  --bg-elev-2:      #232323;
  --bg-sunk:        #050505;

  --fg:             #F4F4F2;
  --fg-2:           #C4C4C0;
  --fg-3:           #9E9E9A;
  --fg-mute:        #6E6E6E;
  --fg-on-accent:   #FFFFFF;

  --line:           rgba(244, 244, 242, 0.10);
  --line-2:         rgba(244, 244, 242, 0.06);
  --line-strong:    rgba(244, 244, 242, 0.20);

  --success:        var(--spring-500);
  --warning:        #F4B400;
  --danger:         #FF4D4D;
  --info:           #5AB6FF;

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --r-xs:           6px;
  --r-sm:           10px;
  --r-md:           12px;
  --r-lg:           16px;
  --r-xl:           22px;
  --r-2xl:          32px;
  --r-pill:         999px;

  /* ── Spacing (4px grid) ────────────────────────────────────────────── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ── Shadows — luminance-based for dark mode ───────────────────────── */
  /* Rule: dark mode shadows are LIGHT (white glow) + a luminous rim.
     Elevation also lifts the surface lightness. Never use dark drop-shadows. */
  --sh-1: 0 0 0 1px rgba(255,255,255,.04);
  --sh-2: 0 0 0 1px rgba(255,255,255,.06), 0 8px 32px rgba(255,255,255,.04);
  --sh-3: 0 0 0 1px rgba(255,255,255,.08), 0 14px 48px rgba(255,255,255,.07);
  --sh-4: 0 0 0 1px rgba(255,255,255,.12), 0 24px 72px rgba(255,255,255,.10), 0 8px 24px rgba(255,255,255,.05);
  --sh-torch: 0 0 0 1px rgba(255,92,0,.50), 0 12px 40px rgba(255,92,0,.45), 0 28px 72px rgba(255,92,0,.25);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.06);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out:        cubic-bezier(.22,.61,.36,1);
  --ease-in-out:     cubic-bezier(.65,.05,.36,1);
  --ease-spring:     cubic-bezier(.34,1.56,.64,1);
  --ease-spring-2:   cubic-bezier(.18,1.25,.4,1.02);
  --ease-cinema:     cubic-bezier(.7,0,.18,1);

  --dur-1: 120ms;  --dur-2: 220ms;  --dur-3: 360ms;  --dur-4: 560ms;  --dur-5: 900ms;

  /* ── Type families ─────────────────────────────────────────────────── */
  --ff-display: "Schibsted Grotesk", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --ff-sans:    "Schibsted Grotesk", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Type scale ────────────────────────────────────────────────────── */
  --fs-display-xl: clamp(56px, 8.5vw, 128px);
  --fs-display-l:  clamp(44px, 6.2vw, 88px);
  --fs-display-m:  clamp(34px, 4.4vw, 64px);
  --fs-h1:         clamp(28px, 3.2vw, 44px);
  --fs-h2:         clamp(22px, 2.4vw, 32px);
  --fs-h3:         20px;
  --fs-h4:         17px;
  --fs-body-lg:    18px;
  --fs-body:       15px;
  --fs-body-sm:    13.5px;
  --fs-caption:    12px;
  --fs-micro:      11px;
  --fs-mono:       13px;

  --lh-display: 0.95;  --lh-tight: 1.1;  --lh-snug: 1.25;  --lh-body: 1.5;  --lh-loose: 1.7;
  --tr-tight: -0.035em;  --tr-snug: -0.015em;  --tr-normal: 0;  --tr-wide: 0.04em;  --tr-eyebrow: 0.16em;
}

/* ── Light theme (opt-in) ─────────────────────────────────────────────── */

:root.light, [data-theme="light"] {
  --bg:             var(--bone);
  --bg-elev-1:      #FFFFFF;
  --bg-elev-2:      #FFFFFF;
  --bg-sunk:        #ECECEA;

  --fg:             var(--carbon);
  --fg-2:           var(--n-600);
  --fg-3:           var(--n-500);
  --fg-mute:        var(--n-400);
  --fg-on-accent:   #FFFFFF;

  --line:           rgba(26, 26, 26, 0.10);
  --line-2:         rgba(26, 26, 26, 0.06);
  --line-strong:    rgba(26, 26, 26, 0.20);

  --sh-1: 0 1px 2px rgba(14,14,16,.08), 0 2px 4px rgba(14,14,16,.05);
  --sh-2: 0 3px 8px rgba(14,14,16,.09), 0 8px 20px rgba(14,14,16,.06);
  --sh-3: 0 6px 16px rgba(14,14,16,.11), 0 18px 40px rgba(14,14,16,.09);
  --sh-4: 0 14px 32px rgba(14,14,16,.14), 0 36px 72px rgba(14,14,16,.11);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);
}

/* =======================================================================
   Semantic styles
   ======================================================================= */

html, body { background: var(--bg); color: var(--fg); }

body, .body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-xl, .display-l, .display-m {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}

.display-xl { font-size: var(--fs-display-xl); }

.display-l  { font-size: var(--fs-display-l);  }

.display-m  { font-size: var(--fs-display-m);  }

h1, .h1 { font-family: var(--ff-sans); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-snug); text-wrap: balance; }

h2, .h2 { font-family: var(--ff-sans); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--tr-snug); text-wrap: balance; }

h3, .h3 { font-family: var(--ff-sans); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); }

h4, .h4 { font-family: var(--ff-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); }

p, .p   { font-family: var(--ff-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); text-wrap: pretty; }

.lead   { font-family: var(--ff-sans); font-weight: 500; font-size: var(--fs-body-lg); line-height: var(--lh-snug); color: var(--fg); letter-spacing: var(--tr-snug); }

.eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.caption { font-size: var(--fs-caption); color: var(--fg-3); }

.mono, code, kbd, samp { font-family: var(--ff-mono); font-size: var(--fs-mono); }

code { background: var(--bg-sunk); padding: 2px 6px; border-radius: var(--r-xs); }

::selection { background: var(--torch-500); color: #fff; }

/* =======================================================================
   IMPERIAL — brand layer on top of Strata foundations.
   Hotel: HI Hotels Imperial Resort, Sunny Beach BG.
   Palette: deep midnight navy · teal primary · soft gold for premium accents.
   Inherits Strata's spacing, radii, motion and typography.
   ======================================================================= */

:root {
  /* --- Override accent: teal replaces Torch as primary --- */
  --teal-200:   #99F0DD;
  --teal-300:   #5EDCC2;
  --teal-400:   #2CC8AB;
  --teal-500:   #14B8A6;
  --teal-600:   #0F9488;
  --teal-700:   #0B6B62;

  /* --- Gold (premium · priority · highlights) --- */
  --gold-200:   #FCE7B0;
  --gold-300:   #FBD473;
  --gold-400:   #F8C24B;
  --gold-500:   #F59E0B;
  --gold-600:   #D17F02;

  /* --- Navy (the sea at night) --- */
  --navy-950:   #060C18;   /* deepest */
  --navy-900:   #0A1326;   /* page */
  --navy-850:   #0F1B33;   /* sunk */
  --navy-800:   #142342;   /* elev-1 */
  --navy-700:   #1B2D52;   /* elev-2 / hover */
  --navy-600:   #243A66;   /* border / divider strong */
  --navy-500:   #3F5685;   /* mute text */

  /* --- Re-bind Strata aliases so every component picks up new palette --- */
  --accent:        var(--teal-500);
  --accent-hover:  var(--teal-400);
  --accent-press:  var(--teal-600);
  --accent-soft:   rgba(20,184,166,0.14);
  --accent-ink:    #052E29;
  --accent-2:      var(--gold-500);

  --torch-200: var(--teal-200);
  --torch-300: var(--teal-300);
  --torch-400: var(--teal-400);
  --torch-500: var(--teal-500);
  --torch-600: var(--teal-600);
  --torch-700: var(--teal-700);

  --spring-200: rgba(34,197,94,0.18);
  --spring-300: #6EE7A2;
  --spring-400: #4ADE80;
  --spring-500: #22C55E;
  --spring-600: #16A34A;

  /* --- Semantic — DARK (default) --- */
  --bg:        var(--navy-900);
  --bg-elev-1: var(--navy-800);
  --bg-elev-2: var(--navy-700);
  --bg-sunk:   var(--navy-850);

  --fg:        #F2F5FA;
  --fg-2:      #B9C6DC;
  --fg-3:      #7E8FAE;
  --fg-mute:   #4F5F7E;
  --fg-on-accent: #052E29;

  --line:        rgba(180,210,255,0.10);
  --line-2:      rgba(180,210,255,0.06);
  --line-strong: rgba(180,210,255,0.18);

  --success: var(--spring-500);
  --warning: var(--gold-500);
  --danger:  #EF4444;
  --info:    #60A5FA;

  /* --- Priority colour ramp (4-stop, calm to alarmed) --- */
  --pri-low:     #4ADE80;   /* green */
  --pri-medium:  var(--gold-400);
  --pri-high:    #F97316;   /* warning orange */
  --pri-urgent:  #EF4444;

  /* --- Shadows: lifted navy + teal glow for primary --- */
  --sh-1:  0 0 0 1px rgba(255,255,255,.04);
  --sh-2:  0 0 0 1px rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.45);
  --sh-3:  0 0 0 1px rgba(255,255,255,.08), 0 18px 56px rgba(0,0,0,.55);
  --sh-4:  0 0 0 1px rgba(255,255,255,.10), 0 28px 80px rgba(0,0,0,.60);
  --sh-torch:    0 0 0 1px rgba(20,184,166,.45), 0 14px 36px rgba(20,184,166,.32), 0 28px 64px rgba(20,184,166,.18);
  --sh-gold:     0 0 0 1px rgba(245,158,11,.40), 0 12px 30px rgba(245,158,11,.22);
}

/* --- Light theme (opt-in) --- */

:root.light, [data-theme="light"] {
  --bg:        #F4F6FA;
  --bg-elev-1: #FFFFFF;
  --bg-elev-2: #FFFFFF;
  --bg-sunk:   #E8EDF5;

  --fg:        #0A1326;
  --fg-2:      #2A3958;
  --fg-3:      #5A6D8E;
  --fg-mute:   #93A3BF;
  --fg-on-accent: #FFFFFF;

  --line:        rgba(10,19,38,0.10);
  --line-2:      rgba(10,19,38,0.05);
  --line-strong: rgba(10,19,38,0.18);

  --accent-soft: rgba(20,184,166,0.12);

  --sh-1: 0 1px 2px rgba(10,19,38,.06), 0 2px 6px rgba(10,19,38,.04);
  --sh-2: 0 3px 10px rgba(10,19,38,.07), 0 10px 24px rgba(10,19,38,.06);
  --sh-3: 0 8px 22px rgba(10,19,38,.09), 0 24px 48px rgba(10,19,38,.08);
  --sh-4: 0 14px 32px rgba(10,19,38,.10), 0 40px 80px rgba(10,19,38,.10);
}

/* ────────── Ambient sea-horizon (top of every device / window) ────────── */

.imp-horizon {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,158,11,0.0) 8%,
    rgba(245,158,11,0.55) 30%,
    rgba(20,184,166,0.85) 50%,
    rgba(245,158,11,0.55) 70%,
    rgba(245,158,11,0.0) 92%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  pointer-events: none;
  /* Sit BELOW the fixed/sticky header chrome (zIndex 40 in FixedHeader,
     WorkerScreen, TechHome). Was 50, which composited this decorative
     line OVER the round header buttons on Android/HarmonyOS webviews.
     39 keeps it as a pure top-edge ambient line, never over chrome. */
  z-index: 39;
}

.imp-horizon::after {
  content: '';
  position: absolute; inset: 0;
  background: inherit;
  filter: blur(6px);
  opacity: .7;
}

/* ────────── Hairline gold rule, used as section divider ────────── */

.imp-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.5), transparent);
  margin: 18px 0;
}

/* ────────── Generic chrome touches ────────── */

.imp-num {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── status pulse used for "in progress" ── */

@keyframes impPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(20,184,166,0); }
}

.imp-pulse { animation: impPulse 1.8s var(--ease-out) infinite; }

/* ── breathing gold glow for urgent priority ── */

@keyframes impBreathe {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.03); }
}

.imp-breathe { animation: impBreathe 2.4s var(--ease-in-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  .imp-pulse, .imp-breathe { animation: none; }
}

:root {
  color-scheme: dark;
  font-family: var(--ff-sans), "Schibsted Grotesk", ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --app-bg: var(--bg);
  --app-surface: var(--bg-elev-1);
  --app-surface-soft: var(--bg-sunk);
  --app-border: var(--line);
  --app-text: var(--fg);
  --app-muted: var(--fg-3);
  --app-success: var(--success);
  --app-warning: var(--warning);
  --app-danger: var(--danger);

  /*
   * Mobile-native type-scale corrections (override vendored colors_and_type.css).
   * The vendored scale was tuned for a marketing site: 15px body (below the
   * 16px iOS no-zoom minimum) and H1/H2 clamps that balloon to 44/32px on a
   * phone — the main cause of the "too large / stuffed" feel. Re-tune to a
   * calm ~1.2 native scale; body never drops below 16px, secondary below 14px.
   */
  --fs-h1:      clamp(20px, 4.6vw, 22px);  /* screen title */
  --fs-h2:      clamp(18px, 3.6vw, 20px);  /* section / sub-screen */
  --fs-h3:      18px;                      /* section title */
  --fs-h4:      16px;                      /* emphasis */
  --fs-body-lg: 18px;
  --fs-body:    16px;                      /* base — was 15px (auto-zoom risk) */
  --fs-body-sm: 14px;                      /* secondary — was 13.5px */
  --fs-caption: 12px;
  --fs-micro:   11px;                      /* eyebrow/overline floor */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
}

#root {
  width: min(100%, 56rem);
  margin: 0 auto;
  padding: 1rem 0;
}

#root .app-shell {
  width: min(100%, 56rem);
  margin: 0 auto;
}

.app-header {
  margin-bottom: 0.95rem;
}

.issue-item {
  border-color: var(--app-border);
  transition: transform 0.22s var(--ease-out), border-color 0.22s var(--ease-out), background-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}

.issue-item:hover {
  border-color: var(--line-strong);
  background-color: var(--app-surface-soft);
  box-shadow: var(--sh-2);
}

.list-note {
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  background: var(--app-surface);
  padding: 0.8rem;
}

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

.feedback-banner {
  border-color: var(--app-border);
  background: var(--app-surface-soft);
}

.install-helper {
  border: 1px dashed var(--app-border);
  background: linear-gradient(to right, rgb(255 255 255 / 0.05), transparent);
}

/* Legacy utility token bridge (App still uses old class names in some JSX paths) */

.text-slate-100,
.text-slate-200,
.text-slate-50,
.text-slate-950 {
  color: var(--fg);
}

.text-slate-300,
.text-slate-400 {
  color: var(--fg-3);
}

.text-emerald-100,
.text-amber-100,
.text-amber-200 {
  color: var(--success);
}

.text-rose-100,
.text-rose-300 {
  color: var(--danger);
}

.text-sky-200 {
  color: var(--teal-400);
}

.text-teal-200 {
  color: var(--teal-300);
}

.bg-slate-950,
[class*='bg-slate-950/'] {
  background-color: var(--bg-sunk);
}

[class*='bg-slate-900/'] {
  background-color: color-mix(in srgb, var(--bg-elev-1) 84%, black 16%);
}

[class~='bg-slate-900/75'],
[class~='bg-slate-900/80'] {
  background-color: color-mix(in srgb, var(--bg-elev-1) 65%, black 35%);
}

[class~='bg-emerald-500/10'],
[class~='bg-amber-500/10'],
[class~='bg-rose-500/10'],
[class~='bg-sky-500/10'],
[class~='bg-sky-400/10'],
[class~='bg-white/10'],
.bg-sky-300,
.bg-sky-400,
.bg-sky-500 {
  background-color: var(--line);
}

[class~='bg-emerald-500/10'],
[class~='bg-amber-500/10'],
[class~='bg-rose-500/10'],
[class~='bg-sky-500/10'],
[class~='bg-sky-400/10'] {
  background-color: rgba(74, 222, 128, 0.12);
}

[class~='bg-rose-500/10'] { background-color: rgba(239, 68, 68, 0.13); }

[class~='bg-amber-500/10'] { background-color: rgba(248, 194, 75, 0.12); }

[class~='bg-sky-400/10'],
[class~='bg-sky-500/10'] { background-color: rgba(20, 184, 166, 0.12); }

[class~='border-white/10'],
[class~='border-white/15'],
[class~='border-white/20'] {
  border-color: var(--line);
}

[class~='border-emerald-500/30'],
[class~='border-emerald-500/40'] {
  border-color: rgba(34, 197, 94, 0.35);
}

[class~='border-amber-500/20'],
[class~='border-amber-500/30'] {
  border-color: rgba(245, 158, 11, 0.28);
}

[class~='border-rose-500/40'] {
  border-color: rgba(239, 68, 68, 0.35);
}

[class~='border-sky-300/30'] {
  border-color: rgba(20, 184, 166, 0.45);
}

[class~='border-teal-400/30'] {
  border-color: rgba(20, 184, 166, 0.30);
}

[class~='fill-sky-200/20'] {
  fill: rgba(20, 184, 166, 0.2);
}

/*
 * Motion-first policy (see src/lib/motion.ts): the Imperial PWA is designed
 * AROUND motion, so the usual global `prefers-reduced-motion: reduce` override
 * that flattens every animation/transition is intentionally removed. This is a
 * deliberate, owner-approved decision (2026-05-30).
 */

/* #4 admin full-bleed: role shells (admin desktop sidebar layout + tech/manager
   home) own their own chrome and must NOT be clamped by the legacy #root
   max-width. Targets ONLY .app-role-shell, leaving the mobile/auth .app-shell
   layout untouched. */

#root:has(.app-role-shell) {
  width: 100%;
  max-width: none;
  padding: 0;
}

html:has(.app-role-shell--admin-desktop),
body:has(.app-role-shell--admin-desktop),
#root:has(.app-role-shell--admin-desktop) {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}