*, ::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: 'Inter', 'DM Sans', system-ui, sans-serif; /* 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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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 {
    --radius: 1rem;
    --font-brand: "Inter", "DM Sans", system-ui, sans-serif;
    --font-ui: "Inter", "DM Sans", system-ui, sans-serif;
    --font-accent: "Satoshi", "DM Sans", sans-serif;
    --font-display: "Satoshi", "DM Sans", sans-serif;
    --font-body: "Inter", "DM Sans", system-ui, sans-serif;
    --font-mono: "Geist Mono", monospace;
    --font-wallet: "Space Grotesk", "Satoshi", sans-serif;
    /* ── Dark mode — only theme ── */
    --background: 0.04 0 0;
    --foreground: 0.92 0.006 240;
    --card: 0.07 0 0;
    --card-foreground: 0.92 0.006 240;
    --popover: 0.14 0.015 240;
    --popover-foreground: 0.92 0.006 240;
    --primary: 0.92 0.006 240;
    --primary-foreground: 0.08 0.012 240;
    --secondary: 0.18 0.012 240;
    --secondary-foreground: 0.92 0.006 240;
    --muted: 0.2 0.01 240;
    --muted-foreground: 0.65 0.015 240;
    --accent: 0.55 0.16 290;
    --accent-foreground: 0.95 0.006 240;
    --destructive: 0.55 0.22 10;
    --destructive-foreground: 1 0 0;
    --border: 0.22 0.012 240;
    --input: 0.14 0.015 240;
    --ring: 0.55 0.16 290;
    /* Brand tokens */
    --mint: 0.55 0.16 290;
    --cyan: 0.55 0.16 290;
    --magenta: 0.65 0.22 10;
    --echo-cyan: 0.55 0.16 290;
    --chart-1: 0.55 0.16 290;
    --chart-2: 0.65 0.16 240;
    --chart-3: 0.769 0.188 70.08;
    --chart-4: 0.55 0.14 240;
    --chart-5: 0.5 0.12 240;
    /* ── Tier system: project contribution tiers ── */
    --tier-iron-badge: 0.45 0.08 240;
    --tier-iron-accent: 0.5 0.12 240;
    --tier-iron-fill: 0.48 0.1 245;
    --tier-bronze-badge: 0.54 0.16 45;
    --tier-bronze-accent: 0.58 0.18 42;
    --tier-bronze-fill: 0.56 0.17 44;
    --tier-silver-badge: 0.65 0.12 240;
    --tier-silver-accent: 0.68 0.14 238;
    --tier-silver-fill: 0.66 0.13 239;
    --tier-gold-badge: 0.62 0.18 55;
    --tier-gold-accent: 0.65 0.2 52;
    --tier-gold-fill: 0.64 0.19 54;
    --tier-diamond-badge: 0.92 0.04 240;
    --tier-diamond-accent: 0.94 0.05 238;
    --tier-diamond-fill: 0.91 0.06 240;
    --sidebar: 0.14 0.015 240;
    --sidebar-foreground: 0.92 0.006 240;
    --sidebar-primary: 0.55 0.16 290;
    --sidebar-primary-foreground: 0.08 0.012 240;
    --sidebar-accent: 0.18 0.012 240;
    --sidebar-accent-foreground: 0.92 0.006 240;
    --sidebar-border: 0.22 0.012 240;
    --sidebar-ring: 0.55 0.16 290;
    /* Cycle theme — purple */
    --cycle-accent: oklch(0.55 0.16 290);
    --cycle-accent-r: 139;
    --cycle-accent-g: 92;
    --cycle-accent-b: 246;
    --cycle-accent-rgb: 139, 92, 246;
    --cycle-glow-color: 139, 92, 246;

    /* Audio reactive */
    --era-amp: 0;
    --era-bass: 0;
    --era-treble: 0;
    --era-peak: 0;

    /* ── Dark palette — nighttime trading desk ── */
    --bg-primary: #07090f;
    --bg-secondary: #0b0f1a;
    --bg-tertiary: #0f1424;
    --card-bg: #111827;
    --card-border: rgba(255, 255, 255, 0.07);
    --card-glow: 0 0 24px rgba(168, 85, 247, 0.12), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
    --card-surface-glow: 0 0 24px rgba(168, 85, 247, 0.12), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
    --text-primary: rgba(255, 255, 255, 0.93);
    --text-secondary: rgba(255, 255, 255, 0.62);
    --text-tertiary: rgba(255, 255, 255, 0.4);
    --accent-primary: linear-gradient(135deg, #9333ea, #6d28d9);
    --accent-soft: rgba(168, 85, 247, 0.14);
    --accent-glow: rgba(168, 85, 247, 0.28);
    --pill-bg: rgba(255, 255, 255, 0.05);
    --pill-border: rgba(255, 255, 255, 0.09);
    --input-bg: rgba(255, 255, 255, 0.05);
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.45);
    --progress-track: rgba(255, 255, 255, 0.07);
    --divider: rgba(255, 255, 255, 0.06);
    --accent-gradient: linear-gradient(
      135deg,
      #5b21b6 0%,
      #7c3aed 35%,
      #a78bfa 70%,
      #ede9fe 100%
    );
    --accent-gradient-soft: linear-gradient(
      135deg,
      rgba(91, 33, 182, 0.3),
      rgba(124, 58, 237, 0.3),
      rgba(167, 139, 250, 0.3)
    );
    --accent-gradient-glow: 0 0 16px rgba(124, 58, 237, 0.45), 0 0 32px
      rgba(167, 139, 250, 0.18);
    --rarity-common: rgba(180, 185, 200, 0.7);
    --rarity-rare: rgba(255, 110, 180, 0.95);
    --rarity-ultra: rgba(120, 190, 255, 0.95);
    --rarity-mint-start: #ede9fe;
    --rarity-mint-mid: #a78bfa;
    --rarity-mint-pink: rgba(232, 121, 249, 0.9);
    --rarity-mint-end: #7dd3fc;
    --rarity-mint-glow: rgba(167, 139, 250, 0.5);
    --rarity-mint-shimmer: rgba(125, 211, 252, 0.35);

    /* ── Echo semantic surface tokens — dark ── */
    --echo-bg: #050505;
    --echo-bg-alpha: rgba(5, 5, 5, 0.98);
    --echo-surface: #0b0b0b;
    --echo-surface-alt: #0b0b0b;
    --echo-elevated: #111111;
    --echo-border: rgba(255, 255, 255, 0.08);
    --echo-border-subtle: rgba(255, 255, 255, 0.06);
    --echo-border-faint: rgba(255, 255, 255, 0.04);
    --echo-text: #ffffff;
    --echo-text-dim: #b8b8b8;
    --echo-text-secondary: #7a7a7a;
    --echo-text-muted: #4a4a4a;
    --echo-text-dark: rgba(255, 255, 255, 0.45);
    --profile-stat-bg: #151922;
    --profile-leaderboard-row-bg: #1b2130;
    --profile-leaderboard-highlight-bg: rgba(180, 150, 255, 0.06);
    --echo-nav-bg: rgba(15, 17, 21, 0.98);
    --echo-nav-border: rgba(255, 255, 255, 0.06);
    --echo-header-bg: rgba(15, 17, 21, 0.98);
    --echo-header-border: rgba(255, 255, 255, 0.06);

    /* Glow tokens — dark */
    --glow-violet-shadow: 0 0 10px rgba(180, 150, 255, 0.15), 0 0 24px
      rgba(180, 150, 255, 0.07);
    --glow-cyan-shadow: 0 0 10px rgba(180, 150, 255, 0.15);
    --glow-blue-shadow: 0 0 16px 4px rgba(180, 150, 255, 0.12), 0 0 32px 8px
      rgba(180, 150, 255, 0.06);

    --message-sent-bg: 0.55 0.16 290;
    --message-sent-text: 0.95 0.006 240;
    --message-received-bg: 0.14 0.015 240;
    --message-received-text: 0.92 0.006 240;
    --chat-card-bg: 0.11 0.012 240;
    --chat-card-border: 0.22 0.012 240;
    --search-input-bg: 0.12 0.014 240;
    --search-input-border: 0.55 0.16 290;
    --search-input-focus-glow: 0.55 0.16 290;
    --attachment-sheet-bg: 0.1 0.01 240;
    --attachment-sheet-border: 0.22 0.012 240;
    --chat-list-title: 0.92 0.006 240;
    --chat-list-preview: 0.65 0.015 240;
    --chat-list-time: 0.5 0.01 240;

    --chat-bubble-sent: 0.55 0.16 290;
    --chat-bubble-sent-text: 0.98 0.005 0;
    --chat-bubble-sent-shadow: 0 0 12px rgba(139, 92, 246, 0.28);
    --chat-bubble-received: 0.65 0.08 280;
    --chat-bubble-received-bg: 0.14 0.015 240;
    --chat-bubble-received-border: 0.22 0.012 240;
    --chat-bubble-received-text: 0.92 0.006 240;
    --chat-timer-text: 0.65 0.015 240;
    --chat-receipt-text: 0.55 0.01 240;
    --chat-input-bg: 0.14 0.015 240;
    --chat-input-border: 0.22 0.012 240;
    --chat-input-text: 0.92 0.006 240;

    --app-tile-bg: 0.12 0.012 240;
    --app-tile-border: 0.22 0.012 240;
    --app-tile-border-hover: 0.55 0.16 290;
    --app-tile-glow: rgba(139, 92, 246, 0.12);
    --app-tile-glow-hover: rgba(139, 92, 246, 0.28);
    --app-browser-overlay-bg: rgba(15, 17, 21, 0.98);
    --app-browser-overlay-border: rgba(255, 255, 255, 0.06);
    --app-browser-header-height: 56px;
    --app-grid-gap: 16px;
    --app-grid-card-radius: 16px;

    /* ── Echo upload flow — release creation ── */
    --upload-bg: 0.032 0 0;
    --upload-surface: 0.07 0 0;
    --upload-surface-alt: 0.11 0 0;
    --upload-dropzone-bg: 0.045 0 0;
    --upload-dropzone-border: 0.17 0 0;
    --upload-dropzone-border-active: 0.55 0.16 290;
    --upload-chip-bg: 0.07 0 0;
    --upload-chip-border: 0.16 0 0;
    --upload-progress-track: 0.13 0 0;
    --upload-progress-fill: 0.55 0.16 290;
    --upload-field-bg: 0.06 0 0;
    --upload-field-border: 0.16 0 0;
    --upload-field-focus: 0.55 0.16 290;
    --upload-text: 0.97 0.004 240;
    --upload-text-dim: 0.62 0.008 240;
    --upload-text-muted: 0.4 0.006 240;
    --publish-ready: 0.55 0.16 290;
    --publish-ready-fg: 0.98 0.005 0;
    --publish-disabled: 0.16 0.008 240;
    --publish-disabled-fg: 0.4 0.006 240;
    /* ── Echo auth — Internet Identity sign in / sign out ── */
    --auth-ready: 0.55 0.16 290;
    --auth-ready-fg: 0.98 0.005 0;
    --auth-ghost-bg: 0.07 0 0;
    --auth-ghost-bg-hover: 0.11 0 0;
    --auth-ghost-border: 0.16 0 0;
    --auth-ghost-border-hover: 0.55 0.16 290;
    --auth-ghost-fg: 0.92 0.006 240;
    --auth-ghost-fg-hover: 0.97 0.004 240;
    /* ── Echo auth flow — sign-in method modal + email login/signup/reset ──
       Additive to the auth family. The modal is a near-black elevated card;
       the two method choices are large ghost cards; the email forms are
       minimal stacked fields on the same surface. Purple is reserved for the
       primary CTA and the active/focus ring only. */
    --auth-modal-bg: 0.06 0 0;
    --auth-modal-border: 0.18 0 0;
    --auth-modal-overlay: 0.02 0 0 / 0.72;
    --auth-modal-title: 0.95 0.006 240;
    --auth-modal-sub: 0.55 0.008 240;
    --auth-method-bg: 0.07 0 0;
    --auth-method-bg-hover: 0.11 0 0;
    --auth-method-border: 0.16 0 0;
    --auth-method-border-hover: 0.24 0.012 240;
    --auth-method-fg: 0.92 0.006 240;
    --auth-method-fg-dim: 0.55 0.008 240;
    --auth-method-icon: 0.75 0.06 290;
    --auth-field-bg: 0.05 0 0;
    --auth-field-border: 0.16 0 0;
    --auth-field-focus: 0.55 0.16 290;
    --auth-field-fg: 0.95 0.006 240;
    --auth-field-placeholder: 0.42 0.006 240;
    --auth-label: 0.55 0.008 240;
    --auth-error-fg: 0.7 0.2 20;
    --auth-error-bg: 0.55 0.22 10 / 0.12;
    --auth-error-border: 0.55 0.22 10 / 0.35;
    --auth-link: 0.65 0.015 240;
    --auth-link-hover: 0.95 0.006 240;
    --auth-divider: 0.16 0 0;
    --auth-secondary-fg: 0.62 0.008 240;
    /* ── Echo Track Listing — supply & price single-select pills ── */
    --listing-bg: 0.032 0 0;
    --listing-surface: 0.07 0 0;
    --listing-surface-alt: 0.11 0 0;
    --listing-border: 0.16 0 0;
    --listing-pill-bg: 0.07 0 0;
    --listing-pill-border: 0.17 0 0;
    --listing-pill-fg: 0.62 0.008 240;
    --listing-pill-selected-bg: 0.55 0.16 290;
    --listing-pill-selected-border: 0.55 0.16 290;
    --listing-pill-selected-fg: 0.98 0.005 0;
    --listing-label: 0.4 0.006 240;
    --listing-summary-bg: 0.11 0.012 240;
    --listing-summary-border: 0.22 0.012 240;
    /* ── Echo Admin Review — real submission rows ── */
    --review-row-bg: 0.07 0 0;
    --review-row-border: 0.16 0 0;
    --review-pending-bg: 0.18 0.05 70;
    --review-pending-fg: 0.82 0.1 70;
    --review-approve: 0.62 0.15 150;
    --review-approve-fg: 0.98 0.005 0;
    --review-reject: 0.55 0.22 10;
    --review-reject-fg: 0.98 0.005 0;
    /* ── Echo Admin Active Listings — swipe-reveal delete + confirm ──
       Additive to the review system. Rows are dark Echo surfaces; the swipe
       action uses a brighter destructive red so it reads against the dark row;
       the confirm modal reuses the sheet surface with a red destructive CTA. */
    --admin-bg: 0.032 0 0;
    --admin-surface: 0.07 0 0;
    --admin-surface-alt: 0.11 0 0;
    --admin-border: 0.16 0 0;
    --admin-border-strong: 0.24 0.012 240;
    --admin-text: 0.92 0.006 240;
    --admin-text-dim: 0.62 0.008 240;
    --admin-text-muted: 0.4 0.006 240;
    --admin-accent: 0.627 0.265 303.9;
    --admin-accent-fg: 0.98 0.005 0;
    --admin-delete: 0.58 0.23 22;
    --admin-delete-fg: 0.98 0.005 0;
    --admin-delete-soft: 0.55 0.22 10 / 0.14;
    --admin-delete-border: 0.55 0.22 10 / 0.4;
    --admin-collected: 0.62 0.15 150;
    --admin-live: 0.72 0.16 150;
    --admin-live-border: 0.62 0.15 150 / 0.35;
    --admin-toast-bg: 0.09 0.008 240;
    --admin-toast-border: 0.22 0.012 240;
    --admin-toast-fg: 0.92 0.006 240;
    --admin-toast-success: 0.62 0.15 150;
    /* ── Echo Profile avatar-loop — living portrait capture ── */
    --avatar-ring: 0.55 0.16 290;
    --avatar-ring-soft: 0.5 0.1 290;
    --avatar-cam-chip-bg: 0.16 0.012 240;
    --avatar-cam-chip-border: 0.3 0.03 290;
    --avatar-cam-chip-fg: 0.92 0.006 240;
    --avatar-capture-bg: 0.02 0 0;
    --avatar-capture-surface: 0.07 0 0;
    --avatar-preview-border: 0.22 0.012 240;
    --avatar-preview-border-live: 0.55 0.16 290;
    --avatar-record-idle: 0.2 0.01 240;
    --avatar-record-idle-fg: 0.92 0.006 240;
    --avatar-record: 0.58 0.22 25;
    --avatar-record-fg: 0.98 0.005 0;
    --avatar-fallback-bg: 0.16 0.012 240;
    --avatar-fallback-fg: 0.75 0.06 290;
    /* ── Echo Wallet — SOL balance, deposit/withdraw, activity ── */
    --wallet-bg: 0.032 0 0;
    --wallet-surface: 0.07 0 0;
    --wallet-surface-alt: 0.11 0 0;
    --wallet-border: 0.16 0 0;
    --wallet-text: 0.92 0.006 240;
    --wallet-text-dim: 0.62 0.008 240;
    --wallet-text-muted: 0.4 0.006 240;
    --wallet-accent: 0.55 0.16 290;
    --wallet-accent-fg: 0.98 0.005 0;
    --wallet-ghost-bg: 0.07 0 0;
    --wallet-ghost-border: 0.16 0 0;
    --wallet-ghost-border-hover: 0.55 0.16 290;
    --wallet-field-bg: 0.06 0 0;
    --wallet-field-border: 0.16 0 0;
    --wallet-field-focus: 0.55 0.16 290;
    --wallet-pos: 0.62 0.15 150;
    --wallet-neg: 0.55 0.22 10;
    --wallet-qr-bg: 0.09 0 0;
    --wallet-qr-fg: 0.85 0.01 240;
    /* ── Echo Wallet ckSOL deposit — status + live balance ── */
    --wallet-pending-bg: 0.18 0.05 70;
    --wallet-pending-fg: 0.82 0.1 70;
    --wallet-success-bg: 0.62 0.15 150 / 0.14;
    --wallet-success-fg: 0.72 0.16 150;
    --wallet-success-border: 0.62 0.15 150 / 0.35;
    --wallet-error-bg: 0.55 0.22 10 / 0.14;
    --wallet-error-fg: 0.7 0.2 20;
    --wallet-error-border: 0.55 0.22 10 / 0.35;
    --wallet-live-bg: 0.55 0.16 290;
    --wallet-live-fg: 0.98 0.005 0;
    --wallet-sig-bg: 0.06 0 0;
    --wallet-sig-border: 0.16 0 0;
    --wallet-sig-focus: 0.55 0.16 290;
    --wallet-copy-bg: 0.07 0 0;
    --wallet-copy-border: 0.16 0 0;
    --wallet-copy-border-hover: 0.55 0.16 290;
    --wallet-copy-fg: 0.92 0.006 240;
    /* ── Echo Collect — confirmation sheet + success animation ── */
    --collect-sheet-bg: 0.09 0.008 240;
    --collect-sheet-border: 0.22 0.012 240;
    --collect-overlay-bg: 0.02 0 0;
    --collect-confirm: 0.55 0.16 290;
    --collect-confirm-fg: 0.98 0.005 0;
    --collect-cancel-bg: 0.07 0 0;
    --collect-cancel-border: 0.16 0 0;
    --collect-cancel-fg: 0.92 0.006 240;
    --collect-price-bg: 0.11 0.012 240;
    --collect-price-border: 0.22 0.012 240;
    --collect-price-fg: 0.92 0.006 240;
    --collect-supply-fg: 0.62 0.008 240;
    --collect-soldout-bg: 0.16 0.008 240;
    --collect-soldout-fg: 0.4 0.006 240;
    --collect-check: 0.62 0.15 150;
    --collect-glow: 0.55 0.16 290;
    /* ── Echo Collect — purchase status notes ──
       Additive to the collect sheet. Destructive red for the 'Not enough ECHO'
       rejection, amber for the self-purchase rejection, and green for the
       post-purchase confirmation + refreshed balance flash. */
    --collect-error-bg: 0.55 0.22 10 / 0.14;
    --collect-error-fg: 0.7 0.2 20;
    --collect-error-border: 0.55 0.22 10 / 0.35;
    --collect-self-bg: 0.18 0.05 70;
    --collect-self-fg: 0.82 0.1 70;
    --collect-self-border: 0.18 0.05 70 / 0.6;
    --collect-success-bg: 0.62 0.15 150 / 0.14;
    --collect-success-fg: 0.72 0.16 150;
    --collect-success-border: 0.62 0.15 150 / 0.35;
    --collect-balance-flash: 0.62 0.15 150;

    /* ── Echo Dance feed — vertical short-form video feed ── */
    --dance-bg: 0.032 0 0;
    --dance-card-bg: 0.06 0 0;
    --dance-card-border: 0.16 0 0;
    --dance-overlay-top: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0) 40%
    );
    --dance-overlay-bottom: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0) 45%
    );
    --dance-track-fg: 0.92 0.006 240;
    --dance-caption-fg: 0.78 0.01 240;
    --dance-rail-bg: rgba(5, 5, 5, 0.55);
    --dance-rail-border: rgba(255, 255, 255, 0.1);
    --dance-rail-fg: 0.95 0.006 240;
    --dance-rail-fg-dim: 0.72 0.01 240;
    --dance-fire-active: 0.85 0.2 55;
    --dance-comment-sheet-bg: 0.09 0.008 240;
    --dance-comment-sheet-border: 0.22 0.012 240;
    --dance-comment-row-bg: 0.07 0 0;
    --dance-comment-row-border: 0.16 0 0;
    --dance-input-bg: 0.06 0 0;
    --dance-input-border: 0.16 0 0;
    --dance-send-bg: 0.55 0.16 290;
    --dance-send-fg: 0.98 0.005 0;
    /* ── Echo Dance Post creation flow — full-screen studio overlay ── */
    --dance-create-bg: 0.02 0 0;
    --dance-create-surface: 0.06 0 0;
    --dance-create-surface-alt: 0.1 0 0;
    --dance-create-elevated: 0.13 0 0;
    --dance-create-border: 0.16 0 0;
    --dance-create-border-strong: 0.24 0.012 240;
    --dance-create-text: 0.95 0.006 240;
    --dance-create-text-dim: 0.65 0.01 240;
    --dance-create-text-muted: 0.42 0.006 240;
    --dance-create-accent: 0.627 0.265 303.9;
    --dance-create-accent-fg: 0.98 0.005 0;
    --dance-create-accent-gradient: linear-gradient(135deg, #7c3aed, #a855f7);
    --dance-create-record: 0.58 0.22 25;
    --dance-create-record-fg: 0.98 0.005 0;
    --dance-create-ok: 0.62 0.15 150;
    --dance-create-edition-fg: 0.75 0.12 290;
    /* ── Camera recording step — additive tokens ── */
    --dance-create-progress-track: 0.18 0.012 240;
    --dance-create-countdown-fg: 0.98 0.005 0;
    /* ── Final Post Preview step — additive tokens ── */
    --dance-create-caption-bg: 0.06 0 0;
    --dance-create-caption-border: 0.16 0 0;
    --dance-create-summary-bg: 0.1 0.012 240;
    --dance-create-summary-border: 0.22 0.012 240;
    --dance-create-post-error: 0.7 0.2 20;
    /* ── Echo Dance post card — polished immersive feed card ── */
    --dance-play-bg: 0.627 0.265 303.9;
    --dance-play-fg: 0.98 0.005 0;
    --dance-play-glow: 0.627 0.265 303.9;
    --dance-creator-fg: 0.95 0.006 240;
    --dance-creator-dim: 0.72 0.01 240;
    --dance-loop-chip-bg: 0.06 0 0;
    --dance-loop-chip-border: 0.55 0.16 290;
    --dance-placeholder-bg: 0.045 0 0;
    --dance-placeholder-fg: 0.32 0.01 240;
    /* ── Echo Desktop Landing — informational landing page ──
       Additive to the Echo surface system. A near-black canvas slightly deeper
       than the app background; clean cards on hairline borders; purple reserved
       for the CTA, step numerals, token-flow arrows, and focus/active states;
       muted gray for secondary text. Subtle (not excessive) neon glow. */
    --landing-bg: 0.028 0 0;
    --landing-bg-soft: 0.04 0 0;
    --landing-surface: 0.055 0 0;
    --landing-surface-alt: 0.075 0 0;
    --landing-elevated: 0.09 0 0;
    --landing-border: 0.14 0 0;
    --landing-border-strong: 0.2 0.01 240;
    --landing-text: 0.95 0.006 240;
    --landing-text-dim: 0.62 0.008 240;
    --landing-text-muted: 0.42 0.006 240;
    --landing-accent: 0.55 0.16 290;
    --landing-accent-fg: 0.98 0.005 0;
    --landing-accent-soft: 0.55 0.16 290 / 0.12;
    --landing-accent-border: 0.55 0.16 290 / 0.35;
    --landing-cta: 0.55 0.16 290;
    --landing-cta-fg: 0.98 0.005 0;
    --landing-ghost-bg: 0.06 0 0;
    --landing-ghost-bg-hover: 0.1 0 0;
    --landing-ghost-border: 0.15 0 0;
    --landing-ghost-border-hover: 0.24 0.012 240;
    --landing-ghost-fg: 0.92 0.006 240;
    --landing-step-num: 0.75 0.12 290;
    --landing-step-num-bg: 0.55 0.16 290 / 0.1;
    --landing-ok: 0.62 0.15 150;
    --landing-ok-soft: 0.62 0.15 150 / 0.12;
    --landing-ok-border: 0.62 0.15 150 / 0.35;
    --landing-pending: 0.82 0.1 70;
    --landing-pending-soft: 0.18 0.05 70;
    --landing-pending-border: 0.18 0.05 70 / 0.6;
    --landing-bad: 0.55 0.22 10;
    --landing-bad-soft: 0.55 0.22 10 / 0.12;
    --landing-bad-border: 0.55 0.22 10 / 0.35;
    --landing-qr-bg: 0.09 0 0;
    --landing-qr-fg: 0.85 0.01 240;
    --landing-divider: 0.12 0 0;
    /* Landing gradients — subtle ambient purple neon, never full-page wash */
    --landing-gradient-accent: linear-gradient(135deg, #7c3aed, #a855f7);
    --landing-gradient-subtle: radial-gradient(
      1200px 600px at 50% -10%,
      rgba(124, 58, 237, 0.16),
      transparent 60%
    );
    /* Landing glow — subtle, restrained neon */
    --landing-glow-card: 0 0 24px rgba(139, 92, 246, 0.1), inset 0 1px 0
      rgba(255, 255, 255, 0.05);
    --landing-glow-cta: 0 8px 24px oklch(var(--landing-accent) / 0.28), inset 0
      1px 0 rgba(255, 255, 255, 0.25);
    /* ── Echo Post Terminal — voice-note composer sheet ──
       Additive to the Echo sheet system. A clearly visible light elevated
       bottom sheet that contrasts with the dark Feed so every control is
       legible on mobile Safari. Purple is the accent for the idle record
       state, active states, and the ready Post CTA; red is the live-recording
       state; the timer is monospace. Purple is reserved for active/accent
       only, matching the rest of Echo. */
    --terminal-bg: 0.97 0.006 240;
    --terminal-surface: 0.93 0.01 240;
    --terminal-surface-alt: 0.88 0.012 240;
    --terminal-elevated: 0.84 0.014 240;
    --terminal-border: 0.82 0.016 240;
    --terminal-border-strong: 0.7 0.02 240;
    --terminal-text: 0.18 0.02 240;
    --terminal-text-dim: 0.4 0.02 240;
    --terminal-text-muted: 0.55 0.02 240;
    --terminal-accent: 0.55 0.16 290;
    --terminal-accent-fg: 0.98 0.005 0;
    --terminal-accent-soft: 0.55 0.16 290 / 0.12;
    --terminal-accent-border: 0.55 0.16 290 / 0.35;
    --terminal-record: 0.55 0.22 25;
    --terminal-record-fg: 0.98 0.005 0;
    --terminal-ok: 0.5 0.16 150;
    --terminal-ok-soft: 0.5 0.16 150 / 0.14;
    --terminal-ok-border: 0.5 0.16 150 / 0.35;
    --terminal-disabled: 0.85 0.012 240;
    --terminal-disabled-fg: 0.55 0.02 240;
    --terminal-field-bg: 0.9 0.012 240;
    --terminal-field-border: 0.78 0.02 240;
    --terminal-field-focus: 0.55 0.16 290;
    --terminal-photo-frame: 0.9 0.012 240;
    --terminal-photo-border: 0.78 0.02 240;
    --terminal-glow: 0.55 0.16 290;
    --terminal-gradient: linear-gradient(135deg, #7c3aed, #a855f7);
    /* ── Echo Media Post feed cards — photo+audio / audio-only / photo-only ──
       Additive to the Echo card system. Converts the old music feed card into
       a media-post card. The photo becomes the main visual (photo+audio shows a
       circular purple play/pause over the photo; photo-only shows no controls);
       audio-only shows a clean audio bar with play/pause + duration and NO empty
       image placeholder. Creator username stays tappable. Purple reserved for
       play/active states, matching the rest of Echo. */
    --media-card-bg: 0.06 0 0;
    --media-card-border: 0.16 0 0;
    --media-photo-frame: 0.045 0 0;
    --media-photo-border: 0.16 0 0;
    --media-play-bg: 0.55 0.16 290;
    --media-play-fg: 0.98 0.005 0;
    --media-play-glow: 0.55 0.16 290;
    --media-creator-fg: 0.95 0.006 240;
    --media-creator-dim: 0.72 0.01 240;
    --media-audio-surface: 0.07 0 0;
    --media-audio-border: 0.16 0 0;
    --media-audio-track: 0.13 0 0;
    --media-audio-fill: 0.55 0.16 290;
    --media-duration-fg: 0.62 0.008 240;
    --media-time-fg: 0.55 0.008 240;
    --media-wave: 0.55 0.16 290;
  }

  * {
  border-color: oklch(var(--border));
}

  body {
  background-color: oklch(var(--background));
  color: oklch(var(--foreground));
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1200px) {

  .container {
    max-width: 1200px;
  }
}
.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;
}
.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-\[2px\] {
  inset: 2px;
}
.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-24 {
  bottom: 6rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-16 {
  right: 4rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-10 {
  top: 2.5rem;
}
.top-16 {
  top: 4rem;
}
.top-3 {
  top: 0.75rem;
}
.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-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[10000\] {
  z-index: 10000;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[300\] {
  z-index: 300;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[700\] {
  z-index: 700;
}
.z-\[70\] {
  z-index: 70;
}
.z-\[800\] {
  z-index: 800;
}
.z-\[80\] {
  z-index: 80;
}
.z-\[9000\] {
  z-index: 9000;
}
.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-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;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.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-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-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.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-4 {
  width: 1rem;
  height: 1rem;
}
.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-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[68px\] {
  height: 68px;
}
.h-\[720px\] {
  height: 720px;
}
.h-\[72px\] {
  height: 72px;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[calc\(100dvh_-_140px\)\] {
  height: calc(100dvh - 140px);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[50vh\] {
  max-height: 50vh;
}
.max-h-\[55vh\] {
  max-height: 55vh;
}
.max-h-\[78vh\] {
  max-height: 78vh;
}
.max-h-\[82vh\] {
  max-height: 82vh;
}
.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-screen {
  min-height: 100vh;
}
.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-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.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-\[18px\] {
  width: 18px;
}
.w-\[200px\] {
  width: 200px;
}
.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-\[1180px\] {
  max-width: 1180px;
}
.max-w-\[60\%\] {
  max-width: 60%;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.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-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));
}
.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 pulse {

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

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.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;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-items-start {
  justify-items: start;
}
.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-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.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));
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.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;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1.25rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.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-t-2xl {
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}
.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-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-input {
  border-color: oklch(var(--input));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-violet-300\/40 {
  border-color: rgb(196 181 253 / 0.4);
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.border-t-violet-300 {
  --tw-border-opacity: 1;
  border-top-color: rgb(196 181 253 / var(--tw-border-opacity, 1));
}
.bg-\[rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  background-color: rgba(0,0,0,0.6);
}
.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-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.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-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.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-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.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;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.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-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-40 {
  padding-bottom: 10rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-\[68px\] {
  padding-bottom: 68px;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.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-5 {
  padding-right: 1.25rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-9 {
  padding-top: 2.25rem;
}
.pt-\[72px\] {
  padding-top: 72px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[26px\] {
  font-size: 26px;
}
.text-\[40px\] {
  font-size: 40px;
}
.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;
}
.capitalize {
  text-transform: capitalize;
}
.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-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.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-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.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-foreground {
  color: oklch(var(--foreground));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.text-violet-300\/70 {
  color: rgb(196 181 253 / 0.7);
}
.text-violet-400\/50 {
  color: rgb(167 139 250 / 0.5);
}
.text-violet-400\/80 {
  color: rgb(167 139 250 / 0.8);
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-\[0\.85\] {
  opacity: 0.85;
}
.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-album {
  --tw-shadow: 0 8px 40px 0 rgba(0,0,0,0.4);
  --tw-shadow-colored: 0 8px 40px 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-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-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);
}
.invert {
  --tw-invert: invert(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-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-blur-xl {
  --tw-backdrop-blur: blur(24px);
  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-\[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-150 {
  transition-duration: 150ms;
}
.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-0 {
  --tw-enter-opacity: 0;
}
.fade-out {
  --tw-exit-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.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;
}
/* Glow utilities */
.glow-violet {
    box-shadow: 0 0 20px rgba(var(--cycle-accent-rgb), 0.28), 0 0 60px
      rgba(var(--cycle-accent-rgb), 0.1);
  }
.glow-cyan {
    box-shadow: 0 0 20px rgba(var(--cycle-accent-rgb), 0.28);
  }
.glow-mint {
    text-shadow: 0 0 8px rgba(var(--cycle-accent-rgb), 0.6);
  }
.glow-magenta {
    text-shadow: 0 0 8px oklch(0.65 0.22 10 / 0.6);
  }
.glow-blue {
    box-shadow: 0 0 40px 8px rgba(var(--cycle-accent-rgb), 0.28), 0 0 80px 16px
      rgba(var(--cycle-accent-rgb), 0.12);
  }
.glow-mixed {
    box-shadow: 0 0 40px 12px rgba(0, 0, 0, 0.04), 0 0 80px 24px
      rgba(0, 0, 0, 0.02);
  }
.shadow-album {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15), 0 0 40px 8px rgba(0, 0, 0, 0.04);
  }
/* ── Releases filter pill — premium glowing pill style ── */
.releases-filter-pill-active {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.5) !important;
    transform: scale(1.05) !important;
    transition: all 0.25s ease !important;
  }
.releases-filter-pill-inactive {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.65) !important;
    transform: scale(1.0) !important;
    transition: all 0.25s ease !important;
  }
.releases-filter-pill-inactive:hover {
    color: rgba(255, 255, 255, 0.85) !important;
  }
/* ── Mint Pack button — dark mode only ── */
.mint-pack-btn-releases {
    background: linear-gradient(
      to bottom,
      #8b5cf6 0%,
      #7c3aed 45%,
      #5b21b6 100%
    ) !important;
    background-size: 200% 200% !important;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.3), 0 0 20px
      rgba(139, 92, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    animation: mintBtnShimmer 7s ease-in-out infinite !important;
  }
/* Panel utility */
.panel {
    background: var(--echo-surface);
    border: 1px solid var(--echo-border);
    border-radius: 16px;
    backdrop-filter: blur(10px) saturate(150%);
  }
/* ── Echo Desktop Landing — component utilities ──
     Reuses the dark Echo surface language. Cards are near-black surfaces with
     hairline borders and a subtle purple-tinted glow; the primary CTA is a
     purple neon fill; step numerals and flow arrows are the purple accent. */
.landing-card {
    background: oklch(var(--landing-surface));
    border: 1px solid oklch(var(--landing-border));
    border-radius: 20px;
    box-shadow: var(--landing-glow-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s
      ease;
  }
.landing-card:hover {
    border-color: oklch(var(--landing-accent-border));
    box-shadow: 0 0 28px rgba(139, 92, 246, 0.16), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
  }
.landing-section-label {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.72rem;
    color: oklch(var(--landing-accent));
  }
.landing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: oklch(var(--landing-cta));
    color: oklch(var(--landing-cta-fg));
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: var(--landing-glow-cta);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
.landing-cta:hover {
    opacity: 0.92;
    box-shadow: 0 8px 28px oklch(var(--landing-accent) / 0.4), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
  }
.landing-cta:active {
    transform: scale(0.98);
  }
.landing-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(var(--landing-accent) / 0.45), 0 8px 28px
      oklch(var(--landing-accent) / 0.4), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
  }
.landing-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: oklch(var(--landing-ghost-bg));
    border: 1px solid oklch(var(--landing-ghost-border));
    color: oklch(var(--landing-ghost-fg));
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s
      ease;
  }
.landing-ghost:hover {
    background: oklch(var(--landing-ghost-bg-hover));
    border-color: oklch(var(--landing-ghost-border-hover));
  }
.landing-ghost:active {
    transform: scale(0.98);
  }
.landing-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: oklch(var(--landing-step-num-bg));
    border: 1px solid oklch(var(--landing-accent-border));
    color: oklch(var(--landing-step-num));
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.14), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
  }
.landing-qr-frame {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    padding: 14px;
    background: #ffffff;
    border: 1px solid oklch(var(--landing-border-strong));
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 40px
      rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
  }
.landing-qr-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.landing-qr-inner svg {
    width: 100%;
    height: 100%;
    display: block;
  }
.landing-token-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
  }
.landing-token-pill--ok {
    background: oklch(var(--landing-ok-soft));
    border: 1px solid oklch(var(--landing-ok-border));
    color: oklch(var(--landing-ok));
  }
.landing-token-pill--pending {
    background: oklch(var(--landing-pending-soft));
    border: 1px solid oklch(var(--landing-pending-border));
    color: oklch(var(--landing-pending));
  }
.landing-token-pill--bad {
    background: oklch(var(--landing-bad-soft));
    border: 1px solid oklch(var(--landing-bad-border));
    color: oklch(var(--landing-bad));
  }
.landing-divider {
    height: 1px;
    background: oklch(var(--landing-divider));
  }
.landing-accent-text {
    background: var(--landing-gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
.landing-ambient {
    background: var(--landing-gradient-subtle);
  }
/* Landing entrance / float / glow animations — plain CSS classes so the
     bare class names used in the component actually run (Tailwind only
     generates animate-landing-* utilities from the keyframes). */
.landing-fade-up {
    animation: landing-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
.landing-float {
    animation: landing-float 6s ease-in-out infinite;
  }
.landing-pulse-glow {
    animation: landing-pulse-glow 3s ease-in-out infinite;
  }
/* ── Echo Post Terminal — voice-note composer sheet ──
     Additive to the Echo sheet system. A near-black elevated bottom sheet
     (fixed inset-0 z-[60] flex flex-col justify-end, max-h-[82vh], backdrop +
     Escape close) matching CreateDanceSheet/MintFlowModal. The record button
     is a large circular control: purple idle, red + pulsing ring when live.
     The timer is monospace. The Post CTA follows the .publish-btn language and
     is disabled until audio or photo exists. */
.terminal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(5, 5, 5, 0.72);
    backdrop-filter: blur(10px);
    animation: collect-fade-in 0.22s ease-out forwards;
  }
.terminal-sheet {
    background: oklch(var(--terminal-bg));
    border: 1px solid oklch(var(--terminal-border));
    border-radius: 24px 24px 0 0;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
    animation: collect-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
.terminal-title {
    color: oklch(var(--terminal-text));
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
.terminal-sub {
    color: oklch(var(--terminal-text-dim));
  }
.terminal-label {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.7rem;
    color: oklch(var(--terminal-text-muted));
  }
.terminal-timer {
    font-family: var(--font-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: oklch(var(--terminal-text));
  }
.terminal-timer--live {
    color: oklch(var(--terminal-record));
  }
.terminal-record-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: oklch(var(--terminal-accent));
    color: oklch(var(--terminal-accent-fg));
    box-shadow: 0 12px 40px oklch(var(--terminal-accent) / 0.32), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, background 0.18s ease, box-shadow 0.18s
      ease;
  }
.terminal-record-btn:active {
    transform: scale(0.94);
  }
.terminal-record-btn--live {
    background: oklch(var(--terminal-record));
    color: oklch(var(--terminal-record-fg));
    box-shadow: 0 12px 40px oklch(var(--terminal-record) / 0.4), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
    animation: terminal-rec-pulse 1.4s ease-out infinite;
  }
.terminal-record-btn--done {
    background: oklch(var(--terminal-ok));
    color: oklch(var(--terminal-accent-fg));
    box-shadow: 0 12px 40px oklch(var(--terminal-ok) / 0.32), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
  }
.terminal-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: oklch(var(--terminal-record));
    box-shadow: 0 0 8px oklch(var(--terminal-record) / 0.6);
  }
.terminal-rec-dot--live {
    animation: terminal-rec-blink 1.2s ease-in-out infinite;
  }
.terminal-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border-radius: 14px;
    background: oklch(var(--terminal-surface));
    border: 1px solid oklch(var(--terminal-border));
    color: oklch(var(--terminal-text));
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s
      ease;
  }
.terminal-chip:hover {
    background: oklch(var(--terminal-surface-alt));
    border-color: oklch(var(--terminal-border-strong));
  }
.terminal-chip:active {
    transform: scale(0.96);
  }
.terminal-chip--danger {
    color: oklch(var(--terminal-record));
    border-color: oklch(var(--terminal-record) / 0.4);
    background: oklch(var(--terminal-record) / 0.1);
  }
.terminal-chip--danger:hover {
    border-color: oklch(var(--terminal-record) / 0.6);
    background: oklch(var(--terminal-record) / 0.16);
  }
.terminal-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: oklch(var(--terminal-photo-frame));
    border: 1px solid oklch(var(--terminal-photo-border));
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 40px
      rgba(0, 0, 0, 0.55);
  }
.terminal-photo-frame--filled {
    border-color: rgba(255, 255, 255, 0.12);
  }
.terminal-photo-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.terminal-photo-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    background: oklch(var(--terminal-field-bg));
    border: 1px dashed oklch(var(--terminal-field-border));
    border-radius: 16px;
    color: oklch(var(--terminal-text-dim));
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
.terminal-photo-add:hover {
    border-color: oklch(var(--terminal-field-focus) / 0.6);
    color: oklch(var(--terminal-text));
    background: oklch(var(--terminal-surface));
  }
.terminal-post-btn {
    border-radius: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
.terminal-post-btn--ready {
    background: oklch(var(--terminal-accent));
    color: oklch(var(--terminal-accent-fg));
    box-shadow: 0 8px 24px oklch(var(--terminal-accent) / 0.28), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
  }
.terminal-post-btn--ready:active {
    transform: scale(0.98);
  }
.terminal-post-btn--disabled {
    background: oklch(var(--terminal-disabled));
    color: oklch(var(--terminal-disabled-fg));
    cursor: not-allowed;
  }
.terminal-ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.5rem 1rem;
    border-radius: 16px;
    background: oklch(var(--terminal-surface));
    border: 1px solid oklch(var(--terminal-border));
    color: oklch(var(--terminal-text));
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, background 0.18s ease, border-color 0.18s
      ease;
  }
.terminal-ghost-btn:hover {
    background: oklch(var(--terminal-surface-alt));
    border-color: oklch(var(--terminal-border-strong));
  }
.terminal-ghost-btn:active {
    transform: scale(0.98);
  }
/* ── Echo Media Post feed cards — shared card + variant treatment ──
     Additive to the Echo card system. One shared card surface for all three
     variants; the play button is a circular purple control reused both over the
     photo (photo+audio) and inside the audio-only bar. */
.media-card {
    background: oklch(var(--media-card-bg));
    border: 1px solid oklch(var(--media-card-border));
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0
      rgba(255, 255, 255, 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
.media-card:hover {
    border-color: oklch(var(--media-play-glow) / 0.35);
  }
.media-photo-frame {
    position: relative;
    width: 100%;
    max-height: 450px;
    background: oklch(var(--media-photo-frame));
    border-bottom: 1px solid oklch(var(--media-photo-border));
    overflow: hidden;
  }
.media-photo-img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    display: block;
  }
.media-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: oklch(var(--media-play-bg));
    color: oklch(var(--media-play-fg));
    box-shadow: 0 12px 40px oklch(var(--media-play-glow) / 0.45), inset 0 1px 0
      rgba(255, 255, 255, 0.3);
    transition: transform 0.15s ease, box-shadow 0.18s ease;
  }
.media-play-btn:active {
    transform: scale(0.9);
  }
.media-play-btn--overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
.media-play-btn--overlay:active {
    transform: translate(-50%, -50%) scale(0.9);
  }
.media-audio-bar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: oklch(var(--media-audio-surface));
    border: 1px solid oklch(var(--media-audio-border));
    border-radius: 16px;
  }
.media-audio-track {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: oklch(var(--media-audio-track));
    overflow: hidden;
  }
.media-audio-fill {
    height: 100%;
    border-radius: 999px;
    background: oklch(var(--media-audio-fill));
  }
.media-duration {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: oklch(var(--media-duration-fg));
  }
.media-creator {
    color: oklch(var(--media-creator-fg));
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
  }
.media-creator:hover {
    color: oklch(var(--media-creator-dim));
  }
/* ── Echo Media Post card — creation timestamp ──
     A subtle, smaller muted-gray date/time in the creator footer row. Pushed
     to the right edge (margin-left:auto) so it never competes with the avatar
     loop + username on the left. */
.media-post-time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: oklch(var(--media-time-fg));
    white-space: nowrap;
  }
/* ── Echo Moment feed card — neutral avatar placeholder ──
     A small circular placeholder shown to the left of the creator username on
     every Moment post card. It is intentionally neutral (a muted person glyph
     on a dark surface) and is NOT connected to any per-user avatar loop data.
     Purple is reserved for the hairline ring so it reads as part of Echo. */
.post-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background: oklch(0.16 0.012 240);
    border: 1px solid oklch(0.55 0.16 290 / 0.45);
    color: oklch(0.62 0.008 240);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.18), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
  }
.post-avatar-placeholder svg {
    width: 15px;
    height: 15px;
    display: block;
  }
/* Animation utilities */
.animate-spin-slow {
    animation: spin-slow 10s linear infinite;
  }
.animate-glow-pulse {
    animation: glow-pulse 2s ease-in-out infinite;
  }
.animate-value-flash {
    animation: value-flash 0.8s ease-out;
  }
.animate-shimmer {
    animation: shimmer 2s linear infinite;
  }
/* ── Tier badge styles ── */
.tier-badge-iron {
    background: oklch(var(--tier-iron-badge));
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
  }
.tier-badge-bronze {
    background: oklch(var(--tier-bronze-badge));
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
  }
.tier-badge-silver {
    background: oklch(var(--tier-silver-badge));
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
  }
.tier-badge-gold {
    background: oklch(var(--tier-gold-badge));
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 12px rgba(var(--cycle-accent-rgb), 0.15);
  }
.tier-badge-diamond {
    background: oklch(var(--tier-diamond-badge));
    color: oklch(0.35 0.06 240);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 16px rgba(200, 220, 255, 0.25);
  }
/* ── Tier card accents (borders, highlights) ── */
.tier-accent-iron {
    border-color: oklch(var(--tier-iron-accent)) !important;
  }
.tier-accent-bronze {
    border-color: oklch(var(--tier-bronze-accent)) !important;
  }
.tier-accent-silver {
    border-color: oklch(var(--tier-silver-accent)) !important;
  }
.tier-accent-gold {
    border-color: oklch(var(--tier-gold-accent)) !important;
    box-shadow: 0 0 12px rgba(210, 170, 120, 0.08) !important;
  }
.tier-accent-diamond {
    border-color: oklch(var(--tier-diamond-accent)) !important;
    box-shadow: 0 0 16px rgba(200, 220, 255, 0.12) !important;
  }
/* ── Progress bar fill colors (bonding curve) ── */
.tier-fill-iron {
    background: oklch(var(--tier-iron-fill));
  }
.tier-fill-bronze {
    background: oklch(var(--tier-bronze-fill));
  }
.tier-fill-silver {
    background: oklch(var(--tier-silver-fill));
  }
.tier-fill-gold {
    background: oklch(var(--tier-gold-fill));
    box-shadow: inset 0 0 8px rgba(210, 170, 120, 0.15);
  }
.tier-fill-diamond {
    background: oklch(var(--tier-diamond-fill));
    box-shadow: inset 0 0 10px rgba(200, 220, 255, 0.2);
  }
/* ── Tier glow effects ── */
.tier-glow-iron {
    box-shadow: 0 0 8px rgba(var(--cycle-accent-rgb), 0.04);
  }
.tier-glow-bronze {
    box-shadow: 0 0 12px rgba(210, 170, 120, 0.08);
  }
.tier-glow-silver {
    box-shadow: 0 0 12px rgba(175, 190, 220, 0.1);
  }
.tier-glow-gold {
    box-shadow: 0 0 16px rgba(210, 170, 120, 0.15);
  }
.tier-glow-diamond {
    box-shadow: 0 0 20px rgba(200, 220, 255, 0.2);
  }
/* Misc */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
.card-hover:hover {
    transform: translateY(-2px);
  }
.no-scrollbar::-webkit-scrollbar {
    display: none;
  }
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
/* ── Accent gradient utilities ── */
.accent-gradient-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
.accent-gradient-fill {
    background: var(--accent-gradient);
  }
.accent-gradient-border {
    border: 1px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
      var(--accent-gradient) border-box;
  }
/* ── Echo upload flow ── */
.upload-well {
    background: var(--upload-dropzone-bg);
    border: 1px dashed oklch(var(--upload-dropzone-border));
    border-radius: 16px;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
.upload-well--active {
    border-color: oklch(var(--upload-dropzone-border-active));
    background: oklch(var(--upload-dropzone-bg) / 0.9);
  }
.upload-artwork-frame {
    background: var(--upload-bg);
    border: 1px solid oklch(var(--upload-dropzone-border));
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 40px
      rgba(0, 0, 0, 0.55);
    overflow: hidden;
  }
.upload-artwork-frame--filled {
    border-color: rgba(255, 255, 255, 0.1);
  }
.upload-chip {
    background: var(--upload-chip-bg);
    border: 1px solid oklch(var(--upload-chip-border));
    border-radius: 999px;
    color: oklch(var(--upload-text-dim));
  }
.upload-field {
    background: var(--upload-field-bg);
    border: 1px solid oklch(var(--upload-field-border));
    border-radius: 12px;
    color: oklch(var(--upload-text));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
.upload-field:focus {
    outline: none;
    border-color: oklch(var(--upload-field-focus) / 0.7);
    box-shadow: 0 0 0 3px oklch(var(--upload-field-focus) / 0.15);
  }
.upload-field::-moz-placeholder {
    color: oklch(var(--upload-text-muted));
  }
.upload-field::placeholder {
    color: oklch(var(--upload-text-muted));
  }
.upload-progress-track {
    background: oklch(var(--upload-progress-track));
    border-radius: 999px;
    overflow: hidden;
  }
.upload-progress-fill {
    background: oklch(var(--upload-progress-fill));
    border-radius: 999px;
  }
.publish-btn {
    border-radius: 14px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
.publish-btn--ready {
    background: oklch(var(--publish-ready));
    color: oklch(var(--publish-ready-fg));
    box-shadow: 0 8px 24px oklch(var(--publish-ready) / 0.28), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
  }
.publish-btn--ready:active {
    transform: scale(0.98);
  }
.publish-btn--disabled {
    background: oklch(var(--publish-disabled));
    color: oklch(var(--publish-disabled-fg));
    cursor: not-allowed;
  }
/* ── Echo auth — Internet Identity sign in / sign out ──
     Reuses the .publish-btn visual language so the Sign In control
     feels native to Echo's dark tactile black-and-white system. */
.auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
      transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s
      ease, background 0.15s ease, border-color 0.15s ease;
  }
.auth-btn:active {
    transform: scale(0.98);
  }
.signin-btn {
    background: oklch(var(--auth-ready));
    color: oklch(var(--auth-ready-fg));
    box-shadow: 0 8px 24px oklch(var(--auth-ready) / 0.28), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
  }
.signin-btn:hover {
    opacity: 0.9;
    box-shadow: 0 8px 28px oklch(var(--auth-ready) / 0.4), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
  }
.signout-btn {
    background: oklch(var(--auth-ghost-bg));
    color: oklch(var(--auth-ghost-fg));
    border-color: oklch(var(--auth-ghost-border));
  }
.signout-btn:hover {
    background: oklch(var(--auth-ghost-bg-hover));
    color: oklch(var(--auth-ghost-fg-hover));
    border-color: oklch(var(--auth-ghost-border-hover));
  }
/* ── Echo auth flow — sign-in method modal + email forms ──
     Additive to the auth family. The modal is a near-black elevated card with
     a hairline border; the two method choices are large ghost cards; the email
     forms are minimal stacked fields. Reuses .auth-btn/.signin-btn for CTAs. */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: oklch(var(--auth-modal-overlay));
    backdrop-filter: blur(10px);
    animation: collect-fade-in 0.22s ease-out forwards;
  }
.auth-modal {
    width: 100%;
    max-width: 400px;
    background: oklch(var(--auth-modal-bg));
    border: 1px solid oklch(var(--auth-modal-border));
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
    animation: collect-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
.auth-modal-title {
    color: oklch(var(--auth-modal-title));
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
.auth-modal-sub {
    color: oklch(var(--auth-modal-sub));
  }
.auth-method-btn {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: oklch(var(--auth-method-bg));
    border: 1px solid oklch(var(--auth-method-border));
    color: oklch(var(--auth-method-fg));
    cursor: pointer;
    text-align: left;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s
      ease;
  }
.auth-method-btn:hover {
    background: oklch(var(--auth-method-bg-hover));
    border-color: oklch(var(--auth-method-border-hover));
  }
.auth-method-btn:active {
    transform: scale(0.985);
  }
.auth-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    background: oklch(var(--auth-method-bg-hover));
    border: 1px solid oklch(var(--auth-method-border));
    color: oklch(var(--auth-method-icon));
  }
.auth-method-name {
    font-weight: 600;
    letter-spacing: 0.01em;
    color: oklch(var(--auth-method-fg));
  }
.auth-method-desc {
    font-size: 0.78rem;
    color: oklch(var(--auth-method-fg-dim));
  }
.auth-method-fg {
    font-weight: 600;
    color: oklch(var(--auth-method-fg));
  }
.auth-field {
    width: 100%;
    background: oklch(var(--auth-field-bg));
    border: 1px solid oklch(var(--auth-field-border));
    border-radius: 12px;
    color: oklch(var(--auth-field-fg));
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
.auth-field:focus {
    outline: none;
    border-color: oklch(var(--auth-field-focus) / 0.7);
    box-shadow: 0 0 0 3px oklch(var(--auth-field-focus) / 0.15);
  }
.auth-field::-moz-placeholder {
    color: oklch(var(--auth-field-placeholder));
  }
.auth-field::placeholder {
    color: oklch(var(--auth-field-placeholder));
  }
.auth-label {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.68rem;
    color: oklch(var(--auth-label));
  }
.auth-error-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: oklch(var(--auth-error-bg));
    border: 1px solid oklch(var(--auth-error-border));
    color: oklch(var(--auth-error-fg));
    border-radius: 12px;
    font-size: 0.82rem;
  }
.auth-link {
    color: oklch(var(--auth-link));
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.15s ease;
  }
.auth-link:hover {
    color: oklch(var(--auth-link-hover));
  }
.auth-secondary {
    color: oklch(var(--auth-secondary-fg));
  }
.auth-divider {
    height: 1px;
    background: oklch(var(--auth-divider));
  }
.upload-label {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: oklch(var(--upload-text-muted));
  }
/* ── Echo Track Listing — single-select option cards ── */
.listing-section-label {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.7rem;
    color: oklch(var(--listing-label));
  }
.listing-section-hint {
    font-size: 0.8rem;
    color: oklch(var(--listing-pill-fg));
  }
.listing-pill-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
  }
.listing-pill-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
.listing-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.5rem 0.25rem;
    border-radius: 12px;
    background: oklch(var(--listing-pill-bg));
    border: 1px solid oklch(var(--listing-pill-border));
    color: oklch(var(--listing-pill-fg));
    font-weight: 600;
    letter-spacing: 0.02em;
    transition:
      background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
      transform 0.12s ease, box-shadow 0.18s ease;
    cursor: pointer;
  }
.listing-pill:hover {
    border-color: oklch(var(--listing-pill-selected-border) / 0.6);
    color: oklch(var(--foreground));
  }
.listing-pill:active {
    transform: scale(0.96);
  }
.listing-pill--selected {
    background: oklch(var(--listing-pill-selected-bg));
    border-color: oklch(var(--listing-pill-selected-border));
    color: oklch(var(--listing-pill-selected-fg));
    box-shadow: 0 6px 20px oklch(var(--listing-pill-selected-bg) / 0.3), inset 0
      1px 0 rgba(255, 255, 255, 0.25);
  }
.listing-pill-value {
    font-size: 0.9rem;
    line-height: 1;
  }
.listing-summary {
    background: oklch(var(--listing-summary-bg));
    border: 1px solid oklch(var(--listing-summary-border));
    border-radius: 16px;
  }
.listing-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
.listing-summary-label {
    color: oklch(var(--listing-label));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
  }
.listing-summary-value {
    color: oklch(var(--foreground));
    font-weight: 600;
  }
/* ── Echo Admin Review — real submission rows ── */
.review-row {
    background: oklch(var(--review-row-bg));
    border: 1px solid oklch(var(--review-row-border));
    border-radius: 16px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
.review-row:hover {
    border-color: oklch(var(--listing-pill-selected-border) / 0.5);
  }
.review-pending-badge {
    background: oklch(var(--review-pending-bg));
    color: oklch(var(--review-pending-fg));
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
.review-approve-btn {
    background: oklch(var(--review-approve));
    color: oklch(var(--review-approve-fg));
    box-shadow: 0 6px 20px oklch(var(--review-approve) / 0.28), inset 0 1px 0
      rgba(255, 255, 255, 0.2);
  }
.review-approve-btn:hover {
    opacity: 0.9;
  }
.review-reject-btn {
    background: oklch(var(--review-reject));
    color: oklch(var(--review-reject-fg));
    box-shadow: 0 6px 20px oklch(var(--review-reject) / 0.25), inset 0 1px 0
      rgba(255, 255, 255, 0.2);
  }
.review-reject-btn:hover {
    opacity: 0.9;
  }
/* ── Echo Admin Active Listings — swipe-reveal delete rows ──
     Each row is a dark Echo surface. The swipe-reveal action is a full-height
     red Delete Listing button tucked behind the row (translateX reveals it);
     swiping alone never deletes — it only exposes the action. */
.admin-row {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: oklch(var(--admin-surface));
    border: 1px solid oklch(var(--admin-border));
  }
.admin-row-reveal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    width: 96px;
    background: oklch(var(--admin-delete));
    color: oklch(var(--admin-delete-fg));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: background 0.15s ease;
  }
.admin-row-reveal:active {
    background: oklch(0.5 0.2 20);
  }
.admin-row-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: oklch(var(--admin-surface));
    border: 1px solid oklch(var(--admin-border));
    border-radius: 16px;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
.admin-row-content--open {
    transform: translateX(-96px);
  }
.admin-row-thumb {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: oklch(var(--admin-surface-alt));
    border: 1px solid oklch(var(--admin-border));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0
      rgba(255, 255, 255, 0.05);
  }
.admin-row-title {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    color: oklch(var(--admin-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.admin-row-creator {
    font-size: 0.78rem;
    color: oklch(var(--admin-text-dim));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.admin-row-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    color: oklch(var(--admin-text-dim));
  }
.admin-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: oklch(var(--admin-live) / 0.12);
    border: 1px solid oklch(var(--admin-live-border));
    color: oklch(var(--admin-live));
    font-weight: 600;
    letter-spacing: 0.04em;
  }
.admin-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: oklch(var(--admin-live));
    box-shadow: 0 0 6px oklch(var(--admin-live) / 0.6);
  }
.admin-collected {
    color: oklch(var(--admin-collected));
    font-weight: 600;
  }
/* Desktop destructive control — small red trash button revealed on hover.
     Hidden on touch screens where swipe is the primary interaction. */
.admin-row-desktop-delete {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid oklch(var(--admin-delete-border));
    background: oklch(var(--admin-delete-soft));
    color: oklch(var(--admin-delete));
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
  }
.admin-row-desktop-delete:hover {
    background: oklch(var(--admin-delete));
    color: oklch(var(--admin-delete-fg));
  }
.admin-row-desktop-delete:active {
    transform: scale(0.94);
  }
@media (hover: hover) and (pointer: fine) {
    .admin-row-desktop-delete {
      display: inline-flex;
    }
  }
/* ── Admin confirm modal — destructive second confirmation ──
     Reuses the sheet surface. The Delete Listing CTA is the destructive red;
     Cancel is a ghost button. Red treatment is reserved for the destructive
     action only, per the destructive-action guardrail. */
.admin-confirm-sheet {
    background: oklch(var(--admin-surface));
    border: 1px solid oklch(var(--admin-border-strong));
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
    animation: collect-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
.admin-confirm-overlay {
    background: oklch(var(--admin-bg) / 0.72);
    backdrop-filter: blur(10px);
    animation: collect-fade-in 0.22s ease-out forwards;
  }
.admin-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: oklch(var(--admin-delete));
    color: oklch(var(--admin-delete-fg));
    border-radius: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 24px oklch(var(--admin-delete) / 0.3), inset 0 1px 0
      rgba(255, 255, 255, 0.2);
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  }
.admin-delete-btn:hover {
    opacity: 0.92;
    box-shadow: 0 8px 28px oklch(var(--admin-delete) / 0.4), inset 0 1px 0
      rgba(255, 255, 255, 0.2);
  }
.admin-delete-btn:active {
    transform: scale(0.97);
  }
.admin-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: oklch(var(--admin-surface-alt));
    border: 1px solid oklch(var(--admin-border));
    color: oklch(var(--admin-text));
    border-radius: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s
      ease;
  }
.admin-cancel-btn:hover {
    background: oklch(var(--admin-surface));
    border-color: oklch(var(--admin-border-strong));
  }
.admin-cancel-btn:active {
    transform: scale(0.97);
  }
.admin-confirm-note {
    background: oklch(var(--admin-delete-soft));
    border: 1px solid oklch(var(--admin-delete-border));
    color: oklch(var(--admin-text-dim));
    border-radius: 12px;
  }
/* ── Admin 'Listing removed' success toast — subtle, non-blocking ── */
.admin-toast {
    background: oklch(var(--admin-toast-bg));
    border: 1px solid oklch(var(--admin-toast-border));
    color: oklch(var(--admin-toast-fg));
    border-radius: 999px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
    animation: admin-toast-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
.admin-toast-check {
    color: oklch(var(--admin-toast-success));
  }
@keyframes admin-toast-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
/* ── Echo Profile avatar-loop — living portrait ── */
.avatar-loop-video {
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
  }
.avatar-cam-chip {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(var(--avatar-cam-chip-bg) / 0.92);
    border: 1px solid oklch(var(--avatar-cam-chip-border));
    color: oklch(var(--avatar-cam-chip-fg));
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0
      rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s
      ease;
  }
.avatar-cam-chip:hover {
    border-color: oklch(var(--avatar-ring));
    transform: scale(1.05);
  }
.avatar-capture-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(var(--avatar-capture-bg) / 0.96);
    backdrop-filter: blur(14px);
  }
.avatar-preview-frame {
    background: oklch(var(--avatar-capture-surface));
    border: 1px solid oklch(var(--avatar-preview-border));
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
  }
.avatar-preview-frame--live {
    border-color: oklch(var(--avatar-preview-border-live));
    box-shadow: 0 0 0 3px oklch(var(--avatar-ring) / 0.25), 0 12px 48px
      rgba(0, 0, 0, 0.5);
  }
.avatar-record-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: oklch(var(--avatar-record-idle));
    color: oklch(var(--avatar-record-idle-fg));
    border: 1px solid oklch(var(--avatar-preview-border));
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.18s ease, border-color 0.18s
      ease, box-shadow 0.18s ease;
  }
.avatar-record-btn:active {
    transform: scale(0.96);
  }
.avatar-record-btn--recording {
    background: oklch(var(--avatar-record));
    color: oklch(var(--avatar-record-fg));
    border-color: oklch(var(--avatar-record));
    box-shadow: 0 8px 24px oklch(var(--avatar-record) / 0.35), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
    animation: avatar-record-pulse 1.1s ease-in-out infinite;
  }
.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: oklch(var(--avatar-fallback-bg));
    color: oklch(var(--avatar-fallback-fg));
    font-weight: 700;
    width: 100%;
    height: 100%;
  }
/* ── Echo Wallet — SOL balance, deposit/withdraw, activity ── */
.wallet-section-label {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.7rem;
    color: oklch(var(--wallet-text-muted));
  }
.wallet-balance {
    font-family: var(--font-wallet);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: oklch(var(--wallet-text));
  }
/* ── Echo Wallet — PEPE coin icon beside the balance ──
     The official CoinGecko PEPE token icon, presented as a circular coin,
     aligned with the balance text. A slow continuous rotation runs only when
     the user has not requested reduced motion. */
.pepe-coin-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    vertical-align: middle;
    margin-right: 0.75rem;
    border: 1px solid oklch(var(--wallet-border) / 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
  }
@keyframes pepe-spin {
    to {
      transform: rotate(360deg);
    }
  }
@media (prefers-reduced-motion: no-preference) {
    .pepe-coin-icon {
      animation: pepe-spin 8s linear infinite;
    }
  }
/* ── Feed PEPE balance pill ──
     Compact rounded pill shown on the far right of the feed filter row. Uses a
     small (~22px) variant of the CoinGecko PEPE icon so the Wallet's 40px
     .pepe-coin-icon is left untouched. */
.pepe-coin-icon--sm {
    width: 22px;
    height: 22px;
    margin-right: 0.4rem;
  }
.pepe-balance-pill {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-family: Satoshi, Inter, sans-serif;
    white-space: nowrap;
    border: 1px solid oklch(var(--wallet-border) / 0.7);
    background: oklch(var(--wallet-surface));
    color: oklch(var(--wallet-text));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
  }
.pepe-balance-pill__value {
    line-height: 1;
  }
.wallet-balance-usd {
    font-family: var(--font-wallet);
    font-weight: 500;
    color: oklch(var(--wallet-text-dim));
  }
.wallet-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 1px solid transparent;
    background: oklch(var(--wallet-accent));
    color: oklch(var(--wallet-accent-fg));
    box-shadow: 0 8px 24px oklch(var(--wallet-accent) / 0.28), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
.wallet-action-btn:hover {
    opacity: 0.9;
    box-shadow: 0 8px 28px oklch(var(--wallet-accent) / 0.4), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
  }
.wallet-action-btn:active {
    transform: scale(0.97);
  }
.wallet-ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    background: oklch(var(--wallet-ghost-bg));
    color: oklch(var(--wallet-text));
    border: 1px solid oklch(var(--wallet-ghost-border));
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s
      ease;
  }
.wallet-ghost-btn:hover {
    background: oklch(var(--wallet-surface-alt));
    border-color: oklch(var(--wallet-ghost-border-hover) / 0.6);
  }
.wallet-ghost-btn:active {
    transform: scale(0.97);
  }
.wallet-qr-box {
    background: oklch(var(--wallet-qr-bg));
    border: 1px solid oklch(var(--wallet-border));
    border-radius: 16px;
    color: oklch(var(--wallet-qr-fg));
  }
.wallet-address {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    color: oklch(var(--wallet-text-dim));
    word-break: break-all;
  }
.wallet-field {
    background: oklch(var(--wallet-field-bg));
    border: 1px solid oklch(var(--wallet-field-border));
    border-radius: 12px;
    color: oklch(var(--wallet-text));
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
.wallet-field:focus {
    outline: none;
    border-color: oklch(var(--wallet-field-focus) / 0.7);
    box-shadow: 0 0 0 3px oklch(var(--wallet-field-focus) / 0.15);
  }
.wallet-field::-moz-placeholder {
    color: oklch(var(--wallet-text-muted));
  }
.wallet-field::placeholder {
    color: oklch(var(--wallet-text-muted));
  }
.wallet-max-btn {
    background: oklch(var(--wallet-ghost-bg));
    border: 1px solid oklch(var(--wallet-ghost-border));
    color: oklch(var(--wallet-accent));
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
.wallet-max-btn:hover {
    background: oklch(var(--wallet-surface-alt));
    border-color: oklch(var(--wallet-ghost-border-hover) / 0.6);
  }
.wallet-tx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
  }
.wallet-tx-amount {
    font-family: var(--font-wallet);
    font-weight: 600;
    letter-spacing: -0.01em;
  }
.wallet-tx-amount--pos {
    color: oklch(var(--wallet-pos));
  }
.wallet-tx-amount--neg {
    color: oklch(var(--wallet-neg));
  }
.wallet-tx-time {
    font-size: 0.75rem;
    color: oklch(var(--wallet-text-muted));
  }
.wallet-review-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
.wallet-review-label {
    color: oklch(var(--wallet-text-muted));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
  }
.wallet-review-value {
    color: oklch(var(--wallet-text));
    font-weight: 600;
    font-family: var(--font-wallet);
  }
/* ── Echo Wallet ckSOL deposit — live balance ── */
.wallet-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: oklch(var(--wallet-live-bg) / 0.14);
    border: 1px solid oklch(var(--wallet-live-bg) / 0.35);
    color: oklch(var(--wallet-live-fg));
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
.wallet-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: oklch(var(--wallet-live-bg));
    box-shadow: 0 0 8px oklch(var(--wallet-live-bg) / 0.6);
    animation: live-dot 1.6s ease-in-out infinite;
  }
.wallet-balance--live {
    color: oklch(var(--wallet-text));
    transition: color 0.3s ease;
  }
.wallet-balance--updated {
    color: oklch(var(--wallet-live-bg));
  }
/* ── Signature input field ── */
.wallet-sig-field {
    background: oklch(var(--wallet-sig-bg));
    border: 1px solid oklch(var(--wallet-sig-border));
    border-radius: 12px;
    color: oklch(var(--wallet-text));
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    word-break: break-all;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
.wallet-sig-field:focus {
    outline: none;
    border-color: oklch(var(--wallet-sig-focus) / 0.7);
    box-shadow: 0 0 0 3px oklch(var(--wallet-sig-focus) / 0.15);
  }
.wallet-sig-field::-moz-placeholder {
    color: oklch(var(--wallet-text-muted));
    font-family: var(--font-ui);
    letter-spacing: 0;
  }
.wallet-sig-field::placeholder {
    color: oklch(var(--wallet-text-muted));
    font-family: var(--font-ui);
    letter-spacing: 0;
  }
.wallet-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: oklch(var(--wallet-copy-bg));
    border: 1px solid oklch(var(--wallet-copy-border));
    color: oklch(var(--wallet-copy-fg));
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
.wallet-copy-btn:hover {
    background: oklch(var(--wallet-surface-alt));
    border-color: oklch(var(--wallet-copy-border-hover) / 0.6);
    color: oklch(var(--wallet-copy-border-hover));
  }
.wallet-copy-btn:active {
    transform: scale(0.97);
  }
/* ── Echo Wallet — Daily ECHO countdown placeholder ──
     A quiet dashed mono pill reserving space for the future live countdown.
     Static text only; no timer logic is wired. */
.wallet-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: oklch(var(--wallet-sig-bg));
    border: 1px dashed oklch(var(--wallet-border));
    color: oklch(var(--wallet-text-dim));
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }
/* ── Echo Wallet — locked Withdraw ECHO button ──
     Full-width disabled control. Reuses the ghost surface with muted text so
     it reads as intentionally locked rather than broken. */
.wallet-locked-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: not-allowed;
    background: oklch(var(--wallet-ghost-bg));
    color: oklch(var(--wallet-text-muted));
    border: 1px solid oklch(var(--wallet-ghost-border));
    opacity: 0.75;
  }
/* ── Deposit processing status ── */
.wallet-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
.wallet-status--pending {
    background: oklch(var(--wallet-pending-bg));
    color: oklch(var(--wallet-pending-fg));
    border: 1px solid oklch(var(--wallet-pending-bg));
  }
.wallet-status--success {
    background: oklch(var(--wallet-success-bg));
    color: oklch(var(--wallet-success-fg));
    border: 1px solid oklch(var(--wallet-success-border));
  }
.wallet-status--error {
    background: oklch(var(--wallet-error-bg));
    color: oklch(var(--wallet-error-fg));
    border: 1px solid oklch(var(--wallet-error-border));
  }
.wallet-status-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid oklch(var(--wallet-pending-fg) / 0.3);
    border-top-color: oklch(var(--wallet-pending-fg));
    animation: wallet-spin 0.8s linear infinite;
    flex-shrink: 0;
  }
