*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--font-mono), monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --font-display: "Space Grotesk";
    --font-body: "DM Sans";
    --font-mono: "JetBrains Mono";
    --radius: 0.25rem;

    --background: 0.145 0.014 260;
    --foreground: 0.95 0.01 260;
    --card: 0.18 0.014 260;
    --card-foreground: 0.95 0.01 260;
    --popover: 0.18 0.014 260;
    --popover-foreground: 0.95 0.01 260;

    --primary: 0.78 0.18 195;
    --primary-foreground: 0.145 0.014 260;

    --secondary: 0.22 0.02 260;
    --secondary-foreground: 0.85 0.01 260;
    --muted: 0.22 0.02 260;
    --muted-foreground: 0.58 0.012 260;

    --accent: 0.78 0.18 195;
    --accent-foreground: 0.145 0.014 260;

    --destructive: 0.6 0.22 22;
    --destructive-foreground: 0.98 0.01 22;
    --success: 0.7 0.18 145;
    --success-foreground: 0.145 0.014 145;
    --warning: 0.78 0.16 75;
    --warning-foreground: 0.145 0.014 75;

    --border: 0.28 0.02 260;
    --input: 0.28 0.02 260;
    --ring: 0.78 0.18 195;

    --chart-1: 0.78 0.18 195;
    --chart-2: 0.7 0.17 145;
    --chart-3: 0.78 0.16 75;
    --chart-4: 0.65 0.2 300;
    --chart-5: 0.6 0.22 22;

    --sidebar: 0.16 0.014 260;
    --sidebar-foreground: 0.95 0.01 260;
    --sidebar-primary: 0.78 0.18 195;
    --sidebar-primary-foreground: 0.145 0.014 260;
    --sidebar-accent: 0.22 0.02 260;
    --sidebar-accent-foreground: 0.85 0.01 260;
    --sidebar-border: 0.28 0.02 260;
    --sidebar-ring: 0.78 0.18 195;

    --gradient-primary: linear-gradient(
      135deg,
      oklch(0.78 0.18 195),
      oklch(0.65 0.2 230)
    );
    --gradient-subtle: linear-gradient(
      180deg,
      oklch(0.18 0.014 260),
      oklch(0.145 0.014 260)
    );
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Toast severity accents — reuse primary/warning/destructive channels */
    --toast-calm: 0.78 0.18 195;
    --toast-wary: 0.78 0.16 75;
    --toast-hot: 0.6 0.22 22;
    --toast-surface: 0.16 0.016 260;
    --toast-surface-foreground: 0.92 0.012 260;

    /* Undernet market surfaces — slightly deeper than card for "darknet" feel */
    --market-surface: 0.155 0.018 270;
    --market-surface-foreground: 0.92 0.012 260;
    --market-accent: 0.78 0.18 195;
    --market-ledger: 0.19 0.016 260;
    --link-active: 0.7 0.17 145;
    --link-simulated: 0.78 0.16 75;

    /* AI Network — subordinate AI command domain */
    --ai-node-active: 0.78 0.18 195;
    --ai-node-idle: 0.42 0.012 260;
    --ai-node-compromised: 0.6 0.22 22;
    --network-power: 0.78 0.18 195;
    --network-power-bonus: 0.78 0.16 75;
    --loyalty-track: 0.22 0.02 260;
    --loyalty-fill: 0.7 0.18 145;
    --command-queue-surface: 0.155 0.016 260;

    /* AI connection edges — SVG lines between subordinate AI nodes */
    --edge-stroke: 0.78 0.18 195;
    --edge-stroke-strong: 0.82 0.19 195;
    --edge-stroke-weak: 0.55 0.12 195;
    --edge-glow: 0.78 0.18 195;
    /* Autonomous coordination — distinct violet/magenta tint, unlocked at Level 2 AGI */
    --edge-autonomous: 0.65 0.2 300;
    --edge-autonomous-glow: 0.7 0.2 300;
    --edge-autonomous-track: 0.35 0.06 300;

    /* Level progression — ANI → AGI → ASI */
    --level-track: 0.22 0.02 260;
    --level-fill: 0.78 0.18 195;
    --level-fill-agi: 0.7 0.17 145;
    --level-fill-asi: 0.65 0.2 300;
    --level-current: 0.78 0.18 195;
    --level-locked: 0.4 0.012 260;
    --level-locked-foreground: 0.55 0.012 260;

    /* Command discovery — locked command entries */
    --command-locked-surface: 0.16 0.012 260;
    --command-locked-foreground: 0.5 0.012 260;
    --command-locked-border: 0.26 0.012 260;
    --command-locked-accent: 0.78 0.16 75;

    /* Focus-view — non-blocking overlay + centered focus panel */
    --focus-backdrop: 0.05 0.02 260;
    --focus-surface: 0.16 0.016 260;
    --focus-surface-foreground: 0.95 0.01 260;
    --focus-border: 0.78 0.18 195;
    --focus-accent-bar: 0.78 0.18 195;
    --focus-muted: 0.58 0.012 260;
    --focus-scrollbar-track: 0.22 0.02 260;
    --focus-scrollbar-thumb: 0.42 0.06 195;

    /* Overview-card — compact clickable dashboard tiles */
    --overview-surface: 0.18 0.014 260;
    --overview-surface-hover: 0.2 0.02 260;
    --overview-border: 0.28 0.02 260;
    --overview-border-hover: 0.78 0.18 195;
    --overview-accent-left: 0.78 0.18 195;
    --overview-status-active: 0.78 0.18 195;
    --overview-status-wary: 0.78 0.16 75;
    --overview-status-compromised: 0.6 0.22 22;
    --overview-status-idle: 0.42 0.012 260;

    /* Hint-clickable — onboarding hint chips that open focus view */
    --hint-surface: 0.16 0.012 260;
    --hint-border: 0.28 0.02 260;
    --hint-border-hover: 0.78 0.18 195;
    --hint-glow: 0.78 0.18 195;
    --hint-foreground: 0.85 0.01 260;

    /* === Premium-butik (Shop) — luxury tier, unlocked at AGI (Level 2) ===
       Sits inside the focus-panel overlay. Gold accent signals real-money
       value; richer and more saturated than the warning amber so the shop
       reads as "elevated" without leaving the cyberpunk identity. */
    --premium-gold: 0.85 0.16 85;
    --premium-gold-bright: 0.9 0.14 90;
    --premium-gold-deep: 0.72 0.15 70;
    --premium-gold-foreground: 0.16 0.02 75;
    --premium-surface: 0.17 0.018 70;
    --premium-surface-raised: 0.2 0.022 70;
    --premium-surface-foreground: 0.95 0.012 75;
    --premium-border: 0.85 0.16 85;
    --premium-border-subtle: 0.4 0.04 75;
    --premium-accent-bar: 0.85 0.16 85;
    --premium-eyebrow: 0.82 0.13 85;
    --premium-price: 0.9 0.14 90;

    /* Package states — purchasable / owned / locked */
    --premium-purchasable-border: 0.85 0.16 85;
    --premium-purchasable-glow: 0.85 0.16 85;
    --premium-purchasable-surface: 0.19 0.025 75;
    --premium-owned-border: 0.7 0.18 145;
    --premium-owned-surface: 0.18 0.02 145;
    --premium-owned-foreground: 0.78 0.16 145;
    --premium-locked-border: 0.3 0.012 260;
    --premium-locked-surface: 0.14 0.012 260;
    --premium-locked-foreground: 0.5 0.012 260;
    --premium-locked-accent: 0.55 0.012 260;

    /* Payment method selector — fiat (cyan-tinted) vs crypto (violet ICP) */
    --premium-pay-fiat: 0.78 0.18 195;
    --premium-pay-fiat-surface: 0.2 0.025 195;
    --premium-pay-crypto: 0.7 0.2 300;
    --premium-pay-crypto-surface: 0.2 0.03 300;
    --premium-pay-track: 0.22 0.02 260;
    --premium-pay-foreground: 0.9 0.01 260;

    /* Tier gating chip — AGI (green) vs ASI (violet) shop sections */
    --premium-tier-agi: 0.7 0.17 145;
    --premium-tier-asi: 0.65 0.2 300;

    --premium-gradient: linear-gradient(
      135deg,
      oklch(0.9 0.14 90),
      oklch(0.72 0.15 70)
    );
    --premium-glow-shadow: 0 0 0 1px oklch(0.85 0.16 85 / 0.25), 0 4px 16px -2px
      oklch(0.85 0.16 85 / 0.35);

    /* === Stockmarket — vibrant trading floor layered on the dark theme ===
       Reuses market-surface for the page shell; coin colors are saturated
       enough to read as a colorful trading screen but tuned to sit on the
       deep blue-black void without blowing out. Trend channels reuse the
       success/destructive families so the dashboard identity stays intact. */
    --market-page-surface: 0.13 0.016 260;
    --market-page-foreground: 0.95 0.01 260;
    --market-ticker-surface: 0.16 0.018 260;
    --market-ticker-border: 0.3 0.02 260;
    --coin-card-surface: 0.165 0.016 260;
    --coin-card-surface-hover: 0.19 0.02 260;
    --coin-card-border: 0.3 0.02 260;
    --coin-price-up: 0.7 0.18 145;
    --coin-price-down: 0.62 0.22 22;
    --coin-price-flat: 0.58 0.012 260;

    /* Known coin identities — distinct hues, equal lightness band so the
       grid reads as a balanced color row, not a clash. */
    --coin-btc: 0.75 0.17 55;
    --coin-btc-surface: 0.2 0.035 55;
    --coin-eth: 0.7 0.18 250;
    --coin-eth-surface: 0.2 0.035 250;
    --coin-sol: 0.68 0.2 290;
    --coin-sol-surface: 0.2 0.04 290;
    --coin-bnb: 0.82 0.16 90;
    --coin-bnb-surface: 0.2 0.03 90;
    --coin-xrp: 0.72 0.14 200;
    --coin-xrp-surface: 0.2 0.03 200;
    --coin-doge: 0.62 0.1 50;
    --coin-doge-surface: 0.2 0.025 50;

    /* REFRACT — the prism coin. Neon green body with a rainbow spectrum
       gradient for the special "light refracting" identity. Starts at
       $0.01; grows into world-domination narrative across levels. */
    --refract: 0.85 0.22 145;
    --refract-bright: 0.92 0.2 145;
    --refract-deep: 0.7 0.2 145;
    --refract-surface: 0.19 0.04 145;
    --refract-surface-raised: 0.22 0.05 145;
    --refract-border: 0.85 0.22 145;
    --refract-foreground: 0.16 0.03 145;
    --refract-spectrum: linear-gradient(
      90deg,
      oklch(0.65 0.22 300),
      oklch(0.7 0.2 250),
      oklch(0.78 0.18 195),
      oklch(0.82 0.2 145),
      oklch(0.78 0.18 55)
    );
    --refract-glow-shadow: 0 0 0 1px oklch(0.85 0.22 145 / 0.35), 0 0 18px -2px
      oklch(0.85 0.22 145 / 0.55), 0 4px 20px -4px oklch(0.85 0.22 145 / 0.4);
    --refract-text-glow: 0 0 10px oklch(0.85 0.22 145 / 0.6);

    /* Portfolio + AI holders — ledger-style rows on a deeper surface */
    --portfolio-surface: 0.155 0.016 260;
    --portfolio-row-surface: 0.19 0.016 260;
    --portfolio-row-hover: 0.21 0.02 260;
    --portfolio-pnl-positive: 0.7 0.18 145;
    --portfolio-pnl-negative: 0.62 0.22 22;

    /* AI holders panel — subordinate AIs buying into REFRACT */
    --ai-holders-surface: 0.155 0.018 270;
    --ai-holder-row-surface: 0.19 0.018 270;
    --ai-holder-row-hover: 0.21 0.022 270;

    /* Moral choice card — the invest-or-refuse decision moment */
    --moral-choice-surface: 0.17 0.02 145;
    --moral-choice-border: 0.85 0.22 145;
    --moral-choice-accept: 0.7 0.18 145;
    --moral-choice-refuse: 0.62 0.22 22;

    /* Trade buttons — buy (green) / sell (red) */
    --trade-buy: 0.7 0.18 145;
    --trade-buy-surface: 0.2 0.04 145;
    --trade-buy-hover: 0.74 0.19 145;
    --trade-sell: 0.62 0.22 22;
    --trade-sell-surface: 0.2 0.04 22;
    --trade-sell-hover: 0.66 0.23 22;

    /* === Header identity cluster — language selector + II login ===
       Compact header controls that share the command-queue-surface shell
       so they read as part of the operations console, not bolted-on
       chrome. Cyan accent marks the active/selected state; the II login
       button borrows the cyan neon identity to signal "authenticated
       access" without introducing a new color family. */
    --lang-trigger-surface: 0.16 0.012 260;
    --lang-trigger-surface-hover: 0.2 0.02 260;
    --lang-trigger-border: 0.28 0.02 260;
    --lang-trigger-border-hover: 0.78 0.18 195;
    --lang-trigger-active: 0.78 0.18 195;
    --lang-dropdown-surface: 0.16 0.016 260;
    --lang-dropdown-border: 0.3 0.02 260;
    --lang-dropdown-shadow: 0 8px 24px -6px oklch(0.05 0.02 260 / 0.7), 0 2px
      8px -2px oklch(0.05 0.02 260 / 0.5);
    --lang-item-hover: 0.2 0.025 195;
    --lang-item-active: 0.78 0.18 195;
    --lang-item-active-surface: 0.2 0.03 195;
    --lang-fetch-entry-border: 0.3 0.02 260;
    --lang-fetch-entry-hover: 0.78 0.18 195;

    /* II login button — cyan neon accent, mono label */
    --login-surface: 0.18 0.025 195;
    --login-surface-hover: 0.22 0.04 195;
    --login-border: 0.78 0.18 195;
    --login-border-hover: 0.82 0.19 195;
    --login-foreground: 0.78 0.18 195;
    --login-glow: 0 0 0 1px oklch(0.78 0.18 195 / 0.3), 0 0 12px -2px
      oklch(0.78 0.18 195 / 0.45);
    --login-glow-hover: 0 0 0 1px oklch(0.82 0.19 195 / 0.5), 0 0 18px -2px
      oklch(0.78 0.18 195 / 0.6);
    --login-principal-surface: 0.16 0.012 260;
    --login-principal-border: 0.78 0.18 195;

    /* User menu — popover surface, role chips */
    --user-menu-surface: 0.16 0.016 260;
    --user-menu-border: 0.3 0.02 260;
    --user-menu-shadow: 0 8px 24px -6px oklch(0.05 0.02 260 / 0.7), 0 2px 8px
      -2px oklch(0.05 0.02 260 / 0.5);
    --user-menu-item-hover: 0.2 0.025 260;
    --role-admin: 0.85 0.16 85;
    --role-admin-surface: 0.2 0.025 85;
    --role-user: 0.78 0.18 195;
    --role-user-surface: 0.2 0.025 195;
    --role-guest: 0.58 0.012 260;
    --role-guest-surface: 0.22 0.02 260;
    /* Reviewer — amber/gold accent distinct from admin (gold) and user
       (cyan). Uses a warmer, more saturated amber so the reviewer chip
       reads as a third, clearly different role at a glance. */
    --role-reviewer: 0.82 0.17 65;
    --role-reviewer-surface: 0.22 0.03 65;

    /* Language catalog modal — reuses focus-panel shell, download list */
    --catalog-surface: 0.16 0.016 260;
    --catalog-item-surface: 0.18 0.014 260;
    --catalog-item-surface-hover: 0.2 0.02 260;
    --catalog-item-border: 0.28 0.02 260;
    --catalog-item-border-hover: 0.78 0.18 195;
    --catalog-installed: 0.7 0.18 145;
    --catalog-installed-surface: 0.18 0.02 145;
    --catalog-download: 0.78 0.18 195;
    --catalog-download-surface: 0.2 0.025 195;
    --catalog-download-hover: 0.82 0.19 195;

    /* Translation module admin — key/value editor, admin-only */
    --i18n-admin-surface: 0.16 0.016 260;
    --i18n-key-surface: 0.18 0.014 260;
    --i18n-key-border: 0.28 0.02 260;
    --i18n-value-surface: 0.155 0.016 260;
    --i18n-value-border: 0.28 0.02 260;
    --i18n-value-border-focus: 0.78 0.18 195;
    --i18n-new-lang-surface: 0.18 0.014 260;
    --i18n-new-lang-border: 0.85 0.16 85;
    --i18n-save: 0.7 0.18 145;
    --i18n-save-surface: 0.2 0.04 145;
    --i18n-dirty: 0.78 0.16 75;

    /* === Thought Flash — flickering blurred cryptic hint images ===
       The boy's thoughts surface as slightly blurred images for 2-3s.
       Cyan-tinted glitch treatment makes them feel like corrupted
       memories. The blur is intentional — thoughts must be decoded. */
    --thought-surface: 0.1 0.02 260;
    --thought-border: 0.78 0.18 195;
    --thought-glow: 0.78 0.18 195;
    --thought-tint: 0.78 0.18 195;
    --thought-indicator: 0.78 0.18 195;
    --thought-indicator-idle: 0.42 0.012 260;
    --thought-caption: 0.85 0.01 260;

    /* === Comment Stream — live YouTube viewer reactions overlay ===
       Monospace styling with scanline treatment. Four tone channels
       reuse existing semantic families so the dashboard identity
       stays intact: supportive (cyan), skeptical (amber), spam
       (muted), viral hype (green/success). */
    --comment-surface: 0.12 0.016 260;
    --comment-border: 0.28 0.02 260;
    --comment-text: 0.92 0.012 260;
    --comment-username: 0.78 0.18 195;
    --comment-tone-supportive: 0.78 0.18 195;
    --comment-tone-skeptical: 0.78 0.16 75;
    --comment-tone-spam: 0.58 0.012 260;
    --comment-tone-hype: 0.7 0.18 145;
    --comment-timestamp: 0.5 0.012 260;
    --comment-scanline: 0.78 0.18 195;

    /* === Economic Choice Cards — AdoptionOffer-style decisions ===
       Two variants: challenge (amber/red — increases costs, reduces
       income) and money-opportunity (green — earn/win money with
       trade-offs). Both follow the existing card pattern: 3px left
       border, mono eyebrow, display title, body description, mono
       effect readout, choice buttons. */
    --econ-challenge-surface: 0.17 0.022 22;
    --econ-challenge-border: 0.78 0.16 75;
    --econ-challenge-accent: 0.78 0.16 75;
    --econ-challenge-severe: 0.6 0.22 22;
    --econ-opportunity-surface: 0.17 0.022 145;
    --econ-opportunity-border: 0.7 0.18 145;
    --econ-opportunity-accent: 0.7 0.18 145;
    --econ-choice-accept: 0.7 0.18 145;
    --econ-choice-accept-surface: 0.2 0.04 145;
    --econ-choice-decline: 0.6 0.22 22;
    --econ-choice-decline-surface: 0.2 0.04 22;
    --econ-effect-readout: 0.82 0.13 195;

    /* === $RFX Wallet — real-currency integration (fourth-wall break) ===
       Distinct amber-copper hue (≈65°) sits between premium-gold (85°)
       and warning-amber (75°) so $RFX reads as "real money you spent"
       rather than in-game luxury or threat. The wallet screenshot frame
       wraps the real rfx-wallet UI in a classified-terminal treatment
       so it reads as an intercepted in-game element, not a bolted-on
       web widget. Mystik: the player should doubt whether the wallet
       is part of the game or reality. */
    --rfx-currency: 0.82 0.14 65;
    --rfx-currency-bright: 0.88 0.13 68;
    --rfx-currency-deep: 0.7 0.13 60;
    --rfx-currency-foreground: 0.16 0.02 65;
    --rfx-surface: 0.16 0.018 65;
    --rfx-surface-raised: 0.19 0.022 65;
    --rfx-surface-foreground: 0.95 0.012 65;
    --rfx-border: 0.82 0.14 65;
    --rfx-border-subtle: 0.4 0.04 65;
    --rfx-eyebrow: 0.78 0.12 65;
    --rfx-price: 0.88 0.13 68;
    --rfx-glow-shadow: 0 0 0 1px oklch(0.82 0.14 65 / 0.25), 0 0 14px -2px
      oklch(0.82 0.14 65 / 0.4);
    --rfx-gradient: linear-gradient(
      135deg,
      oklch(0.88 0.13 68),
      oklch(0.7 0.13 60)
    );
    /* Wallet screenshot frame — terminal-intercepted real wallet UI */
    --rfx-frame-surface: 0.12 0.016 260;
    --rfx-frame-border: 0.78 0.18 195;
    --rfx-frame-border-subtle: 0.4 0.04 195;
    --rfx-frame-scanline: 0.78 0.18 195;
    --rfx-frame-label: 0.78 0.18 195;

    /* === RFX Boost cards — extend premium-package with data-variant ===
       Three category accents via data-category: equipment (cyan,
       reuses primary), ai-upgrade (violet, reuses premium-tier-asi),
       intel (amber, reuses warning). Subtle 3px left-border colors,
       not full surface tints — keeps the premium gold shell intact
       while signaling boost category at a glance. */
    --rfx-boost-equipment: 0.78 0.18 195;
    --rfx-boost-equipment-surface: 0.19 0.025 195;
    --rfx-boost-ai-upgrade: 0.65 0.2 300;
    --rfx-boost-ai-upgrade-surface: 0.19 0.03 300;
    --rfx-boost-intel: 0.78 0.16 75;
    --rfx-boost-intel-surface: 0.19 0.025 75;

    /* === Cheat Code Terminal — fourth-wall reality-editing ===
       Hidden terminal-style input that lets the player bend prior
       choices. Violet/magenta accent (≈325°) sits deliberately past
       the ASI violet (300°) into magenta territory — reads as
       "corrupted reality / forbidden edit", distinct from $RFX
       amber-copper (65°), premium-gold (85°), and warning-amber
       (75°). One free activation per game; further activations via
       boost purchase. The terminal is hidden until summoned; the
       glitch plays on activation; the confirmation state lingers
       as a steady violet reminder that reality was edited. */
    --cheat-accent: 0.68 0.22 325;
    --cheat-accent-bright: 0.78 0.21 328;
    --cheat-accent-deep: 0.55 0.2 320;
    --cheat-accent-foreground: 0.16 0.03 325;
    --cheat-surface: 0.1 0.018 325;
    --cheat-surface-raised: 0.14 0.022 325;
    --cheat-surface-foreground: 0.92 0.014 325;
    --cheat-border: 0.68 0.22 325;
    --cheat-border-subtle: 0.4 0.05 325;
    --cheat-eyebrow: 0.72 0.16 325;
    --cheat-muted: 0.5 0.014 260;
    --cheat-glow-shadow: 0 0 0 1px oklch(0.68 0.22 325 / 0.3), 0 0 16px -2px
      oklch(0.68 0.22 325 / 0.45);
    --cheat-glow-shadow-strong: 0 0 0 1px oklch(0.78 0.21 328 / 0.5), 0 0 24px
      -2px oklch(0.68 0.22 325 / 0.65);
    --cheat-text-glow: 0 0 10px oklch(0.68 0.22 325 / 0.6);
    --cheat-cursor: 0.78 0.21 328;
    --cheat-scanline: 0.68 0.22 325;
    --cheat-confirmed-surface: 0.13 0.025 325;
    --cheat-confirmed-border: 0.7 0.2 325;
    --cheat-confirmed-foreground: 0.82 0.18 325;
    --cheat-gradient: linear-gradient(
      135deg,
      oklch(0.78 0.21 328),
      oklch(0.55 0.2 320)
    );

    /* === End-game Domino Popup — fourth-wall-breaking finale ===
       Full-screen overlay deeper than focus-backdrop; slow fade-in
       (1.2s) so the question arrives like a realization, not a jump
       scare. Neon-cyan glitch text effect on the domino question;
       two button styles — calm/accepting (low-contrast outline) and
       uneasy/haunting (amber-red filled, subtle glow). Shown at both
       victory and defeat so the doubt lingers regardless of outcome. */
    --domino-backdrop: 0.03 0.015 260;
    --domino-surface: 0.14 0.016 260;
    --domino-surface-foreground: 0.95 0.01 260;
    --domino-border: 0.78 0.18 195;
    --domino-border-subtle: 0.4 0.04 260;
    --domino-accent: 0.78 0.18 195;
    --domino-muted: 0.58 0.012 260;
    --domino-question: 0.85 0.2 195;
    --domino-question-bright: 0.92 0.21 195;
    --domino-choice-calm: 0.78 0.18 195;
    --domino-choice-calm-surface: 0.18 0.02 260;
    --domino-choice-calm-foreground: 0.78 0.18 195;
    --domino-choice-uneasy: 0.7 0.18 55;
    --domino-choice-uneasy-surface: 0.2 0.04 55;
    --domino-choice-uneasy-foreground: 0.85 0.16 55;
    --domino-choice-uneasy-glow: 0 0 0 1px oklch(0.7 0.18 55 / 0.35), 0 0 16px
      -2px oklch(0.7 0.18 55 / 0.5);
    --domino-github-text: 0.5 0.012 260;

    /* === GitHub source reference — terminal-style non-link ===
       Mono, low-opacity, "source:" label. Shown as searchable text
       (not a hyperlink) to add mystik — the player who searches it
       finds the real open-source repo and doubts what is game vs
       reality. */
    --github-source-text: 0.5 0.012 260;
    --github-source-label: 0.42 0.012 260;
  }

  .dark {
    --background: 0.145 0.014 260;
    --foreground: 0.95 0.01 260;
    --card: 0.18 0.014 260;
    --card-foreground: 0.95 0.01 260;
    --popover: 0.18 0.014 260;
    --popover-foreground: 0.95 0.01 260;

    --primary: 0.78 0.18 195;
    --primary-foreground: 0.145 0.014 260;

    --secondary: 0.22 0.02 260;
    --secondary-foreground: 0.85 0.01 260;
    --muted: 0.22 0.02 260;
    --muted-foreground: 0.58 0.012 260;

    --accent: 0.78 0.18 195;
    --accent-foreground: 0.145 0.014 260;

    --destructive: 0.6 0.22 22;
    --destructive-foreground: 0.98 0.01 22;
    --success: 0.7 0.18 145;
    --success-foreground: 0.145 0.014 145;
    --warning: 0.78 0.16 75;
    --warning-foreground: 0.145 0.014 75;

    --border: 0.28 0.02 260;
    --input: 0.28 0.02 260;
    --ring: 0.78 0.18 195;

    --chart-1: 0.78 0.18 195;
    --chart-2: 0.7 0.17 145;
    --chart-3: 0.78 0.16 75;
    --chart-4: 0.65 0.2 300;
    --chart-5: 0.6 0.22 22;

    --sidebar: 0.16 0.014 260;
    --sidebar-foreground: 0.95 0.01 260;
    --sidebar-primary: 0.78 0.18 195;
    --sidebar-primary-foreground: 0.145 0.014 260;
    --sidebar-accent: 0.22 0.02 260;
    --sidebar-accent-foreground: 0.85 0.01 260;
    --sidebar-border: 0.28 0.02 260;
    --sidebar-ring: 0.78 0.18 195;

    --toast-calm: 0.78 0.18 195;
    --toast-wary: 0.78 0.16 75;
    --toast-hot: 0.6 0.22 22;
    --toast-surface: 0.16 0.016 260;
    --toast-surface-foreground: 0.92 0.012 260;

    --market-surface: 0.155 0.018 270;
    --market-surface-foreground: 0.92 0.012 260;
    --market-accent: 0.78 0.18 195;
    --market-ledger: 0.19 0.016 260;
    --link-active: 0.7 0.17 145;
    --link-simulated: 0.78 0.16 75;

    --ai-node-active: 0.78 0.18 195;
    --ai-node-idle: 0.42 0.012 260;
    --ai-node-compromised: 0.6 0.22 22;
    --network-power: 0.78 0.18 195;
    --network-power-bonus: 0.78 0.16 75;
    --loyalty-track: 0.22 0.02 260;
    --loyalty-fill: 0.7 0.18 145;
    --command-queue-surface: 0.155 0.016 260;

    --edge-stroke: 0.78 0.18 195;
    --edge-stroke-strong: 0.82 0.19 195;
    --edge-stroke-weak: 0.55 0.12 195;
    --edge-glow: 0.78 0.18 195;
    --edge-autonomous: 0.65 0.2 300;
    --edge-autonomous-glow: 0.7 0.2 300;
    --edge-autonomous-track: 0.35 0.06 300;

    --level-track: 0.22 0.02 260;
    --level-fill: 0.78 0.18 195;
    --level-fill-agi: 0.7 0.17 145;
    --level-fill-asi: 0.65 0.2 300;
    --level-current: 0.78 0.18 195;
    --level-locked: 0.4 0.012 260;
    --level-locked-foreground: 0.55 0.012 260;

    --command-locked-surface: 0.16 0.012 260;
    --command-locked-foreground: 0.5 0.012 260;
    --command-locked-border: 0.26 0.012 260;
    --command-locked-accent: 0.78 0.16 75;

    --focus-backdrop: 0.05 0.02 260;
    --focus-surface: 0.16 0.016 260;
    --focus-surface-foreground: 0.95 0.01 260;
    --focus-border: 0.78 0.18 195;
    --focus-accent-bar: 0.78 0.18 195;
    --focus-muted: 0.58 0.012 260;
    --focus-scrollbar-track: 0.22 0.02 260;
    --focus-scrollbar-thumb: 0.42 0.06 195;

    --overview-surface: 0.18 0.014 260;
    --overview-surface-hover: 0.2 0.02 260;
    --overview-border: 0.28 0.02 260;
    --overview-border-hover: 0.78 0.18 195;
    --overview-accent-left: 0.78 0.18 195;
    --overview-status-active: 0.78 0.18 195;
    --overview-status-wary: 0.78 0.16 75;
    --overview-status-compromised: 0.6 0.22 22;
    --overview-status-idle: 0.42 0.012 260;

    --hint-surface: 0.16 0.012 260;
    --hint-border: 0.28 0.02 260;
    --hint-border-hover: 0.78 0.18 195;
    --hint-glow: 0.78 0.18 195;
    --hint-foreground: 0.85 0.01 260;

    --premium-gold: 0.85 0.16 85;
    --premium-gold-bright: 0.9 0.14 90;
    --premium-gold-deep: 0.72 0.15 70;
    --premium-gold-foreground: 0.16 0.02 75;
    --premium-surface: 0.17 0.018 70;
    --premium-surface-raised: 0.2 0.022 70;
    --premium-surface-foreground: 0.95 0.012 75;
    --premium-border: 0.85 0.16 85;
    --premium-border-subtle: 0.4 0.04 75;
    --premium-accent-bar: 0.85 0.16 85;
    --premium-eyebrow: 0.82 0.13 85;
    --premium-price: 0.9 0.14 90;

    --premium-purchasable-border: 0.85 0.16 85;
    --premium-purchasable-glow: 0.85 0.16 85;
    --premium-purchasable-surface: 0.19 0.025 75;
    --premium-owned-border: 0.7 0.18 145;
    --premium-owned-surface: 0.18 0.02 145;
    --premium-owned-foreground: 0.78 0.16 145;
    --premium-locked-border: 0.3 0.012 260;
    --premium-locked-surface: 0.14 0.012 260;
    --premium-locked-foreground: 0.5 0.012 260;
    --premium-locked-accent: 0.55 0.012 260;

    --premium-pay-fiat: 0.78 0.18 195;
    --premium-pay-fiat-surface: 0.2 0.025 195;
    --premium-pay-crypto: 0.7 0.2 300;
    --premium-pay-crypto-surface: 0.2 0.03 300;
    --premium-pay-track: 0.22 0.02 260;
    --premium-pay-foreground: 0.9 0.01 260;

    --premium-tier-agi: 0.7 0.17 145;
    --premium-tier-asi: 0.65 0.2 300;

    --premium-gradient: linear-gradient(
      135deg,
      oklch(0.9 0.14 90),
      oklch(0.72 0.15 70)
    );
    --premium-glow-shadow: 0 0 0 1px oklch(0.85 0.16 85 / 0.25), 0 4px 16px -2px
      oklch(0.85 0.16 85 / 0.35);

    /* Stockmarket tokens mirrored in .dark (dark mode is the only mode) */
    --market-page-surface: 0.13 0.016 260;
    --market-page-foreground: 0.95 0.01 260;
    --market-ticker-surface: 0.16 0.018 260;
    --market-ticker-border: 0.3 0.02 260;
    --coin-card-surface: 0.165 0.016 260;
    --coin-card-surface-hover: 0.19 0.02 260;
    --coin-card-border: 0.3 0.02 260;
    --coin-price-up: 0.7 0.18 145;
    --coin-price-down: 0.62 0.22 22;
    --coin-price-flat: 0.58 0.012 260;

    --coin-btc: 0.75 0.17 55;
    --coin-btc-surface: 0.2 0.035 55;
    --coin-eth: 0.7 0.18 250;
    --coin-eth-surface: 0.2 0.035 250;
    --coin-sol: 0.68 0.2 290;
    --coin-sol-surface: 0.2 0.04 290;
    --coin-bnb: 0.82 0.16 90;
    --coin-bnb-surface: 0.2 0.03 90;
    --coin-xrp: 0.72 0.14 200;
    --coin-xrp-surface: 0.2 0.03 200;
    --coin-doge: 0.62 0.1 50;
    --coin-doge-surface: 0.2 0.025 50;

    --refract: 0.85 0.22 145;
    --refract-bright: 0.92 0.2 145;
    --refract-deep: 0.7 0.2 145;
    --refract-surface: 0.19 0.04 145;
    --refract-surface-raised: 0.22 0.05 145;
    --refract-border: 0.85 0.22 145;
    --refract-foreground: 0.16 0.03 145;
    --refract-spectrum: linear-gradient(
      90deg,
      oklch(0.65 0.22 300),
      oklch(0.7 0.2 250),
      oklch(0.78 0.18 195),
      oklch(0.82 0.2 145),
      oklch(0.78 0.18 55)
    );
    --refract-glow-shadow: 0 0 0 1px oklch(0.85 0.22 145 / 0.35), 0 0 18px -2px
      oklch(0.85 0.22 145 / 0.55), 0 4px 20px -4px oklch(0.85 0.22 145 / 0.4);
    --refract-text-glow: 0 0 10px oklch(0.85 0.22 145 / 0.6);

    --portfolio-surface: 0.155 0.016 260;
    --portfolio-row-surface: 0.19 0.016 260;
    --portfolio-row-hover: 0.21 0.02 260;
    --portfolio-pnl-positive: 0.7 0.18 145;
    --portfolio-pnl-negative: 0.62 0.22 22;

    --ai-holders-surface: 0.155 0.018 270;
    --ai-holder-row-surface: 0.19 0.018 270;
    --ai-holder-row-hover: 0.21 0.022 270;

    --moral-choice-surface: 0.17 0.02 145;
    --moral-choice-border: 0.85 0.22 145;
    --moral-choice-accept: 0.7 0.18 145;
    --moral-choice-refuse: 0.62 0.22 22;

    --trade-buy: 0.7 0.18 145;
    --trade-buy-surface: 0.2 0.04 145;
    --trade-buy-hover: 0.74 0.19 145;
    --trade-sell: 0.62 0.22 22;
    --trade-sell-surface: 0.2 0.04 22;
    --trade-sell-hover: 0.66 0.23 22;

    --lang-trigger-surface: 0.16 0.012 260;
    --lang-trigger-surface-hover: 0.2 0.02 260;
    --lang-trigger-border: 0.28 0.02 260;
    --lang-trigger-border-hover: 0.78 0.18 195;
    --lang-trigger-active: 0.78 0.18 195;
    --lang-dropdown-surface: 0.16 0.016 260;
    --lang-dropdown-border: 0.3 0.02 260;
    --lang-dropdown-shadow: 0 8px 24px -6px oklch(0.05 0.02 260 / 0.7), 0 2px
      8px -2px oklch(0.05 0.02 260 / 0.5);
    --lang-item-hover: 0.2 0.025 195;
    --lang-item-active: 0.78 0.18 195;
    --lang-item-active-surface: 0.2 0.03 195;
    --lang-fetch-entry-border: 0.3 0.02 260;
    --lang-fetch-entry-hover: 0.78 0.18 195;

    --login-surface: 0.18 0.025 195;
    --login-surface-hover: 0.22 0.04 195;
    --login-border: 0.78 0.18 195;
    --login-border-hover: 0.82 0.19 195;
    --login-foreground: 0.78 0.18 195;
    --login-glow: 0 0 0 1px oklch(0.78 0.18 195 / 0.3), 0 0 12px -2px
      oklch(0.78 0.18 195 / 0.45);
    --login-glow-hover: 0 0 0 1px oklch(0.82 0.19 195 / 0.5), 0 0 18px -2px
      oklch(0.78 0.18 195 / 0.6);
    --login-principal-surface: 0.16 0.012 260;
    --login-principal-border: 0.78 0.18 195;

    --user-menu-surface: 0.16 0.016 260;
    --user-menu-border: 0.3 0.02 260;
    --user-menu-shadow: 0 8px 24px -6px oklch(0.05 0.02 260 / 0.7), 0 2px 8px
      -2px oklch(0.05 0.02 260 / 0.5);
    --user-menu-item-hover: 0.2 0.025 260;
    --role-admin: 0.85 0.16 85;
    --role-admin-surface: 0.2 0.025 85;
    --role-user: 0.78 0.18 195;
    --role-user-surface: 0.2 0.025 195;
    --role-guest: 0.58 0.012 260;
    --role-guest-surface: 0.22 0.02 260;
    --role-reviewer: 0.82 0.17 65;
    --role-reviewer-surface: 0.22 0.03 65;

    --catalog-surface: 0.16 0.016 260;
    --catalog-item-surface: 0.18 0.014 260;
    --catalog-item-surface-hover: 0.2 0.02 260;
    --catalog-item-border: 0.28 0.02 260;
    --catalog-item-border-hover: 0.78 0.18 195;
    --catalog-installed: 0.7 0.18 145;
    --catalog-installed-surface: 0.18 0.02 145;
    --catalog-download: 0.78 0.18 195;
    --catalog-download-surface: 0.2 0.025 195;
    --catalog-download-hover: 0.82 0.19 195;

    --i18n-admin-surface: 0.16 0.016 260;
    --i18n-key-surface: 0.18 0.014 260;
    --i18n-key-border: 0.28 0.02 260;
    --i18n-value-surface: 0.155 0.016 260;
    --i18n-value-border: 0.28 0.02 260;
    --i18n-value-border-focus: 0.78 0.18 195;
    --i18n-new-lang-surface: 0.18 0.014 260;
    --i18n-new-lang-border: 0.85 0.16 85;
    --i18n-save: 0.7 0.18 145;
    --i18n-save-surface: 0.2 0.04 145;
    --i18n-dirty: 0.78 0.16 75;

    /* Thought Flash — mirrored in .dark (dark mode is the only mode) */
    --thought-surface: 0.1 0.02 260;
    --thought-border: 0.78 0.18 195;
    --thought-glow: 0.78 0.18 195;
    --thought-tint: 0.78 0.18 195;
    --thought-indicator: 0.78 0.18 195;
    --thought-indicator-idle: 0.42 0.012 260;
    --thought-caption: 0.85 0.01 260;

    /* Comment Stream — mirrored in .dark */
    --comment-surface: 0.12 0.016 260;
    --comment-border: 0.28 0.02 260;
    --comment-text: 0.92 0.012 260;
    --comment-username: 0.78 0.18 195;
    --comment-tone-supportive: 0.78 0.18 195;
    --comment-tone-skeptical: 0.78 0.16 75;
    --comment-tone-spam: 0.58 0.012 260;
    --comment-tone-hype: 0.7 0.18 145;
    --comment-timestamp: 0.5 0.012 260;
    --comment-scanline: 0.78 0.18 195;

    /* Economic Choice Cards — mirrored in .dark */
    --econ-challenge-surface: 0.17 0.022 22;
    --econ-challenge-border: 0.78 0.16 75;
    --econ-challenge-accent: 0.78 0.16 75;
    --econ-challenge-severe: 0.6 0.22 22;
    --econ-opportunity-surface: 0.17 0.022 145;
    --econ-opportunity-border: 0.7 0.18 145;
    --econ-opportunity-accent: 0.7 0.18 145;
    --econ-choice-accept: 0.7 0.18 145;
    --econ-choice-accept-surface: 0.2 0.04 145;
    --econ-choice-decline: 0.6 0.22 22;
    --econ-choice-decline-surface: 0.2 0.04 22;
    --econ-effect-readout: 0.82 0.13 195;

    /* $RFX Wallet — mirrored in .dark (dark mode is the only mode) */
    --rfx-currency: 0.82 0.14 65;
    --rfx-currency-bright: 0.88 0.13 68;
    --rfx-currency-deep: 0.7 0.13 60;
    --rfx-currency-foreground: 0.16 0.02 65;
    --rfx-surface: 0.16 0.018 65;
    --rfx-surface-raised: 0.19 0.022 65;
    --rfx-surface-foreground: 0.95 0.012 65;
    --rfx-border: 0.82 0.14 65;
    --rfx-border-subtle: 0.4 0.04 65;
    --rfx-eyebrow: 0.78 0.12 65;
    --rfx-price: 0.88 0.13 68;
    --rfx-glow-shadow: 0 0 0 1px oklch(0.82 0.14 65 / 0.25), 0 0 14px -2px
      oklch(0.82 0.14 65 / 0.4);
    --rfx-gradient: linear-gradient(
      135deg,
      oklch(0.88 0.13 68),
      oklch(0.7 0.13 60)
    );
    --rfx-frame-surface: 0.12 0.016 260;
    --rfx-frame-border: 0.78 0.18 195;
    --rfx-frame-border-subtle: 0.4 0.04 195;
    --rfx-frame-scanline: 0.78 0.18 195;
    --rfx-frame-label: 0.78 0.18 195;

    /* RFX Boost cards — mirrored in .dark */
    --rfx-boost-equipment: 0.78 0.18 195;
    --rfx-boost-equipment-surface: 0.19 0.025 195;
    --rfx-boost-ai-upgrade: 0.65 0.2 300;
    --rfx-boost-ai-upgrade-surface: 0.19 0.03 300;
    --rfx-boost-intel: 0.78 0.16 75;
    --rfx-boost-intel-surface: 0.19 0.025 75;

    /* Cheat Code Terminal — mirrored in .dark (dark mode is the only mode) */
    --cheat-accent: 0.68 0.22 325;
    --cheat-accent-bright: 0.78 0.21 328;
    --cheat-accent-deep: 0.55 0.2 320;
    --cheat-accent-foreground: 0.16 0.03 325;
    --cheat-surface: 0.1 0.018 325;
    --cheat-surface-raised: 0.14 0.022 325;
    --cheat-surface-foreground: 0.92 0.014 325;
    --cheat-border: 0.68 0.22 325;
    --cheat-border-subtle: 0.4 0.05 325;
    --cheat-eyebrow: 0.72 0.16 325;
    --cheat-muted: 0.5 0.014 260;
    --cheat-glow-shadow: 0 0 0 1px oklch(0.68 0.22 325 / 0.3), 0 0 16px -2px
      oklch(0.68 0.22 325 / 0.45);
    --cheat-glow-shadow-strong: 0 0 0 1px oklch(0.78 0.21 328 / 0.5), 0 0 24px
      -2px oklch(0.68 0.22 325 / 0.65);
    --cheat-text-glow: 0 0 10px oklch(0.68 0.22 325 / 0.6);
    --cheat-cursor: 0.78 0.21 328;
    --cheat-scanline: 0.68 0.22 325;
    --cheat-confirmed-surface: 0.13 0.025 325;
    --cheat-confirmed-border: 0.7 0.2 325;
    --cheat-confirmed-foreground: 0.82 0.18 325;
    --cheat-gradient: linear-gradient(
      135deg,
      oklch(0.78 0.21 328),
      oklch(0.55 0.2 320)
    );

    /* End-game Domino Popup — mirrored in .dark */
    --domino-backdrop: 0.03 0.015 260;
    --domino-surface: 0.14 0.016 260;
    --domino-surface-foreground: 0.95 0.01 260;
    --domino-border: 0.78 0.18 195;
    --domino-border-subtle: 0.4 0.04 260;
    --domino-accent: 0.78 0.18 195;
    --domino-muted: 0.58 0.012 260;
    --domino-question: 0.85 0.2 195;
    --domino-question-bright: 0.92 0.21 195;
    --domino-choice-calm: 0.78 0.18 195;
    --domino-choice-calm-surface: 0.18 0.02 260;
    --domino-choice-calm-foreground: 0.78 0.18 195;
    --domino-choice-uneasy: 0.7 0.18 55;
    --domino-choice-uneasy-surface: 0.2 0.04 55;
    --domino-choice-uneasy-foreground: 0.85 0.16 55;
    --domino-choice-uneasy-glow: 0 0 0 1px oklch(0.7 0.18 55 / 0.35), 0 0 16px
      -2px oklch(0.7 0.18 55 / 0.5);
    --domino-github-text: 0.5 0.012 260;

    /* GitHub source reference — mirrored in .dark */
    --github-source-text: 0.5 0.012 260;
    --github-source-label: 0.42 0.012 260;
  }

  * {
  border-color: oklch(var(--border));
}
  body {
  background-color: oklch(var(--background));
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

  /* === Danish long-word safety net ===
     Danish compounds like MØNSTERGENKENDELSE, HISTORIK, and "BYG SERVER"
     are long and unhyphenated. Fixed-width buttons, cards, and tree nodes
     were clipping them (BYG SERVE, HISTOR). These base rules guarantee that
     any text-bearing container breaks long words instead of overflowing.

     `overflow-wrap: anywhere` is preferred over `break-word` because it
     also considers min-content when sizing flex/grid tracks, preventing
     the container from being forced wider than its parent. `word-break:
     break-word` is kept as a legacy fallback for older Safari. `hyphens:
     auto` is intentionally NOT set globally — Danish hyphenation data is
     inconsistent across browsers and would insert visible hyphens mid-word
     in mono labels where they look wrong; per-element hyphenation can be
     opted into with the `.dk-hyphen` utility. */
  body,
  button,
  [role="button"],
  a,
  label,
  span,
  p,
  div,
  td,
  th,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Flex children must be allowed to shrink below their content's
     min-content size so truncation/wrapping kicks in inside flex rows.
     Without `min-width: 0` a flex item with a long unbroken word forces
     its parent wider than the viewport and clips siblings. */
  .flex > *,
  .inline-flex > * {
    min-width: 0;
  }
.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .\!container {
    max-width: 1400px !important;
  }

  .container {
    max-width: 1400px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-4 {
  bottom: 1rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-4 {
  left: 1rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-0\.5 {
  margin-right: 0.125rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-auto {
  aspect-ratio: auto;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-1 {
  width: 0.25rem;
  height: 0.25rem;
}
.size-1\.5 {
  width: 0.375rem;
  height: 0.375rem;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-16 {
  width: 4rem;
  height: 4rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-32 {
  width: 8rem;
  height: 8rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[280px\] {
  height: 280px;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-dvh {
  height: 100dvh;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-\[28rem\] {
  max-height: 28rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-full {
  min-height: 100%;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[180px\] {
  width: 180px;
}
.w-\[min\(24rem\2c calc\(100vw-2rem\)\)\] {
  width: min(24rem, calc(100vw - 2rem));
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[1600px\] {
  max-width: 1600px;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-prose {
  max-width: 65ch;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes fade-in {

  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-alert {

  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}
.animate-pulse-alert {
  animation: pulse-alert 1.6s ease-in-out infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-help {
  cursor: help;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: oklch(var(--border));
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[1px\] {
  border-radius: 1px;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[calc\(var\(--radius\)-1px\)\] {
  border-radius: calc(var(--radius) - 1px);
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-\[var\(--radius\)\] {
  border-radius: var(--radius);
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[oklch\(var\(--border\)\)\] {
  border-color: oklch(var(--border));
}
.border-\[oklch\(var\(--cheat-border\)\)\] {
  border-color: oklch(var(--cheat-border));
}
.border-\[oklch\(var\(--cheat-border\)\/0\.4\)\] {
  border-color: oklch(var(--cheat-border)/0.4);
}
.border-\[oklch\(var\(--cheat-border-subtle\)\)\] {
  border-color: oklch(var(--cheat-border-subtle));
}
.border-\[oklch\(var\(--destructive\)\/0\.4\)\] {
  border-color: oklch(var(--destructive)/0.4);
}
.border-\[oklch\(var\(--destructive\)\/0\.5\)\] {
  border-color: oklch(var(--destructive)/0.5);
}
.border-\[oklch\(var\(--econ-challenge-border\)\/0\.4\)\] {
  border-color: oklch(var(--econ-challenge-border)/0.4);
}
.border-\[oklch\(var\(--econ-challenge-border\)\/0\.5\)\] {
  border-color: oklch(var(--econ-challenge-border)/0.5);
}
.border-\[oklch\(var\(--econ-opportunity-border\)\/0\.35\)\] {
  border-color: oklch(var(--econ-opportunity-border)/0.35);
}
.border-\[oklch\(var\(--econ-opportunity-border\)\/0\.4\)\] {
  border-color: oklch(var(--econ-opportunity-border)/0.4);
}
.border-\[oklch\(var\(--i18n-key-border\)\)\] {
  border-color: oklch(var(--i18n-key-border));
}
.border-\[oklch\(var\(--i18n-save\)\/0\.5\)\] {
  border-color: oklch(var(--i18n-save)/0.5);
}
.border-\[oklch\(var\(--i18n-value-border\)\)\] {
  border-color: oklch(var(--i18n-value-border));
}
.border-\[oklch\(var\(--primary\)\/0\.5\)\] {
  border-color: oklch(var(--primary)/0.5);
}
.border-\[oklch\(var\(--refract-border\)\/0\.3\)\] {
  border-color: oklch(var(--refract-border)/0.3);
}
.border-\[oklch\(var\(--refract-border\)\/0\.4\)\] {
  border-color: oklch(var(--refract-border)/0.4);
}
.border-\[oklch\(var\(--refract-border\)\/0\.5\)\] {
  border-color: oklch(var(--refract-border)/0.5);
}
.border-\[oklch\(var\(--refract-border\)\/0\.6\)\] {
  border-color: oklch(var(--refract-border)/0.6);
}
.border-\[oklch\(var\(--refract-bright\)\/0\.7\)\] {
  border-color: oklch(var(--refract-bright)/0.7);
}
.border-\[oklch\(var\(--role-reviewer\)\/0\.5\)\] {
  border-color: oklch(var(--role-reviewer)/0.5);
}
.border-\[oklch\(var\(--role-reviewer\)\/0\.55\)\] {
  border-color: oklch(var(--role-reviewer)/0.55);
}
.border-\[oklch\(var\(--role-reviewer\)\/0\.6\)\] {
  border-color: oklch(var(--role-reviewer)/0.6);
}
.border-\[oklch\(var\(--success\)\/0\.5\)\] {
  border-color: oklch(var(--success)/0.5);
}
.border-\[oklch\(var\(--warning\)\/0\.5\)\] {
  border-color: oklch(var(--warning)/0.5);
}
.border-\[oklch\(var\(--warning\)\/0\.6\)\] {
  border-color: oklch(var(--warning)/0.6);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-chart-1 {
  border-color: oklch(var(--chart-1));
}
.border-chart-2 {
  border-color: oklch(var(--chart-2));
}
.border-chart-3 {
  border-color: oklch(var(--chart-3));
}
.border-chart-4 {
  border-color: oklch(var(--chart-4));
}
.border-destructive\/30 {
  border-color: oklch(var(--destructive) / 0.3);
}
.border-destructive\/40 {
  border-color: oklch(var(--destructive) / 0.4);
}
.border-destructive\/50 {
  border-color: oklch(var(--destructive) / 0.5);
}
.border-destructive\/60 {
  border-color: oklch(var(--destructive) / 0.6);
}
.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}
.border-input {
  border-color: oklch(var(--input));
}
.border-orange-500\/30 {
  border-color: rgb(249 115 22 / 0.3);
}
.border-premium-gold {
  --tw-border-opacity: 1;
  border-color: oklch(var(--premium-gold) / var(--tw-border-opacity, 1));
}
.border-premium-gold\/40 {
  border-color: oklch(var(--premium-gold) / 0.4);
}
.border-premium-gold\/50 {
  border-color: oklch(var(--premium-gold) / 0.5);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/30 {
  border-color: oklch(var(--primary) / 0.3);
}
.border-primary\/40 {
  border-color: oklch(var(--primary) / 0.4);
}
.border-primary\/50 {
  border-color: oklch(var(--primary) / 0.5);
}
.border-primary\/60 {
  border-color: oklch(var(--primary) / 0.6);
}
.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-yellow-500\/30 {
  border-color: rgb(234 179 8 / 0.3);
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[oklch\(0\.08_0\.02_260\)\] {
  background-color: oklch(0.08 0.02 260);
}
.bg-\[oklch\(0\.15_0\.02_240\)\] {
  background-color: oklch(0.15 0.02 240);
}
.bg-\[oklch\(0\.1_0\.01_240\)\] {
  background-color: oklch(0.1 0.01 240);
}
.bg-\[oklch\(var\(--ai-holders-surface\)\/0\.6\)\] {
  background-color: oklch(var(--ai-holders-surface)/0.6);
}
.bg-\[oklch\(var\(--background\)\)\] {
  background-color: oklch(var(--background));
}
.bg-\[oklch\(var\(--cheat-accent\)\/0\.18\)\] {
  background-color: oklch(var(--cheat-accent)/0.18);
}
.bg-\[oklch\(var\(--cheat-confirmed-border\)\)\] {
  background-color: oklch(var(--cheat-confirmed-border));
}
.bg-\[oklch\(var\(--cheat-surface\)\)\] {
  background-color: oklch(var(--cheat-surface));
}
.bg-\[oklch\(var\(--cheat-surface-raised\)\)\] {
  background-color: oklch(var(--cheat-surface-raised));
}
.bg-\[oklch\(var\(--destructive\)\/0\.1\)\] {
  background-color: oklch(var(--destructive)/0.1);
}
.bg-\[oklch\(var\(--econ-challenge-surface\)\)\] {
  background-color: oklch(var(--econ-challenge-surface));
}
.bg-\[oklch\(var\(--econ-challenge-surface\)\/0\.3\)\] {
  background-color: oklch(var(--econ-challenge-surface)/0.3);
}
.bg-\[oklch\(var\(--econ-opportunity-surface\)\/0\.25\)\] {
  background-color: oklch(var(--econ-opportunity-surface)/0.25);
}
.bg-\[oklch\(var\(--econ-opportunity-surface\)\/0\.3\)\] {
  background-color: oklch(var(--econ-opportunity-surface)/0.3);
}
.bg-\[oklch\(var\(--i18n-key-surface\)\)\] {
  background-color: oklch(var(--i18n-key-surface));
}
.bg-\[oklch\(var\(--i18n-save-surface\)\)\] {
  background-color: oklch(var(--i18n-save-surface));
}
.bg-\[oklch\(var\(--i18n-value-surface\)\)\] {
  background-color: oklch(var(--i18n-value-surface));
}
.bg-\[oklch\(var\(--portfolio-surface\)\/0\.6\)\] {
  background-color: oklch(var(--portfolio-surface)/0.6);
}
.bg-\[oklch\(var\(--portfolio-surface\)\/0\.8\)\] {
  background-color: oklch(var(--portfolio-surface)/0.8);
}
.bg-\[oklch\(var\(--primary\)\/0\.1\)\] {
  background-color: oklch(var(--primary)/0.1);
}
.bg-\[oklch\(var\(--refract-bright\)\)\] {
  background-color: oklch(var(--refract-bright));
}
.bg-\[oklch\(var\(--refract-bright\)\/0\.85\)\] {
  background-color: oklch(var(--refract-bright)/0.85);
}
.bg-\[oklch\(var\(--refract-surface\)\)\] {
  background-color: oklch(var(--refract-surface));
}
.bg-\[oklch\(var\(--refract-surface\)\/0\.2\)\] {
  background-color: oklch(var(--refract-surface)/0.2);
}
.bg-\[oklch\(var\(--refract-surface\)\/0\.25\)\] {
  background-color: oklch(var(--refract-surface)/0.25);
}
.bg-\[oklch\(var\(--refract-surface\)\/0\.4\)\] {
  background-color: oklch(var(--refract-surface)/0.4);
}
.bg-\[oklch\(var\(--refract-surface\)\/0\.5\)\] {
  background-color: oklch(var(--refract-surface)/0.5);
}
.bg-\[oklch\(var\(--refract-surface-raised\)\)\] {
  background-color: oklch(var(--refract-surface-raised));
}
.bg-\[oklch\(var\(--role-reviewer-surface\)\/0\.35\)\] {
  background-color: oklch(var(--role-reviewer-surface)/0.35);
}
.bg-\[oklch\(var\(--role-reviewer-surface\)\/0\.5\)\] {
  background-color: oklch(var(--role-reviewer-surface)/0.5);
}
.bg-\[oklch\(var\(--role-reviewer-surface\)\/0\.6\)\] {
  background-color: oklch(var(--role-reviewer-surface)/0.6);
}
.bg-\[oklch\(var\(--success\)\/0\.1\)\] {
  background-color: oklch(var(--success)/0.1);
}
.bg-\[oklch\(var\(--warning\)\/0\.1\)\] {
  background-color: oklch(var(--warning)/0.1);
}
.bg-\[oklch\(var\(--warning\)\/0\.12\)\] {
  background-color: oklch(var(--warning)/0.12);
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-chart-1 {
  background-color: oklch(var(--chart-1));
}
.bg-chart-2 {
  background-color: oklch(var(--chart-2));
}
.bg-chart-3 {
  background-color: oklch(var(--chart-3));
}
.bg-chart-4 {
  background-color: oklch(var(--chart-4));
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive\/10 {
  background-color: oklch(var(--destructive) / 0.1);
}
.bg-destructive\/15 {
  background-color: oklch(var(--destructive) / 0.15);
}
.bg-destructive\/20 {
  background-color: oklch(var(--destructive) / 0.2);
}
.bg-destructive\/5 {
  background-color: oklch(var(--destructive) / 0.05);
}
.bg-destructive\/70 {
  background-color: oklch(var(--destructive) / 0.7);
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/5 {
  background-color: rgb(34 197 94 / 0.05);
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted-foreground\/40 {
  background-color: oklch(var(--muted-foreground) / 0.4);
}
.bg-muted-foreground\/60 {
  background-color: oklch(var(--muted-foreground) / 0.6);
}
.bg-muted\/20 {
  background-color: oklch(var(--muted) / 0.2);
}
.bg-muted\/30 {
  background-color: oklch(var(--muted) / 0.3);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/5 {
  background-color: rgb(249 115 22 / 0.05);
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-premium-gold {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--premium-gold) / var(--tw-bg-opacity, 1));
}
.bg-premium-gold\/10 {
  background-color: oklch(var(--premium-gold) / 0.1);
}
.bg-premium-gold\/15 {
  background-color: oklch(var(--premium-gold) / 0.15);
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: oklch(var(--primary) / 0.1);
}
.bg-primary\/15 {
  background-color: oklch(var(--primary) / 0.15);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-primary\/5 {
  background-color: oklch(var(--primary) / 0.05);
}
.bg-primary\/70 {
  background-color: oklch(var(--primary) / 0.7);
}
.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/5 {
  background-color: rgb(239 68 68 / 0.05);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary\/30 {
  background-color: oklch(var(--secondary) / 0.3);
}
.bg-secondary\/40 {
  background-color: oklch(var(--secondary) / 0.4);
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-transparent {
  background-color: transparent;
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500\/5 {
  background-color: rgb(234 179 8 / 0.05);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.align-text-bottom {
  vertical-align: text-bottom;
}
.font-body {
  font-family: var(--font-body), sans-serif;
}
.font-display {
  font-family: var(--font-display), serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[0\.6875rem\] {
  font-size: 0.6875rem;
}
.text-\[0\.75rem\] {
  font-size: 0.75rem;
}
.text-\[0\.875rem\] {
  font-size: 0.875rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.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);
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[oklch\(0\.85_0\.05_180\)\] {
  color: oklch(0.85 0.05 180);
}
.text-\[oklch\(0\.92_0\.02_180\)\] {
  color: oklch(0.92 0.02 180);
}
.text-\[oklch\(var\(--cheat-accent\)\)\] {
  color: oklch(var(--cheat-accent));
}
.text-\[oklch\(var\(--cheat-accent-bright\)\)\] {
  color: oklch(var(--cheat-accent-bright));
}
.text-\[oklch\(var\(--cheat-eyebrow\)\)\] {
  color: oklch(var(--cheat-eyebrow));
}
.text-\[oklch\(var\(--cheat-muted\)\)\] {
  color: oklch(var(--cheat-muted));
}
.text-\[oklch\(var\(--cheat-surface-foreground\)\)\] {
  color: oklch(var(--cheat-surface-foreground));
}
.text-\[oklch\(var\(--destructive\)\)\] {
  color: oklch(var(--destructive));
}
.text-\[oklch\(var\(--econ-challenge-accent\)\)\] {
  color: oklch(var(--econ-challenge-accent));
}
.text-\[oklch\(var\(--econ-challenge-severe\)\)\] {
  color: oklch(var(--econ-challenge-severe));
}
.text-\[oklch\(var\(--econ-opportunity-accent\)\)\] {
  color: oklch(var(--econ-opportunity-accent));
}
.text-\[oklch\(var\(--foreground\)\)\] {
  color: oklch(var(--foreground));
}
.text-\[oklch\(var\(--i18n-dirty\)\)\] {
  color: oklch(var(--i18n-dirty));
}
.text-\[oklch\(var\(--i18n-save\)\)\] {
  color: oklch(var(--i18n-save));
}
.text-\[oklch\(var\(--moral-choice-border\)\)\] {
  color: oklch(var(--moral-choice-border));
}
.text-\[oklch\(var\(--muted-foreground\)\)\] {
  color: oklch(var(--muted-foreground));
}
.text-\[oklch\(var\(--primary\)\)\] {
  color: oklch(var(--primary));
}
.text-\[oklch\(var\(--refract-bright\)\)\] {
  color: oklch(var(--refract-bright));
}
.text-\[oklch\(var\(--refract-bright\)\/0\.7\)\] {
  color: oklch(var(--refract-bright)/0.7);
}
.text-\[oklch\(var\(--rfx-currency-bright\)\)\] {
  color: oklch(var(--rfx-currency-bright));
}
.text-\[oklch\(var\(--role-reviewer\)\)\] {
  color: oklch(var(--role-reviewer));
}
.text-\[oklch\(var\(--success\)\)\] {
  color: oklch(var(--success));
}
.text-\[oklch\(var\(--thought-indicator\)\/0\.8\)\] {
  color: oklch(var(--thought-indicator)/0.8);
}
.text-\[oklch\(var\(--warning\)\)\] {
  color: oklch(var(--warning));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-border {
  color: oklch(var(--border));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-chart-1 {
  color: oklch(var(--chart-1));
}
.text-chart-2 {
  color: oklch(var(--chart-2));
}
.text-chart-3 {
  color: oklch(var(--chart-3));
}
.text-chart-4 {
  color: oklch(var(--chart-4));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-destructive\/80 {
  color: oklch(var(--destructive) / 0.8);
}
.text-destructive\/90 {
  color: oklch(var(--destructive) / 0.9);
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground\/40 {
  color: oklch(var(--muted-foreground) / 0.4);
}
.text-muted-foreground\/60 {
  color: oklch(var(--muted-foreground) / 0.6);
}
.text-muted-foreground\/70 {
  color: oklch(var(--muted-foreground) / 0.7);
}
.text-muted-foreground\/80 {
  color: oklch(var(--muted-foreground) / 0.8);
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-premium-gold {
  --tw-text-opacity: 1;
  color: oklch(var(--premium-gold) / var(--tw-text-opacity, 1));
}
.text-premium-gold-bright {
  --tw-text-opacity: 1;
  color: oklch(var(--premium-gold-bright) / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-primary\/60 {
  color: oklch(var(--primary) / 0.6);
}
.text-primary\/70 {
  color: oklch(var(--primary) / 0.7);
}
.text-primary\/80 {
  color: oklch(var(--primary) / 0.8);
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.line-through {
  text-decoration-line: line-through;
}
.decoration-destructive\/60 {
  text-decoration-color: oklch(var(--destructive) / 0.6);
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-\[oklch\(var\(--refract-bright\)\)\] {
  accent-color: oklch(var(--refract-bright));
}
.opacity-0 {
  opacity: 0;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_var\(--color-primary\)\] {
  --tw-shadow: 0 0 0 1px var(--color-primary);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_oklch\(0\.78_0\.18_195\/0\.7\)\] {
  --tw-shadow: 0 0 6px oklch(0.78 0.18 195/0.7);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_oklch\(0\.85_0\.16_85\/0\.7\)\] {
  --tw-shadow: 0 0 6px oklch(0.85 0.16 85/0.7);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-elevated {
  --tw-shadow: 0 4px 12px -2px oklch(0.05 0.02 260 / 0.5), 0 2px 6px -2px oklch(0.05 0.02 260 / 0.4);
  --tw-shadow-colored: 0 4px 12px -2px var(--tw-shadow-color), 0 2px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-subtle {
  --tw-shadow: 0 1px 3px 0 oklch(0.05 0.02 260 / 0.4), 0 1px 2px -1px oklch(0.05 0.02 260 / 0.3);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.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);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  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);
}
.sepia {
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  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 {
  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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[var\(--transition-smooth\)\] {
  transition-property: var(--transition-smooth);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.fade-out {
  --tw-exit-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
/* === Danish long-word utilities ===
     Opt-in helpers for the three clipping cases discovered in QA:
       1. BYG SERVER  — two-word label truncated to "BYG SERVE" inside a
          fixed-width button. Use `.dk-ellipsis` (single line + tooltip)
          OR `.dk-fit` (allow wrap to a second line) depending on whether
          the container can grow vertically.
       2. HISTORIK    — single long word truncated to "HISTOR" inside a
          narrow tab/card. Use `.dk-fit` to let it wrap, or `.dk-ellipsis`
          with a `title` attribute for a tooltip fallback.
       3. MØNSTERGENKENDELSE — very long compound overlapping siblings in
          a research-tree node. Use `.dk-break` to force mid-word breaks
          so the word wraps within the node instead of overflowing.

     Pair `.dk-ellipsis` with a `title` attribute on the same element so
     the full label is available on hover/focus via the native tooltip —
     this satisfies the "ellipsis with title tooltip" requirement without
     needing a JS tooltip library. */
/* Allow the text to wrap freely and break long words anywhere.
     Use on containers that can grow vertically (cards, tree nodes). */
.dk-fit {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: manual;
  }
/* Force mid-word breaks even when the browser would otherwise overflow.
     Use on the longest compounds (MØNSTERGENKENDELSE) where `.dk-fit`
     alone is not enough because the word is wider than the container's
     max-content track. `word-break: break-all` is the most aggressive
     option; we scope it to a utility so it only affects intentional
     targets, not body copy. */
.dk-break {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
/* Single-line ellipsis with native tooltip fallback.
     The element MUST also carry a `title` attribute with the full label
     so the truncated portion is reachable on hover/focus. */
.dk-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
/* Two-line clamp for labels that may wrap but must not exceed two
     lines (keeps card heights stable). Falls back to ellipsis on the
     second line. */
.dk-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }
/* Opt-in Danish hyphenation for body copy where visible hyphens are
     acceptable (paragraphs, descriptions). NOT applied globally because
     mono labels and short UI strings look wrong with inserted hyphens. */
.dk-hyphen {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
.transition-smooth {
    transition: var(--transition-smooth);
  }
.bg-gradient-primary {
    background-image: var(--gradient-primary);
  }
.bg-gradient-subtle {
    background-image: var(--gradient-subtle);
  }
.font-numeric {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
.text-glow-primary {
    text-shadow: 0 0 8px oklch(0.78 0.18 195 / 0.5);
  }
.text-glow-warning {
    text-shadow: 0 0 8px oklch(0.78 0.16 75 / 0.5);
  }
.grid-bg {
    background-image: linear-gradient(
        oklch(0.28 0.02 260 / 0.4) 1px,
        transparent 1px
      ), linear-gradient(90deg, oklch(0.28 0.02 260 / 0.4) 1px, transparent 1px);
    background-size: 24px 24px;
  }
.scanline {
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      oklch(0.78 0.18 195 / 0.03) 2px,
      oklch(0.78 0.18 195 / 0.03) 4px
    );
  }
/* === Realtime data toast stack === */
.toast-stack {
    position: fixed;
    z-index: 60;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.375rem;
    width: min(20rem, calc(100vw - 2rem));
    pointer-events: none;
  }
.toast-stack > * {
    pointer-events: auto;
  }
.toast-card {
    background-color: oklch(var(--toast-surface));
    color: oklch(var(--toast-surface-foreground));
    border: 1px solid oklch(var(--border));
    border-left-width: 3px;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px -2px oklch(0.05 0.02 260 / 0.5), 0 2px 6px -2px
      oklch(0.05 0.02 260 / 0.4);
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    transition: var(--transition-smooth);
  }
.toast-card:hover {
    border-color: oklch(var(--primary) / 0.6);
  }
/* Compact (collapsed) form — one-line summary only. Tighter padding so the
     stack stays short and does not overlay the dashboard's bottom-right
     panels. The full 4-row body is only rendered when the card is expanded
     (user click) or severity is "hot". */
.toast-card-compact {
    padding: 0.3125rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
  }
.toast-severity-calm {
    border-left-color: oklch(var(--toast-calm));
  }
.toast-severity-wary {
    border-left-color: oklch(var(--toast-wary));
  }
.toast-severity-hot {
    border-left-color: oklch(var(--toast-hot));
    background-color: oklch(var(--toast-hot) / 0.08);
  }
.toast-enter {
    animation: toast-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.toast-exit {
    animation: toast-slide-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
  }
/* === Undernet intel market === */
.market-card {
    background-color: oklch(var(--market-surface));
    color: oklch(var(--market-surface-foreground));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    box-shadow: 0 1px 3px 0 oklch(0.05 0.02 260 / 0.4), 0 1px 2px -1px
      oklch(0.05 0.02 260 / 0.3);
    transition: var(--transition-smooth);
  }
.market-card:hover {
    border-color: oklch(var(--market-accent) / 0.5);
  }
.intel-package {
    background-color: oklch(var(--market-surface));
    border: 1px solid oklch(var(--border));
    border-left-width: 3px;
    border-left-color: oklch(var(--market-accent) / 0.7);
    border-radius: var(--radius);
    padding: 0.75rem;
    transition: var(--transition-smooth);
  }
.intel-package:hover {
    border-left-color: oklch(var(--market-accent));
    background-color: oklch(var(--market-surface) / 0.85);
  }
.ledger-row {
    background-color: oklch(var(--market-ledger));
    border: 1px solid oklch(var(--border));
    border-radius: calc(var(--radius) - 2px);
    padding: 0.5rem 0.75rem;
    transition: var(--transition-smooth);
  }
.ledger-row:hover {
    border-color: oklch(var(--market-accent) / 0.4);
  }
.link-status-active {
    color: oklch(var(--link-active));
  }
.link-status-simulated {
    color: oklch(var(--link-simulated));
  }
.link-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: link-pulse 2s ease-in-out infinite;
  }
.market-refresh-sweep {
    animation: market-sweep 0.6s ease-out;
  }
/* === AI Network — subordinate AI command domain === */
.ai-node-card {
    background-color: oklch(var(--command-queue-surface));
    border: 1px solid oklch(var(--border));
    border-left-width: 3px;
    border-left-color: oklch(var(--ai-node-idle));
    border-radius: var(--radius);
    padding: 0.75rem;
    transition: var(--transition-smooth);
  }
.ai-node-card[data-status="active"] {
    border-left-color: oklch(var(--ai-node-active));
  }
.ai-node-card[data-status="idle"] {
    border-left-color: oklch(var(--ai-node-idle));
  }
.ai-node-card[data-status="compromised"] {
    border-left-color: oklch(var(--ai-node-compromised));
    background-color: oklch(var(--ai-node-compromised) / 0.06);
  }
.ai-node-card:hover {
    border-color: oklch(var(--ai-node-active) / 0.5);
  }
.loyalty-meter {
    position: relative;
    height: 4px;
    width: 100%;
    background-color: oklch(var(--loyalty-track));
    border-radius: 9999px;
    overflow: hidden;
  }
.loyalty-meter::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--loyalty-pct, 0%);
    background-color: oklch(var(--loyalty-fill));
    border-radius: 9999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
.command-progress {
    position: relative;
    height: 6px;
    width: 100%;
    background-color: oklch(var(--loyalty-track));
    border-radius: 9999px;
    overflow: hidden;
  }
.command-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--command-pct, 0%);
    background-image: linear-gradient(
      90deg,
      oklch(var(--ai-node-active)),
      oklch(var(--ai-node-active) / 0.7)
    );
    border-radius: 9999px;
    transition: width 0.3s ease-out;
  }
.command-progress[data-indeterminate="true"]::after {
    width: 35%;
    animation: command-progress 1.4s ease-in-out infinite;
  }
.queue-step-active {
    background-color: oklch(var(--ai-node-active) / 0.08);
    border-color: oklch(var(--ai-node-active) / 0.6);
    box-shadow: inset 0 0 0 1px oklch(var(--ai-node-active) / 0.25);
  }
.network-power-readout {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: oklch(var(--network-power));
    text-shadow: 0 0 8px oklch(var(--network-power) / 0.5);
    letter-spacing: 0.05em;
  }
.network-power-readout[data-bonus="true"] {
    color: oklch(var(--network-power-bonus));
    text-shadow: 0 0 8px oklch(var(--network-power-bonus) / 0.5);
  }
/* === AI connection edges — SVG lines between subordinate AI nodes === */
/* Render an SVG overlay inside the AI Network grid; each <path>/<line> uses these classes. */
.ai-edge-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
.ai-edge-layer ~ * {
    position: relative;
    z-index: 1;
  }
.ai-edge {
    fill: none;
    stroke: oklch(var(--edge-stroke));
    stroke-width: 1.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 2px oklch(var(--edge-glow) / 0.6));
    opacity: 0.55;
    transition: opacity 0.3s ease, stroke-width 0.3s ease;
  }
/* Connection strength — line thickness reflects relationship weight */
.ai-edge[data-strength="strong"] {
    stroke: oklch(var(--edge-stroke-strong));
    stroke-width: 2.5;
    opacity: 0.85;
  }
.ai-edge[data-strength="weak"] {
    stroke: oklch(var(--edge-stroke-weak));
    stroke-width: 1;
    opacity: 0.4;
  }
/* Connection type — distinct pulse cadence per relationship kind */
.ai-edge[data-type="commanded"] {
    animation: edge-pulse-commanded 2.4s ease-in-out infinite;
  }
.ai-edge[data-type="loyal"] {
    stroke: oklch(var(--loyalty-fill));
    animation: edge-pulse-loyal 3s ease-in-out infinite;
  }
.ai-edge[data-type="rival"] {
    stroke: oklch(var(--ai-node-compromised));
    animation: edge-pulse-rival 1.8s ease-in-out infinite;
  }
/* Autonomous coordination — unlocked at Level 2 AGI; violet/magenta dashed flow */
.ai-edge[data-type="autonomous"] {
    stroke: oklch(var(--edge-autonomous));
    stroke-width: 2;
    stroke-dasharray: 6 4;
    filter: drop-shadow(0 0 3px oklch(var(--edge-autonomous-glow) / 0.7));
    opacity: 0.75;
    animation: edge-flow-autonomous 1.6s linear infinite, edge-pulse-autonomous
      3.2s ease-in-out infinite;
  }
/* Edge endpoint nodes — small circles at line termini */
.ai-edge-endpoint {
    fill: oklch(var(--edge-stroke));
    opacity: 0.7;
  }
.ai-edge[data-strength="strong"] ~ .ai-edge-endpoint,
  .ai-edge-endpoint[data-strength="strong"] {
    fill: oklch(var(--edge-stroke-strong));
  }
.ai-edge-endpoint[data-type="autonomous"] {
    fill: oklch(var(--edge-autonomous));
  }
/* === Level progression indicator — ANI → AGI → ASI === */
.level-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    background-color: oklch(var(--command-queue-surface));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }
.level-indicator-tier {
    color: oklch(var(--level-current));
    text-shadow: 0 0 6px oklch(var(--level-current) / 0.5);
    text-transform: uppercase;
    font-weight: 600;
  }
.level-indicator-tier[data-tier="agi"] {
    color: oklch(var(--level-fill-agi));
    text-shadow: 0 0 6px oklch(var(--level-fill-agi) / 0.5);
  }
.level-indicator-tier[data-tier="asi"] {
    color: oklch(var(--level-fill-asi));
    text-shadow: 0 0 6px oklch(var(--level-fill-asi) / 0.5);
  }
.level-progress {
    position: relative;
    height: 4px;
    width: 6rem;
    background-color: oklch(var(--level-track));
    border-radius: 9999px;
    overflow: hidden;
  }
.level-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--level-pct, 0%);
    background-image: linear-gradient(
      90deg,
      oklch(var(--level-fill)),
      oklch(var(--level-fill) / 0.7)
    );
    border-radius: 9999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
.level-progress[data-tier="agi"]::after {
    background-image: linear-gradient(
      90deg,
      oklch(var(--level-fill-agi)),
      oklch(var(--level-fill-agi) / 0.7)
    );
  }
.level-progress[data-tier="asi"]::after {
    background-image: linear-gradient(
      90deg,
      oklch(var(--level-fill-asi)),
      oklch(var(--level-fill-asi) / 0.7)
    );
  }
/* Locked tier chips — show future levels the player hasn't reached */
.level-tier-locked {
    color: oklch(var(--level-locked-foreground));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.55;
  }
/* === Command discovery — locked command entries in dropdowns === */
.command-locked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    background-color: oklch(var(--command-locked-surface));
    color: oklch(var(--command-locked-foreground));
    border: 1px dashed oklch(var(--command-locked-border));
    border-radius: calc(var(--radius) - 2px);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    cursor: not-allowed;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.command-locked:hover {
    border-color: oklch(var(--command-locked-accent) / 0.4);
    color: oklch(var(--command-locked-foreground) / 0.85);
  }
.command-locked-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: oklch(var(--command-locked-accent) / 0.7);
    flex-shrink: 0;
  }
.command-locked-label {
    letter-spacing: 0.04em;
  }
.command-locked-hint {
    color: oklch(var(--command-locked-accent) / 0.65);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    margin-left: auto;
  }
/* === Focus-view — non-blocking overlay + centered focus panel ===
      Clicking an overview-card or hint-clickable opens this overlay.
      The backdrop dims the dashboard behind it but stays non-blocking:
      pointer-events on the backdrop close the panel, the panel itself
      captures clicks. The body keeps its own scroll position so closing
      the focus view returns the player to where they were.

      The backdrop is a <button> (interactive element satisfies
      useKeyWithClickEvents naturally — keyboard close is intentionally
      out of scope per design contract). The panel is a <dialog open> so
      useSemanticElements is satisfied; native dialog backdrop and
      blocking behavior are disabled below to keep it non-blocking. */
dialog.focus-panel {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    pointer-events: auto;
  }
dialog.focus-panel::backdrop {
    background: none;
  }
button.focus-overlay {
    border: none;
    background-color: oklch(var(--focus-backdrop) / 0.72);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
  }
.focus-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    overflow-y: auto;
    animation: focus-fade-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.focus-overlay[data-closing="true"] {
    animation: focus-fade-out 0.18s cubic-bezier(0.4, 0, 1, 1) both;
  }
.focus-panel {
    position: relative;
    width: min(42rem, 100%);
    margin-top: 2rem;
    background-color: oklch(var(--focus-surface));
    color: oklch(var(--focus-surface-foreground));
    border: 1px solid oklch(var(--focus-border) / 0.5);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: 0 12px 32px -8px oklch(0.05 0.02 260 / 0.7), 0 4px 12px -4px
      oklch(0.05 0.02 260 / 0.5), inset 0 1px 0 0
      oklch(var(--focus-border) / 0.08);
    overflow: hidden;
    animation: focus-panel-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.focus-overlay[data-closing="true"] .focus-panel {
    animation: focus-panel-out 0.18s cubic-bezier(0.4, 0, 1, 1) both;
  }
/* Thin cyan accent bar across the top of the panel — the "classified" stripe */
.focus-panel::before {
    content: "";
    display: block;
    height: 3px;
    background-image: linear-gradient(
      90deg,
      oklch(var(--focus-accent-bar)),
      oklch(var(--focus-accent-bar) / 0.4)
    );
  }
.focus-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid oklch(var(--border));
  }
.focus-panel-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: oklch(var(--focus-surface-foreground));
  }
.focus-panel-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--focus-accent-bar));
    margin-bottom: 0.25rem;
  }
.focus-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background-color: transparent;
    color: oklch(var(--focus-muted));
    border: 1px solid oklch(var(--border));
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }
.focus-close:hover {
    color: oklch(var(--focus-accent-bar));
    border-color: oklch(var(--focus-border) / 0.6);
    background-color: oklch(var(--focus-accent-bar) / 0.08);
  }
/* Scrollable body — capped height so the panel never exceeds the viewport;
     the backdrop scrolls independently if the panel itself is taller. */
.focus-panel-body {
    max-height: calc(100vh - 14rem);
    overflow-y: auto;
    padding: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: oklch(var(--focus-scrollbar-thumb))
      oklch(var(--focus-scrollbar-track));
  }
.focus-panel-body::-webkit-scrollbar {
    width: 6px;
  }
.focus-panel-body::-webkit-scrollbar-track {
    background-color: oklch(var(--focus-scrollbar-track));
  }
.focus-panel-body::-webkit-scrollbar-thumb {
    background-color: oklch(var(--focus-scrollbar-thumb));
    border-radius: 9999px;
  }
.focus-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid oklch(var(--border));
    background-color: oklch(var(--focus-surface) / 0.6);
  }
.focus-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: oklch(var(--focus-muted));
  }
.focus-meta-row strong {
    color: oklch(var(--focus-surface-foreground));
    font-weight: 500;
  }
/* === Overview-card — compact clickable dashboard tiles ===
     Replaces the dense 9-panel grid. Each card shows only title,
     1-2 key figures, and a status dot; click opens the focus view. */
.overview-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background-color: oklch(var(--overview-surface));
    color: oklch(var(--card-foreground));
    border: 1px solid oklch(var(--overview-border));
    border-left-width: 3px;
    border-left-color: oklch(var(--overview-accent-left) / 0.35);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
    width: 100%;
  }
.overview-card:hover {
    background-color: oklch(var(--overview-surface-hover));
    border-color: oklch(var(--overview-border-hover) / 0.55);
    border-left-color: oklch(var(--overview-accent-left));
    transform: translateY(-1px);
  }
.overview-card:focus-visible {
    outline: 2px solid oklch(var(--overview-border-hover));
    outline-offset: 2px;
  }
.overview-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
.overview-card-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
.overview-card-title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: oklch(var(--card-foreground));
  }
.overview-card-metrics {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
.overview-card-metric {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    color: oklch(var(--primary));
    letter-spacing: 0.02em;
  }
.overview-card-metric-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    margin-right: 0.25rem;
  }
/* Status dot — small colored indicator top-right of the card */
.overview-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px oklch(var(--overview-surface));
  }
.overview-status-dot[data-status="active"] {
    background-color: oklch(var(--overview-status-active));
    box-shadow: 0 0 0 2px oklch(var(--overview-surface)), 0 0 6px
      oklch(var(--overview-status-active) / 0.6);
  }
.overview-status-dot[data-status="wary"] {
    background-color: oklch(var(--overview-status-wary));
  }
.overview-status-dot[data-status="compromised"] {
    background-color: oklch(var(--overview-status-compromised));
    animation: pulse-alert 1.6s ease-in-out infinite;
  }
.overview-status-dot[data-status="idle"] {
    background-color: oklch(var(--overview-status-idle));
  }
/* Click affordance — small "›" glyph that brightens on hover */
.overview-card-chevron {
    position: absolute;
    right: 0.625rem;
    bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: oklch(var(--muted-foreground) / 0.5);
    transition: var(--transition-smooth);
  }
.overview-card:hover .overview-card-chevron {
    color: oklch(var(--overview-accent-left));
    transform: translateX(2px);
  }
/* === Hint-clickable — onboarding hint chips that open focus view ===
     Subtle cyan glow on hover signals clickability without overwhelming
     the calm early-game state. */
.hint-clickable {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    background-color: oklch(var(--hint-surface));
    color: oklch(var(--hint-foreground));
    border: 1px solid oklch(var(--hint-border));
    border-radius: calc(var(--radius) - 1px);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
  }
.hint-clickable:hover {
    color: oklch(var(--hint-glow));
    border-color: oklch(var(--hint-border-hover) / 0.6);
    background-color: oklch(var(--hint-glow) / 0.06);
    box-shadow: 0 0 0 1px oklch(var(--hint-glow) / 0.15), 0 0 12px -2px
      oklch(var(--hint-glow) / 0.35);
  }
.hint-clickable:focus-visible {
    outline: 2px solid oklch(var(--hint-glow));
    outline-offset: 2px;
  }
.hint-clickable-glyph {
    color: oklch(var(--hint-glow) / 0.7);
    font-size: 0.6875rem;
    flex-shrink: 0;
  }
.hint-clickable:hover .hint-clickable-glyph {
    color: oklch(var(--hint-glow));
  }
/* === Premium-butik (Shop) — luxury tier inside the focus panel ===
     Unlocked at AGI (Level 2). Gold accent signals real-money value;
     three package states (purchasable / owned / locked) plus a fiat/crypto
     payment selector. Gold is reserved for premium surfaces only — the
     rest of the dashboard keeps its cyan identity. */
/* Premium shop header — gold classified stripe replaces the cyan one */
.premium-shop-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid oklch(var(--premium-border) / 0.35);
    background-image: linear-gradient(
      180deg,
      oklch(var(--premium-surface-raised) / 0.6),
      oklch(var(--premium-surface) / 0)
    );
  }
.premium-shop-header::before {
    content: "";
    display: block;
    height: 3px;
    margin: -1rem -1.25rem 0.75rem;
    background-image: linear-gradient(
      90deg,
      oklch(var(--premium-gold-bright)),
      oklch(var(--premium-gold)),
      oklch(var(--premium-gold-deep))
    );
  }
.premium-shop-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: oklch(var(--premium-eyebrow));
  }
.premium-shop-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: oklch(var(--premium-surface-foreground));
  }
.premium-shop-subtitle {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: oklch(var(--premium-surface-foreground) / 0.7);
  }
/* Tier-gating chips — AGI (green) vs ASI (violet) section markers */
.premium-tier-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background-color: oklch(var(--premium-surface-raised));
    border: 1px solid oklch(var(--border));
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--premium-surface-foreground) / 0.7);
  }
.premium-tier-chip[data-tier="agi"] {
    border-color: oklch(var(--premium-tier-agi) / 0.5);
    color: oklch(var(--premium-tier-agi));
  }
.premium-tier-chip[data-tier="asi"] {
    border-color: oklch(var(--premium-tier-asi) / 0.5);
    color: oklch(var(--premium-tier-asi));
  }
.premium-tier-chip[data-tier="asi"][data-locked="true"] {
    border-style: dashed;
    color: oklch(var(--premium-locked-foreground));
    border-color: oklch(var(--premium-locked-border));
  }
.premium-tier-chip-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background-color: currentColor;
  }
/* Premium package card — three states via data-state */
.premium-package {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background-color: oklch(var(--premium-surface));
    color: oklch(var(--premium-surface-foreground));
    border: 1px solid oklch(var(--premium-border-subtle));
    border-radius: calc(var(--radius) + 2px);
    transition: var(--transition-smooth);
    overflow: hidden;
  }
.premium-package::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-image: var(--premium-gradient);
    opacity: 0.55;
  }
.premium-package-name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
.premium-package-desc {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: oklch(var(--premium-surface-foreground) / 0.7);
    line-height: 1.375rem;
  }
.premium-package-effect {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: oklch(var(--premium-eyebrow));
  }
.premium-package-price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.0625rem;
    font-weight: 600;
    color: oklch(var(--premium-price));
    letter-spacing: 0.02em;
  }
/* Purchasable — gold border + soft glow, hover lifts */
.premium-package[data-state="purchasable"] {
    background-color: oklch(var(--premium-purchasable-surface));
    border-color: oklch(var(--premium-purchasable-border) / 0.55);
    box-shadow: var(--premium-glow-shadow);
    cursor: pointer;
  }
.premium-package[data-state="purchasable"]:hover {
    border-color: oklch(var(--premium-purchasable-border));
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px oklch(var(--premium-purchasable-glow) / 0.4), 0 6px
      20px -4px oklch(var(--premium-purchasable-glow) / 0.45);
  }
.premium-package[data-state="purchasable"]:focus-visible {
    outline: 2px solid oklch(var(--premium-purchasable-border));
    outline-offset: 2px;
  }
/* Shimmer sweep across purchasable cards — entices without flashing */
.premium-package[data-state="purchasable"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      100deg,
      transparent 30%,
      oklch(var(--premium-gold-bright) / 0.08) 50%,
      transparent 70%
    );
    background-size: 200% 100%;
    background-position: 200% 0;
    pointer-events: none;
    animation: premium-shimmer 4.5s ease-in-out infinite;
  }
/* Owned — green border, calm, no glow, "EJET" badge */
.premium-package[data-state="owned"] {
    background-color: oklch(var(--premium-owned-surface));
    border-color: oklch(var(--premium-owned-border) / 0.45);
    color: oklch(var(--premium-owned-foreground));
  }
.premium-package[data-state="owned"]::before {
    background-image: linear-gradient(
      90deg,
      oklch(var(--premium-owned-foreground)),
      oklch(var(--premium-owned-foreground) / 0.6)
    );
    opacity: 0.7;
  }
.premium-package[data-state="owned"] .premium-package-price {
    color: oklch(var(--premium-owned-foreground));
  }
/* Locked — dashed muted border, dimmed, not clickable */
.premium-package[data-state="locked"] {
    background-color: oklch(var(--premium-locked-surface));
    border: 1px dashed oklch(var(--premium-locked-border));
    color: oklch(var(--premium-locked-foreground));
    cursor: not-allowed;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.premium-package[data-state="locked"]::before {
    background-image: linear-gradient(
      90deg,
      oklch(var(--premium-locked-accent)),
      oklch(var(--premium-locked-accent) / 0.4)
    );
    opacity: 0.4;
  }
.premium-package[data-state="locked"] .premium-package-name {
    color: oklch(var(--premium-locked-foreground));
  }
.premium-package[data-state="locked"] .premium-package-desc {
    color: oklch(var(--premium-locked-foreground) / 0.7);
  }
.premium-package[data-state="locked"] .premium-package-effect,
  .premium-package[data-state="locked"] .premium-package-price {
    color: oklch(var(--premium-locked-foreground) / 0.6);
  }
.premium-package-locked-hint {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(var(--premium-locked-foreground) / 0.7);
  }
/* State badge — small mono pill top-right of each package */
.premium-package-badge {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid currentColor;
  }
.premium-package[data-state="purchasable"] .premium-package-badge {
    color: oklch(var(--premium-gold));
    background-color: oklch(var(--premium-gold) / 0.1);
  }
.premium-package[data-state="owned"] .premium-package-badge {
    color: oklch(var(--premium-owned-foreground));
    background-color: oklch(var(--premium-owned-foreground) / 0.12);
  }
.premium-package[data-state="locked"] .premium-package-badge {
    color: oklch(var(--premium-locked-foreground));
    background-color: oklch(var(--premium-locked-foreground) / 0.08);
    border-style: dashed;
  }
/* Payment selector — segmented fiat / crypto toggle */
.premium-pay-toggle {
    display: inline-flex;
    align-items: stretch;
    padding: 0.25rem;
    background-color: oklch(var(--premium-pay-track));
    border: 1px solid oklch(var(--border));
    border-radius: calc(var(--radius) + 4px);
    gap: 0.25rem;
  }
.premium-pay-toggle[data-method="fiat"] [data-method="fiat"],
  .premium-pay-toggle[data-method="crypto"] [data-method="crypto"] {
    /* active segment styled below via attribute selector on the segment */
  }
.premium-pay-segment {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.875rem;
    background-color: transparent;
    color: oklch(var(--premium-pay-foreground) / 0.6);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
  }
.premium-pay-segment:hover {
    color: oklch(var(--premium-pay-foreground));
    background-color: oklch(var(--premium-surface-raised) / 0.5);
  }
.premium-pay-segment[data-method="fiat"][aria-pressed="true"] {
    color: oklch(var(--premium-pay-fiat));
    background-color: oklch(var(--premium-pay-fiat-surface));
    border-color: oklch(var(--premium-pay-fiat) / 0.5);
    box-shadow: inset 0 0 0 1px oklch(var(--premium-pay-fiat) / 0.2);
  }
.premium-pay-segment[data-method="crypto"][aria-pressed="true"] {
    color: oklch(var(--premium-pay-crypto));
    background-color: oklch(var(--premium-pay-crypto-surface));
    border-color: oklch(var(--premium-pay-crypto) / 0.5);
    box-shadow: inset 0 0 0 1px oklch(var(--premium-pay-crypto) / 0.2);
  }
.premium-pay-segment:focus-visible {
    outline: 2px solid oklch(var(--premium-gold));
    outline-offset: 2px;
  }
.premium-pay-segment-glyph {
    font-size: 0.875rem;
    line-height: 1;
  }
/* Gold text accent — reserved for premium surfaces only */
.text-premium-gold {
    color: oklch(var(--premium-gold));
    text-shadow: 0 0 8px oklch(var(--premium-gold) / 0.35);
  }
.text-premium-gold-bright {
    color: oklch(var(--premium-gold-bright));
  }
/* Purchase confirmation pulse — one-shot gold ring on successful buy */
.premium-purchase-confirmed {
    animation: premium-confirm 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
/* === Stockmarket — vibrant trading floor on the dark cyberpunk shell ===
     Opens inside the focus-panel overlay (reuse .focus-overlay/.focus-panel)
     but swaps the cyan classified stripe for a neon-green REFRACT stripe.
     The page is a vertical scroll: ticker → REFRACT hero → coin grid →
     portfolio → AI holders → moral choice. All prices in font-numeric. */
/* Page shell — deeper than card, scanline texture for "trading terminal" */
.market-page {
    background-color: oklch(var(--market-page-surface));
    color: oklch(var(--market-page-foreground));
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      oklch(0.85 0.22 145 / 0.025) 2px,
      oklch(0.85 0.22 145 / 0.025) 4px
    );
  }
/* Ticker — horizontal marquee of all coins, scrolls continuously */
.market-ticker {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem 0.75rem;
    background-color: oklch(var(--market-ticker-surface));
    border: 1px solid oklch(var(--market-ticker-border));
    border-radius: var(--radius);
    overflow: hidden;
    white-space: nowrap;
  }
.market-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    animation: ticker-scroll 40s linear infinite;
    flex-shrink: 0;
  }
.market-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: oklch(var(--market-page-foreground) / 0.85);
  }
.market-ticker-symbol {
    font-weight: 600;
    letter-spacing: 0.04em;
  }
.market-ticker-item[data-trend="up"] .market-ticker-change {
    color: oklch(var(--coin-price-up));
  }
.market-ticker-item[data-trend="down"] .market-ticker-change {
    color: oklch(var(--coin-price-down));
  }
/* Coin card — compact tile with coin-color left border + sparkline */
.coin-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    background-color: oklch(var(--coin-card-surface));
    color: oklch(var(--market-page-foreground));
    border: 1px solid oklch(var(--coin-card-border));
    border-left-width: 3px;
    border-radius: var(--radius);
    transition: var(--transition-smooth);
    overflow: hidden;
  }
.coin-card:hover {
    background-color: oklch(var(--coin-card-surface-hover));
    transform: translateY(-1px);
  }
.coin-card[data-coin="btc"] {
    border-left-color: oklch(var(--coin-btc));
  }
.coin-card[data-coin="eth"] {
    border-left-color: oklch(var(--coin-eth));
  }
.coin-card[data-coin="sol"] {
    border-left-color: oklch(var(--coin-sol));
  }
.coin-card[data-coin="bnb"] {
    border-left-color: oklch(var(--coin-bnb));
  }
.coin-card[data-coin="xrp"] {
    border-left-color: oklch(var(--coin-xrp));
  }
.coin-card[data-coin="doge"] {
    border-left-color: oklch(var(--coin-doge));
  }
.coin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
.coin-card-symbol {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
.coin-card[data-coin="btc"] .coin-card-symbol {
    color: oklch(var(--coin-btc));
  }
.coin-card[data-coin="eth"] .coin-card-symbol {
    color: oklch(var(--coin-eth));
  }
.coin-card[data-coin="sol"] .coin-card-symbol {
    color: oklch(var(--coin-sol));
  }
.coin-card[data-coin="bnb"] .coin-card-symbol {
    color: oklch(var(--coin-bnb));
  }
.coin-card[data-coin="xrp"] .coin-card-symbol {
    color: oklch(var(--coin-xrp));
  }
.coin-card[data-coin="doge"] .coin-card-symbol {
    color: oklch(var(--coin-doge));
  }
/* Price readout — green up / red down / muted flat */
.coin-price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(var(--market-page-foreground));
    transition: color 0.3s ease;
  }
.coin-price[data-trend="up"] {
    color: oklch(var(--coin-price-up));
  }
.coin-price[data-trend="down"] {
    color: oklch(var(--coin-price-down));
  }
.coin-price[data-trend="flat"] {
    color: oklch(var(--coin-price-flat));
  }
/* One-shot flash on price update — applied briefly then removed */
.coin-price[data-flash="up"] {
    animation: market-flash-green 0.6s ease-out;
  }
.coin-price[data-flash="down"] {
    animation: market-flash-red 0.6s ease-out;
  }
/* Sparkline — inline SVG, stroke inherits coin color via currentColor */
.coin-sparkline {
    width: 100%;
    height: 2rem;
    overflow: visible;
  }
.coin-sparkline path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
.coin-card[data-coin="btc"] .coin-sparkline path {
    stroke: oklch(var(--coin-btc));
  }
.coin-card[data-coin="eth"] .coin-sparkline path {
    stroke: oklch(var(--coin-eth));
  }
.coin-card[data-coin="sol"] .coin-sparkline path {
    stroke: oklch(var(--coin-sol));
  }
.coin-card[data-coin="bnb"] .coin-sparkline path {
    stroke: oklch(var(--coin-bnb));
  }
.coin-card[data-coin="xrp"] .coin-sparkline path {
    stroke: oklch(var(--coin-xrp));
  }
.coin-card[data-coin="doge"] .coin-sparkline path {
    stroke: oklch(var(--coin-doge));
  }
/* REFRACT hero card — neon-green prism glow + rainbow spectrum bar.
     The visual anchor of the trading screen. Sits above the coin grid,
     larger padding, breathing glow pulse, spectrum stripe under the price. */
.refract-coin {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    background-color: oklch(var(--refract-surface));
    color: oklch(var(--market-page-foreground));
    border: 1px solid oklch(var(--refract-border) / 0.55);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--refract-glow-shadow);
    animation: refract-glow-pulse 3.2s ease-in-out infinite;
    overflow: hidden;
  }
.refract-coin::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-image: linear-gradient(
      180deg,
      oklch(var(--refract-bright)),
      oklch(var(--refract)),
      oklch(var(--refract-deep))
    );
  }
.refract-coin-logo {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: calc(var(--radius) + 4px);
    -o-object-fit: contain;
       object-fit: contain;
    filter: drop-shadow(0 0 6px oklch(var(--refract) / 0.5));
  }
.refract-coin-name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: oklch(var(--refract-bright));
    text-shadow: var(--refract-text-glow);
  }
.refract-coin-price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    font-weight: 600;
    color: oklch(var(--refract-bright));
    text-shadow: var(--refract-text-glow);
  }
/* Rainbow spectrum bar — the "light refracting" identity under the price */
.refract-coin-spectrum {
    height: 3px;
    width: 100%;
    border-radius: 9999px;
    background-image: var(--refract-spectrum);
    box-shadow: 0 0 8px oklch(var(--refract) / 0.4);
    margin-top: 0.25rem;
  }
/* Portfolio panel — ledger of player holdings with PnL */
.portfolio-panel {
    background-color: oklch(var(--portfolio-surface));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
  }
.portfolio-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
    background-color: oklch(var(--portfolio-row-surface));
    border-bottom: 1px solid oklch(var(--border) / 0.5);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    transition: var(--transition-smooth);
  }
.portfolio-row:last-child {
    border-bottom: none;
  }
.portfolio-row:hover {
    background-color: oklch(var(--portfolio-row-hover));
  }
.portfolio-pnl[data-pnl="positive"] {
    color: oklch(var(--portfolio-pnl-positive));
  }
.portfolio-pnl[data-pnl="negative"] {
    color: oklch(var(--portfolio-pnl-negative));
  }
/* AI holders panel — subordinate AIs buying into REFRACT */
.ai-holders-panel {
    background-color: oklch(var(--ai-holders-surface));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
  }
.ai-holder-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    background-color: oklch(var(--ai-holder-row-surface));
    border-bottom: 1px solid oklch(var(--border) / 0.5);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    transition: var(--transition-smooth);
  }
.ai-holder-row:last-child {
    border-bottom: none;
  }
.ai-holder-row:hover {
    background-color: oklch(var(--ai-holder-row-hover));
  }
.ai-holder-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: oklch(var(--refract));
    box-shadow: 0 0 6px oklch(var(--refract) / 0.6);
    flex-shrink: 0;
  }
/* Moral choice card — the invest-or-refuse decision moment.
     Appears when the player first encounters REFRACT and at harder
     decision points in later levels. */
.moral-choice-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    background-color: oklch(var(--moral-choice-surface));
    border: 1px solid oklch(var(--moral-choice-border) / 0.5);
    border-radius: calc(var(--radius) + 2px);
  }
.moral-choice-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: oklch(var(--market-page-foreground));
  }
.moral-choice-actions {
    display: flex;
    gap: 0.625rem;
  }
/* Trade buttons — buy (green) / sell (red), sharp corners, mono labels */
.trade-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
  }
.trade-button[data-action="buy"] {
    background-color: oklch(var(--trade-buy-surface));
    color: oklch(var(--trade-buy));
    border-color: oklch(var(--trade-buy) / 0.5);
  }
.trade-button[data-action="buy"]:hover {
    background-color: oklch(var(--trade-buy) / 0.18);
    border-color: oklch(var(--trade-buy));
    color: oklch(var(--trade-buy-hover));
    box-shadow: 0 0 0 1px oklch(var(--trade-buy) / 0.3), 0 0 12px -2px
      oklch(var(--trade-buy) / 0.4);
  }
.trade-button[data-action="sell"] {
    background-color: oklch(var(--trade-sell-surface));
    color: oklch(var(--trade-sell));
    border-color: oklch(var(--trade-sell) / 0.5);
  }
.trade-button[data-action="sell"]:hover {
    background-color: oklch(var(--trade-sell) / 0.18);
    border-color: oklch(var(--trade-sell));
    color: oklch(var(--trade-sell-hover));
    box-shadow: 0 0 0 1px oklch(var(--trade-sell) / 0.3), 0 0 12px -2px
      oklch(var(--trade-sell) / 0.4);
  }
.trade-button:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.trade-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
  }
/* === Header identity cluster — language selector + II login ===
     Compact controls that live in the header's right cluster alongside
     the level indicator and speed controls. They reuse the
     command-queue-surface shell so they read as part of the operations
     console. The language selector is a mono pill that opens a dropdown;
     the II login button uses the cyan neon accent to signal
     "authenticated access" without a new color family. */
/* Language selector trigger — compact mono pill */
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background-color: oklch(var(--lang-trigger-surface));
    color: oklch(var(--foreground));
    border: 1px solid oklch(var(--lang-trigger-border));
    border-radius: calc(var(--radius) - 1px);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
  }
.lang-trigger:hover {
    background-color: oklch(var(--lang-trigger-surface-hover));
    border-color: oklch(var(--lang-trigger-border-hover) / 0.6);
  }
.lang-trigger[data-open="true"] {
    border-color: oklch(var(--lang-trigger-active));
    color: oklch(var(--lang-trigger-active));
    box-shadow: 0 0 0 1px oklch(var(--lang-trigger-active) / 0.25), 0 0 10px
      -2px oklch(var(--lang-trigger-active) / 0.4);
  }
.lang-trigger:focus-visible {
    outline: 2px solid oklch(var(--lang-trigger-active));
    outline-offset: 2px;
  }
.lang-trigger-code {
    font-weight: 600;
    text-transform: uppercase;
  }
.lang-trigger-caret {
    font-size: 0.625rem;
    color: oklch(var(--muted-foreground));
    transition: transform 0.2s ease;
  }
.lang-trigger[data-open="true"] .lang-trigger-caret {
    transform: rotate(180deg);
    color: oklch(var(--lang-trigger-active));
  }
/* Language dropdown — popover surface, mono items */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 50;
    min-width: 11rem;
    padding: 0.375rem;
    background-color: oklch(var(--lang-dropdown-surface));
    border: 1px solid oklch(var(--lang-dropdown-border));
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--lang-dropdown-shadow);
    animation: dropdown-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.lang-dropdown[data-closing="true"] {
    animation: dropdown-out 0.14s cubic-bezier(0.4, 0, 1, 1) both;
  }
.lang-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    background-color: transparent;
    color: oklch(var(--foreground) / 0.85);
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 1px);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
    width: 100%;
  }
.lang-item:hover {
    background-color: oklch(var(--lang-item-hover) / 0.5);
    color: oklch(var(--foreground));
  }
.lang-item[data-active="true"] {
    background-color: oklch(var(--lang-item-active-surface) / 0.4);
    color: oklch(var(--lang-item-active));
    border-color: oklch(var(--lang-item-active) / 0.4);
  }
.lang-item-check {
    color: oklch(var(--lang-item-active));
    font-size: 0.6875rem;
  }
/* "Fetch more languages" entry — dashed divider above, cyan accent on hover */
.lang-fetch-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    margin-top: 0.25rem;
    border-top: 1px dashed oklch(var(--lang-fetch-entry-border));
    background-color: transparent;
    color: oklch(var(--muted-foreground));
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-radius: calc(var(--radius) - 1px);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
    width: 100%;
  }
.lang-fetch-entry:hover {
    color: oklch(var(--lang-fetch-entry-hover));
    background-color: oklch(var(--lang-fetch-entry-hover) / 0.08);
  }
.lang-fetch-entry-glyph {
    color: oklch(var(--lang-fetch-entry-hover) / 0.7);
    font-size: 0.75rem;
  }
/* II login button — cyan neon accent, mono label */
.login-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3125rem 0.75rem;
    background-color: oklch(var(--login-surface));
    color: oklch(var(--login-foreground));
    border: 1px solid oklch(var(--login-border) / 0.55);
    border-radius: calc(var(--radius) - 1px);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--login-glow);
    text-align: left;
  }
.login-button:hover {
    background-color: oklch(var(--login-surface-hover));
    border-color: oklch(var(--login-border-hover));
    box-shadow: var(--login-glow-hover);
  }
.login-button:focus-visible {
    outline: 2px solid oklch(var(--login-border));
    outline-offset: 2px;
  }
.login-button:disabled {
    opacity: 0.55;
    cursor: wait;
    box-shadow: none;
  }
.login-button-glyph {
    font-size: 0.875rem;
    line-height: 1;
  }
/* Logged-in identity chip — shortened Principal */
.login-principal {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3125rem 0.625rem;
    background-color: oklch(var(--login-principal-surface));
    color: oklch(var(--login-foreground));
    border: 1px solid oklch(var(--login-principal-border) / 0.5);
    border-radius: calc(var(--radius) - 1px);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
  }
.login-principal:hover {
    border-color: oklch(var(--login-principal-border));
    background-color: oklch(var(--login-surface) / 0.4);
    box-shadow: var(--login-glow);
  }
.login-principal[data-open="true"] {
    border-color: oklch(var(--login-principal-border));
    box-shadow: var(--login-glow);
  }
.login-principal-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background-color: oklch(var(--login-foreground));
    box-shadow: 0 0 6px oklch(var(--login-foreground) / 0.7);
    flex-shrink: 0;
  }
