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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

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

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

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

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    /* rollenspelfetisj.org — non-italic display for all pages; hero keeps the italic serif */
    --font-display: "Fraunces", serif;
    --font-display-hero: "Instrument Serif", serif;
    --font-body: "Satoshi", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --radius: 0.375rem;

    /* rollenspelfetisj.org — shared column so nav aligns with page content on wide screens */
    --container-width: 72rem; /* 1152px — one aligned column for nav + content */
    --container-pad: 2rem;

    /* rollenspelfetisj.org — messaging window: fixed 400px-tall three-pane panel
       (conversation list | conversation | title + compose) */
    --message-window-size: 400px;
    --message-contact-col: 300px;
    --message-side-col: 260px;
    --message-avatar: 1.75rem;

    /* rollenspelfetisj.org — Discreet Bordeaux (dark is the primary theme) */
    --background: 0.12 0.03 8; /* #2B0D16 dark bordeaux */
    --foreground: 0.88 0.015 40; /* #E8DCD7 warm ivory */
    --card: 0.155 0.045 340; /* #421525 aubergine */
    --card-foreground: 0.88 0.015 40;
    --popover: 0.155 0.045 340;
    --popover-foreground: 0.88 0.015 40;

    --primary: 0.38 0.13 355; /* #8F2945 deep wine */
    --primary-foreground: 0.96 0.02 40; /* champagne on wine */
    --primary-hover: 0.47 0.15 355; /* #B23A5B */

    --secondary: 0.2 0.05 345; /* lighter aubergine */
    --secondary-foreground: 0.73 0.05 355; /* #CFA8B2 soft rose */
    --muted: 0.16 0.04 345;
    --muted-foreground: 0.6 0.04 40; /* muted warm grey */

    --accent: 0.72 0.12 85; /* #C9A45C muted gold */
    --accent-foreground: 0.12 0.03 8;

    --destructive: 0.55 0.2 25;
    --destructive-foreground: 0.95 0.01 25;
    --success: 0.6 0.16 150;
    --warning: 0.75 0.15 85;

    /* rollenspelfetisj.org — lidstatus indicators (Actief / Non-actief) */
    --status-active: 0.49 0.12 146; /* RGB 40,114,51 green check */
    --status-inactive: 0.44 0.17 24; /* RGB 155,17,30 red cross */

    --border: 0.29 0.05 345; /* #633044 dark mauve */
    --input: 0.29 0.05 345;
    --ring: 0.38 0.13 355;

    --chart-1: 0.38 0.13 355; /* wine */
    --chart-2: 0.72 0.12 85; /* gold */
    --chart-3: 0.73 0.05 355; /* rose */
    --chart-4: 0.47 0.15 355; /* hover wine */
    --chart-5: 0.91 0.04 80; /* champagne */

    --sidebar: 0.155 0.045 340;
    --sidebar-foreground: 0.88 0.015 40;
    --sidebar-primary: 0.38 0.13 355;
    --sidebar-primary-foreground: 0.96 0.02 40;
    --sidebar-accent: 0.2 0.05 345;
    --sidebar-accent-foreground: 0.73 0.05 355;
    --sidebar-border: 0.29 0.05 345;
    --sidebar-ring: 0.38 0.13 355;

    --gradient-wine: linear-gradient(
      135deg,
      oklch(0.38 0.13 355),
      oklch(0.47 0.15 355)
    );
    --gradient-subtle: linear-gradient(
      180deg,
      oklch(0.155 0.045 340),
      oklch(0.12 0.03 8)
    );
    --gradient-hero: linear-gradient(
      180deg,
      oklch(0.12 0.03 8 / 0.25) 0%,
      oklch(0.12 0.03 8 / 0.55) 45%,
      oklch(0.12 0.03 8 / 0.92) 100%
    );

    /* Story category accents — discreet tints on the velvet-noir base */
    --cat-fictie: 0.72 0.12 85; /* muted gold */
    --cat-opinie: 0.55 0.13 25; /* burnt ember */
    --cat-persoonlijk: 0.6 0.11 30; /* warm rosewood */
    --cat-uitspatting: 0.47 0.15 355; /* deep wine */
    --cat-uitgaan: 0.62 0.11 320; /* warm violet-magenta nightlife */
    --cat-business: 0.66 0.09 250; /* cool steel blue */
    --cat-sublife: 0.6 0.13 355; /* deep rose */
    --cat-maatschappij: 0.65 0.09 175; /* muted teal */
    --cat-neutral: 0.29 0.05 345; /* dark mauve */

    /* rollenspelfetisj.org — ad detail frame: 150% wider than the old 1240px, vertical
       dimensions unchanged */
    --ad-detail-width: 1860px;

    /* rollenspelfetisj.org — compact nav: 1px horizontal gap between buttons */
    --nav-gap: 1px;

    /* rollenspelfetisj.org — header alignment: the brand, the nav buttons and
       the login/logout control all share the page content column. The nav
       buttons and the action button carry their own horizontal padding, so the
       first/last control is optically pulled back by exactly that padding to
       line its text up with the content edge. */
    --nav-btn-pad: 0.9rem;
    --nav-action-pad: 22px;

    /* rollenspelfetisj.org — header brand: same gold as the big home text,
       with a slightly muted gold on hover so the state stays recognizable */
    --brand: 0.72 0.12 85; /* #C9A45C muted gold — identical to --accent */
    --brand-hover: 0.64 0.1 85; /* slightly deeper, muted gold */

    /* rollenspelfetisj.org — story detail body: minimum readable height regardless of length */
    --story-body-min-height: 200px;

    /* rollenspelfetisj.org — Begrippen glossary: 50x50px square term image */
    --glossary-image-size: 50px;

    /* rollenspelfetisj.org — nav envelope shortcut (private messages) rendered white */
    --envelope: 0.96 0.015 40; /* white / ivory */

    /* rollenspelfetisj.org — Interesses yellow tile grid (max 20 tags from glossary) */
    --tile: 0.86 0.16 95; /* warm gold-yellow tile */
    --tile-foreground: 0.16 0.05 40; /* deep bordeaux ink on yellow */
    --tile-selected: 0.82 0.17 90; /* brighter gold when selected */
    --tile-selected-foreground: 0.12 0.03 8; /* near-black on selected */
    --tile-border: 0.6 0.12 90; /* muted gold border */

    /* rollenspelfetisj.org — Voorkeuren member: an unselected tag stays white
       with dark text, so the single yellow (--tile-selected) tag per aspect is
       the only thing that stands out while scanning the profile vertically. */
    --voorkeur-idle: 0.97 0.005 40; /* white / ivory tag */
    --voorkeur-idle-foreground: 0.16 0.05 40; /* deep bordeaux ink on white */
    --voorkeur-idle-border: 0.62 0.09 350; /* visible mauve-rose outline */

    /* rollenspelfetisj.org — round status lamp (actief/inactief) on member tiles */
    --lamp-size: 0.65rem;
    --lamp-active: 0.6 0.16 150; /* bright green glow */
    --lamp-inactive: 0.55 0.2 25; /* bright red glow */

    /* rollenspelfetisj.org — member tiles (restored larger dimensions for the 2-column
       grid); avatar + two label lines + status lamp in a roomier card */
    --tile-avatar: 3.25rem;
    --tile-pad: 0.9rem;
    --tile-gap: 0.55rem;
    --tile-label: 0.9rem;

    /* rollenspelfetisj.org — vertically compact member profile: tighter row gaps and
       lower text frames so more info is visible at a glance */
    --profile-gap: 0.5rem;
    --profile-field-pad: 0.45rem 0.7rem;
    --profile-value: 0.85rem;

    /* rollenspelfetisj.org — subtle permanent admin/moderator settings icon (gear) */
    --admin-icon: 0.6 0.04 40; /* muted warm ivory, discreet by default */
    --admin-icon-hover: 0.72 0.12 85; /* gold on hover */
    --admin-icon-size: 1.05rem;

    /* rollenspelfetisj.org — Begrippen as individual editable buttons */
    --begrip-btn-pad: 0.35rem 0.7rem;
    --begrip-btn-size: 0.82rem;

    /* rollenspelfetisj.org — Begrippen two-column glossary: fixed term column
       (left, all terms aligned on one line) + fixed explanation column (right,
       all explanations aligned on one line, vertically level with their term).
       The columns never overlap, even with long terms or long explanations. */
    --glossary-term-col: 15rem;
    --glossary-col-gap: 1.5rem;

    /* rollenspelfetisj.org — Members search bar (between 'Leden' heading and tiles) */
    --search-height: 2.5rem;
    --search-pad: 0.6rem 0.9rem;
    --search-icon: 1rem;

    /* rollenspelfetisj.org — Members sort/filter controls (compact pills + age inputs) */
    --filter-gap: 0.5rem;
    --filter-height: 2.25rem;
    --filter-pad: 0.35rem 0.8rem;
    --filter-size: 0.82rem;

    /* rollenspelfetisj.org — orientation chips (max 2) with small avatar icon */
    --orient-avatar: 1.4rem;
    --orient-pad: 0.3rem 0.7rem;
    --orient-size: 0.82rem;

    /* rollenspelfetisj.org — member tile grid: 2-column layout with larger tiles */
    --member-col: 18rem;
    --member-gap: 1rem;

    /* rollenspelfetisj.org — ad label (tag) chips: a clearly visible outline
       against the bordeaux card, instead of the barely visible grey hairline.
       The Geslacht chip is the standout one and takes a per-value colour from
       the admin-managed Geslacht list (see --gender-* below). */
    --label-border: 0.62 0.09 350; /* visible mauve-rose outline on bordeaux */
    --label-border-strong: 0.72 0.12 85; /* gold outline for the Intentie chip */
    --label-bg: 0.2 0.05 345; /* aubergine chip fill, lifts off the card */
    --label-fg: 0.9 0.02 40; /* warm ivory label text */

    /* rollenspelfetisj.org — per-value Geslacht colours. Each option id in the
       admin-managed 'geslacht' list maps to one of these by position, so a
       newly added value automatically receives its own colour; an unknown or
       missing value falls back to the neutral chip. */
    --gender-1: 0.72 0.12 85; /* muted gold */
    --gender-2: 0.68 0.14 355; /* rose wine */
    --gender-3: 0.7 0.12 320; /* warm violet-magenta */
    --gender-4: 0.7 0.1 200; /* cool teal */
    --gender-5: 0.72 0.13 55; /* amber */
    --gender-6: 0.68 0.12 150; /* sage green */
    --gender-neutral: 0.62 0.09 350; /* neutral mauve-rose fallback */

    /* rollenspelfetisj.org — shop tiles: 3-column tiles, ~40% shorter than the
       previous 390px (234px), with a subtle 1-decimal rating. No shop
       images/logos (doNotBuild); the tile leans on typography + a structured
       metadata layout. The page keeps its existing width and column count. */
    --shop-tile-height: 234px;
    --shop-gap: 1rem;
    --shop-pad: 1rem 1.2rem;
    --shop-rating: 0.72 0.12 85; /* muted gold filled star */
    --shop-rating-empty: 0.42 0.05 345; /* dimmed empty star */
    --shop-province: 0.73 0.05 355; /* soft rose uppercase label */
    --shop-link: 0.72 0.12 85; /* gold website link */
    --shop-tag: 0.29 0.05 345; /* mauve service/article tag */

    /* rollenspelfetisj.org — Ads header actions: the two header buttons
       ('Plaats advertentie' / 'Inloggen om te plaatsen') sit close to the
       sort bar below them. Same pill shape, height and typography as today;
       only the block offset is tightened so the button reads as part of the
       sort bar without overlapping the title or the bar itself. */
    --ad-action-offset: 24px;
    --ad-action-height: 2.75rem;
    --ad-action-pad: 1.4rem;
    --ad-action-size: 0.92rem;
    --ad-action-border: 0.62 0.09 350; /* visible mauve-rose outline */
    --ad-action-ghost-bg: 0.2 0.05 345; /* aubergine fill, lifts off the header */

    /* rollenspelfetisj.org — Mods tile emoticon vote control: a compact,
       low-threshold row of emoji vote buttons plus a visible rating summary.
       Sized to fit inside an existing mod tile without changing its size or
       the tile grid. */
    --vote-btn: 2rem;
    --vote-gap: 0.25rem;
    --vote-size: 1rem;
    --vote-radius: calc(var(--radius) + 2px);
    --vote-bg: 0.2 0.05 345; /* aubergine vote chip */
    --vote-border: 0.29 0.05 345; /* mauve hairline */
    --vote-hover: 0.47 0.15 355; /* wine hover */
    --vote-active: 0.72 0.12 85; /* gold when the member voted */
    --vote-active-fg: 0.12 0.03 8; /* bordeaux ink on gold */
    --vote-count: 0.6 0.04 40; /* muted warm grey tally */

    /* rollenspelfetisj.org — development notice modal (non-dismissible) */
    --notice-overlay: 0.1 0.03 8; /* near-black bordeaux scrim */
    --notice-border: 0.72 0.12 85; /* gold hairline, sets it apart from dialogs */

    /* rollenspelfetisj.org — invite link row (Admin/Moderator only) */
    --invite-field: 0.16 0.04 345; /* recessed aubergine link field */
    --invite-border: 0.62 0.09 350; /* mauve-rose outline */
  }

  .dark {
    --background: 0.12 0.03 8;
    --foreground: 0.88 0.015 40;
    --card: 0.155 0.045 340;
    --card-foreground: 0.88 0.015 40;
    --popover: 0.155 0.045 340;
    --popover-foreground: 0.88 0.015 40;

    --container-width: 72rem;
    --container-pad: 2rem;

    --message-window-size: 400px;
    --message-contact-col: 300px;
    --message-side-col: 260px;
    --message-avatar: 1.75rem;

    --primary: 0.38 0.13 355;
    --primary-foreground: 0.96 0.02 40;
    --primary-hover: 0.47 0.15 355;

    --secondary: 0.2 0.05 345;
    --secondary-foreground: 0.73 0.05 355;
    --muted: 0.16 0.04 345;
    --muted-foreground: 0.6 0.04 40;

    --accent: 0.72 0.12 85;
    --accent-foreground: 0.12 0.03 8;

    --destructive: 0.55 0.2 25;
    --destructive-foreground: 0.95 0.01 25;
    --success: 0.6 0.16 150;
    --warning: 0.75 0.15 85;

    --status-active: 0.49 0.12 146;
    --status-inactive: 0.44 0.17 24;

    --border: 0.29 0.05 345;
    --input: 0.29 0.05 345;
    --ring: 0.38 0.13 355;

    --chart-1: 0.38 0.13 355;
    --chart-2: 0.72 0.12 85;
    --chart-3: 0.73 0.05 355;
    --chart-4: 0.47 0.15 355;
    --chart-5: 0.91 0.04 80;

    --sidebar: 0.155 0.045 340;
    --sidebar-foreground: 0.88 0.015 40;
    --sidebar-primary: 0.38 0.13 355;
    --sidebar-primary-foreground: 0.96 0.02 40;
    --sidebar-accent: 0.2 0.05 345;
    --sidebar-accent-foreground: 0.73 0.05 355;
    --sidebar-border: 0.29 0.05 345;
    --sidebar-ring: 0.38 0.13 355;

    --gradient-wine: linear-gradient(
      135deg,
      oklch(0.38 0.13 355),
      oklch(0.47 0.15 355)
    );
    --gradient-subtle: linear-gradient(
      180deg,
      oklch(0.155 0.045 340),
      oklch(0.12 0.03 8)
    );
    --gradient-hero: linear-gradient(
      180deg,
      oklch(0.12 0.03 8 / 0.25) 0%,
      oklch(0.12 0.03 8 / 0.55) 45%,
      oklch(0.12 0.03 8 / 0.92) 100%
    );

    --cat-fictie: 0.72 0.12 85;
    --cat-opinie: 0.55 0.13 25;
    --cat-persoonlijk: 0.6 0.11 30;
    --cat-uitspatting: 0.47 0.15 355;
    --cat-uitgaan: 0.62 0.11 320;
    --cat-business: 0.66 0.09 250;
    --cat-sublife: 0.6 0.13 355;
    --cat-maatschappij: 0.65 0.09 175;
    --cat-neutral: 0.29 0.05 345;

    --ad-detail-width: 1860px;

    --nav-gap: 1px;
    --nav-btn-pad: 0.9rem;
    --nav-action-pad: 22px;
    --brand: 0.72 0.12 85;
    --brand-hover: 0.64 0.1 85;
    --story-body-min-height: 200px;
    --glossary-image-size: 50px;
    --envelope: 0.96 0.015 40;

    --tile: 0.86 0.16 95;
    --tile-foreground: 0.16 0.05 40;
    --tile-selected: 0.82 0.17 90;
    --tile-selected-foreground: 0.12 0.03 8;
    --tile-border: 0.6 0.12 90;

    --voorkeur-idle: 0.97 0.005 40;
    --voorkeur-idle-foreground: 0.16 0.05 40;
    --voorkeur-idle-border: 0.62 0.09 350;

    --lamp-size: 0.65rem;
    --lamp-active: 0.6 0.16 150;
    --lamp-inactive: 0.55 0.2 25;

    --tile-avatar: 3.25rem;
    --tile-pad: 0.9rem;
    --tile-gap: 0.55rem;
    --tile-label: 0.9rem;

    --profile-gap: 0.5rem;
    --profile-field-pad: 0.45rem 0.7rem;
    --profile-value: 0.85rem;

    --admin-icon: 0.6 0.04 40;
    --admin-icon-hover: 0.72 0.12 85;
    --admin-icon-size: 1.05rem;

    --begrip-btn-pad: 0.35rem 0.7rem;
    --begrip-btn-size: 0.82rem;

    --glossary-term-col: 15rem;
    --glossary-col-gap: 1.5rem;

    --search-height: 2.5rem;
    --search-pad: 0.6rem 0.9rem;
    --search-icon: 1rem;

    --filter-gap: 0.5rem;
    --filter-height: 2.25rem;
    --filter-pad: 0.35rem 0.8rem;
    --filter-size: 0.82rem;

    --orient-avatar: 1.4rem;
    --orient-pad: 0.3rem 0.7rem;
    --orient-size: 0.82rem;

    --member-col: 18rem;
    --member-gap: 1rem;

    --label-border: 0.62 0.09 350;
    --label-border-strong: 0.72 0.12 85;
    --label-bg: 0.2 0.05 345;
    --label-fg: 0.9 0.02 40;

    --gender-1: 0.72 0.12 85;
    --gender-2: 0.68 0.14 355;
    --gender-3: 0.7 0.12 320;
    --gender-4: 0.7 0.1 200;
    --gender-5: 0.72 0.13 55;
    --gender-6: 0.68 0.12 150;
    --gender-neutral: 0.62 0.09 350;

    --shop-tile-height: 234px;
    --shop-gap: 1rem;
    --shop-pad: 1rem 1.2rem;
    --shop-rating: 0.72 0.12 85;
    --shop-rating-empty: 0.42 0.05 345;
    --shop-province: 0.73 0.05 355;
    --shop-link: 0.72 0.12 85;
    --shop-tag: 0.29 0.05 345;

    --ad-action-offset: 24px;
    --ad-action-height: 2.75rem;
    --ad-action-pad: 1.4rem;
    --ad-action-size: 0.92rem;
    --ad-action-border: 0.62 0.09 350;
    --ad-action-ghost-bg: 0.2 0.05 345;

    --vote-btn: 2rem;
    --vote-gap: 0.25rem;
    --vote-size: 1rem;
    --vote-radius: calc(var(--radius) + 2px);
    --vote-bg: 0.2 0.05 345;
    --vote-border: 0.29 0.05 345;
    --vote-hover: 0.47 0.15 355;
    --vote-active: 0.72 0.12 85;
    --vote-active-fg: 0.12 0.03 8;
    --vote-count: 0.6 0.04 40;

    --notice-overlay: 0.1 0.03 8;
    --notice-border: 0.72 0.12 85;

    --invite-field: 0.16 0.04 345;
    --invite-border: 0.62 0.09 350;
  }

  * {
  border-color: oklch(var(--border));
}
  html,
  body {
    overflow-x: hidden;
  }
  body {
  background-color: oklch(var(--background));
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  /* rollenspelfetisj.org — website text is non-italic everywhere EXCEPT the homepage hero.
     The homepage hero opts back in via .hero-display (Instrument Serif italic). */
  body,
  body * {
    font-style: normal;
  }
  .hero-display,
  .hero-display * {
    font-style: italic;
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
}
/* ---- Profile editing form ---- */
.field-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--secondary-foreground));
    margin-bottom: 0.4rem;
  }