.wallet-status--success .wallet-status-icon,
  .wallet-status--error .wallet-status-icon {
    flex-shrink: 0;
    line-height: 1;
  }
/* ── Echo Collect — confirmation sheet + collected/sold-out states ── */
.collect-sheet {
    background: oklch(var(--collect-sheet-bg));
    border: 1px solid oklch(var(--collect-sheet-border));
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
    animation: collect-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
.collect-overlay {
    background: oklch(var(--collect-overlay-bg) / 0.72);
    backdrop-filter: blur(10px);
    animation: collect-fade-in 0.22s ease-out forwards;
  }
.collect-thumb {
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0
      rgba(255, 255, 255, 0.07);
  }
.collect-confirm-btn {
    background: oklch(var(--collect-confirm));
    color: oklch(var(--collect-confirm-fg));
    border-radius: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 24px oklch(var(--collect-confirm) / 0.3), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  }
.collect-confirm-btn:hover {
    opacity: 0.9;
    box-shadow: 0 8px 28px oklch(var(--collect-confirm) / 0.4), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
  }
.collect-confirm-btn:active {
    transform: scale(0.97);
  }
.collect-cancel-btn {
    background: oklch(var(--collect-cancel-bg));
    border: 1px solid oklch(var(--collect-cancel-border));
    color: oklch(var(--collect-cancel-fg));
    border-radius: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s
      ease;
  }
.collect-cancel-btn:hover {
    background: oklch(var(--collect-sheet-bg) / 1);
    border-color: oklch(var(--collect-cancel-border) / 0.8);
  }
.collect-cancel-btn:active {
    transform: scale(0.97);
  }
.collect-price-pill {
    background: oklch(var(--collect-price-bg));
    border: 1px solid oklch(var(--collect-price-border));
    color: oklch(var(--collect-price-fg));
    border-radius: 999px;
    font-weight: 600;
  }
.collect-supply {
    color: oklch(var(--collect-supply-fg));
  }
.collect-soldout-btn {
    background: oklch(var(--collect-soldout-bg));
    color: oklch(var(--collect-soldout-fg));
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: not-allowed;
  }
.collect-check-btn {
    background: oklch(var(--collect-confirm) / 0.14);
    border: 1px solid oklch(var(--collect-confirm) / 0.4);
    color: oklch(var(--collect-check));
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: default;
  }
/* ── Echo Collect — success animation (quick, non-blocking) ── */
.collect-fly {
    animation: collect-fly 0.7s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  }
.collect-fly-glow {
    animation: collect-fly-glow 0.7s ease-out forwards;
  }
.collect-button-pop {
    animation: collect-button-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)
      forwards;
  }
