*, ::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: ~50% wider than the previous
       1860px. The photo column keeps its own fixed width (--ad-detail-photo)
       so the image does not scale with the wider frame, and the detail rows
       use the compact vertical rhythm below. */
    --ad-detail-width: 2790px;
    --ad-detail-photo: 900px;
    --ad-detail-gap: 1.25rem;
    --ad-detail-row-gap: 0.4rem;
    --ad-detail-row-pad: 0.4rem 0.9rem;

    /* 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 — editorial image next to 'Een community met klasse'.
       The frame keeps the same width as before but is half as tall: the old
       4/5 portrait ratio becomes 8/5. The image fills the lower frame with
       object-fit: cover, so the crop stays centred and nothing is distorted.
       The admin edit/upload preview uses the same token, so what the beheerder
       sees while uploading matches the frame shown on the page. */
    --editorial-image-ratio: 8 / 5;

    /* 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. The kenmerken section
       spreads over two full-width columns, so the row rhythm is deliberately tight
       (small gaps, slim padding, smaller value text) to keep the whole block short
       and bring the interesses/photos content below it into view sooner. */
    --profile-gap: 0.3rem;
    --profile-column-gap: 1.25rem;
    --profile-field-pad: 0.3rem 0.6rem;
    --profile-value: 0.8rem;
    --profile-label: 0.66rem;
    --profile-section-gap: 0.75rem;

    /* 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 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.
       This token is the tile's *minimum* height: the 150px round province flag
       plus the name line and the website/rating row need more room than the
       old fixed 234px, so the tile grows to fit its content instead of
       clipping the bottom row. */
    --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 — round province flag avatar on every shop tile.
       The flag comes from the province metadata option's avatar field, so an
       admin change in Websitebeheer reaches the tile without a code change.
       A missing flag falls back to a neutral province placeholder. */
    --shop-flag-size: 75px;
    --shop-flag-border: 0.62 0.09 350; /* mauve-rose ring around the flag */
    --shop-flag-fallback: 0.2 0.05 345; /* aubergine placeholder fill */
    --shop-flag-fallback-fg: 0.73 0.05 355; /* soft rose placeholder glyph */

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

    /* rollenspelfetisj.org — ad button colour schemes by intent/category.
       Four visually distinct schemes so a visitor can tell at a glance what an
       advertisement is for: real-life kennismaking (the unchanged bordeaux
       default), vriendelijk online contact (cool teal), te koop / artikelen
       (warm amber), and commerciële diensten (violet). Each scheme defines a
       background, a border, a title/text colour and a label-chip colour, so the
       distinction is visible on the button itself and on its labels. */
    --ad-scheme-kennismaking-bg: 0.155 0.045 340; /* unchanged aubergine */
    --ad-scheme-kennismaking-border: 0.29 0.05 345; /* unchanged mauve */
    --ad-scheme-kennismaking-fg: 0.88 0.015 40; /* unchanged ivory */
    --ad-scheme-kennismaking-label: 0.62 0.09 350; /* unchanged mauve-rose */

    --ad-scheme-online-bg: 0.17 0.045 210; /* deep teal-aubergine */
    --ad-scheme-online-border: 0.42 0.08 205; /* cool teal outline */
    --ad-scheme-online-fg: 0.9 0.03 200; /* pale aqua text */
    --ad-scheme-online-label: 0.72 0.1 200; /* bright teal chip */

    --ad-scheme-tekoop-bg: 0.18 0.05 65; /* deep amber-brown */
    --ad-scheme-tekoop-border: 0.5 0.1 70; /* warm amber outline */
    --ad-scheme-tekoop-fg: 0.92 0.04 80; /* warm champagne text */
    --ad-scheme-tekoop-label: 0.78 0.13 75; /* amber chip */

    --ad-scheme-commercieel-bg: 0.18 0.055 305; /* deep violet */
    --ad-scheme-commercieel-border: 0.46 0.11 305; /* violet outline */
    --ad-scheme-commercieel-fg: 0.9 0.035 310; /* pale lilac text */
    --ad-scheme-commercieel-label: 0.72 0.13 310; /* violet chip */
  }

  .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: 2790px;
    --ad-detail-photo: 900px;
    --ad-detail-gap: 1.25rem;
    --ad-detail-row-gap: 0.4rem;
    --ad-detail-row-pad: 0.4rem 0.9rem;

    --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;
    --editorial-image-ratio: 8 / 5;
    --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.3rem;
    --profile-column-gap: 1.25rem;
    --profile-field-pad: 0.3rem 0.6rem;
    --profile-value: 0.8rem;
    --profile-label: 0.66rem;
    --profile-section-gap: 0.75rem;

    --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; /* minimum tile height; the tile grows to fit */
    --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;

    --shop-flag-size: 75px;
    --shop-flag-border: 0.62 0.09 350;
    --shop-flag-fallback: 0.2 0.05 345;
    --shop-flag-fallback-fg: 0.73 0.05 355;

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

    --ad-scheme-kennismaking-bg: 0.155 0.045 340;
    --ad-scheme-kennismaking-border: 0.29 0.05 345;
    --ad-scheme-kennismaking-fg: 0.88 0.015 40;
    --ad-scheme-kennismaking-label: 0.62 0.09 350;

    --ad-scheme-online-bg: 0.17 0.045 210;
    --ad-scheme-online-border: 0.42 0.08 205;
    --ad-scheme-online-fg: 0.9 0.03 200;
    --ad-scheme-online-label: 0.72 0.1 200;

    --ad-scheme-tekoop-bg: 0.18 0.05 65;
    --ad-scheme-tekoop-border: 0.5 0.1 70;
    --ad-scheme-tekoop-fg: 0.92 0.04 80;
    --ad-scheme-tekoop-label: 0.78 0.13 75;

    --ad-scheme-commercieel-bg: 0.18 0.055 305;
    --ad-scheme-commercieel-border: 0.46 0.11 305;
    --ad-scheme-commercieel-fg: 0.9 0.035 310;
    --ad-scheme-commercieel-label: 0.72 0.13 310;
  }

  * {
  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. */
.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 button colour schemes by intent/category ----
     The ad button itself carries the scheme: background, border and text
     colour all change, and the six label chips inherit the scheme's label
     colour so the distinction is visible on the button and on its labels.
     The real-life kennismaking scheme is the unchanged bordeaux default, so
     those ads look exactly as they did before. */
.ad-card {
    background: oklch(var(--ad-scheme-bg));
    border-color: oklch(var(--ad-scheme-border));
    color: oklch(var(--ad-scheme-fg));
  }
.ad-card .ad-card-title {
    color: oklch(var(--ad-scheme-fg));
  }
.ad-card .ad-card-meta {
    color: oklch(var(--ad-scheme-fg) / 0.82);
  }
/* Real-life kennismaking — the unchanged bordeaux default. */
.ad-card--kennismaking {
    --ad-scheme-bg: var(--ad-scheme-kennismaking-bg);
    --ad-scheme-border: var(--ad-scheme-kennismaking-border);
    --ad-scheme-fg: var(--ad-scheme-kennismaking-fg);
    --ad-scheme-label: var(--ad-scheme-kennismaking-label);
  }
/* Vriendelijk contact online — cool teal. */
.ad-card--online {
    --ad-scheme-bg: var(--ad-scheme-online-bg);
    --ad-scheme-border: var(--ad-scheme-online-border);
    --ad-scheme-fg: var(--ad-scheme-online-fg);
    --ad-scheme-label: var(--ad-scheme-online-label);
  }
/* Te koop / artikelen — warm amber. */
.ad-card--tekoop {
    --ad-scheme-bg: var(--ad-scheme-tekoop-bg);
    --ad-scheme-border: var(--ad-scheme-tekoop-border);
    --ad-scheme-fg: var(--ad-scheme-tekoop-fg);
    --ad-scheme-label: var(--ad-scheme-tekoop-label);
  }
/* Commerciële diensten — violet. */
.ad-card--commercieel {
    --ad-scheme-bg: var(--ad-scheme-commercieel-bg);
    --ad-scheme-border: var(--ad-scheme-commercieel-border);
    --ad-scheme-fg: var(--ad-scheme-commercieel-fg);
    --ad-scheme-label: var(--ad-scheme-commercieel-label);
  }
/* Hover keeps the scheme's border but lifts the surface slightly. */
.ad-card:hover {
    border-color: oklch(var(--ad-scheme-label) / 0.85);
    background: oklch(var(--ad-scheme-bg) / 0.82);
  }
/* ---- Dashboard (DB) — member-only statistics page ----
     A deliberately futuristic surface: near-black panel, thin neon-pink
     (rgb(255,20,147)) frame lines, neon-pink headings and bar diagrams on a
     dark ground. The neon accent is a fixed brand colour for this page only,
     so it never leaks into the rest of the site's Discreet Bordeaux palette. */
.dashboard-shell {
    --neon: 255 20 147; /* rgb(255,20,147) */
    --neon-soft: 255 20 147;
    position: relative;
    margin-block: 2.5rem 4rem;
    padding: 2rem 1.75rem 2.5rem;
    border-radius: calc(var(--radius) + 6px);
    border: 1px solid rgb(var(--neon) / 0.45);
    background: radial-gradient(
        120% 90% at 50% 0%,
        rgb(var(--neon) / 0.12) 0%,
        transparent 60%
      ), linear-gradient(180deg, oklch(0.09 0.02 320), oklch(0.06 0.015 320));
    box-shadow: 0 0 0 1px rgb(var(--neon) / 0.12), 0 24px 64px -24px
      rgb(var(--neon) / 0.35);
  }
.dashboard-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid rgb(var(--neon) / 0.35);
  }
.dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgb(var(--neon));
    text-shadow: 0 0 12px rgb(var(--neon) / 0.55);
  }
.dashboard-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
    color: rgb(var(--neon));
    text-shadow: 0 0 10px rgb(var(--neon) / 0.55), 0 0 28px
      rgb(var(--neon) / 0.3);
  }
.dashboard-subtitle {
    max-width: 46rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: oklch(var(--foreground) / 0.78);
  }
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1.25rem;
  }
.dashboard-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.25rem 1.35rem 1.1rem;
    border-radius: calc(var(--radius) + 4px);
    border: 1px solid rgb(var(--neon) / 0.4);
    background: linear-gradient(
      180deg,
      oklch(0.11 0.025 320 / 0.95),
      oklch(0.08 0.02 320 / 0.95)
    );
    box-shadow: inset 0 0 24px -12px rgb(var(--neon) / 0.5);
    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.dashboard-card:hover {
    border-color: rgb(var(--neon) / 0.75);
  }
.dashboard-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
.dashboard-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--neon));
    text-shadow: 0 0 10px rgb(var(--neon) / 0.45);
  }
.dashboard-card-icon {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    color: rgb(var(--neon) / 0.8);
  }
.dashboard-total {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
  }
.dashboard-total-value {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: rgb(var(--neon));
    text-shadow: 0 0 16px rgb(var(--neon) / 0.5);
  }