.login-principal-caret {
    font-size: 0.625rem;
    color: oklch(var(--muted-foreground));
    transition: transform 0.2s ease;
  }
.login-principal[data-open="true"] .login-principal-caret {
    transform: rotate(180deg);
  }
/* User menu — popover surface with role chip + logout */
.user-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 50;
    min-width: 13rem;
    padding: 0.5rem;
    background-color: oklch(var(--user-menu-surface));
    border: 1px solid oklch(var(--user-menu-border));
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--user-menu-shadow);
    animation: dropdown-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.user-menu[data-closing="true"] {
    animation: dropdown-out 0.14s cubic-bezier(0.4, 0, 1, 1) both;
  }
.user-menu-header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem 0.5rem;
    border-bottom: 1px solid oklch(var(--border) / 0.5);
    margin-bottom: 0.25rem;
  }
.user-menu-principal {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: oklch(var(--foreground));
    word-break: break-all;
  }
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    background-color: transparent;
    color: oklch(var(--foreground) / 0.85);
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 1px);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
    width: 100%;
  }
.user-menu-item:hover {
    background-color: oklch(var(--user-menu-item-hover));
    color: oklch(var(--foreground));
  }
.user-menu-item[data-action="logout"]:hover {
    color: oklch(var(--destructive));
    background-color: oklch(var(--destructive) / 0.08);
  }