/* ── Echo Collect — purchase status notes ──
     Additive to the collect sheet. Three quiet status surfaces matching the
     Echo status-note language (see .wallet-status): a destructive red
     'Not enough ECHO' note when the collector lacks 1 ECHO, an amber
     self-purchase rejection note, and a green post-purchase confirmation
     that also flashes the refreshed ECHO balance. */
.collect-error-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: oklch(var(--collect-error-bg));
    border: 1px solid oklch(var(--collect-error-border));
    color: oklch(var(--collect-error-fg));
    font-size: 0.8rem;
    line-height: 1.4;
  }
.collect-self-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: oklch(var(--collect-self-bg));
    border: 1px solid oklch(var(--collect-self-border));
    color: oklch(var(--collect-self-fg));
    font-size: 0.8rem;
    line-height: 1.4;
  }
.collect-success-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: oklch(var(--collect-success-bg));
    border: 1px solid oklch(var(--collect-success-border));
    color: oklch(var(--collect-success-fg));
    font-size: 0.8rem;
    line-height: 1.4;
  }
/* Post-purchase balance flash — the refreshed ECHO balance briefly tints
     green before settling back to the price-pill foreground. */
.collect-balance-flash {
    color: oklch(var(--collect-balance-flash));
    animation: collect-balance-flash 0.9s ease-out forwards;
  }