.dashboard-total-label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(var(--foreground) / 0.6);
  }
.dashboard-bars {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
.dashboard-bar-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
.dashboard-bar-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
  }
.dashboard-bar-label {
    font-size: 0.82rem;
    color: oklch(var(--foreground) / 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.dashboard-bar-count {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: rgb(var(--neon));
  }
.dashboard-bar-track {
    position: relative;
    height: 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgb(var(--neon) / 0.3);
    background: oklch(0.05 0.01 320);
    overflow: hidden;
  }
.dashboard-bar-fill {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 9999px;
    background: linear-gradient(
      90deg,
      rgb(var(--neon) / 0.55),
      rgb(var(--neon))
    );
    box-shadow: 0 0 12px rgb(var(--neon) / 0.7);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
.dashboard-empty {
    font-size: 0.85rem;
    color: oklch(var(--foreground) / 0.6);
  }
.dashboard-card-foot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid rgb(var(--neon) / 0.2);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: oklch(var(--foreground) / 0.55);
  }
.dashboard-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.5rem;
    border-radius: calc(var(--radius) + 4px);
    border: 1px solid rgb(var(--neon) / 0.5);
    background: oklch(0.08 0.02 320);
  }
.dashboard-error-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(var(--neon));
  }
.dashboard-error-text {
    font-size: 0.9rem;
    color: oklch(var(--foreground) / 0.75);
  }