.form-field {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid oklch(var(--input));
    background: oklch(var(--secondary) / 0.4);
    color: oklch(var(--foreground));
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.form-field::-moz-placeholder {
    color: oklch(var(--muted-foreground));
  }
.form-field::placeholder {
    color: oklch(var(--muted-foreground));
  }
.form-field:focus {
    outline: none;
    border-color: oklch(var(--ring));
    box-shadow: 0 0 0 2px oklch(var(--ring) / 0.35);
  }
.form-select {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A45C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.6rem;
    cursor: pointer;
  }
.form-select option {
    background-color: oklch(var(--card));
    color: oklch(var(--foreground));
  }
/* ---- 1-on-1 private messaging window (fixed 400px-tall three-pane) ----
     Column 1 (unchanged): the conversation list, fixed at --message-contact-col.
     Column 2 (middle): the conversation itself, running the full window height
     so the thread is readable top to bottom.
     Column 3 (right): the conversation title plus the 'Schrijf bericht'
     compose section, stacked vertically and sized to the narrower column. */
.message-window {
    width: 100%;
    height: var(--message-window-size);
    max-width: 100%;
    display: grid;
    grid-template-columns:
      var(--message-contact-col)
      minmax(0, 1fr)
      var(--message-side-col);
    overflow: hidden;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--card));
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  }
.contact-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.3);
  }