@keyframes collect-balance-flash {
    0% {
      color: oklch(var(--collect-balance-flash));
    }
    100% {
      color: oklch(var(--collect-price-fg));
    }
  }
/* ── Echo Dance feed — vertical short-form video feed ── */
.dance-snap-container {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }
.dance-snap-container::-webkit-scrollbar {
    display: none;
  }
.dance-snap-item {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
.dance-post-card {
    position: relative;
    height: 100%;
    aspect-ratio: 9 / 16;
    max-height: 100%;
    max-width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: oklch(var(--dance-card-bg));
    border: 1px solid oklch(var(--dance-card-border));
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0
      rgba(255, 255, 255, 0.05);
    animation: dance-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
.dance-post-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
      ellipse at 50% 30%,
      oklch(var(--dance-card-bg) / 1) 0%,
      oklch(var(--dance-bg) / 1) 100%
    );
  }
.dance-overlay-top {
    position: absolute;
    inset: 0 0 auto 0;
    height: 40%;
    background: var(--dance-overlay-top);
    pointer-events: none;
  }
.dance-overlay-bottom {
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: var(--dance-overlay-bottom);
    pointer-events: none;
  }
.dance-track-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: oklch(var(--dance-track-fg));
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  }
.dance-caption {
    color: oklch(var(--dance-caption-fg));
    font-size: 0.8rem;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  }