.dashboard-retry {
    margin-top: 0.5rem;
    height: 2.5rem;
    padding-inline: 1.2rem;
    border-radius: 9999px;
    border: 1px solid rgb(var(--neon) / 0.7);
    background: rgb(var(--neon) / 0.14);
    color: rgb(var(--neon));
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.dashboard-retry:hover {
    background: rgb(var(--neon) / 0.24);
  }
.dashboard-retry:focus-visible {
    outline: 2px solid rgb(var(--neon));
    outline-offset: 2px;
  }
/* ---- Dashboard view switch (standaard / doorschijnend) ----
     A two-option segmented control in the dashboard header. The active option
     is filled with the neon accent and carries a check glyph, so the chosen
     view is readable without relying on colour alone. The hint line below the
     control describes the active view in words. */
.dashboard-view-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0.35rem 0 0;
    padding: 0;
    border: none;
  }
.dashboard-view-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(var(--foreground) / 0.6);
  }
.dashboard-view-options {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 9999px;
    border: 1px solid rgb(var(--neon) / 0.45);
    background: oklch(0.07 0.015 320 / 0.85);
  }
.dashboard-view-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.95rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: oklch(var(--foreground) / 0.7);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.dashboard-view-option:hover {
    color: rgb(var(--neon));
    background: rgb(var(--neon) / 0.12);
  }
.dashboard-view-option[data-active="true"] {
    background: rgb(var(--neon));
    color: oklch(0.12 0.03 8);
    box-shadow: 0 0 16px rgb(var(--neon) / 0.55);
  }
.dashboard-view-option:focus-visible {
    outline: 2px solid rgb(var(--neon));
    outline-offset: 2px;
  }
.dashboard-view-option svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    stroke: currentColor;
  }
.dashboard-view-hint {
    font-size: 0.78rem;
    color: oklch(var(--foreground) / 0.65);
  }
/* ---- Alternative view: transparent dashboard frames ----
     The shell and every card drop their opaque near-black fill so the
     site-wide background photo shows through the frames and moves with the
     page. A light scrim keeps the neon letters and the bar diagrams legible
     over any photo, and the neon frame lines, headings and diagrams are
     unchanged. */
.dashboard-shell[data-view="transparent"] {
    background: rgb(0 0 0 / 0.28);
    backdrop-filter: blur(2px);
  }
.dashboard-shell[data-view="transparent"] .dashboard-card {
    background: rgb(0 0 0 / 0.22);
    backdrop-filter: blur(2px);
  }
.dashboard-shell[data-view="transparent"] .dashboard-card:hover {
    background: rgb(0 0 0 / 0.3);
  }
.dashboard-shell[data-view="transparent"] .dashboard-bar-track {
    background: rgb(0 0 0 / 0.45);
  }
.dashboard-shell[data-view="transparent"] .dashboard-error {
    background: rgb(0 0 0 / 0.3);
  }
.dashboard-shell[data-view="transparent"] .dashboard-subtitle,
  .dashboard-shell[data-view="transparent"] .dashboard-bar-label,
  .dashboard-shell[data-view="transparent"] .dashboard-empty,
  .dashboard-shell[data-view="transparent"] .dashboard-card-foot,
  .dashboard-shell[data-view="transparent"] .dashboard-total-label,
  .dashboard-shell[data-view="transparent"] .dashboard-error-text {
    color: oklch(0.97 0.01 40 / 0.92);
  }