.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid oklch(var(--border) / 0.55);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.contact-item:hover {
    background: oklch(var(--primary) / 0.12);
  }
.contact-item[data-active="true"] {
    background: oklch(var(--primary) / 0.18);
    border-left: 3px solid oklch(var(--accent));
  }
.contact-avatar {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    font-family: var(--font-display);
    font-size: 1.05rem;
  }
/* Middle column: the conversation. It fills the full window height so the
     thread runs to the bottom of the message window. */
.message-preview {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: oklch(var(--background) / 0.35);
  }
.message-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid oklch(var(--border));
    background: oklch(var(--card));
  }
.message-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.1rem;
  }
/* Right column: conversation title above the 'Schrijf bericht' section,
     stacked vertically and left-aligned within the narrower column. */
.message-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    border-left: 1px solid oklch(var(--border));
    background: oklch(var(--card));
  }
.message-side-title {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.3);
  }
.message-composer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    background: oklch(var(--card));
  }
.message-composer-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--secondary-foreground));
  }
.message-bubble {
    max-width: 78%;
    border-radius: calc(var(--radius) + 2px);
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
  }
.message-bubble[data-mine="true"] {
    align-self: flex-end;
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border-bottom-right-radius: 2px;
  }
.message-bubble[data-mine="false"] {
    align-self: flex-start;
    background: oklch(var(--secondary) / 0.5);
    color: oklch(var(--foreground));
    border-bottom-left-radius: 2px;
  }
/* ---- Small sender profile photo on every message ----
     A compact round avatar (photo, or a neutral initial placeholder in the
     same shape) sits beside each message and in the conversation list and
     header. */
.message-avatar {
    width: var(--message-avatar);
    height: var(--message-avatar);
    flex-shrink: 0;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid oklch(var(--border));
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    font-family: var(--font-display);
    font-size: 0.8rem;
    display: grid;
    place-items: center;
  }
.message-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.message-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
  }
.message-row[data-mine="true"] {
    flex-direction: row-reverse;
  }
.message-row-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }
.message-row[data-mine="true"] .message-row-body {
    align-items: flex-end;
  }
.message-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
  }
.message-row[data-mine="true"] .message-meta {
    flex-direction: row-reverse;
  }
.message-delete {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    color: oklch(var(--muted-foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.message-delete:hover {
    color: oklch(var(--destructive));
    background: oklch(var(--destructive) / 0.14);
  }
.message-delete:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.message-delete svg {
    width: 0.85rem;
    height: 0.85rem;
    stroke: currentColor;
  }
.message-delete-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding: 0.45rem 0.6rem;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--destructive) / 0.5);
    background: oklch(var(--destructive) / 0.1);
  }
.message-delete-confirm-text {
    flex: 1 1 100%;
    font-size: 0.75rem;
    color: oklch(var(--foreground));
  }