.dance-action-rail {
    position: absolute;
    right: 0.75rem;
    bottom: 7.5rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 0.6rem 0.5rem;
    border-radius: 999px;
    background: var(--dance-rail-bg);
    border: 1px solid var(--dance-rail-border);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
.dance-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: oklch(var(--dance-rail-fg));
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  }
.dance-action-btn:active {
    transform: scale(0.9);
  }
.dance-action-btn--dim {
    color: oklch(var(--dance-rail-fg-dim));
  }
.dance-action-count {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(var(--dance-rail-fg));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }
.dance-fire-btn {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s
      ease;
  }
.dance-fire-btn--reacted {
    filter: drop-shadow(0 0 8px oklch(var(--dance-fire-active) / 0.7));
  }
.dance-fire-pop {
    animation: dance-fire-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
.dance-fire-burst {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: dance-fire-burst 0.6s ease-out forwards;
  }
.dance-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.25s ease;
  }
.dance-filter-pill:hover {
    color: rgba(255, 255, 255, 0.85);
  }
.dance-filter-pill--active {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
    transform: scale(1.05);
  }
/* ── Secondary time-filter row (Top only) ──
     A smaller, more subtle version of the main pill filters. Compact,
     horizontally scrollable, evenly spaced, mobile friendly. The selected
     pill uses the Echo purple accent; unselected uses dark/neutral with
     subtle gray text/border so the row reads as subordinate to the main
     Friends / Trending / Top row. */
.dance-time-filter-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem 0.6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }
.dance-time-filter-row::-webkit-scrollbar {
    display: none;
  }
.dance-time-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 0;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
  }
.dance-time-filter-pill:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.16);
  }
.dance-time-filter-pill--active {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
  }
.dance-comment-sheet {
    background: oklch(var(--dance-comment-sheet-bg));
    border: 1px solid oklch(var(--dance-comment-sheet-border));
    border-radius: 24px 24px 0 0;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0
      rgba(255, 255, 255, 0.06);
    animation: dance-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
.dance-comment-row {
    background: oklch(var(--dance-comment-row-bg));
    border: 1px solid oklch(var(--dance-comment-row-border));
    border-radius: 14px;
    animation: dance-comment-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
.dance-comment-input {
    background: oklch(var(--dance-input-bg));
    border: 1px solid oklch(var(--dance-input-border));
    border-radius: 999px;
    color: oklch(var(--foreground));
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
.dance-comment-input:focus {
    outline: none;
    border-color: oklch(var(--dance-send-bg) / 0.7);
    box-shadow: 0 0 0 3px oklch(var(--dance-send-bg) / 0.15);
  }
.dance-comment-input::-moz-placeholder {
    color: oklch(var(--dance-rail-fg-dim));
  }
.dance-comment-input::placeholder {
    color: oklch(var(--dance-rail-fg-dim));
  }
.dance-send-btn {
    background: oklch(var(--dance-send-bg));
    color: oklch(var(--dance-send-fg));
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 6px 18px oklch(var(--dance-send-bg) / 0.3), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
.dance-send-btn:active {
    transform: scale(0.96);
  }
.dance-empty {
    color: oklch(var(--dance-rail-fg-dim));
    font-size: 0.9rem;
    letter-spacing: 0.01em;
  }
/* ── Echo Dance post card — polished immersive feed card ──
     Extends the existing dance tokens. The card is a 9:16 stage in near-black
     void: main media fills the frame, a single centered Play button is the
     authoritative control (starts Dance visual + track audio together), the
     right rail floats as a glass pill, and the track attribution carries a
     small circular camera-loop chip (autoplay muted, visual ID only). */
.dance-media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    height: 100%;
    background: radial-gradient(
      ellipse at 50% 30%,
      oklch(var(--dance-placeholder-bg)) 0%,
      oklch(var(--dance-bg)) 100%
    );
    color: oklch(var(--dance-placeholder-fg));
  }
.dance-media-placeholder-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: oklch(var(--dance-card-bg));
    border: 1px solid oklch(var(--dance-card-border));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
.dance-media-placeholder-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(var(--dance-placeholder-fg));
  }
/* Centered Play button — single authoritative control for Dance + audio */
.dance-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
.dance-play-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: oklch(var(--dance-play-bg));
    color: oklch(var(--dance-play-fg));
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 40px oklch(var(--dance-play-glow) / 0.45), inset 0 1px 0
      rgba(255, 255, 255, 0.3);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s
      ease, box-shadow 0.2s ease;
    animation: dance-play-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
.dance-play-btn:active {
    transform: scale(0.92);
  }
.dance-play-btn--hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
  }
.dance-play-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid oklch(var(--dance-play-glow) / 0.45);
    animation: dance-play-pulse 2.2s ease-out infinite;
    pointer-events: none;
  }
/* Creator row — avatar + @username, top-left over the media. Sits above
     the top scrim so the identity reads clearly against the video without a
     solid header bar. */
.dance-creator-top {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    right: 5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    pointer-events: none;
  }
.dance-creator-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }
.dance-creator-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: oklch(var(--dance-card-bg));
    border: 1px solid oklch(var(--dance-loop-chip-border) / 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }
.dance-creator-avatar video,
  .dance-creator-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
.dance-creator-name {
    color: oklch(var(--dance-creator-fg));
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  }
.dance-creator-meta {
    color: oklch(var(--dance-creator-dim));
    font-size: 0.72rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  }
/* Track camera-loop chip — rounded-square 2s loop, autoplay muted.
     Visual ID only; never controls playback. Pulses with a purple glow
     while the main Dance post is playing. */
.dance-track-loop {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }
.dance-track-loop-chip {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: oklch(var(--dance-loop-chip-bg));
    border: 1px solid oklch(var(--dance-loop-chip-border) / 0.7);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0
      rgba(255, 255, 255, 0.08);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }
.dance-track-loop-chip video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
.dance-track-loop-chip img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
/* Playback-aware purple glow/pulse around the rounded square — active
     only while the main Dance post is playing. */
.dance-track-loop-chip--playing {
    border-color: oklch(var(--dance-play-glow) / 0.9);
    animation: dance-track-glow 1.6s ease-in-out infinite;
  }
.dance-track-loop-chip--playing::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 17px;
    border: 2px solid oklch(var(--dance-play-glow) / 0.55);
    animation: dance-track-ring 1.6s ease-out infinite;
    pointer-events: none;
  }
/* Tiny animated equalizer indicator — shown while the post plays */
.dance-track-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
    margin-left: 0.15rem;
  }
.dance-track-eq span {
    width: 3px;
    border-radius: 2px;
    background: oklch(var(--dance-play-glow));
    animation: dance-eq-bounce 1s ease-in-out infinite;
  }
.dance-track-eq span:nth-child(1) {
    height: 6px;
    animation-delay: 0s;
  }
.dance-track-eq span:nth-child(2) {
    height: 12px;
    animation-delay: 0.2s;
  }
.dance-track-eq span:nth-child(3) {
    height: 8px;
    animation-delay: 0.4s;
  }
.dance-track-note {
    color: oklch(var(--dance-play-glow));
    font-size: 0.9rem;
    line-height: 1;
  }
/* ── Echo Dance Post creation flow — full-screen studio overlay ──
     Opened from the floating Dance button. Covers the whole app (z-70,
     above BottomNav z-50 and feed overlays z-60). Steps: Choose Track →
     Choose 10-Second Section → Record → Preview. */
.dance-create-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    background: oklch(var(--dance-create-bg) / 0.98);
    backdrop-filter: blur(18px) saturate(140%);
    animation: dance-create-overlay-in 0.28s cubic-bezier(0.22, 1, 0.36, 1)
      forwards;
  }
.dance-create-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.5rem;
    background: oklch(var(--dance-create-bg) / 0.9);
    border-bottom: 1px solid oklch(var(--dance-create-border) / 0.7);
  }
.dance-create-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: oklch(var(--dance-create-surface));
    border: 1px solid oklch(var(--dance-create-border));
    color: oklch(var(--dance-create-text-dim));
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s
      ease;
  }
.dance-create-close:hover {
    background: oklch(var(--dance-create-surface-alt));
    border-color: oklch(var(--dance-create-accent) / 0.5);
  }
.dance-create-close:active {
    transform: scale(0.94);
  }
.dance-create-step-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: oklch(var(--dance-create-text));
  }
.dance-create-step-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: oklch(var(--dance-create-text-muted));
  }
.dance-create-progress {
    display: flex;
    gap: 4px;
    padding: 0.5rem 1rem 0;
  }
.dance-create-progress-seg {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: oklch(var(--dance-create-border));
    transition: background 0.3s ease;
  }
.dance-create-progress-seg--done {
    background: oklch(var(--dance-create-accent) / 0.5);
  }
.dance-create-progress-seg--active {
    background: oklch(var(--dance-create-accent));
    box-shadow: 0 0 8px oklch(var(--dance-create-accent) / 0.5);
  }
.dance-create-step {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    animation: dance-create-step-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
.dance-create-label {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.68rem;
    color: oklch(var(--dance-create-text-muted));
  }
.dance-create-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: oklch(var(--dance-create-text-muted));
    border: 1px dashed oklch(var(--dance-create-border-strong));
    border-radius: 16px;
  }
.dance-create-track-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: oklch(var(--dance-create-surface));
    border: 1px solid oklch(var(--dance-create-border));
    border-radius: 16px;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s
      ease;
  }
.dance-create-track-row:active {
    transform: scale(0.985);
  }
.dance-create-track-row--selected {
    border-color: oklch(var(--dance-create-accent) / 0.55);
    background: oklch(var(--dance-create-accent) / 0.08);
    box-shadow: 0 0 0 1px oklch(var(--dance-create-accent) / 0.25);
  }
.dance-create-track-thumb {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: oklch(var(--dance-create-surface-alt));
    border: 1px solid oklch(var(--dance-create-border));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0
      rgba(255, 255, 255, 0.05);
  }
.dance-create-track-info {
    flex: 1;
    min-width: 0;
  }
.dance-create-track-title {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    color: oklch(var(--dance-create-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.dance-create-track-creator {
    font-size: 0.78rem;
    color: oklch(var(--dance-create-text-dim));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.dance-create-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: oklch(var(--dance-create-accent));
    color: oklch(var(--dance-create-accent-fg));
    box-shadow: 0 4px 14px oklch(var(--dance-create-accent) / 0.35), inset 0 1px
      0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
.dance-create-play-btn:active {
    transform: scale(0.92);
  }
.dance-create-play-btn--playing {
    background: oklch(var(--dance-create-surface-alt));
    color: oklch(var(--dance-create-accent));
    border: 1px solid oklch(var(--dance-create-accent) / 0.4);
    box-shadow: none;
  }
.dance-create-edition-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: oklch(var(--dance-create-accent) / 0.12);
    border: 1px solid oklch(var(--dance-create-accent) / 0.35);
    color: oklch(var(--dance-create-edition-fg));
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
.dance-create-timeline {
    position: relative;
    height: 64px;
    border-radius: 14px;
    background: oklch(var(--dance-create-surface));
    border: 1px solid oklch(var(--dance-create-border));
    overflow: hidden;
  }
.dance-create-timeline-grid {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to right,
      oklch(var(--dance-create-border) / 0.4) 0 1px,
      transparent 1px 25%
    );
  }
.dance-create-window {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 10px;
    background: oklch(var(--dance-create-accent) / 0.16);
    border: 1px solid oklch(var(--dance-create-accent) / 0.55);
    box-shadow: 0 0 0 1px oklch(var(--dance-create-accent) / 0.2), inset 0 1px 0
      rgba(255, 255, 255, 0.08);
    cursor: grab;
    touch-action: pan-y;
  }
.dance-create-window:active {
    cursor: grabbing;
  }
.dance-create-window-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 3px;
    pointer-events: none;
  }
.dance-create-window-grip i {
    width: 2px;
    height: 14px;
    border-radius: 999px;
    background: oklch(var(--dance-create-accent) / 0.9);
  }
.dance-create-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
.dance-create-time-start {
    color: oklch(var(--dance-create-accent));
    font-weight: 600;
  }
.dance-create-time-end {
    color: oklch(var(--dance-create-text-muted));
  }
.dance-create-time-duration {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: oklch(var(--dance-create-surface));
    border: 1px solid oklch(var(--dance-create-border));
    color: oklch(var(--dance-create-text-dim));
  }
.dance-create-cam-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: oklch(0.03 0 0);
    border: 1px solid oklch(var(--dance-create-border));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0
      rgba(255, 255, 255, 0.05);
  }
.dance-create-cam-frame--live {
    border-color: oklch(var(--dance-create-accent) / 0.6);
    box-shadow: 0 0 0 3px oklch(var(--dance-create-accent) / 0.2), 0 16px 48px
      rgba(0, 0, 0, 0.5);
  }
.dance-create-cam-video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
.dance-create-cam-hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    /* Clear the camera-flip button (top-right, ~40px + 0.75rem offset) so the
       right-aligned track chip is not covered by it during recording. */
    padding-right: 3.25rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
  }
