@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=Chakra+Petch:wght@500;600;700&family=Sora:wght@400;500;600;700;800&family=Syne:wght@500;600;700;800&display=swap");/*! 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-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

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

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

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

  .h-full {
    height: 100%;
  }

  .h-svh {
    height: 100svh;
  }

  .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-svh {
    min-height: 100svh;
  }

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

  .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 {
    flex-shrink: 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-baseline {
    align-items: baseline;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .line-through {
    text-decoration-line: line-through;
  }

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

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

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

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

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

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

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

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

  @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);
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

: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;
}

#root {
  position: fixed;
  inset: 0;
}

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;
}

.rc-field:focus-visible, .rc-btn:focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 2px;
}

.rc-split {
  align-items: start;
  gap: 20px;
  min-width: 0;
  display: grid;
}

.rc-col {
  align-content: start;
  gap: 20px;
  min-width: 0;
  display: grid;
}

@media (min-width: 1024px) {
  .rc-split {
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
  }
}

:root {
  --app-header-h: 47px;
  --app-navrow-h: 44px;
  --app-bottomnav-h: 64px;
  --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-ordinal {
  syntax: "*";
  inherits: false
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/*
 * Stylesheet load-order contract: the two .design vendor sheets below are the
 * legacy base — they re-declare the color semantic tokens (--bg, --fg, --line,
 * --accent, shadows, …) at the same specificity as the theme file. So
 * imperial-tokens.css MUST load after them for its [data-palette] theme blocks
 * (colors + shapes) to win the cascade: keep it as the LAST @import.
 */
/* =======================================================================
   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; }
}
/* =======================================================================
   IMPERIAL RESORT — colors_and_type.css
   Foundations (type · spacing · radii · motion · shadows) + THREE palettes,
   each with a DARK (default) and a LIGHT variant:

     data-palette="tech"          cool slate · electric azure · cyan
     data-palette="hospitality"   midnight navy · teal · soft gold   (DEFAULT)
     data-palette="nature"        deep forest · moss · terracotta

   Dark is the default mode; opt into light with [data-theme="light"] or .light.

   HOW IT WORKS
   ------------
   Every palette rebinds the same alias ramps —
     --teal-* (PRIMARY accent)   --gold-* (SECONDARY / premium / priority)
     --spring-* (success / live) --navy-* (dark surface ladder)
   — plus the semantic tokens (--bg, --fg, --accent, shadows, …).
   Components only ever read the aliases + semantics, so the SAME component
   reskins across all three palettes with zero markup changes. The names
   "teal / gold / navy" are historical (the hospitality palette shipped first);
   read them as PRIMARY / SECONDARY / SURFACE.

   Usage:  <html data-palette="tech" data-theme="dark">
   ======================================================================= */
/* ───────────────────────── Webfonts ───────────────────────── *
 * Schibsted Grotesk drives the whole system; JetBrains Mono for numerals/IDs.
 * Single-family-UI is intentional: cohesive, light payload, no display mismatch.
 * Loaded from Google Fonts CDN — no local files shipped. */
/* =======================================================================
   1 · FOUNDATIONS — shared by every palette (palette-independent)
   ======================================================================= */
:root {
  /* ── Type families ── */
  --ff-display: "Schibsted Grotesk", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif; /* @kind font */
  --ff-sans:    "Schibsted Grotesk", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif; /* @kind font */
  --ff-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* @kind font */

  /* ── Shape personality (DEFAULTS; each palette overrides in §2c for its topic).
     Components read these instead of hard-coded radii, so switching palette
     re-shapes every button / card / tile / input / chip. Multi-value radii are
     allowed (organic palettes use asymmetric per-corner values). ── */
  --r-btn: 12px; /* @kind radius */ --r-tile: 10px; /* @kind radius */ --r-input: 10px; /* @kind radius */ --r-chip: 9999px; /* @kind radius */
  --r-card: 16px; /* @kind radius */ --r-hero: 18px; /* @kind radius */ --r-sheet: 22px; /* @kind radius */

  /* ── Shape-variety clips (apply to SOME elements, not all, for rhythm).
     Used via `clip-path: var(--clip-cut)` etc. Give one element per cluster a
     different silhouette — a cleanly laser-cut corner, or a chipped/broken edge
     (wood). Palettes may override these to match their material. ── */
  --clip-cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);          /* @kind other */  /* top-right laser cut */
  --clip-cut-2: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); /* @kind other */ /* two opposite cuts */
  --clip-chip: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 7px) calc(100% - 11px), calc(100% - 16px) 100%, 9px 100%, 0 calc(100% - 6px)); /* @kind other */ /* chipped/broken bottom edge */
  --clip-notch: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px)); /* @kind other */ /* bottom-left notch */

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

  --lh-display: 0.95; /* @kind font */  --lh-tight: 1.1; /* @kind font */  --lh-snug: 1.25; /* @kind font */  --lh-body: 1.5; /* @kind font */  --lh-loose: 1.7; /* @kind font */
  --tr-tight: -0.035em; /* @kind font */  --tr-snug: -0.015em; /* @kind font */  --tr-normal: 0; /* @kind font */  --tr-wide: 0.04em; /* @kind font */  --tr-eyebrow: 0.22em; /* @kind font */

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

  /* ── 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;

  /* ── Touch targets ("grandma-proof") ── */
  --tap: 44px;  --tap-56: 56px;  --tap-64: 64px;  --tap-96: 96px;

  /* ── Motion ── */
  --ease-out:      cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out:   cubic-bezier(.65,.05,.36,1); /* @kind other */
  --ease-spring:   cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --ease-spring-2: cubic-bezier(.18,1.25,.4,1.02); /* @kind other */
  --ease-cinema:   cubic-bezier(.7,0,.18,1); /* @kind other */
  --dur-1: 120ms; /* @kind other */  --dur-2: 220ms; /* @kind other */  --dur-3: 360ms; /* @kind other */  --dur-4: 560ms; /* @kind other */  --dur-5: 900ms; /* @kind other */

  /* ── Shell-chrome heights (single source of truth) ── */
  --app-header-h: 47px;  --app-navrow-h: 44px;  --app-bottomnav-h: 64px;

  /* ── Universal priority ramp (calm → alarmed).
        Kept IDENTICAL across palettes on purpose: signal colour must never
        depend on theme — a red is always "urgent" to a non-technical user. ── */
  --pri-low:    #4ADE80;   /* green   */
  --pri-medium: #F8C24B;   /* amber   */
  --pri-high:   #F97316;   /* orange  */
  --pri-urgent: #EF4444;   /* red     */
}
/* =======================================================================
   2 · PALETTES
   ======================================================================= */
/* ─────────────────────────────────────────────────────────────────────
   HOSPITALITY · DARK  (DEFAULT — applies to :root and [data-palette="hospitality"])
   Midnight navy · teal primary · soft gold premium accent.
   ───────────────────────────────────────────────────────────────────── */
:root,
[data-palette="hospitality"] {
  --teal-200:#99F0DD; --teal-300:#5EDCC2; --teal-400:#2CC8AB; --teal-500:#14B8A6; --teal-600:#0F9488; --teal-700:#0B6B62;
  --gold-200:#FCE7B0; --gold-300:#FBD473; --gold-400:#F8C24B; --gold-500:#F59E0B; --gold-600:#D17F02;
  --spring-200:rgba(34,197,94,.18); --spring-300:#6EE7A2; --spring-400:#4ADE80; --spring-500:#22C55E; --spring-600:#16A34A;
  --navy-950:#060C18; --navy-900:#0A1326; --navy-850:#0F1B33; --navy-800:#142342; --navy-700:#1B2D52; --navy-600:#243A66; --navy-500:#3F5685;

  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(20,184,166,.14); --accent-ink:#052E29; --accent-2:var(--gold-500);
  --on-accent:#052E29; --on-accent-2:#3A2400;

  --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,.10); --line-2:rgba(180,210,255,.06); --line-strong:rgba(180,210,255,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#EF4444; --info:#60A5FA;

  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(20,184,166,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(245,158,11,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06);
  /* aliases kept for ported components */
  --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
/* HOSPITALITY · LIGHT */
[data-palette="hospitality"][data-theme="light"],
.light[data-palette="hospitality"],
:root[data-theme="light"]:not([data-palette]),
:root.light:not([data-palette]) {
  --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,.10); --line-2:rgba(10,19,38,.05); --line-strong:rgba(10,19,38,.18);
  --accent-soft:rgba(20,184,166,.12);
  --sh-1:0 1px 2px rgba(10,19,38,.06), 0 2px 6px rgba(10,19,38,.04);
  --sh-2:0 2px 7px rgba(10,19,38,.07), 0 5px 14px rgba(10,19,38,.06);
  --sh-3:0 4px 12px rgba(10,19,38,.09), 0 11px 26px rgba(10,19,38,.08);
  --sh-4:0 7px 18px rgba(10,19,38,.10), 0 16px 36px rgba(10,19,38,.10);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.6);
}
/* ─────────────────────────────────────────────────────────────────────
   TECH · DARK
   Cool slate carbon · electric azure primary · cyan secondary.
   Precise, instrument-panel feel.
   ───────────────────────────────────────────────────────────────────── */
