/*
 * Venue Sign Design System
 * Brand authority: modular document, Mineral Lime fold and Coral consent point.
 * UI direction: clear, editorial and flat. No decorative gradients.
 *
 * Mark usage:
 * - Use venue-sign-symbol.svg for the official symbol.
 * - The master PNG crop classes below preserve the real, supplied wordmark.
 * - .vs-product-name is product UI text, never a replacement for the wordmark.
 */

@layer vs-reset, vs-tokens, vs-base, vs-components, vs-layout, vs-utilities, vs-accessibility;

@layer vs-tokens {
  :root,
  [data-venue-theme="light"] {
    color-scheme: light;

    /* Brand palette */
    --vs-deep-ink: #10251f;
    --vs-mineral-lime: #c8f04d;
    --vs-coral: #ff8468;
    --vs-warm-porcelain: #f6f0e7;
    --vs-soft-sage: #a9c8b7;
    --vs-brand-master-canvas: #f6f0ea;
    --vs-deep-ink-rgb: 16, 37, 31;
    --vs-mineral-lime-rgb: 200, 240, 77;
    --vs-coral-rgb: 255, 132, 104;
    --vs-soft-sage-rgb: 169, 200, 183;

    /* Semantic color */
    --vs-color-bg: var(--vs-warm-porcelain);
    --vs-color-surface: #fffdf9;
    --vs-color-surface-subtle: #f0ece4;
    --vs-color-surface-muted: #e5e7df;
    --vs-color-surface-inverse: var(--vs-deep-ink);
    --vs-color-text: var(--vs-deep-ink);
    --vs-color-text-secondary: #435d54;
    --vs-color-text-muted: #667b73;
    --vs-color-text-inverse: #fffdf9;
    --vs-color-border: #cbd8d0;
    --vs-color-border-strong: #78968a;
    --vs-color-interactive: var(--vs-deep-ink);
    --vs-color-interactive-hover: #1c3d33;
    --vs-color-interactive-pressed: #09201a;
    --vs-color-focus: var(--vs-mineral-lime);
    --vs-color-accent: var(--vs-coral);
    --vs-color-accent-soft: #ffe5dd;
    --vs-color-highlight: var(--vs-mineral-lime);
    --vs-color-highlight-soft: #effbc9;
    --vs-color-success: #246b55;
    --vs-color-success-surface: #e4f0ea;
    --vs-color-warning: #80530f;
    --vs-color-warning-surface: #fff0c9;
    --vs-color-danger: #a43b32;
    --vs-color-danger-surface: #fde8e3;
    --vs-color-info: #24576a;
    --vs-color-info-surface: #e4f1f4;
    --vs-color-overlay: rgba(var(--vs-deep-ink-rgb), 0.58);

    /* Type */
    --vs-font-sans: Inter, Aptos, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --vs-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --vs-font-size-1: 0.75rem;
    --vs-font-size-2: 0.8125rem;
    --vs-font-size-3: 0.875rem;
    --vs-font-size-4: 1rem;
    --vs-font-size-5: 1.125rem;
    --vs-font-size-6: 1.25rem;
    --vs-font-size-7: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
    --vs-font-size-8: clamp(2rem, 1.45rem + 1.8vw, 3rem);
    --vs-font-weight-regular: 400;
    --vs-font-weight-medium: 560;
    --vs-font-weight-semibold: 650;
    --vs-font-weight-bold: 740;
    --vs-line-height-tight: 1.16;
    --vs-line-height-body: 1.5;
    --vs-line-height-relaxed: 1.68;
    --vs-letter-spacing-tight: -0.025em;
    --vs-letter-spacing-label: 0.045em;

    /* 4 px spacing grid */
    --vs-space-0: 0;
    --vs-space-1: 0.25rem;
    --vs-space-2: 0.5rem;
    --vs-space-3: 0.75rem;
    --vs-space-4: 1rem;
    --vs-space-5: 1.25rem;
    --vs-space-6: 1.5rem;
    --vs-space-7: 1.75rem;
    --vs-space-8: 2rem;
    --vs-space-10: 2.5rem;
    --vs-space-12: 3rem;
    --vs-space-16: 4rem;
    --vs-space-20: 5rem;
    --vs-space-24: 6rem;

    /* Official mark geometry and UI geometry derived from it */
    --vs-logo-module: 0.5rem;
    --vs-logo-width: calc(var(--vs-logo-module) * 4);
    --vs-logo-height: calc(var(--vs-logo-module) * 5);
    --vs-logo-stroke: calc(var(--vs-logo-module) * 0.66);
    --vs-logo-radius: calc(var(--vs-logo-module) * 0.4);
    --vs-logo-fold: calc(var(--vs-logo-module) * 1.7);
    --vs-border-width: 1px;
    --vs-border-width-strong: 2px;
    --vs-radius-xs: 0.25rem;
    --vs-radius-sm: 0.5rem;
    --vs-radius-md: 0.75rem;
    --vs-radius-lg: 1rem;
    --vs-radius-xl: 1.5rem;
    --vs-radius-pill: 999px;
    --vs-cut-sm: 0.5rem;
    --vs-cut-md: 1rem;
    --vs-cut-lg: 1.5rem;

    /* Minimal elevation */
    --vs-shadow-1: 0 1px 2px rgba(var(--vs-deep-ink-rgb), 0.08);
    --vs-shadow-2: 0 8px 24px rgba(var(--vs-deep-ink-rgb), 0.1);
    --vs-shadow-focus: 0 0 0 3px rgba(var(--vs-mineral-lime-rgb), 0.72);

    /* Motion */
    --vs-duration-fast: 120ms;
    --vs-duration-base: 180ms;
    --vs-duration-slow: 280ms;
    --vs-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --vs-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Controls and shell */
    --vs-control-height-sm: 2rem;
    --vs-control-height: 2.75rem;
    --vs-control-height-lg: 3rem;
    --vs-touch-target: 2.75rem;
    --vs-sidebar-width: 17rem;
    --vs-sidebar-collapsed-width: 5.5rem;
    --vs-topbar-height: 4rem;
    --vs-bottom-nav-height: 4.25rem;
    --vs-content-max: 90rem;
    --vs-page-gutter: clamp(1rem, 2.6vw, 2.5rem);
    --vs-z-sticky: 20;
    --vs-z-overlay: 80;
    --vs-z-drawer: 90;
    --vs-z-dialog: 100;
    --vs-z-toast: 110;
  }
}