.dashboard-shell[data-view="transparent"] .dashboard-view-label,
  .dashboard-shell[data-view="transparent"] .dashboard-view-hint {
    color: oklch(0.97 0.01 40 / 0.85);
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-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-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;
}
.contents {
  display: contents;
}
.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-\[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-72 {
  max-height: 18rem;
}
.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-\[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-4\/6 {
  width: 66.666667%;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-64 {
  width: 16rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[112px\] {
  width: 112px;
}
.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-4 {
  grid-template-columns: repeat(4, 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-\[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\/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-\[\#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\/25 {
  background-color: oklch(var(--primary) / 0.25);
}
.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-3\.5 {
  padding: 0.875rem;
}
.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-\[16px\] {
  font-size: 16px;
}
.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-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-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-2 {
  text-underline-offset: 2px;
}
.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;
  }
/* ---- Homepage dark layer ----
     A uniform black layer at 50% opacity that spans the full content width,
     starts immediately below the four hero buttons and runs to the bottom of
     the page. It is absolutely positioned inside the relative wrapper that
     begins right after the hero and contains every section below it, so it
     stretches from the top of that wrapper to its bottom (top:0; bottom:0)
     without occupying any layout space. It sits above the viewport-pinned
     background photo (z-0) but below all text and content (z-10), and the
     content sections below the hero carry transparent backgrounds so this
     layer provides the dark surface. The hero section itself is outside this
     element, so the title, intro text and buttons stay free of the layer.
     The 100vw width is centred with a translate so it never introduces a
     horizontal scrollbar. */
.home-dark-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: 100vw;
    transform: translateX(-50%);
    background: rgb(0 0 0 / 0.5);
    pointer-events: 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);
  }
/* ---- Editorial image frame (homepage, next to 'Een community met klasse') ----
     Same width as before, half the height: the frame's aspect ratio comes from
     --editorial-image-ratio (8/5, the halved 4/5 portrait). The image fills the
     frame with object-fit: cover, so the crop stays centred and the picture is
     never stretched. The admin edit/upload preview reuses this class, so the
     preview frame matches the displayed frame exactly. */
.editorial-image-frame {
    aspect-ratio: var(--editorial-image-ratio);
    width: 100%;
    overflow: hidden;
    border-radius: calc(var(--radius) + 2px);
  }
.editorial-image-frame img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
/* ---- 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 image column is a positioned
     frame and the image is absolutely pinned to it, so the image can never
     collapse the column to zero height: the frame's height comes from the
     card's stretched flex row, not from the image's own intrinsic size. */
.ad-tile-frame {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.4);
  }
.ad-tile-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
/* Initial-letter fallback for an ad without an uploaded image. It fills the
     same pinned frame, so a card with no photo keeps the identical footprint
     and never renders as an empty sliver. */
.ad-tile-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: oklch(var(--secondary) / 0.6);
    color: oklch(var(--label-fg));
    font-family: var(--font-display);
    font-size: 1.875rem;
    line-height: 1;
  }
/* ---- 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.

     These rules live in the utilities layer on purpose: the shared Badge
     primitive applies `text-foreground` (a utility), and a components-layer
     rule would lose to it, flattening every chip to the same ivory text. */
.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);
  }
/* The label chips take the scheme's label colour, so the whole button reads
     as one colour family. The Geslacht chip keeps its per-value colour and the
     Intentie chip keeps its gold outline, both of which stay legible on every
     scheme background. These sit in the utilities layer for the same reason as
     the base chip rules above. */
.ad-card .ad-label-badge {
    border-color: oklch(var(--ad-scheme-label) / 0.75);
    background: oklch(var(--ad-scheme-label) / 0.14);
    color: oklch(var(--ad-scheme-label));
  }
.ad-card .ad-label-badge--intentie {
    border-color: oklch(var(--label-border-strong));
    background: oklch(var(--accent) / 0.12);
    color: oklch(var(--accent));
  }
.ad-card .ad-label-badge--geslacht {
    background: oklch(var(--gender) / 0.16);
    border-color: oklch(var(--gender));
    color: oklch(var(--gender));
  }
.ad-card .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 detail frame: ~50% wider than the previous 1860px ----
     Frontend applies max-w-[var(--ad-detail-width)] to the detail dialog.
     The frame is a two-column grid: a fixed-width photo column (so the image
     keeps its current rendered size) and a flexible details column that fills
     the extra width. The details column uses a compact vertical rhythm. */
.ad-detail-frame {
    width: 100%;
    max-width: var(--ad-detail-width);
  }
.ad-detail-grid {
    display: grid;
    grid-template-columns: var(--ad-detail-photo) minmax(0, 1fr);
    gap: var(--ad-detail-gap);
    align-items: start;
  }
.ad-detail-rows {
    display: grid;
    gap: var(--ad-detail-row-gap);
  }
.ad-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: calc(var(--radius) + 1px);
    border: 1px solid oklch(var(--border));
    background: oklch(var(--background));
    padding: var(--ad-detail-row-pad);
  }
/* Narrow screens: the photo and the details stack, and the photo keeps its
     square footprint without forcing the frame wider than the viewport. */