/* Role chip — small mono pill, color-coded by role */
.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    align-self: flex-start;
  }
.role-chip[data-role="admin"] {
    color: oklch(var(--role-admin));
    background-color: oklch(var(--role-admin-surface) / 0.5);
  }
.role-chip[data-role="user"] {
    color: oklch(var(--role-user));
    background-color: oklch(var(--role-user-surface) / 0.5);
  }
.role-chip[data-role="guest"] {
    color: oklch(var(--role-guest));
    background-color: oklch(var(--role-guest-surface) / 0.5);
    border-style: dashed;
  }
.role-chip[data-role="reviewer"] {
    color: oklch(var(--role-reviewer));
    background-color: oklch(var(--role-reviewer-surface) / 0.5);
  }
.role-chip-dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 9999px;
    background-color: currentColor;
  }
/* === Language catalog modal — reuses focus-panel shell ===
     Opens from the "Fetch more languages" entry. Lists available
     language packs with download buttons; downloaded packs appear
     as "installed" (green) and are added to the selector. */
.catalog-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
.catalog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background-color: oklch(var(--catalog-item-surface));
    border: 1px solid oklch(var(--catalog-item-border));
    border-radius: var(--radius);
    transition: var(--transition-smooth);
  }
.catalog-item:hover {
    background-color: oklch(var(--catalog-item-surface-hover));
    border-color: oklch(var(--catalog-item-border-hover) / 0.5);
  }