.message-delete-confirm-btn {
    height: 1.75rem;
    padding-inline: 0.7rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.message-delete-confirm-btn--danger {
    background: oklch(var(--destructive));
    color: oklch(var(--destructive-foreground));
  }
.message-delete-confirm-btn--danger:hover {
    background: oklch(var(--destructive) / 0.85);
  }
.message-delete-confirm-btn--ghost {
    color: oklch(var(--muted-foreground));
  }
.message-delete-confirm-btn--ghost:hover {
    color: oklch(var(--foreground));
    background: oklch(var(--secondary) / 0.6);
  }
/* ---- Narrow screens: the three columns stack so nothing is clipped ---- */
@media (max-width: 900px) {
    .message-window {
      height: auto;
      grid-template-columns: minmax(0, 1fr);
    }
    .contact-list {
      max-height: 14rem;
      border-right: none;
      border-bottom: 1px solid oklch(var(--border));
    }
    .message-preview {
      min-height: 18rem;
    }
    .message-body {
      max-height: 22rem;
    }
    .message-side {
      border-left: none;
      border-top: 1px solid oklch(var(--border));
    }
  }
/* ---- Moderator application dialog (Mods page) ----
     Explanation window opened by 'Moderator? Echt iets voor jou?' with
     'Geinteresseerd in deze rol', 'Annuleren' and a close cross. */
.mod-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: oklch(0.1 0.03 8 / 0.7);
    backdrop-filter: blur(3px);
  }
.mod-dialog {
    width: 100%;
    max-width: 30rem;
    border-radius: calc(var(--radius) + 4px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--card));
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    animation: fade-in 0.3s ease-out;
  }
.mod-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.3);
  }
.mod-dialog-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: oklch(var(--accent));
  }
.mod-dialog-close {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    color: oklch(var(--muted-foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.mod-dialog-close:hover {
    color: oklch(var(--foreground));
    background: oklch(var(--secondary) / 0.6);
  }
.mod-dialog-close svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
  }
.mod-dialog-body {
    padding: 1.4rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: oklch(var(--foreground));
  }
.mod-dialog-body p + p {
    margin-top: 0.7rem;
  }
.mod-dialog-body .mod-dialog-note {
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: calc(var(--radius) + 2px);
    background: oklch(var(--secondary) / 0.4);
    border-left: 3px solid oklch(var(--accent));
    font-size: 0.85rem;
    color: oklch(var(--muted-foreground));
  }
.mod-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.2);
  }
.mod-dialog-btn {
    height: 2.5rem;
    padding-inline: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.mod-dialog-btn--primary {
    background: oklch(var(--accent));
    color: oklch(var(--accent-foreground));
  }
.mod-dialog-btn--primary:hover {
    background: oklch(var(--tile-selected));
  }
.mod-dialog-btn--ghost {
    color: oklch(var(--muted-foreground));
  }
.mod-dialog-btn--ghost:hover {
    color: oklch(var(--foreground));
    background: oklch(var(--secondary) / 0.6);
  }
/* ---- Two-column profile layout ----
     Left column: Leeftijd, Provincie, Opleiding, Beroep, Relatiestatus, Rol,
     Ervaring. Right column: Lengte, Haartype, Haarkleur, Kledingstijl,
     Contactstatus, Lidstatus. */
.profile-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
.profile-column {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }
.profile-field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: calc(var(--radius) + 2px);
    background: oklch(var(--secondary) / 0.3);
    border: 1px solid oklch(var(--border) / 0.5);
  }
.profile-field-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
.profile-field-value {
    font-size: 0.95rem;
    color: oklch(var(--foreground));
    text-align: right;
  }
/* ---- Profile shortcut row ----
     Four icon buttons at the top of the large page-wide profile frame that
     jump to their section. They fill the empty space in the upper part of the
     frame and reuse the existing card/border/accent tokens. The grid uses
     auto-fit so the row wraps to two columns on narrow screens without a
     media query. */
.profile-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid oklch(var(--border) / 0.6);
  }
.profile-shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.6rem 0.9rem;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.35);
    color: oklch(var(--foreground));
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.profile-shortcut:hover {
    border-color: oklch(var(--accent) / 0.7);
    background: oklch(var(--primary) / 0.16);
    color: oklch(var(--accent));
    transform: translateY(-1px);
  }
.profile-shortcut:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.profile-shortcut svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    stroke: currentColor;
  }
/* ---- Profile shortcut row ----
     Four icon buttons at the top of the large page-wide profile frame that
     jump to their section. They fill the empty space in the upper part of the
     frame and reuse the existing card/border/accent tokens. */
.profile-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid oklch(var(--border) / 0.6);
  }
.profile-shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.6rem 0.9rem;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.35);
    color: oklch(var(--foreground));
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.profile-shortcut:hover {
    border-color: oklch(var(--accent) / 0.7);
    background: oklch(var(--primary) / 0.16);
    color: oklch(var(--accent));
    transform: translateY(-1px);
  }
.profile-shortcut:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.profile-shortcut svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    stroke: currentColor;
  }
/* ---- Advertisement label (tag) chips ----
     One shared shape, size and typography for all six labels, with a clearly
     visible outline against the bordeaux card. The Geslacht chip is the
     standout one: it takes a per-value colour from the admin-managed Geslacht
     list, so every gender value reads distinctly and a newly added value gets
     its own colour automatically. An unknown or missing value falls back to
     the neutral chip. */
.ad-label-badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(var(--radius) + 1px);
    border: 1px solid oklch(var(--label-border));
    background: oklch(var(--label-bg));
    color: oklch(var(--label-fg));
    padding: 0.125rem 0.5rem;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
  }
.ad-label-badge--intentie {
    border-color: oklch(var(--label-border-strong));
    background: oklch(var(--accent) / 0.12);
    color: oklch(var(--accent));
    font-weight: 600;
  }
.ad-label-badge--geslacht {
    border-width: 2px;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: oklch(var(--gender) / 0.16);
    border-color: oklch(var(--gender));
    color: oklch(var(--gender));
  }
.ad-label-badge--geslacht[data-gender="neutral"] {
    background: oklch(var(--gender-neutral) / 0.14);
    border-color: oklch(var(--gender-neutral));
    color: oklch(var(--label-fg));
  }
.ad-label-badge--geslacht[data-gender="1"] {
    --gender: var(--gender-1);
  }
.ad-label-badge--geslacht[data-gender="2"] {
    --gender: var(--gender-2);
  }
.ad-label-badge--geslacht[data-gender="3"] {
    --gender: var(--gender-3);
  }
.ad-label-badge--geslacht[data-gender="4"] {
    --gender: var(--gender-4);
  }
.ad-label-badge--geslacht[data-gender="5"] {
    --gender: var(--gender-5);
  }