@layer vs-reset {
  :where(.vs-app, .vs-overlay-root),
  :where(.vs-app, .vs-overlay-root) *,
  :where(.vs-app, .vs-overlay-root) *::before,
  :where(.vs-app, .vs-overlay-root) *::after {
    box-sizing: border-box;
  }

  :where(.vs-app, .vs-overlay-root) {
    margin: 0;
    min-width: 20rem;
    min-height: 100%;
    background: var(--vs-color-bg);
    color: var(--vs-color-text);
    font-family: var(--vs-font-sans);
    font-size: var(--vs-font-size-4);
    line-height: var(--vs-line-height-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  :where(.vs-app, .vs-overlay-root) :where(button, input, select, textarea) {
    font: inherit;
  }

  :where(.vs-app, .vs-overlay-root) :where(img, svg) {
    display: block;
    max-width: 100%;
  }

  :where(.vs-app, .vs-overlay-root) :where(button, a) {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer vs-base {
  .vs-display,
  .vs-title,
  .vs-heading,
  .vs-subheading,
  .vs-body,
  .vs-caption,
  .vs-label {
    margin: 0;
  }

  .vs-display {
    max-width: 18ch;
    font-size: var(--vs-font-size-8);
    font-weight: var(--vs-font-weight-bold);
    letter-spacing: var(--vs-letter-spacing-tight);
    line-height: var(--vs-line-height-tight);
  }

  .vs-title {
    font-size: var(--vs-font-size-7);
    font-weight: var(--vs-font-weight-bold);
    letter-spacing: var(--vs-letter-spacing-tight);
    line-height: var(--vs-line-height-tight);
  }

  .vs-heading {
    font-size: var(--vs-font-size-6);
    font-weight: var(--vs-font-weight-semibold);
    line-height: 1.3;
  }

  .vs-subheading {
    color: var(--vs-color-text-secondary);
    font-size: var(--vs-font-size-5);
    font-weight: var(--vs-font-weight-medium);
  }

  .vs-body {
    color: var(--vs-color-text-secondary);
    font-size: var(--vs-font-size-4);
  }

  .vs-caption {
    color: var(--vs-color-text-muted);
    font-size: var(--vs-font-size-2);
  }

  .vs-label {
    color: var(--vs-color-text-secondary);
    font-size: var(--vs-font-size-1);
    font-weight: var(--vs-font-weight-semibold);
    letter-spacing: var(--vs-letter-spacing-label);
    line-height: 1.35;
    text-transform: uppercase;
  }

  .vs-code {
    font-family: var(--vs-font-mono);
    font-size: 0.92em;
  }

  .vs-link {
    color: var(--vs-color-interactive);
    font-weight: var(--vs-font-weight-semibold);
    text-decoration-color: var(--vs-coral);
    text-decoration-thickness: 0.125rem;
    text-underline-offset: 0.2em;
  }

  .vs-link:hover {
    color: var(--vs-color-interactive-hover);
    text-decoration-thickness: 0.1875rem;
  }

  .vs-divider {
    width: 100%;
    height: var(--vs-border-width);
    margin: 0;
    border: 0;
    background: var(--vs-color-border);
  }
}

@layer vs-components {
  /* Brand */
  .vs-brand-symbol {
    display: block;
    width: var(--vs-logo-width);
    height: var(--vs-logo-height);
    flex: 0 0 auto;
    object-fit: contain;
  }

  .vs-brand-symbol--sm {
    --vs-logo-module: 0.375rem;
  }

  .vs-brand-symbol--lg {
    --vs-logo-module: 0.75rem;
  }

  .vs-brand-master {
    display: block;
    overflow: hidden;
    border: 0;
    background-color: var(--vs-brand-master-canvas);
    background-image: url("../assets/brand/venue-sign-logo-master.png");
    background-repeat: no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    user-select: none;
  }

  /* Crop measured from the supplied 1448 x 1086 master, not reconstructed text. */
  .vs-brand-master--symbol {
    aspect-ratio: 307 / 384;
    background-position: 50.833% 34.188%;
    background-size: 471.661% auto;
  }

  .vs-brand-master--wordmark {
    aspect-ratio: 654 / 120;
    background-position: 51.134% 68.323%;
    background-size: 221.407% auto;
  }

  .vs-brand-master--lockup {
    aspect-ratio: 687 / 602;
    background-position: 50.986% 49.587%;
    background-size: 210.772% auto;
  }

  .vs-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--vs-space-3);
    min-width: 0;
  }

  .vs-product-name {
    min-width: 0;
    color: currentColor;
    font-size: var(--vs-font-size-5);
    font-weight: var(--vs-font-weight-semibold);
    letter-spacing: -0.015em;
    line-height: 1.1;
  }

  .vs-brand-tagline {
    color: var(--vs-color-text-secondary);
    font-size: var(--vs-font-size-3);
    line-height: 1.4;
  }

  /* Buttons */
  .vs-button {
    display: inline-flex;
    min-width: 0;
    min-height: var(--vs-control-height);
    align-items: center;
    justify-content: center;
    gap: var(--vs-space-2);
    padding: 0.625rem 1rem;
    border: var(--vs-border-width-strong) solid transparent;
    border-radius: var(--vs-radius-sm);
    background: var(--vs-color-interactive);
    color: var(--vs-color-text-inverse);
    cursor: pointer;
    font-weight: var(--vs-font-weight-semibold);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--vs-duration-fast) var(--vs-ease-standard),
      border-color var(--vs-duration-fast) var(--vs-ease-standard),
      color var(--vs-duration-fast) var(--vs-ease-standard),
      transform var(--vs-duration-fast) var(--vs-ease-standard);
  }

  .vs-button:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--vs-color-interactive-hover);
  }

  .vs-button:active:not(:disabled, [aria-disabled="true"]) {
    background: var(--vs-color-interactive-pressed);
    transform: translateY(1px);
  }

  .vs-button:disabled,
  .vs-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.48;
  }

  .vs-button--secondary {
    border-color: var(--vs-color-border-strong);
    background: var(--vs-color-surface);
    color: var(--vs-color-text);
  }

  .vs-button--secondary:hover:not(:disabled, [aria-disabled="true"]) {
    border-color: var(--vs-deep-ink);
    background: var(--vs-color-surface-subtle);
  }

  .vs-button--accent {
    background: var(--vs-mineral-lime);
    color: var(--vs-deep-ink);
  }

  .vs-button--accent:hover:not(:disabled, [aria-disabled="true"]) {
    background: #b9e13a;
  }

  .vs-button--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--vs-color-text);
  }

  .vs-button--quiet:hover:not(:disabled, [aria-disabled="true"]) {
    background: rgba(var(--vs-soft-sage-rgb), 0.3);
  }

  .vs-button--danger {
    background: var(--vs-color-danger);
    color: #fff;
  }

  .vs-button--sm {
    min-height: var(--vs-control-height-sm);
    padding: 0.35rem 0.7rem;
    font-size: var(--vs-font-size-2);
  }

  .vs-button--lg {
    min-height: var(--vs-control-height-lg);
    padding-inline: 1.25rem;
  }

  .vs-button--icon {
    width: var(--vs-control-height);
    padding-inline: 0;
  }

  .vs-button--cut {
    --vs-cut: var(--vs-cut-sm);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--vs-cut)) 0, 100% var(--vs-cut), 100% 100%, 0 100%);
  }

  .vs-button__icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
  }

  .vs-button.is-loading {
    cursor: wait;
  }

  .vs-button.is-loading .vs-button__label {
    opacity: 0.66;
  }

  .vs-button.is-loading::before {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: vs-spin 700ms linear infinite;
    content: "";
  }

  /* Fields */
  .vs-field {
    display: grid;
    gap: var(--vs-space-2);
    min-width: 0;
  }

  .vs-field__label {
    color: var(--vs-color-text);
    font-size: var(--vs-font-size-3);
    font-weight: var(--vs-font-weight-semibold);
    line-height: 1.35;
  }

  .vs-field__required {
    color: var(--vs-color-danger);
  }

  .vs-field__hint,
  .vs-field__message {
    margin: 0;
    color: var(--vs-color-text-muted);
    font-size: var(--vs-font-size-2);
    line-height: 1.4;
  }

  .vs-field__message--error {
    color: var(--vs-color-danger);
    font-weight: var(--vs-font-weight-medium);
  }

  .vs-input,
  .vs-select,
  .vs-textarea {
    width: 100%;
    min-width: 0;
    min-height: var(--vs-control-height);
    border: var(--vs-border-width-strong) solid var(--vs-color-border);
    border-radius: var(--vs-radius-sm);
    outline: 0;
    background: var(--vs-color-surface);
    color: var(--vs-color-text);
    font-size: var(--vs-font-size-3);
    transition:
      border-color var(--vs-duration-fast) var(--vs-ease-standard),
      box-shadow var(--vs-duration-fast) var(--vs-ease-standard),
      background-color var(--vs-duration-fast) var(--vs-ease-standard);
  }

  .vs-input,
  .vs-select {
    padding: 0.55rem 0.75rem;
  }

  .vs-textarea {
    min-height: 7.5rem;
    padding: 0.7rem 0.75rem;
    line-height: var(--vs-line-height-body);
    resize: vertical;
  }

  .vs-select {
    padding-right: 2.5rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2310251F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
  }

  .vs-input::placeholder,
  .vs-textarea::placeholder {
    color: var(--vs-color-text-muted);
    opacity: 0.82;
  }

  .vs-input:hover:not(:disabled),
  .vs-select:hover:not(:disabled),
  .vs-textarea:hover:not(:disabled) {
    border-color: var(--vs-color-border-strong);
  }

  .vs-input:focus,
  .vs-select:focus,
  .vs-textarea:focus {
    border-color: var(--vs-deep-ink);
    box-shadow: var(--vs-shadow-focus);
  }

  .vs-input:disabled,
  .vs-select:disabled,
  .vs-textarea:disabled {
    cursor: not-allowed;
    background: var(--vs-color-surface-muted);
    color: var(--vs-color-text-muted);
    opacity: 0.72;
  }

  .vs-field.is-invalid :where(.vs-input, .vs-select, .vs-textarea),
  :where(.vs-input, .vs-select, .vs-textarea)[aria-invalid="true"] {
    border-color: var(--vs-color-danger);
  }

  .vs-field.is-valid :where(.vs-input, .vs-select, .vs-textarea) {
    border-color: var(--vs-color-success);
  }

  .vs-input-group {
    display: flex;
    min-width: 0;
  }

  .vs-input-group > :where(.vs-input, .vs-select) {
    border-radius: 0;
  }

  .vs-input-group > :first-child {
    border-radius: var(--vs-radius-sm) 0 0 var(--vs-radius-sm);
  }

  .vs-input-group > :last-child {
    border-radius: 0 var(--vs-radius-sm) var(--vs-radius-sm) 0;
  }

  .vs-choice {
    display: inline-flex;
    min-height: var(--vs-touch-target);
    align-items: center;
    gap: var(--vs-space-2);
    color: var(--vs-color-text);
    cursor: pointer;
    font-size: var(--vs-font-size-3);
  }

  .vs-choice :where(input[type="checkbox"], input[type="radio"]) {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--vs-deep-ink);
  }

  .vs-switch {
    display: inline-flex;
    min-height: var(--vs-touch-target);
    align-items: center;
    gap: var(--vs-space-3);
    cursor: pointer;
  }

  .vs-switch__control {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border: var(--vs-border-width-strong) solid var(--vs-color-border-strong);
    border-radius: var(--vs-radius-pill);
    background: var(--vs-color-surface-muted);
    transition:
      background-color var(--vs-duration-fast) var(--vs-ease-standard),
      border-color var(--vs-duration-fast) var(--vs-ease-standard);
  }

  .vs-switch__control::after {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--vs-color-border-strong);
    content: "";
    transition:
      background-color var(--vs-duration-fast) var(--vs-ease-standard),
      transform var(--vs-duration-fast) var(--vs-ease-emphasized);
  }

  .vs-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .vs-switch input:checked + .vs-switch__control {
    border-color: var(--vs-deep-ink);
    background: var(--vs-deep-ink);
  }

  .vs-switch input:checked + .vs-switch__control::after {
    background: var(--vs-mineral-lime);
    transform: translateX(1.25rem);
  }

  .vs-switch input:focus-visible + .vs-switch__control {
    outline: 3px solid var(--vs-color-focus);
    outline-offset: 2px;
  }

  /* Chips and status */
  .vs-chip {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: var(--vs-space-1);
    padding: 0.2rem 0.625rem;
    border: var(--vs-border-width) solid var(--vs-color-border);
    border-radius: var(--vs-radius-pill);
    background: var(--vs-color-surface-subtle);
    color: var(--vs-color-text-secondary);
    font-size: var(--vs-font-size-1);
    font-weight: var(--vs-font-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
  }

  .vs-chip::before {
    width: 0.375rem;
    height: 0.375rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  .vs-chip--success {
    border-color: #acd0c0;
    background: var(--vs-color-success-surface);
    color: var(--vs-color-success);
  }

  .vs-chip--warning {
    border-color: #e6c985;
    background: var(--vs-color-warning-surface);
    color: var(--vs-color-warning);
  }

  .vs-chip--danger {
    border-color: #e5b1a9;
    background: var(--vs-color-danger-surface);
    color: var(--vs-color-danger);
  }

  .vs-chip--info {
    border-color: #acd0d9;
    background: var(--vs-color-info-surface);
    color: var(--vs-color-info);
  }

  .vs-chip--brand {
    border-color: #a7c737;
    background: var(--vs-color-highlight-soft);
    color: var(--vs-deep-ink);
  }

  /* Cards */
  .vs-card {
    position: relative;
    min-width: 0;
    border: var(--vs-border-width) solid var(--vs-color-border);
    border-radius: var(--vs-radius-lg);
    background: var(--vs-color-surface);
    box-shadow: var(--vs-shadow-1);
  }

  .vs-card--interactive {
    transition:
      border-color var(--vs-duration-base) var(--vs-ease-standard),
      box-shadow var(--vs-duration-base) var(--vs-ease-standard),
      transform var(--vs-duration-base) var(--vs-ease-standard);
  }

  .vs-card--interactive:hover {
    border-color: var(--vs-color-border-strong);
    box-shadow: var(--vs-shadow-2);
    transform: translateY(-1px);
  }

  .vs-card--cut {
    --vs-cut: var(--vs-cut-md);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--vs-cut)) 0, 100% var(--vs-cut), 100% 100%, 0 100%);
  }

  .vs-card--selected {
    border-color: var(--vs-deep-ink);
    box-shadow: inset 0 0 0 1px var(--vs-deep-ink);
  }

  .vs-card__header,
  .vs-card__body,
  .vs-card__footer {
    padding: var(--vs-space-5);
  }

  .vs-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vs-space-4);
    border-bottom: var(--vs-border-width) solid var(--vs-color-border);
  }

  .vs-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--vs-space-3);
    border-top: var(--vs-border-width) solid var(--vs-color-border);
  }

  /* Tables */
  .vs-table-wrap {
    width: 100%;
    overflow: auto;
    border: var(--vs-border-width) solid var(--vs-color-border);
    border-radius: var(--vs-radius-lg);
    background: var(--vs-color-surface);
    -webkit-overflow-scrolling: touch;
  }

  .vs-table {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
    color: var(--vs-color-text);
    font-size: var(--vs-font-size-3);
  }

  .vs-table th,
  .vs-table td {
    padding: 0.875rem 1rem;
    border-bottom: var(--vs-border-width) solid var(--vs-color-border);
    text-align: left;
    vertical-align: middle;
  }

  .vs-table th {
    background: var(--vs-color-surface-subtle);
    color: var(--vs-color-text-secondary);
    font-size: var(--vs-font-size-1);
    font-weight: var(--vs-font-weight-semibold);
    letter-spacing: var(--vs-letter-spacing-label);
    text-transform: uppercase;
  }

  .vs-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .vs-table tbody tr:hover {
    background: rgba(var(--vs-soft-sage-rgb), 0.15);
  }

  .vs-table__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--vs-space-1);
  }

  /* Dialog */
  .vs-dialog {
    width: min(36rem, calc(100vw - 2rem));
    max-height: min(48rem, calc(100dvh - 2rem));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: var(--vs-border-width) solid var(--vs-color-border-strong);
    border-radius: var(--vs-radius-xl);
    background: var(--vs-color-surface);
    color: var(--vs-color-text);
    box-shadow: var(--vs-shadow-2);
  }

  .vs-dialog--wide {
    width: min(54rem, calc(100vw - 2rem));
  }

  .vs-dialog::backdrop {
    background: var(--vs-color-overlay);
  }

  .vs-dialog[open] {
    animation: vs-dialog-enter var(--vs-duration-base) var(--vs-ease-emphasized);
  }

  .vs-dialog__header,
  .vs-dialog__body,
  .vs-dialog__footer {
    padding: var(--vs-space-5) var(--vs-space-6);
  }

  .vs-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vs-space-4);
    border-bottom: var(--vs-border-width) solid var(--vs-color-border);
  }

  .vs-dialog__body {
    max-height: min(32rem, calc(100dvh - 13rem));
    overflow: auto;
  }

  .vs-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--vs-space-3);
    border-top: var(--vs-border-width) solid var(--vs-color-border);
  }

  /* Drawer */
  .vs-drawer-backdrop {
    position: fixed;
    z-index: var(--vs-z-overlay);
    inset: 0;
    border: 0;
    background: var(--vs-color-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--vs-duration-base) var(--vs-ease-standard);
  }

  .vs-drawer-backdrop.is-open,
  .vs-drawer-backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }

  .vs-drawer {
    position: fixed;
    z-index: var(--vs-z-drawer);
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    width: min(30rem, 92vw);
    grid-template-rows: auto minmax(0, 1fr) auto;
    border-left: var(--vs-border-width) solid var(--vs-color-border);
    background: var(--vs-color-surface);
    box-shadow: var(--vs-shadow-2);
    transform: translateX(102%);
    visibility: hidden;
    transition:
      transform var(--vs-duration-slow) var(--vs-ease-emphasized),
      visibility 0s linear var(--vs-duration-slow);
  }

  .vs-drawer.is-open,
  .vs-drawer[data-open="true"],
  .vs-drawer[aria-hidden="false"] {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .vs-drawer__header,
  .vs-drawer__body,
  .vs-drawer__footer {
    padding: var(--vs-space-5) var(--vs-space-6);
  }

  .vs-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vs-space-4);
    border-bottom: var(--vs-border-width) solid var(--vs-color-border);
  }

  .vs-drawer__body {
    overflow: auto;
  }

  .vs-drawer__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--vs-space-3);
    border-top: var(--vs-border-width) solid var(--vs-color-border);
  }

  /* Tabs */
  .vs-tabs {
    display: flex;
    gap: var(--vs-space-1);
    overflow-x: auto;
    border-bottom: var(--vs-border-width) solid var(--vs-color-border);
    scrollbar-width: thin;
  }

  .vs-tab {
    position: relative;
    display: inline-flex;
    min-height: var(--vs-touch-target);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--vs-space-2);
    padding: 0.625rem 0.875rem;
    border: 0;
    background: transparent;
    color: var(--vs-color-text-secondary);
    cursor: pointer;
    font-weight: var(--vs-font-weight-semibold);
    text-decoration: none;
  }

  .vs-tab::after {
    position: absolute;
    right: 0.75rem;
    bottom: -1px;
    left: 0.75rem;
    height: 3px;
    background: transparent;
    content: "";
  }

  .vs-tab:hover {
    color: var(--vs-color-text);
  }

  .vs-tab.is-active,
  .vs-tab[aria-selected="true"] {
    color: var(--vs-color-text);
  }

  .vs-tab.is-active::after,
  .vs-tab[aria-selected="true"]::after {
    background: var(--vs-coral);
  }

  .vs-tab-panel[hidden] {
    display: none;
  }

  /* Stepper */
  .vs-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .vs-step {
    position: relative;
    display: grid;
    flex: 1 1 0;
    gap: var(--vs-space-2);
    justify-items: center;
    color: var(--vs-color-text-muted);
    text-align: center;
  }

  .vs-step:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: 0.875rem;
    left: calc(50% + 1.25rem);
    width: calc(100% - 2.5rem);
    height: 2px;
    background: var(--vs-color-border);
    content: "";
  }

  .vs-step__marker {
    position: relative;
    z-index: 1;
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border: var(--vs-border-width-strong) solid var(--vs-color-border-strong);
    border-radius: 50%;
    background: var(--vs-color-surface);
    color: var(--vs-color-text-secondary);
    font-size: var(--vs-font-size-1);
    font-weight: var(--vs-font-weight-bold);
  }

  .vs-step__label {
    max-width: 14ch;
    font-size: var(--vs-font-size-2);
    font-weight: var(--vs-font-weight-semibold);
    line-height: 1.3;
  }

  .vs-step.is-complete {
    color: var(--vs-color-success);
  }

  .vs-step.is-complete .vs-step__marker {
    border-color: var(--vs-deep-ink);
    background: var(--vs-deep-ink);
    color: var(--vs-mineral-lime);
  }

  .vs-step.is-complete::after {
    background: var(--vs-deep-ink);
  }

  .vs-step.is-current,
  .vs-step[aria-current="step"] {
    color: var(--vs-color-text);
  }

  .vs-step.is-current .vs-step__marker,
  .vs-step[aria-current="step"] .vs-step__marker {
    border-color: var(--vs-deep-ink);
    box-shadow: 0 0 0 4px var(--vs-mineral-lime);
  }

  /* Toast */
  .vs-toast-region {
    position: fixed;
    z-index: var(--vs-z-toast);
    top: var(--vs-space-4);
    right: var(--vs-space-4);
    display: grid;
    width: min(24rem, calc(100vw - 2rem));
    gap: var(--vs-space-3);
    pointer-events: none;
  }

  .vs-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--vs-space-3);
    align-items: start;
    padding: var(--vs-space-4);
    border: var(--vs-border-width) solid var(--vs-color-border-strong);
    border-left: 0.25rem solid var(--vs-deep-ink);
    border-radius: var(--vs-radius-md);
    background: var(--vs-color-surface);
    box-shadow: var(--vs-shadow-2);
    pointer-events: auto;
    animation: vs-toast-enter var(--vs-duration-base) var(--vs-ease-emphasized);
  }

  .vs-toast--success {
    border-left-color: var(--vs-color-success);
  }

  .vs-toast--warning {
    border-left-color: var(--vs-color-warning);
  }

  .vs-toast--danger {
    border-left-color: var(--vs-color-danger);
  }

  .vs-toast__title {
    margin: 0;
    font-size: var(--vs-font-size-3);
    font-weight: var(--vs-font-weight-semibold);
  }

  .vs-toast__message {
    margin: var(--vs-space-1) 0 0;
    color: var(--vs-color-text-secondary);
    font-size: var(--vs-font-size-2);
  }

  /* Skeleton and empty state */
  .vs-skeleton {
    display: block;
    min-height: 1em;
    border-radius: var(--vs-radius-xs);
    background: var(--vs-color-surface-muted);
    animation: vs-skeleton-pulse 1.35s ease-in-out infinite alternate;
    color: transparent;
    pointer-events: none;
    user-select: none;
  }

  .vs-skeleton--circle {
    border-radius: 50%;
    aspect-ratio: 1;
  }

  .vs-empty {
    display: grid;
    min-height: 18rem;
    place-items: center;
    padding: var(--vs-space-10) var(--vs-space-6);
    text-align: center;
  }

  .vs-empty__content {
    display: grid;
    max-width: 28rem;
    gap: var(--vs-space-3);
    justify-items: center;
  }

  .vs-empty__symbol {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    place-items: center;
    border: var(--vs-border-width) solid var(--vs-color-border);
    border-radius: var(--vs-radius-xl);
    background: var(--vs-color-highlight-soft);
    color: var(--vs-deep-ink);
  }

  .vs-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--vs-space-3);
    margin-top: var(--vs-space-2);
  }

  @keyframes vs-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes vs-dialog-enter {
    from {
      opacity: 0;
      transform: translateY(0.5rem) scale(0.985);
    }
  }

  @keyframes vs-toast-enter {
    from {
      opacity: 0;
      transform: translateX(0.75rem);
    }
  }

  @keyframes vs-skeleton-pulse {
    from {
      opacity: 0.55;
    }

    to {
      opacity: 1;
    }
  }
}