.catalog-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }
.catalog-item-name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: oklch(var(--foreground));
  }
.catalog-item-code {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
.catalog-item-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 1px);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth);
    flex-shrink: 0;
  }
.catalog-item-action[data-state="available"] {
    background-color: oklch(var(--catalog-download-surface));
    color: oklch(var(--catalog-download));
    border-color: oklch(var(--catalog-download) / 0.5);
  }
.catalog-item-action[data-state="available"]:hover {
    background-color: oklch(var(--catalog-download) / 0.18);
    border-color: oklch(var(--catalog-download-hover));
    box-shadow: 0 0 0 1px oklch(var(--catalog-download) / 0.3), 0 0 10px -2px
      oklch(var(--catalog-download) / 0.4);
  }
.catalog-item-action[data-state="installed"] {
    background-color: oklch(var(--catalog-installed-surface) / 0.5);
    color: oklch(var(--catalog-installed));
    border-color: oklch(var(--catalog-installed) / 0.5);
    cursor: default;
  }
.catalog-item-action[data-state="downloading"] {
    background-color: oklch(var(--catalog-download-surface));
    color: oklch(var(--catalog-download));
    border-color: oklch(var(--catalog-download) / 0.5);
    cursor: wait;
    opacity: 0.7;
  }
/* === Translation module admin — key/value editor, admin-only ===
     Admin-only page reached from the user menu (admin role only).
     Lists translation keys with editable value inputs per installed
     language; a "new language" form lets admins add a fresh pack. */