.ad-label-badge--geslacht[data-gender="6"] {
    --gender: var(--gender-6);
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.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-1 {
  bottom: -0.25rem;
}
.-bottom-1\.5 {
  bottom: -0.375rem;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-1 {
  right: -0.25rem;
}
.-right-1\.5 {
  right: -0.375rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-\[50\%\] {
  left: 50%;
}
.left-\[calc\(25\%-200px\)\] {
  left: calc(25% - 200px);
}
.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\.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-\[56\%\] {
  top: 56%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.col-span-full {
  grid-column: 1 / -1;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.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-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-16 {
  width: 4rem;
  height: 4rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-20 {
  width: 5rem;
  height: 5rem;
}
.size-24 {
  width: 6rem;
  height: 6rem;
}
.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-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-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-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[148px\] {
  height: 148px;
}
.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-\[300px\] {
  max-height: 300px;
}
.max-h-\[45vh\] {
  max-height: 45vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-40 {
  min-height: 10rem;
}
.min-h-\[148px\] {
  min-height: 148px;
}
.min-h-\[48px\] {
  min-height: 48px;
}
.min-h-\[78vh\] {
  min-height: 78vh;
}
.min-h-\[90px\] {
  min-height: 90px;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.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-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-64 {
  width: 16rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[148px\] {
  width: 148px;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-40 {
  max-width: 10rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[1240px\] {
  max-width: 1240px;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-\[var\(--ad-detail-width\)\] {
  max-width: var(--ad-detail-width);
}
.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-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;
}
.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;
}
.origin-center {
  transform-origin: center;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-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-\[2\.5\] {
  --tw-scale-x: 2.5;
  --tw-scale-y: 2.5;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

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

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-px {
  gap: 1px;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.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));
}
.self-start {
  align-self: flex-start;
}
.self-stretch {
  align-self: stretch;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#633044\] {
  --tw-border-opacity: 1;
  border-color: rgb(99 48 68 / var(--tw-border-opacity, 1));
}
.border-accent\/40 {
  border-color: oklch(var(--accent) / 0.4);
}
.border-accent\/50 {
  border-color: oklch(var(--accent) / 0.5);
}
.border-accent\/60 {
  border-color: oklch(var(--accent) / 0.6);
}
.border-accent\/70 {
  border-color: oklch(var(--accent) / 0.7);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-current {
  border-color: currentColor;
}
.border-input {
  border-color: oklch(var(--input));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#2B0D16\] {
  --tw-bg-opacity: 1;
  background-color: rgb(43 13 22 / var(--tw-bg-opacity, 1));
}
.bg-\[\#421525\] {
  --tw-bg-opacity: 1;
  background-color: rgb(66 21 37 / var(--tw-bg-opacity, 1));
}
.bg-\[\#633044\] {
  --tw-bg-opacity: 1;
  background-color: rgb(99 48 68 / var(--tw-bg-opacity, 1));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-accent\/10 {
  background-color: oklch(var(--accent) / 0.1);
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-primary\/80 {
  background-color: oklch(var(--primary) / 0.8);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary\/20 {
  background-color: oklch(var(--secondary) / 0.2);
}
.bg-secondary\/25 {
  background-color: oklch(var(--secondary) / 0.25);
}
.bg-secondary\/30 {
  background-color: oklch(var(--secondary) / 0.3);
}
.bg-secondary\/35 {
  background-color: oklch(var(--secondary) / 0.35);
}
.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-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.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-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-\[16px\] {
  padding-left: 16px;
  padding-right: 16px;
}
.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}
.px-\[22px\] {
  padding-left: 22px;
  padding-right: 22px;
}
.px-\[var\(--nav-action-pad\)\] {
  padding-left: var(--nav-action-pad);
  padding-right: var(--nav-action-pad);
}
.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-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.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-10 {
  padding-bottom: 2.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-body {
  font-family: var(--font-body), sans-serif;
}
.font-display {
  font-family: var(--font-display), serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[22px\] {
  font-size: 22px;
}
.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-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-5 {
  line-height: 1.25rem;
}
.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-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-\[0\.4em\] {
  letter-spacing: 0.4em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#CFA8B2\] {
  --tw-text-opacity: 1;
  color: rgb(207 168 178 / var(--tw-text-opacity, 1));
}
.text-\[\#E8A0A0\] {
  --tw-text-opacity: 1;
  color: rgb(232 160 160 / var(--tw-text-opacity, 1));
}
.text-\[\#E8DCD7\] {
  --tw-text-opacity: 1;
  color: rgb(232 220 215 / var(--tw-text-opacity, 1));
}
.text-\[\#F3E6D0\] {
  --tw-text-opacity: 1;
  color: rgb(243 230 208 / var(--tw-text-opacity, 1));
}
.text-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-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-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-\[oklch\(var\(--accent\)\)\] {
  accent-color: oklch(var(--accent));
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-subtle {
  --tw-shadow: 0 2px 12px -2px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 2px 12px -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-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-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-accent {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--accent) / var(--tw-ring-opacity, 1));
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.ring-offset-card {
  --tw-ring-offset-color: oklch(var(--card));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --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-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;
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

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

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.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;
}
.running {
  animation-play-state: running;
}
/* Shared column: nav bar and page content both use this so they align */
.container-page {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }
/* ---- Header brand: gold like the big home text, muted gold on hover ----
     The brand sits flush with the content column's left edge, so its text
     lines up with the page content on every route. */
.brand-link {
    color: oklch(var(--brand));
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.brand-link:hover {
    color: oklch(var(--brand-hover));
  }
/* ---- Header optical alignment ----
     The nav buttons and the login/logout control carry horizontal padding, so
     their boxes align with the content column while their text sits inset.
     These utilities pull the first/last control back by exactly its own
     padding, lining the visible text up with the content edge on every page
     and at every viewport width. */
.nav-edge-start {
    margin-inline-start: calc(-1 * var(--nav-btn-pad));
  }
.nav-edge-end {
    margin-inline-end: calc(-1 * var(--nav-action-pad));
  }
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.bg-primary-hover {
    background-color: oklch(var(--primary-hover));
  }
.bg-gradient-wine {
    background-image: var(--gradient-wine);
  }
.bg-gradient-subtle {
    background-image: var(--gradient-subtle);
  }
.text-luxe {
    font-size: 0.75rem;
    letter-spacing: 0.4px;
    line-height: 1.4;
  }
.text-luxe p + p {
    margin-top: 0.6rem;
  }
/* ---- Homepage hero (uploaded background photo) ---- */
.hero-overlay {
    background-image: var(--gradient-hero);
  }
/* ---- Screen-wide hero background (homepage exception) ----
     The homepage hero background photo runs the full viewport width while the
     rest of the site keeps the normal container width. */
.hero-screen-wide {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: none;
  }
/* ---- Profile photo frame (square or round, per user preference) ---- */
.profile-photo-frame {
    border-radius: 9999px;
    border: 2px solid oklch(var(--border));
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    background: oklch(var(--secondary) / 0.4);
  }
.profile-photo-frame--square {
    border-radius: calc(var(--radius) + 2px);
  }
/* ---- Homepage hero display type (italic serif — homepage-only exception) ---- */
.hero-display {
    font-family: var(--font-display-hero);
  }
/* ---- Lidstatus indicators (Actief = green check, Non-actief = red cross) ---- */
.status-active {
    color: oklch(var(--status-active));
  }
.status-inactive {
    color: oklch(var(--status-inactive));
  }
.status-active-bg {
    background-color: oklch(var(--status-active));
  }
.status-inactive-bg {
    background-color: oklch(var(--status-inactive));
  }
/* ---- Ad tile image: square, left-aligned within the tile ----
     The card height is content-driven (the title and the member-with-age line
     must never be clipped), so the image fills the full card height instead of
     forcing its own square aspect ratio. The 148px-wide image column keeps the
     square footprint on a one-line card and stretches with the card when the
     title wraps to more lines. */
.ad-tile-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.4);
  }
/* ---- Ad detail frame: 150% wider than the old 1240px, vertical equal ----
     Frontend applies max-w-[var(--ad-detail-width)] to the detail dialog. */
.ad-detail-frame {
    width: 100%;
    max-width: var(--ad-detail-width);
  }
/* ---- Story cards with category image header ---- */
.story-card {
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--card));
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.story-card:hover {
    border-color: oklch(var(--ring) / 0.55);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
    transform: translateY(-2px);
  }
.story-card-image {
    position: relative;
    aspect-ratio: 16 / 9;
    background: oklch(var(--secondary) / 0.5);
    overflow: hidden;
  }
.story-card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
/* Compact variant for the single-row category gallery: smaller thumbnails
     so all eight categories fit side by side in one row. */
.story-card-image--compact {
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
  }
.story-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 55%,
      oklch(var(--card) / 0.9) 100%
    );
  }
.story-card-cat {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 1;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 2px;
    background: oklch(var(--card) / 0.85);
    color: oklch(var(--accent));
    border: 1px solid oklch(var(--border));
  }
/* Category accent utilities (Fictie/Opinie/Persoonlijk/Uitspatting) */
.cat-fictie {
    color: oklch(var(--cat-fictie));
  }
.cat-opinie {
    color: oklch(var(--cat-opinie));
  }
.cat-persoonlijk {
    color: oklch(var(--cat-persoonlijk));
  }
.cat-uitspatting {
    color: oklch(var(--cat-uitspatting));
  }
.cat-uitgaan {
    color: oklch(var(--cat-uitgaan));
  }
.cat-business {
    color: oklch(var(--cat-business));
  }
.cat-sublife {
    color: oklch(var(--cat-sublife));
  }
.cat-maatschappij {
    color: oklch(var(--cat-maatschappij));
  }
.cat-neutral {
    color: oklch(var(--cat-neutral));
  }
.cat-fictie-bg {
    background-color: oklch(var(--cat-fictie));
  }
.cat-opinie-bg {
    background-color: oklch(var(--cat-opinie));
  }
.cat-persoonlijk-bg {
    background-color: oklch(var(--cat-persoonlijk));
  }
.cat-uitspatting-bg {
    background-color: oklch(var(--cat-uitspatting));
  }
.cat-uitgaan-bg {
    background-color: oklch(var(--cat-uitgaan));
  }
.cat-business-bg {
    background-color: oklch(var(--cat-business));
  }
.cat-sublife-bg {
    background-color: oklch(var(--cat-sublife));
  }
.cat-maatschappij-bg {
    background-color: oklch(var(--cat-maatschappij));
  }
.cat-neutral-bg {
    background-color: oklch(var(--cat-neutral));
  }
/* ---- Compact nav bar: 1px horizontal gap between buttons ----
     Replaces the previous gap-2; keeps 48px-tall pill buttons but tighter. */
.nav-compact {
    display: flex;
    align-items: center;
    gap: var(--nav-gap);
  }
.nav-btn {
    height: 2.75rem;
    padding-inline: var(--nav-btn-pad);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    color: oklch(var(--muted-foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
  }
.nav-btn:hover {
    color: oklch(var(--foreground));
    background: oklch(var(--secondary) / 0.5);
  }
.nav-btn[data-active="true"] {
    color: oklch(var(--accent));
    background: oklch(var(--primary) / 0.16);
  }
/* ---- Nav envelope shortcut to private messages (white icon) ----
     Replaces a text label; recognizable mailbox glyph in the brand ivory. */
.nav-envelope {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-grid;
    place-items: center;
    border-radius: 9999px;
    color: oklch(var(--envelope));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.nav-envelope:hover {
    background: oklch(var(--secondary) / 0.5);
    transform: translateY(-1px);
  }
.nav-envelope svg {
    width: 1.15rem;
    height: 1.15rem;
    stroke: currentColor;
  }
/* ---- Story reading view: black 80% scrim over the image ----
     Applies ONLY in the story reading dialog, so the text that runs over the
     image stays readable. Story tiles, category thumbnails and the rest of the
     site are untouched. The layer covers the full image and works for both an
     uploaded story image and a category image. */
.story-reading-image {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: calc(var(--radius) + 2px);
  }
.story-reading-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(0 0 0 / 0.8);
    pointer-events: none;
  }
/* ---- Story detail body: minimum 200px regardless of line count ---- */
.story-body {
    min-height: var(--story-body-min-height);
    line-height: 1.6;
    color: oklch(var(--foreground));
  }
/* ---- Begrippen glossary: two aligned columns ----
     Left column = term name, all left-aligned on one fixed line.
     Right column = explanation, all left-aligned on one fixed line and
     vertically level with its term. The grid columns are fixed, so the
     explanation can never overlap the term, however long either one is.
     On narrow screens the columns stack and the explanation sits directly
     under its own term. */
.glossary-list {
    display: flex;
    flex-direction: column;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--card));
    padding: 0.5rem 1.25rem;
  }
.glossary-row {
    display: grid;
    grid-template-columns: var(--glossary-term-col) minmax(0, 1fr);
    -moz-column-gap: var(--glossary-col-gap);
         column-gap: var(--glossary-col-gap);
    align-items: start;
    padding: 0.85rem 0;
    border-bottom: 1px solid oklch(var(--border) / 0.55);
  }
.glossary-row:last-child {
    border-bottom: none;
  }
.glossary-term {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: var(--glossary-term-col) minmax(0, 1fr);
    -moz-column-gap: var(--glossary-col-gap);
         column-gap: var(--glossary-col-gap);
    align-items: start;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.4;
    color: oklch(var(--accent));
    text-align: left;
    overflow-wrap: anywhere;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.glossary-term-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow-wrap: anywhere;
  }
.glossary-edit {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
.glossary-term:hover {
    color: oklch(var(--tile-selected));
  }
.glossary-term[data-editable="true"]:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
.glossary-term:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 3px;
    border-radius: 2px;
  }
.glossary-desc {
    min-width: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.5;
    color: oklch(var(--muted-foreground));
    text-align: left;
    overflow-wrap: anywhere;
  }
@media (max-width: 639px) {
    .glossary-list {
      padding: 0.5rem 1rem;
    }
    .glossary-row {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0.3rem;
    }
    .glossary-term {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0.3rem;
    }
  }
/* ---- Begrippen edit dialog: 50x50 square term image preview ---- */
.glossary-image-frame {
    width: var(--glossary-image-size);
    height: var(--glossary-image-size);
    flex-shrink: 0;
    border-radius: calc(var(--radius) + 2px);
    overflow: hidden;
    background: oklch(var(--secondary) / 0.4);
    border: 1px solid oklch(var(--border));
  }
/* ---- Moderator profile mode switch ----
     Clear visual toggle between the user's own profile and a moderator
     (virtual assistant 1/2/3) profile on 'Mijn profiel'. */
.moderator-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid oklch(var(--border));
    border-radius: 9999px;
    padding: 0.2rem;
    background: oklch(var(--secondary) / 0.4);
  }
.moderator-mode-option {
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    color: oklch(var(--muted-foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.moderator-mode-option[data-active="true"] {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
  }
/* ---- Interesses yellow tile grid (max 20 tags from BDSM glossary) ----
     Warm gold-yellow tiles on the dark aubergine card; selected state glows
     brighter gold with deep bordeaux ink. */
.tile-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
.tile {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--tile-border));
    background: oklch(var(--tile));
    color: oklch(var(--tile-foreground));
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -6px oklch(var(--tile) / 0.5);
  }
.tile[data-selected="true"] {
    background: oklch(var(--tile-selected));
    color: oklch(var(--tile-selected-foreground));
    border-color: oklch(var(--tile-selected));
    box-shadow: 0 0 0 2px oklch(var(--tile-selected) / 0.45);
  }
.tile[data-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
.tile-check {
    width: 0.85rem;
    height: 0.85rem;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    background: oklch(var(--tile-selected-foreground) / 0.85);
    color: oklch(var(--tile-selected));
    font-size: 0.6rem;
    line-height: 1;
  }
.tile-count {
    font-size: 0.75rem;
    color: oklch(var(--muted-foreground));
    letter-spacing: 0.04em;
  }
/* ---- Member tile (matches the Ads advert card design) ----
     Long horizontal clickable card: square member photo on the left at full
     tile height, followed by alias, age, BDSM role and province labels.
     Sized and styled to match the Ads AdCard. */
.member-tile {
    position: relative;
  }
/* ---- Vertically compact member profile ----
     Reduced row gaps and lower text frames so more info fits at a glance. */
.profile-compact {
    gap: var(--profile-gap);
  }
.profile-compact .profile-field {
    padding: var(--profile-field-pad);
  }
.profile-compact .profile-field-value {
    font-size: var(--profile-value);
  }
/* ---- Members tile grid: 2-column layout ----
     Two columns of long horizontal member cards matching the Ads advert
     cards, each with a square photo on the left at full tile height. */
.member-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--member-gap);
  }
.member-grid .member-tile {
    min-width: 0;
  }
/* ---- Members heading row: 'Leden' title + right-aligned member count ----
     The total enrolled member count sits on the same line as the heading,
     pushed to the right, in the muted gold accent. The number itself is
     formatted with Dutch thousands separators (punt) by the frontend. */
.member-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
.member-count {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: oklch(var(--accent));
    white-space: nowrap;
  }
/* ---- Member profile photo gallery ----
     Grid of uploaded extra photos (beyond the profile avatar), square tiles
     with a hairline mauve border. The empty state shows a 'Geen foto's
     beschikbaar' message in a dashed-outline panel. */
.member-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.75rem;
  }
.member-gallery-photo {
    aspect-ratio: 1 / 1;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    display: block;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.4);
  }
.member-gallery-empty {
    padding: 2rem 1rem;
    text-align: center;
    border-radius: calc(var(--radius) + 2px);
    border: 1px dashed oklch(var(--border));
    background: oklch(var(--secondary) / 0.25);
    color: oklch(var(--muted-foreground));
    font-size: 0.9rem;
  }
/* ---- Members search bar (between 'Leden' heading and tiles) ----
     Discreet aubergine-tinted field with a gold search glyph; wine focus ring. */
.member-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: var(--search-height);
    padding: var(--search-pad);
    border-radius: 9999px;
    border: 1px solid oklch(var(--input));
    background: oklch(var(--secondary) / 0.4);
    color: oklch(var(--muted-foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.member-search:focus-within {
    border-color: oklch(var(--ring));
    box-shadow: 0 0 0 2px oklch(var(--ring) / 0.35);
    color: oklch(var(--foreground));
  }
.member-search svg {
    width: var(--search-icon);
    height: var(--search-icon);
    flex-shrink: 0;
    stroke: currentColor;
  }
.member-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: oklch(var(--foreground));
    font-size: 0.9rem;
  }
.member-search-input::-moz-placeholder {
    color: oklch(var(--muted-foreground));
  }
.member-search-input::placeholder {
    color: oklch(var(--muted-foreground));
  }
/* ---- Members sort/filter controls ----
     Compact pill selects + age min/max inputs in one tidy row. */
.member-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--filter-gap);
  }
.member-filter {
    height: var(--filter-height);
    padding: var(--filter-pad);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--input));
    background: oklch(var(--secondary) / 0.4);
    color: oklch(var(--muted-foreground));
    font-size: var(--filter-size);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.member-filter:hover {
    border-color: oklch(var(--ring) / 0.55);
    color: oklch(var(--foreground));
  }
.member-filter[data-active="true"] {
    border-color: oklch(var(--accent) / 0.7);
    color: oklch(var(--accent));
    background: oklch(var(--primary) / 0.16);
  }
.member-filter svg {
    width: 0.85rem;
    height: 0.85rem;
    stroke: currentColor;
  }
.member-age {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: var(--filter-height);
    padding: 0 0.4rem 0 0.8rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--input));
    background: oklch(var(--secondary) / 0.4);
    color: oklch(var(--muted-foreground));
    font-size: var(--filter-size);
  }
.member-age-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    color: oklch(var(--muted-foreground));
  }
.member-age-input {
    width: 3.2rem;
    height: 1.6rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--input));
    background: oklch(var(--card));
    color: oklch(var(--foreground));
    text-align: center;
    font-size: 0.78rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.member-age-input:focus {
    border-color: oklch(var(--ring));
    box-shadow: 0 0 0 2px oklch(var(--ring) / 0.35);
  }
/* ---- Orientation chips (max 2) with small avatar icon ----
     Each oriëntatietype is a pill with a tiny circular avatar; selected state
     glows gold. Reuses the warm tile language but with an avatar glyph. */
.orient-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
.orient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: var(--orient-pad);
    border-radius: 9999px;
    border: 1px solid oklch(var(--tile-border));
    background: oklch(var(--tile));
    color: oklch(var(--tile-foreground));
    font-size: var(--orient-size);
    font-weight: 600;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.orient-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -6px oklch(var(--tile) / 0.5);
  }
.orient-chip[data-selected="true"] {
    background: oklch(var(--tile-selected));
    color: oklch(var(--tile-selected-foreground));
    border-color: oklch(var(--tile-selected));
    box-shadow: 0 0 0 2px oklch(var(--tile-selected) / 0.45);
  }
.orient-chip[data-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
.orient-avatar {
    width: var(--orient-avatar);
    height: var(--orient-avatar);
    flex-shrink: 0;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: oklch(var(--tile-selected-foreground) / 0.85);
    color: oklch(var(--tile-selected));
    font-size: 0.62rem;
    font-family: var(--font-display);
    overflow: hidden;
  }
.orient-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.orient-check {
    width: 0.85rem;
    height: 0.85rem;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    background: oklch(var(--tile-selected-foreground) / 0.85);
    color: oklch(var(--tile-selected));
    font-size: 0.6rem;
    line-height: 1;
  }
.orient-hint {
    font-size: 0.75rem;
    color: oklch(var(--muted-foreground));
    letter-spacing: 0.04em;
  }
/* The orientation counter turns gold while the minimum of one choice is not
     met, so the required state is visible without relying on colour alone. */
.orient-hint[data-invalid="true"] {
    color: oklch(var(--accent));
    font-weight: 600;
  }
/* ---- Voorkeuren member: 28 aspecten met zes keuzes ----
     Each aspect is a bordered row with its name, the current ranking label and
     six selectable choice chips. An unselected chip stays white with dark text,
     so the one selected chip per aspect — glowing gold with deep bordeaux ink,
     matching the tile language used elsewhere in the profile — is the only
     colour that stands out while scanning the profile vertically. */
.voorkeuren-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
.voorkeur-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 0.95rem;
    border-radius: calc(var(--radius) + 2px);
    background: oklch(var(--secondary) / 0.3);
    border: 1px solid oklch(var(--border) / 0.5);
  }
.voorkeur-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
.voorkeur-choice {
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--voorkeur-idle-border));
    background: oklch(var(--voorkeur-idle));
    color: oklch(var(--voorkeur-idle-foreground));
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.voorkeur-choice:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -6px oklch(var(--voorkeur-idle) / 0.5);
  }