.dance-create-rec-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: oklch(var(--dance-create-record-fg));
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    backdrop-filter: blur(8px);
  }
.dance-create-rec-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: oklch(var(--dance-create-record));
    box-shadow: 0 0 8px oklch(var(--dance-create-record) / 0.7);
    animation: dance-create-rec-blink 1.2s ease-in-out infinite;
  }
.dance-create-cam-track-chip {
    display: inline-flex;
    align-items: center;
    max-width: 60%;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: oklch(var(--dance-create-text));
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(8px);
  }
.dance-create-record-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: oklch(var(--dance-create-record));
    border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0
      rgba(255, 255, 255, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
.dance-create-record-btn:active {
    transform: scale(0.94);
  }
.dance-create-record-btn--recording {
    border-color: oklch(var(--dance-create-record));
    animation: dance-create-record-pulse 1.1s ease-in-out infinite;
  }
.dance-create-record-btn-inner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: oklch(var(--dance-create-record-fg));
    transition: border-radius 0.2s ease;
  }
.dance-create-record-btn--recording .dance-create-record-btn-inner {
    border-radius: 6px;
  }
.dance-create-ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 1.25rem;
    border-radius: 14px;
    background: oklch(var(--dance-create-surface));
    border: 1px solid oklch(var(--dance-create-border-strong));
    color: oklch(var(--dance-create-text-dim));
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s
      ease, color 0.15s ease;
  }
.dance-create-ghost-btn:hover {
    background: oklch(var(--dance-create-surface-alt));
    border-color: oklch(var(--dance-create-accent) / 0.5);
    color: oklch(var(--dance-create-text));
  }
.dance-create-ghost-btn:active {
    transform: scale(0.97);
  }
.dance-create-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    border-radius: 14px;
    background: var(--dance-create-accent-gradient);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.32), inset 0 1px 0
      rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  }
.dance-create-cta:active {
    transform: scale(0.98);
  }
.dance-create-cta--disabled {
    background: oklch(var(--dance-create-surface-alt));
    color: oklch(var(--dance-create-text-muted));
    box-shadow: none;
    cursor: not-allowed;
  }
.dance-create-preview-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: oklch(0.03 0 0);
    border: 1px solid oklch(var(--dance-create-border));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0
      rgba(255, 255, 255, 0.05);
    animation: dance-create-step-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
.dance-create-action-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: oklch(var(--dance-create-bg) / 0.95);
    border-top: 1px solid oklch(var(--dance-create-border) / 0.7);
  }
@media (prefers-reduced-motion: reduce) {
    .dance-create-overlay,
    .dance-create-step,
    .dance-create-preview-frame {
      animation: none;
    }
    .dance-create-record-btn--recording,
    .dance-create-rec-dot {
      animation: none;
    }
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

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

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ── Create Dance sheet — UI-only first step ──
   Bottom sheet opened from the floating Dance button. Reuses the
   .dance-comment-sheet surface and the .dance-create-track-* row styling.
   Adds the Select / Cancel / Continue controls for the "Choose a song" step. */
.dance-create-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 34px;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: oklch(var(--dance-create-surface-alt));
  border: 1px solid oklch(var(--dance-create-border));
  color: oklch(var(--dance-create-text-dim));
  font-size: 0.78rem;
  font-weight: 600;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s
    ease, color 0.15s ease;
}
.dance-create-select-btn:active {
  transform: scale(0.94);
}
.dance-create-select-btn--selected {
  background: oklch(var(--dance-create-accent));
  border-color: oklch(var(--dance-create-accent));
  color: oklch(var(--dance-create-accent-fg));
  box-shadow: 0 4px 14px oklch(var(--dance-create-accent) / 0.35), inset 0 1px 0
    rgba(255, 255, 255, 0.25);
}
.dance-create-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 46px;
  border-radius: 999px;
  background: oklch(var(--dance-create-surface));
  border: 1px solid oklch(var(--dance-create-border));
  color: oklch(var(--dance-create-text-dim));
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s
    ease;
}
.dance-create-cancel-btn:active {
  transform: scale(0.97);
}
.dance-create-continue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 2;
  height: 46px;
  border-radius: 999px;
  background: oklch(var(--dance-create-accent));
  color: oklch(var(--dance-create-accent-fg));
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 6px 18px oklch(var(--dance-create-accent) / 0.3), inset 0 1px 0
    rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.dance-create-continue-btn:active {
  transform: scale(0.97);
}
.dance-create-continue-btn:disabled {
  opacity: 0.4;
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Create Dance sheet — Choose Video Type step ──
   Two large selectable Echo-style cards ('10 sec video' / '2 sec loop') with a
   dark surface, rounded corners, and a purple selected state with a clear
   visual difference. Additive to the existing .dance-create-* tokens. */
.dance-create-type-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 1rem;
  text-align: left;
  background: oklch(var(--dance-create-surface));
  border: 1px solid oklch(var(--dance-create-border));
  border-radius: 16px;
  color: oklch(var(--dance-create-text));
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s
    ease, box-shadow 0.18s ease;
}
.dance-create-type-card:active {
  transform: scale(0.985);
}
.dance-create-type-card:focus-visible {
  outline: 2px solid oklch(var(--dance-create-accent));
  outline-offset: 2px;
}
.dance-create-type-card--selected {
  border-color: oklch(var(--dance-create-accent) / 0.6);
  background: oklch(var(--dance-create-accent) / 0.08);
  box-shadow: 0 0 0 1px oklch(var(--dance-create-accent) / 0.25), 0 8px 24px
    oklch(var(--dance-create-accent) / 0.12);
}
.dance-create-type-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: oklch(var(--dance-create-surface-alt));
  border: 1px solid oklch(var(--dance-create-border));
  color: oklch(var(--dance-create-text-dim));
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.dance-create-type-card--selected .dance-create-type-card-icon {
  background: oklch(var(--dance-create-accent) / 0.16);
  border-color: oklch(var(--dance-create-accent) / 0.45);
  color: oklch(var(--dance-create-accent));
}
.dance-create-type-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.dance-create-type-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: oklch(var(--dance-create-text));
}
.dance-create-type-card-supporting {
  font-size: 0.76rem;
  line-height: 1.45;
  color: oklch(var(--dance-create-text-muted));
}
.dance-create-type-card-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid oklch(var(--dance-create-border-strong));
  color: transparent;
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.dance-create-type-card-check--on {
  background: oklch(var(--dance-create-accent));
  border-color: oklch(var(--dance-create-accent));
  color: oklch(var(--dance-create-accent-fg));
  box-shadow: 0 2px 10px oklch(var(--dance-create-accent) / 0.4);
}

/* ── Create Dance sheet — Choose 10-Second Section step ──
   Waveform canvas, fixed 10-second draggable window, live playhead indicator,
   and the too-short guard. Additive to the existing .dance-create-* tokens. */
.dance-create-timeline--selectable {
  touch-action: pan-y;
}
.dance-create-waveform-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.dance-create-window:focus-visible {
  outline: 2px solid oklch(var(--dance-create-accent));
  outline-offset: 2px;
}
.dance-create-window--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dance-create-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: oklch(var(--dance-create-accent));
  box-shadow: 0 0 8px oklch(var(--dance-create-accent) / 0.8);
  pointer-events: none;
  z-index: 3;
}
.dance-create-playhead-time {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  background: oklch(var(--dance-create-accent));
  color: oklch(var(--dance-create-accent-fg));
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dance-create-too-short {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: oklch(var(--dance-create-record) / 0.12);
  border: 1px solid oklch(var(--dance-create-record) / 0.4);
  color: oklch(var(--dance-create-record));
  font-size: 0.78rem;
  line-height: 1.4;
}
.dance-create-ghost-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Create Dance — Camera Recording step ──
   Additive to the existing .dance-create-* system. Adds the live 9:16
   front-camera preview, camera-flip control, large record button wrapped
   in a purple 10-second progress ring with a mono countdown, REC HUD, and
   the preview frame with Retake / Use Video actions. Dark theme + purple
   accent preserved; no feed or song-selection redesign. */
.dance-create-cam-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.dance-create-cam-frame--portrait {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  background: oklch(0.03 0 0);
  border: 1px solid oklch(var(--dance-create-border));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0
    rgba(255, 255, 255, 0.05);
}
.dance-create-cam-frame--recording {
  border-color: oklch(var(--dance-create-record) / 0.7);
  box-shadow: 0 0 0 3px oklch(var(--dance-create-record) / 0.18), 0 16px 48px
    rgba(0, 0, 0, 0.5);
}
.dance-create-cam-video--portrait {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* Camera flip control — standard camera-switch icon, over the preview */
.dance-create-flip-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: oklch(var(--dance-create-text));
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0
    rgba(255, 255, 255, 0.12);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s
    ease, color 0.15s ease;
}
.dance-create-flip-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: oklch(var(--dance-create-accent) / 0.5);
}
.dance-create-flip-btn:active {
  transform: scale(0.9);
}
.dance-create-flip-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Countdown number overlay — centered on the live preview */
.dance-create-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: oklch(var(--dance-create-countdown-fg));
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  animation: dance-create-countdown-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
    both;
}
/* Countdown / recording animations — referenced by the classes above but were
   never defined, so the 3-2-1 countdown and REC pulse never animated. */
@keyframes dance-create-countdown-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes dance-create-rec-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
@keyframes dance-create-record-pulse {
  0%,
  100% {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0
      rgba(255, 255, 255, 0.3), 0 0 0 0 oklch(var(--dance-create-record) / 0.5);
  }
  50% {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0
      rgba(255, 255, 255, 0.3), 0 0 0 10px oklch(var(--dance-create-record) / 0);
  }
}
@keyframes dance-create-step-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Record control cluster — large button wrapped in a purple progress ring */
.dance-create-record-cluster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
}
.dance-create-progress-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  /* The ring is decorative only — never let it intercept taps meant for the
     Record button beneath it. */
  pointer-events: none;
}
.dance-create-progress-ring circle {
  fill: none;
  stroke-width: 5;
}
.dance-create-progress-ring-track {
  stroke: oklch(var(--dance-create-progress-track));
}
.dance-create-progress-ring-fill {
  stroke: oklch(var(--dance-create-accent));
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px oklch(var(--dance-create-accent) / 0.6));
  transition: stroke-dashoffset 0.1s linear;
}
.dance-create-record-btn--large {
  width: 86px;
  height: 86px;
  border-width: 4px;
}
/* REC HUD timer — mono count-up next to the blinking REC chip */
.dance-create-rec-timer {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: oklch(var(--dance-create-text));
}
/* Preview frame — Retake / Use Video actions */
.dance-create-preview-actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}
.dance-create-retake-btn {
  flex: 1;
}
.dance-create-use-btn {
  flex: 2;
}
/* ── Create Dance — Final Post Preview step ──
   Replaces the Section Ready screen. Portrait video frame with simple
   Play/Pause + Restart controls, a 10s audio progress bar, optional caption
   field with a 150-char live counter, track/creator summary, and the
   Retake / Post action bar with a disabled 'Posting...' state. Additive to
   the existing .dance-create-* system; dark theme + purple accent kept. */
.dance-create-preview-stage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Finished-take halo — same 9:16 portrait frame as the camera step, now
   ringed with a quiet purple border so the preview reads as the final take */