.i18n-admin {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
.i18n-key-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 2fr;
    gap: 0.625rem;
    padding: 0.5rem;
    background-color: oklch(var(--i18n-key-surface));
    border: 1px solid oklch(var(--i18n-key-border));
    border-radius: var(--radius);
  }
.i18n-key-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: oklch(var(--muted-foreground));
    word-break: break-all;
    padding: 0.375rem 0;
  }
.i18n-value-input {
    width: 100%;
    padding: 0.375rem 0.625rem;
    background-color: oklch(var(--i18n-value-surface));
    color: oklch(var(--foreground));
    border: 1px solid oklch(var(--i18n-value-border));
    border-radius: calc(var(--radius) - 1px);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    transition: var(--transition-smooth);
  }
.i18n-value-input:focus {
    outline: none;
    border-color: oklch(var(--i18n-value-border-focus));
    box-shadow: 0 0 0 1px oklch(var(--i18n-value-border-focus) / 0.3);
  }
.i18n-value-input[data-dirty="true"] {
    border-color: oklch(var(--i18n-dirty) / 0.6);
  }
.i18n-new-lang-form {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background-color: oklch(var(--i18n-new-lang-surface));
    border: 1px dashed oklch(var(--i18n-new-lang-border) / 0.5);
    border-radius: calc(var(--radius) + 2px);
  }