@layer vs-layout {
  .vs-app-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-areas:
      "sidebar topbar"
      "sidebar main";
    grid-template-columns: var(--vs-sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--vs-topbar-height) minmax(0, 1fr);
    background: var(--vs-color-bg);
  }

  .vs-sidebar {
    position: sticky;
    z-index: var(--vs-z-sticky);
    top: 0;
    grid-area: sidebar;
    display: grid;
    height: 100dvh;
    min-width: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-right: var(--vs-border-width) solid rgba(255, 255, 255, 0.12);
    background: var(--vs-deep-ink);
    color: var(--vs-color-text-inverse);
  }

  .vs-sidebar__header,
  .vs-sidebar__footer {
    padding: var(--vs-space-5);
  }

  .vs-sidebar__header {
    min-height: var(--vs-topbar-height);
    display: flex;
    align-items: center;
  }

  .vs-sidebar__nav {
    min-height: 0;
    overflow-y: auto;
    padding: var(--vs-space-2) var(--vs-space-3) var(--vs-space-5);
    scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
    scrollbar-width: thin;
  }

  .vs-nav-section + .vs-nav-section {
    margin-top: var(--vs-space-5);
  }

  .vs-nav-section__label {
    margin: 0 0 var(--vs-space-2);
    padding: 0 var(--vs-space-3);
    color: rgba(255, 255, 255, 0.58);
    font-size: var(--vs-font-size-1);
    font-weight: var(--vs-font-weight-semibold);
    letter-spacing: var(--vs-letter-spacing-label);
    text-transform: uppercase;
  }

  .vs-nav-item {
    display: flex;
    min-height: var(--vs-touch-target);
    align-items: center;
    gap: var(--vs-space-3);
    padding: 0.625rem 0.75rem;
    border: var(--vs-border-width) solid transparent;
    border-radius: var(--vs-radius-sm);
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--vs-font-size-3);
    font-weight: var(--vs-font-weight-medium);
    text-decoration: none;
    transition:
      background-color var(--vs-duration-fast) var(--vs-ease-standard),
      color var(--vs-duration-fast) var(--vs-ease-standard);
  }

  .vs-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .vs-nav-item.is-active,
  .vs-nav-item[aria-current="page"] {
    background: var(--vs-mineral-lime);
    color: var(--vs-deep-ink);
  }

  .vs-nav-item__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
  }

  .vs-nav-item__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vs-topbar {
    position: sticky;
    z-index: var(--vs-z-sticky);
    top: 0;
    grid-area: topbar;
    display: flex;
    min-width: 0;
    min-height: var(--vs-topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--vs-space-4);
    padding: 0 var(--vs-page-gutter);
    border-bottom: var(--vs-border-width) solid var(--vs-color-border);
    background: rgba(246, 240, 231, 0.94);
    backdrop-filter: blur(12px);
  }

  .vs-topbar__start,
  .vs-topbar__end,
  .vs-page-header__actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--vs-space-3);
  }

  .vs-main {
    grid-area: main;
    min-width: 0;
    padding: var(--vs-space-6) var(--vs-page-gutter) var(--vs-space-12);
  }

  .vs-main__inner {
    width: min(100%, var(--vs-content-max));
    margin-inline: auto;
  }

  .vs-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vs-space-6);
    margin-bottom: var(--vs-space-6);
  }

  .vs-page-header__copy {
    display: grid;
    max-width: 48rem;
    gap: var(--vs-space-2);
  }

  .vs-grid {
    display: grid;
    min-width: 0;
    gap: var(--vs-space-5);
  }

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

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

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

  .vs-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vs-space-3);
  }

  .vs-stack {
    display: grid;
    gap: var(--vs-space-4);
  }

  .vs-stack--sm {
    gap: var(--vs-space-2);
  }

  .vs-stack--lg {
    gap: var(--vs-space-6);
  }

  .vs-mobile-menu-button,
  .vs-bottom-nav,
  .vs-sidebar-scrim {
    display: none;
  }

  @media (max-width: 79.999rem) {
    .vs-grid--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 63.999rem) and (min-width: 48rem) {
    .vs-app-shell {
      grid-template-columns: var(--vs-sidebar-collapsed-width) minmax(0, 1fr);
    }

    .vs-sidebar__header,
    .vs-sidebar__footer {
      justify-content: center;
      padding-inline: var(--vs-space-3);
    }

    .vs-sidebar__nav {
      padding-inline: var(--vs-space-2);
    }

    .vs-nav-section__label,
    .vs-nav-item__label,
    .vs-sidebar .vs-product-name,
    .vs-sidebar .vs-brand-tagline {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .vs-nav-item {
      justify-content: center;
      padding-inline: 0;
    }

    .vs-grid--3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 47.999rem) {
    :root,
    [data-venue-theme="light"] {
      --vs-topbar-height: 3.75rem;
      --vs-page-gutter: 1rem;
      --vs-touch-target: 3rem;
    }

    .vs-app-shell {
      grid-template-areas:
        "topbar"
        "main"
        "bottomnav";
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: var(--vs-topbar-height) minmax(0, 1fr) var(--vs-bottom-nav-height);
    }

    .vs-mobile-menu-button {
      display: inline-flex;
    }

    .vs-sidebar {
      position: fixed;
      z-index: var(--vs-z-drawer);
      top: 0;
      bottom: 0;
      left: 0;
      width: min(var(--vs-sidebar-width), 88vw);
      height: 100dvh;
      transform: translateX(-102%);
      visibility: hidden;
      transition:
        transform var(--vs-duration-slow) var(--vs-ease-emphasized),
        visibility 0s linear var(--vs-duration-slow);
    }

    .vs-app-shell[data-sidebar-open="true"] .vs-sidebar,
    .vs-sidebar.is-open {
      transform: translateX(0);
      visibility: visible;
      transition-delay: 0s;
    }

    .vs-sidebar-scrim {
      position: fixed;
      z-index: calc(var(--vs-z-drawer) - 1);
      inset: 0;
      border: 0;
      background: var(--vs-color-overlay);
    }

    .vs-app-shell[data-sidebar-open="true"] .vs-sidebar-scrim,
    .vs-sidebar-scrim.is-open {
      display: block;
    }

    .vs-topbar {
      padding-inline: var(--vs-page-gutter);
    }

    .vs-main {
      padding-top: var(--vs-space-5);
      padding-bottom: calc(var(--vs-space-8) + env(safe-area-inset-bottom, 0px));
    }

    .vs-bottom-nav {
      position: sticky;
      z-index: var(--vs-z-sticky);
      bottom: 0;
      grid-area: bottomnav;
      display: grid;
      min-width: 0;
      grid-auto-columns: minmax(3.25rem, 1fr);
      grid-auto-flow: column;
      padding: var(--vs-space-1) var(--vs-space-2) max(var(--vs-space-1), env(safe-area-inset-bottom, 0px));
      border-top: var(--vs-border-width) solid var(--vs-color-border);
      background: var(--vs-color-surface);
    }

    .vs-bottom-nav__item {
      display: grid;
      min-width: 0;
      min-height: 3.5rem;
      place-items: center;
      align-content: center;
      gap: 0.125rem;
      padding: var(--vs-space-1);
      border: 0;
      border-radius: var(--vs-radius-sm);
      background: transparent;
      color: var(--vs-color-text-muted);
      font-size: 0.6875rem;
      font-weight: var(--vs-font-weight-semibold);
      line-height: 1.15;
      text-align: center;
      text-decoration: none;
    }

    .vs-bottom-nav__item:hover {
      background: var(--vs-color-surface-subtle);
      color: var(--vs-color-text);
    }

    .vs-bottom-nav__item.is-active,
    .vs-bottom-nav__item[aria-current="page"] {
      background: var(--vs-color-highlight-soft);
      color: var(--vs-deep-ink);
    }

    .vs-bottom-nav__icon {
      width: 1.25rem;
      height: 1.25rem;
    }

    .vs-page-header {
      display: grid;
      gap: var(--vs-space-4);
    }

    .vs-page-header__actions {
      width: 100%;
      flex-wrap: wrap;
    }

    .vs-grid--2,
    .vs-grid--3,
    .vs-grid--4 {
      grid-template-columns: minmax(0, 1fr);
    }

    .vs-card__header,
    .vs-card__body,
    .vs-card__footer,
    .vs-dialog__header,
    .vs-dialog__body,
    .vs-dialog__footer,
    .vs-drawer__header,
    .vs-drawer__body,
    .vs-drawer__footer {
      padding: var(--vs-space-4);
    }

    .vs-dialog {
      width: calc(100vw - 1rem);
      max-height: calc(100dvh - 1rem);
      border-radius: var(--vs-radius-lg);
    }

    .vs-drawer {
      top: auto;
      left: 0;
      width: 100%;
      max-height: min(88dvh, 46rem);
      border-top: var(--vs-border-width) solid var(--vs-color-border-strong);
      border-left: 0;
      border-radius: var(--vs-radius-xl) var(--vs-radius-xl) 0 0;
      transform: translateY(102%);
    }

    .vs-drawer.is-open,
    .vs-drawer[data-open="true"],
    .vs-drawer[aria-hidden="false"] {
      transform: translateY(0);
    }

    .vs-drawer__body {
      overscroll-behavior: contain;
    }

    .vs-toast-region {
      top: auto;
      right: var(--vs-space-2);
      bottom: calc(var(--vs-bottom-nav-height) + var(--vs-space-2) + env(safe-area-inset-bottom, 0px));
      left: var(--vs-space-2);
      width: auto;
    }

    .vs-stepper {
      display: grid;
      gap: var(--vs-space-3);
    }

    .vs-step {
      grid-template-columns: auto minmax(0, 1fr);
      justify-items: start;
      text-align: left;
    }

    .vs-step:not(:last-child)::after {
      top: 2rem;
      bottom: -0.75rem;
      left: 0.8125rem;
      width: 2px;
      height: auto;
    }

    .vs-step__label {
      max-width: none;
      padding-top: 0.25rem;
    }
  }

  @media (max-width: 29.999rem) {
    .vs-topbar__end .vs-button:not(.vs-button--icon) .vs-button__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .vs-dialog__footer,
    .vs-drawer__footer,
    .vs-card__footer {
      align-items: stretch;
      flex-direction: column-reverse;
    }

    .vs-dialog__footer .vs-button,
    .vs-drawer__footer .vs-button,
    .vs-card__footer .vs-button {
      width: 100%;
    }
  }
}