.voorkeur-choice[data-selected="true"] {
    background: oklch(var(--tile-selected));
    color: oklch(var(--tile-selected-foreground));
    border-color: oklch(var(--tile-selected));
    box-shadow: 0 0 0 2px oklch(var(--tile-selected) / 0.45);
  }
.voorkeur-choice:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
@media (min-width: 640px) {
    .voorkeuren-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* ---- Subtle permanent admin/moderator settings icon (gear) ----
     Visible only to Admin/Moderators; discreet muted ivory, gold on hover. */
.admin-settings-icon {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border-radius: 9999px;
    color: oklch(var(--admin-icon));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.admin-settings-icon:hover {
    color: oklch(var(--admin-icon-hover));
    background: oklch(var(--secondary) / 0.5);
  }
.admin-settings-icon svg {
    width: var(--admin-icon-size);
    height: var(--admin-icon-size);
    stroke: currentColor;
  }
/* ---- Begrippen as individual editable buttons ----
     Each glossary term is a discreet pill button; admins/mods edit in place. */
.begrip-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: var(--begrip-btn-pad);
    border-radius: 9999px;
    border: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.35);
    color: oklch(var(--foreground));
    font-size: var(--begrip-btn-size);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.begrip-btn:hover {
    border-color: oklch(var(--ring) / 0.55);
    color: oklch(var(--accent));
  }
.begrip-btn[data-editable="true"]:hover {
    border-color: oklch(var(--accent));
    box-shadow: 0 0 0 2px oklch(var(--accent) / 0.3);
  }
.begrip-btn svg {
    width: 0.8rem;
    height: 0.8rem;
    stroke: currentColor;
  }
/* ---- Shop tiles: 3-column tiles, 234px tall ----
     No shop images/logos (doNotBuild) — the tile leans on typography and a
     structured metadata layout. Subtle 1-decimal rating in muted gold.
     Sortable by diensttype and provincie via the shop toolbar.
     Narrow screens fall back to a single readable column; the page width is
     unchanged, only the column count and tile height differ. */
.shop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--shop-gap);
  }