.dance-create-preview-frame--final {
  border-color: oklch(var(--dance-create-accent) / 0.45);
  box-shadow: 0 0 0 1px oklch(var(--dance-create-accent) / 0.18), 0 16px 48px
    rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dance-create-preview-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* Playback controls — Play/Pause (purple, 52px) flanked by ghost buttons */
.dance-create-preview-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.dance-create-playback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: oklch(var(--dance-create-surface));
  border: 1px solid oklch(var(--dance-create-border-strong));
  color: oklch(var(--dance-create-text-dim));
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s
    ease, color 0.15s ease;
}
.dance-create-playback-btn:hover {
  background: oklch(var(--dance-create-surface-alt));
  border-color: oklch(var(--dance-create-accent) / 0.5);
  color: oklch(var(--dance-create-text));
}
.dance-create-playback-btn:active {
  transform: scale(0.92);
}
.dance-create-playback-btn--primary {
  width: 52px;
  height: 52px;
  background: oklch(var(--dance-create-accent));
  border-color: oklch(var(--dance-create-accent));
  color: oklch(var(--dance-create-accent-fg));
  box-shadow: 0 6px 20px oklch(var(--dance-create-accent) / 0.35), inset 0 1px 0
    rgba(255, 255, 255, 0.25);
}
.dance-create-playback-btn--primary:hover {
  background: oklch(var(--dance-create-accent));
  border-color: oklch(var(--dance-create-accent));
  color: oklch(var(--dance-create-accent-fg));
  opacity: 0.92;
}
/* 10-second audio progress indicator — slim pill, purple fill, mono times */
.dance-create-audio-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dance-create-audio-progress-track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: oklch(var(--dance-create-progress-track));
  overflow: hidden;
}
.dance-create-audio-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: oklch(var(--dance-create-accent));
  box-shadow: 0 0 8px oklch(var(--dance-create-accent) / 0.6);
  transition: width 0.1s linear;
}
.dance-create-audio-progress-time {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: oklch(var(--dance-create-text-muted));
  min-width: 2.4rem;
  text-align: right;
}
/* Caption — optional, 150-char limit, subtle live counter */
.dance-create-caption-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.dance-create-caption-counter {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: oklch(var(--dance-create-text-muted));
}
.dance-create-caption-counter--warn {
  color: oklch(var(--dance-create-record));
}
.dance-create-caption-field {
  width: 100%;
  min-height: 72px;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: oklch(var(--dance-create-caption-bg));
  border: 1px solid oklch(var(--dance-create-caption-border));
  color: oklch(var(--dance-create-text));
  font-size: 0.88rem;
  line-height: 1.45;
  resize: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.dance-create-caption-field:focus {
  outline: none;
  border-color: oklch(var(--dance-create-accent) / 0.7);
  box-shadow: 0 0 0 3px oklch(var(--dance-create-accent) / 0.15);
}
.dance-create-caption-field::-moz-placeholder {
  color: oklch(var(--dance-create-text-muted));
}
.dance-create-caption-field::placeholder {
  color: oklch(var(--dance-create-text-muted));
}
/* Audience — compact Echo-style pills, single-select, purple active state */
.dance-create-audience-options {
  display: flex;
  gap: 0.5rem;
}
.dance-create-audience-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: oklch(var(--dance-create-surface));
  border: 1px solid oklch(var(--dance-create-border));
  color: oklch(var(--dance-create-text-muted));
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    border-color 0.18s ease, background 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease, transform 0.12s ease;
}
.dance-create-audience-pill:hover {
  border-color: oklch(var(--dance-create-accent) / 0.45);
  color: oklch(var(--dance-create-text));
  background: oklch(var(--dance-create-surface-alt));
}
.dance-create-audience-pill:active {
  transform: scale(0.97);
}
.dance-create-audience-pill:has(input:focus-visible) {
  outline: 2px solid oklch(var(--dance-create-accent));
  outline-offset: 2px;
}
.dance-create-audience-pill--selected {
  border-color: oklch(var(--dance-create-accent) / 0.6);
  background: oklch(var(--dance-create-accent) / 0.12);
  color: oklch(var(--dance-create-accent));
  box-shadow: 0 0 0 1px oklch(var(--dance-create-accent) / 0.25);
}
/* Post summary — ♫ track title + @creator + mono section chip */
.dance-create-post-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: oklch(var(--dance-create-summary-bg));
  border: 1px solid oklch(var(--dance-create-summary-border));
}
.dance-create-post-summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: oklch(var(--dance-create-accent) / 0.12);
  border: 1px solid oklch(var(--dance-create-accent) / 0.35);
  color: oklch(var(--dance-create-accent));
  font-size: 0.9rem;
}
.dance-create-post-summary-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dance-create-post-summary-title {
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  color: oklch(var(--dance-create-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dance-create-post-summary-creator {
  font-size: 0.76rem;
  color: oklch(var(--dance-create-text-dim));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dance-create-post-summary-section {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: oklch(var(--dance-create-surface));
  border: 1px solid oklch(var(--dance-create-border));
  color: oklch(var(--dance-create-text-muted));
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Post action bar — Retake ghost (1x) + Post purple CTA (2x) */
.dance-create-post-actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}
.dance-create-post-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 2;
  padding: 0.85rem 1.25rem;
  border-radius: 14px;
  background: var(--dance-create-accent-gradient);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.32), inset 0 1px 0
    rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.dance-create-post-btn:active {
  transform: scale(0.98);
}
.dance-create-post-btn--posting {
  background: oklch(var(--dance-create-surface-alt));
  color: oklch(var(--dance-create-text-muted));
  box-shadow: none;
  cursor: not-allowed;
}
.dance-create-posting-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid oklch(var(--dance-create-text-muted) / 0.35);
  border-top-color: oklch(var(--dance-create-text-muted));
  animation: dance-create-spin 0.8s linear infinite;
  flex-shrink: 0;
}
/* Post failure — preview + caption stay intact, no re-record */
.dance-create-post-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: oklch(var(--dance-create-record) / 0.12);
  border: 1px solid oklch(var(--dance-create-record) / 0.4);
  color: oklch(var(--dance-create-post-error));
  font-size: 0.78rem;
  font-weight: 600;
}
@keyframes dance-create-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dance-create-countdown {
    animation: none;
  }
  .dance-create-posting-spinner {
    animation: none;
  }
}
/* ── Panel shadow ── */
.panel {
  background: var(--echo-surface);
  border: 1px solid var(--echo-border);
  box-shadow: var(--shadow-soft);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NFT CARD SURFACE SYSTEM — dark mode only
   Applied via .nft-card-shell and .nft-card-info on RarityCardRenderers
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Common card surface ── */
.nft-card-shell--common {
  background: radial-gradient(
    ellipse at 50% 35%,
    #1e2230 0%,
    #161a24 55%,
    #111520 100%
  ) !important;
  box-shadow: 0 0 30px 8px rgba(120, 80, 200, 0.07), 0 12px 48px
    rgba(0, 0, 0, 0.45) !important;
  filter: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.45));
}
.nft-card-info--common {
  background: radial-gradient(ellipse at 50% 0%, #1e2230 0%, #141720 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.nft-card-frame--common {
  box-shadow: inset 0 0 0 2px rgba(200, 205, 220, 0.22), inset 0 1px 0
    rgba(255, 255, 255, 0.08), inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* ── Rare card surface ── */
.nft-card-shell--rare {
  background: radial-gradient(
    ellipse at 50% 35%,
    #211c28 0%,
    #18141f 55%,
    #121018 100%
  ) !important;
  box-shadow: 0 0 30px 8px rgba(120, 80, 200, 0.08), 0 12px 48px
    rgba(0, 0, 0, 0.45), inset 0 0 28px rgba(255, 150, 180, 0.06) !important;
  filter: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.45));
}
.nft-card-info--rare {
  background: radial-gradient(ellipse at 50% 0%, #211c28 0%, #16111c 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.nft-card-frame--rare {
  box-shadow: inset 0 0 0 2px rgba(255, 150, 180, 0.35), inset 0 1px 0
    rgba(255, 255, 255, 0.08), inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* ── Ultra-rare card surface ── */
.nft-card-shell--ultra-rare {
  background: radial-gradient(
    ellipse at 50% 35%,
    #191f2c 0%,
    #131824 55%,
    #0f1320 100%
  ) !important;
  box-shadow: 0 0 30px 8px rgba(120, 80, 200, 0.08), 0 12px 48px
    rgba(0, 0, 0, 0.45), inset 0 0 32px rgba(100, 180, 255, 0.07) !important;
  filter: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.45));
}
.nft-card-info--ultra-rare {
  background: radial-gradient(ellipse at 50% 0%, #191f2d 0%, #111520 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.nft-card-frame--ultra-rare {
  box-shadow: inset 0 0 0 2px rgba(100, 180, 255, 0.35), inset 0 1px 0
    rgba(255, 255, 255, 0.08), inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* ── MINT card surface ── */
.nft-card-shell--mint {
  background: radial-gradient(
    ellipse at 50% 30%,
    #28224a 0%,
    #1e1a3a 40%,
    #16133000 55%,
    #111028 100%
  ) !important;
  box-shadow:
    0 0 0 1px rgba(196, 181, 253, 0.35),
    0 0 48px 12px rgba(139, 92, 246, 0.26),
    0 0 80px 24px rgba(196, 90, 240, 0.1),
    0 12px 48px rgba(0, 0, 0, 0.45),
    inset 0 0 48px rgba(200, 180, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  filter: drop-shadow(0 0 32px rgba(139, 92, 246, 0.28))
    drop-shadow(0 0 18px rgba(196, 90, 240, 0.14))
    drop-shadow(0 12px 48px rgba(0, 0, 0, 0.45));
}
.nft-card-info--mint {
  background: radial-gradient(ellipse at 50% 0%, #24204000 0%, #1a1734 100%) !important;
  box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.18), inset 0 0 16px
    rgba(167, 139, 250, 0.08) !important;
}

/* ── Text colors inside card info strips ── */
.nft-card-info--common .nft-card-title,
.nft-card-info--rare .nft-card-title,
.nft-card-info--ultra-rare .nft-card-title,
.nft-card-info--mint .nft-card-title {
  color: rgba(255, 255, 255, 0.92) !important;
}
.nft-card-info--common .nft-card-creator,
.nft-card-info--rare .nft-card-creator,
.nft-card-info--ultra-rare .nft-card-creator,
.nft-card-info--mint .nft-card-creator {
  color: rgba(255, 255, 255, 0.55) !important;
}
.nft-card-info--common .nft-card-meta,
.nft-card-info--rare .nft-card-meta,
.nft-card-info--ultra-rare .nft-card-meta,
.nft-card-info--mint .nft-card-meta {
  color: rgba(255, 255, 255, 0.38) !important;
}
.nft-card-info--common .nft-card-serial,
.nft-card-info--rare .nft-card-serial,
.nft-card-info--ultra-rare .nft-card-serial,
.nft-card-info--mint .nft-card-serial {
  color: rgba(255, 255, 255, 0.38) !important;
}

/* ── Badge overrides ── */
.nft-badge--common {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(200, 205, 220, 0.25) !important;
  color: rgba(200, 205, 220, 0.82) !important;
}

.nft-badge--mint {
  background: rgba(200, 180, 255, 0.14) !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
  color: rgba(220, 200, 255, 0.95) !important;
}

/* ── Album row card ── */
.album-row-card {
  backdrop-filter: blur(10px) saturate(150%);
  background: var(--echo-surface);
  border: 1px solid var(--echo-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── Nav ── */
nav.fixed.bottom-0 {
  background: var(--echo-nav-bg) !important;
  border-top: 1px solid var(--echo-nav-border) !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
}

/* ── Search / text inputs ── */
input[type="text"],
input[type="search"] {
  background: var(--input-bg) !important;
  border-color: var(--echo-border) !important;
  color: var(--text-primary) !important;
}
input::-moz-placeholder {
  color: var(--text-tertiary) !important;
}
input::placeholder {
  color: var(--text-tertiary) !important;
}

/* ── Stat cards ── */
.stat-card {
  background: var(--echo-surface);
  border-color: var(--echo-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ── Header ── */
header.fixed {
  background: var(--echo-header-bg) !important;
  border-bottom: 1px solid var(--echo-header-border) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* ── Mini player ── */
.mini-player {
  background: var(--echo-nav-bg);
  border-top: 1px solid var(--echo-border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
}

/* ── Category tabs ── */
.category-tab {
  background: var(--echo-surface);
  border: 1px solid var(--echo-border);
  color: var(--text-secondary);
}
.category-tab.active {
  background: rgba(180, 150, 255, 0.1);
  border-color: rgba(180, 150, 255, 0.25);
  color: rgba(180, 150, 255, 0.9);
}

/* Dark mode: transparent-white overlay overrides */
.bg-white\/\[0\.06\],
.bg-white\/\[0\.08\],
.bg-white\/\[0\.04\] {
  background-color: rgba(255, 255, 255, 0.04);
}
.hover\:bg-white\/\[0\.06\]:hover,
.hover\:bg-white\/\[0\.08\]:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.border-white\/\[0\.06\],
.border-white\/\[0\.08\] {
  border-color: rgba(255, 255, 255, 0.06);
}
.border-t.border-white\/\[0\.06\] {
  border-color: rgba(255, 255, 255, 0.06);
}
@keyframes filterPillSheen {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes mintBtnShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes crown-shimmer {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.crown-shimmer {
  animation: crown-shimmer 0.5s ease-out 0.1s 1 both;
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes value-flash {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tier-gold-pulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(210, 170, 100, 0.18), inset 0 0 6px
      rgba(210, 170, 100, 0.1);
  }
  50% {
    box-shadow: 0 0 18px rgba(210, 170, 100, 0.32), inset 0 0 10px
      rgba(210, 170, 100, 0.18);
  }
}

@keyframes tier-diamond-pulse {
  0%,
  100% {
    box-shadow: 0 0 12px rgba(200, 220, 255, 0.22), inset 0 0 8px
      rgba(200, 220, 255, 0.12);
  }
  50% {
    box-shadow: 0 0 22px rgba(200, 220, 255, 0.38), inset 0 0 14px
      rgba(200, 220, 255, 0.22);
  }
}

@keyframes tier-bar-enter {
  from {
    width: 0%;
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(105px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(105px) rotate(-360deg);
  }
}

@keyframes live-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

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

/* ── Library artwork tap-to-animate entrance ── */
@keyframes artReveal {
  from {
    transform: scale(0.92);
    filter: brightness(0.6) blur(2px);
  }
  to {
    transform: scale(1);
    filter: brightness(1) blur(0);
  }
}

@keyframes artRingPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.015);
  }
}

/* ── Audio Reactive CSS variables (set by JS) ── */
:root {
  --era-amp: 0;
  --era-bass: 0;
  --era-treble: 0;
  --era-peak: 0;
}

/* ── Reactive glow: artwork, player aura ── */
.echo-ra-glow {
  box-shadow: 0 0 calc(4px + var(--era-bass) * 8px)
    calc(1px + var(--era-bass) * 2px)
    rgba(var(--cycle-accent-rgb), calc(0.06 + var(--era-bass) * 0.1));
  transition: box-shadow 0.18s ease;
}

/* ── Reactive border: active card halo ── */
.echo-ra-border {
  border-color: rgba(
    var(--cycle-accent-rgb),
    calc(0.08 + var(--era-amp) * 0.18)
  ) !important;
  box-shadow: 0 0 calc(4px + var(--era-bass) * 8px)
    rgba(var(--cycle-accent-rgb), calc(0.04 + var(--era-bass) * 0.1));
}

/* ── Reactive progress bar glow ── */
.echo-ra-progress {
  box-shadow: 0 0 calc(2px + var(--era-amp) * 6px)
    rgba(var(--cycle-accent-rgb), calc(0.15 + var(--era-amp) * 0.2));
}

/* ── Reactive waveform bars ── */
.echo-ra-bar {
  transform-origin: bottom;
}
.echo-ra-bar-bass {
  transform: scaleY(calc(0.12 + var(--era-bass) * 0.88));
}
.echo-ra-bar-mid {
  transform: scaleY(calc(0.18 + var(--era-amp) * 0.82));
}
.echo-ra-bar-treble {
  transform: scaleY(calc(0.12 + var(--era-treble) * 0.88));
}

/* Disable all reactive effects when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
  .echo-ra-glow,
  .echo-ra-border,
  .echo-ra-progress,
  .echo-ra-scale {
    animation: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }
  .echo-ra-bar-bass,
  .echo-ra-bar-mid,
  .echo-ra-bar-treble {
    transform: scaleY(0.5) !important;
  }
}

/* ── Minty Primary Button ── */
.minty-primary-btn {
  background: var(--cycle-accent);
  color: #ffffff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--cycle-accent-rgb), 0.25), inset 0 1px 0
    rgba(255, 255, 255, 0.25);
  transition: opacity 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  transform: scale(1);
}
.minty-primary-btn:hover {
  opacity: 0.88;
  box-shadow: 0 6px 18px rgba(var(--cycle-accent-rgb), 0.3), inset 0 1px 0
    rgba(255, 255, 255, 0.2);
  transform: scale(0.98);
}
.minty-primary-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(var(--cycle-accent-rgb), 0.2), inset 0 1px 0
    rgba(255, 255, 255, 0.2);
}

/* ─────────────────────────────────────────────────────────────
   Pack Hero — premium animated product display
   ───────────────────────────────────────────────────────────── */

@keyframes packHeroFloat {
  0%,
  100% {
    transform: translateY(0px) rotateY(-7deg) rotateX(2deg);
  }
  50% {
    transform: translateY(-7px) rotateY(7deg) rotateX(4deg);
  }
}

@keyframes packGlowPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.82;
  }
}

@keyframes packLightSweep {
  0%,
  88% {
    opacity: 0;
    transform: translateX(-120%) skewX(-15deg);
  }
  90% {
    opacity: 0.13;
  }
  96% {
    opacity: 0;
    transform: translateX(220%) skewX(-15deg);
  }
  100% {
    opacity: 0;
    transform: translateX(220%) skewX(-15deg);
  }
}

@keyframes cardBgShimmer {
  0%,
  85% {
    opacity: 0;
    transform: translateX(-100%) skewX(-12deg);
  }
  88% {
    opacity: 0.06;
  }
  95% {
    opacity: 0;
    transform: translateX(200%) skewX(-12deg);
  }
  100% {
    opacity: 0;
  }
}

.pack-hero-animate {
  animation: packHeroFloat 7s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
  transition: filter 0.3s ease;
  display: block;
}

.pack-hero-animate:hover,
.pack-hero-hover {
  filter: drop-shadow(0 0 18px rgba(var(--cycle-accent-rgb), 0.5))
    drop-shadow(0 2px 10px rgba(0, 0, 0, 0.14)) !important;
}

.pack-glow-pulse {
  animation: packGlowPulse 4s ease-in-out infinite;
}

.pack-light-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 60%
  );
  animation: packLightSweep 12s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

.card-bg-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 65%
  );
  animation: cardBgShimmer 18s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* ── Slot-counter serial number animation ── */
@keyframes slotDigitIn {
  0% {
    transform: translateY(-40%);
    opacity: 0.4;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slot-digit {
  display: inline-block;
  animation: slotDigitIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Stagger delays for up to 6 digits */
.slot-digit:nth-child(1) {
  animation-delay: 0ms;
}
.slot-digit:nth-child(2) {
  animation-delay: 70ms;
}
.slot-digit:nth-child(3) {
  animation-delay: 140ms;
}
.slot-digit:nth-child(4) {
  animation-delay: 210ms;
}
.slot-digit:nth-child(5) {
  animation-delay: 280ms;
}
.slot-digit:nth-child(6) {
  animation-delay: 350ms;
}

@media (prefers-reduced-motion: reduce) {
  .slot-digit {
    animation: none !important;
  }
  .pack-hero-animate {
    animation: none !important;
    transform: none !important;
  }
  .pack-glow-pulse {
    animation: none !important;
  }
  .pack-light-sweep::after {
    animation: none !important;
    display: none;
  }
  .card-bg-shimmer::after {
    animation: none !important;
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Vinyl disc — owned-song player circular record art
   ───────────────────────────────────────────────────────────── */

@keyframes vinylSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ─── Thin-line progress waveform shimmer ──────────────────────────────────── */

/* Sweep highlight across the filled portion */
@keyframes waveformShimmer {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    opacity: 0.18;
  }
  80% {
    opacity: 0.18;
  }
  100% {
    transform: translateX(200%);
    opacity: 0;
  }
}

/* Base vinyl disc */
.vinyl-disc {
  border-radius: 50%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  will-change: transform;
}

/* Spinning state — animation-play-state driven by --spin-state CSS var */
.vinyl-spinning {
  animation: vinylSpin 70s linear infinite;
  animation-play-state: var(--spin-state, paused);
}

/* Fast vinyl spin for the large Now Playing disc — one rotation ~10s,
   still paused/resumed from the same position via --spin-state. */
.vinyl-spinning-fast {
  animation: vinylSpin 10s linear infinite;
  animation-play-state: var(--spin-state, paused);
}

/* Glowing ring on the active disc */
.vinyl-active-glow {
  box-shadow: 0 0 0 2px #c6b8ff, 0 0 14px 4px rgba(184, 169, 255, 0.45);
}

/* ── Waveform track rail ──────────────────────────────────────────────────── */
.waveform-track {
  /* thin pill rail — background set inline for dark/light flexibility */
}

/* ── Waveform fill — gradient + glow ─────────────────────────────────────── */
.waveform-fill {
  background: linear-gradient(90deg, #7c3aed 0%, #6366f1 55%, #818cf8 100%);
  box-shadow: 0 0 6px 1px rgba(124, 58, 237, 0.4), 0 0 12px 2px
    rgba(99, 102, 241, 0.2);
  transition: box-shadow 0.6s ease, width 0.1s linear;
}

/* Slightly brighter glow when playing */
.waveform-fill--playing {
  box-shadow: 0 0 8px 2px rgba(124, 58, 237, 0.6), 0 0 16px 4px
    rgba(99, 102, 241, 0.35);
}

/* ── Shimmer sweep inner layer ───────────────────────────────────────────── */
.waveform-shimmer-layer {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  width: 40%;
  animation: waveformShimmer 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* ── Scrubber handle ─────────────────────────────────────────────────────── */
.waveform-handle {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e0d4ff;
  box-shadow: 0 0 4px 2px rgba(124, 58, 237, 0.5), 0 0 8px
    rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.waveform-handle--active {
  box-shadow: 0 0 6px 3px rgba(124, 58, 237, 0.7), 0 0 10px
    rgba(255, 255, 255, 0.3);
}

/* ── Container focus ring ────────────────────────────────────────────────── */
.waveform-progress-container:focus-visible {
  outline: 2px solid rgba(198, 184, 255, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Feed card audio waveform (MomentPostCard) ─────────────────────────────
   Minimal bar-style waveform that reads as voice/audio, not a video player.
   Rendered near the bottom of the photo, above the caption/username. */
.moment-card-waveform {
  position: relative;
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.moment-card-waveform:focus-visible {
  outline: 2px solid rgba(198, 184, 255, 0.6);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Thin pill rail */
.moment-card-waveform-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

/* Purple gradient fill — matches the .waveform-fill aesthetic */
.moment-card-waveform-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed 0%, #6366f1 55%, #818cf8 100%);
  box-shadow: 0 0 6px 1px rgba(124, 58, 237, 0.45);
  transition: width 0.1s linear;
  overflow: hidden;
}

.moment-card-waveform-fill--playing {
  box-shadow: 0 0 8px 2px rgba(124, 58, 237, 0.65), 0 0 16px 4px
    rgba(99, 102, 241, 0.35);
}

/* Small scrubber handle */
.moment-card-waveform-handle {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e0d4ff;
  box-shadow: 0 0 4px 2px rgba(124, 58, 237, 0.5), 0 0 8px
    rgba(255, 255, 255, 0.25);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .moment-card-waveform-fill {
    transition: none;
  }
  .vinyl-spinning,
  .vinyl-spinning-fast {
    animation: none !important;
  }
  .waveform-shimmer-layer {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   EnergyLine — legacy classes kept for any residual references
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   Circle node — Hot page organic idle animations
   ───────────────────────────────────────────────────────────── */

@keyframes circleNodeFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes circleNodeGlowPulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
  }
  50% {
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.38), 0 0 28px
      rgba(139, 92, 246, 0.12);
  }
}

@keyframes circleTapPulse {
  0% {
    transform: scale(1.04);
  }
  40% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1.04);
  }
}

@keyframes circleActiveOuterPulse {
  0%,
  100% {
    box-shadow: 0 0 28px rgba(139, 92, 246, 0.85), 0 0 55px
      rgba(139, 92, 246, 0.35), 0 0 80px rgba(139, 92, 246, 0.12);
  }
  50% {
    box-shadow: 0 0 36px rgba(139, 92, 246, 0.95), 0 0 70px
      rgba(139, 92, 246, 0.5), 0 0 100px rgba(167, 139, 250, 0.2);
  }
}

/* Idle state: float + glow pulse */
.circle-node-idle {
  animation: circleNodeFloat 3.5s ease-in-out infinite, circleNodeGlowPulse 3s
    ease-in-out infinite;
}

/* Active/playing state: outer glow pulse (spin is set via inline styles) */
.circle-node-active-glow {
  animation: circleNodeFloat 0s linear, circleActiveOuterPulse 2s ease-in-out
    infinite;
}

/* Single tap pulse (one-shot via class toggle) */
.circle-tap-pulse {
  animation: circleTapPulse 0.3s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .circle-node-idle,
  .circle-node-active-glow,
  .circle-tap-pulse {
    animation: none !important;
  }
}

@keyframes energy-glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 4px 1px rgba(139, 92, 246, 0.18);
  }
  50% {
    box-shadow: 0 0 12px 3px rgba(139, 92, 246, 0.35);
  }
}

@keyframes energy-tap-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.6);
  }
  100% {
    box-shadow: 0 0 16px 6px rgba(139, 92, 246, 0);
  }
}

@keyframes energy-shimmer-sweep {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(200%);
    opacity: 0;
  }
}

.energy-line-container {
  position: relative;
}

.energy-line-playing {
  animation: energy-glow-pulse 2.5s ease-in-out infinite;
  box-shadow: 0 0 8px 2px rgba(139, 92, 246, 0.28);
  transition: box-shadow 200ms ease-out;
}

.energy-line-tap {
  animation: energy-tap-pulse 0.4s ease-out forwards;
}

.energy-line-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  width: 50%;
  animation: energy-shimmer-sweep 5s ease-in-out infinite;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────
   Echo Line — SVG continuous waveform (no bar animations)
   All animation is handled via inline styles in EnergyLine.tsx
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .energy-line-playing,
  .energy-line-tap {
    animation: none !important;
  }
  .energy-line-shimmer {
    animation: none !important;
    display: none;
  }
}

.message-bubble-sent {
  background: oklch(var(--message-sent-bg));
  color: oklch(var(--message-sent-text));
  border-radius: 16px 4px 16px 16px;
  padding: 12px 16px;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.18);
  word-wrap: break-word;
  max-width: 85%;
}

.message-bubble-received {
  background: oklch(var(--message-received-bg));
  color: oklch(var(--message-received-text));
  border: 1px solid oklch(var(--chat-card-border));
  border-radius: 4px 16px 16px 16px;
  padding: 12px 16px;
  backdrop-filter: blur(10px) saturate(150%);
  word-wrap: break-word;
  max-width: 85%;
}

.chat-card {
  background: oklch(var(--chat-card-bg));
  border: 1px solid oklch(var(--chat-card-border));
  border-radius: 12px;
  padding: 12px;
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.08);
  transition: all 0.2s ease;
  cursor: pointer;
}

.chat-card:hover {
  border-color: oklch(var(--search-input-border));
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.16);
}

.search-input-hero {
  background: oklch(var(--search-input-bg));
  border: 1.5px solid oklch(var(--search-input-border) / 0.4);
  border-radius: 12px;
  padding: 14px 16px;
  color: oklch(var(--foreground));
  font-size: 1rem;
  width: 100%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px) saturate(150%);
}