@media (max-width: 900px) {
    .ad-detail-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* ---- 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));
  }
/* ---- Story tile author overlay (top-left of the image frame) ----
     The publishing member's profile name sits at the top-left of the image,
     with their role preference directly below it. A soft top scrim plus a
     text-shadow keeps both lines legible over any category image, while the
     category label keeps its own bottom-left position and stays unobscured. */
.story-card-author {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    pointer-events: none;
  }
.story-card-author-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    line-height: 1.2;
    color: oklch(var(--foreground));
    text-shadow: 0 1px 3px oklch(0.1 0.03 8 / 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.story-card-author-role {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(var(--accent));
    text-shadow: 0 1px 3px oklch(0.1 0.03 8 / 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* Top scrim behind the author overlay so the name/role stay readable on a
     bright image without dimming the whole frame. */
.story-card-image--author::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 45%;
    z-index: 1;
    background: linear-gradient(
      180deg,
      oklch(0.1 0.03 8 / 0.72) 0%,
      transparent 100%
    );
    pointer-events: none;
  }
/* ---- Story reading header: fixed ~150px block above the story text ----
     Title, author name, role, age and gender sit in one integrated header
     that occupies the top 150px of the reading view. The story text follows
     directly below and stays the dominant element. */
.story-reading-header {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid oklch(var(--border));
  }
.story-reading-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: oklch(var(--muted-foreground));
  }
.story-reading-meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
  }
.story-reading-meta-label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--secondary-foreground));
  }
.story-reading-meta-value {
    color: oklch(var(--foreground));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* 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));
  }
/* Each rendered line keeps its own format; the block spacing matches the
     previous whitespace-pre-line rendering so existing stories look identical. */
.story-body-line {
    display: block;
    min-height: 1.6em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
/* ---- Per-line story format editor ----
     One row per line: a compact four-way format selector on the left and the
     line's own text field on the right, rendered in the chosen style so the
     member sees the formatting while composing. */
.story-line-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
  }
.story-line-format {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--border));
    background: oklch(var(--secondary) / 0.4);
  }
.story-line-format-btn {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    color: oklch(var(--muted-foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.story-line-format-btn:hover {
    color: oklch(var(--foreground));
    background: oklch(var(--secondary) / 0.7);
  }
.story-line-format-btn[data-active="true"] {
    background: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
  }
.story-line-format-btn:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.story-line-format-btn svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke: currentColor;
  }
.story-line-input {
    flex: 1;
    min-width: 0;
    min-height: 2.25rem;
    resize: vertical;
    border-radius: calc(var(--radius) + 2px);
    border: 1px solid oklch(var(--input));
    background: oklch(var(--secondary) / 0.4);
    color: oklch(var(--foreground));
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.story-line-input::-moz-placeholder {
    color: oklch(var(--muted-foreground));
  }
.story-line-input::placeholder {
    color: oklch(var(--muted-foreground));
  }
.story-line-input:focus {
    outline: none;
    border-color: oklch(var(--ring));
    box-shadow: 0 0 0 2px oklch(var(--ring) / 0.35);
  }
.story-line-add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.25rem;
    padding-inline: 0.9rem;
    border-radius: 9999px;
    border: 1px dashed oklch(var(--border));
    color: oklch(var(--muted-foreground));
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.story-line-add:hover {
    border-color: oklch(var(--accent) / 0.7);
    color: oklch(var(--accent));
    background: oklch(var(--primary) / 0.12);
  }
.story-line-add:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
.story-line-add svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke: currentColor;
  }
/* ---- 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 search bar (between the intro lines and the list) ----
     Reuses the Members search tokens so the field reads as the same control:
     aubergine-tinted pill with a gold search glyph and a wine focus ring. */
.glossary-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);
  }
.glossary-search:focus-within {
    border-color: oklch(var(--ring));
    box-shadow: 0 0 0 2px oklch(var(--ring) / 0.35);
    color: oklch(var(--foreground));
  }
.glossary-search svg {
    width: var(--search-icon);
    height: var(--search-icon);
    flex-shrink: 0;
    stroke: currentColor;
  }
.glossary-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: oklch(var(--foreground));
    font-size: 0.9rem;
  }