@media (min-width: 640px) {
    .shop-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
@media (min-width: 1024px) {
    .shop-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
.shop-tile {
    height: var(--shop-tile-height);
    padding: var(--shop-pad);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    overflow: hidden;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--card));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.shop-tile:hover {
    border-color: oklch(var(--ring) / 0.55);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
    transform: translateY(-2px);
  }
.shop-tile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
  }
.shop-tile-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.15;
    color: oklch(var(--accent));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.shop-tile-province {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--shop-province));
    white-space: nowrap;
    flex-shrink: 0;
  }
.shop-tile-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: oklch(var(--muted-foreground));
  }
/* The tag block is the only flexible region: it takes the leftover height
     between the head and the foot and scrolls when a shop carries many
     diensten/artikelen, so no chip is ever clipped mid-row. */
.shop-tile-tags {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: oklch(var(--border)) transparent;
  }
.shop-tile-tags::-webkit-scrollbar {
    width: 4px;
  }
.shop-tile-tags::-webkit-scrollbar-thumb {
    background: oklch(var(--border));
    border-radius: 9999px;
  }
.shop-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.45rem;
    align-items: center;
  }
.shop-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    border: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.35);
    color: oklch(var(--muted-foreground));
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
.shop-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.45rem;
    border-top: 1px solid oklch(var(--border) / 0.55);
    flex-shrink: 0;
  }