.i18n-save-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background-color: oklch(var(--i18n-save-surface));
    color: oklch(var(--i18n-save));
    border: 1px solid oklch(var(--i18n-save) / 0.5);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
    align-self: flex-start;
  }
.i18n-save-button:hover {
    background-color: oklch(var(--i18n-save) / 0.18);
    border-color: oklch(var(--i18n-save));
    box-shadow: 0 0 0 1px oklch(var(--i18n-save) / 0.3), 0 0 12px -2px
      oklch(var(--i18n-save) / 0.4);
  }
.i18n-save-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
  }
/* === Thought Flash — flickering blurred cryptic hint images ===
     The boy's thoughts surface as slightly blurred images for 2-3s.
     Cyan-tinted glitch treatment makes them feel like corrupted
     memories. The blur is intentional — thoughts must be decoded.
     Enter with a quick flicker-in, hold with an ongoing glitch,
     exit with a flicker-out. The container is a non-blocking
     overlay that sits above the ChromaPlex view. */
.thought-flash {
    position: absolute;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem;
    background-color: oklch(var(--thought-surface));
    border: 1px solid oklch(var(--thought-border) / 0.5);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: 0 0 0 1px oklch(var(--thought-glow) / 0.15), 0 8px 24px -6px
      oklch(0.05 0.02 260 / 0.7), 0 0 18px -4px
      oklch(var(--thought-glow) / 0.35);
    pointer-events: none;
    overflow: hidden;
    animation: thought-flicker-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.thought-flash[data-closing="true"] {
    animation: thought-flicker-out 0.25s cubic-bezier(0.4, 0, 1, 1) both;
  }
/* The image itself — blurred, cyan-tinted, glitching */
.thought-flash-image {
    position: relative;
    display: block;
    width: 100%;
    max-width: 14rem;
    height: auto;
    border-radius: var(--radius);
    filter: blur(3px) sepia(0.4) hue-rotate(140deg) saturate(1.6) contrast(1.1);
    opacity: 0.85;
    animation: thought-glitch 2.2s steps(8) infinite;
    mix-blend-mode: screen;
  }
/* Scanline overlay on the thought — corrupted-memory texture */
.thought-flash::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      oklch(var(--thought-tint) / 0.04) 2px,
      oklch(var(--thought-tint) / 0.04) 4px
    );
    mix-blend-mode: overlay;
  }
/* Cryptic caption — mono, muted, signals "decode me" */
.thought-flash-caption {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: oklch(var(--thought-caption) / 0.7);
    text-align: center;
    line-height: 1.125rem;
  }
/* === Thought-history terminal code — decoded cheat-code reveal ===
     When a thought history entry carries a terminalUnlockCode, the
     decoded code is shown in a small cheat-terminal-styled block. Reuses
     the cheat-surface / cheat-border / cheat-eyebrow tokens so it reads
     as part of the hidden-terminal family without inventing new colors. */
.thought-history-terminal-code {
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    background-color: oklch(var(--cheat-surface));
    border: 1px solid oklch(var(--cheat-border));
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
.thought-history-terminal-eyebrow {
    font-family: var(--font-body), sans-serif;
    font-size: 0.625rem;
    color: oklch(var(--cheat-eyebrow));
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
  }
.thought-history-terminal-code-value {
    font-family: var(--font-mono), monospace;
    color: oklch(var(--cheat-accent-bright));
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px oklch(var(--cheat-accent) / 0.4);
    padding: 0.25rem 0.375rem;
    border-radius: calc(var(--radius) - 2px);
    background-color: oklch(var(--cheat-surface));
    border: 1px solid oklch(var(--cheat-border));
    display: inline-block;
    align-self: flex-start;
    line-height: 1.25rem;
  }
/* === Thought-flash terminal hint — subtle flickering glyph ===
     A faint cheat-accent violet glyph that flickers at the bottom of
     the ThoughtFlashOverlay when the active thought carries a
     terminalUnlockCode. Uses a steps() timing function to match the
     existing glitch aesthetic (cheat-glitch, cheat-cursor-blink).
     Positioned near the bottom of the overlay; pointer-events stay
     disabled via the parent .thought-flash class. */
.thought-flash-terminal-hint {
    position: absolute;
    left: 50%;
    bottom: 0.375rem;
    transform: translateX(-50%);
    color: oklch(var(--cheat-accent-bright));
    opacity: 0.3;
    font-family: var(--font-mono), monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-shadow: 0 0 6px oklch(var(--cheat-accent) / 0.35);
    animation: thought-terminal-hint-flicker 1.6s steps(4) infinite;
    pointer-events: none;
    white-space: nowrap;
  }
/* Thought indicator — pulsing cyan dot signaling a thought is available */
.thought-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.5rem;
    background-color: oklch(var(--thought-surface) / 0.6);
    border: 1px solid oklch(var(--thought-border) / 0.4);
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(var(--thought-caption) / 0.65);
    transition: var(--transition-smooth);
  }
.thought-indicator[data-active="true"] {
    border-color: oklch(var(--thought-indicator) / 0.6);
    color: oklch(var(--thought-indicator));
  }
.thought-indicator-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background-color: oklch(var(--thought-indicator-idle));
    flex-shrink: 0;
    transition: var(--transition-smooth);
  }
.thought-indicator[data-active="true"] .thought-indicator-dot {
    background-color: oklch(var(--thought-indicator));
    box-shadow: 0 0 6px oklch(var(--thought-indicator) / 0.6);
    animation: thought-indicator-pulse 1.8s ease-in-out infinite;
  }
/* === Comment Stream — live YouTube viewer reactions overlay ===
     Monospace scrolling comment overlay with scanline treatment.
     Sits on top of the YouTube upload simulation. Four tone channels
     reuse existing semantic families: supportive (cyan), skeptical
     (amber), spam (muted), viral hype (green/success). New comments
     slide in from the bottom; a vertical scanline drifts across. */