.search-input-hero:focus {
  outline: none;
  border-color: oklch(var(--search-input-border));
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.28), inset 0 1px 2px
    rgba(255, 255, 255, 0.06);
}

.search-input-hero::-moz-placeholder {
  color: oklch(var(--muted-foreground));
}

.search-input-hero::placeholder {
  color: oklch(var(--muted-foreground));
}

.attachment-sheet {
  background: oklch(var(--attachment-sheet-bg));
  border-top: 1px solid oklch(var(--attachment-sheet-border));
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(10px) saturate(150%);
  padding: 20px;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
}

.attachment-menu-item {
  background: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.attachment-menu-item:hover {
  background: oklch(var(--card) / 0.8);
  border-color: oklch(var(--accent));
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.12);
}

.echo-terminal-glass {
  background: rgba(8, 8, 20, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.echo-scanline {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(139, 92, 246, 0.015) 2px,
    rgba(139, 92, 246, 0.015) 4px
  );
  animation: scanlineScroll 8s linear infinite;
  pointer-events: none;
}

@keyframes scanlineScroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100px;
  }
}

.echo-onboarding-input {
  background: rgba(8, 8, 20, 0.8);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 0.5rem;
  color: white;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.echo-onboarding-input:focus {
  border-color: rgba(139, 92, 246, 0.7);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.echo-onboarding-input::-moz-placeholder {
  color: rgba(156, 163, 175, 0.6);
}

.echo-onboarding-input::placeholder {
  color: rgba(156, 163, 175, 0.6);
}

.echo-avatar-ring {
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.2);
}

/* ── Success checkmark animation ── */
.success-checkmark {
  animation: checkmarkPop 0.4s ease forwards;
}

@keyframes checkmarkPop {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* ── Modal fade-out animation ── */
.modal-fadeout {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.friends-scroll-row::-webkit-scrollbar {
  display: none;
}

@keyframes friend-glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.6), 0 0 28px
      rgba(139, 92, 246, 0.22);
  }
  50% {
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.85), 0 0 40px
      rgba(139, 92, 246, 0.35);
  }
}

.friend-glow-ring {
  animation: friend-glow-pulse 3s ease-in-out infinite;
}

@keyframes terminal-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes terminal-wisp {
  from {
    opacity: 0.5;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 1;
    transform: translateY(-10px) scale(1.15);
  }
}

/* ── Echo Collect — confirmation sheet + success animation keyframes ── */
@keyframes collect-sheet-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes collect-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The track thumbnail shrinks and arcs toward the Collections icon in the
   bottom nav while fading out, trailed by a brief purple glow. Quick and
   non-blocking — the feed stays interactive underneath. */
@keyframes collect-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  40% {
    opacity: 1;
    transform: translate(-8%, -18%) scale(0.72);
  }
  100% {
    opacity: 0;
    transform: translate(-46%, -46%) scale(0.28);
  }
}

@keyframes collect-fly-glow {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  35% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

/* The + button flips to the collected check state with a quick pop. */
@keyframes collect-button-pop {
  0% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collect-sheet,
  .collect-overlay,
  .collect-fly,
  .collect-fly-glow,
  .collect-button-pop {
    animation: none !important;
  }
}

/* ── Echo Dance feed — keyframes ── */
@keyframes dance-card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dance-fire-pop {
  0% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 0 oklch(var(--dance-fire-active) / 0));
  }
  40% {
    transform: scale(1.2) translateY(-3px);
    filter: drop-shadow(0 0 10px oklch(var(--dance-fire-active) / 0.55));
  }
  100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 0 oklch(var(--dance-fire-active) / 0));
  }
}

@keyframes dance-fire-burst {
  0% {
    opacity: 0.9;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes dance-sheet-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dance-comment-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dance-track-glow {
  0%,
  100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 0
      oklch(var(--dance-play-glow) / 0.55), inset 0 1px 0
      rgba(255, 255, 255, 0.08);
  }
  50% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 16px 4px
      oklch(var(--dance-play-glow) / 0.35), inset 0 1px 0
      rgba(255, 255, 255, 0.08);
  }
}

@keyframes dance-track-ring {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}

@keyframes dance-eq-bounce {
  0%,
  100% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dance-post-card,
  .dance-play-btn,
  .dance-play-ring,
  .dance-fire-pop,
  .dance-fire-burst,
  .dance-comment-sheet,
  .dance-comment-row,
  .dance-track-loop-chip--playing,
  .dance-track-loop-chip--playing::after,
  .dance-track-eq span,
  [data-ocid="dance.create_post_button"] {
    animation: none !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ECHO DESKTOP RESPONSIVE SYSTEM — additive layer, >=768px only
   Mobile-first styles above are untouched. Every desktop rule lives
   inside a min-width media query or (hover: hover) so the mobile
   layout and tap behavior stay exactly as they are.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* Centered desktop shell (1180px, 32–48px side padding) */
  --echo-container-max: 1180px;
  --echo-pad-inline: 2rem; /* 32px side padding */
  --echo-pad-inline-lg: 2.5rem; /* 40px side padding >=1024px */
  /* Content columns inside the shell */
  --echo-feed-col: 560px; /* Dance portrait column (520–580px) */
  --echo-feed-col-main: 960px; /* Main feed column (900–1000px) */
  --echo-nav-max: 780px; /* Bottom nav containment (700–850px) */
  --echo-library-max: 820px; /* Collections / Profile (760–900px) */
  --echo-auth-max: 450px; /* Sign-in modal (420–480px) */
  /* Sheets / composer / panels */
  --echo-sheet-max: 560px;
  --echo-composer-max: 680px;
  --echo-panel-max: 680px;
}

/* ── Shared desktop container — inert below 768px so the mobile
   shell stays full-bleed. Apply to the shell (header / main /
   bottom nav / player) and page wrappers. ── */
.echo-container {
  /* no-op on mobile */
}
@media (min-width: 768px) {
  .echo-container {
    width: 100%;
    max-width: var(--echo-container-max);
    margin-inline: auto;
    padding-inline: var(--echo-pad-inline);
  }
}
@media (min-width: 1024px) {
  .echo-container {
    padding-inline: var(--echo-pad-inline-lg);
  }
}

/* ── Desktop: main feed column — constrains the ChatsPage feed and its
   filter pills to a centered ~960px column (900–1000px) inside the shell.
   Inert below 1024px so tablet stays closer to mobile. ── */
@media (min-width: 1024px) {
  .echo-feed-col {
    width: min(var(--echo-feed-col-main), 100%);
    margin-inline: auto;
  }
}

/* ── Desktop: main feed row — slightly taller for a clean music-library
   feel, metadata grouped near the track. Inert below 1024px so mobile
   stays compact. ── */
@media (min-width: 1024px) {
  .echo-feed-row {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }
}

/* ── Desktop: bottom nav containment — narrows the fixed nav to a
   centered ~780px bar (700–850px) with rounded top corners. ── */
@media (min-width: 1024px) {
  .echo-nav-shell {
    max-width: var(--echo-nav-max);
    margin-inline: auto;
    border-radius: 20px 20px 0 0;
  }
}

/* ── Desktop: Collections / Profile column — widens to ~820px
   (760–900px), centered. ── */
@media (min-width: 1024px) {
  .echo-library-col {
    width: min(var(--echo-library-max), 100%);
    margin-inline: auto;
  }
}

/* ── Desktop: sign-in modal — true centered global modal card
   ~450px (420–480px), centered horizontally and vertically. ── */
@media (min-width: 1024px) {
  .echo-auth-card {
    width: min(var(--echo-auth-max), calc(100% - 2rem));
  }
}

/* ── Desktop: bottom sheets become centered cards ──
   margin:auto on the sheet inside its flex parent (fixed inset-0
   flex justify-end) centers it on both axes, overriding the mobile
   bottom anchoring without touching any mobile style. */
@media (min-width: 768px) {
  .dance-comment-sheet,
  .collect-sheet,
  .attachment-sheet {
    margin: auto;
    width: min(var(--echo-sheet-max), calc(100% - 2rem));
    border-radius: 24px;
  }
  .collect-sheet,
  .attachment-sheet {
    max-height: min(80vh, var(--echo-panel-max));
    overflow-y: auto;
  }
  /* Native dialogs (CommentsPanel, loop replace) — centered cards
     with clamped height and internal scrolling on tall monitors */
  dialog {
    border-radius: 24px !important;
    max-height: min(85vh, 760px) !important;
  }
}

/* ── Desktop: Dance composer becomes a centered 680px column ── */
@media (min-width: 768px) {
  .dance-create-header,
  .dance-create-progress,
  .dance-create-step,
  .dance-create-action-bar {
    width: 100%;
    max-width: var(--echo-composer-max);
    margin-inline: auto;
  }
}

/* ── Desktop: Dance feed stays a centered portrait column ── */
@media (min-width: 768px) {
  .dance-snap-container {
    width: min(var(--echo-feed-col), 100%);
    margin-inline: auto;
  }
  .dance-post-card {
    max-width: var(--echo-feed-col);
    margin-inline: auto;
  }
  .dance-action-rail {
    right: 1rem;
  }
  .dance-time-filter-row {
    justify-content: center;
    max-width: var(--echo-feed-col);
    margin-inline: auto;
  }
  /* FAB tracks the centered feed column instead of the viewport edge */
  [data-ocid="dance.create_post_button"] {
    right: max(1.25rem, calc(50vw - var(--echo-feed-col) / 2 + 1.25rem));
  }
}

/* ── Desktop: Dance filter pills join the centered portrait column ──
   The Friends / Trending / Top row aligns to the same 560px column as
   the feed cards and FAB so the whole Dance surface reads as one
   cohesive centered column. Inert below 1024px (tablet stays closer
   to mobile). */
@media (min-width: 1024px) {
  .dance-filter-row {
    width: min(var(--echo-feed-col), 100%);
    margin-inline: auto;
  }
}

/* ── Shared hoverable row utility — apply to Collections track rows,
   profile/friend rows. Inert on touch devices (hover: hover only). ── */
.echo-library-row {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* ── Subtle hover states — pointer devices only. Opacity/color/
   background transitions only; no scale, no dramatic effects ── */
@media (hover: hover) {
  nav.fixed.bottom-0 a,
  nav.fixed.bottom-0 button,
  header.fixed a,
  header.fixed button {
    transition: opacity 0.15s ease, color 0.15s ease;
  }
  nav.fixed.bottom-0 a:hover,
  nav.fixed.bottom-0 button:hover {
    opacity: 0.8;
  }
  header.fixed a:hover,
  header.fixed button:hover {
    opacity: 0.85;
  }
  .dance-create-cta:hover:not(.dance-create-cta--disabled),
  .dance-create-post-btn:hover:not(.dance-create-post-btn--posting),
  .dance-create-continue-btn:hover:not(:disabled),
  .dance-create-select-btn:hover,
  .dance-create-cancel-btn:hover,
  .dance-create-type-card:hover,
  .dance-create-track-row:hover,
  .publish-btn--ready:hover {
    opacity: 0.92;
  }
  .dance-action-btn:hover {
    color: oklch(var(--dance-rail-fg));
    opacity: 0.85;
  }
  /* Floating Dance create button — subtle opacity lift on pointer
     devices only; tap behavior untouched. */
  [data-ocid="dance.create_post_button"]:hover {
    opacity: 0.9;
  }
  .album-row-card:hover,
  .echo-library-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
  }
  /* Main feed rows — subtle background lift on pointer devices only */
  .echo-feed-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
  }
  /* Feed price pill + collect control — subtle opacity lift */
  [data-ocid^="friends.feed.price."] {
    transition: opacity 0.15s ease;
  }
  [data-ocid^="friends.feed.price."]:hover {
    opacity: 0.85;
  }
  [data-ocid^="friends.feed.collect."]:hover {
    opacity: 0.8;
  }
  /* Inline-styled modal buttons (Add Friend, Friend Requests, Login,
     Comments) — subtle opacity lift on pointer devices only. */
  .echo-modal-btn:hover {
    opacity: 0.85;
  }
  .dance-send-btn:hover:not(:disabled) {
    opacity: 0.9;
  }
}

/* ── Desktop: Create Dance composer widens to ~680px (600–720px range) ──
   The composer reuses .dance-comment-sheet (560px default). A dedicated
   modifier widens it so the waveform gets extra horizontal space while the
   camera/preview stay proportioned (9:16, max-width 320px) and controls sit
   directly below the media. Inert below 768px. */
@media (min-width: 768px) {
  .dance-create-sheet {
    width: min(var(--echo-composer-max), calc(100% - 2rem));
  }
  /* Social comments dialog — vertically centered card on desktop. The
     mobile bottom anchoring (bottom:0 + margin:0 auto) is overridden so the
     dialog floats centered in the viewport instead of hugging the bottom. */
  .echo-comments-dialog {
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
.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;
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}
.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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));
}
.hover\:scale-\[1\.03\]:hover {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  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));
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 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-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-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}
.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-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.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\: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\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}
.focus\:z-10:focus {
  z-index: 10;
}
.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\: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\:outline-1:focus-visible {
  outline-width: 1px;
}
.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-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}
.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;
}
.active\:scale-\[0\.97\]:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  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));
}
.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}
.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-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.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\:flex {
    display: flex;
  }

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

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

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

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

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

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

  .sm\:rounded-2xl {
    border-radius: 1.25rem;
  }

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

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

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

  .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\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .md\:my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

  .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\:max-w-2xl {
    max-width: 42rem;
  }

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

  .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-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\:h-\[76px\] {
    height: 76px;
  }

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

  .lg\:pt-\[76px\] {
    padding-top: 76px;
  }
}
.\[\&\: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));
}