.shop-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: oklch(var(--shop-link));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.shop-link:hover {
    color: oklch(var(--tile-selected));
  }
.shop-link svg {
    width: 0.8rem;
    height: 0.8rem;
    stroke: currentColor;
  }
.shop-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: oklch(var(--muted-foreground));
  }
.shop-rating-stars {
    display: inline-flex;
    gap: 0.08rem;
    color: oklch(var(--shop-rating));
  }
.shop-rating-stars svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
  }
.shop-rating-stars svg[data-empty="true"] {
    color: oklch(var(--shop-rating-empty));
  }
.shop-rating-value {
    font-variant-numeric: tabular-nums;
    color: oklch(var(--accent));
  }
.shop-rating-count {
    color: oklch(var(--muted-foreground));
  }
/* ---- Shop toolbar: sort/filter pills (diensttype + provincie) ----
     Reuses the member-filter pill language for consistency. */
.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--filter-gap);
  }
.shop-filter {
    height: var(--filter-height);
    padding: var(--filter-pad);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--input));
    background: oklch(var(--secondary) / 0.4);
    color: oklch(var(--muted-foreground));
    font-size: var(--filter-size);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.shop-filter:hover {
    border-color: oklch(var(--ring) / 0.55);
    color: oklch(var(--foreground));
  }
.shop-filter[data-active="true"] {
    border-color: oklch(var(--accent) / 0.7);
    color: oklch(var(--accent));
    background: oklch(var(--primary) / 0.16);
  }
.shop-filter svg {
    width: 0.85rem;
    height: 0.85rem;
    stroke: currentColor;
  }
/* ---- Ads header actions: 'Plaats advertentie' / 'Inloggen om te plaatsen' ----
     The two header buttons sit close to the sort bar below them. The pill
     shape, height and typography are unchanged from the existing house style;
     only the block offset is tightened so the button reads as part of the
     sort bar without overlapping the title or the bar. On narrow screens the
     row wraps and the buttons become full-width so they always stay inside
     the header. */
.ad-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--ad-action-offset);
  }
.ad-action-btn {
    height: var(--ad-action-height);
    padding-inline: var(--ad-action-pad);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 9999px;
    font-size: var(--ad-action-size);
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ad-action-btn svg {
    width: 0.95rem;
    height: 0.95rem;
    stroke: currentColor;
  }
/* Primary action — deep-wine CTA, identical to the rest of the house style */
.ad-action-btn--primary {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
    border: 1px solid oklch(var(--primary));
  }
.ad-action-btn--primary:hover {
    background: oklch(var(--primary-hover));
    border-color: oklch(var(--primary-hover));
  }
/* Secondary action — discreet aubergine pill with a visible mauve outline */
.ad-action-btn--ghost {
    background: oklch(var(--ad-action-ghost-bg));
    color: oklch(var(--label-fg));
    border: 1px solid oklch(var(--ad-action-border));
  }
.ad-action-btn--ghost:hover {
    border-color: oklch(var(--accent));
    color: oklch(var(--accent));
  }
.ad-action-btn:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
@media (max-width: 639px) {
    .ad-actions {
      margin-bottom: calc(var(--ad-action-offset) / 2);
    }
    .ad-action-btn {
      flex: 1 1 100%;
    }
  }
/* ---- Mods tile emoticon vote control ----
     A compact, low-threshold row of emoji vote buttons plus a visible rating
     summary. Sized to sit inside an existing mod tile: the tile keeps its
     current dimensions and the grid is untouched. */
.mod-vote {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.55rem;
    margin-top: 0.55rem;
    border-top: 1px solid oklch(var(--border) / 0.55);
  }
.mod-vote-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--vote-gap);
  }
.mod-vote-btn {
    width: var(--vote-btn);
    height: var(--vote-btn);
    display: inline-grid;
    place-items: center;
    border-radius: var(--vote-radius);
    border: 1px solid oklch(var(--vote-border));
    background: oklch(var(--vote-bg));
    font-size: var(--vote-size);
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.mod-vote-btn:hover {
    border-color: oklch(var(--vote-hover));
    transform: translateY(-1px);
  }
.mod-vote-btn[data-voted="true"] {
    background: oklch(var(--vote-active));
    border-color: oklch(var(--vote-active));
    color: oklch(var(--vote-active-fg));
  }
.mod-vote-btn:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.mod-vote-btn[data-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
  }
.mod-vote-summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: oklch(var(--vote-count));
  }
.mod-vote-score {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-variant-numeric: tabular-nums;
    color: oklch(var(--accent));
    font-weight: 600;
  }
.mod-vote-score svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: currentColor;
  }
.mod-vote-tally {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
/* ---- Development notice modal (non-dismissible) ----
     Shown to a signed-out visitor on register/login. There is no close cross,
     no backdrop dismissal and no Escape handler; the only exit is the single
     acknowledge action in the footer. A gold hairline sets it apart from the
     regular dialogs without breaking the house style. */
.notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: oklch(var(--notice-overlay) / 0.82);
    backdrop-filter: blur(4px);
  }
.notice-dialog {
    width: 100%;
    max-width: 28rem;
    border-radius: calc(var(--radius) + 4px);
    border: 1px solid oklch(var(--notice-border) / 0.55);
    background: oklch(var(--card));
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: fade-in 0.3s ease-out;
  }
.notice-dialog-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.3);
  }
.notice-dialog-mark {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    border: 1px solid oklch(var(--notice-border) / 0.55);
    color: oklch(var(--accent));
  }
.notice-dialog-mark svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
  }
.notice-dialog-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: oklch(var(--accent));
  }
.notice-dialog-body {
    padding: 1.4rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: oklch(var(--foreground));
  }
.notice-dialog-body p + p {
    margin-top: 0.7rem;
  }
.notice-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.4rem;
    border-top: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.2);
  }
/* ---- Invite link row (Admin/Moderator only) ----
     A compact card: label, a recessed read-only link field and a gold copy
     action. Reuses the dialog button language so it reads as one house style. */
.invite-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--card));
  }
.invite-card-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--secondary-foreground));
  }
.invite-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
.invite-field {
    flex: 1;
    min-width: 0;
    height: 2.5rem;
    padding-inline: 0.85rem;
    display: flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid oklch(var(--invite-border));
    background: oklch(var(--invite-field));
    color: oklch(var(--foreground));
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.invite-copy {
    height: 2.5rem;
    padding-inline: 1.1rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    background: oklch(var(--accent));
    color: oklch(var(--accent-foreground));
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.invite-copy:hover {
    background: oklch(var(--tile-selected));
  }
.invite-copy:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.invite-copy svg {
    width: 0.85rem;
    height: 0.85rem;
    stroke: currentColor;
  }
.invite-hint {
    font-size: 0.75rem;
    color: oklch(var(--muted-foreground));
  }
@media (max-width: 479px) {
    .invite-row {
      flex-direction: column;
      align-items: stretch;
    }
    .invite-copy {
      justify-content: center;
    }
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hover\:scale-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\:border-\[\#C9A45C\]\/60:hover {
  border-color: rgb(201 164 92 / 0.6);
}

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

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

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

.hover\:bg-\[\#511B2E\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(81 27 46 / var(--tw-bg-opacity, 1));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.hover\:text-\[\#E8DCD7\]:hover {
  --tw-text-opacity: 1;
  color: rgb(232 220 215 / var(--tw-text-opacity, 1));
}

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

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

.hover\:text-accent\/80:hover {
  color: oklch(var(--accent) / 0.8);
}

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

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

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

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

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

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

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

.hover\: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\:bg-primary-hover:hover {
    background-color: oklch(var(--primary-hover));
  }

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

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

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

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

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

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

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

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

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

.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}

.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\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}

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

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

.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\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
}

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

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

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

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-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\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes accordion-up {

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

  to {
    height: 0;
  }
}

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

@keyframes accordion-down {

  from {
    height: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 640px) {

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

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

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

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

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

  .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\:flex-row {
    flex-direction: row;
  }

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

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

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

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

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

  .sm\:p-12 {
    padding: 3rem;
  }

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

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

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

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

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

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

  .sm\:pt-16 {
    padding-top: 4rem;
  }

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

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

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

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

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

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

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

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 1024px) {

  .lg\:w-72 {
    width: 18rem;
  }

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

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

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

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

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

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

@media (min-width: 1280px) {

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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