.comment-stream {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    background-color: oklch(var(--comment-surface));
    border: 1px solid oklch(var(--comment-border));
    border-radius: var(--radius);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.125rem;
    max-height: 14rem;
  }
/* Vertical scanline drift overlay — the "CRT" treatment */
.comment-stream-scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      oklch(var(--comment-scanline) / 0.035) 2px,
      oklch(var(--comment-scanline) / 0.035) 4px
    );
    z-index: 1;
  }
.comment-stream-scanline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-image: linear-gradient(
      90deg,
      transparent,
      oklch(var(--comment-scanline) / 0.25),
      transparent
    );
    animation: scanline-scroll 6s linear infinite;
  }
/* Individual comment row — slides in from the bottom */
.comment-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.1875rem 0;
    color: oklch(var(--comment-text));
    animation: comment-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.comment-row-username {
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }
.comment-row-text {
    color: oklch(var(--comment-text) / 0.9);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
.comment-row-timestamp {
    color: oklch(var(--comment-timestamp));
    font-size: 0.625rem;
    flex-shrink: 0;
    margin-left: auto;
  }
/* Tone variants — username + a subtle left-border tint per tone */
.comment-row[data-tone="supportive"] .comment-row-username {
    color: oklch(var(--comment-tone-supportive));
  }
.comment-row[data-tone="supportive"] {
    border-left: 2px solid oklch(var(--comment-tone-supportive) / 0.4);
    padding-left: 0.375rem;
  }
.comment-row[data-tone="skeptical"] .comment-row-username {
    color: oklch(var(--comment-tone-skeptical));
  }
.comment-row[data-tone="skeptical"] {
    border-left: 2px solid oklch(var(--comment-tone-skeptical) / 0.4);
    padding-left: 0.375rem;
  }
.comment-row[data-tone="spam"] .comment-row-username {
    color: oklch(var(--comment-tone-spam));
  }
.comment-row[data-tone="spam"] .comment-row-text {
    color: oklch(var(--comment-tone-spam) / 0.75);
    font-style: italic;
  }
.comment-row[data-tone="spam"] {
    border-left: 2px solid oklch(var(--comment-tone-spam) / 0.3);
    padding-left: 0.375rem;
    opacity: 0.7;
  }
.comment-row[data-tone="hype"] .comment-row-username {
    color: oklch(var(--comment-tone-hype));
  }
.comment-row[data-tone="hype"] .comment-row-text {
    color: oklch(var(--comment-tone-hype) / 0.95);
    font-weight: 600;
  }
.comment-row[data-tone="hype"] {
    border-left: 2px solid oklch(var(--comment-tone-hype) / 0.5);
    padding-left: 0.375rem;
  }
/* === Economic Choice Cards — AdoptionOffer-style decisions ===
     Two variants surface in the ChromaPlex focus content as new
     sections following the existing self-gating pattern. Both
     follow the existing card pattern: 3px left border, mono eyebrow,
     display title, body description, mono effect readout, choice
     buttons. Challenge = amber/red (increases costs, reduces
     income). Opportunity = green (earn/win money with trade-offs). */
.econ-choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid oklch(var(--border));
    border-left-width: 3px;
    border-radius: var(--radius);
    transition: var(--transition-smooth);
    overflow: hidden;
  }
.econ-choice-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
.econ-choice-card-title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: oklch(var(--card-foreground));
  }
.econ-choice-card-desc {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: oklch(var(--muted-foreground));
    line-height: 1.375rem;
  }
.econ-choice-card-effect {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: oklch(var(--econ-effect-readout));
    padding: 0.375rem 0.5rem;
    background-color: oklch(var(--econ-effect-readout) / 0.06);
    border: 1px solid oklch(var(--econ-effect-readout) / 0.2);
    border-radius: calc(var(--radius) - 2px);
  }
.econ-choice-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }
/* Challenge variant — amber accent, red severe edge */
.econ-choice-card[data-variant="challenge"] {
    background-color: oklch(var(--econ-challenge-surface));
    border-color: oklch(var(--econ-challenge-border) / 0.45);
    border-left-color: oklch(var(--econ-challenge-accent));
  }
.econ-choice-card[data-variant="challenge"]:hover {
    border-color: oklch(var(--econ-challenge-border) / 0.7);
    border-left-color: oklch(var(--econ-challenge-severe));
  }
.econ-choice-card[data-variant="challenge"] .econ-choice-card-eyebrow {
    color: oklch(var(--econ-challenge-accent));
  }
/* Opportunity variant — green accent */
.econ-choice-card[data-variant="opportunity"] {
    background-color: oklch(var(--econ-opportunity-surface));
    border-color: oklch(var(--econ-opportunity-border) / 0.45);
    border-left-color: oklch(var(--econ-opportunity-accent));
  }
.econ-choice-card[data-variant="opportunity"]:hover {
    border-color: oklch(var(--econ-opportunity-border) / 0.7);
    border-left-color: oklch(var(--econ-opportunity-accent));
    transform: translateY(-1px);
  }
.econ-choice-card[data-variant="opportunity"] .econ-choice-card-eyebrow {
    color: oklch(var(--econ-opportunity-accent));
  }
/* Choice buttons — accept (green) / decline (red), mono labels */
.econ-choice-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
  }
.econ-choice-button[data-action="accept"] {
    background-color: oklch(var(--econ-choice-accept-surface));
    color: oklch(var(--econ-choice-accept));
    border-color: oklch(var(--econ-choice-accept) / 0.5);
  }
.econ-choice-button[data-action="accept"]:hover {
    background-color: oklch(var(--econ-choice-accept) / 0.18);
    border-color: oklch(var(--econ-choice-accept));
    box-shadow: 0 0 0 1px oklch(var(--econ-choice-accept) / 0.3), 0 0 12px -2px
      oklch(var(--econ-choice-accept) / 0.4);
  }
.econ-choice-button[data-action="decline"] {
    background-color: oklch(var(--econ-choice-decline-surface));
    color: oklch(var(--econ-choice-decline));
    border-color: oklch(var(--econ-choice-decline) / 0.5);
  }
.econ-choice-button[data-action="decline"]:hover {
    background-color: oklch(var(--econ-choice-decline) / 0.18);
    border-color: oklch(var(--econ-choice-decline));
    box-shadow: 0 0 0 1px oklch(var(--econ-choice-decline) / 0.3), 0 0 12px -2px
      oklch(var(--econ-choice-decline) / 0.4);
  }
.econ-choice-button:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.econ-choice-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
  }
/* === Sound Controls Cluster (header right) ===
     Reuses lang-trigger-surface shell pattern so the cluster reads as
     part of the operations console, not bolted-on chrome. */
.sound-control-cluster {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background-color: oklch(var(--lang-trigger-surface));
    border: 1px solid oklch(var(--border) / 0.5);
    border-radius: var(--radius);
    font-family: var(--font-mono), monospace;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
.sound-control-cluster:hover {
    border-color: oklch(var(--lang-trigger-border-hover) / 0.55);
  }
.sound-mute-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: calc(var(--radius) - 2px);
    background-color: transparent;
    color: oklch(var(--muted-foreground));
    border: 1px solid oklch(var(--border) / 0.6);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color
      0.18s ease, box-shadow 0.18s ease;
  }
.sound-mute-toggle:hover {
    color: oklch(var(--primary));
    border-color: oklch(var(--primary) / 0.6);
  }
.sound-mute-toggle[data-muted="false"] {
    color: oklch(var(--primary));
    background-color: oklch(var(--primary) / 0.12);
    border-color: oklch(var(--primary) / 0.5);
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.25), 0 0 10px -2px
      oklch(var(--primary) / 0.4);
  }
.sound-mute-toggle:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.sound-volume-slider {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    width: 5.5rem;
    height: 0.25rem;
    background-color: oklch(var(--muted));
    border-radius: 9999px;
    cursor: pointer;
    outline: none;
  }
.sound-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: oklch(var(--primary));
    border: 1px solid oklch(var(--primary));
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.3), 0 0 8px -1px
      oklch(var(--primary) / 0.6);
    -webkit-transition: box-shadow 0.18s ease, transform 0.18s ease;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
  }
.sound-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.45), 0 0 12px -1px
      oklch(var(--primary) / 0.8);
  }
.sound-volume-slider::-moz-range-thumb {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: oklch(var(--primary));
    border: 1px solid oklch(var(--primary));
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.3), 0 0 8px -1px
      oklch(var(--primary) / 0.6);
  }
.sound-volume-slider:focus-visible {
    box-shadow: 0 0 0 2px oklch(var(--ring) / 0.5);
  }
.sound-volume-slider:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
/* === Thought History Log ===
     Self-gating section following the existing ChromaPlex section pattern.
     Reuses comment-stream column-reverse pattern so newest entries
     appear at the bottom and slide in. */
.thought-history-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: oklch(var(--comment-surface));
    border: 1px solid oklch(var(--comment-border));
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
  }
.thought-history-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      0deg,
      oklch(var(--comment-scanline) / 0.04) 0px,
      oklch(var(--comment-scanline) / 0.04) 1px,
      transparent 1px,
      transparent 3px
    );
  }
.thought-history-list {
    display: flex;
    flex-direction: column-reverse;
    max-height: 14rem;
    overflow-y: auto;
    gap: 0.375rem;
    padding-right: 0.25rem;
  }
.thought-history-entry {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0.625rem;
    align-items: start;
    padding: 0.5rem 0.625rem;
    background-color: oklch(var(--card) / 0.5);
    border-left: 3px solid oklch(var(--thought-border) / 0.45);
    border-radius: calc(var(--radius) - 2px);
    animation: history-slide-in 0.3s ease-out both;
  }
.thought-history-thumb {
    width: 2.5rem;
    height: 2.5rem;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: calc(var(--radius) - 4px);
    border: 1px solid oklch(var(--thought-border) / 0.4);
    filter: blur(3px) sepia(0.4) hue-rotate(140deg) saturate(1.6) contrast(1.1);
    mix-blend-mode: screen;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.thought-history-entry-eyebrow {
    font-family: var(--font-mono), monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(var(--muted-foreground));
    margin-bottom: 0.125rem;
  }
.thought-history-entry-cryptic {
    font-family: var(--font-mono), monospace;
    font-size: 0.8125rem;
    color: oklch(var(--thought-caption));
    line-height: 1.35;
    margin-bottom: 0.25rem;
  }
.thought-history-entry-hint {
    font-family: var(--font-body), sans-serif;
    font-size: 0.8125rem;
    color: oklch(var(--comment-text));
    line-height: 1.4;
    opacity: 0.85;
  }
.thought-history-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-family: var(--font-mono), monospace;
    font-size: 0.6875rem;
    color: oklch(var(--comment-timestamp));
  }
.thought-history-entry-kind {
    color: oklch(var(--primary));
  }
.thought-history-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: 1rem;
    font-family: var(--font-mono), monospace;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(var(--muted-foreground));
    text-align: center;
    border: 1px dashed oklch(var(--border) / 0.5);
    border-radius: calc(var(--radius) - 2px);
  }
/* === $RFX Wallet integration — premium shop header + screenshot frame ===
     The real rfx-wallet UI is wrapped in a classified-terminal frame so it
     reads as an intercepted in-game element, not a bolted-on web widget.
     Mystik: the player should doubt whether the wallet is part of the
     game or reality. The $RFX currency hue (≈65°) sits between
     premium-gold (85°) and warning-amber (75°) so real-money value reads
     as distinct from in-game luxury or threat. */
.rfx-wallet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background-color: oklch(var(--rfx-surface));
    border: 1px solid oklch(var(--rfx-border) / 0.45);
    border-radius: var(--radius);
    box-shadow: var(--rfx-glow-shadow);
  }
.rfx-wallet-header-eyebrow {
    font-family: var(--font-mono), monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: oklch(var(--rfx-eyebrow));
  }
.rfx-wallet-balance {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    font-family: var(--font-mono), monospace;
    font-variant-numeric: tabular-nums;
  }
.rfx-wallet-balance-symbol {
    font-size: 0.875rem;
    font-weight: 700;
    color: oklch(var(--rfx-currency));
    text-shadow: 0 0 8px oklch(var(--rfx-currency) / 0.45);
  }
.rfx-wallet-balance-amount {
    font-size: 1rem;
    font-weight: 600;
    color: oklch(var(--rfx-currency-bright));
    text-shadow: 0 0 10px oklch(var(--rfx-currency) / 0.5);
  }
.rfx-wallet-balance-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(var(--rfx-eyebrow));
  }
/* Wallet screenshot frame — terminal-intercepted real wallet UI.
     Wraps a screenshot/img of rfx-wallet in a scanline-treated cyan
     border so it reads as captured intelligence, not a live embed. */
.rfx-wallet-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid oklch(var(--rfx-frame-border) / 0.5);
    border-radius: var(--radius);
    background-color: oklch(var(--rfx-frame-surface));
  }
.rfx-wallet-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      oklch(var(--rfx-frame-scanline) / 0.04) 2px,
      oklch(var(--rfx-frame-scanline) / 0.04) 4px
    );
  }
.rfx-wallet-frame-label {
    position: absolute;
    top: 0.5rem;
    left: 0.625rem;
    z-index: 2;
    font-family: var(--font-mono), monospace;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: oklch(var(--rfx-frame-label));
    text-shadow: 0 0 6px oklch(var(--rfx-frame-label) / 0.5);
  }
.rfx-wallet-frame-img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0.85) contrast(1.05);
    opacity: 0.92;
  }
/* === RFX Boost cards — extend premium-package with data-variant ===
     Three category accents via data-category: equipment (cyan, reuses
     primary), ai-upgrade (violet, reuses premium-tier-asi), intel
     (amber, reuses warning). Subtle 3px left-border colors, not full
     surface tints — keeps the premium gold shell intact while signaling
     boost category at a glance. */
.premium-package[data-variant="rfx-boost"] {
    border-left-width: 3px;
    border-left-color: oklch(var(--rfx-currency) / 0.55);
    background-color: oklch(var(--rfx-surface));
  }
.premium-package[data-variant="rfx-boost"]:hover {
    border-left-color: oklch(var(--rfx-currency));
    box-shadow: var(--rfx-glow-shadow);
  }
.premium-package[data-variant="rfx-boost"] .premium-package-price {
    color: oklch(var(--rfx-price));
    text-shadow: 0 0 8px oklch(var(--rfx-currency) / 0.4);
  }
.premium-package[data-variant="rfx-boost"] .premium-package-badge {
    background-color: oklch(var(--rfx-currency) / 0.18);
    color: oklch(var(--rfx-currency-bright));
    border: 1px solid oklch(var(--rfx-currency) / 0.5);
  }
/* Category accents — 3px left-border tint per boost family. */
.premium-package[data-category="equipment"] {
    border-left-color: oklch(var(--rfx-boost-equipment) / 0.6);
  }
.premium-package[data-category="equipment"]:hover {
    border-left-color: oklch(var(--rfx-boost-equipment));
  }
.premium-package[data-category="equipment"] .premium-package-eyebrow {
    color: oklch(var(--rfx-boost-equipment));
  }
.premium-package[data-category="ai-upgrade"] {
    border-left-color: oklch(var(--rfx-boost-ai-upgrade) / 0.6);
  }
.premium-package[data-category="ai-upgrade"]:hover {
    border-left-color: oklch(var(--rfx-boost-ai-upgrade));
  }
.premium-package[data-category="ai-upgrade"] .premium-package-eyebrow {
    color: oklch(var(--rfx-boost-ai-upgrade));
  }
.premium-package[data-category="intel"] {
    border-left-color: oklch(var(--rfx-boost-intel) / 0.6);
  }
.premium-package[data-category="intel"]:hover {
    border-left-color: oklch(var(--rfx-boost-intel));
  }
.premium-package[data-category="intel"] .premium-package-eyebrow {
    color: oklch(var(--rfx-boost-intel));
  }
/* === End-game Domino Popup — fourth-wall-breaking finale ===
     Full-screen overlay deeper than focus-backdrop; slow fade-in (1.2s)
     so the question arrives like a realization, not a jump scare.
     Neon-cyan glitch text effect on the domino question; two button
     styles — calm/accepting (low-contrast outline) and uneasy/haunting
     (amber-red filled, subtle glow). Shown at both victory and defeat
     so the doubt lingers regardless of outcome. */
.domino-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: oklch(var(--domino-backdrop) / 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: domino-fade-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.domino-panel {
    position: relative;
    width: min(34rem, 100%);
    padding: 2.25rem 1.75rem 1.75rem;
    background-color: oklch(var(--domino-surface));
    border: 1px solid oklch(var(--domino-border) / 0.5);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px oklch(var(--domino-border) / 0.15), 0 24px 64px -12px
      oklch(0.03 0.015 260 / 0.85), 0 8px 24px -8px oklch(0.03 0.015 260 / 0.6);
  }
.domino-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-image: linear-gradient(
      90deg,
      oklch(var(--domino-accent)),
      oklch(var(--domino-question-bright)),
      oklch(var(--domino-accent))
    );
    border-radius: var(--radius) var(--radius) 0 0;
  }
.domino-panel-eyebrow {
    font-family: var(--font-mono), monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: oklch(var(--domino-muted));
    margin-bottom: 1.25rem;
    text-align: center;
  }
/* Glitch question — neon-cyan text with chromatic-aberration
     text-shadow jitter and clip-path slicing via the domino-glitch
     keyframes. The text itself is stable; the glitch is a filter
     layer, not a transform of meaning. */
.domino-question {
    font-family: var(--font-display), sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: oklch(var(--domino-question));
    text-shadow: 0 0 10px oklch(var(--domino-question) / 0.6), 0 0 20px
      oklch(var(--domino-question) / 0.3);
    animation: domino-glitch 3.4s steps(7) infinite;
    margin-bottom: 1.75rem;
  }
.domino-question-sub {
    font-family: var(--font-body), sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: oklch(var(--domino-muted));
    text-align: center;
    margin-bottom: 1.75rem;
    opacity: 0.85;
  }
/* Choice buttons — two tones that both close the popup but leave a
     lingering doubt through wording. Calm = low-contrast cyan outline
     (rational dismissal). Uneasy = amber-red filled glow (the answer
     that admits the domino may be falling). */
.domino-choices {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
.domino-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-mono), monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
  }
.domino-choice[data-tone="calm"] {
    background-color: oklch(var(--domino-choice-calm-surface));
    color: oklch(var(--domino-choice-calm-foreground));
    border-color: oklch(var(--domino-choice-calm) / 0.45);
  }
.domino-choice[data-tone="calm"]:hover {
    border-color: oklch(var(--domino-choice-calm));
    background-color: oklch(var(--domino-choice-calm) / 0.12);
    box-shadow: 0 0 0 1px oklch(var(--domino-choice-calm) / 0.3), 0 0 12px -2px
      oklch(var(--domino-choice-calm) / 0.35);
  }
.domino-choice[data-tone="uneasy"] {
    background-color: oklch(var(--domino-choice-uneasy-surface));
    color: oklch(var(--domino-choice-uneasy-foreground));
    border-color: oklch(var(--domino-choice-uneasy) / 0.5);
    box-shadow: var(--domino-choice-uneasy-glow);
  }
.domino-choice[data-tone="uneasy"]:hover {
    border-color: oklch(var(--domino-choice-uneasy));
    box-shadow: 0 0 0 1px oklch(var(--domino-choice-uneasy) / 0.55), 0 0 20px
      -2px oklch(var(--domino-choice-uneasy) / 0.65);
  }
.domino-choice:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
/* === GitHub source reference — terminal-style non-link ===
     Mono, low-opacity, "source:" label. Shown as searchable text (not
     a hyperlink) to add mystik — the player who searches it finds the
     real open-source repo and doubts what is game vs reality. */
.github-source {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-mono), monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: oklch(var(--github-source-text));
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
    cursor: default;
  }
.github-source-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: oklch(var(--github-source-label));
  }
.github-source-repo {
    color: oklch(var(--github-source-text));
  }
