*, ::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: General 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: 0.25rem;

    --font-display: "Bricolage Grotesque";
    --font-body: "General Sans";
    --font-mono: "Geist Mono";
  }

  .dark {
    /* DirtSwap.net — aggressive motocross dark theme */
    /* Pure black so the logo's solid-black background blends seamlessly */
    --background: 0 0 0;
    --foreground: 0.95 0.01 240;
    --card: 0.14 0.01 240;
    --card-foreground: 0.95 0.01 240;
    --popover: 0.12 0.01 240;
    --popover-foreground: 0.95 0.01 240;
    /* Orange primary — DirtSwap accent */
    --primary: 0.65 0.2 40;
    --primary-foreground: 0.1 0.01 240;
    /* Neutral secondary */
    --secondary: 0.2 0.01 240;
    --secondary-foreground: 0.9 0.01 240;
    --muted: 0.2 0.01 240;
    --muted-foreground: 0.6 0.01 240;
    --accent: 0.65 0.2 40;
    --accent-foreground: 0.1 0.01 240;
    --destructive: 0.55 0.22 25;
    --destructive-foreground: 0.95 0.01 240;
    --success: 0.7 0.18 145;
    --success-foreground: 0.1 0.01 240;
    --warning: 0.78 0.16 75;
    --warning-foreground: 0.15 0.02 75;
    --border: 0.22 0.01 240;
    --input: 0.18 0.01 240;
    --ring: 0.65 0.2 40;
    /* Reputation tiers — derived from badgeLevel, motocross-metal palette */
    --rep-bronze: 0.6 0.1 55;
    --rep-bronze-foreground: 0.95 0.01 240;
    --rep-silver: 0.72 0.02 240;
    --rep-silver-foreground: 0.1 0.01 240;
    --rep-gold: 0.78 0.16 85;
    --rep-gold-foreground: 0.15 0.02 85;
    --rep-platinum: 0.85 0.05 220;
    --rep-platinum-foreground: 0.1 0.01 240;
    /* Charts */
    --chart-1: 0.65 0.2 40;
    --chart-2: 0.62 0.18 180;
    --chart-3: 0.58 0.16 120;
    --chart-4: 0.68 0.22 60;
    --chart-5: 0.72 0.2 30;
    /* Sidebar */
    --sidebar: 0.1 0.01 240;
    --sidebar-foreground: 0.95 0.01 240;
    --sidebar-primary: 0.65 0.2 40;
    --sidebar-primary-foreground: 0.1 0.01 240;
    --sidebar-accent: 0.18 0.01 240;
    --sidebar-accent-foreground: 0.95 0.01 240;
    --sidebar-border: 0.22 0.01 240;
    --sidebar-ring: 0.65 0.2 40;
    /* ===== $DSD ECONOMY TOKENS ===== */
    /* $DSD brand — honey-gold, distinct from muted rep-gold (0.78 0.16 85) */
    --dsd: 0.82 0.18 85;
    --dsd-foreground: 0.16 0.04 85;
    --dsd-muted: 0.68 0.12 85;
    /* $DSD warning — deep amber for no-cash-out disclaimer */
    --dsd-warning: 0.72 0.16 65;
    --dsd-warning-foreground: 0.16 0.05 65;
    --dsd-warning-bg: 0.22 0.06 65;
    /* Profile flair — 5 tasteful color options, none overlap orange primary or rep metals */
    --flair-gold: 0.82 0.18 85;
    --flair-mint: 0.78 0.15 165;
    --flair-rose: 0.72 0.17 12;
    --flair-azure: 0.74 0.14 235;
    --flair-violet: 0.7 0.16 305;
    /* Loyalty-tier flair colors — derived from badgeLevel. Each tier maps to
       one colorToken used by resolveActiveFlair. grey=Novice, bronze=Vet,
       copper=Amateur, blue=Pro, purple=Factory Support, gold=Full Factory.
       Reuses --flair-gold for Full Factory so the top tier keeps the honey-gold
       prestige. Distinct from the rep-metal tokens (--rep-bronze/silver/gold/
       platinum) which back the badge chips, not the name flair. */
    --flair-grey: 0.62 0.01 240;
    --flair-bronze: 0.6 0.1 55;
    --flair-copper: 0.68 0.14 45;
    --flair-blue: 0.7 0.14 240;
    --flair-purple: 0.65 0.18 300;
    /* Rainbow flair — founder-exclusive gradient (not a single OKLCH color).
       Token is a marker; the gradient is applied directly in .dsd-flair-rainbow. */
    --flair-rainbow: 0.75 0.2 0;
    /* ===== ADMIN / FOUNDER BADGE TOKENS ===== */
    /* Founder — richer warm gold than --dsd (0.82 0.18 85) and --rep-gold (0.78 0.16 85) */
    --founder: 0.85 0.2 75;
    --founder-foreground: 0.16 0.05 75;
    --founder-muted: 0.7 0.14 75;
    /* Admin — authoritative deep steel-blue, distinct from --flair-azure (0.74 0.14 235) */
    --admin: 0.62 0.16 255;
    --admin-foreground: 0.95 0.02 255;
    --admin-muted: 0.5 0.1 255;
    /* Moderator — emerald green, distinct from admin steel-blue and flair-emerald */
    --moderator: 0.7 0.16 155;
    --moderator-foreground: 0.98 0.02 155;
    --moderator-muted: 0.55 0.12 155;
    /* Ambassador — warm violet/magenta, distinct from admin steel-blue,
       moderator emerald, flair-violet (0.7 0.16 305), and founder gold.
       A touch deeper and more saturated than flair-violet so the chip reads
       as authority, not cosmetic flair. */
    --ambassador: 0.62 0.2 320;
    --ambassador-foreground: 0.98 0.02 320;
    --ambassador-muted: 0.5 0.14 320;
    /* ===== $DSD HARDCAP PROGRESS TOKENS ===== */
    --hardcap-track: 0.18 0.01 240;
    --hardcap-fill: 0.82 0.18 85;
    --hardcap-fill-highlight: 0.92 0.12 85;

    /* ===== $DSD SUPPLY DONUT TOKENS ===== */
    /* Six distinct saturated hues for the 6-slice allocation donut — not
       shades of the same color. Each slice maps to one allocation bucket of
       the 10B $DSD cap. Hues are spread across the wheel so adjacent slices
       never collide:
         communityRewards      — emerald green (largest, rewards pool)
         communityTreasury     — deep violet (treasury / governance)
         ecosystemDevelopment  — cyan (growth / dev)
         founderTeam           — honey-gold brand hue (founder slice, locked)
         liquidityReserve      — steel blue (reserve / liquidity)
         contributorsAdvisors  — warm rose (people / advisors) */
    --donut-community-rewards: 0.72 0.17 155;
    --donut-community-treasury: 0.62 0.18 295;
    --donut-ecosystem-development: 0.7 0.15 195;
    --donut-founder-team: 0.7 0.19 45;
    --donut-liquidity-reserve: 0.66 0.14 245;
    --donut-contributors-advisors: 0.68 0.17 15;

    /* ===== MEMBER GLOBE TOKENS =====
       Minimalistic dark globe on the landing hero. Sphere is a touch lighter
       than page bg so it reads as a 3D object, not a hole. Continents render
       as faint dotted/line topography in a cool low-chroma blue-grey —
       NOT a realistic Earth texture, NOT a pure wireframe. Nodes glow in the
       DirtSwap motocross palette: orange for standard member countries, red
       for high-density hubs. Node radius scales with member count. */
    --globe-sphere: 0.13 0.008 240;
    --globe-sphere-shadow: 0.04 0.01 240;
    --globe-continent: 0.45 0.025 240;
    --globe-continent-faint: 0.32 0.018 240;
    --globe-atmosphere: 0.55 0.04 240;
    --globe-graticule: 0.28 0.012 240;
    /* Node tiers — orange primary for standard countries, red destructive for hubs.
       Hub threshold and exact radius mapping are component-side; tokens fix the
       colors so the globe matches the rest of the motocross palette. */
    --globe-node: 0.65 0.2 40;
    --globe-node-hub: 0.55 0.22 25;
    --globe-node-glow: 0.65 0.2 40;
    --globe-node-hub-glow: 0.55 0.22 25;
    --globe-node-hover: 0.78 0.22 45;
    --globe-ring: 0.65 0.2 40;
    /* Popover — reuses popover base, adds orange-tinted border for globe context */
    --globe-popover-border: 0.65 0.2 40;
    /* Counter — Fraunces italic figure + muted label, matches $DSD currency feel */
    --globe-counter: 0.85 0.16 40;
    --globe-counter-muted: 0.6 0.01 240;

    /* ===== DIRECT MESSAGING TOKENS =====
       Member-to-member DM upgrade of the existing Messages feature.
       Reuses orange primary for own-message bubbles, dark card for theirs,
       success green for Accept, destructive red for Block, muted grey for
       offline presence. Online presence reuses the globe node orange so the
       DM presence dot matches the homepage globe. Request-pending accent
       is a softer orange so request cards read as "awaiting" not "active".
       All tokens are additive — existing forum/$DSD/globe tokens untouched. */
    /* Presence — online reuses globe node orange; offline is muted grey */
    --dm-presence-online: 0.65 0.2 40;
    --dm-presence-offline: 0.45 0.01 240;
    /* Message bubbles — own reuses primary orange; theirs reuses card dark.
       A slightly elevated card L (0.18) gives "their" bubbles a touch more
       surface than the page so they read as discrete units against black. */
    --dm-bubble-own: 0.65 0.2 40;
    --dm-bubble-own-foreground: 0.1 0.01 240;
    --dm-bubble-theirs: 0.18 0.01 240;
    --dm-bubble-theirs-foreground: 0.95 0.01 240;
    /* Day separator — muted label + thin border, no color of its own */
    --dm-day-separator: 0.4 0.01 240;
    /* Request card — softer orange accent for "awaiting" state, distinct
       from the solid primary used for active conversations. */
    --dm-request-accent: 0.7 0.16 40;
    --dm-request-accent-bg: 0.22 0.04 40;
    /* Unread badge — solid orange, reuses primary but pinned as a token so
       the header envelope badge stays consistent if primary shifts. */
    --dm-unread: 0.65 0.2 40;
    --dm-unread-foreground: 0.1 0.01 240;
    /* Composer bar — card surface + top border, sticky at bottom of view */
    --dm-composer-bg: 0.12 0.01 240;
    --dm-composer-border: 0.22 0.01 240;
    /* Listing embed inside a bubble — slightly darker than the bubble so
        the embedded card reads as a nested object, not more message text. */
    --dm-embed-bg: 0.1 0.01 240;
    --dm-embed-border: 0.22 0.01 240;

    /* ===== NETWORK RELIABILITY / CONNECTION-INCIDENT TOKENS =====
       Additive tokens for the connection-issue banner + admin incident
       panels. The site-wide banner reuses the existing --warning amber
       (0.78 0.16 75) so it visually matches ViewAsMemberBanner; these
       tokens add a slightly more saturated "degraded" amber for the
       banner's left accent stripe + an incident accent for the admin
       panel's incident rows, distinct from --dsd-warning (0.72 0.16 65)
       and --warning so admin incident rows read as network-state, not
       $DSD-economy or generic caution. */
    --net-degraded: 0.74 0.17 70;
    --net-degraded-foreground: 0.16 0.04 70;
    --net-degraded-bg: 0.22 0.05 70;
    --net-incident: 0.68 0.18 50;
    --net-incident-foreground: 0.16 0.04 50;
    --net-incident-bg: 0.2 0.04 50;
    --net-incident-border: 0.32 0.06 50;
  }

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

  body {
  background-color: oklch(var(--background));
  color: oklch(var(--foreground));
    font-family: "General Sans", system-ui, sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1;
}

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Geist", system-ui, sans-serif;
  }