@layer vs-utilities {
  .vs-hidden {
    display: none !important;
  }

  .vs-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vs-wrap-anywhere {
    overflow-wrap: anywhere;
  }

  .vs-scroll-lock {
    overflow: hidden;
  }

  .vs-text-muted {
    color: var(--vs-color-text-muted);
  }

  .vs-text-success {
    color: var(--vs-color-success);
  }

  .vs-text-danger {
    color: var(--vs-color-danger);
  }

  .vs-w-full {
    width: 100%;
  }

  .vs-min-w-0 {
    min-width: 0;
  }
}

@layer vs-accessibility {
  .vs-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .vs-skip-link {
    position: fixed;
    z-index: calc(var(--vs-z-toast) + 1);
    top: var(--vs-space-3);
    left: var(--vs-space-3);
    padding: var(--vs-space-3) var(--vs-space-4);
    border: var(--vs-border-width-strong) solid var(--vs-deep-ink);
    border-radius: var(--vs-radius-sm);
    background: var(--vs-mineral-lime);
    color: var(--vs-deep-ink);
    font-weight: var(--vs-font-weight-bold);
    transform: translateY(calc(-100% - var(--vs-space-6)));
    transition: transform var(--vs-duration-fast) var(--vs-ease-standard);
  }

  .vs-skip-link:focus {
    transform: translateY(0);
  }

  :where(
      .vs-button,
      .vs-link,
      .vs-tab,
      .vs-nav-item,
      .vs-bottom-nav__item,
      .vs-choice,
      .vs-switch,
      .vs-input,
      .vs-select,
      .vs-textarea,
      .vs-skip-link
    ):focus-visible {
    outline: 3px solid var(--vs-color-focus);
    outline-offset: 3px;
  }

  .vs-sidebar :where(.vs-nav-item, .vs-button, .vs-link):focus-visible {
    outline-color: var(--vs-mineral-lime);
    box-shadow: 0 0 0 2px var(--vs-deep-ink);
  }

  @media (prefers-contrast: more) {
    :root,
    [data-venue-theme="light"] {
      --vs-color-border: #78968a;
      --vs-color-border-strong: var(--vs-deep-ink);
      --vs-color-text-muted: #435d54;
    }

    .vs-card,
    .vs-table-wrap,
    .vs-dialog,
    .vs-drawer {
      border-width: var(--vs-border-width-strong);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root,
    [data-venue-theme="light"] {
      --vs-duration-fast: 1ms;
      --vs-duration-base: 1ms;
      --vs-duration-slow: 1ms;
    }

    :where(.vs-app, .vs-overlay-root) *,
    :where(.vs-app, .vs-overlay-root) *::before,
    :where(.vs-app, .vs-overlay-root) *::after {
      scroll-behavior: auto !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
    }
  }

  @media (forced-colors: active) {
    :root,
    [data-venue-theme="light"] {
      --vs-color-bg: Canvas;
      --vs-color-surface: Canvas;
      --vs-color-surface-subtle: Canvas;
      --vs-color-surface-muted: Canvas;
      --vs-color-text: CanvasText;
      --vs-color-text-secondary: CanvasText;
      --vs-color-text-muted: CanvasText;
      --vs-color-border: ButtonBorder;
      --vs-color-border-strong: ButtonText;
      --vs-color-interactive: ButtonFace;
      --vs-color-interactive-hover: Highlight;
      --vs-color-text-inverse: ButtonText;
      --vs-color-focus: Highlight;
    }

    .vs-brand-symbol,
    .vs-brand-master {
      forced-color-adjust: none;
    }

    .vs-button,
    .vs-chip,
    .vs-card,
    .vs-input,
    .vs-select,
    .vs-textarea,
    .vs-table-wrap,
    .vs-dialog,
    .vs-drawer,
    .vs-tab,
    .vs-nav-item,
    .vs-bottom-nav__item {
      border: 1px solid ButtonText;
    }

    .vs-button:focus-visible,
    .vs-tab:focus-visible,
    .vs-nav-item:focus-visible,
    .vs-bottom-nav__item:focus-visible,
    .vs-input:focus-visible,
    .vs-select:focus-visible,
    .vs-textarea:focus-visible {
      outline: 3px solid Highlight;
    }
  }

  @media print {
    :root,
    [data-venue-theme="light"] {
      --vs-color-bg: #fff;
      --vs-color-surface: #fff;
      --vs-color-text: #000;
      --vs-color-text-secondary: #222;
      --vs-color-text-muted: #444;
      --vs-color-border: #aaa;
    }

    .vs-app-shell {
      display: block;
      min-height: auto;
      background: #fff;
    }

    .vs-sidebar,
    .vs-topbar,
    .vs-bottom-nav,
    .vs-mobile-menu-button,
    .vs-sidebar-scrim,
    .vs-toast-region,
    .vs-drawer-backdrop,
    .vs-drawer,
    .vs-dialog__footer,
    .vs-page-header__actions,
    .vs-table__actions,
    .vs-print-hidden {
      display: none !important;
    }

    .vs-main {
      padding: 0;
    }

    .vs-card,
    .vs-table-wrap {
      break-inside: avoid;
      box-shadow: none;
    }

    .vs-table-wrap {
      overflow: visible;
    }

    .vs-table {
      min-width: 0;
    }

    .vs-app a[href]::after {
      color: #444;
      content: " (" attr(href) ")";
      font-size: 0.8em;
      font-weight: normal;
    }

    .vs-app a[href^="#"]::after,
    .vs-app a[href^="javascript:"]::after {
      content: "";
    }
  }
}