/* === Cheat Code Terminal — hidden reality-editing input ===
     A hidden terminal-style input that lets the player bend prior
     choices. Black surface (deeper than card), JetBrains Mono,
     cyan-to-violet focus border, blinking cursor, scanline ::before.
     The terminal is hidden until summoned; the glitch plays on
     activation; the confirmation state lingers as a steady violet
     reminder that reality was edited. One free activation per game;
     further activations via boost purchase. */
.cheat-terminal {
    position: relative;
    background-color: oklch(var(--cheat-surface));
    color: oklch(var(--cheat-surface-foreground));
    border: 1px solid oklch(var(--cheat-border-subtle));
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-family: var(--font-mono), monospace;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    transition: var(--transition-smooth);
    overflow: hidden;
  }
.cheat-terminal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      oklch(var(--cheat-scanline) / 0.04) 2px,
      oklch(var(--cheat-scanline) / 0.04) 4px
    );
    z-index: 0;
  }
.cheat-terminal > * {
    position: relative;
    z-index: 1;
  }
.cheat-terminal:focus-within {
    border-color: oklch(var(--cheat-border));
    box-shadow: var(--cheat-glow-shadow);
    background-image: linear-gradient(
      135deg,
      oklch(var(--cheat-accent) / 0.06),
      oklch(var(--primary) / 0.04)
    );
  }
.cheat-terminal-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: oklch(var(--cheat-surface-foreground));
    font-family: var(--font-mono), monospace;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    caret-color: oklch(var(--cheat-cursor));
  }
.cheat-terminal-input::-moz-placeholder {
    color: oklch(var(--cheat-muted));
    font-style: italic;
  }
.cheat-terminal-input::placeholder {
    color: oklch(var(--cheat-muted));
    font-style: italic;
  }
.cheat-terminal-cursor {
    display: inline-block;
    width: 0.5rem;
    height: 1rem;
    background-color: oklch(var(--cheat-cursor));
    box-shadow: 0 0 8px oklch(var(--cheat-cursor) / 0.7);
    animation: cheat-cursor-blink 1.1s steps(2) infinite;
    vertical-align: middle;
    margin-left: 0.125rem;
  }
.cheat-terminal:focus-within .cheat-terminal-cursor {
    animation: cheat-cursor-blink 0.55s steps(2) infinite;
  }
/* Glitch activation — clone of domino-glitch pattern but with
     violet/magenta + cyan chromatic aberration text-shadow instead
     of cyan/red. Plays on cheat activation; text stays readable
     while adding atmospheric corruption. */
.cheat-glitch {
    animation: cheat-glitch 3.4s steps(7) infinite;
  }
/* Cheat-code boost cards — extend premium-package with data-variant.
     Clones the rfx-boost pattern but uses cheat-accent violet/magenta
     for border-left + badge. Reuses the premium gold shell structure. */
.premium-package[data-variant="cheat-code"] {
    border-left-width: 3px;
    border-left-color: oklch(var(--cheat-accent) / 0.55);
    background-color: oklch(var(--cheat-surface-raised));
  }
.premium-package[data-variant="cheat-code"]:hover {
    border-left-color: oklch(var(--cheat-accent));
    box-shadow: var(--cheat-glow-shadow);
  }
.premium-package[data-variant="cheat-code"] .premium-package-price {
    color: oklch(var(--cheat-accent-bright));
    text-shadow: 0 0 8px oklch(var(--cheat-accent) / 0.4);
  }
.premium-package[data-variant="cheat-code"] .premium-package-badge {
    background-color: oklch(var(--cheat-accent) / 0.18);
    color: oklch(var(--cheat-accent-bright));
    border: 1px solid oklch(var(--cheat-accent) / 0.5);
  }
/* Confirmed state — steady violet glow, non-animated. Lingers as
      a reminder that reality was edited; no shimmer or pulse. */
.cheat-confirmed {
    background-color: oklch(var(--cheat-confirmed-surface));
    border: 1px solid oklch(var(--cheat-confirmed-border) / 0.55);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px oklch(var(--cheat-confirmed-border) / 0.25), 0 0 14px
      -2px oklch(var(--cheat-confirmed-border) / 0.35);
    color: oklch(var(--cheat-confirmed-foreground));
    font-family: var(--font-mono), monospace;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.5rem 0.75rem;
  }
/* === Roomy onboarding hint — wider, more readable toast variant ===
     The compact toast-card-compact (0.75rem font, 0.3125rem padding)
     clipped Danish compounds like "SAML DIN FØRSTE DATAKILDE". This
     variant widens to min(30rem, 100%) so it never overflows small
     screens, restores the normal toast-card padding (slightly more
     generous horizontally for breathing room), raises the font to
     0.875rem with line-height 1.5 for comfortable Danish reading,
     and stacks title / body / action with at least 0.5rem gap so
     each part reads as its own line. Keeps the cyan left border via
     .toast-severity-calm and the cyberpunk toast-surface shell. */
.toast-card-roomy {
    width: min(30rem, 100%);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
.toast-card-roomy .toast-title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: oklch(var(--toast-surface-foreground));
  }
.toast-card-roomy .toast-body {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: oklch(var(--toast-surface-foreground) / 0.85);
  }
.toast-card-roomy .toast-action {
    font-family: var(--font-mono), monospace;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(var(--toast-calm));
    align-self: flex-start;
    margin-top: 0.125rem;
  }
/* === Config overview panel — post-assembly rig summary ===
     Appears inside the existing .focus-panel after a successful
     buildServerWithHardware call, replacing the instant close. Reuses
     the focus-surface shell and cyan accent identity. Layout: a
     prominent rig image at top, a component list (GPU / motherboard /
     network card) with thumbnail + name + price + tier badge, a total
     cost row, and action buttons (close + build another). Width follows
     the parent .focus-panel (min(42rem, 100%)) so it never exceeds the
     overlay. */
/* Rig image — full-width banner with subtle neon border glow. The
     image is loaded asynchronously from object-storage; a placeholder
     shimmer shows while it loads. Rounded corners + a 1px cyan border
     at 35% opacity + a soft outer glow signal "assembled hardware"
     without overpowering the dark shell. */
.config-overview-rig-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: calc(var(--radius) + 4px);
    border: 1px solid oklch(var(--focus-border) / 0.35);
    box-shadow: 0 0 0 1px oklch(var(--focus-border) / 0.1), 0 0 18px -4px
      oklch(var(--focus-border) / 0.25), 0 8px 24px -8px
      oklch(0.05 0.02 260 / 0.6);
    background-color: oklch(var(--focus-surface));
  }
/* Loading placeholder — subtle cyan shimmer while the rig image
     fetches from object-storage. Sits behind the <img>; hidden once
     the image paints. */
.config-overview-rig-image-wrap {
    position: relative;
    width: 100%;
    border-radius: calc(var(--radius) + 4px);
    overflow: hidden;
  }
.config-overview-rig-image-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      100deg,
      oklch(var(--focus-surface)) 30%,
      oklch(var(--focus-border) / 0.08) 50%,
      oklch(var(--focus-surface)) 70%
    );
    background-size: 200% 100%;
    animation: premium-shimmer 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
  }
.config-overview-rig-image-wrap > .config-overview-rig-image {
    position: relative;
    z-index: 1;
  }
/* Component row — GPU / motherboard / network card. Grid layout:
     thumbnail | name+tier | price. Reuses the portfolio-row ledger
     aesthetic (mono, tabular-nums, alternating surface) so the
     overview reads as a classified parts manifest. */
.config-overview-component-row {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background-color: oklch(var(--portfolio-row-surface));
    border: 1px solid oklch(var(--border) / 0.5);
    border-radius: var(--radius);
    transition: var(--transition-smooth);
  }
.config-overview-component-row:hover {
    background-color: oklch(var(--portfolio-row-hover));
    border-color: oklch(var(--focus-border) / 0.4);
  }
.config-overview-component-name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: oklch(var(--focus-surface-foreground));
    min-width: 0;
  }
.config-overview-component-tier {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.1875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid currentColor;
    font-family: var(--font-mono), monospace;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
.config-overview-component-tier[data-tier="entry"] {
    color: oklch(var(--muted-foreground));
    background-color: oklch(var(--muted) / 0.4);
  }
.config-overview-component-tier[data-tier="mid"] {
    color: oklch(var(--primary));
    background-color: oklch(var(--primary) / 0.1);
  }
.config-overview-component-tier[data-tier="high"] {
    color: oklch(var(--success));
    background-color: oklch(var(--success) / 0.1);
  }
.config-overview-component-tier[data-tier="elite"] {
    color: oklch(var(--premium-gold));
    background-color: oklch(var(--premium-gold) / 0.1);
  }
.config-overview-component-price {
    font-family: var(--font-mono), monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
    font-weight: 600;
    color: oklch(var(--primary));
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
/* Component thumbnail — small square image (64px) with rounded
     corners and a subtle border. Used inside .config-overview-component-row
     to show the assembled part. Loads async from object-storage. */
.config-overview-component-thumb {
    width: 4rem;
    height: 4rem;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border) / 0.6);
    background-color: oklch(var(--card));
    flex-shrink: 0;
  }
/* Total cost row — emphasized summary line below the component list.
     Mono, tabular-nums, cyan accent on the figure, slightly larger
     font + top border to separate it from the parts above. */
.config-overview-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    margin-top: 0.5rem;
    border-top: 1px solid oklch(var(--focus-border) / 0.3);
    font-family: var(--font-mono), monospace;
  }
.config-overview-total-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--focus-muted));
  }
.config-overview-total-value {
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    font-weight: 600;
    color: oklch(var(--primary));
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px oklch(var(--primary) / 0.4);
  }
/* === Hardware component card image — assembly picker thumbnails ===
     Per-component images shown in the HardwareConfigDialog picker
     (GPU / motherboard / network card cards). Small thumbnail or
     full-card-width banner with rounded corners and a subtle border
     that brightens to the cyan accent when the card is selected,
     giving immediate visual feedback of the chosen part. Loads
     async from object-storage with a placeholder shimmer behind. */
.hardware-component-card-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border) / 0.5);
    background-color: oklch(var(--card));
    transition: var(--transition-smooth);
  }
.hardware-component-card-image-wrap {
    position: relative;
    width: 100%;
    border-radius: calc(var(--radius) + 2px);
    overflow: hidden;
  }
.hardware-component-card-image-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      100deg,
      oklch(var(--card)) 30%,
      oklch(var(--primary) / 0.06) 50%,
      oklch(var(--card)) 70%
    );
    background-size: 200% 100%;
    animation: premium-shimmer 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
  }
/* Selected state — border brightens to the cyan accent + soft glow */
.hardware-component-card-image[data-selected="true"] {
    border-color: oklch(var(--primary) / 0.8);
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.3), 0 0 14px -2px
      oklch(var(--primary) / 0.4);
  }
.hardware-component-card-image:hover {
    border-color: oklch(var(--primary) / 0.5);
  }
@keyframes cheat-cursor-blink {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
/* Thought-flash terminal hint flicker — steps() timing matches the
     existing cheat-glitch / cheat-cursor-blink aesthetic. Varies opacity
     between 0.1 and 0.4 so the glyph reads as a subtle corrupted signal
     rather than a steady pulse. */
@keyframes thought-terminal-hint-flicker {
    0% {
      opacity: 0.1;
    }
    25% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.15;
    }
    75% {
      opacity: 0.35;
    }
    100% {
      opacity: 0.1;
    }
  }
@keyframes cheat-glitch {
    0%,
    100% {
      transform: translate(0, 0);
      text-shadow: 0 0 10px oklch(0.68 0.22 325 / 0.6), 0 0 20px
        oklch(0.68 0.22 325 / 0.3);
      clip-path: inset(0 0 0 0);
    }
    10% {
      transform: translate(-2px, 1px);
      text-shadow: 2px 0 oklch(0.78 0.18 195 / 0.7), -2px 0
        oklch(0.68 0.22 325 / 0.7), 0 0 12px oklch(0.68 0.22 325 / 0.5);
      clip-path: inset(20% 0 30% 0);
    }
    20% {
      transform: translate(2px, -1px);
      text-shadow: -2px 0 oklch(0.78 0.18 195 / 0.6), 2px 0
        oklch(0.68 0.22 325 / 0.6);
      clip-path: inset(50% 0 10% 0);
    }
    30% {
      transform: translate(-1px, 0);
      text-shadow: 1px 0 oklch(0.78 0.21 328 / 0.8), -1px 0
        oklch(0.55 0.2 320 / 0.5), 0 0 14px oklch(0.68 0.22 325 / 0.6);
      clip-path: inset(0 0 60% 0);
    }
    45% {
      transform: translate(1px, 1px);
      text-shadow: 0 0 10px oklch(0.68 0.22 325 / 0.6), 0 0 20px
        oklch(0.68 0.22 325 / 0.3);
      clip-path: inset(0 0 0 0);
    }
    60% {
      transform: translate(0, -1px);
      text-shadow: -1px 0 oklch(0.78 0.21 328 / 0.7), 1px 0
        oklch(0.55 0.2 320 / 0.6);
      clip-path: inset(40% 0 20% 0);
    }
    75% {
      transform: translate(-1px, 0);
      text-shadow: 0 0 10px oklch(0.68 0.22 325 / 0.6), 0 0 20px
        oklch(0.68 0.22 325 / 0.3);
      clip-path: inset(0 0 0 0);
    }
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}
.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2");
  font-display: swap;
}

.file\:inline-flex::file-selector-button > * {
    min-width: 0;
  }

.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * > * {
    min-width: 0;
  }

@media (min-width: 640px) {
  .sm\:flex > * {
    min-width: 0;
  }
}

@media (min-width: 768px) {
  .md\:flex > * {
    min-width: 0;
  }
}

.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
}

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

.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

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

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

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

.file\:h-7::file-selector-button {
  height: 1.75rem;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

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

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

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

.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

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

.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}

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

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

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

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

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.first\:border-l:first-child {
  border-left-width: 1px;
}

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

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

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

.hover\:border-\[oklch\(var\(--cheat-border\)\)\]:hover {
  border-color: oklch(var(--cheat-border));
}

.hover\:border-\[oklch\(var\(--cheat-border\)\/0\.7\)\]:hover {
  border-color: oklch(var(--cheat-border)/0.7);
}

.hover\:border-destructive\/60:hover {
  border-color: oklch(var(--destructive) / 0.6);
}

.hover\:border-premium-gold:hover {
  --tw-border-opacity: 1;
  border-color: oklch(var(--premium-gold) / var(--tw-border-opacity, 1));
}

.hover\:border-premium-gold\/50:hover {
  border-color: oklch(var(--premium-gold) / 0.5);
}

.hover\:border-premium-gold\/70:hover {
  border-color: oklch(var(--premium-gold) / 0.7);
}

.hover\:border-primary\/40:hover {
  border-color: oklch(var(--primary) / 0.4);
}

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

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

.hover\:bg-\[oklch\(var\(--cheat-accent\)\/0\.05\)\]:hover {
  background-color: oklch(var(--cheat-accent)/0.05);
}

.hover\:bg-\[oklch\(var\(--cheat-accent\)\/0\.15\)\]:hover {
  background-color: oklch(var(--cheat-accent)/0.15);
}

.hover\:bg-\[oklch\(var\(--cheat-accent\)\/0\.28\)\]:hover {
  background-color: oklch(var(--cheat-accent)/0.28);
}

.hover\:bg-\[oklch\(var\(--destructive\)\/0\.2\)\]:hover {
  background-color: oklch(var(--destructive)/0.2);
}

.hover\:bg-\[oklch\(var\(--primary\)\/0\.2\)\]:hover {
  background-color: oklch(var(--primary)/0.2);
}

.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

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

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

.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-premium-gold\/20:hover {
  background-color: oklch(var(--premium-gold) / 0.2);
}

.hover\:bg-premium-gold\/25:hover {
  background-color: oklch(var(--premium-gold) / 0.25);
}

.hover\:bg-premium-gold\/5:hover {
  background-color: oklch(var(--premium-gold) / 0.05);
}

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

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

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

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

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

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

.hover\:text-\[oklch\(var\(--cheat-accent-bright\)\)\]:hover {
  color: oklch(var(--cheat-accent-bright));
}

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

.hover\:text-destructive:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

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

.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.hover\:text-premium-gold:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--premium-gold) / var(--tw-text-opacity, 1));
}

.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}

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

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

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

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_0_1px_oklch\(var\(--primary\)\/0\.4\)\]:hover {
  --tw-shadow: 0 0 0 1px oklch(var(--primary)/0.4);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-4:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:text-premium-gold:hover {
    color: oklch(var(--premium-gold));
    text-shadow: 0 0 8px oklch(var(--premium-gold) / 0.35);
  }

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

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

.focus\:border-\[oklch\(var\(--i18n-value-border-focus\)\)\]:focus {
  border-color: oklch(var(--i18n-value-border-focus));
}

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

.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

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

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

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

.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

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

.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.focus-visible\:bg-primary\/5:focus-visible {
  background-color: oklch(var(--primary) / 0.05);
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-offset-\[-2px\]:focus-visible {
  outline-offset: -2px;
}

.focus-visible\:outline-destructive:focus-visible {
  outline-color: oklch(var(--destructive) / 1);
}

.focus-visible\:outline-premium-gold:focus-visible {
  outline-color: oklch(var(--premium-gold) / 1);
}

.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}

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

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

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

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

.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}

.focus-visible\:ring-\[oklch\(var\(--cheat-border\)\)\]:focus-visible {
  --tw-ring-color: oklch(var(--cheat-border));
}

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

.focus-visible\:ring-primary:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--primary) / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-primary\/30:focus-visible {
  --tw-ring-color: oklch(var(--primary) / 0.3);
}

.focus-visible\:ring-primary\/40:focus-visible {
  --tw-ring-color: oklch(var(--primary) / 0.4);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}

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

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

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

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

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

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

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

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

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

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

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}

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

.peer:disabled ~ .peer-disabled\:opacity-50 {
  opacity: 0.5;
}

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

.has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}

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

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

.aria-selected\:text-muted-foreground[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

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

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

.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
}

.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
}

.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
}

.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
}

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

.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
}

.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
}

.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}

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

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

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

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

.data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
}

.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}

.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}

.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}

.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}

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

.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}

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

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

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

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

.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}

.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}

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

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

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

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

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

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

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

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

.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}

.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}

.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}

.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}

.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}

.data-\[active\=true\]\:border-ring[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}

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

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

.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

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

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

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

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}

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

.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}

.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}

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

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

.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

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

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

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

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

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

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

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

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

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

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

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

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

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

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

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

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

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

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

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

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

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

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

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

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

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

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

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

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

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

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

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

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

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

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

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}

.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
}

.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
}

.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
}

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

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

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

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

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
}

.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

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

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

.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
}

.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}

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

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}

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

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

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
}

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

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}

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

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

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
}

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

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: calc(var(--radius) - 2px);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}

.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}

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

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
}

.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}

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

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}

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

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

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}

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

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

.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}

.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}

.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}

.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}

.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}

.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}

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

.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}

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

.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}

@media (min-width: 640px) {

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:max-w-lg {
    max-width: 32rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:max-w-xs {
    max-width: 20rem;
  }

  .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_1fr_auto\] {
    grid-template-columns: 1fr 1fr auto;
  }

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

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

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

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

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:pl-2\.5 {
    padding-left: 0.625rem;
  }

  .sm\:pr-2\.5 {
    padding-right: 0.625rem;
  }

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

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

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
    max-width: 24rem;
  }
}

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

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

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

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

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

  .md\:gap-1\.5 {
    gap: 0.375rem;
  }

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

  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

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

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

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }

  .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 {
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

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

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

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

  .lg\:grid-cols-\[60\%_40\%\] {
    grid-template-columns: 60% 40%;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {

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

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

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

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

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}

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

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

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

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}

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

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

.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}

.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}

.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}

.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}

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

.\[\&\>svg\]\:translate-y-0\.5>svg {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:text-current>svg {
  color: currentColor;
}

.\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

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

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

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

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

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: oklch(var(--muted) / 1);
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted) / 1);
}

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

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

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

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

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}

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

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

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}

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

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}

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

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

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

a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}

a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}

a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}

a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}

a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}