.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

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

  .container {
    max-width: 1400px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.prose-invert {
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-0\.5 {
  bottom: -0.125rem;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-left-\[1\.65rem\] {
  left: -1.65rem;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-2 {
  bottom: 0.5rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-2\.5 {
  left: 0.625rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.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-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[60\] {
  z-index: 60;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-m-1 {
  margin: -0.25rem;
}
.m-0 {
  margin: 0px;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.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-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.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-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.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;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}
.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-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.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-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-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-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-52 {
  height: 13rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[0\.9em\] {
  height: 0.9em;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[60vh\] {
  height: 60vh;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[320px\] {
  max-height: 320px;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[92vh\] {
  max-height: 92vh;
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-\[180px\] {
  min-height: 180px;
}
.min-h-\[30vh\] {
  min-height: 30vh;
}
.min-h-\[40vh\] {
  min-height: 40vh;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[68px\] {
  min-height: 68px;
}
.min-h-dvh {
  min-height: 100dvh;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-1\/4 {
  width: 25%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.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-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-52 {
  width: 13rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[280px\] {
  width: 280px;
}
.w-\[380px\] {
  width: 380px;
}
.w-\[55\%\] {
  width: 55%;
}
.w-\[60\%\] {
  width: 60%;
}
.w-\[600px\] {
  width: 600px;
}
.w-\[var\(--radix-popover-trigger-width\)\] {
  width: var(--radix-popover-trigger-width);
}
.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-11 {
  min-width: 2.75rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[18px\] {
  min-width: 18px;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[18rem\] {
  max-width: 18rem;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[75\%\] {
  max-width: 75%;
}
.max-w-\[78\%\] {
  max-width: 78%;
}
.max-w-\[85vw\] {
  max-width: 85vw;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
  --tw-translate-x: -100%;
  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-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));
}
.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-0 {
  --tw-rotate: 0deg;
  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));
}
.scale-0 {
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  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));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  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 badge-chip-in {

  0% {
    transform: scale(0.85) translateY(2px);
    opacity: 0;
  }

  60% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.animate-badge-chip-in {
  animation: badge-chip-in 0.3s ease-out;
}
@keyframes hardcap-fill-in {

  0% {
    width: 0%;
  }

  100% {
    width: var(--hardcap-target, 0%);
  }
}
.animate-hardcap-fill-in {
  animation: hardcap-fill-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@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;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.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-inside {
  list-style-position: inside;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: 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-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-cols-\[2\.5rem_1fr\] {
  grid-template-columns: 2.5rem 1fr;
}
.grid-cols-\[auto_1fr_auto\] {
  grid-template-columns: auto 1fr auto;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0\.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-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-20 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: oklch(var(--border));
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-clip {
  text-overflow: clip;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.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: var(--radius);
}
.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 {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) + 2px);
  border-bottom-right-radius: calc(var(--radius) + 2px);
}
.rounded-bl {
  border-bottom-left-radius: 0.25rem;
}
.rounded-bl-md {
  border-bottom-left-radius: calc(var(--radius) + 2px);
}
.rounded-br-md {
  border-bottom-right-radius: calc(var(--radius) + 2px);
}
.rounded-tl-sm {
  border-top-left-radius: var(--radius);
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-\[oklch\(var\(--dsd\)\/0\.4\)\] {
  border-color: oklch(var(--dsd)/0.4);
}
.border-accent\/30 {
  border-color: oklch(var(--accent) / 0.3);
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}
.border-amber-500\/50 {
  border-color: rgb(245 158 11 / 0.5);
}
.border-blue-500\/40 {
  border-color: rgb(59 130 246 / 0.4);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-card {
  border-color: oklch(var(--card));
}
.border-destructive {
  --tw-border-opacity: 1;
  border-color: oklch(var(--destructive) / var(--tw-border-opacity, 1));
}
.border-destructive\/30 {
  border-color: oklch(var(--destructive) / 0.3);
}
.border-destructive\/40 {
  border-color: oklch(var(--destructive) / 0.4);
}
.border-destructive\/50 {
  border-color: oklch(var(--destructive) / 0.5);
}
.border-destructive\/60 {
  border-color: oklch(var(--destructive) / 0.6);
}
.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-emerald-500\/50 {
  border-color: rgb(16 185 129 / 0.5);
}
.border-gray-500\/40 {
  border-color: rgb(107 114 128 / 0.4);
}
.border-green-500\/40 {
  border-color: rgb(34 197 94 / 0.4);
}
.border-green-500\/50 {
  border-color: rgb(34 197 94 / 0.5);
}
.border-indigo-500\/40 {
  border-color: rgb(99 102 241 / 0.4);
}
.border-input {
  border-color: oklch(var(--input));
}
.border-muted-foreground\/30 {
  border-color: oklch(var(--muted-foreground) / 0.3);
}
.border-orange-500\/30 {
  border-color: rgb(249 115 22 / 0.3);
}
.border-orange-500\/40 {
  border-color: rgb(249 115 22 / 0.4);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/20 {
  border-color: oklch(var(--primary) / 0.2);
}
.border-primary\/30 {
  border-color: oklch(var(--primary) / 0.3);
}
.border-primary\/40 {
  border-color: oklch(var(--primary) / 0.4);
}
.border-primary\/50 {
  border-color: oklch(var(--primary) / 0.5);
}
.border-primary\/60 {
  border-color: oklch(var(--primary) / 0.6);
}
.border-purple-500\/40 {
  border-color: rgb(168 85 247 / 0.4);
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-yellow-500\/40 {
  border-color: rgb(234 179 8 / 0.4);
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#1a1a1a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}
.bg-\[oklch\(0\.08_0\.005_240\)\] {
  background-color: oklch(0.08 0.005 240);
}
.bg-\[oklch\(var\(--dsd\)\/0\.08\)\] {
  background-color: oklch(var(--dsd)/0.08);
}
.bg-\[oklch\(var\(--dsd\)\/0\.16\)\] {
  background-color: oklch(var(--dsd)/0.16);
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-accent\/15 {
  background-color: oklch(var(--accent) / 0.15);
}
.bg-accent\/60 {
  background-color: oklch(var(--accent) / 0.6);
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}
.bg-amber-500\/5 {
  background-color: rgb(245 158 11 / 0.05);
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-blue-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-cyan-500\/10 {
  background-color: rgb(6 182 212 / 0.1);
}
.bg-cyan-500\/15 {
  background-color: rgb(6 182 212 / 0.15);
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive\/10 {
  background-color: oklch(var(--destructive) / 0.1);
}
.bg-destructive\/15 {
  background-color: oklch(var(--destructive) / 0.15);
}
.bg-destructive\/20 {
  background-color: oklch(var(--destructive) / 0.2);
}
.bg-destructive\/5 {
  background-color: oklch(var(--destructive) / 0.05);
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/20 {
  background-color: rgb(16 185 129 / 0.2);
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-gray-500\/20 {
  background-color: rgb(107 114 128 / 0.2);
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}
.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}
.bg-indigo-500\/20 {
  background-color: rgb(99 102 241 / 0.2);
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted-foreground\/40 {
  background-color: oklch(var(--muted-foreground) / 0.4);
}
.bg-muted-foreground\/50 {
  background-color: oklch(var(--muted-foreground) / 0.5);
}
.bg-muted\/20 {
  background-color: oklch(var(--muted) / 0.2);
}
.bg-muted\/30 {
  background-color: oklch(var(--muted) / 0.3);
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-muted\/60 {
  background-color: oklch(var(--muted) / 0.6);
}
.bg-orange-500\/10 {
  background-color: rgb(249 115 22 / 0.1);
}
.bg-orange-500\/20 {
  background-color: rgb(249 115 22 / 0.2);
}
.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\/10 {
  background-color: oklch(var(--primary) / 0.1);
}
.bg-primary\/15 {
  background-color: oklch(var(--primary) / 0.15);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-primary\/5 {
  background-color: oklch(var(--primary) / 0.05);
}
.bg-primary\/70 {
  background-color: oklch(var(--primary) / 0.7);
}
.bg-purple-500\/20 {
  background-color: rgb(168 85 247 / 0.2);
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary\/15 {
  background-color: oklch(var(--secondary) / 0.15);
}
.bg-secondary\/40 {
  background-color: oklch(var(--secondary) / 0.4);
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-yellow-500\/20 {
  background-color: rgb(234 179 8 / 0.2);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-primary\/10 {
  --tw-gradient-from: oklch(var(--primary) / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/5 {
  --tw-gradient-from: oklch(var(--primary) / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/60 {
  --tw-gradient-from: oklch(var(--primary) / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-background {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), oklch(var(--background)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary\/40 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), oklch(var(--primary) / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-background {
  --tw-gradient-to: oklch(var(--background)) var(--tw-gradient-to-position);
}
.to-card {
  --tw-gradient-to: oklch(var(--card)) var(--tw-gradient-to-position);
}
.to-primary\/60 {
  --tw-gradient-to: oklch(var(--primary) / 0.6) var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.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-1 {
  padding-bottom: 0.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.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;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-heading {
  font-family: Geist, system-ui, sans-serif;
}
.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-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.6rem\] {
  font-size: 0.6rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.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-extrabold {
  font-weight: 800;
}
.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-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[oklch\(var\(--dsd\)\)\] {
  color: oklch(var(--dsd));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-background {
  color: oklch(var(--background));
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-destructive\/50 {
  color: oklch(var(--destructive) / 0.5);
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-indigo-300 {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground\/20 {
  color: oklch(var(--muted-foreground) / 0.2);
}
.text-muted-foreground\/30 {
  color: oklch(var(--muted-foreground) / 0.3);
}
.text-muted-foreground\/40 {
  color: oklch(var(--muted-foreground) / 0.4);
}
.text-muted-foreground\/50 {
  color: oklch(var(--muted-foreground) / 0.5);
}
.text-muted-foreground\/60 {
  color: oklch(var(--muted-foreground) / 0.6);
}
.text-muted-foreground\/70 {
  color: oklch(var(--muted-foreground) / 0.7);
}
.text-muted-foreground\/80 {
  color: oklch(var(--muted-foreground) / 0.8);
}
.text-orange-200 {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}
.text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / 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-primary\/90 {
  color: oklch(var(--primary) / 0.9);
}
.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/0 {
  color: rgb(255 255 255 / 0);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.decoration-muted-foreground\/40 {
  text-decoration-color: oklch(var(--muted-foreground) / 0.4);
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-0 {
  opacity: 0;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px 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_-4px_12px_-4px_oklch\(0_0_0\/0\.15\)\] {
  --tw-shadow: 0 -4px 12px -4px oklch(0 0 0/0.15);
  --tw-shadow-colored: 0 -4px 12px -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-\[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-\[inset_0_0_0_1px_oklch\(0\.74_0\.14_235\/0\.5\)\] {
  --tw-shadow: inset 0 0 0 1px oklch(0.74 0.14 235/0.5);
  --tw-shadow-colored: inset 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-\[inset_0_0_0_1px_oklch\(0\.78_0\.16_75\/0\.5\)\] {
  --tw-shadow: inset 0 0 0 1px oklch(0.78 0.16 75/0.5);
  --tw-shadow-colored: inset 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-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-orange-glow {
  --tw-shadow: 0 0 24px oklch(0.65 0.20 40 / 0.25);
  --tw-shadow-colored: 0 0 24px 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-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);
}
.shadow-primary\/10 {
  --tw-shadow-color: oklch(var(--primary) / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-primary\/20 {
  --tw-shadow-color: oklch(var(--primary) / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.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-1 {
  --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);
}
.ring-2 {
  --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);
}
.ring-card {
  --tw-ring-color: oklch(var(--card));
}
.ring-destructive\/30 {
  --tw-ring-color: oklch(var(--destructive) / 0.3);
}
.ring-destructive\/40 {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}
.ring-primary\/30 {
  --tw-ring-color: oklch(var(--primary) / 0.3);
}
.ring-primary\/40 {
  --tw-ring-color: oklch(var(--primary) / 0.4);
}
.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);
}
.blur-3xl {
  --tw-blur: blur(64px);
  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);
}
.blur-sm {
  --tw-blur: blur(4px);
  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);
}
.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.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;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.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 !important;
}
.paused {
  animation-play-state: paused;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
::-webkit-scrollbar-track {
    background: oklch(0.1 0.01 240);
  }
::-webkit-scrollbar-thumb {
    background: oklch(0.25 0.01 240);
    border-radius: 2px;
  }
::-webkit-scrollbar-thumb:hover {
    background: oklch(0.65 0.2 40);
  }
.ds-blur-overlay {
    position: relative;
  }
.ds-blur-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(12px);
    background: oklch(0.1 0.01 240 / 0.35);
    border-radius: inherit;
    pointer-events: none;
  }
.ds-pill-active {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    box-shadow: 0 0 16px oklch(0.65 0.2 40 / 0.25);
  }
.ds-pill-inactive {
    background: oklch(var(--secondary));
    color: oklch(var(--secondary-foreground));
  }
.ds-sidebar-backdrop {
    background: oklch(0.05 0.01 240 / 0.6);
    backdrop-filter: blur(4px);
  }
/* (1) Quote block — bordered inset block with orange left accent, attributed header */
.ds-quote {
    background: oklch(0.12 0.01 240);
    border: 1px solid oklch(var(--border));
    border-left: 3px solid oklch(var(--primary) / 0.6);
    border-radius: var(--radius);
  }
.ds-quote-header {
    color: oklch(var(--muted-foreground));
    border-bottom: 1px solid oklch(var(--border) / 0.6);
  }
.ds-quote-author {
    color: oklch(0.85 0.14 40);
    font-weight: 600;
  }
.ds-quote-body {
    color: oklch(0.78 0.01 240);
  }
/* (2) Author sidebar — vertical card beside a post, collapses to horizontal strip */
.ds-author-sidebar {
    background: oklch(0.12 0.01 240);
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    /* Contain the sidebar's content inside the 160px column. The column
       itself is sized by .ds-post-author-col; the sidebar fills it and
       must never overflow horizontally (no absolute positioning, no
       nowrap, no fixed widths wider than the column). min-width:0 lets
       the flex child shrink so the username wrap rule below can break
       long tokens instead of blowing out the card. */
    min-width: 0;
    overflow: hidden;
  }
/* Username wrapper inside the sidebar — the shared UserBadge → Username
     component renders the alias. We force wrapping (never truncation, never
     overflow) so a long alias breaks across lines inside the 160px column
     instead of being clipped or pushing the body column. */
.ds-author-sidebar-username {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    min-width: 0;
  }
/* Rank label — subtle muted text with a single trailing star, NO border,
     NO box, NO background. Used under the username in the thread sidebar
     and on the member profile header. Visually distinct from the role
     chips (Admin / Ambassador / Moderator) which render inline with the
     name via Username. Compact contexts (forum index last-post cells,
     topic list rows) do NOT render a rank at all. */
.ds-rank-label {
    color: oklch(var(--muted-foreground));
    font-size: 0.75rem;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
  }
.ds-author-sidebar-alias {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: oklch(0.85 0.14 40);
  }
.ds-author-sidebar-alias:hover {
    color: oklch(var(--primary));
    text-decoration: underline;
  }
.ds-author-sidebar-stat {
    color: oklch(var(--muted-foreground));
  }
.ds-author-sidebar-stat-value {
    color: oklch(var(--foreground));
    font-weight: 600;
  }
/* (3) Views counter — small eye-icon pill on thread cards/headers */
.ds-views-pill {
    background: oklch(var(--secondary) / 0.6);
    color: oklch(var(--muted-foreground));
    border: 1px solid oklch(var(--border) / 0.6);
    border-radius: 9999px;
  }
/* (4) Edited timestamp — subtle italic label beside original timestamp */
.ds-edited-label {
    color: oklch(var(--muted-foreground) / 0.8);
    font-style: italic;
    font-size: 0.75rem;
  }
/* (5) Up/down vote control — vertical stack, coexists with heart like button */
.ds-vote {
    color: oklch(var(--muted-foreground));
  }
.ds-vote-btn {
    color: oklch(var(--muted-foreground));
    transition: color 0.15s ease, transform 0.15s ease;
  }
.ds-vote-btn:hover {
    color: oklch(var(--foreground));
  }
.ds-vote-up-active {
    color: oklch(var(--success));
    filter: drop-shadow(0 0 6px oklch(var(--success) / 0.4));
  }
.ds-vote-down-active {
    color: oklch(var(--destructive));
    filter: drop-shadow(0 0 6px oklch(var(--destructive) / 0.4));
  }
.ds-vote-score {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    color: oklch(var(--foreground));
  }
.ds-vote-score-up {
    color: oklch(var(--success));
  }
.ds-vote-score-down {
    color: oklch(var(--destructive));
  }
/* (6) $DSD tip button + modal — coin/gift icon button, modal with quick-amount chips */
.ds-tip-btn {
    background: oklch(var(--secondary));
    color: oklch(0.85 0.14 40);
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    transition: all 0.2s ease;
  }
.ds-tip-btn:hover {
    background: oklch(var(--primary) / 0.16);
    border-color: oklch(var(--primary) / 0.5);
    box-shadow: 0 0 16px oklch(var(--primary) / 0.18);
  }
.ds-tip-modal {
    background: oklch(var(--popover));
    border: 1px solid oklch(var(--border));
    border-radius: calc(var(--radius) + 2px);
    box-shadow: 0 12px 40px oklch(0.02 0.01 240 / 0.7);
  }
.ds-tip-chip {
    background: oklch(var(--secondary));
    color: oklch(0.85 0.14 40);
    border: 1px solid oklch(var(--primary) / 0.4);
    border-radius: var(--radius);
    transition: all 0.15s ease;
  }
.ds-tip-chip:hover {
    background: oklch(var(--primary) / 0.16);
    border-color: oklch(var(--primary) / 0.7);
  }
.ds-tip-chip-active {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border-color: oklch(var(--primary));
    box-shadow: 0 0 16px oklch(var(--primary) / 0.3);
  }
.ds-tip-input {
    background: oklch(var(--input));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    color: oklch(var(--foreground));
  }
.ds-tip-input:focus {
    border-color: oklch(var(--primary));
    box-shadow: 0 0 0 2px oklch(var(--primary) / 0.3);
    outline: none;
  }
.ds-tip-balance {
    color: oklch(var(--muted-foreground));
  }
/* ===== MOBILE FORUM POLISH =====
     Additive mobile-only behavior for the forum. No colors, fonts, or
     desktop layout are touched. Scoped to max-width: 768px so desktop
     renders exactly as before. */
/* Collapsible quote blocks — collapsed by default on mobile with a
     tap-to-expand affordance. The RichBody component toggles the
     `ds-quote-expanded` class on the container when a blockquote is
     tapped. The ::after gradient overlay signals there is more content
     and disappears once expanded. */
@media (max-width: 768px) {
    .ds-quote-collapsible blockquote {
      max-height: 4rem;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: max-height 0.25s ease;
    }
    .ds-quote-collapsible.ds-quote-expanded blockquote {
      max-height: 60rem;
    }
    /* Gradient fade overlay on collapsed quotes — visual cue that more
       text is hidden. Removed once expanded. */
    .ds-quote-collapsible:not(.ds-quote-expanded) blockquote::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 50%,
        oklch(0.12 0.01 240 / 0.92) 100%
      );
      pointer-events: none;
    }
    /* Tap-to-expand hint label under collapsed quotes. */
    .ds-quote-collapsible:not(.ds-quote-expanded) blockquote::before {
      content: "Tap to expand quote";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0.25rem 0.5rem;
      font-size: 0.7rem;
      font-style: normal;
      font-weight: 600;
      text-align: center;
      color: oklch(var(--primary));
      z-index: 1;
      pointer-events: none;
    }
  }
/* Docked reply composer — sticky bottom-0 on mobile so the reply box
     stays reachable above the iOS home indicator. The component applies
     .ds-reply-dock + .safe-bottom + a card background; this rule ensures
     the sticky positioning behaves correctly inside the scroll container.
     Layout is flex-column at all breakpoints: full-width textarea on top,
     Post Reply button right-aligned below it (via .ds-reply-actions). */
.ds-reply-dock {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    padding: 0.75rem;
    z-index: 30;
  }
/* Right-aligned action row beneath the textarea. The submit button sits
     on the right edge; future secondary actions can stack left of it. */
.ds-reply-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
.ds-heading {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
.ds-card-hover {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  animation-duration: 200ms;
}
.ds-card-hover:hover {
  --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));
  --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);
  --tw-shadow-color: oklch(var(--primary) / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.ds-orange-glow {
    box-shadow: 0 0 20px oklch(0.65 0.2 40 / 0.2);
  }
.ds-stripe {
    background: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      oklch(0.65 0.2 40 / 0.04) 10px,
      oklch(0.65 0.2 40 / 0.04) 20px
    );
  }
/* Subscription bell — active state uses success green, inactive uses muted */
.ds-sub-bell-active {
    color: oklch(var(--success));
    background: oklch(var(--success) / 0.12);
    box-shadow: 0 0 0 1px oklch(var(--success) / 0.4) inset;
  }
.ds-sub-bell-inactive {
    color: oklch(var(--muted-foreground));
    background: oklch(var(--secondary));
  }
/* Reputation chips — motocross-metal tiers, tight 0.25rem radius */
.ds-rep-bronze {
    background: oklch(var(--rep-bronze) / 0.18);
    color: oklch(0.85 0.06 55);
    box-shadow: 0 0 0 1px oklch(var(--rep-bronze) / 0.5) inset;
  }
.ds-rep-silver {
    background: oklch(var(--rep-silver) / 0.16);
    color: oklch(0.92 0.01 240);
    box-shadow: 0 0 0 1px oklch(var(--rep-silver) / 0.5) inset;
  }
.ds-rep-gold {
    background: oklch(var(--rep-gold) / 0.18);
    color: oklch(0.9 0.12 85);
    box-shadow: 0 0 0 1px oklch(var(--rep-gold) / 0.5) inset;
  }
.ds-rep-platinum {
    background: oklch(var(--rep-platinum) / 0.16);
    color: oklch(0.95 0.03 220);
    box-shadow: 0 0 0 1px oklch(var(--rep-platinum) / 0.55) inset;
  }
/* Leaderboard — top-3 rank accent bar on the left edge */
.ds-rank-bar-1 {
    box-shadow: inset 4px 0 0 oklch(var(--rep-gold));
  }
.ds-rank-bar-2 {
    box-shadow: inset 4px 0 0 oklch(var(--rep-silver));
  }
.ds-rank-bar-3 {
    box-shadow: inset 4px 0 0 oklch(var(--rep-bronze));
  }
/* My Garage card — reuses Bike Builds posts, orange-tinted left accent */
.ds-garage-card {
    border-left: 3px solid oklch(var(--primary) / 0.6);
  }
/* My Collection card — photo-forward, category tag chip */
.ds-collection-tag {
    background: oklch(var(--secondary));
    color: oklch(var(--secondary-foreground));
    border: 1px solid oklch(var(--border));
  }
.ds-collection-tag-bike {
    background: oklch(var(--primary) / 0.16);
    color: oklch(0.85 0.14 40);
    border: 1px solid oklch(var(--primary) / 0.4);
  }
.ds-collection-tag-gear {
    background: oklch(var(--chart-2) / 0.16);
    color: oklch(0.82 0.12 180);
    border: 1px solid oklch(var(--chart-2) / 0.4);
  }
.ds-collection-tag-collectible {
    background: oklch(var(--rep-gold) / 0.16);
    color: oklch(0.85 0.12 85);
    border: 1px solid oklch(var(--rep-gold) / 0.4);
  }
/* Public profile — alias headline + rep badge inline */
.ds-profile-alias {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    letter-spacing: -0.02em;
  }
/* $DSD currency figure — site standard heading font (Geist via .ds-heading
     stack) for a refined currency feel that matches the rest of the UI. */
.dsd-amount {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: oklch(var(--dsd));
  }
/* $DSD label / unit */
.dsd-unit {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 600;
    color: oklch(var(--dsd-muted));
  }
/* Purchase modal — trust surface, gold-bordered elevated card */
.dsd-modal {
    background: oklch(var(--popover));
    border: 1px solid oklch(var(--dsd) / 0.3);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: 0 16px 48px oklch(0.02 0.01 240 / 0.8), 0 0 0 1px
      oklch(var(--dsd) / 0.08);
  }
.dsd-modal-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: oklch(var(--foreground));
  }
/* Trust warning bar — no-cash-out disclaimer */
.dsd-warning {
    background: oklch(var(--dsd-warning-bg));
    border: 1px solid oklch(var(--dsd-warning) / 0.5);
    border-left: 3px solid oklch(var(--dsd-warning));
    border-radius: var(--radius);
    color: oklch(var(--dsd-warning-foreground));
  }
.dsd-warning-label {
    color: oklch(0.85 0.12 65);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
  }
/* $DSD primary button — gold CTA, distinct from orange primary */
.dsd-btn {
    background: oklch(var(--dsd));
    color: oklch(var(--dsd-foreground));
    border-radius: var(--radius);
    font-weight: 600;
    transition: all 0.2s ease;
  }
.dsd-btn:hover {
    box-shadow: 0 0 24px oklch(var(--dsd) / 0.4);
    filter: brightness(1.05);
  }
.dsd-btn-outline {
    background: transparent;
    color: oklch(var(--dsd));
    border: 1px solid oklch(var(--dsd) / 0.5);
    border-radius: var(--radius);
    transition: all 0.2s ease;
  }
.dsd-btn-outline:hover {
    background: oklch(var(--dsd) / 0.1);
    border-color: oklch(var(--dsd));
  }
/* $DSD-only listing badge — coin glyph + label */
.dsd-listing-badge {
    background: oklch(var(--dsd) / 0.14);
    color: oklch(var(--dsd));
    border: 1px solid oklch(var(--dsd) / 0.45);
    border-radius: var(--radius);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
  }
/* Boosted listing — gold corner ribbon */
.dsd-boost-ribbon {
    background: oklch(var(--dsd));
    color: oklch(var(--dsd-foreground));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6rem;
    box-shadow: 0 2px 8px oklch(var(--dsd) / 0.3);
  }
.dsd-boost-glow {
    box-shadow: 0 0 0 1px oklch(var(--dsd) / 0.3), 0 4px 20px
      oklch(var(--dsd) / 0.1);
  }
/* Pinned-by-$DSD thread indicator */
.dsd-pin-indicator {
    color: oklch(var(--dsd));
    background: oklch(var(--dsd) / 0.12);
    border: 1px solid oklch(var(--dsd) / 0.4);
    border-radius: var(--radius);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
  }
/* Premium bounty badge — star/crown glyph + label, gold-bordered */
.dsd-bounty-badge {
    background: oklch(var(--dsd) / 0.12);
    color: oklch(var(--dsd));
    border: 1px solid oklch(var(--dsd) / 0.5);
    border-radius: var(--radius);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
  }
.dsd-bounty-card {
    border: 1px solid oklch(var(--dsd) / 0.25);
    background: oklch(var(--card));
  }
.dsd-bounty-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 3px 0 0 oklch(var(--dsd));
  }
/* Currency filter pills — All / USD / $DSD */
.dsd-currency-pill {
    background: oklch(var(--secondary));
    color: oklch(var(--muted-foreground));
    border: 1px solid oklch(var(--border));
    border-radius: 9999px;
    transition: all 0.15s ease;
  }
.dsd-currency-pill-active-dsd {
    background: oklch(var(--dsd) / 0.16);
    color: oklch(var(--dsd));
    border-color: oklch(var(--dsd) / 0.6);
    box-shadow: 0 0 12px oklch(var(--dsd) / 0.2);
  }
/* Profile flair — colored display name + flair dot badge */
.dsd-flair-name {
    font-weight: 700;
    text-shadow: 0 0 12px oklch(var(--flair-current, var(--dsd)) / 0.25);
  }
.dsd-flair-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    box-shadow: 0 0 0 1px oklch(0.1 0.01 240 / 0.4), 0 0 8px
      oklch(var(--flair-current, var(--dsd)) / 0.5);
  }
.dsd-flair-gold {
    color: oklch(var(--flair-gold));
    --flair-current: var(--flair-gold);
  }
/* Loyalty-tier flair colors — derived from badgeLevel (Novice → Full Factory).
     Each token maps to one of the 6 loyalty tiers; rainbow is staff-only. */
.dsd-flair-grey {
    color: oklch(var(--flair-grey));
    --flair-current: var(--flair-grey);
  }
.dsd-flair-bronze {
    color: oklch(var(--flair-bronze));
    --flair-current: var(--flair-bronze);
  }
.dsd-flair-copper {
    color: oklch(var(--flair-copper));
    --flair-current: var(--flair-copper);
  }
.dsd-flair-blue {
    color: oklch(var(--flair-blue));
    --flair-current: var(--flair-blue);
  }
.dsd-flair-purple {
    color: oklch(var(--flair-purple));
    --flair-current: var(--flair-purple);
  }
.dsd-flair-mint {
    color: oklch(var(--flair-mint));
    --flair-current: var(--flair-mint);
  }
.dsd-flair-rose {
    color: oklch(var(--flair-rose));
    --flair-current: var(--flair-rose);
  }
.dsd-flair-azure {
    color: oklch(var(--flair-azure));
    --flair-current: var(--flair-azure);
  }
.dsd-flair-violet {
    color: oklch(var(--flair-violet));
    --flair-current: var(--flair-violet);
  }
/* Loyalty-tier chip backgrounds + borders — derived from the SAME --flair-*
     tokens as the dsd-flair-* color classes above so a badge chip's text,
     stars (fill-current), background, and border all render in the level's
     own color. badgeChipClasses returns one dsd-flair-* + one dsd-chip-bg-* +
     one dsd-chip-border-* per tier; consumers that split the string on
     spaces expect exactly these three classes. */
.dsd-chip-bg-grey {
    background: oklch(var(--flair-grey) / 0.16);
  }
.dsd-chip-border-grey {
    border-color: oklch(var(--flair-grey) / 0.5);
  }
.dsd-chip-bg-bronze {
    background: oklch(var(--flair-bronze) / 0.18);
  }
.dsd-chip-border-bronze {
    border-color: oklch(var(--flair-bronze) / 0.55);
  }
.dsd-chip-bg-copper {
    background: oklch(var(--flair-copper) / 0.18);
  }
.dsd-chip-border-copper {
    border-color: oklch(var(--flair-copper) / 0.55);
  }
.dsd-chip-bg-blue {
    background: oklch(var(--flair-blue) / 0.18);
  }
.dsd-chip-border-blue {
    border-color: oklch(var(--flair-blue) / 0.55);
  }
.dsd-chip-bg-purple {
    background: oklch(var(--flair-purple) / 0.18);
  }
.dsd-chip-border-purple {
    border-color: oklch(var(--flair-purple) / 0.55);
  }
.dsd-chip-bg-gold {
    background: oklch(var(--flair-gold) / 0.18);
  }
.dsd-chip-border-gold {
    border-color: oklch(var(--flair-gold) / 0.55);
  }
/* Rainbow flair — founder-exclusive. Gradient text + gradient dot.
     Overrides the solid-color pattern used by the other flairs because
     rainbow is a gradient, not a single color. --flair-current is set to
     a representative hue so the inherited text-shadow/dot box-shadow still
     render a sensible glow.

     IMPORTANT: FlairBadge applies BOTH `.dsd-flair-name` and `.dsd-flair-rainbow`
     to the SAME element (e.g. `<span class="dsd-flair-name dsd-flair-rainbow">`).
     Descendant selectors (`.dsd-flair-rainbow .dsd-flair-name`) would never
     match because there is no parent-child relationship — both classes live on
     one element. Use COMPOUND selectors (`.dsd-flair-name.dsd-flair-rainbow`)
     so the gradient + background-clip:text actually apply. */
.dsd-flair-rainbow {
    --flair-current: 0.75 0.2 285;
  }
.dsd-flair-name.dsd-flair-rainbow {
    background: linear-gradient(
      90deg,
      #ff0000,
      #ff7f00,
      #ffff00,
      #00ff00,
      #0000ff,
      #4b0082,
      #9400d3
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
.dsd-flair-dot.dsd-flair-rainbow {
    background: linear-gradient(
      90deg,
      #ff0000,
      #ff7f00,
      #ffff00,
      #00ff00,
      #0000ff,
      #4b0082,
      #9400d3
    );
  }
/* Flair picker swatch — in dashboard Buy Flair flow */
.dsd-flair-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 2px solid oklch(var(--border));
    transition: all 0.15s ease;
  }
.dsd-flair-swatch:hover {
    transform: scale(1.1);
  }
.dsd-flair-swatch-active {
    border-color: oklch(var(--foreground));
    box-shadow: 0 0 0 2px oklch(var(--flair-current, var(--dsd)) / 0.5);
  }
/* $DSD spend-sink action button — secondary gold outline */
.dsd-sink-btn {
    background: oklch(var(--secondary));
    color: oklch(var(--dsd));
    border: 1px solid oklch(var(--dsd) / 0.35);
    border-radius: var(--radius);
    transition: all 0.2s ease;
  }
.dsd-sink-btn:hover {
    background: oklch(var(--dsd) / 0.12);
    border-color: oklch(var(--dsd) / 0.7);
    box-shadow: 0 0 16px oklch(var(--dsd) / 0.18);
  }
.dsd-sink-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
/* $DSD balance chip — dashboard, next to loyalty status */
.dsd-balance-chip {
    background: oklch(var(--dsd) / 0.1);
    border: 1px solid oklch(var(--dsd) / 0.35);
    border-radius: var(--radius);
  }
/* Shared admin/founder chip base — tight 0.25rem radius, micro-type, inset ring.
     max-height: 20px enforces the ≤20px role-badge height rule (Admin,
     Ambassador, Moderator) on the shared base so all three role chips render
     at identical size and after-name placement. */
.ds-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    max-height: 20px;
    border-radius: var(--radius);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }
/* Founder — premium warm gold, distinct from flair-gold (name color) and rep-gold (tier chip) */
.ds-badge-founder {
    background: oklch(var(--founder) / 0.16);
    color: oklch(var(--founder));
    box-shadow: inset 0 0 0 1px oklch(var(--founder) / 0.55), 0 0 12px
      oklch(var(--founder) / 0.22);
  }
.ds-badge-founder-glyph {
    color: oklch(var(--founder));
    filter: drop-shadow(0 0 4px oklch(var(--founder) / 0.5));
  }
/* Admin — authoritative deep steel-blue, distinct from flair-azure (name color) */
.ds-badge-admin {
    background: oklch(var(--admin) / 0.16);
    color: oklch(var(--admin-foreground) / 0.95);
    box-shadow: inset 0 0 0 1px oklch(var(--admin) / 0.55), 0 0 12px
      oklch(var(--admin) / 0.22);
  }
.ds-badge-admin-glyph {
    color: oklch(0.78 0.14 255);
    filter: drop-shadow(0 0 4px oklch(var(--admin) / 0.5));
  }
/* Moderator — emerald green, distinct from admin steel-blue */
.ds-badge-moderator {
    background: oklch(var(--moderator) / 0.16);
    color: oklch(var(--moderator-foreground) / 0.95);
    box-shadow: inset 0 0 0 1px oklch(var(--moderator) / 0.55), 0 0 12px
      oklch(var(--moderator) / 0.22);
  }
.ds-badge-moderator-glyph {
    color: oklch(0.82 0.14 155);
    filter: drop-shadow(0 0 4px oklch(var(--moderator) / 0.5));
  }
/* Ambassador — warm violet, distinct from admin steel-blue and moderator
     emerald. Same chip base + ≤20px height as the other role badges so all
     three role chips render at identical size and after-name placement. */
.ds-badge-ambassador {
    background: oklch(var(--ambassador) / 0.16);
    color: oklch(var(--ambassador-foreground) / 0.95);
    box-shadow: inset 0 0 0 1px oklch(var(--ambassador) / 0.55), 0 0 12px
      oklch(var(--ambassador) / 0.22);
  }
.ds-badge-ambassador-glyph {
    color: oklch(0.78 0.16 320);
    filter: drop-shadow(0 0 4px oklch(var(--ambassador) / 0.5));
  }
.ds-username-rainbow {
    background-image: linear-gradient(
      90deg,
      #ff5b5b 0%,
      #ff9f43 18%,
      #ffe66d 36%,
      #5bd66c 54%,
      #4cc9f0 72%,
      #b388ff 90%,
      #ff5b5b 100%
    );
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Subtle glow so the gradient reads on dark surfaces without losing legibility. */
    text-shadow: 0 0 18px oklch(0.65 0.2 0 / 0.18);
  }
/* Honor reduced-motion users: keep the gradient (it is not motion) but drop
     the glow shadow which can read as visual noise. */
@media (prefers-reduced-motion: reduce) {
    .ds-username-rainbow {
      text-shadow: none;
    }
  }
/* Hardcap card — gold-bordered surface for dashboard + loyalty page */
.dsd-hardcap-card {
    background: oklch(var(--card));
    border: 1px solid oklch(var(--dsd) / 0.3);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px -8px oklch(0.02 0.01 240 / 0.6), 0 0 0 1px
      oklch(var(--dsd) / 0.08);
  }
.dsd-hardcap-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: oklch(var(--foreground));
  }
/* Track — charcoal recessed bar */
.dsd-hardcap-track {
    background: oklch(var(--hardcap-track));
    border: 1px solid oklch(var(--border) / 0.6);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
  }
/* Fill — honey-gold with top-edge highlight + shimmer overlay */
.dsd-hardcap-fill {
    background: oklch(var(--hardcap-fill));
    background-image: linear-gradient(
      90deg,
      oklch(var(--hardcap-fill) / 0.85) 0%,
      oklch(var(--hardcap-fill-highlight)) 50%,
      oklch(var(--hardcap-fill) / 0.85) 100%
    );
    box-shadow: inset 0 1px 0 oklch(var(--hardcap-fill-highlight) / 0.6), 0 0
      12px oklch(var(--hardcap-fill) / 0.35);
    border-radius: 9999px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
/* Shimmer sweep overlay on the fill — "live minted" feel */
.dsd-hardcap-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 30%,
      oklch(0.95 0.08 85 / 0.35) 50%,
      transparent 70%
    );
    background-size: 200% 100%;
    animation: dsd-shimmer 2.5s linear infinite;
    pointer-events: none;
  }
/* Hardcap figures — site standard heading font (Geist via .ds-heading
     stack) for minted + percentage, matching the rest of the UI. */
.dsd-hardcap-minted {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    color: oklch(var(--dsd));
    letter-spacing: -0.02em;
  }
.dsd-hardcap-percent {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    color: oklch(var(--dsd));
    letter-spacing: -0.02em;
  }
.dsd-hardcap-cap {
    font-family: "General Sans", system-ui, sans-serif;
    color: oklch(var(--muted-foreground));
  }
/* Burned counter — true burns only (flairs, boosts, pins, bounties).
     Muted label + honey-gold figure so it reads as a supply stat, not a
     balance. */
.dsd-hardcap-burned-label {
    font-family: "General Sans", system-ui, sans-serif;
    color: oklch(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
.dsd-hardcap-burned {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    color: oklch(var(--dsd) / 0.85);
    letter-spacing: -0.02em;
  }
/* Compact variant — inline on loyalty page, smaller track + figures */
.dsd-hardcap-compact .dsd-hardcap-track {
    height: 6px;
  }
.dsd-hardcap-compact .dsd-hardcap-minted,
  .dsd-hardcap-compact .dsd-hardcap-percent {
    font-size: 0.85rem;
  }
.dsd-hardcap-compact .dsd-hardcap-burned {
    font-size: 0.8rem;
  }
.dsd-hardcap-compact .dsd-hardcap-burned-label {
    font-size: 0.65rem;
  }
/* Globe wrapper — sits in the landing hero, transparent bg so the sphere
     reads against page black. Optional atmosphere glow ring via shadow.
     min-height safety net: the inline style={{ height }} (default 420) is the
     authoritative size, but a parent collapsing on remount could override it
     to 0 and the Canvas would mount into a zero-size box (black canvas). This
     floor guarantees the Canvas always has a non-zero box to render into. */
.ds-globe-stage {
    position: relative;
    background: transparent;
    min-height: 420px;
  }
/* Worldwide visitor counter — site standard heading font (Geist via
     .ds-heading stack) for the figure + muted label. Count-up animation
     is JS-driven; shimmer overlay gives the figure a "live" sweep while
     counting. */
.ds-globe-counter-figure {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: oklch(var(--globe-counter));
    text-shadow: 0 0 24px oklch(var(--globe-counter) / 0.25);
  }
.ds-globe-counter-label {
    font-family: "General Sans", system-ui, sans-serif;
    color: oklch(var(--globe-counter-muted));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 600;
  }
/* Compact transparency stat panel — sits to the RIGHT of the globe on the
     landing hero, stacked vertically (one stat per row). Each stat is a small
     figure (Geist heading font) + muted label. Figures use tabular-nums so
     count-up animations don't reflow the column. Orange accent on the figures
     + a subtle recessed panel background give the block a clean, highlighted
     treatment that reads as a polished stat surface, not a flat row. */
.ds-stat-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: oklch(0.12 0.01 240 / 0.7);
    border: 1px solid oklch(var(--primary) / 0.22);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.06), 0 8px 24px -10px
      oklch(0.02 0.01 240 / 0.6);
    padding: 0.5rem 0.25rem;
    backdrop-filter: blur(6px);
  }
.ds-stat-row-figure {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: oklch(var(--primary));
    text-shadow: 0 0 18px oklch(var(--primary) / 0.28);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
.ds-stat-row-label {
    font-family: "General Sans", system-ui, sans-serif;
    color: oklch(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0.25rem;
  }
.ds-stat-row-divider {
    border-color: oklch(var(--primary) / 0.18);
  }
/* Country popover — reuses popover bg, orange-tinted border for globe context.
     Country name in Bricolage display, member count in Fraunces italic. */
.ds-globe-popover {
    background: oklch(var(--popover));
    border: 1px solid oklch(var(--globe-popover-border) / 0.45);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px oklch(0.02 0.01 240 / 0.7), 0 0 0 1px
      oklch(var(--globe-popover-border) / 0.12);
    pointer-events: none;
  }
.ds-globe-popover-country {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
  }
.ds-globe-popover-count {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    color: oklch(var(--globe-counter));
  }
/* Idle hint — small caption that fades in when the globe is auto-rotating,
      fades out on interaction. */
.ds-globe-hint {
    font-family: "General Sans", system-ui, sans-serif;
    color: oklch(var(--muted-foreground) / 0.7);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }
/* Mobile rotate-mode badge — small pill shown over the globe on touch
     devices when one-finger rotate is enabled. Semi-transparent primary
     background, primary-foreground text, rounded, pointer-events-none so
     it never blocks globe interaction. Positioned top-center of the stage. */
.ds-globe-rotate-badge {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: oklch(var(--primary) / 0.9);
    color: oklch(var(--primary-foreground));
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
  }
/* Breadcrumb trail — Forum › Category › Topic. Chevron separators, current
     crumb in orange, ancestors in muted. Used on Topic List + Thread View. */
.ds-forum-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: oklch(var(--muted-foreground));
  }
.ds-forum-breadcrumb a {
    color: oklch(var(--muted-foreground));
    transition: color 0.15s ease;
  }
.ds-forum-breadcrumb a:hover {
    color: oklch(var(--foreground));
  }
.ds-forum-breadcrumb-sep {
    color: oklch(var(--muted-foreground) / 0.5);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.ds-forum-breadcrumb-current {
    color: oklch(var(--primary));
    font-weight: 600;
  }
/* Single-line breadcrumb — nowrap flex so the trail stays on one row and
     ellipsizes ONLY the last (current) segment. Ancestor crumbs are allowed
     to shrink (flex-shrink:1 + min-width:0) so they are never pushed off
     the left edge by a long current crumb; the current crumb truncates
     first because it carries flex:1 1 0%. Used on Thread View where the
     topic title is the last segment and is the most likely to overflow.
     Pairs with .ds-forum-breadcrumb-truncate on the current crumb and
     .ds-forum-breadcrumb-crumb on inline ancestor links. */
.ds-forum-breadcrumb-single {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
/* Inline crumb — ancestor link inside a single-line breadcrumb. Keeps
     the shared .ds-forum-breadcrumb a color/hover but pins display to
     inline-flex so nowrap on the parent holds. flex-shrink:1 + min-width:0
     lets ancestor crumbs shrink when space is tight, but they only shrink
     AFTER the current crumb (which has flex:1 1 0%) has already
     ellipsized — so ancestors stay visible and the current crumb
     truncates first. */
.ds-forum-breadcrumb-crumb {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* Truncate target — the current (last) crumb in a single-line breadcrumb.
     flex: 1 1 0% + min-width: 0 lets it shrink first; max-width caps it
     so very long titles ellipsize before pushing ancestors off-row. This
     is the primary truncation target; ancestor crumbs only shrink after
     this one has fully ellipsized. */
.ds-forum-breadcrumb-truncate {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 40rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* Mobile breadcrumb — cap the current crumb more aggressively so a very
     long topic title does not crowd ancestor crumbs off the row on
     390px viewports. Ancestor crumbs keep their shrink behavior. */
@media (max-width: 768px) {
    .ds-forum-breadcrumb-truncate {
      max-width: 12rem;
    }
    .ds-forum-breadcrumb-crumb {
      max-width: 40%;
    }
  }
/* Topic List table — fixed-layout table for the Topic List page so the
     topic / created / stats / last-post columns keep stable widths. Pairs
     with the colgroup-driven width hints below; the table reuses the shared
     .ds-forum-table shell for borders/zebra and only overrides layout. */
.ds-topic-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
  }
.ds-topic-col-topic {
    width: auto;
  }
.ds-topic-col-created {
    width: 200px;
  }
.ds-topic-col-stats {
    width: 120px;
  }
.ds-topic-col-lastpost {
    width: 200px;
  }
.ds-topic-cell-topic {
    vertical-align: middle;
    padding: 0.75rem;
    overflow: hidden;
  }
.ds-topic-cell-created {
    vertical-align: middle;
    padding: 0.75rem;
    white-space: nowrap;
  }
.ds-topic-cell-stats {
    vertical-align: middle;
    padding: 0.75rem;
    text-align: center;
    white-space: nowrap;
  }
.ds-topic-cell-lastpost {
    vertical-align: middle;
    padding: 0.75rem;
    /* Allow the inner name+time column to shrink so the username can
       truncate within the fixed 200px last-post column. Without min-w-0
       the inline-flex Link would refuse to shrink and the name would
       overflow instead of ellipsizing. white-space:nowrap is kept so the
       time line stays on one row (the name+time stack is a flex-col, so
       nowrap does not collapse the two lines into one). */
    min-width: 0;
    width: 100%;
    white-space: nowrap;
  }
/* Last-post stack inside a topic-list row — name on line 1, time on line 2.
     The name routes through the shared Username component (rainbow for staff)
     and is allowed to use the full column width; it truncates with ellipsis
     when it would overflow, and the AdminBadge stays visible because
     Username keeps the badge as a sibling OUTSIDE the truncating span. The
     time is always on its own line (flex-col), muted, 12px — it never
     touches the name. */
.ds-topic-lastpost {
    align-items: flex-start;
  }
.ds-topic-lastpost > .ds-topic-meta-time {
    display: block;
    width: 100%;
  }
.ds-topic-meta-time {
    font-size: 0.75rem; /* 12px — muted, own line, never touches the name */
    color: var(--muted-foreground);
  }
.ds-topic-empty-cell {
    text-align: center;
    color: var(--muted-foreground);
    font-style: italic;
  }
/* Section group header — uppercase label above a category group on the
     Forum Index (e.g. "MOTODRIVE"). Bricolage display, orange-tinted. */
.ds-forum-section-head {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(var(--primary));
    font-size: 0.9rem;
  }
/* Shared table shell — Forum Index category table + Topic List topic
     table. Charcoal header row, zebra-striped body rows, thin borders.
     On mobile (<768px) the table collapses to stacked cards via the
     .ds-forum-table-stacked modifier so there is no horizontal scroll. */
.ds-forum-table {
    width: 100%;
    border-collapse: collapse;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
  }
.ds-forum-table thead th {
    background: oklch(0.1 0.01 240);
    color: oklch(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid oklch(var(--border));
    white-space: nowrap;
  }
.ds-forum-table tbody tr {
    border-bottom: 1px solid oklch(var(--border) / 0.6);
    transition: background 0.15s ease;
  }
.ds-forum-table tbody tr:last-child {
    border-bottom: none;
  }
.ds-forum-table tbody tr:hover {
    background: oklch(var(--primary) / 0.05);
  }
/* Zebra striping — every other body row gets a touch more surface so
     long category/topic lists stay scannable. */
.ds-forum-table tbody tr:nth-child(even) {
    background: oklch(0.12 0.01 240 / 0.5);
  }
.ds-forum-table tbody tr:nth-child(even):hover {
    background: oklch(var(--primary) / 0.07);
  }
.ds-forum-table td {
    padding: 0.75rem;
    vertical-align: middle;
    color: oklch(var(--foreground));
  }
/* Forum Index category row — icon + title + description (left col),
      single counts line (mid), last-post avatar + user + time (right).
      Numeric stats use Geist tabular-nums via the inline font-family. */
.ds-cat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem;
    background: oklch(var(--primary) / 0.1);
    border: 1px solid oklch(var(--primary) / 0.25);
    color: oklch(var(--primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
.ds-cat-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
  }
.ds-cat-title:hover {
    color: oklch(var(--primary));
  }
.ds-cat-desc {
    color: oklch(var(--muted-foreground));
    font-size: 0.8125rem; /* 13px muted description, directly under the name */
    line-height: 1.3;
    margin: 0;
  }
.ds-cat-stat {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: oklch(var(--foreground));
  }
.ds-cat-stat-label {
    color: oklch(var(--muted-foreground));
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
/* Single right-aligned muted counts line — replaces the previous stacked
      .ds-cat-stat-value + .ds-cat-stat-label pair. The two stat columns
      collapse into one 7rem column (CATEGORY_GRID_COLUMNS) so the row stays
      a single line tall. Right-aligned to sit under the "Counts" header. */
.ds-cat-stat-line {
    color: oklch(var(--muted-foreground));
    text-align: right;
    font-size: 0.8rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
.ds-cat-lastpost {
    color: oklch(var(--muted-foreground));
    font-size: 0.8rem;
  }
.ds-cat-lastpost-user {
    color: oklch(0.85 0.14 40);
    font-weight: 600;
  }
/* Topic List row — title (with optional pinned glyph + mini-pagination),
     created-by, replies, views, last-post. Pinned rows get an orange left
     accent bar and surface above unpinned rows. */
.ds-topic-row {
    /* marker — body row in the topic table. Hover handled by .ds-forum-table. */
  }
.ds-topic-row-pinned {
    background: oklch(var(--primary) / 0.06) !important;
    box-shadow: inset 3px 0 0 oklch(var(--primary));
  }
.ds-topic-row-pinned:hover {
    background: oklch(var(--primary) / 0.1) !important;
  }
.ds-topic-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
  }
.ds-topic-title:hover {
    color: oklch(var(--primary));
  }
.ds-topic-pin-glyph {
    color: oklch(var(--primary));
    flex-shrink: 0;
  }
.ds-topic-meta {
    color: oklch(var(--muted-foreground));
    font-size: 0.78rem;
  }
.ds-topic-meta-user {
    color: oklch(0.85 0.14 40);
    font-weight: 600;
  }
/* Mini-pagination — inline "1 2 3 … Next" pills that appear beside a
     topic title in the Topic List when a thread spans multiple pages.
     Small, orange-tinted, non-blocking. Distinct from full page pagination. */
.ds-mini-pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.7rem;
  }
.ds-mini-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 0.2rem;
    background: oklch(var(--secondary));
    color: oklch(var(--muted-foreground));
    border: 1px solid oklch(var(--border) / 0.6);
    transition: all 0.15s ease;
  }
.ds-mini-pagination a:hover {
    background: oklch(var(--primary) / 0.16);
    color: oklch(var(--primary));
    border-color: oklch(var(--primary) / 0.5);
  }
.ds-mini-pagination-sep {
    color: oklch(var(--muted-foreground) / 0.5);
    padding: 0 0.1rem;
  }
/* Full page pagination — top + bottom of Thread View (and Topic List
     footer when the list itself paginates). Current page solid orange,
     siblings charcoal, prev/next as labeled arrows. */
.ds-forum-pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
  }
.ds-forum-pagination a,
  .ds-forum-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: var(--radius);
    background: oklch(var(--secondary));
    color: oklch(var(--muted-foreground));
    border: 1px solid oklch(var(--border));
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    transition: all 0.15s ease;
  }
.ds-forum-pagination a:hover {
    background: oklch(var(--primary) / 0.16);
    color: oklch(var(--primary));
    border-color: oklch(var(--primary) / 0.5);
  }
.ds-forum-pagination-current {
    background: oklch(var(--primary)) !important;
    color: oklch(var(--primary-foreground)) !important;
    border-color: oklch(var(--primary)) !important;
    box-shadow: 0 0 12px oklch(var(--primary) / 0.3);
  }
.ds-forum-pagination-ellipsis {
    background: transparent !important;
    border: none !important;
    color: oklch(var(--muted-foreground) / 0.6) !important;
  }
/* Thread View — title heading at the top of the thread, below breadcrumb. */
.ds-thread-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: oklch(var(--foreground));
    line-height: 1.15;
  }
/* Post card — the shell of a single post in the Thread View. Two-column
     on desktop (author sidebar left, content right), stacked on mobile.
     Reuses .ds-author-sidebar for the left column. */
.ds-post-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.5rem;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
  }
.ds-post-card + .ds-post-card {
    margin-top: 1rem;
  }
/* Post meta row — timestamp + edited label, anchored TOP-RIGHT of the
     content column. Small muted span (relative time via timeAgo). The
     edited label sits beside it. No heavy separator — the card stays
     tight and readable. */
.ds-post-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: oklch(var(--muted-foreground));
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }
.ds-post-meta-time {
    color: oklch(var(--muted-foreground) / 0.85);
    font-size: 0.75rem;
  }
/* Post action bar — vote + quote + tip + (optional) subscribe. Sits at
     the bottom of the content column. Reuses .ds-vote, .ds-tip-btn. */
.ds-post-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top: 1px solid oklch(var(--border) / 0.5);
    padding-top: 0.6rem;
    margin-top: 0.75rem;
  }
.ds-post-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius);
    background: oklch(var(--secondary));
    color: oklch(var(--muted-foreground));
    border: 1px solid oklch(var(--border));
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.15s ease;
  }
.ds-post-action-btn:hover {
    background: oklch(var(--primary) / 0.12);
    color: oklch(var(--primary));
    border-color: oklch(var(--primary) / 0.4);
  }
/* Forum-scoped search input — sits at the top of the Forum Index. */
.ds-forum-search {
    background: oklch(var(--input));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    color: oklch(var(--foreground));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
.ds-forum-search:focus {
    border-color: oklch(var(--primary));
    box-shadow: 0 0 0 2px oklch(var(--primary) / 0.25);
    outline: none;
  }
.ds-forum-search::-moz-placeholder {
    color: oklch(var(--muted-foreground) / 0.7);
  }
.ds-forum-search::placeholder {
    color: oklch(var(--muted-foreground) / 0.7);
  }
/* "Start New Topic" CTA — orange primary button, top-right of Topic List. */
.ds-forum-new-topic {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border-radius: var(--radius);
    font-weight: 600;
    transition: all 0.2s ease;
  }
.ds-forum-new-topic:hover {
    box-shadow: 0 0 20px oklch(var(--primary) / 0.35);
    filter: brightness(1.05);
  }
/* ===== MOBILE FORUM TABLE COLLAPSE =====
     Below 768px the Forum Index + Topic List tables collapse to stacked
     cards so there is no horizontal scroll. Each row becomes a card with
     the title/description on top and the stats + last-post in a wrapped
     row beneath. Header row is hidden on mobile. Touch targets stay >=44px
     via the global mobile rule. */
@media (max-width: 768px) {
    .ds-forum-table thead {
      display: none;
    }
    .ds-forum-table,
    .ds-forum-table tbody,
    .ds-forum-table tr,
    .ds-forum-table td {
      display: block;
      width: 100%;
    }
    .ds-forum-table tbody tr {
      padding: 0.75rem;
      margin-bottom: 0.5rem;
      border: 1px solid oklch(var(--border));
      border-radius: var(--radius);
      background: oklch(var(--card));
    }
    .ds-forum-table tbody tr:nth-child(even) {
      background: oklch(var(--card));
    }
    .ds-forum-table td {
      padding: 0.25rem 0;
      border: none;
      text-align: left;
    }
    .ds-forum-table td::before {
      content: attr(data-label);
      display: inline-block;
      width: 5rem;
      color: oklch(var(--muted-foreground));
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
    }
    /* Pinned topic keeps its orange left accent in stacked form. */
    .ds-forum-table .ds-topic-row-pinned {
      box-shadow: inset 3px 0 0 oklch(var(--primary));
    }
    /* Post card stacks — author sidebar becomes a horizontal strip above
       the post body, reusing .ds-author-sidebar's existing collapse rule. */
    .ds-post-card {
      display: flex;
      flex-direction: column;
    }
  }
/* ===== FORUM INDEX DIV-TABLE LAYOUT (ForumIndexPage) =====
     ForumIndexPage renders the category table as a div-based grid (role=table)
     rather than a real <table> so the layout can use CSS grid columns and
     collapse to stacked cards on mobile with data-label micro-labels. These
     classes complement the shared .ds-forum-table shell (which targets real
     <table> elements used by TopicListPage). Dark theme + orange accents. */
.ds-forum-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0.75rem 2rem;
    max-width: 100%;
  }
/* Div-table shell — grid columns: icon | title | counts | lastpost.
     The fallback template mirrors the inline CATEGORY_GRID_COLUMNS value
     ("2.5rem minmax(0, 1fr) 8.75rem 15rem") so there is no mismatch when
     the inline style is absent (e.g. SSR / no-JS). The table spans the full
     container width edge-to-edge — no max-width cap, no dead space on the
     right. On mobile (<768px) collapses to stacked cards via the rule below. */
.ds-forum-table[role="table"] {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 8.75rem 15rem;
    width: 100%;
    max-width: 100%;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
  }
.ds-cat-row {
    display: contents;
  }
.ds-cat-row-head > .ds-cat-cell {
    background: oklch(0.1 0.01 240);
    color: oklch(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid oklch(var(--border));
    white-space: nowrap;
  }
/* Header counts cell — right-align the "Counts" header over the counts
      column. The body cell sets justifyContent:'flex-end' inline; this CSS
      fallback mirrors it for the header row so the label aligns over the
      right-aligned counts below. "Last Post" header already aligns over
      the 220px grid column via the grid template. */
.ds-cat-row-head .ds-cat-stat-line {
    text-align: right;
    justify-content: flex-end;
  }
.ds-cat-cell {
    padding: 0.75rem 1.25rem; /* 20px side padding, 12px vertical */
    border-bottom: 1px solid oklch(var(--border));
    color: oklch(var(--foreground));
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 4rem; /* ~64px consistent row height on body rows */
  }
/* Body rows get zebra striping + hover. Because rows use display:contents,
      the striping is applied to the cells of every other body row via the
      :nth-child of the grid. We approximate by striping cells whose row index
      is even — the simplest stable approach for a contents-based grid. */
.ds-cat-row:not(.ds-cat-row-head) .ds-cat-cell {
    background: oklch(var(--card));
    transition: background 0.15s ease;
  }
.ds-cat-row:not(.ds-cat-row-head):hover .ds-cat-cell {
    background: oklch(var(--primary) / 0.05);
  }
/* Title link shifts to orange on ROW hover (sibling to the whole-row
      orange background lift above). Keeps the existing whole-row tint. */
.ds-cat-row:not(.ds-cat-row-head):hover .ds-cat-title-link {
    color: oklch(var(--primary));
  }
/* Category icon glyph — single uppercase letter inside the icon box.
     Reuses .ds-cat-icon for the box; this styles the letter. */
.ds-cat-icon-glyph {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    color: oklch(var(--primary));
  }
/* Category title link — clickable heading inside the title cell. */
.ds-cat-title-link {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
    display: inline-block;
    transition: color 0.15s ease;
  }
.ds-cat-title-link:hover {
    color: oklch(var(--primary));
    text-decoration: underline;
  }
/* Stat cell — value + label stacked. Value uses Geist tabular-nums. */
.ds-cat-stat-value {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: oklch(var(--foreground));
    line-height: 1;
  }
/* Last-post cell — two-line stack: 28px avatar on the left, then a
      column with the shared username (line 1) and relative time (line 2).
      The whole stack is wrapped in a Link (.ds-cat-lastpost-stack) so the
      avatar + name + time are one navigation target. Empty cells render a
      single vertically-centered italic "No posts yet" line (no avatar). */
.ds-cat-lastpost-stack {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    text-decoration: none;
  }
.ds-cat-lastpost-avatar {
    width: 1.75rem; /* 28px */
    height: 1.75rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: oklch(var(--card));
  }
.ds-cat-lastpost-avatar-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.ds-cat-lastpost-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    background: oklch(var(--card));
  }
.ds-cat-lastpost-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
.ds-cat-lastpost-username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
.ds-cat-lastpost-time {
    font-size: 0.75rem; /* 12px */
    color: oklch(var(--muted-foreground));
    white-space: nowrap;
  }
.ds-cat-lastpost-empty {
    font-style: italic;
    color: oklch(var(--muted-foreground));
    font-size: 0.8rem;
    display: flex;
    align-items: center;
  }
/* Forum Index search bar — label + field + icon + input + submit. */
.ds-forum-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
.ds-forum-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
.ds-forum-search-icon {
    position: absolute;
    left: 0.6rem;
    width: 1rem;
    height: 1rem;
    color: oklch(var(--muted-foreground));
    pointer-events: none;
    /* Magnifier glyph via inline SVG mask so no extra asset is needed. */
    background-color: oklch(var(--muted-foreground));
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>")
      center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>")
      center / contain no-repeat;
  }
.ds-forum-search-input {
    flex: 1;
    width: 100%;
    background: transparent;
    border: none;
    color: oklch(var(--foreground));
    padding: 0.6rem 0.75rem 0.6rem 2rem;
    font-size: 0.9rem;
    outline: none;
  }
.ds-forum-search-input::-moz-placeholder {
    color: oklch(var(--muted-foreground) / 0.7);
  }
.ds-forum-search-input::placeholder {
    color: oklch(var(--muted-foreground) / 0.7);
  }
.ds-forum-search-submit {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
  }
.ds-forum-search-submit:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 16px oklch(var(--primary) / 0.3);
  }
/* Forum Index section header — title + subtitle. */
.ds-forum-section-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: oklch(var(--foreground));
    font-size: 1.5rem;
    line-height: 1.15;
  }
.ds-forum-section-sub {
    color: oklch(var(--muted-foreground));
    font-size: 0.85rem;
    margin-top: 0.25rem;
  }
/* Empty state — Forum Index when no categories are seeded. */
.ds-forum-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1px dashed oklch(var(--border));
    border-radius: var(--radius);
    background: oklch(var(--card));
  }
.ds-forum-empty-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    color: oklch(var(--foreground));
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
  }
.ds-forum-empty-desc {
    color: oklch(var(--muted-foreground));
    font-size: 0.85rem;
  }
/* Skeleton loaders — Forum Index loading + Thread View loading. */
.ds-skeleton {
    background: oklch(0.18 0.01 240);
    border-radius: var(--radius);
    display: block;
  }
.ds-skeleton-line {
    height: 0.85rem;
    width: 100%;
    margin-top: 0.4rem;
  }
.ds-skeleton-line-sm {
    height: 0.65rem;
    width: 60%;
  }
.ds-skeleton-line-lg {
    height: 1rem;
    width: 80%;
  }
.ds-skeleton-title {
    height: 1.5rem;
    width: 50%;
    margin-bottom: 0.75rem;
  }
.ds-skeleton-blob {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    flex-shrink: 0;
  }
.ds-skeleton-blob-sm {
    width: 1.5rem;
    height: 1.5rem;
  }
/* Subtle shimmer animation for all skeleton variants. */
.ds-skeleton,
  .ds-skeleton-line,
  .ds-skeleton-blob {
    background: linear-gradient(
      90deg,
      oklch(0.18 0.01 240) 0%,
      oklch(0.24 0.01 240) 50%,
      oklch(0.18 0.01 240) 100%
    );
    background-size: 200% 100%;
    animation: ds-skeleton-shimmer 1.6s ease-in-out infinite;
  }
@keyframes ds-skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
/* ===== THREAD VIEW EXTRAS ===== */
.ds-thread-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0.75rem 2rem;
    max-width: 100%;
  }
.ds-thread-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
.ds-thread-posts {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
.ds-subscribe-btn {
    background: oklch(var(--secondary));
    color: oklch(var(--muted-foreground));
    border: 1px solid oklch(var(--border));
    border-radius: 9999px;
    padding: 0.4rem 0.75rem;
    font-size: 1.1rem;
    line-height: 1;
    transition: all 0.15s ease;
    flex-shrink: 0;
  }
.ds-subscribe-btn:hover {
    background: oklch(var(--primary) / 0.12);
    border-color: oklch(var(--primary) / 0.4);
  }
/* Post card two-column layout — author sidebar left, body right.
     LEFT: fixed 160px width, slightly darker background than the card body
     (a touch lighter dark than the card so it reads as a recessed sidebar,
     not a hole), right border separating it from the content. RIGHT: flex
     content area laid out as a column so the action bar pins to the BOTTOM
     of the card while the date sits TOP-RIGHT and the RichBody fills the
     middle. min-width:0 lets long body content truncate/word-break instead
     of blowing the flex row. */
.ds-post-author-col {
    min-width: 0;
    padding: 0;
    background: oklch(0.1 0.01 240);
    border-right: 1px solid oklch(var(--border) / 0.5);
  }
.ds-post-body-col {
    min-width: 0;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
/* Action bar variants — desktop inline row, mobile split row + more sheet. */
.ds-post-actions-desktop {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
.ds-post-actions-sheet {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }
.ds-post-actions-sheet .ds-post-action-btn {
    width: 100%;
    justify-content: flex-start;
    min-height: 44px;
  }
.ds-post-more {
    font-size: 1rem;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
  }
/* Reply dock textarea — full content width, min-height 120px so it reads
     as a real composer (not a single-line input). max-height keeps very
     long drafts from pushing the dock off-screen; vertical resize lets the
     author grow it manually. */
.ds-reply-textarea {
    width: 100%;
    min-height: 120px;
    max-height: 16rem;
    resize: vertical;
    background: oklch(var(--input));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    color: oklch(var(--foreground));
    padding: 0.6rem 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
.ds-reply-textarea:focus {
    border-color: oklch(var(--primary));
    box-shadow: 0 0 0 2px oklch(var(--primary) / 0.25);
  }
.ds-reply-submit {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border: none;
    border-radius: var(--radius);
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
  }
.ds-reply-submit:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow: 0 0 16px oklch(var(--primary) / 0.3);
  }
.ds-reply-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
/* Edit composer wrapper — sits inline above the reply dock when editing. */
.ds-edit-composer {
    margin-top: 1rem;
    padding: 1rem;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
  }
/* Thread loading + error states. */
.ds-forum-loading {
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 32rem;
  }
.ds-forum-error {
    text-align: center;
    padding: 3rem 1rem;
    color: oklch(var(--muted-foreground));
  }
.ds-forum-error p {
    margin-bottom: 1rem;
  }
.ds-forum-back {
    display: inline-flex;
    align-items: center;
    background: oklch(var(--secondary));
    color: oklch(var(--foreground));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.15s ease;
  }
.ds-forum-back:hover {
    background: oklch(var(--primary) / 0.12);
    border-color: oklch(var(--primary) / 0.4);
    color: oklch(var(--primary));
  }
/* Pagination button — used by Thread View (Topic List reuses the shared
     .ds-forum-pagination a/span rules). */
.ds-forum-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: var(--radius);
    background: oklch(var(--secondary));
    color: oklch(var(--muted-foreground));
    border: 1px solid oklch(var(--border));
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    transition: all 0.15s ease;
  }
.ds-forum-pagination-btn:hover:not(:disabled) {
    background: oklch(var(--primary) / 0.16);
    color: oklch(var(--primary));
    border-color: oklch(var(--primary) / 0.5);
  }
.ds-forum-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
/* Vote control like/dislike button variants — VoteControl.tsx. The shared
     .ds-vote-btn base handles the default state; these add the active glow. */
.ds-vote-like,
  .ds-vote-dislike {
    color: oklch(var(--muted-foreground));
  }
.ds-vote-like-active {
    color: oklch(var(--success));
    filter: drop-shadow(0 0 6px oklch(var(--success) / 0.4));
  }
.ds-vote-dislike-active {
    color: oklch(var(--destructive));
    filter: drop-shadow(0 0 6px oklch(var(--destructive) / 0.4));
  }
/* ===== MOBILE COLLAPSE — FORUM INDEX DIV-TABLE =====
     Below 768px the div-based category grid collapses to a single compact
     tappable card per category (no horizontal scroll). Header row is hidden,
     desktop grid cells are hidden, and the .ds-cat-card surface takes over.
     Touch targets stay >=44px. Desktop layout (above 768px) is unchanged. */
/* Default (desktop): the mobile compact card is hidden. The desktop
     grid cells + CATEGORY_GRID_COLUMNS handle the layout above 768px. */
.ds-cat-card {
    display: none;
  }
@media (max-width: 768px) {
    /* Forum Index — compact category cards. The desktop div-table grid
       cells are hidden on mobile and replaced by a single tappable
       .ds-cat-card per row (rendered in ForumIndexPage). Each card is a
       2-column flex row: 40x40 icon left, name+desc+stats+lastpost stacked
       on the right. Whole card links to /forum/<category>. Max height
       ~88px so all six seed categories fit within ~2 phone screens at
       390x844. 12px gap between cards. Safe-area insets, no horizontal
       scroll, 44pt touch target. Desktop layout is untouched. */
    .ds-forum-table[role="table"] {
      display: block;
    }
    .ds-cat-row {
      display: block;
    }
    .ds-cat-row-head {
      display: none;
    }
    /* Hide the desktop grid cells on mobile — the .ds-cat-card handles
       the mobile surface. */
    .ds-cat-row:not(.ds-cat-row-head) .ds-cat-cell {
      display: none;
    }
    .ds-cat-row:not(.ds-cat-row-head) {
      padding: 0;
      margin: 0;
      border: none;
      background: transparent;
    }
    /* Compact card — whole surface is a Link (touch-target >=44px). */
    .ds-cat-card {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      width: 100%;
      box-sizing: border-box;
      padding: 0.75rem;
      padding-left: max(0.75rem, env(safe-area-inset-left));
      padding-right: max(0.75rem, env(safe-area-inset-right));
      margin-bottom: 0.75rem; /* 12px gap between cards */
      border: 1px solid oklch(var(--border));
      border-radius: var(--radius);
      background: oklch(var(--card));
      text-decoration: none;
      color: inherit;
      min-height: 44px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .ds-cat-card:hover,
    .ds-cat-card:active {
      background: oklch(var(--primary) / 0.06);
      border-color: oklch(var(--primary) / 0.4);
    }
    .ds-cat-card:focus-visible {
      outline: 2px solid oklch(var(--primary));
      outline-offset: 2px;
    }
    /* 40x40 icon on the left. */
    .ds-cat-card-icon {
      flex-shrink: 0;
      width: 2.5rem;
      height: 2.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.5rem;
      background: oklch(var(--secondary));
      color: oklch(var(--primary));
      font-family: "Bricolage Grotesque", system-ui, sans-serif;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1;
    }
    /* Right side body — name + desc + stats + lastpost, left-aligned. */
    .ds-cat-card-body {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.15rem;
      min-width: 0;
      flex: 1 1 auto;
    }
    .ds-cat-card-name {
      font-family: "Bricolage Grotesque", system-ui, sans-serif;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.2;
      color: oklch(var(--foreground));
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }
    .ds-cat-card-desc {
      font-size: 0.8125rem; /* 13px muted description */
      line-height: 1.3;
      color: oklch(var(--muted-foreground));
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }
    /* Single muted inline stat line — labels appear exactly once. */
    .ds-cat-card-stats {
      margin-top: 0.2rem;
      font-size: 0.8125rem;
      color: oklch(var(--muted-foreground));
      font-variant-numeric: tabular-nums;
    }
    /* Last-post line below the stats — "RJ · 18d ago" or "No posts yet". */
    .ds-cat-card-lastpost {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 0.8125rem;
      color: oklch(var(--muted-foreground));
      line-height: 1.3;
    }
    .ds-cat-card-lastpost-username {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ds-cat-card-lastpost-time {
      font-size: 0.75rem;
      color: oklch(var(--muted-foreground));
      white-space: nowrap;
    }
    .ds-cat-card-lastpost-empty {
      font-style: italic;
      color: oklch(var(--muted-foreground) / 0.7);
    }
    /* Mobile skeleton card mirrors the compact layout. */
    .ds-cat-card-skeleton {
      pointer-events: none;
    }
    .ds-cat-card-skeleton .ds-cat-card-body {
      gap: 0.35rem;
    }

    /* Thread View post card stacks — author sidebar becomes a horizontal
       strip above the body. */
    .ds-post-card {
      display: block;
    }
    .ds-post-author-col {
      border-right: none;
      border-bottom: 1px solid oklch(var(--border) / 0.5);
      padding: 0.6rem 0.75rem;
    }
    .ds-post-body-col {
      padding: 0.75rem;
    }
    /* Reply dock stacks vertically on narrow viewports. */
    .ds-reply-dock {
      flex-direction: column;
      gap: 0.5rem;
    }
    /* Breadcrumb truncation tightens on mobile so long topic titles
       ellipsize earlier and ancestor crumbs stay visible. */
    .ds-forum-breadcrumb-truncate {
      max-width: 12rem;
    }
    /* Thread View author sidebar avatar shrinks on mobile so the
       horizontal strip stays compact. */
    .ds-author-sidebar img,
    .ds-author-sidebar .ds-avatar {
      width: 2rem;
      height: 2rem;
    }
    /* Topic List table collapses to stacked cards mirroring the
       .ds-forum-table mobile pattern: each tr becomes a card, each td
       becomes a block with a data-label::before micro-label, and the
       colgroup + thead are hidden. */
    .ds-topic-table {
      display: block;
    }
    .ds-topic-table colgroup,
    .ds-topic-table thead {
      display: none;
    }
    .ds-topic-table tbody,
    .ds-topic-table tr {
      display: block;
    }
    .ds-topic-table tr {
      padding: 0.75rem;
      margin-bottom: 0.5rem;
      border: 1px solid oklch(var(--border));
      border-radius: var(--radius);
      background: oklch(var(--card));
    }
    .ds-topic-table td {
      display: block;
      padding: 0.35rem 0;
      border-bottom: none;
      width: 100%;
    }
    .ds-topic-table td::before {
      content: attr(data-label);
      display: inline-block;
      width: 5rem;
      flex-shrink: 0;
      color: oklch(var(--muted-foreground));
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
    }
    /* Topic cell — full width, no micro-label needed. */
    .ds-topic-table .ds-topic-cell-topic {
      flex-direction: column;
      align-items: flex-start;
      padding-top: 0;
    }
    .ds-topic-table .ds-topic-cell-topic::before {
      display: none;
    }
    /* Stats cell — center alignment resets to block on mobile. */
    .ds-topic-table .ds-topic-cell-stats {
      text-align: left;
    }
  }
/* ===== CONVERSATION LIST (left column / full-screen on mobile) ===== */
/* Two-column shell — conversation list left, conversation view right.
     Desktop: 320px list + flex view. Mobile: list is full-screen; tapping a
     conversation swaps to the view (component toggles a class). The shell
     uses 100dvh-aware height via the parent; this rule fixes the columns. */
.ds-dm-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    background: oklch(var(--background));
  }
.ds-dm-list-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid oklch(var(--border));
    background: oklch(var(--card));
  }
.ds-dm-view-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: oklch(var(--background));
  }
/* List header — title + (optional) filter. Bricolage display, orange accent. */
.ds-dm-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid oklch(var(--border));
    background: oklch(var(--card));
    flex-shrink: 0;
  }
.ds-dm-list-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
    font-size: 1.1rem;
  }
/* Scrollable list body — momentum scroll, no scroll-jacking (global rule). */
.ds-dm-list-body {
    flex: 1 1 0%;
    overflow-y: auto;
    min-height: 0;
  }
/* Conversation row — avatar + name/flair + last-message preview + time +
     presence dot + unread badge. 44pt touch target enforced globally. */
.ds-dm-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid oklch(var(--border) / 0.5);
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
    min-height: 44px;
  }
.ds-dm-row:hover {
    background: oklch(var(--primary) / 0.05);
  }
.ds-dm-row-active {
    background: oklch(var(--primary) / 0.1);
    box-shadow: inset 3px 0 0 oklch(var(--primary));
  }
.ds-dm-row-active:hover {
    background: oklch(var(--primary) / 0.12);
  }
/* Avatar wrapper — relative so the presence dot can anchor to it. */
.ds-dm-avatar-wrap {
    position: relative;
    flex-shrink: 0;
  }
.ds-dm-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    -o-object-fit: cover;
       object-fit: cover;
    border: 1px solid oklch(var(--border));
  }
.ds-dm-avatar-initials {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: oklch(var(--secondary));
    color: oklch(var(--muted-foreground));
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid oklch(var(--border));
  }
/* Presence dot — bottom-right of avatar. Online reuses globe node orange
     so the DM dot matches the homepage globe. Offline is muted grey. The
     white ring separates the dot from the avatar edge on dark themes. */
.ds-dm-presence {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    border: 2px solid oklch(var(--card));
  }
.ds-dm-presence-online {
    background: oklch(var(--dm-presence-online));
    box-shadow: 0 0 6px oklch(var(--dm-presence-online) / 0.6);
  }
.ds-dm-presence-offline {
    background: oklch(var(--dm-presence-offline));
  }
/* Row content — name + flair line, then preview + time line. */
.ds-dm-row-content {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
.ds-dm-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
.ds-dm-row-name {
    font-family: "General Sans", system-ui, sans-serif;
    font-weight: 600;
    color: oklch(var(--foreground));
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
  }
.ds-dm-row-time {
    color: oklch(var(--muted-foreground));
    font-size: 0.72rem;
    font-family: "Geist", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
  }
.ds-dm-row-preview {
    color: oklch(var(--muted-foreground));
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
  }
.ds-dm-row-preview-own {
    color: oklch(var(--foreground) / 0.7);
  }
/* Unread badge on a list row — small orange dot/pill at the right edge. */
.ds-dm-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: oklch(var(--dm-unread));
    color: oklch(var(--dm-unread-foreground));
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow: 0 0 8px oklch(var(--dm-unread) / 0.4);
    flex-shrink: 0;
  }
/* ===== CONVERSATION VIEW (right column / full-screen on mobile) ===== */
/* View header — back arrow (mobile), name + flair, info/menu buttons.
     Sticky top so it stays visible while messages scroll. */
.ds-dm-view-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid oklch(var(--border));
    background: oklch(var(--card));
    flex-shrink: 0;
  }
.ds-dm-view-header-name {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.ds-dm-view-header-presence {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
  }
.ds-dm-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: oklch(var(--muted-foreground));
    border-radius: var(--radius);
    transition: all 0.15s ease;
    flex-shrink: 0;
  }
.ds-dm-back-btn:hover {
    color: oklch(var(--primary));
    background: oklch(var(--primary) / 0.1);
  }
.ds-dm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: oklch(var(--muted-foreground));
    border-radius: var(--radius);
    transition: all 0.15s ease;
    flex-shrink: 0;
  }
.ds-dm-icon-btn:hover {
    color: oklch(var(--foreground));
    background: oklch(var(--secondary));
  }
/* Messages scroll region — flex column, momentum scroll, no scroll-jacking.
     Padding bottom keeps the last bubble clear of the composer. */
.ds-dm-messages {
    flex: 1 1 0%;
    overflow-y: auto;
    min-height: 0;
    padding: 1rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
/* ===== MESSAGE BUBBLES ===== */
/* Bubble row — wraps a single bubble. Own messages align right, theirs left.
     max-width keeps bubbles readable on wide desktop without spanning full width. */
.ds-dm-bubble-row {
    display: flex;
    width: 100%;
  }
.ds-dm-bubble-row-own {
    justify-content: flex-end;
  }
.ds-dm-bubble-row-theirs {
    justify-content: flex-start;
  }
/* Bubble — tight 0.25rem radius (industrial, not iMessage-rounded). Own
     uses orange primary; theirs uses elevated card dark. min-width so very
     short messages still read as bubbles. */
.ds-dm-bubble {
    max-width: 75%;
    min-width: 3rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    animation: dm-bubble-in 0.22s ease-out;
    position: relative;
  }
.ds-dm-bubble-own {
    background: oklch(var(--dm-bubble-own));
    color: oklch(var(--dm-bubble-own-foreground));
    border-bottom-right-radius: 2px;
  }
.ds-dm-bubble-theirs {
    background: oklch(var(--dm-bubble-theirs));
    color: oklch(var(--dm-bubble-theirs-foreground));
    border: 1px solid oklch(var(--border) / 0.6);
    border-bottom-left-radius: 2px;
  }
/* Bubble timestamp — sits inside/below the bubble, muted, small. Own
     bubbles use a darker text on orange; theirs use muted-foreground. */
.ds-dm-bubble-time {
    font-size: 0.7rem;
    font-family: "Geist", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    margin-top: 0.2rem;
    line-height: 1;
  }
.ds-dm-bubble-time-own {
    color: oklch(var(--dm-bubble-own-foreground) / 0.7);
    text-align: right;
  }
.ds-dm-bubble-time-theirs {
    color: oklch(var(--muted-foreground));
  }
/* Consecutive bubbles from the same sender collapse the gap + the tail
     radius so a run of messages reads as one group. Component toggles
     .ds-dm-bubble-grouped on all but the first in a run. */
.ds-dm-bubble-grouped {
    margin-top: 0.15rem;
  }
.ds-dm-bubble-row.ds-dm-bubble-grouped-row {
    gap: 0;
  }
/* ===== DAY SEPARATOR ===== */
/* Centered uppercase muted label with thin border lines on both sides.
     Appears between messages on different calendar dates. */
.ds-dm-day-sep {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 0.25rem;
    color: oklch(var(--dm-day-separator));
    font-size: 0.72rem;
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
.ds-dm-day-sep::before,
  .ds-dm-day-sep::after {
    content: "";
    flex: 1 1 0%;
    height: 1px;
    background: oklch(var(--dm-day-separator) / 0.4);
  }
/* Relative timestamp — inline muted span beside or under a bubble. */
.ds-dm-rel-time {
    color: oklch(var(--muted-foreground));
    font-size: 0.72rem;
    font-family: "Geist", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
  }
/* ===== TYPING INDICATOR ===== */
/* Three-dot bounce shown in the view header or above the composer when the
     partner is typing. Reuses theirs-bubble styling. */
.ds-dm-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.75rem;
    background: oklch(var(--dm-bubble-theirs));
    border: 1px solid oklch(var(--border) / 0.6);
    border-radius: var(--radius);
    border-bottom-left-radius: 2px;
  }
.ds-dm-typing-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: oklch(var(--muted-foreground));
    animation: dm-typing 1.2s ease-in-out infinite;
  }
.ds-dm-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
.ds-dm-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
/* ===== STICKY COMPOSER BAR ===== */
/* Pins to the bottom of the conversation view. Card surface + top border.
     On mobile adds safe-bottom padding so it clears the home indicator.
     Layout: textarea grows; send button right; listing-URL affordance left. */
.ds-dm-composer {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    background: oklch(var(--dm-composer-bg));
    border-top: 1px solid oklch(var(--dm-composer-border));
    flex-shrink: 0;
  }
.ds-dm-composer-input-wrap {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    background: oklch(var(--input));
    border: 1px solid oklch(var(--border));
    border-radius: calc(var(--radius) + 4px);
    padding: 0.4rem 0.6rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
.ds-dm-composer-input-wrap:focus-within {
    border-color: oklch(var(--primary));
    box-shadow: 0 0 0 2px oklch(var(--primary) / 0.25);
  }
.ds-dm-composer-input {
    flex: 1 1 0%;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: oklch(var(--foreground));
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    resize: none;
    max-height: 8rem;
    padding: 0.25rem 0;
  }
.ds-dm-composer-input::-moz-placeholder {
    color: oklch(var(--muted-foreground) / 0.7);
  }
.ds-dm-composer-input::placeholder {
    color: oklch(var(--muted-foreground) / 0.7);
  }
/* Char-count chip — appears when the draft approaches the 2000-char limit. */
.ds-dm-composer-count {
    font-family: "Geist", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    color: oklch(var(--muted-foreground));
    flex-shrink: 0;
    align-self: center;
  }
.ds-dm-composer-count-warn {
    color: oklch(var(--warning));
  }
.ds-dm-composer-count-over {
    color: oklch(var(--destructive));
    font-weight: 700;
  }
/* Send button — orange primary, 44pt touch target, disabled when empty. */
.ds-dm-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border: none;
    border-radius: 9999px;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    transition: filter 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
.ds-dm-send:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow: 0 0 16px oklch(var(--primary) / 0.35);
  }
.ds-dm-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
/* ===== LISTING EMBED INSIDE A BUBBLE ===== */
/* Compact card embedded in a message bubble when a member pastes a
     DirtSwap listing URL. Reuses the forum/marketplace listing-card visual
     language: photo thumb + title + price + status pill. Sits inside the
     bubble; the bubble's padding wraps it. Clickable to the listing. */
.ds-dm-embed {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem;
    background: oklch(var(--dm-embed-bg));
    border: 1px solid oklch(var(--dm-embed-border));
    border-radius: var(--radius);
    margin: 0.25rem 0;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 16rem;
    max-width: 100%;
  }
.ds-dm-embed:hover {
    border-color: oklch(var(--primary) / 0.5);
    box-shadow: 0 0 12px oklch(var(--primary) / 0.15);
  }
.ds-dm-embed-photo {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius);
    -o-object-fit: cover;
       object-fit: cover;
    flex-shrink: 0;
    background: oklch(var(--secondary));
  }
.ds-dm-embed-body {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    justify-content: space-between;
  }
.ds-dm-embed-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    color: oklch(var(--foreground));
    font-size: 0.9rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
.ds-dm-embed-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
.ds-dm-embed-price {
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    color: oklch(var(--primary));
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
  }
.ds-dm-embed-price-dsd {
    color: oklch(var(--dsd));
  }
.ds-dm-embed-status {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
  }
.ds-dm-embed-status-active {
    background: oklch(var(--success) / 0.16);
    color: oklch(var(--success));
    box-shadow: inset 0 0 0 1px oklch(var(--success) / 0.45);
  }
.ds-dm-embed-status-sold {
    background: oklch(var(--muted) / 0.4);
    color: oklch(var(--muted-foreground));
    box-shadow: inset 0 0 0 1px oklch(var(--border));
  }
.ds-dm-embed-status-pending {
    background: oklch(var(--warning) / 0.16);
    color: oklch(var(--warning));
    box-shadow: inset 0 0 0 1px oklch(var(--warning) / 0.45);
  }
/* Embed caption — small muted line under the card inside the bubble. */
.ds-dm-embed-caption {
    font-size: 0.72rem;
    color: oklch(var(--muted-foreground));
    margin-top: 0.25rem;
  }
.ds-dm-embed-caption-own {
    color: oklch(var(--dm-bubble-own-foreground) / 0.7);
  }
/* ===== MESSAGE REQUEST CARD ===== */
/* Distinct surface shown when a member receives a first-contact request.
     Displays the sender (avatar + name + flair), the first message preview,
     and Accept / Decline / Block buttons. Softer orange accent so it reads
     as "awaiting your decision" rather than an active conversation. */
.ds-dm-request {
    background: oklch(var(--card));
    border: 1px solid oklch(var(--dm-request-accent) / 0.4);
    border-left: 3px solid oklch(var(--dm-request-accent));
    border-radius: var(--radius);
    padding: 1rem;
    margin: 0.5rem 0;
    animation: dm-request-pulse 2.4s ease-in-out infinite;
  }
.ds-dm-request-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }
.ds-dm-request-name {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.ds-dm-request-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: oklch(var(--dm-request-accent));
    background: oklch(var(--dm-request-accent-bg));
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius);
    flex-shrink: 0;
  }
.ds-dm-request-preview {
    color: oklch(var(--foreground) / 0.85);
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 0.6rem 0.75rem;
    background: oklch(var(--dm-bubble-theirs));
    border: 1px solid oklch(var(--border) / 0.5);
    border-radius: var(--radius);
    border-bottom-left-radius: 2px;
    margin-bottom: 0.75rem;
  }
.ds-dm-request-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
/* Accept — success green, primary action. */
.ds-dm-accept {
    background: oklch(var(--success));
    color: oklch(var(--success-foreground));
    border: none;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
  }
.ds-dm-accept:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 16px oklch(var(--success) / 0.35);
  }
/* Decline — muted secondary, silent action. */
.ds-dm-decline {
    background: oklch(var(--secondary));
    color: oklch(var(--secondary-foreground));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.15s ease;
  }
.ds-dm-decline:hover {
    background: oklch(var(--muted));
    border-color: oklch(var(--border));
  }
/* Block — destructive outline, strongest negative action. */
.ds-dm-block {
    background: transparent;
    color: oklch(var(--destructive));
    border: 1px solid oklch(var(--destructive) / 0.5);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.15s ease;
  }
.ds-dm-block:hover {
    background: oklch(var(--destructive) / 0.12);
    border-color: oklch(var(--destructive));
  }
/* ===== HEADER ENVELOPE / UNREAD BADGE ===== */
/* Envelope/chat icon button in the site header. Reuses .ds-dm-icon-btn
     base; this adds the relative wrapper for the unread count badge. */
.ds-dm-header-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: oklch(var(--muted-foreground));
    border-radius: var(--radius);
    transition: all 0.15s ease;
  }
.ds-dm-header-btn:hover {
    color: oklch(var(--primary));
    background: oklch(var(--primary) / 0.1);
  }
.ds-dm-header-badge {
    position: absolute;
    top: -0.15rem;
    right: -0.15rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: oklch(var(--dm-unread));
    color: oklch(var(--dm-unread-foreground));
    font-family: "Geist", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid oklch(var(--card));
    box-shadow: 0 0 8px oklch(var(--dm-unread) / 0.5);
    animation: badge-pop 0.3s ease-out;
  }
/* ===== PROFILE MESSAGE BUTTON ===== */
/* 💬 Message button on member profiles. Orange primary, hidden on own
     profile and when the member has disabled requests. 44pt touch target. */
.ds-dm-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border: none;
    border-radius: var(--radius);
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
  }
.ds-dm-profile-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 20px oklch(var(--primary) / 0.3);
  }
/* Disabled variant — when the recipient has turned off message requests. */
.ds-dm-profile-btn-disabled {
    background: oklch(var(--secondary));
    color: oklch(var(--muted-foreground));
    border: 1px solid oklch(var(--border));
    cursor: not-allowed;
  }
.ds-dm-profile-btn-disabled:hover {
    filter: none;
    box-shadow: none;
    background: oklch(var(--secondary));
  }
/* ===== CONVERSATION INFO PANEL ===== */
/* Bottom-sheet on mobile (vaul), popover on desktop. Shows the partner's
     profile summary + the privacy statement + Delete/Report controls.
     Reuses .ds-globe-popover border treatment (orange-tinted). */
.ds-dm-info-panel {
    background: oklch(var(--popover));
    border: 1px solid oklch(var(--primary) / 0.3);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: 0 12px 40px oklch(0.02 0.01 240 / 0.7);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
.ds-dm-info-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
.ds-dm-info-name {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
/* Privacy statement — muted, locked-glyph, the canonical line. */
.ds-dm-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: oklch(var(--secondary) / 0.5);
    border: 1px solid oklch(var(--border) / 0.6);
    border-radius: var(--radius);
    color: oklch(var(--muted-foreground));
    font-size: 0.85rem;
    line-height: 1.4;
  }
.ds-dm-privacy-icon {
    color: oklch(var(--primary));
    flex-shrink: 0;
    margin-top: 0.1rem;
  }
/* Delete / Report controls — destructive outline + warning outline. */
.ds-dm-control {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: oklch(var(--muted-foreground));
    transition: all 0.15s ease;
    width: 100%;
    justify-content: flex-start;
  }
.ds-dm-control:hover {
    background: oklch(var(--secondary));
    color: oklch(var(--foreground));
  }
.ds-dm-control-delete {
    color: oklch(var(--destructive));
    border-color: oklch(var(--destructive) / 0.4);
  }
.ds-dm-control-delete:hover {
    background: oklch(var(--destructive) / 0.1);
    border-color: oklch(var(--destructive));
    color: oklch(var(--destructive));
  }
.ds-dm-control-report {
    color: oklch(var(--warning));
    border-color: oklch(var(--warning) / 0.4);
  }
.ds-dm-control-report:hover {
    background: oklch(var(--warning) / 0.1);
    border-color: oklch(var(--warning));
    color: oklch(var(--warning));
  }
/* ===== SETTINGS TOGGLE — "Don't allow message requests" ===== */
/* Reuses the existing dashboard toggle control; this styles the
     descriptive label block that sits beside it. */
.ds-dm-settings-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
  }
.ds-dm-settings-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
.ds-dm-settings-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    color: oklch(var(--foreground));
    font-size: 0.95rem;
  }
.ds-dm-settings-desc {
    color: oklch(var(--muted-foreground));
    font-size: 0.85rem;
    line-height: 1.4;
  }
.ds-dm-settings-toggle {
    flex-shrink: 0;
  }
/* ===== EMPTY + LOADING STATES ===== */
.ds-dm-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(--muted-foreground));
    height: 100%;
    min-height: 200px;
  }
.ds-dm-empty-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    color: oklch(var(--foreground));
    font-size: 1.1rem;
  }
.ds-dm-empty-desc {
    font-size: 0.9rem;
    max-width: 24rem;
    line-height: 1.4;
  }
/* ===== MOBILE DM LAYOUT =====
     Below 768px the two-column shell collapses to a single pane. The list
     is shown by default; opening a conversation hides the list and shows the
     view full-screen (component toggles .ds-dm-mobile-view-open on the shell).
     All mobile rules (44pt touch, 16px text, safe-area, 100dvh, no
     scroll-jacking, bottom sheets for modals) are inherited from the global
     rules above. */
@media (max-width: 768px) {
    .ds-dm-shell {
      grid-template-columns: minmax(0, 1fr);
    }
    .ds-dm-list-pane {
      border-right: none;
    }
    /* When a conversation is open on mobile, hide the list pane and let the
       view pane fill the screen. The component adds this class to the shell. */
    .ds-dm-shell.ds-dm-mobile-view-open .ds-dm-list-pane {
      display: none;
    }
    .ds-dm-shell.ds-dm-mobile-view-open .ds-dm-view-pane {
      display: flex;
    }
    /* Default (list visible): hide the view pane so the list is full-screen. */
    .ds-dm-shell:not(.ds-dm-mobile-view-open) .ds-dm-view-pane {
      display: none;
    }
    /* Back button visible only on mobile (hidden on desktop via component). */
    .ds-dm-back-btn {
      display: inline-flex;
    }
    /* Bubbles take more width on narrow screens. */
    .ds-dm-bubble {
      max-width: 85%;
    }
    /* Composer padding tightens; safe-bottom already in the base rule. */
    .ds-dm-composer {
      padding: 0.6rem 0.75rem;
      padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
    }
  }
/* Back button hidden on desktop — only needed in mobile single-pane mode. */
@media (min-width: 769px) {
    .ds-dm-back-btn {
      display: none;
    }
  }
/* Safe-area inset utilities — apply to sticky header/footer edges so
     content is not hidden behind the notch or home indicator. */
.safe-top {
    padding-top: env(safe-area-inset-top);
  }
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
.safe-left {
    padding-left: env(safe-area-inset-left);
  }
.safe-right {
    padding-right: env(safe-area-inset-right);
  }
/* Combined safe-area — all four insets at once. */
.safe-area {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
/* iOS HIG compliant touch target — minimum 44x44px hit area for
     interactive controls on mobile. */
.touch-target {
    min-height: 44px;
    min-width: 44px;
  }
/* Fluid hero typography — clamp()-based scaling so the hero headline grows
     smoothly between mobile and desktop. Min 2.2rem (35.2px) on mobile, 6vw
     preferred, max 4.5rem (72px). Tight tracking + line-height keep the
     headline compact. The headline shrinks to fit via clamp and is never
     truncated or ellipsized. */
.ds-hero-title {
    font-family: "General Sans", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-size: clamp(2.2rem, 6vw, 4.5rem);
  }
/* Fluid sub-hero / section headline — smaller clamp range for supporting
     headlines. Min 1.5rem (24px), ideal 2.5rem, max 3rem. */
.ds-section-title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}
.\[-webkit-overflow-scrolling\:touch\] {
  -webkit-overflow-scrolling: touch;
}

/* ===== FONT FACES ===== */

@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/GeneralSans.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===== CUSTOM SCROLLBAR ===== */

/* ===== FORUM ENHANCEMENT COMPONENTS (six new elements) ===== */

/* ===== DIRTSWAP UTILITIES ===== */

/* ===== $DSD ECONOMY COMPONENTS ===== */

/* ===== ADMIN / FOUNDER BADGE CHIPS ===== */

/* ===== SHARED USERNAME — RAINBOW GRADIENT TEXT =====
   The single shared Username component renders the username TEXT itself in a
   rainbow gradient when the user holds any StaffRole (admin / ambassador /
   moderator). The gradient is applied to the text only (background-clip:text)
   — no chip, no pill, no 'Team' label. Non-staff usernames render in plain
   foreground (white) and never receive this class.

   This is the ONLY rainbow treatment tied to StaffRole. The legacy
   .dsd-flair-rainbow chip (cosmetic flair) is separate and is being phased
   out of username surfaces by the wiring task. */

/* ===== $DSD HARDCAP PROGRESS BAR ===== */

/* ===== MEMBER GLOBE ===== */

/* ===== FORUM THREE-LEVEL STRUCTURE (VitalMX/phpBB reshape) =====
   Additive forum-structure utilities for the reshaped three-level forum
   (Forum Index → Topic List → Thread View). Modeled on VitalMX/phpBB table
   mechanics but rendered in DirtSwap's dark/orange industrial theme.
   Reuses existing .ds-author-sidebar, .ds-quote, .ds-vote, .ds-tip-btn,
   .ds-edited-label, .ds-reply-dock, .ds-card-hover, .ds-heading, and the
   safe-area / touch-target utilities. No existing tokens, fonts, branding,
   hero, or non-forum classes are touched. */

/* ===== DIRECT MESSAGING (member-to-member DM upgrade) =====
   Additive DM utilities for the upgraded Messages feature. Modeled on modern
   chat apps (WhatsApp/Telegram/Signal) but rendered in DirtSwap's dark/orange
   industrial theme. Reuses existing tokens + utilities wherever possible:
     - .ds-badge-chip + .ds-badge-admin/founder  → flair badge beside names
     - .dsd-flair-*                              → name color (UserBadge)
     - .ds-cat-lastpost-avatar pattern           → avatar circle
     - .ds-reply-dock / .ds-reply-textarea       → sticky composer pattern
     - .ds-skeleton-*                            → loading states
     - .safe-top/.safe-bottom/.touch-target       → mobile rules
     - globe node orange (0.65 0.2 40)            → online presence dot
   No existing tokens, fonts, forum classes, or $DSD classes are touched.
   Namespace: ds-dm-* (DirtSwap Direct Messages). */

/* ===== MOBILE / iOS SAFE-AREA POLISH =====
   iPhone iOS Safari polish pass. These utilities let the sticky header and
   footer respect the notch (top) and home indicator (bottom), and prevent
   horizontal scroll jitter on mobile. No colors, fonts, or desktop layout
   are touched — additive only. env(safe-area-inset-*) resolves to 0 on
   devices/browsers without a notch, so these are no-ops on desktop. */

/* Global mobile polish — applied to html/body directly (not in @layer) so
   they always win over base resets without fighting Tailwind's layer order.
   These are additive mobile enhancements; desktop layout is unchanged. */
html {
  overflow-x: hidden;
  max-width: 100vw;
  scroll-behavior: smooth;
  /* Momentum scrolling on iOS for the document scroll. */
  -webkit-overflow-scrolling: touch;
  /* Use the dynamic viewport height unit so the layout fills the visible
     viewport on mobile browsers with collapsing URL/home bars. 100dvh
     resolves to the smallest visible viewport, preventing content from
     being hidden behind chrome on iOS Safari. */
  height: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  min-height: 100dvh;
  /* Minimum 16px body text — prevents iOS Safari from auto-zooming on
     focused form inputs and meets legibility baselines on mobile. */
  font-size: 16px;
}

/* Form inputs, textareas, and selects must be >=16px on mobile to prevent
   iOS Safari auto-zoom-on-focus. Scoped to mobile so desktop can use
   smaller decorative sizes. */
@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* Global touch-target floor — every interactive control (button, link,
   [role=button], summary) gets a minimum 44x44px hit area on mobile so
   taps never miss. 8px minimum gap between adjacent tappables is enforced
   via the gap utility below; this rule guarantees the hit area itself. */
@media (max-width: 768px) {
  button,
  a,
  [role="button"],
  summary,
  input[type="checkbox"],
  input[type="radio"],
  input[type="file"]::file-selector-button {
    min-height: 44px;
    min-width: 44px;
  }
  /* Adjacent tappables need at least 8px of breathing room. Applied to
     common flex/grid containers of interactive controls so tightly packed
     nav rows and action bars stay tappable. */
  nav,
  [role="toolbar"],
  [role="menubar"],
  [data-ocid] .flex > button + button,
  [data-ocid] .flex > a + a,
  [data-ocid] .flex > button + a,
  [data-ocid] .flex > a + button {
    gap: 0.5rem;
  }
}

/* Scrollable regions inside the page (overflow-auto/scroll containers) get
   momentum scrolling on iOS. Scoped to elements that explicitly opt into
   scrolling so we don't force a scroll context on every block. */
[data-ocid] [style*="overflow: auto"],
[data-ocid] [style*="overflow:auto"],
[data-ocid] [style*="overflow: scroll"],
[data-ocid] [style*="overflow:scroll"] {
  -webkit-overflow-scrolling: touch;
}

/* Touch-action safety — prevent the page itself from hijacking vertical
   pan gestures. Individual interactive surfaces (carousels, the globe
   canvas, sliders) opt into their own touch-action in their own CSS.
   This global rule keeps the document scroll native on touch devices. */
html,
body {
  touch-action: pan-y;
}

/* =====================================================================
   GLOBAL OVERFLOW PROTECTION — THREAD VIEW + SHARED POST-CARD COMPONENTS
   Applies to ALL viewports so long posts/URLs/code never cause
   horizontal scroll. Mobile-specific layout tuning follows below.
   DO NOT TOUCH .ds-cat-card forum index rules (lines 2239-2458).
   ===================================================================== */

/* Hard overflow floor on every container that holds post body text or
   flair/name display text. max-width:100% + overflow-wrap:break-word +
   word-break:break-word guarantees no child (long URL, code block, or
   unbroken token) can exceed the viewport width on any device. */
.ds-post-body-col,
.ds-post-body,
.ds-post-card .prose,
.ds-post-body-col .prose,
.ds-post-body .prose,
.ds-rich-body,
.ds-rich-body .prose,
.dsd-flair-name,
.dsd-flair-label,
.dsd-flair-dot,
.dsd-flair-rainbow,
.dsd-flair-chip-rainbow,
.ds-author-sidebar,
.ds-author-sidebar .dsd-flair-name,
.ds-post-author-col,
.ds-post-author-col .dsd-flair-name,
.ds-post-gallery,
.ds-post-gallery-thumb {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Long unbroken tokens (URLs, code, long usernames) inside post bodies
   must wrap rather than overflow. */
.ds-post-body-col a,
.ds-post-body-col code,
.ds-post-body-col pre,
.ds-post-body a,
.ds-post-body code,
.ds-post-body pre,
.ds-rich-body a,
.ds-rich-body code,
.ds-rich-body pre {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Pre/code blocks scroll horizontally within their own box instead of
    blowing out the page width. */
.ds-post-body-col pre,
.ds-post-body pre,
.ds-rich-body pre {
  overflow-x: auto;
  max-width: 100%;
}

/* Inline images inside sanitized post bodies (RichBody) render at their
    natural aspect ratio: max-width:100%, max-height:600px, object-fit
    contain — never cropped, stretched, or upscaled. Mirrors the
    PostImageGallery contract so any <img> that survives the sanitizer
    (currently a no-op whitelist strips them, but forward-compatible)
    displays identically to uploaded gallery photos. */
.ds-post-body-col .prose img,
.ds-post-body .prose img,
.ds-rich-body .prose img,
.ds-rich-body img {
  max-width: 100%;
  max-height: 600px;
  height: auto;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
}

/* =====================================================================
    RAINBOW FLAIR CHIP — small inline pill containing ONLY the flair label
    (e.g. "Team DirtSwap"). Used by UserBadge for rainbow-flair users:
    the username renders in plain white text and this chip sits AFTER it
    with the rainbow gradient applied as a real background-image (NOT
    -webkit-background-clip:text). This keeps the username legible and
    the chip a colored pill that never truncates the name. Applies on
    ALL viewports (desktop + mobile).
    ===================================================================== */
.dsd-flair-chip-rainbow {
  /* Reset any inherited text-clip treatment so the label is solid white. */
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: #ffffff !important;
  /* Real rainbow gradient as the pill background. */
  background-image: linear-gradient(
    90deg,
    #ff5b5b 0%,
    #ff9f43 20%,
    #ffe66d 40%,
    #5bd66c 60%,
    #4cc9f0 80%,
    #b388ff 100%
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Small pill sizing — max-height 20px, font-size 11px, line-height 1. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  max-width: 100%;
  max-height: 20px;
  height: auto;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  /* Keep the white label readable on the gradient. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  /* Never truncate the chip — it shrinks the parent row, not itself. */
  min-width: 0;
}
/* Slightly smaller chip on 390px viewports so it fits the compact author
    row without overlapping the avatar. */
@media (max-width: 390px) {
  .dsd-flair-chip-rainbow {
    font-size: 10px;
    padding: 1px 6px;
    max-height: 18px;
  }
}

/* =====================================================================
    POST IMAGE GALLERY — vertical stack of uploaded forum post photos.
    PostImageGallery.tsx renders .ds-post-gallery as a flex column (one
    image per row) so each photo displays at its NATURAL ASPECT RATIO:
    max-width:100%, max-height:600px, object-fit:contain — never cropped,
    never stretched, never upscaled. Multiple images stack with 12px
    vertical gaps. The thumbnail button is a 44pt tap target that opens
    the existing FullscreenImageViewer lightbox (pinch-zoom, swipe-down
    dismiss, Esc close) at the tapped index.
    ===================================================================== */
.ds-post-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Thumbnail button — full-width, natural-ratio image, 44pt tap target,
    rounded, no width blowout. No aspect-ratio is forced so the photo
    renders at its intrinsic ratio; the img's max-height caps tall
    portraits. */
.ds-post-gallery-thumb {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-width: 44px;
  border-radius: 8px;
  cursor: pointer;
  /* 44pt touch target floor — the global mobile rule also enforces this,
      but we set it here so the thumbnail is tappable on desktop too. */
  min-height: 44px;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
.ds-post-gallery-thumb img,
.ds-post-gallery-img {
  display: block;
  /* Render at natural size, capped by the post-body width and a 600px
     height ceiling. width:auto + max-width:100% means a wide image
     fills the post-body width at its natural ratio, and a narrower
     image sits centered at its natural size with NO letterboxing and
     NO empty side margins. margin:0 auto centers narrower images. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 600px;
  margin: 0 auto;
  border-radius: 8px;
}
/* Mobile (<768px) — keep the vertical stack with 12px gaps; ensure no
    horizontal overflow on 390px viewports. */
@media (max-width: 768px) {
  .ds-post-gallery {
    gap: 12px;
  }
  .ds-post-gallery-thumb img,
  .ds-post-gallery-img {
    max-height: 600px;
  }
}

/* =====================================================================
   BELOW 768px — COMPACT AUTHOR ROW + FULL-WIDTH POST BODY
   Converts the two-column desktop post-card (160px author col + body
   col) into a single stacked column: a compact horizontal author row
   (avatar ≤32px + name + small inline flair pill) on top, full-width
   post body with 16px side padding below.
   ===================================================================== */
@media (max-width: 768px) {
  /* Stack the post card: author row on top, body below. */
  .ds-post-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  /* Compact horizontal author row — single baseline, no collision. */
  .ds-post-author-col {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* AuthorSidebar also collapses to a horizontal row on mobile. */
  .ds-author-sidebar {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Shrink the UserBadge avatar to ≤32px on mobile. Targets the
     h-8 w-8 (32px) avatar inside UserBadge and any larger avatar
     used in the author column. */
  .ds-post-author-col img,
  .ds-post-author-col .h-8,
  .ds-post-author-col .w-8,
  .ds-post-author-col [class*="h-10"],
  .ds-post-author-col [class*="w-10"],
  .ds-post-author-col [class*="h-12"],
  .ds-post-author-col [class*="w-12"],
  .ds-author-sidebar img,
  .ds-author-sidebar .h-8,
  .ds-author-sidebar .w-8,
  .ds-author-sidebar [class*="h-10"],
  .ds-author-sidebar [class*="w-10"],
  .ds-author-sidebar [class*="h-12"],
  .ds-author-sidebar [class*="w-12"] {
    height: 32px !important;
    width: 32px !important;
    min-height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
  }

  /* Username text stays legible (≥16px) but does not grow. */
  .ds-post-author-col .dsd-flair-name,
  .ds-author-sidebar .dsd-flair-name {
    font-size: 16px !important;
    line-height: 1.25 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    /* Truncate very long usernames with ellipsis rather than overflow. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* RAINBOW FLAIR → SMALL INLINE PILL on mobile.
     Reset the desktop gradient-name treatment (background-clip:text +
     transparent fill) and instead render a small bordered pill with
     the rainbow gradient as its BACKGROUND. This prevents the
     oversized gradient name text from overlapping the avatar. */
  .ds-post-author-col .dsd-flair-name.dsd-flair-rainbow,
  .ds-author-sidebar .dsd-flair-name.dsd-flair-rainbow {
    /* Reset desktop text-clip treatment. */
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: #ffffff !important;
    /* Render as a small inline pill. */
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 60% !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* Rainbow gradient as the pill background. */
    background-image: linear-gradient(
      90deg,
      #ff5b5b 0%,
      #ff9f43 20%,
      #ffe66d 40%,
      #5bd66c 60%,
      #4cc9f0 80%,
      #b388ff 100%
    ) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    /* Keep the white name text readable on the gradient. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  /* FlairBadge inline pill (small dot + label) — keep it compact and
     inline next to the name, never as a stacked block. */
  .ds-post-author-col .dsd-flair-dot,
  .ds-author-sidebar .dsd-flair-dot {
    height: 8px !important;
    width: 8px !important;
    min-height: 8px !important;
    min-width: 8px !important;
    flex: 0 0 8px !important;
  }

  .ds-post-author-col .dsd-flair-label,
  .ds-author-sidebar .dsd-flair-label {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    max-width: 50% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Tier chip / post count / join date row — keep inline, wrap safely. */
  .ds-post-author-col > * + *,
  .ds-author-sidebar > * + * {
    margin-top: 0 !important;
  }

  /* POST BODY — full width, 16px side padding, no text cut off. */
  .ds-post-body-col {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    margin-top: 0.25rem !important;
  }

  /* Prose inside post body respects the new width. */
  .ds-post-body-col .prose,
  .ds-post-body .prose,
  .ds-rich-body .prose {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* AUTHOR ROW + TIMESTAMP ON THE SAME ROW (mobile).
      Desktop places .ds-post-meta (timestamp + edited) at the TOP-RIGHT
      of the body column. On mobile we move the timestamp OUT of the body
      column and onto the compact author row: author info on the left,
      timestamp right-aligned on the same row. The author column becomes
      a single flex row with justify-content:space-between. */
  .ds-post-author-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    min-width: 0 !important;
  }
  .ds-author-sidebar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  /* Author info cluster (avatar + name + chip + post count) — left side,
      shrinks/truncates as needed. */
  .ds-post-author-col > :first-child,
  .ds-author-sidebar > :first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* Timestamp / meta — right side of the author row, never wraps. */
  .ds-post-meta {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 45% !important;
  }
  .ds-post-meta-time {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* ACTION BAR — single row of icons at the post foot, no wrap.
      Desktop allows flex-wrap; mobile forces nowrap so the icons stay
      on one line and overflow is visible (icons never get clipped or
      pushed to a second row). The global 44px touch-target floor still
      applies to each button. */
  .ds-post-actions,
  .ds-post-actions-desktop {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    gap: 0.5rem !important;
    min-width: 0 !important;
  }
  .ds-post-action-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Marketplace listing cards (shadcn Card) — compact seller byline.
     The byline is a flex row with a User icon + truncated principal +
     AdminBadge. Force single-line, no overflow, compact spacing. */
  .ds-listing-card,
  [class*="Card"]:has(.dsd-flair-name),
  [class*="Card"]:has(.ds-author-sidebar) {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Seller byline row inside listing cards — compact horizontal. */
  [class*="Card"] .ds-author-sidebar,
  [class*="Card"] .dsd-flair-name,
  [class*="Card"] .flex:has(> svg) {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.375rem !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  /* Listing card avatars also shrink to ≤32px. */
  [class*="Card"] img,
  [class*="Card"] .h-8,
  [class*="Card"] .w-8,
  [class*="Card"] [class*="h-10"],
  [class*="Card"] [class*="w-10"] {
    height: 32px !important;
    width: 32px !important;
    min-height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
  }

  /* Listing card rainbow flair → small inline pill (same treatment). */
  [class*="Card"] .dsd-flair-name.dsd-flair-rainbow {
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 60% !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background-image: linear-gradient(
      90deg,
      #ff5b5b 0%,
      #ff9f43 20%,
      #ffe66d 40%,
      #5bd66c 60%,
      #4cc9f0 80%,
      #b388ff 100%
    ) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  /* AdminBadge inside listing byline — compact inline pill. */
  [class*="Card"] .dsd-flair-label,
  [class*="Card"] [class*="AdminBadge"] {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    max-width: 50% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* =====================================================================
   390px — TIGHTER TUNING
   Smaller avatar (~28px), tighter gaps, slightly smaller pill so the
   compact author row fits comfortably on iPhone-class widths.
   ===================================================================== */
@media (max-width: 390px) {
  .ds-post-card {
    gap: 0.375rem !important;
  }

  .ds-post-author-col,
  .ds-author-sidebar {
    gap: 0.375rem !important;
    padding: 0.375rem 0.5rem !important;
  }

  /* Avatar shrinks to ~28px at 390px. */
  .ds-post-author-col img,
  .ds-post-author-col .h-8,
  .ds-post-author-col .w-8,
  .ds-post-author-col [class*="h-10"],
  .ds-post-author-col [class*="w-10"],
  .ds-post-author-col [class*="h-12"],
  .ds-post-author-col [class*="w-12"],
  .ds-author-sidebar img,
  .ds-author-sidebar .h-8,
  .ds-author-sidebar .w-8,
  .ds-author-sidebar [class*="h-10"],
  .ds-author-sidebar [class*="w-10"],
  .ds-author-sidebar [class*="h-12"],
  .ds-author-sidebar [class*="w-12"] {
    height: 28px !important;
    width: 28px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
  }

  /* Username slightly tighter but never below 16px. */
  .ds-post-author-col .dsd-flair-name,
  .ds-author-sidebar .dsd-flair-name {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* Rainbow pill slightly smaller at 390px. */
  .ds-post-author-col .dsd-flair-name.dsd-flair-rainbow,
  .ds-author-sidebar .dsd-flair-name.dsd-flair-rainbow,
  [class*="Card"] .dsd-flair-name.dsd-flair-rainbow {
    font-size: 0.6875rem !important;
    padding: 0.0625rem 0.375rem !important;
    max-width: 55% !important;
  }

  /* FlairBadge label slightly smaller. */
  .ds-post-author-col .dsd-flair-label,
  .ds-author-sidebar .dsd-flair-label,
  [class*="Card"] .dsd-flair-label,
  [class*="Card"] [class*="AdminBadge"] {
    font-size: 0.6875rem !important;
    padding: 0.0625rem 0.375rem !important;
    max-width: 45% !important;
  }

  /* Post body side padding stays 16px (1rem) — never below. */
  .ds-post-body-col {
    padding: 0 1rem !important;
  }

  /* Listing card avatars shrink to 28px at 390px. */
  [class*="Card"] img,
  [class*="Card"] .h-8,
  [class*="Card"] .w-8,
  [class*="Card"] [class*="h-10"],
  [class*="Card"] [class*="w-10"] {
    height: 28px !important;
    width: 28px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
  }
}

/* =====================================================================
   TOUCH TARGET + MIN TEXT GUARANTEES (mobile)
   Reaffirm 44px touch targets and 16px min text for any interactive
   element or visible text inside the post-card / listing card scope,
   so the compact author row never violates the established mobile
   rules. These are scoped to the post-card/listing context to avoid
   clobbering decorative sizes elsewhere.
   ===================================================================== */
@media (max-width: 768px) {
  .ds-post-card button,
  .ds-post-card a,
  .ds-post-card [role="button"],
  .ds-post-author-col button,
  .ds-post-author-col a,
  .ds-post-author-col [role="button"],
  [class*="Card"] button,
  [class*="Card"] a,
  [class*="Card"] [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Visible body/author text stays ≥16px. Decorative pill labels
     (flair, admin) are exempt — they are non-essential metadata and
     use the smaller pill sizing above for fit. */
  .ds-post-body-col,
  .ds-post-body,
  .ds-rich-body,
  .ds-rich-body .prose,
  .ds-post-body .prose,
  .ds-post-body-col .prose {
    font-size: 16px;
  }
}

/* Network Reliability — connection-issue banner + admin incident panels */
.ds-net-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--net-degraded-bg);
  color: var(--net-degraded-foreground);
  border-bottom: 1px solid var(--net-degraded-border);
  font-size: 0.875rem;
}
.ds-net-banner-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}
.ds-net-banner-text {
  flex: 1;
  line-height: 1.4;
}
.ds-net-banner-text strong {
  font-weight: 600;
}
.ds-net-banner-dismiss {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--net-degraded-foreground);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  opacity: 0.8;
}
.ds-net-banner-dismiss:hover {
  opacity: 1;
  background: color-mix(
    in oklch,
    var(--net-degraded-foreground) 10%,
    transparent
  );
}
.ds-net-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.ds-net-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--card-foreground);
}
.ds-net-panel-header span {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 400;
}
.ds-net-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.ds-net-table th {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  font-weight: 500;
}
.ds-net-table td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--card-foreground);
}
.ds-net-table tr:last-child td {
  border-bottom: none;
}
.ds-net-incident-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.ds-net-incident-row:last-child {
  border-bottom: none;
}
.ds-net-incident-time {
  color: var(--card-foreground);
  font-size: 0.85rem;
}
.ds-net-incident-count {
  color: var(--net-incident-foreground);
  background: var(--net-incident-bg);
  border: 1px solid var(--net-incident-border);
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.ds-net-empty {
  color: var(--muted-foreground);
  font-size: 0.85rem;
  padding: 1rem 0;
  text-align: center;
}
.ds-net-host-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  background: var(--net-incident-bg);
  color: var(--net-incident-foreground);
  border: 1px solid var(--net-incident-border);
  font-size: 0.8rem;
  font-family: monospace;
}
.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;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) + 2px);
  border-bottom-right-radius: calc(var(--radius) + 2px);
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.hover\:-translate-y-0:hover {
  --tw-translate-y: -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));
}
.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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\:border-destructive\/50:hover {
  border-color: oklch(var(--destructive) / 0.5);
}
.hover\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.hover\:border-primary\/30:hover {
  border-color: oklch(var(--primary) / 0.3);
}
.hover\:border-primary\/40:hover {
  border-color: oklch(var(--primary) / 0.4);
}
.hover\:border-primary\/50:hover {
  border-color: oklch(var(--primary) / 0.5);
}
.hover\:border-primary\/60:hover {
  border-color: oklch(var(--primary) / 0.6);
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent\/30:hover {
  background-color: oklch(var(--accent) / 0.3);
}
.hover\:bg-accent\/40:hover {
  background-color: oklch(var(--accent) / 0.4);
}
.hover\:bg-amber-500\/10:hover {
  background-color: rgb(245 158 11 / 0.1);
}
.hover\:bg-amber-500\/25:hover {
  background-color: rgb(245 158 11 / 0.25);
}
.hover\:bg-background:hover {
  background-color: oklch(var(--background));
}
.hover\:bg-card:hover {
  background-color: oklch(var(--card));
}
.hover\:bg-cyan-500\/10:hover {
  background-color: rgb(6 182 212 / 0.1);
}
.hover\:bg-destructive:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.hover\:bg-destructive\/10:hover {
  background-color: oklch(var(--destructive) / 0.1);
}
.hover\:bg-destructive\/5:hover {
  background-color: oklch(var(--destructive) / 0.05);
}
.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
.hover\:bg-emerald-500\/10:hover {
  background-color: rgb(16 185 129 / 0.1);
}
.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted-foreground\/80:hover {
  background-color: oklch(var(--muted-foreground) / 0.8);
}
.hover\:bg-muted\/30:hover {
  background-color: oklch(var(--muted) / 0.3);
}
.hover\:bg-muted\/40:hover {
  background-color: oklch(var(--muted) / 0.4);
}
.hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
}
.hover\:bg-muted\/60:hover {
  background-color: oklch(var(--muted) / 0.6);
}
.hover\:bg-primary:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary\/10:hover {
  background-color: oklch(var(--primary) / 0.1);
}
.hover\:bg-primary\/25:hover {
  background-color: oklch(var(--primary) / 0.25);
}
.hover\:bg-primary\/5:hover {
  background-color: oklch(var(--primary) / 0.05);
}
.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
.hover\:bg-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}
.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}
.hover\:bg-transparent:hover {
  background-color: transparent;
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/60:hover {
  background-color: rgb(255 255 255 / 0.6);
}
.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}
.hover\:text-amber-400:hover {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-50:hover {
  --tw-text-opacity: 1;
  color: rgb(255 251 235 / var(--tw-text-opacity, 1));
}
.hover\:text-cyan-400:hover {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.hover\:text-destructive:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.hover\:text-destructive-foreground:hover {
  color: oklch(var(--destructive-foreground));
}
.hover\:text-emerald-400:hover {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}
.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.hover\:text-primary-foreground:hover {
  color: oklch(var(--primary-foreground));
}
.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-white\/40:hover {
  color: rgb(255 255 255 / 0.4);
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-2xl:hover {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover {
  --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);
}
.hover\:shadow-md:hover {
  --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);
}
.hover\:shadow-xl:hover {
  --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);
}
.hover\:shadow-primary\/10:hover {
  --tw-shadow-color: oklch(var(--primary) / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:shadow-primary\/15:hover {
  --tw-shadow-color: oklch(var(--primary) / 0.15);
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:shadow-primary\/30:hover {
  --tw-shadow-color: oklch(var(--primary) / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.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\:brightness-105:hover {
  --tw-brightness: brightness(1.05);
  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);
}
.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}
.focus\:z-10:focus {
  z-index: 10;
}
.focus\:border-primary:focus {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1: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(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\: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-primary:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--primary) / var(--tw-ring-opacity, 1));
}
.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:z-10:focus-visible {
  z-index: 10;
}
.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.focus-visible\:bg-accent\/60:focus-visible {
  background-color: oklch(var(--accent) / 0.6);
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.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:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--destructive) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}
.focus-visible\:ring-destructive\/40:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}
.focus-visible\:ring-primary:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--primary) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-primary\/40:focus-visible {
  --tw-ring-color: oklch(var(--primary) / 0.4);
}
.focus-visible\:ring-primary\/50:focus-visible {
  --tw-ring-color: oklch(var(--primary) / 0.5);
}
.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-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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\:bg-white\/30:active {
  background-color: rgb(255 255 255 / 0.3);
}
.active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\: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\=active\]\:bg-primary[data-state="active"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.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\=active\]\:text-primary-foreground[data-state="active"] {
  color: oklch(var(--primary-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\:-rotate-90:is(.dark *) {
  --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));
}
.dark\:rotate-0:is(.dark *) {
  --tw-rotate: 0deg;
  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));
}
.dark\:scale-0:is(.dark *) {
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  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));
}
.dark\:scale-100:is(.dark *) {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  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));
}
.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-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.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: 480px) {

  .min-\[480px\]\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {

  .sm\:static {
    position: static;
  }

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

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

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:ml-auto {
    margin-left: auto;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:max-w-2xl {
    max-width: 42rem;
  }

  .sm\:max-w-3xl {
    max-width: 48rem;
  }

  .sm\:max-w-4xl {
    max-width: 56rem;
  }

  .sm\:max-w-\[68\%\] {
    max-width: 68%;
  }

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

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

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

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

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

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

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

  .sm\:grid-cols-\[auto_2fr_repeat\(4\2c 1fr\)\] {
    grid-template-columns: auto 2fr repeat(4,1fr);
  }

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

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

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

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

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

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

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

  .sm\:gap-0 {
    gap: 0px;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

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

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

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

  .sm\:border-0 {
    border-width: 0px;
  }

  .sm\:bg-transparent {
    background-color: transparent;
  }

  .sm\:p-0 {
    padding: 0px;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

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

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

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

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

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

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

  .sm\:pr-10 {
    padding-right: 2.5rem;
  }

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

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

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

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

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

  .sm\:backdrop-blur-none {
    --tw-backdrop-blur:  ;
    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);
  }

  .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\:mb-8 {
    margin-bottom: 2rem;
  }

  .md\:block {
    display: block;
  }

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

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

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

  .md\:hidden {
    display: none;
  }

  .md\:h-20 {
    height: 5rem;
  }

  .md\:h-28 {
    height: 7rem;
  }

  .md\:h-48 {
    height: 12rem;
  }

  .md\:w-\[340px\] {
    width: 340px;
  }

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

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

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

  .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\:grid-cols-\[3rem_1fr\] {
    grid-template-columns: 3rem 1fr;
  }

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

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

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

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

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

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

  .md\:gap-2 {
    gap: 0.5rem;
  }

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

  .md\:self-auto {
    align-self: auto;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

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

  .md\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

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

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

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

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

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

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

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

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

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

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

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

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

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

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

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

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

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

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

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mb-0 {
    margin-bottom: 0px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-\[380px\] {
    width: 380px;
  }

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

  .lg\:min-w-\[10rem\] {
    min-width: 10rem;
  }

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

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

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

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

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

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

  .lg\:items-stretch {
    align-items: stretch;
  }

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

  .lg\:gap-0 {
    gap: 0px;
  }

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

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  }

  .lg\:self-center {
    align-self: center;
  }

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

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

  .lg\:text-left {
    text-align: left;
  }
}
@media (min-width: 1280px) {

  .xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .xl\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .xl\:h-32 {
    height: 8rem;
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.\[\&\: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;
}
.\[\&_a\]\:text-primary a {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.\[\&_a\]\:underline a {
  text-decoration-line: underline;
}
.\[\&_blockquote\]\:border-l-2 blockquote {
  border-left-width: 2px;
}
.\[\&_blockquote\]\:border-primary\/40 blockquote {
  border-color: oklch(var(--primary) / 0.4);
}
.\[\&_blockquote\]\:pl-3 blockquote {
  padding-left: 0.75rem;
}
.\[\&_blockquote\]\:italic blockquote {
  font-style: italic;
}
.\[\&_blockquote\]\:text-muted-foreground blockquote {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_code\]\:rounded code {
  border-radius: 0.25rem;
}
.\[\&_code\]\:bg-muted\/40 code {
  background-color: oklch(var(--muted) / 0.4);
}
.\[\&_code\]\:px-1 code {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.\[\&_code\]\:py-0\.5 code {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.\[\&_h2\]\:mb-2 h2 {
  margin-bottom: 0.5rem;
}
.\[\&_h2\]\:mt-4 h2 {
  margin-top: 1rem;
}
.\[\&_h2\]\:text-xl h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.\[\&_h2\]\:font-bold h2 {
  font-weight: 700;
}
.\[\&_h3\]\:mb-1\.5 h3 {
  margin-bottom: 0.375rem;
}
.\[\&_h3\]\:mt-3 h3 {
  margin-top: 0.75rem;
}
.\[\&_h3\]\:text-lg h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.\[\&_h3\]\:font-semibold h3 {
  font-weight: 600;
}
.\[\&_img\]\:mx-auto img {
  margin-left: auto;
  margin-right: auto;
}
.\[\&_img\]\:h-auto img {
  height: auto;
}
.\[\&_img\]\:max-h-\[600px\] img {
  max-height: 600px;
}
.\[\&_img\]\:max-w-full img {
  max-width: 100%;
}
.\[\&_img\]\:rounded-lg img {
  border-radius: var(--radius);
}
.\[\&_img\]\:object-contain img {
  -o-object-fit: contain;
     object-fit: contain;
}
.\[\&_ol\]\:list-decimal ol {
  list-style-type: decimal;
}
.\[\&_ol\]\:pl-6 ol {
  padding-left: 1.5rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_pre\]\:overflow-x-auto pre {
  overflow-x: auto;
}
.\[\&_pre\]\:rounded-lg pre {
  border-radius: var(--radius);
}
.\[\&_pre\]\:bg-muted\/30 pre {
  background-color: oklch(var(--muted) / 0.3);
}
.\[\&_pre\]\:p-3 pre {
  padding: 0.75rem;
}
.\[\&_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;
}
.\[\&_ul\]\:list-disc ul {
  list-style-type: disc;
}
.\[\&_ul\]\:pl-6 ul {
  padding-left: 1.5rem;
}
[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));
}