.glossary-search-input::-moz-placeholder {
    color: oklch(var(--muted-foreground));
  }
.glossary-search-input::placeholder {
    color: oklch(var(--muted-foreground));
  }
.glossary-search-clear {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 9999px;
    color: oklch(var(--muted-foreground));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
.glossary-search-clear:hover {
    color: oklch(var(--foreground));
    background: oklch(var(--secondary) / 0.7);
  }
.glossary-search-clear:focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
/* ---- 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 ----
     The kenmerken block (leeftijd through lidstatus) is laid out in two
     columns that spread across the full available width, with a tight vertical
     rhythm so the whole section stays short and the interesses/photos content
     below it comes into view sooner. The base .profile-columns rule above
     stays a single-column grid for the profile edit form; only the
     .profile-compact modifier (member profile view) switches to two columns. */
.profile-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--profile-gap) var(--profile-column-gap);
    align-items: start;
  }
.profile-compact .profile-column {
    gap: var(--profile-gap);
  }
.profile-compact .profile-field {
    padding: var(--profile-field-pad);
  }
.profile-compact .profile-field-label {
    font-size: var(--profile-label);
  }
.profile-compact .profile-field-value {
    font-size: var(--profile-value);
  }
/* Narrow screens: the two kenmerken columns stack so nothing is clipped. */
@media (max-width: 639px) {
    .profile-compact {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* ---- Member profile content below the kenmerken columns ----
     Interesses and photos follow the columns in document order. The top
     spacing above them is reduced so they sit close under the kenmerken block
     and read as the page's main content, and their headings are clearer. */
.profile-section {
    margin-top: var(--profile-section-gap);
  }
.profile-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.2;
    color: oklch(var(--accent));
  }
.profile-section-title::before {
    content: "";
    width: 0.2rem;
    height: 1.05em;
    flex-shrink: 0;
    border-radius: 9999px;
    background: oklch(var(--accent));
  }
/* ---- 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 toolbar row: controls on the left, result count on the right ----
     Mirrors the Stories toolbar: a bottom hairline separates it from the card
     grid, and the count stays right-aligned on the same line. */
.member-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid oklch(var(--border));
  }
/* ---- Member card metadata (below the photo) ----
     Geslacht, leeftijd, provincie and lidstatus as a compact two-column
     definition list, so the four fields stay readable inside a narrow
     4-column card without clipping. */
.member-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
    margin: 0;
  }
.member-card-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
  }
.member-card-meta-item dt {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
.member-card-meta-item dd {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.3;
    color: oklch(var(--foreground));
    overflow-wrap: anywhere;
  }
.member-card-status {
    font-weight: 600;
  }
/* ---- 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 {
    /* min-height, not height: the 150px flag + name line + website/rating row
       need ~267px, so a fixed 234px clipped the bottom row. The tile now grows
       to fit its content and never clips; the token stays the floor. */
    min-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;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex-shrink: 0;
  }
.shop-tile-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
  }
.shop-tile-name {
    font-family: var(--font-display);
    /* 1.275rem = 20.4px at the 16px root — exactly 2px larger than 1.15rem */
    font-size: 1.275rem;
    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;
  }
/* The province flag sits right-aligned directly under the province name and
     above the bottom row. It is a fixed 150x150 round frame; the tile grows to
     accommodate it, so the website/rating row below is never clipped. */
.shop-tile-flag-row {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
  }
.shop-flag {
    width: var(--shop-flag-size);
    height: var(--shop-flag-size);
    flex-shrink: 0;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid oklch(var(--shop-flag-border));
    background: oklch(var(--shop-flag-fallback));
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
  }
.shop-flag img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.shop-flag-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: oklch(var(--shop-flag-fallback-fg));
  }
.shop-flag-fallback svg {
    width: 2.5rem;
    height: 2.5rem;
    stroke: currentColor;
  }
.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. It is capped so a
     tag-heavy shop cannot stretch its tile far beyond its neighbours. */
.shop-tile-tags {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 4.5rem;
    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-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\:w-\[128px\] {
    width: 128px;
  }

  .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\:grid-cols-6 {
    grid-template-columns: repeat(6, 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\:w-\[112px\] {
    width: 112px;
  }

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

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

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

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

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

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