[data-palette="tech"] {
  /* PRIMARY ramp → electric azure */
  --teal-200:#C7DBFF; --teal-300:#93B4FF; --teal-400:#5E8DFF; --teal-500:#3B6EF5; --teal-600:#2B54D0; --teal-700:#1E3C9C;
  /* SECONDARY ramp → cyan (data / live) */
  --gold-200:#BDF1FB; --gold-300:#7FE3F4; --gold-400:#38CFEC; --gold-500:#12B4D8; --gold-600:#0B8FAE;
  --spring-200:rgba(45,212,191,.18); --spring-300:#7FF0DA; --spring-400:#3FE0C4; --spring-500:#14C9AC; --spring-600:#0E9F89;
  /* SURFACE ladder → blue-slate carbon */
  --navy-950:#070A0F; --navy-900:#0B0F17; --navy-850:#10151F; --navy-800:#151B27; --navy-700:#1D2533; --navy-600:#283243; --navy-500:#3A475C;

  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(59,110,245,.16); --accent-ink:#06122E; --accent-2:var(--gold-500);
  --on-accent:#FFFFFF; --on-accent-2:#04222B;

  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#EEF2F8; --fg-2:#AEBBCE; --fg-3:#73839B; --fg-mute:#48566B; --fg-on-accent:#FFFFFF;
  --line:rgba(180,205,255,.10); --line-2:rgba(180,205,255,.05); --line-strong:rgba(180,205,255,.18);
  --success:var(--spring-500); --warning:#F8C24B; --danger:#FF5B5B; --info:var(--teal-400);

  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(59,110,245,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(18,180,216,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
/* TECH · LIGHT */
[data-palette="tech"][data-theme="light"],
.light[data-palette="tech"] {
  --bg:#EEF1F6; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#E0E5EE;
  --fg:#0B0F17; --fg-2:#2C3647; --fg-3:#5A6678; --fg-mute:#909BAC; --fg-on-accent:#FFFFFF;
  --line:rgba(11,15,23,.10); --line-2:rgba(11,15,23,.05); --line-strong:rgba(11,15,23,.18);
  --accent-soft:rgba(59,110,245,.12); --accent-ink:#06122E;
  --sh-1:0 1px 2px rgba(11,15,23,.06);
  --sh-2:0 2px 5px rgba(11,15,23,.09);
  --sh-3:0 4px 11px rgba(11,15,23,.11);
  --sh-4:0 8px 20px rgba(11,15,23,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   TECH · VIOLET — DARK   (indigo-black · violet primary · fuchsia secondary)
   ───────────────────────────────────────────────────────────────────── */
[data-palette="tech-violet"] {
  --teal-200:#D6CCFF; --teal-300:#B5A3FF; --teal-400:#9579FF; --teal-500:#7C5CFF; --teal-600:#6240E0; --teal-700:#4A2DB0;
  --gold-200:#F8CFF0; --gold-300:#F2A6E6; --gold-400:#EC78D8; --gold-500:#E14FC6; --gold-600:#B43A9C;
  --spring-200:rgba(52,211,153,.18); --spring-300:#6EE7B7; --spring-400:#34D399; --spring-500:#10B981; --spring-600:#059669;
  --navy-950:#08070F; --navy-900:#0C0B16; --navy-850:#11101E; --navy-800:#161527; --navy-700:#1E1C33; --navy-600:#2A2746; --navy-500:#423E63;

  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(124,92,255,.16); --accent-ink:#120A2E; --accent-2:var(--gold-500);
  --on-accent:#FFFFFF; --on-accent-2:#2A0822;

  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#EEECF6; --fg-2:#B3AECB; --fg-3:#79749A; --fg-mute:#4D4A6B; --fg-on-accent:#FFFFFF;
  --line:rgba(200,195,255,.10); --line-2:rgba(200,195,255,.05); --line-strong:rgba(200,195,255,.18);
  --success:var(--spring-500); --warning:#F8C24B; --danger:#FF5B7A; --info:var(--teal-400);

  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(124,92,255,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(225,79,198,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="tech-violet"][data-theme="light"], .light[data-palette="tech-violet"] {
  --bg:#F1EFF8; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#E4E0F2;
  --fg:#0C0B16; --fg-2:#322E47; --fg-3:#5E5878; --fg-mute:#938DAC; --fg-on-accent:#FFFFFF;
  --line:rgba(12,11,22,.10); --line-2:rgba(12,11,22,.05); --line-strong:rgba(12,11,22,.18);
  --accent-soft:rgba(124,92,255,.12); --accent-ink:#120A2E;
  --sh-1:0 1px 2px rgba(12,11,22,.06);
  --sh-2:0 2px 5px rgba(12,11,22,.09);
  --sh-3:0 4px 11px rgba(12,11,22,.11);
  --sh-4:0 8px 20px rgba(12,11,22,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   TECH · LIME — DARK   (carbon graphite · signal lime primary · cyan secondary)
   ───────────────────────────────────────────────────────────────────── */
[data-palette="tech-lime"] {
  --teal-200:#E6F8B8; --teal-300:#CFEF7E; --teal-400:#B6E63F; --teal-500:#9BD615; --teal-600:#7BAE0E; --teal-700:#5A800A;
  --gold-200:#BDF1FB; --gold-300:#7FE3F4; --gold-400:#38CFEC; --gold-500:#12B4D8; --gold-600:#0B8FAE;
  --spring-200:rgba(52,211,153,.18); --spring-300:#6EE7B7; --spring-400:#34D399; --spring-500:#10B981; --spring-600:#059669;
  --navy-950:#090A09; --navy-900:#0F100E; --navy-850:#141613; --navy-800:#1A1C18; --navy-700:#242721; --navy-600:#33372E; --navy-500:#51564A;

  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(155,214,21,.16); --accent-ink:#14210A; --accent-2:var(--gold-500);
  --on-accent:#14210A; --on-accent-2:#04222B;

  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F0F2EC; --fg-2:#BFC4B5; --fg-3:#828876; --fg-mute:#545A49; --fg-on-accent:#14210A;
  --line:rgba(220,230,200,.10); --line-2:rgba(220,230,200,.05); --line-strong:rgba(220,230,200,.18);
  --success:var(--spring-500); --warning:#F8C24B; --danger:#FF5B5B; --info:var(--gold-400);

  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(155,214,21,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(18,180,216,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="tech-lime"][data-theme="light"], .light[data-palette="tech-lime"] {
  --bg:#F3F4EF; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#E6E8DF;
  --fg:#0F100E; --fg-2:#31342C; --fg-3:#5E6356; --fg-mute:#939885; --fg-on-accent:#14210A;
  --line:rgba(15,16,14,.10); --line-2:rgba(15,16,14,.05); --line-strong:rgba(15,16,14,.18);
  --accent-soft:rgba(123,174,14,.16); --accent-ink:#14210A;
  --sh-1:0 1px 2px rgba(15,16,14,.06);
  --sh-2:0 2px 5px rgba(15,16,14,.09);
  --sh-3:0 4px 11px rgba(15,16,14,.11);
  --sh-4:0 8px 20px rgba(15,16,14,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   NATURE · DARK
   Deep forest charcoal-green · moss primary · terracotta secondary.
   Warm, organic, calm.
   ───────────────────────────────────────────────────────────────────── */
[data-palette="nature"] {
  /* PRIMARY ramp → moss / leaf green */
  --teal-200:#CDE8C2; --teal-300:#A6D595; --teal-400:#7CBE65; --teal-500:#5B9E45; --teal-600:#467E35; --teal-700:#335C26;
  /* SECONDARY ramp → terracotta / clay (premium / priority highlights) */
  --gold-200:#F3D3B6; --gold-300:#E8B488; --gold-400:#DB9559; --gold-500:#C8743C; --gold-600:#A2562A;
  --spring-200:rgba(120,200,120,.18); --spring-300:#A7E08C; --spring-400:#7FD167; --spring-500:#5DB94C; --spring-600:#3F9436;
  /* SURFACE ladder → warm forest charcoal */
  --navy-950:#0C1009; --navy-900:#12180F; --navy-850:#182013; --navy-800:#1F2918; --navy-700:#2A3621; --navy-600:#3A4A2E; --navy-500:#5A6B4A;

  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(91,158,69,.18); --accent-ink:#0A1B06; --accent-2:var(--gold-500);
  --on-accent:#0A1B06; --on-accent-2:#2A1408;

  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F2F4EC; --fg-2:#C6CDB7; --fg-3:#8C9678; --fg-mute:#5C6649; --fg-on-accent:#0A1B06;
  --line:rgba(210,225,180,.10); --line-2:rgba(210,225,180,.05); --line-strong:rgba(210,225,180,.18);
  --success:var(--spring-500); --warning:var(--gold-400); --danger:#E0524A; --info:#74A9C7;

  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(91,158,69,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(200,116,60,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
/* NATURE · LIGHT */
[data-palette="nature"][data-theme="light"],
.light[data-palette="nature"] {
  --bg:#F5F2EA; --bg-elev-1:#FFFDF8; --bg-elev-2:#FFFDF8; --bg-sunk:#E9E3D6;
  --fg:#1A2113; --fg-2:#3C462E; --fg-3:#6A7556; --fg-mute:#9AA383; --fg-on-accent:#FFFFFF;
  --line:rgba(26,33,19,.10); --line-2:rgba(26,33,19,.05); --line-strong:rgba(26,33,19,.18);
  --accent-soft:rgba(91,158,69,.14); --accent-ink:#0A1B06;
  --sh-1:0 1px 2px rgba(26,33,19,.06);
  --sh-2:0 2px 5px rgba(26,33,19,.09);
  --sh-3:0 4px 11px rgba(26,33,19,.11);
  --sh-4:0 8px 20px rgba(26,33,19,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.6);
}
/* ─────────────────────────────────────────────────────────────────────
   HOSPITALITY · CORAL — DARK   (twilight dusk · coral primary · gold secondary)
   ───────────────────────────────────────────────────────────────────── */
[data-palette="hospitality-coral"] {
  --teal-200:#FFD3C4; --teal-300:#FFAE96; --teal-400:#FF8A66; --teal-500:#F76A47; --teal-600:#D24E2D; --teal-700:#9C381F;
  --gold-200:#FCE7B0; --gold-300:#FBD473; --gold-400:#F8C24B; --gold-500:#F59E0B; --gold-600:#D17F02;
  --spring-200:rgba(34,197,94,.18); --spring-300:#6EE7A2; --spring-400:#4ADE80; --spring-500:#22C55E; --spring-600:#16A34A;
  --navy-950:#100A14; --navy-900:#181020; --navy-850:#1F1529; --navy-800:#281B33; --navy-700:#342544; --navy-600:#463156; --navy-500:#6A5078;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(247,106,71,.16); --accent-ink:#2A0C03; --accent-2:var(--gold-500);
  --on-accent:#2A0C03; --on-accent-2:#3A2400;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F4EFF5; --fg-2:#C7BCD0; --fg-3:#8C8199; --fg-mute:#5A5167; --fg-on-accent:#2A0C03;
  --line:rgba(220,210,255,.10); --line-2:rgba(220,210,255,.05); --line-strong:rgba(220,210,255,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#EF4444; --info:#60A5FA;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(247,106,71,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(245,158,11,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="hospitality-coral"][data-theme="light"], .light[data-palette="hospitality-coral"] {
  --bg:#F8F4F6; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#ECE5EC;
  --fg:#181020; --fg-2:#372C42; --fg-3:#62586F; --fg-mute:#968CA2; --fg-on-accent:#FFFFFF;
  --line:rgba(24,16,32,.10); --line-2:rgba(24,16,32,.05); --line-strong:rgba(24,16,32,.18);
  --accent-soft:rgba(247,106,71,.12); --accent-ink:#2A0C03;
  --sh-1:0 1px 2px rgba(24,16,32,.06);
  --sh-2:0 2px 5px rgba(24,16,32,.09);
  --sh-3:0 4px 11px rgba(24,16,32,.11);
  --sh-4:0 8px 20px rgba(24,16,32,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   HOSPITALITY · PLUM — DARK   (aubergine · rosé primary · champagne secondary)
   ───────────────────────────────────────────────────────────────────── */
[data-palette="hospitality-plum"] {
  --teal-200:#F6D6E4; --teal-300:#ECB1CE; --teal-400:#E08CB6; --teal-500:#D06A9C; --teal-600:#AB5080; --teal-700:#7E395E;
  --gold-200:#F6E8C2; --gold-300:#EED79A; --gold-400:#E6C572; --gold-500:#D8AE52; --gold-600:#B08C3C;
  --spring-200:rgba(52,211,153,.18); --spring-300:#6EE7B7; --spring-400:#34D399; --spring-500:#10B981; --spring-600:#059669;
  --navy-950:#120912; --navy-900:#1A0F1B; --navy-850:#221426; --navy-800:#2B1B30; --navy-700:#392642; --navy-600:#4D3556; --navy-500:#74577E;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(208,106,156,.16); --accent-ink:#2C0A1E; --accent-2:var(--gold-500);
  --on-accent:#2C0A1E; --on-accent-2:#2E2208;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F4EEF2; --fg-2:#CDC0C9; --fg-3:#94848F; --fg-mute:#5F5263; --fg-on-accent:#2C0A1E;
  --line:rgba(235,210,230,.10); --line-2:rgba(235,210,230,.05); --line-strong:rgba(235,210,230,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#F0556F; --info:#9D8AE8;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(208,106,156,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(216,174,82,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="hospitality-plum"][data-theme="light"], .light[data-palette="hospitality-plum"] {
  --bg:#F8F3F6; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#ECE2EA;
  --fg:#1A0F1B; --fg-2:#3A2C3C; --fg-3:#66586A; --fg-mute:#9B8C9D; --fg-on-accent:#FFFFFF;
  --line:rgba(26,15,27,.10); --line-2:rgba(26,15,27,.05); --line-strong:rgba(26,15,27,.18);
  --accent-soft:rgba(208,106,156,.12); --accent-ink:#2C0A1E;
  --sh-1:0 1px 2px rgba(26,15,27,.06);
  --sh-2:0 2px 5px rgba(26,15,27,.09);
  --sh-3:0 4px 11px rgba(26,15,27,.11);
  --sh-4:0 8px 20px rgba(26,15,27,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   HOSPITALITY · MARBLE — DARK   (polished slate stone · brass primary · pewter secondary)
   Cool veined-marble luxe: charcoal-stone surfaces, warm brass as the jewel.
   ───────────────────────────────────────────────────────────────────── */
[data-palette="hospitality-marble"] {
  --teal-200:#F0E4C4; --teal-300:#E3D09B; --teal-400:#D2B872; --teal-500:#BE9E52; --teal-600:#9A7E3C; --teal-700:#705B2A;
  --gold-200:#DCE3E8; --gold-300:#BCC8D1; --gold-400:#9AAAB6; --gold-500:#7C8E9C; --gold-600:#5E6E7B;
  --spring-200:rgba(52,211,153,.18); --spring-300:#6EE7B7; --spring-400:#34D399; --spring-500:#10B981; --spring-600:#059669;
  --navy-950:#0C0D0F; --navy-900:#131417; --navy-850:#191B1F; --navy-800:#202327; --navy-700:#2B2F34; --navy-600:#3B4046; --navy-500:#5B6168;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(190,158,82,.16); --accent-ink:#2A2208; --accent-2:var(--gold-500);
  --on-accent:#221A04; --on-accent-2:#0E1417;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F1F2F3; --fg-2:#C2C6CB; --fg-3:#868D94; --fg-mute:#565C63; --fg-on-accent:#221A04;
  --line:rgba(220,226,232,.10); --line-2:rgba(220,226,232,.05); --line-strong:rgba(220,226,232,.18);
  --success:var(--spring-500); --warning:var(--teal-500); --danger:#E0524A; --info:#7C8E9C;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(190,158,82,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(124,142,156,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="hospitality-marble"][data-theme="light"], .light[data-palette="hospitality-marble"] {
  --bg:#F4F4F2; --bg-elev-1:#FCFCFB; --bg-elev-2:#FFFFFF; --bg-sunk:#E7E7E3;
  --fg:#1A1B1D; --fg-2:#3B3D40; --fg-3:#6A6D71; --fg-mute:#9A9DA1; --fg-on-accent:#221A04;
  --line:rgba(26,27,29,.10); --line-2:rgba(26,27,29,.05); --line-strong:rgba(26,27,29,.16);
  --accent:#A6863A; --accent-hover:#BE9E52; --accent-press:#86691E; --accent-soft:rgba(166,134,58,.14); --accent-ink:#2A2208;
  --accent-2:#6E7E8B;
  --sh-1:0 1px 2px rgba(26,27,29,.06), 0 2px 6px rgba(26,27,29,.04);
  --sh-2:0 2px 7px rgba(26,27,29,.07), 0 5px 14px rgba(26,27,29,.05);
  --sh-3:0 4px 12px rgba(26,27,29,.09), 0 11px 26px rgba(26,27,29,.07);
  --sh-4:0 7px 18px rgba(26,27,29,.10), 0 16px 36px rgba(26,27,29,.09);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.8);
}
/* ─────────────────────────────────────────────────────────────────────
   HOSPITALITY · WALNUT — DARK   (warm walnut wood · honey-amber primary · brass secondary)
   Wood-panelled lobby: espresso surfaces, honey amber as the glow.
   ───────────────────────────────────────────────────────────────────── */
[data-palette="hospitality-walnut"] {
  --teal-200:#F6DBB0; --teal-300:#EEC182; --teal-400:#E4A555; --teal-500:#D88A33; --teal-600:#B36C22; --teal-700:#854E16;
  --gold-200:#F0DEB4; --gold-300:#E4C988; --gold-400:#D6B266; --gold-500:#C49A4C; --gold-600:#9E7A36;
  --spring-200:rgba(120,200,120,.18); --spring-300:#A7E08C; --spring-400:#7FD167; --spring-500:#5DB94C; --spring-600:#3F9436;
  --navy-950:#140D07; --navy-900:#1C130B; --navy-850:#241810; --navy-800:#2D2015; --navy-700:#3B2B1D; --navy-600:#4F3B28; --navy-500:#76593E;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(216,138,51,.18); --accent-ink:#2A1606; --accent-2:var(--gold-500);
  --on-accent:#2A1606; --on-accent-2:#251B06;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F5EFE6; --fg-2:#D2C4B1; --fg-3:#9B8A73; --fg-mute:#665540; --fg-on-accent:#2A1606;
  --line:rgba(235,215,185,.10); --line-2:rgba(235,215,185,.05); --line-strong:rgba(235,215,185,.18);
  --success:var(--spring-500); --warning:var(--gold-400); --danger:#E0584A; --info:#C49A4C;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(216,138,51,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(196,154,76,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="hospitality-walnut"][data-theme="light"], .light[data-palette="hospitality-walnut"] {
  --bg:#F6F0E7; --bg-elev-1:#FFFBF4; --bg-elev-2:#FFFFFF; --bg-sunk:#EAE0D0;
  --fg:#1C130B; --fg-2:#3E3022; --fg-3:#6C5C49; --fg-mute:#9C8C78; --fg-on-accent:#2A1606;
  --line:rgba(28,19,11,.10); --line-2:rgba(28,19,11,.05); --line-strong:rgba(28,19,11,.18);
  --accent:#B86E1E; --accent-hover:#D88A33; --accent-press:#925614; --accent-soft:rgba(184,110,30,.14); --accent-ink:#2A1606;
  --accent-2:#9E7A36;
  --sh-1:0 1px 2px rgba(28,19,11,.06);
  --sh-2:0 2px 5px rgba(28,19,11,.09);
  --sh-3:0 4px 11px rgba(28,19,11,.11);
  --sh-4:0 8px 20px rgba(28,19,11,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   NATURE · OCEAN — DARK   (deep kelp · sea-green primary · driftwood secondary)
   ───────────────────────────────────────────────────────────────────── */
[data-palette="nature-ocean"] {
  --teal-200:#BDEDDD; --teal-300:#88DCC2; --teal-400:#4FC6A4; --teal-500:#1FA589; --teal-600:#16806B; --teal-700:#0E5C4D;
  --gold-200:#ECDCC2; --gold-300:#DCC59A; --gold-400:#CBAE76; --gold-500:#B89557; --gold-600:#927340;
  --spring-200:rgba(94,210,160,.18); --spring-300:#8FE6C4; --spring-400:#5FD3A6; --spring-500:#2FB985; --spring-600:#1F9469;
  --navy-950:#07120F; --navy-900:#0B1714; --navy-850:#101E1A; --navy-800:#152620; --navy-700:#1E332B; --navy-600:#2B473C; --navy-500:#466B5E;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(31,165,137,.18); --accent-ink:#04211A; --accent-2:var(--gold-500);
  --on-accent:#04211A; --on-accent-2:#2A1F08;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#ECF4F0; --fg-2:#B6CCC3; --fg-3:#788A82; --fg-mute:#4C665B; --fg-on-accent:#04211A;
  --line:rgba(200,230,215,.10); --line-2:rgba(200,230,215,.05); --line-strong:rgba(200,230,215,.18);
  --success:var(--spring-500); --warning:var(--gold-400); --danger:#E0524A; --info:#74A9C7;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(31,165,137,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(184,149,87,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="nature-ocean"][data-theme="light"], .light[data-palette="nature-ocean"] {
  --bg:#EFF5F2; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#DFE9E4;
  --fg:#0B1714; --fg-2:#2E3F39; --fg-3:#5A6B63; --fg-mute:#8E9D95; --fg-on-accent:#FFFFFF;
  --line:rgba(11,23,20,.10); --line-2:rgba(11,23,20,.05); --line-strong:rgba(11,23,20,.18);
  --accent-soft:rgba(31,165,137,.14); --accent-ink:#04211A;
  --sh-1:0 1px 2px rgba(11,23,20,.06);
  --sh-2:0 2px 5px rgba(11,23,20,.09);
  --sh-3:0 4px 11px rgba(11,23,20,.11);
  --sh-4:0 8px 20px rgba(11,23,20,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.6);
}
/* =======================================================================
   2b · EXOTIC PALETTES  (v2) — Quantum/Nano · Exobiology · Space Hotel
   Vivid, uncommon directions. Same alias ramps + semantics as the base
   palettes, so every component reskins with one attribute.
   ======================================================================= */
/* ─────────────────────────────────────────────────────────────────────
   QUANTUM · PLASMA — obsidian void · plasma magenta · electric cyan
   ───────────────────────────────────────────────────────────────────── */
[data-palette="quantum-plasma"] {
  --teal-200:#FBD0F4; --teal-300:#F7A6EC; --teal-400:#F46FE0; --teal-500:#EC3FD0; --teal-600:#C426AC; --teal-700:#911E80;
  --gold-200:#BFF7FB; --gold-300:#82ECF6; --gold-400:#3FDCEE; --gold-500:#13C2E0; --gold-600:#0C97B0;
  --spring-200:rgba(80,240,160,.18); --spring-300:#86F2C0; --spring-400:#56E6A2; --spring-500:#22D38A; --spring-600:#16A86C;
  --navy-950:#070510; --navy-900:#0C0918; --navy-850:#110D20; --navy-800:#17122B; --navy-700:#211A3C; --navy-600:#2F2552; --navy-500:#4A3D78;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(236,63,208,.16); --accent-ink:#2A0622; --accent-2:var(--gold-500);
  --on-accent:#2A0622; --on-accent-2:#03212A;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F4EEF8; --fg-2:#C5B8D8; --fg-3:#897CA6; --fg-mute:#564B73; --fg-on-accent:#2A0622;
  --line:rgba(220,200,255,.10); --line-2:rgba(220,200,255,.05); --line-strong:rgba(220,200,255,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#FF5B7A; --info:#3FDCEE;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(236,63,208,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(19,194,224,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="quantum-plasma"][data-theme="light"], .light[data-palette="quantum-plasma"] {
  --bg:#F6EFF7; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#ECE0EF;
  --fg:#0C0918; --fg-2:#33283F; --fg-3:#5E5278; --fg-mute:#938DAC; --fg-on-accent:#FFFFFF;
  --line:rgba(18,9,24,.10); --line-2:rgba(18,9,24,.05); --line-strong:rgba(18,9,24,.18);
  --accent-soft:rgba(236,63,208,.12); --accent-ink:#2A0622;
  --sh-1:0 1px 2px rgba(18,9,24,.06);
  --sh-2:0 2px 5px rgba(18,9,24,.09);
  --sh-3:0 4px 11px rgba(18,9,24,.11);
  --sh-4:0 8px 20px rgba(18,9,24,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   NANO · IRIDIUM — gunmetal · iridescent lime · molten copper
   ───────────────────────────────────────────────────────────────────── */
[data-palette="nano-iridium"] {
  --teal-200:#ECFAC0; --teal-300:#DBF488; --teal-400:#C6EC4A; --teal-500:#AEDC1A; --teal-600:#8AB011; --teal-700:#65800C;
  --gold-200:#F6D8BE; --gold-300:#ECB78C; --gold-400:#E0945C; --gold-500:#D2773A; --gold-600:#A85A2A;
  --spring-200:rgba(52,211,153,.18); --spring-300:#6EE7B7; --spring-400:#34D399; --spring-500:#10B981; --spring-600:#059669;
  --navy-950:#08090A; --navy-900:#0D0F11; --navy-850:#121518; --navy-800:#181C20; --navy-700:#22272D; --navy-600:#30373F; --navy-500:#4C555F;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(174,220,26,.16); --accent-ink:#16210A; --accent-2:var(--gold-500);
  --on-accent:#16210A; --on-accent-2:#2A1206;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#EFF2F0; --fg-2:#BDC4C2; --fg-3:#7F8884; --fg-mute:#515A56; --fg-on-accent:#16210A;
  --line:rgba(220,230,210,.10); --line-2:rgba(220,230,210,.05); --line-strong:rgba(220,230,210,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#F0564E; --info:#9AA8B4;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(174,220,26,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(210,119,58,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="nano-iridium"][data-theme="light"], .light[data-palette="nano-iridium"] {
  --bg:#F2F4EF; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#E5E8DF;
  --fg:#0D0F11; --fg-2:#2F342C; --fg-3:#5E6356; --fg-mute:#939885; --fg-on-accent:#FFFFFF;
  --line:rgba(13,15,17,.10); --line-2:rgba(13,15,17,.05); --line-strong:rgba(13,15,17,.18);
  --accent-soft:rgba(174,220,26,.16); --accent-ink:#16210A;
  --sh-1:0 1px 2px rgba(13,15,17,.06);
  --sh-2:0 2px 5px rgba(13,15,17,.09);
  --sh-3:0 4px 11px rgba(13,15,17,.11);
  --sh-4:0 8px 20px rgba(13,15,17,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   CRYO · QUBIT — supercooled indigo-black · ice blue · hot magenta
   ───────────────────────────────────────────────────────────────────── */
[data-palette="cryo-qubit"] {
  --teal-200:#CCE5FF; --teal-300:#94C6FF; --teal-400:#57A6FF; --teal-500:#2E86FF; --teal-600:#1C63E0; --teal-700:#1346A8;
  --gold-200:#FBCBE8; --gold-300:#F69ED2; --gold-400:#F06FBC; --gold-500:#E6469F; --gold-600:#B6357C;
  --spring-200:rgba(45,212,191,.18); --spring-300:#7FF0DA; --spring-400:#3FE0C4; --spring-500:#14C9AC; --spring-600:#0E9F89;
  --navy-950:#05070F; --navy-900:#090C17; --navy-850:#0D111F; --navy-800:#121728; --navy-700:#1A2138; --navy-600:#262F4E; --navy-500:#3E4A73;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(46,134,255,.16); --accent-ink:#06122E; --accent-2:var(--gold-500);
  --on-accent:#FFFFFF; --on-accent-2:#2C0820;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#ECF1F8; --fg-2:#B2C0D6; --fg-3:#74859E; --fg-mute:#48566E; --fg-on-accent:#FFFFFF;
  --line:rgba(180,205,255,.10); --line-2:rgba(180,205,255,.05); --line-strong:rgba(180,205,255,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#FF5B7A; --info:#57A6FF;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(46,134,255,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(230,70,159,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="cryo-qubit"][data-theme="light"], .light[data-palette="cryo-qubit"] {
  --bg:#EEF3FA; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#E0E7F2;
  --fg:#090C17; --fg-2:#2A3650; --fg-3:#5A6680; --fg-mute:#8E9BB0; --fg-on-accent:#FFFFFF;
  --line:rgba(9,12,23,.10); --line-2:rgba(9,12,23,.05); --line-strong:rgba(9,12,23,.18);
  --accent-soft:rgba(46,134,255,.12); --accent-ink:#06122E;
  --sh-1:0 1px 2px rgba(9,12,23,.06);
  --sh-2:0 2px 5px rgba(9,12,23,.09);
  --sh-3:0 4px 11px rgba(9,12,23,.11);
  --sh-4:0 8px 20px rgba(9,12,23,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   EXO · BIOLUME — abyssal teal-black · bioluminescent aqua · ultraviolet
   ───────────────────────────────────────────────────────────────────── */
[data-palette="exo-biolume"] {
  --teal-200:#BFF6E4; --teal-300:#85ECCB; --teal-400:#48DCAE; --teal-500:#1FC994; --teal-600:#149E74; --teal-700:#0D7354;
  --gold-200:#E0D2FF; --gold-300:#C4ABFF; --gold-400:#A77FFF; --gold-500:#8D5BFF; --gold-600:#6E3FD8;
  --spring-200:rgba(94,230,140,.18); --spring-300:#9CF0B8; --spring-400:#6CE493; --spring-500:#34D36B; --spring-600:#1FA84F;
  --navy-950:#03100D; --navy-900:#061712; --navy-850:#0A1F18; --navy-800:#0E2820; --navy-700:#15372C; --navy-600:#1F4B3C; --navy-500:#356B58;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(31,201,148,.16); --accent-ink:#042118; --accent-2:var(--gold-500);
  --on-accent:#042118; --on-accent-2:#1A0A33;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#EAF5F0; --fg-2:#B2CCC2; --fg-3:#748A82; --fg-mute:#49665B; --fg-on-accent:#042118;
  --line:rgba(200,245,225,.10); --line-2:rgba(200,245,225,.05); --line-strong:rgba(200,245,225,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#FF6A6A; --info:#A77FFF;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(31,201,148,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(141,91,255,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="exo-biolume"][data-theme="light"], .light[data-palette="exo-biolume"] {
  --bg:#EDF6F1; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#DDEAE3;
  --fg:#061712; --fg-2:#26392F; --fg-3:#54695C; --fg-mute:#8AA095; --fg-on-accent:#FFFFFF;
  --line:rgba(6,23,18,.10); --line-2:rgba(6,23,18,.05); --line-strong:rgba(6,23,18,.18);
  --accent-soft:rgba(31,201,148,.14); --accent-ink:#042118;
  --sh-1:0 1px 2px rgba(6,23,18,.06);
  --sh-2:0 2px 5px rgba(6,23,18,.09);
  --sh-3:0 4px 11px rgba(6,23,18,.11);
  --sh-4:0 8px 20px rgba(6,23,18,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   SPORE · MYCO — humus brown-black · toxic spore chartreuse · biolume magenta
   ───────────────────────────────────────────────────────────────────── */
[data-palette="spore-myco"] {
  --teal-200:#F2F4B8; --teal-300:#E6EC80; --teal-400:#D6E048; --teal-500:#C2CE1C; --teal-600:#9AA414; --teal-700:#71790E;
  --gold-200:#F8CFE4; --gold-300:#F2A3CC; --gold-400:#EC75B0; --gold-500:#E24E97; --gold-600:#B43A76;
  --spring-200:rgba(74,222,128,.18); --spring-300:#86EFAC; --spring-400:#4ADE80; --spring-500:#22C55E; --spring-600:#16A34A;
  --navy-950:#0D0A06; --navy-900:#13100A; --navy-850:#1A150D; --navy-800:#211B12; --navy-700:#2D261A; --navy-600:#3E3526; --navy-500:#5F543E;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(194,206,28,.16); --accent-ink:#1A1D04; --accent-2:var(--gold-500);
  --on-accent:#1A1D04; --on-accent-2:#2C0A1E;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F3F0E6; --fg-2:#C9C3B0; --fg-3:#8C8472; --fg-mute:#5C5440; --fg-on-accent:#1A1D04;
  --line:rgba(235,225,180,.10); --line-2:rgba(235,225,180,.05); --line-strong:rgba(235,225,180,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#EF5A4A; --info:#EC75B0;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(194,206,28,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(226,78,151,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="spore-myco"][data-theme="light"], .light[data-palette="spore-myco"] {
  --bg:#F5F2E8; --bg-elev-1:#FFFDF8; --bg-elev-2:#FFFDF8; --bg-sunk:#E9E3D4;
  --fg:#13100A; --fg-2:#34302A; --fg-3:#63594A; --fg-mute:#978D78; --fg-on-accent:#FFFFFF;
  --line:rgba(19,16,10,.10); --line-2:rgba(19,16,10,.05); --line-strong:rgba(19,16,10,.18);
  --accent-soft:rgba(194,206,28,.16); --accent-ink:#1A1D04;
  --sh-1:0 1px 2px rgba(19,16,10,.06);
  --sh-2:0 2px 5px rgba(19,16,10,.09);
  --sh-3:0 4px 11px rgba(19,16,10,.11);
  --sh-4:0 8px 20px rgba(19,16,10,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   XENO · VENOM — jungle blue-black · poison-dart azure · venom acid-green
   ───────────────────────────────────────────────────────────────────── */
[data-palette="xeno-venom"] {
  --teal-200:#C6E4FF; --teal-300:#8FC8FF; --teal-400:#54A8FA; --teal-500:#2C8AEE; --teal-600:#1C6AC6; --teal-700:#134B90;
  --gold-200:#E8F6B6; --gold-300:#D6EE82; --gold-400:#C2E24E; --gold-500:#A8CE26; --gold-600:#84A41A;
  --spring-200:rgba(45,212,191,.18); --spring-300:#7FF0DA; --spring-400:#3FE0C4; --spring-500:#14C9AC; --spring-600:#0E9F89;
  --navy-950:#040A0E; --navy-900:#081016; --navy-850:#0C161E; --navy-800:#101D28; --navy-700:#172838; --navy-600:#21384E; --navy-500:#385473;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(44,138,238,.16); --accent-ink:#03121F; --accent-2:var(--gold-500);
  --on-accent:#03121F; --on-accent-2:#1A2104;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#EAF2F8; --fg-2:#B2C4D4; --fg-3:#74879C; --fg-mute:#48586C; --fg-on-accent:#03121F;
  --line:rgba(180,205,235,.10); --line-2:rgba(180,205,235,.05); --line-strong:rgba(180,205,235,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#FF5B5B; --info:#54A8FA;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(44,138,238,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(168,206,38,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="xeno-venom"][data-theme="light"], .light[data-palette="xeno-venom"] {
  --bg:#EEF3F8; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#E0E8F0;
  --fg:#081016; --fg-2:#28323E; --fg-3:#586678; --fg-mute:#8C9AAC; --fg-on-accent:#FFFFFF;
  --line:rgba(8,16,22,.10); --line-2:rgba(8,16,22,.05); --line-strong:rgba(8,16,22,.18);
  --accent-soft:rgba(44,138,238,.12); --accent-ink:#03121F;
  --sh-1:0 1px 2px rgba(8,16,22,.06);
  --sh-2:0 2px 5px rgba(8,16,22,.09);
  --sh-3:0 4px 11px rgba(8,16,22,.11);
  --sh-4:0 8px 20px rgba(8,16,22,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────────
   ORBITAL · AURORA — deep-space navy · aurora green · aurora magenta
   ───────────────────────────────────────────────────────────────────── */
[data-palette="orbital-aurora"] {
  --teal-200:#BDF6DE; --teal-300:#80ECC2; --teal-400:#43DCA2; --teal-500:#1AC885; --teal-600:#119C68; --teal-700:#0B724B;
  --gold-200:#F6CFEC; --gold-300:#EFA3DA; --gold-400:#E775C4; --gold-500:#D94FAC; --gold-600:#AC3C87;
  --spring-200:rgba(80,240,200,.18); --spring-300:#86F2D2; --spring-400:#52E6B6; --spring-500:#22D399; --spring-600:#16A877;
  --navy-950:#040611; --navy-900:#080B19; --navy-850:#0C1022; --navy-800:#11162D; --navy-700:#191F3E; --navy-600:#252D54; --navy-500:#3D497C;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(26,200,133,.16); --accent-ink:#03211A; --accent-2:var(--gold-500);
  --on-accent:#03211A; --on-accent-2:#2A0A20;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#EBF1F6; --fg-2:#B2C2D2; --fg-3:#74879D; --fg-mute:#48576E; --fg-on-accent:#03211A;
  --line:rgba(190,210,235,.10); --line-2:rgba(190,210,235,.05); --line-strong:rgba(190,210,235,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#FF5B7A; --info:#5BA8E8;
  --sh-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.22);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.26);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.3);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.34);
  --sh-accent:0 0 0 1px rgba(26,200,133,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(217,79,172,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="orbital-aurora"][data-theme="light"], .light[data-palette="orbital-aurora"] {
  --bg:#EEF2F8; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#DFE6F0;
  --fg:#080B19; --fg-2:#28324A; --fg-3:#586480; --fg-mute:#8C97AE; --fg-on-accent:#FFFFFF;
  --line:rgba(8,11,25,.10); --line-2:rgba(8,11,25,.05); --line-strong:rgba(8,11,25,.18);
  --accent-soft:rgba(26,200,133,.14); --accent-ink:#03211A;
  --sh-1:0 1px 2px rgba(8,11,25,.06);
  --sh-2:0 2px 5px rgba(8,11,25,.09);
  --sh-3:0 4px 11px rgba(8,11,25,.11);
  --sh-4:0 8px 20px rgba(8,11,25,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* =======================================================================
   2e · RESTORED PALETTES (colours back; shape language stays removed)
   ======================================================================= */
/* ─────────────────────────────────────────────────────────────────
   NATURE · CLAY — warm sand-charcoal · terracotta primary · sage secondary   (shape language intentionally NOT assigned — clean defaults)
   ───────────────────────────────────────────────────────────────── */
[data-palette="nature-clay"] {
  --teal-200:#F3CBB0; --teal-300:#E8A985; --teal-400:#DA8659; --teal-500:#C86A3C; --teal-600:#A2532C; --teal-700:#743A1F;
  --gold-200:#DDE7C2; --gold-300:#C3D49A; --gold-400:#A6BE72; --gold-500:#8AA556; --gold-600:#6B8240;
  --spring-200:rgba(120,200,120,.18); --spring-300:#A7E08C; --spring-400:#7FD167; --spring-500:#5DB94C; --spring-600:#3F9436;
  --navy-950:#0C0907; --navy-900:#13100C; --navy-850:#1A1611; --navy-800:#211C16; --navy-700:#2D261D; --navy-600:#3E3528; --navy-500:#5F5440;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(200,106,60,.16); --accent-ink:#2A1206; --accent-2:var(--gold-500);
  --on-accent:#2A1206; --on-accent-2:#14210A;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F4EFE6; --fg-2:#CFC4B2; --fg-3:#978A74; --fg-mute:#645840; --fg-on-accent:#2A1206;
  --line:rgba(225,210,180,.10); --line-2:rgba(225,210,180,.05); --line-strong:rgba(225,210,180,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#E0524A; --info:#74A9C7;
  --sh-1:0 0 0 1px rgba(255,255,255,.04);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.4);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.46);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.5);
  --sh-accent:0 0 0 1px rgba(200,106,60,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(138,165,86,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="nature-clay"][data-theme="light"], .light[data-palette="nature-clay"] {
  --bg:#F6F1E8; --bg-elev-1:#FFFDF8; --bg-elev-2:#FFFDF8; --bg-sunk:#EAE2D3;
  --fg:#19130C; --fg-2:#3C3326; --fg-3:#6A6150; --fg-mute:#9A9180; --fg-on-accent:#FFFFFF;
  --line:rgba(25,19,12,.10); --line-2:rgba(25,19,12,.05); --line-strong:rgba(25,19,12,.18);
  --accent-soft:rgba(200,106,60,.14); --accent-ink:#2A1206;
  --sh-1:0 1px 2px rgba(25,19,12,.06);
  --sh-2:0 2px 5px rgba(25,19,12,.09);
  --sh-3:0 4px 11px rgba(25,19,12,.11);
  --sh-4:0 8px 20px rgba(25,19,12,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────
   STELLAR · NEBULA — plum-violet nebula · coral-pink primary · stellar cyan   (shape language intentionally NOT assigned — clean defaults)
   ───────────────────────────────────────────────────────────────── */
[data-palette="stellar-nebula"] {
  --teal-200:#FFD2DC; --teal-300:#FFA6B8; --teal-400:#FF7A95; --teal-500:#F95277; --teal-600:#D03A5C; --teal-700:#9C2A44;
  --gold-200:#BFF1FB; --gold-300:#82E2F4; --gold-400:#3FCFEC; --gold-500:#16B4D8; --gold-600:#0E8FAE;
  --spring-200:rgba(52,211,153,.18); --spring-300:#6EE7B7; --spring-400:#34D399; --spring-500:#10B981; --spring-600:#059669;
  --navy-950:#0C0613; --navy-900:#130A1D; --navy-850:#1A0F26; --navy-800:#221530; --navy-700:#2F1E42; --navy-600:#412B5A; --navy-500:#634383;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(249,82,119,.16); --accent-ink:#2C0712; --accent-2:var(--gold-500);
  --on-accent:#2C0712; --on-accent-2:#04222A;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F4EEF6; --fg-2:#C8BAD2; --fg-3:#8B7C9C; --fg-mute:#5B4D6B; --fg-on-accent:#2C0712;
  --line:rgba(230,215,240,.10); --line-2:rgba(230,215,240,.05); --line-strong:rgba(230,215,240,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#FF5B5B; --info:#3FCFEC;
  --sh-1:0 0 0 1px rgba(255,255,255,.04);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.4);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.46);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.5);
  --sh-accent:0 0 0 1px rgba(249,82,119,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(22,180,216,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="stellar-nebula"][data-theme="light"], .light[data-palette="stellar-nebula"] {
  --bg:#F7EFF6; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#ECE0EC;
  --fg:#130A1D; --fg-2:#352A40; --fg-3:#62566F; --fg-mute:#988CA2; --fg-on-accent:#FFFFFF;
  --line:rgba(19,10,29,.10); --line-2:rgba(19,10,29,.05); --line-strong:rgba(19,10,29,.18);
  --accent-soft:rgba(249,82,119,.12); --accent-ink:#2C0712;
  --sh-1:0 1px 2px rgba(19,10,29,.06);
  --sh-2:0 2px 5px rgba(19,10,29,.09);
  --sh-3:0 4px 11px rgba(19,10,29,.11);
  --sh-4:0 8px 20px rgba(19,10,29,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────────────────
   ZERO-G · LUMEN — warm orbital charcoal · rose-gold peach · cosmic violet   (shape language intentionally NOT assigned — clean defaults)
   ───────────────────────────────────────────────────────────────── */
[data-palette="zero-g-lumen"] {
  --teal-200:#FBE0CF; --teal-300:#F4C3A4; --teal-400:#EBA178; --teal-500:#E0865A; --teal-600:#BC6940; --teal-700:#8C4D2D;
  --gold-200:#DCD4FF; --gold-300:#BEB0FF; --gold-400:#9E89FA; --gold-500:#8268EE; --gold-600:#634CC4;
  --spring-200:rgba(52,211,153,.18); --spring-300:#6EE7B7; --spring-400:#34D399; --spring-500:#10B981; --spring-600:#059669;
  --navy-950:#0C0A0E; --navy-900:#131015; --navy-850:#1A151D; --navy-800:#221C26; --navy-700:#2F2734; --navy-600:#41364A; --navy-500:#645571;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(224,134,90,.16); --accent-ink:#2A1206; --accent-2:var(--gold-500);
  --on-accent:#2A1206; --on-accent-2:#160A33;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F3EFF2; --fg-2:#C8BFC8; --fg-3:#8B8290; --fg-mute:#5A5263; --fg-on-accent:#2A1206;
  --line:rgba(230,220,235,.10); --line-2:rgba(230,220,235,.05); --line-strong:rgba(230,220,235,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#E0584A; --info:#9E89FA;
  --sh-1:0 0 0 1px rgba(255,255,255,.04);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.4);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.46);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.5);
  --sh-accent:0 0 0 1px rgba(224,134,90,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(130,104,238,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="zero-g-lumen"][data-theme="light"], .light[data-palette="zero-g-lumen"] {
  --bg:#F6F1F3; --bg-elev-1:#FFFDFB; --bg-elev-2:#FFFDFB; --bg-sunk:#EAE2E6;
  --fg:#131015; --fg-2:#332C38; --fg-3:#62586A; --fg-mute:#988C9C; --fg-on-accent:#FFFFFF;
  --line:rgba(19,16,21,.10); --line-2:rgba(19,16,21,.05); --line-strong:rgba(19,16,21,.18);
  --accent-soft:rgba(224,134,90,.14); --accent-ink:#2A1206;
  --sh-1:0 1px 2px rgba(19,16,21,.06);
  --sh-2:0 2px 5px rgba(19,16,21,.09);
  --sh-3:0 4px 11px rgba(19,16,21,.11);
  --sh-4:0 8px 20px rgba(19,16,21,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* =======================================================================
   2d · EXPORT-EXCLUSIVE PALETTES — Regalia · Lagoon · Ember (bold, premium)
   ======================================================================= */
/* ─────────────────────────────────────────────────────
   REGALIA — obsidian black · imperial gold · royal amethyst  (ultra-luxury)    [EXPORT-EXCLUSIVE]
   ──────────────────────────────────────────────────── */
[data-palette="regalia"] {
  --teal-200:#F6E7B8; --teal-300:#EFD482; --teal-400:#E7BE4C; --teal-500:#D9A21E; --teal-600:#B07F12; --teal-700:#80590A;
  --gold-200:#E3CBF5; --gold-300:#CFA3EC; --gold-400:#B97AE0; --gold-500:#9F4FD2; --gold-600:#7E37A8;
  --spring-200:rgba(52,211,153,.18); --spring-300:#6EE7B7; --spring-400:#34D399; --spring-500:#10B981; --spring-600:#059669;
  --navy-950:#070506; --navy-900:#0D0A0C; --navy-850:#120E11; --navy-800:#181318; --navy-700:#221A22; --navy-600:#2F2430; --navy-500:#4A3A4C;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(217,162,30,.16); --accent-ink:#241A02; --accent-2:var(--gold-500);
  --on-accent:#241A02; --on-accent-2:#220A33;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F5EFE2; --fg-2:#CFC4B0; --fg-3:#928876; --fg-mute:#5E5648; --fg-on-accent:#241A02;
  --line:rgba(240,225,180,.10); --line-2:rgba(240,225,180,.05); --line-strong:rgba(240,225,180,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#E0524A; --info:#B97AE0;
  --sh-1:0 0 0 1px rgba(255,255,255,.04);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.4);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.46);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.5);
  --sh-accent:0 0 0 1px rgba(217,162,30,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(159,79,210,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="regalia"][data-theme="light"], .light[data-palette="regalia"] {
  --bg:#F7F3E9; --bg-elev-1:#FFFDF6; --bg-elev-2:#FFFDF6; --bg-sunk:#ECE4D2;
  --fg:#0D0A0C; --fg-2:#332C2A; --fg-3:#62584E; --fg-mute:#988C7C; --fg-on-accent:#FFFFFF;
  --line:rgba(13,10,12,.10); --line-2:rgba(13,10,12,.05); --line-strong:rgba(13,10,12,.18);
  --accent-soft:rgba(217,162,30,.16); --accent-ink:#241A02;
  --sh-1:0 1px 2px rgba(13,10,12,.06);
  --sh-2:0 2px 5px rgba(13,10,12,.09);
  --sh-3:0 4px 11px rgba(13,10,12,.11);
  --sh-4:0 8px 20px rgba(13,10,12,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────
   LAGOON — deep teal-black · electric aqua · coral  (resort water)    [EXPORT-EXCLUSIVE]
   ──────────────────────────────────────────────────── */
[data-palette="lagoon"] {
  --teal-200:#B4F1EC; --teal-300:#79E4DC; --teal-400:#3FD3C9; --teal-500:#16BCB1; --teal-600:#0E928A; --teal-700:#0A6A64;
  --gold-200:#FFD7C9; --gold-300:#FFB09A; --gold-400:#FF876B; --gold-500:#F65F40; --gold-600:#C8462C;
  --spring-200:rgba(52,211,153,.18); --spring-300:#6EE7B7; --spring-400:#34D399; --spring-500:#10B981; --spring-600:#059669;
  --navy-950:#04100F; --navy-900:#071815; --navy-850:#0B201D; --navy-800:#0F2926; --navy-700:#163733; --navy-600:#204B45; --navy-500:#356B63;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(22,188,177,.16); --accent-ink:#03211E; --accent-2:var(--gold-500);
  --on-accent:#03211E; --on-accent-2:#2A0C04;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#EAF6F4; --fg-2:#B2CCC8; --fg-3:#74908B; --fg-mute:#496862; --fg-on-accent:#03211E;
  --line:rgba(200,245,238,.10); --line-2:rgba(200,245,238,.05); --line-strong:rgba(200,245,238,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#FF6A6A; --info:#FF876B;
  --sh-1:0 0 0 1px rgba(255,255,255,.04);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.4);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.46);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.5);
  --sh-accent:0 0 0 1px rgba(22,188,177,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(246,95,64,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="lagoon"][data-theme="light"], .light[data-palette="lagoon"] {
  --bg:#EDF6F4; --bg-elev-1:#FFFFFF; --bg-elev-2:#FFFFFF; --bg-sunk:#DCEAE7;
  --fg:#071815; --fg-2:#263935; --fg-3:#54695F; --fg-mute:#8AA09A; --fg-on-accent:#FFFFFF;
  --line:rgba(7,24,21,.10); --line-2:rgba(7,24,21,.05); --line-strong:rgba(7,24,21,.18);
  --accent-soft:rgba(22,188,177,.14); --accent-ink:#03211E;
  --sh-1:0 1px 2px rgba(7,24,21,.06);
  --sh-2:0 2px 5px rgba(7,24,21,.09);
  --sh-3:0 4px 11px rgba(7,24,21,.11);
  --sh-4:0 8px 20px rgba(7,24,21,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ─────────────────────────────────────────────────────
   EMBER — volcanic charcoal · molten amber · ember red  (forge / heat)    [EXPORT-EXCLUSIVE]
   ──────────────────────────────────────────────────── */
[data-palette="ember"] {
  --teal-200:#FCE0B0; --teal-300:#F7C475; --teal-400:#F0A23F; --teal-500:#E5841A; --teal-600:#B56410; --teal-700:#83480B;
  --gold-200:#FFC9C0; --gold-300:#FF9D90; --gold-400:#FB6F5E; --gold-500:#EE4636; --gold-600:#BC3326;
  --spring-200:rgba(120,200,120,.18); --spring-300:#A7E08C; --spring-400:#7FD167; --spring-500:#5DB94C; --spring-600:#3F9436;
  --navy-950:#0C0807; --navy-900:#13100D; --navy-850:#1A1411; --navy-800:#211915; --navy-700:#2D211B; --navy-600:#3F2D24; --navy-500:#5F463A;
  --accent:var(--teal-500); --accent-hover:var(--teal-400); --accent-press:var(--teal-600);
  --accent-soft:rgba(229,132,26,.16); --accent-ink:#241204; --accent-2:var(--gold-500);
  --on-accent:#241204; --on-accent-2:#2A0A06;
  --bg:var(--navy-900); --bg-elev-1:var(--navy-800); --bg-elev-2:var(--navy-700); --bg-sunk:var(--navy-850);
  --fg:#F4EFE8; --fg-2:#CDC2B2; --fg-3:#8E8474; --fg-mute:#5C5446; --fg-on-accent:#241204;
  --line:rgba(250,210,160,.10); --line-2:rgba(250,210,160,.05); --line-strong:rgba(250,210,160,.18);
  --success:var(--spring-500); --warning:var(--gold-500); --danger:#FB6F5E; --info:#F0A23F;
  --sh-1:0 0 0 1px rgba(255,255,255,.04);
  --sh-2:0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.4);
  --sh-3:0 0 0 1px rgba(255,255,255,.08), 0 4px 11px rgba(0,0,0,.46);
  --sh-4:0 0 0 1px rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.5);
  --sh-accent:0 0 0 1px rgba(229,132,26,.3), 0 2px 5px rgba(0,0,0,.24);
  --sh-accent-2:0 0 0 1px rgba(238,70,54,.26), 0 2px 5px rgba(0,0,0,.22);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06); --sh-torch:var(--sh-accent); --sh-gold:var(--sh-accent-2);
}
[data-palette="ember"][data-theme="light"], .light[data-palette="ember"] {
  --bg:#F6F1E9; --bg-elev-1:#FFFDF8; --bg-elev-2:#FFFDF8; --bg-sunk:#EAE1D2;
  --fg:#13100D; --fg-2:#332C26; --fg-3:#62584C; --fg-mute:#988C7A; --fg-on-accent:#FFFFFF;
  --line:rgba(19,16,13,.10); --line-2:rgba(19,16,13,.05); --line-strong:rgba(19,16,13,.18);
  --accent-soft:rgba(229,132,26,.16); --accent-ink:#241204;
  --sh-1:0 1px 2px rgba(19,16,13,.06);
  --sh-2:0 2px 5px rgba(19,16,13,.09);
  --sh-3:0 4px 11px rgba(19,16,13,.11);
  --sh-4:0 8px 20px rgba(19,16,13,.13);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);
}
/* =======================================================================
   2c · SHAPE LANGUAGES  (per-palette, by topic)
   Ten distinct form languages — each palette adopts the one matching its
   subject, mixed and matched within families. Components read --r-* and
   --ff-display, so switching palette re-shapes AND re-letters the whole UI.

     CAPSULE  fully-pill, luxe ............... Space Grotesk
     BUBBLE   very round, playful ........... Sora
     SOFT     friendly medium ............... Sora
     PETAL    round-top, flat-bottom ........ Space Grotesk
     SLAB     small uniform, solid .......... Syne
     FACETED  sharp 4px, crisp .............. Chakra Petch
     SQUARE   near-zero, brutalist .......... Chakra Petch
     CRYSTAL  gem facet (sharp/round asym) .. Chakra Petch
     NOTCH    diagonal-cut corners .......... Syne
     ORGANIC  asymmetric leaf/blob .......... Schibsted Grotesk
   ======================================================================= */
/* ── CAPSULE · hospitality + orbital ── */
[data-palette="hospitality"], [data-palette="orbital-aurora"] {
  --r-btn:9999px; /* @kind radius */ --r-tile:9999px; /* @kind radius */ --r-input:9999px; /* @kind radius */ --r-chip:9999px; /* @kind radius */
  --r-card:22px; /* @kind radius */ --r-hero:26px; /* @kind radius */ --r-sheet:30px; /* @kind radius */
  --ff-display:"Space Grotesk","Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; /* @kind font */
}
/* ── BUBBLE · plum + spore ── */
[data-palette="hospitality-plum"], [data-palette="spore-myco"] {
  --r-btn:19px; /* @kind radius */ --r-tile:17px; /* @kind radius */ --r-input:16px; /* @kind radius */ --r-chip:9999px; /* @kind radius */
  --r-card:26px; /* @kind radius */ --r-hero:30px; /* @kind radius */ --r-sheet:34px; /* @kind radius */
  --ff-display:"Sora","Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; /* @kind font */
}
/* ── SOFT · marble + nature-ocean ── */
[data-palette="hospitality-marble"], [data-palette="nature-ocean"] {
  --r-btn:12px; /* @kind radius */ --r-tile:12px; /* @kind radius */ --r-input:11px; /* @kind radius */ --r-chip:9999px; /* @kind radius */
  --r-card:18px; /* @kind radius */ --r-hero:20px; /* @kind radius */ --r-sheet:24px; /* @kind radius */
  --ff-display:"Sora","Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; /* @kind font */
}
/* ── PETAL · coral ── */
[data-palette="hospitality-coral"] {
  --r-btn:16px 16px 6px 6px; /* @kind radius */ --r-tile:14px 14px 5px 5px; /* @kind radius */ --r-input:13px 13px 5px 5px; /* @kind radius */ --r-chip:9999px; /* @kind radius */
  --r-card:20px 20px 8px 8px; /* @kind radius */ --r-hero:24px 24px 8px 8px; /* @kind radius */ --r-sheet:26px 26px 10px 10px; /* @kind radius */
  --ff-display:"Space Grotesk","Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; /* @kind font */
}
/* ── SLAB · walnut + tech-lime ── */
[data-palette="hospitality-walnut"], [data-palette="tech-lime"] {
  --r-btn:7px; /* @kind radius */ --r-tile:6px; /* @kind radius */ --r-input:6px; /* @kind radius */ --r-chip:8px; /* @kind radius */
  --r-card:9px; /* @kind radius */ --r-hero:10px; /* @kind radius */ --r-sheet:12px; /* @kind radius */
  --ff-display:"Syne","Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; /* @kind font */
}
/* ── FACETED · tech + nano ── */
[data-palette="tech"], [data-palette="nano-iridium"] {
  --r-btn:4px; /* @kind radius */ --r-tile:4px; /* @kind radius */ --r-input:4px; /* @kind radius */ --r-chip:4px; /* @kind radius */
  --r-card:6px; /* @kind radius */ --r-hero:7px; /* @kind radius */ --r-sheet:8px; /* @kind radius */
  --ff-display:"Chakra Petch","Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; /* @kind font */
}
/* ── SQUARE · cryo (brutalist) ── */
[data-palette="cryo-qubit"] {
  --r-btn:2px; /* @kind radius */ --r-tile:2px; /* @kind radius */ --r-input:2px; /* @kind radius */ --r-chip:3px; /* @kind radius */
  --r-card:3px; /* @kind radius */ --r-hero:4px; /* @kind radius */ --r-sheet:4px; /* @kind radius */
  --ff-display:"Chakra Petch","Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; /* @kind font */
}
/* ── CRYSTAL · tech-violet + quantum (gem facet) ── */
[data-palette="tech-violet"], [data-palette="quantum-plasma"] {
  --r-btn:2px 13px 2px 13px; /* @kind radius */ --r-tile:2px 11px 2px 11px; /* @kind radius */ --r-input:2px 11px 2px 11px; /* @kind radius */ --r-chip:2px 13px 2px 13px; /* @kind radius */
  --r-card:3px 18px 3px 18px; /* @kind radius */ --r-hero:4px 22px 4px 22px; /* @kind radius */ --r-sheet:4px 24px 4px 24px; /* @kind radius */
  --ff-display:"Chakra Petch","Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; /* @kind font */
}
/* ── NOTCH · xeno (diagonal cut) ── */
[data-palette="xeno-venom"] {
  --r-btn:13px 4px 13px 4px; /* @kind radius */ --r-tile:11px 3px 11px 3px; /* @kind radius */ --r-input:11px 3px 11px 3px; /* @kind radius */ --r-chip:13px 4px 13px 4px; /* @kind radius */
  --r-card:16px 5px 16px 5px; /* @kind radius */ --r-hero:18px 6px 18px 6px; /* @kind radius */ --r-sheet:20px 6px 20px 6px; /* @kind radius */
  --ff-display:"Syne","Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; /* @kind font */
}
/* ── ORGANIC · nature + exo-biolume (leaf/blob) ── */
[data-palette="nature"], [data-palette="exo-biolume"] {
  --r-btn:16px 16px 16px 5px; /* @kind radius */ --r-tile:16px 5px 16px 5px; /* @kind radius */ --r-input:14px 14px 14px 5px; /* @kind radius */ --r-chip:9999px; /* @kind radius */
  --r-card:22px 7px 22px 7px; /* @kind radius */ --r-hero:26px 9px 26px 9px; /* @kind radius */ --r-sheet:28px 9px 28px 9px; /* @kind radius */
  --ff-display:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; /* @kind font */
}
/* =======================================================================

/* =======================================================================
   3 · SEMANTIC TYPE STYLES  (palette-independent)
   ======================================================================= */
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;
  -moz-osx-font-smoothing: grayscale;
  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-display); 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-display); 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-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-family: var(--ff-display); 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-display); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--accent-2);
}
.caption { font-size: var(--fs-caption); color: var(--fg-3); }
/* Native-app type scale (use sparingly; numerals → mono) */
.t-caption  { font-size: .75rem;  line-height: 1.4;  font-weight: 400; }
.t-secondary{ font-size: .875rem; line-height: 1.45; font-weight: 400; }
.t-body     { font-size: 1rem;    line-height: 1.5;  font-weight: 400; }
.t-emphasis { font-size: 1rem;    line-height: 1.5;  font-weight: 600; }
.t-section  { font-size: 1.125rem;line-height: 1.35; font-weight: 600; }
.t-title    { font-size: 1.375rem;line-height: 1.25; font-weight: 700; }
.t-hero     { font-size: 1.75rem; line-height: 1.2;  font-weight: 700; }
.mono, code, kbd, samp, .t-num {
  font-family: var(--ff-mono); font-size: var(--fs-mono);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
code { background: var(--bg-sunk); padding: 2px 6px; border-radius: var(--r-xs); }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
/* =======================================================================
   4 · SURFACE UTILITIES  (palette-agnostic — reskin via tokens)
   NOTE: motion is owned by GSAP (see ui_kits/<kit>/shared-ui.jsx). These classes
   are STATIC surfaces only — GSAP drives the movement at runtime. There are
   intentionally NO CSS @keyframes / transitions; GSAP is the single engine.
   ======================================================================= */
/* Accent hairline at the top edge of a device / window.
   The gradient is static here; SeaHorizon tweens its background-position via GSAP. */
.imp-horizon {
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 39; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%,
    color-mix(in srgb, var(--accent-2) 0%, transparent) 8%,
    color-mix(in srgb, var(--accent-2) 55%, transparent) 30%,
    color-mix(in srgb, var(--accent) 85%, transparent) 50%,
    color-mix(in srgb, var(--accent-2) 55%, transparent) 70%,
    transparent 92%);
  background-size: 200% 100%; background-position: 0% 0%;
}
.imp-horizon::after { content: ''; position: absolute; inset: 0; background: inherit; filter: blur(6px); opacity: .7; }
/* Hairline section rule */
.imp-rule { height: 1px; margin: 18px 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent); }
/* Reduced-motion: GSAP checks this flag and skips loops/entrances at runtime. */
: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;
}